/* Doutor Perito — Painel/Admin. Override do Bootstrap 5.3 com a identidade "Teal & Areia".
   Reestiliza os padrões do Bootstrap sem alterar o markup das views. */
:root {
    /* Marca */
    --dp-teal: #0F8A76;
    --dp-teal-hover: #0C7464;
    --dp-teal-soft: #E7F4F0;
    --dp-verde: #0A4F45;
    --dp-menta: #5FD9C2;
    --dp-ambar: #E8A04A;
    --dp-areia: #EFE9DD;
    --dp-carvao: #21302C;

    /* Neutros */
    --dp-page-bg: #F4F1EA;
    --dp-surface: #FFFFFF;
    --dp-field-bg: #FFFDF8;
    --dp-border: #E3DDD0;
    --dp-border-input: #D8E3DF;
    --dp-text: #21302C;
    --dp-text-2: #5F7069;
    --dp-text-3: #7A8884;
    --dp-placeholder: #9AA39A;

    /* Níveis de perito */
    --dp-ouro-dot: #D4A449;    --dp-ouro-bg: #F5E6C8;    --dp-ouro-fg: #8A6418;
    --dp-prata-dot: #9AA3AD;   --dp-prata-bg: #E8EBEE;   --dp-prata-fg: #5C6670;
    --dp-bronze-dot: #B08D57;  --dp-bronze-bg: #EFE1D3;  --dp-bronze-fg: #7A5230;

    /* Tipografia */
    --dp-font-sans: 'Figtree', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --dp-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ===== Bootstrap 5 — paleta Doutor Perito ===== */
    --bs-primary: var(--dp-teal);
    --bs-secondary: var(--dp-menta);
    --bs-dark: var(--dp-verde);
    --bs-light: var(--dp-areia);
    --bs-warning: var(--dp-ambar);
    --bs-primary-rgb: 15, 138, 118;
    --bs-secondary-rgb: 95, 217, 194;
    --bs-success-rgb: 15, 138, 118;

    --bs-body-bg: var(--dp-page-bg);
    --bs-body-color: var(--dp-text);
    --bs-body-font-family: var(--dp-font-sans);
    --bs-font-sans-serif: var(--dp-font-sans);
    --bs-emphasis-color: var(--dp-verde);
    --bs-border-color: var(--dp-border);
    --bs-secondary-color: var(--dp-text-2);

    --bs-link-color: var(--dp-teal);
    --bs-link-color-rgb: 15, 138, 118;
    --bs-link-hover-color: var(--dp-teal-hover);
    --bs-link-hover-color-rgb: 12, 116, 100;
    --bs-focus-ring-color: rgba(15, 138, 118, .25);

    /* ===== Tempus Dominus (datepicker) — paleta Doutor Perito =====
       Sobrescreve os tokens --td-* do vendor (padrão azul #0d6efd) sem
       tocar no tempus-dominus.min.css. */
    --td-widget-background: var(--dp-surface);
    --td-font-color: var(--dp-text);
    --td-active-bg: var(--dp-teal);
    --td-active-color: #fff;
    --td-active-border-color: var(--dp-surface);
    --td-range-bg: var(--dp-teal-hover);
    --td-btn-hover-bg: var(--dp-teal-soft);
    --td-disabled-color: var(--dp-text-3);
    --td-dow-color: var(--dp-text-2);
    --td-alternate-color: var(--dp-text-3);
    --td-secondary-border-color: var(--dp-border);
}

/* ===== Base ===== */
body {
    font-family: var(--dp-font-sans);
    background: var(--dp-page-bg);
    color: var(--dp-text);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
    font-family: var(--dp-font-sans);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--dp-verde);
}
a { color: var(--dp-teal); }
a:hover { color: var(--dp-teal-hover); }
::selection { background: var(--dp-teal); color: #fff; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* ===== Navbar (template usa .navbar-light .bg-white .border-bottom .box-shadow) ===== */
.navbar.bg-white { background-color: var(--dp-surface) !important; }
.navbar .border-bottom, .border-bottom { border-bottom-color: var(--dp-border) !important; }
.border-top { border-top-color: var(--dp-border) !important; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(20, 40, 35, .06) !important; }
.navbar-brand { color: var(--dp-verde) !important; font-weight: 800; letter-spacing: -0.4px; }
.navbar .nav-link { color: var(--dp-text-2) !important; font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--dp-teal) !important; }

/* ===== Botões ===== */
.btn { border-radius: 11px; font-weight: 700; }
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dp-teal);
    --bs-btn-border-color: var(--dp-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dp-teal-hover);
    --bs-btn-hover-border-color: var(--dp-teal-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dp-teal-hover);
    --bs-btn-active-border-color: var(--dp-teal-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dp-teal);
    --bs-btn-disabled-border-color: var(--dp-teal);
    box-shadow: 0 8px 22px rgba(15, 138, 118, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-group .btn-primary, .input-group .btn-primary { box-shadow: none; }

.btn-outline-primary {
    --bs-btn-color: var(--dp-teal);
    --bs-btn-border-color: var(--dp-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dp-teal);
    --bs-btn-hover-border-color: var(--dp-teal);
    --bs-btn-active-bg: var(--dp-teal);
    --bs-btn-active-border-color: var(--dp-teal);
}
.btn-outline-secondary {
    --bs-btn-color: var(--dp-text);
    --bs-btn-border-color: var(--dp-border-input);
    --bs-btn-hover-color: var(--dp-verde);
    --bs-btn-hover-bg: var(--dp-areia);
    --bs-btn-hover-border-color: var(--dp-border);
}

/* Anel de foco/clique na cor da marca (substitui o azul do Bootstrap). */
.btn-primary, .btn-outline-primary,
.btn-success, .btn-outline-success,
.btn-secondary, .btn-outline-secondary,
.btn-dark, .btn-outline-dark,
.btn-danger, .btn-outline-danger,
.btn-warning, .btn-outline-warning {
    --bs-btn-focus-shadow-rgb: 15, 138, 118;
}

.text-primary { color: var(--dp-teal) !important; }
.bg-primary { background-color: var(--dp-teal) !important; }
.text-bg-primary { background-color: var(--dp-teal) !important; color: #fff !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--dp-teal);
    color: #fff;
}

/* ===== Formulários — foco teal em vez de azul ===== */
.form-control, .form-select {
    background-color: var(--dp-field-bg);
    border-color: var(--dp-border-input);
    color: var(--dp-text);
    border-radius: 11px;
}
.form-control::placeholder { color: var(--dp-placeholder); }
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.btn-check:focus + .btn,
.btn-check:focus-visible + .btn,
.btn-close:focus,
.page-link:focus,
.dropdown-toggle:focus-visible {
    border-color: var(--dp-teal);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.form-check-input:checked {
    background-color: var(--dp-teal);
    border-color: var(--dp-teal);
}

/* Switch (form-switch) padronizado: sem recuo de label, alinhado e maior. */
.especialidades-switch-bs {
    min-height: auto;
    padding-left: 0;
    margin: 0;
}
.especialidades-switch-bs .form-check-input {
    width: 2.75em;
    height: 1.5em;
    margin: 0;
    float: none;
    cursor: pointer;
}

/* Item ativo de list-group e paginação (azul fixo por padrão) -> teal. */
.list-group {
    --bs-list-group-active-bg: var(--dp-teal);
    --bs-list-group-active-border-color: var(--dp-teal);
}
.pagination {
    --bs-pagination-color: var(--dp-teal);
    --bs-pagination-hover-color: var(--dp-teal-hover);
    --bs-pagination-focus-color: var(--dp-teal);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
    --bs-pagination-active-bg: var(--dp-teal);
    --bs-pagination-active-border-color: var(--dp-teal);
}

/* ===== Cards / superfícies ===== */
.card {
    --bs-card-bg: var(--dp-surface);
    --bs-card-border-color: var(--dp-border);
    border-radius: 16px;
}

/* ===== Footer do template (.footer .text-muted) ===== */
.footer { color: var(--dp-text-2) !important; }
.footer a { color: var(--dp-teal); }

/* ===== Utilitários da marca ===== */
.text-accent { color: var(--dp-teal) !important; }
.text-menta { color: var(--dp-menta) !important; }
.dp-eyebrow {
    font-family: var(--dp-font-mono);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--dp-teal);
}

/* Badges de nível de perito */
.dp-badge {
    font-family: var(--dp-font-mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
}
.dp-nivel-ouro   { background: var(--dp-ouro-bg);   color: var(--dp-ouro-fg); }
.dp-nivel-prata  { background: var(--dp-prata-bg);  color: var(--dp-prata-fg); }
.dp-nivel-bronze { background: var(--dp-bronze-bg); color: var(--dp-bronze-fg); }

/* ============================================================
   Menu lateral responsivo (off-canvas no mobile).
   admin.css é o último do bundle, então estas regras vencem as
   duplicadas do home.css por ordem de origem.
   ============================================================ */
.app-topbar { display: none; }
.app-backdrop { display: none; }

@media (max-width: 768px) {
    .app-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: #075A4D;
        color: #FFFFFF;
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    .app-topbar-toggle {
        border: 0;
        background: transparent;
        color: #FFFFFF;
        font-size: 26px;
        line-height: 1;
        padding: 4px 8px;
        cursor: pointer;
    }

    .app-topbar-brand {
        color: #FFFFFF;
        text-decoration: none;
        font-weight: 800;
        letter-spacing: -0.5px;
    }

    .app-topbar-brand strong { color: #61D0BB; }

    .app-layout { display: block; }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 82%;
        min-width: 0;
        max-width: 300px;
        min-height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1045;
        overflow-y: auto;
    }

    .sidebar.is-open { transform: translateX(0); }

    .app-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }

    .page-content {
        padding: 20px 16px;
        min-height: auto;
    }
}

/* Desktop: menu lateral fixo à viewport, com rolagem interna se necessário —
   assim o "Sair" no rodapé fica sempre visível sem rolar a página toda. */
@media (min-width: 769px) {
    .sidebar {
        position: fixed;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

/* Controles de formulário nativos (checkbox, radio, range) na cor da marca. */
:root { accent-color: var(--dp-teal); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--dp-teal); }

/* ===== Datepicker (ng-date / tempus-dominus): paleta da marca + ícone Material ===== */
.tempus-dominus-widget {
    --td-active-bg: var(--dp-teal);
    --td-active-border-color: var(--dp-teal);
    --td-btn-hover-bg: var(--dp-teal-soft);
}

.dp-date { position: relative; }
.dp-date > .form-control { padding-right: 42px; }
.dp-date > .dp-date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dp-teal);
    font-size: 20px;
    pointer-events: none;
}

/* Ícones do Tempus Dominus via Material Icons Round (sem FontAwesome no projeto).
   As classes td-i-* vêm da config em angular.helpers.js. */
.tempus-dominus-widget [class*="td-i-"] {
    font-size: 1.25em;
    line-height: 1;
    vertical-align: middle;
}
.tempus-dominus-widget .td-i-up::before { content: 'keyboard_arrow_up'; }
.tempus-dominus-widget .td-i-down::before { content: 'keyboard_arrow_down'; }
.tempus-dominus-widget .td-i-prev::before { content: 'chevron_left'; }
.tempus-dominus-widget .td-i-next::before { content: 'chevron_right'; }
.tempus-dominus-widget .td-i-time::before { content: 'schedule'; }
.tempus-dominus-widget .td-i-date::before { content: 'event'; }
.tempus-dominus-widget .td-i-today::before { content: 'today'; }
.tempus-dominus-widget .td-i-clear::before { content: 'delete'; }
.tempus-dominus-widget .td-i-close::before { content: 'close'; }

/* Dropdown (menu de ações): item ativo/selecionado na paleta (não no azul do Bootstrap). */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--dp-teal);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-hover-bg: var(--dp-teal-soft);
    --bs-dropdown-link-hover-color: var(--dp-verde);
}
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--dp-teal);
    color: #fff;
}

/* ===== Seleção visual (especialidades/cidades) — list-group sem checkbox aparente ===== */
.medico-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
.medico-selection-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--dp-border-input);
    border-radius: 12px;
    background: var(--dp-field-bg);
    color: var(--dp-text);
    font-weight: 600;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.medico-selection-item:hover { border-color: var(--dp-teal); }
.medico-selection-item.is-selected {
    border-color: var(--dp-teal);
    background: var(--dp-teal-soft);
    color: var(--dp-verde);
}
.medico-selection-check {
    font-size: 20px;
    color: var(--dp-text-3);
    flex-shrink: 0;
    transition: color .15s ease;
}
.medico-selection-item.is-selected .medico-selection-check { color: var(--dp-teal); }

/* ============================================================
   Datatable padronizado (diretiva <datatable>) — visual da Contratante.
   Neutraliza o table-striped/borderless da diretiva e aplica a mesma
   roupagem das listas + indicador de ordenação em Material Icons.
   ============================================================ */
.datatable-wrapper {
    overflow-x: auto;
    border: 1px solid var(--dp-border);
    border-radius: 12px;
}
table.datatable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 0;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--dp-text);
}
table.datatable > thead > tr > th {
    padding: 14px 16px;
    background: var(--dp-page-bg);
    color: var(--dp-text-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-align: left;
    border: 0;
    white-space: nowrap;
}
table.datatable > tbody > tr > td {
    padding: 15px 16px;
    border-top: 1px solid var(--dp-border);
    color: var(--dp-text-2);
    vertical-align: middle;
}
table.datatable > tbody > tr:first-child > td { border-top: 0; }
table.datatable > tbody > tr:hover > td { background: var(--dp-teal-soft); }
table.datatable > tbody > tr.clickable { cursor: pointer; }

table.datatable th.hoverPointer { cursor: pointer; user-select: none; }
table.datatable th .sortorder::after {
    font-family: 'Material Icons Round';
    content: "\e5d8"; /* arrow_upward */
    font-size: 14px;
    margin-left: 4px;
    vertical-align: middle;
    color: var(--dp-teal);
}
table.datatable th .sortorder.reverse::after { content: "\e5db"; /* arrow_downward */ }

.perfil-selection-scroll {
    max-height: 430px;
    overflow-y: auto;
    padding-right: 6px;
}

.perfil-documento-texto {
    min-width: 0;
}

.sidebar-logo-svg {
    width: 60%;
    height: 60%;
    color: #fff;
}

.sidebar-history-label {
    font-size: 14px;
}