/* =========================================================
   PERFEX CUSTOM UI
   Identidade visual inspirada em eKyte / Mubisys
   ========================================================= */

:root {
    --ui-primary: #0066ff;
    --ui-primary-hover: #0052cc;
    --ui-primary-light: #eaf2ff;

    --ui-bg: #f5f7fa;
    --ui-card: #ffffff;

    --ui-text: #263238;
    --ui-text-muted: #7b8794;

    --ui-border: #e5eaf0;

    --ui-success: #22b573;
    --ui-warning: #f5a623;
    --ui-danger: #e53935;

    --ui-radius: 8px;
    --ui-radius-sm: 6px;

    --ui-shadow: 0 2px 8px rgba(38, 50, 56, 0.06);
    --ui-shadow-hover: 0 4px 14px rgba(38, 50, 56, 0.10);
}


/* =========================================================
   BASE
   ========================================================= */

body {
    background: var(--ui-bg);
    color: var(--ui-text);
}

a {
    color: var(--ui-primary);
}

a:hover,
a:focus {
    color: var(--ui-primary-hover);
}


/* =========================================================
   CONTEÚDO PRINCIPAL
   ========================================================= */

#content {
    background: var(--ui-bg);
}


/* =========================================================
   CARDS / PAINÉIS
   ========================================================= */

.panel,
.card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    background: var(--ui-card);
}


/* =========================================================
   BOTÕES
   ========================================================= */

.btn-primary {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
}


/* =========================================================
   INPUTS
   ========================================================= */

.form-control {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.10);
}


/* =========================================================
   TABELAS
   ========================================================= */

.table > thead > tr > th {
    background: #fafbfc;
    color: var(--ui-text-muted);
    border-bottom: 1px solid var(--ui-border);
    font-weight: 600;
}

.table > tbody > tr > td {
    border-top-color: var(--ui-border);
}

.table > tbody > tr:hover {
    background-color: #f8faff;
}


/* =========================================================
   ALERTAS
   ========================================================= */

.alert {
    border-radius: var(--ui-radius-sm);
}


/* =========================================================
   BADGES
   ========================================================= */

.label,
.badge {
    border-radius: 999px;
}