/* 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: sticky;
        top: 0;
        align-self: flex-start;
        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 */ }

/* Dialog de filtros: cabeçalho e ações fixos, com rolagem apenas nos campos. */
.dialog-filtros-medicos {
    width: min(860px, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 1rem;
    color: var(--bs-body-color, #212529);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 25%);
}
.dialog-filtros-medicos::backdrop { background: rgb(15 23 42 / 55%); }
.dialog-filtros-medicos > form { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); }
.dialog-filtros-header, .dialog-filtros-footer { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; flex-shrink: 0; }
.dialog-filtros-header { justify-content: space-between; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.dialog-filtros-body { padding: 1.5rem; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.dialog-filtros-footer { justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--bs-border-color, #dee2e6); }
@media (max-width: 575.98px) {
    .dialog-filtros-header, .dialog-filtros-body, .dialog-filtros-footer { padding: 1rem; }
}

/* Sugestões do UI Bootstrap dentro da camada nativa da dialog. */
.dialog-filtros-medicos .dropdown-menu { max-width: calc(100vw - 4rem); max-height: 240px; overflow-y: auto; }
.dialog-filtros-medicos .uib-typeahead-match a { display: block; padding: .5rem 1rem; color: inherit; text-decoration: none; white-space: normal; cursor: pointer; }
.dialog-filtros-medicos .uib-typeahead-match.active a { color: var(--bs-primary, #0d6efd); background: var(--bs-tertiary-bg, #f1f5f9); }

/* Estilos de Logs/Index.cshtml */
.log-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.log-tag .material-icons-round {
    font-size: 15px;
}

.log-tag-inclusao {
    background: #DDF5E8;
    border-color: #A9DDBF;
    color: #0A5B3F;
}

.log-tag-alteracao {
    background: #E4EEFB;
    border-color: #B7CFEE;
    color: #1B4B85;
}

.log-tag-exclusao {
    background: #FBE4E4;
    border-color: #EEB7B7;
    color: #851B1B;
}

.log-resumo {
    display: block;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-diff-de {
    color: #85341B;
    text-decoration: line-through;
}

.log-diff-para {
    color: #0A5B3F;
    font-weight: 600;
}

.log-campo {
    width: 34%;
    font-weight: 600;
}

.medico-selection-scroll {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 6px;
}

.medico-selection-specialty {
    position: relative;
    padding: 0;
}

.medico-selection-toggle {
    min-width: 0;
    padding: 12px 48px 12px 14px;
    color: inherit;
}

.medico-selection-primary {
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 1;
}

.medico-selection-primary-icon {
    font-size: 22px;
    line-height: 1;
}

/* Estilos de Medico/Index.cshtml */
#modalDetalhesMedico .modal-content {
    overflow: hidden;
    border: 0;
    box-shadow: 0 24px 70px rgba(18, 64, 49, .22);
}

#modalDetalhesMedico .modal-header,
#modalDetalhesMedico .modal-footer {
    background: #E9F7F0 !important;
    border-color: #BFE3D1;
}

#modalDetalhesMedico .modal-body {
    margin: 0 !important;
    padding: 24px;
    background: linear-gradient(180deg, #F1FBF6 0%, #E6F4EE 100%);
}

#modalDetalhesMedico .medico-modal-card {
    border: 1px solid #D4EADF !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 10px 30px rgba(34, 92, 69, .08) !important;
}

#modalDetalhesMedico .medico-modal-profile {
    border-color: #B8DFC9 !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #EEF9F3 100%) !important;
}

#modalDetalhesMedico .medico-modal-status {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 150px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #A9DDBF;
    background: #DDF5E8;
    color: #0A5B3F;
    text-align: center;
    font-weight: 800;
}

#modalDetalhesMedico .medico-modal-status-label {
    color: #3F6E5B;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

#modalDetalhesMedico .medico-modal-status-value {
    font-size: 17px;
    line-height: 1.2;
}

#modalDetalhesMedico .medico-modal-footer-content {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

#modalDetalhesMedico .medico-modal-rejection-panel {
    width: 100%;
    padding: 16px;
    border: 1px solid #F1B8B8;
    border-radius: 8px;
    background: #FFF8F8;
}

#modalDetalhesMedico .medico-modal-rejection-panel textarea {
    min-height: 108px;
    resize: vertical;
    border-color: #E8B8B8;
    background: #FFFFFF;
}

#modalDetalhesMedico .medico-modal-rejection-panel textarea:focus {
    border-color: #DC3545;
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .18);
}

#modalDetalhesMedico .medico-modal-field-error {
    color: #B42318;
    font-size: 13px;
    font-weight: 700;
}

#modalDetalhesMedico .medico-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    #modalDetalhesMedico .medico-modal-footer-content,
    #modalDetalhesMedico .medico-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

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

.perfil-texto-multilinha {
    white-space: pre-line;
}