/* ================= DESIGN TOKENS ================= */
:root {
    --azul-marinho: #172437;
    --azul-chumbo: #252B33;
    --bege-nude: #A4825E;
    --bege-marfim: #BDB397;
    --cinza-nuvem: #E7EAEB;
    --branco: #FFFFFF;
    --font-title: 'Satoshi', sans-serif;
    --font-body: 'Satoshi', sans-serif;
    --sidebar-width: 248px;
    --sidebar-width-collapsed: 76px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family: var(--font-body); background-color: var(--cinza-nuvem); color: var(--azul-chumbo); }
a { text-decoration:none; color:inherit; }

/* ================= LAYOUT / SIDEBAR ================= */
.app-shell { display:flex; min-height:100vh; }

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--azul-marinho);
    color: var(--cinza-nuvem);
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    transition: width 0.25s ease;
    position: sticky;
    top:0;
    height:100vh;
    overflow:hidden;
}
body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }

.sidebar-brand {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding: 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink:0;
}
body.sidebar-collapsed .sidebar-brand { flex-direction:column; gap:14px; padding:18px 0; }
.brand-full { height:26px; width:auto; max-width:100%; min-width:0; object-fit:contain; }
.brand-mark { display:none; height:26px; width:26px; object-fit:contain; }
body.sidebar-collapsed .brand-full { display:none; }
body.sidebar-collapsed .brand-mark { display:block; }

.sidebar-toggle {
    background:none; border:none; color: var(--bege-marfim); cursor:pointer;
    padding: 6px; border-radius:4px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.sidebar-toggle svg { width:18px; height:18px; transition: transform 0.25s ease; }
.sidebar-toggle:hover { background-color: rgba(255,255,255,0.08); }
body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

.sidebar-nav {
    flex:1; min-height:0; padding: 16px 12px;
    overflow-y:auto; overflow-x:hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.sidebar-nav::-webkit-scrollbar { width:6px; }
.sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.18); border-radius:10px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.3); }

.nav-group { margin-bottom: 20px; }
.nav-group-label {
    font-size:0.68rem; text-transform:uppercase; letter-spacing:1px;
    color: var(--bege-marfim); opacity:0.55; padding: 0 12px 8px;
    white-space:nowrap;
}
body.sidebar-collapsed .nav-group-label { display:none; }

.nav-item {
    display:flex; align-items:center; gap:12px;
    padding: 10px 12px; border-radius:6px; margin-bottom:2px;
    color: var(--cinza-nuvem); font-size:0.86rem; font-weight:500;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space:nowrap; overflow:hidden;
    width:100%; background:none; border:none; cursor:pointer; text-align:left;
    font-family: var(--font-body);
}
.nav-item svg { flex-shrink:0; width:19px; height:19px; }
.nav-item span { overflow:hidden; text-overflow:ellipsis; }
body.sidebar-collapsed .nav-item span { display:none; }
body.sidebar-collapsed .nav-item { justify-content:center; padding:10px; }
.nav-item:hover { background-color: rgba(255,255,255,0.07); color: var(--branco); }
.nav-item.active { background-color: var(--bege-nude); color: var(--branco); }

/* ================= TOPBAR ================= */
.main-area { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
    background-color: var(--branco); padding: 14px 32px;
    display:flex; align-items:center; justify-content:flex-end; gap:14px;
    border-bottom: 1px solid var(--cinza-nuvem);
    flex-shrink:0;
}
.topbar-user-wrapper { position:relative; }
.topbar-user {
    display:flex; align-items:center; gap:10px;
    background:none; border:none; cursor:pointer;
    padding:6px 10px 6px 6px; border-radius:8px;
    font-family: var(--font-body);
    transition: background-color 0.2s ease;
}
.topbar-user:hover { background-color: var(--cinza-nuvem); }
.topbar-avatar {
    width:34px; height:34px; border-radius:50%;
    background-color: var(--bege-nude); color: var(--branco);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.85rem; flex-shrink:0;
}
.topbar-user-info { display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.topbar-user-info strong { font-size:0.85rem; color: var(--azul-marinho); }
.topbar-user-info span { font-size:0.72rem; color: var(--azul-chumbo); opacity:0.6; }
.topbar-caret { width:14px; height:14px; color: var(--azul-chumbo); opacity:0.5; transition: transform 0.2s ease; flex-shrink:0; }
.topbar-user[aria-expanded="true"] .topbar-caret { transform: rotate(180deg); }

.user-dropdown {
    position:absolute; top: calc(100% + 8px); right:0;
    background-color: var(--branco); border-radius:8px;
    box-shadow: 0 10px 30px rgba(23,36,55,0.18);
    border: 1px solid var(--cinza-nuvem);
    min-width:220px; padding:6px; display:none; z-index:1100;
}
.user-dropdown.open { display:block; }
.user-dropdown form { margin:0; }
.dropdown-item {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:10px 12px; border-radius:6px;
    background:none; border:none; cursor:pointer;
    font-family: var(--font-body); font-size:0.85rem; color: var(--azul-chumbo);
    text-align:left;
}
.dropdown-item svg { width:16px; height:16px; flex-shrink:0; color: var(--bege-nude); }
.dropdown-item:hover { background-color: var(--cinza-nuvem); }

/* ================= CONTEÚDO GERAL ================= */
.app-content { padding: 32px; }
.app-content h2 { font-family: var(--font-title); font-weight:500; color: var(--azul-marinho); font-size:1.7rem; margin-bottom:24px; }
.flash-message { background-color: rgba(164,130,94,0.12); color: var(--bege-nude); border-left:4px solid var(--bege-nude); padding:12px 16px; border-radius:4px; font-size:0.9rem; margin-bottom:20px; }
.stub-box { background-color: var(--branco); border:1.5px dashed var(--cinza-nuvem); border-radius:8px; padding: 60px 24px; text-align:center; color: var(--azul-chumbo); opacity:0.65; }

.page-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.btn-new {
    display:inline-flex; align-items:center; gap:8px;
    background-color: var(--azul-marinho); color: var(--branco); border:none;
    padding:10px 20px; border-radius:6px; font-family: var(--font-body); font-weight:700; font-size:0.82rem;
    text-transform:uppercase; letter-spacing:0.5px; cursor:pointer; transition: background-color 0.2s ease;
}
.btn-new:hover { background-color:#223350; }
.btn-new svg { width:16px; height:16px; }

/* ================= FILTROS (reutilizável em qualquer lista) ================= */
.filter-bar {
    background-color: var(--branco); border-radius: 8px; box-shadow: 0 4px 20px rgba(23,36,55,0.05);
    padding: 20px 24px; margin-bottom: 20px;
    display: flex; flex-wrap: wrap; align-items: end; gap: 16px;
}
.filter-field { display:flex; flex-direction:column; gap:6px; }
.filter-field label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color: var(--azul-marinho); }
.filter-field input, .filter-field select {
    padding: 9px 12px; border:1.5px solid var(--cinza-nuvem); border-radius:6px;
    font-family: var(--font-body); font-size:0.85rem; color: var(--azul-chumbo); min-width:150px;
}
.filter-field input:focus, .filter-field select:focus { outline:none; border-color: var(--bege-nude); }
.filter-field-actions { display:flex; flex-direction:row; align-items:center; gap:10px; }
.btn-filter {
    background-color: var(--azul-marinho); color: var(--branco); border:none; border-radius:6px;
    padding:9px 20px; font-family: var(--font-body); font-weight:700; font-size:0.82rem;
    text-transform:uppercase; letter-spacing:0.5px; cursor:pointer; transition: background-color 0.2s ease;
}
.btn-filter:hover { background-color: #223350; }
.filter-clear {
    font-size:0.82rem; color: var(--bege-nude); font-weight:700; cursor:pointer;
    background:none; border:none; font-family: var(--font-body); padding:0;
}
.filter-clear:hover { text-decoration:underline; }

.ajax-results { transition: opacity 0.15s ease; }
.ajax-results.is-loading { opacity: 0.45; pointer-events: none; }
.list-count { font-size:0.85rem; color: var(--azul-chumbo); opacity:0.7; margin-bottom:12px; }

/* ================= TABELAS (reutilizável em qualquer lista) ================= */
.data-table-wrapper { background-color: var(--branco); border-radius: 8px; border-top: 4px solid var(--bege-nude); box-shadow: 0 4px 20px rgba(23,36,55,0.05); overflow-x: auto; }
table.data-table { width:100%; border-collapse: collapse; font-size: 0.9rem; }
table.data-table th { text-align:left; padding: 14px 16px; background-color: var(--azul-marinho); color: var(--cinza-nuvem); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
table.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--cinza-nuvem); vertical-align: middle; white-space:nowrap; }
table.data-table tr:last-child td { border-bottom:none; }

.link-accent { color: var(--bege-nude); font-weight:700; }
.link-accent:hover { text-decoration: underline; }

.status-select { padding:6px 10px; border-radius:4px; border:1px solid var(--cinza-nuvem); font-family: var(--font-body); font-size: 0.8rem; background-color: var(--branco); color: var(--azul-chumbo); }

.badge-status-pill { padding:4px 10px; border-radius:100px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.badge-ativo { background-color: rgba(46,125,50,0.12); color:#2E7D32; }
.badge-inativo { background-color: rgba(179,57,44,0.1); color:#B3392C; }

.row-actions { display:flex; gap:6px; justify-content:flex-end; }
.row-actions form { margin:0; }
table.data-table th:last-child,
table.data-table td:last-child { text-align:right; }
.action-btn {
    width:32px; height:32px; border-radius:6px; border:1.5px solid var(--cinza-nuvem);
    background-color: var(--branco); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: all 0.2s ease; color: var(--azul-chumbo);
}
.action-btn svg { width:16px; height:16px; }
.action-btn-edit:hover { border-color: var(--bege-nude); color: var(--bege-nude); }
.action-btn-toggle:hover { border-color: var(--azul-marinho); color: var(--azul-marinho); }
.action-btn-convert:hover { border-color: var(--bege-nude); color: var(--bege-nude); }
.action-btn-delete:hover { border-color: #B3392C; color: #B3392C; }

.pagination-nav { display:flex; justify-content:space-between; margin-top:20px; font-size:0.85rem; }
.pagination-nav a { color: var(--bege-nude); font-weight:700; cursor:pointer; }
.pagination-nav a:hover { text-decoration:underline; }
.pagination-nav span.disabled { color: var(--azul-chumbo); opacity:0.3; }

/* ================= MODAL PADRÃO DE CADASTRO (reutilizável) ================= */
.admin-modal {
    position: fixed; inset:0; z-index: 100000; display:none;
    justify-content:center; align-items:flex-start; padding:6vh 20px; overflow-y:auto;
}
.admin-modal.is-open { display:flex; }
.admin-modal-overlay { position:fixed; inset:0; background-color: rgba(23,36,55,0.72); backdrop-filter: blur(4px); }
.admin-modal-dialog {
    position:relative; background-color: var(--branco); border-radius:10px; max-width:480px; width:100%;
    margin:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation: adminModalIn 0.25s ease;
}
@keyframes adminModalIn { from { opacity:0; transform:translateY(12px);} to {opacity:1; transform:translateY(0);} }
.admin-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; border-bottom:1px solid var(--cinza-nuvem);
}
.admin-modal-header h3 { font-family: var(--font-title); font-weight:500; font-size:1.25rem; color: var(--azul-marinho); }
.admin-modal-close { background:none; border:none; font-size:1.4rem; color: var(--azul-chumbo); opacity:0.5; cursor:pointer; }
.admin-modal-close:hover { opacity:1; }
.admin-modal-body { padding:22px 24px; }
.admin-form-group { margin-bottom:16px; }
.admin-form-group label { display:block; font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color: var(--azul-marinho); margin-bottom:6px; }
.admin-form-group input, .admin-form-group select, .admin-form-group textarea {
    width:100%; padding:10px 12px; border:1.5px solid var(--cinza-nuvem); border-radius:6px;
    font-family: var(--font-body); font-size:0.9rem; color: var(--azul-chumbo);
}
.admin-form-group input:focus, .admin-form-group select:focus, .admin-form-group textarea:focus { outline:none; border-color: var(--bege-nude); }
.admin-form-row { display:grid; grid-template-columns: 1fr 80px; gap:12px; }
.admin-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.btn-secondary {
    background-color: var(--branco); color: var(--azul-chumbo); border:1.5px solid var(--cinza-nuvem);
    padding:10px 20px; border-radius:6px; font-family: var(--font-body); font-weight:700; font-size:0.82rem;
    cursor:pointer; transition: all 0.2s ease;
}
.btn-secondary:hover { border-color: var(--azul-chumbo); }
.btn-save {
    background-color: var(--bege-nude); color: var(--branco); border:none;
    padding:10px 22px; border-radius:6px; font-family: var(--font-body); font-weight:700; font-size:0.82rem;
    text-transform:uppercase; letter-spacing:0.5px; cursor:pointer; transition: background-color 0.2s ease;
}
.btn-save:hover { background-color: var(--bege-marfim); color: var(--azul-marinho); }

/* ================= RESPONSIVO ================= */
@media (max-width: 860px) {
    .sidebar { position:fixed; z-index:1000; }
}
@media (max-width: 700px) {
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-field input, .filter-field select { min-width: 0; width: 100%; }
}

/* ================= CHECKBOXES EM PÍLULA (seleção de dias) ================= */
.checkbox-row { display:flex; flex-wrap:wrap; gap:8px; }
.checkbox-pill { position:relative; cursor:pointer; }
.checkbox-pill input[type="checkbox"] { position:absolute; opacity:0; width:0; height:0; }
.checkbox-pill span {
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px 14px; border-radius:100px; border:1.5px solid var(--cinza-nuvem);
    font-size:0.82rem; font-weight:600; color: var(--azul-chumbo);
    transition: all 0.2s ease; user-select:none;
}
.checkbox-pill input[type="checkbox"]:checked + span {
    background-color: var(--bege-nude); border-color: var(--bege-nude); color: var(--branco);
}

.admin-form-row-even { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

/* ================= AGENDA: SELEÇÃO DE HORÁRIOS E MODAL LARGO ================= */
.admin-modal-dialog-wide { max-width: 640px; }
.origem-paciente-bloco { margin-bottom: 16px; }

.slots-grid { display:flex; flex-wrap:wrap; gap:8px; min-height: 40px; }
.slots-hint { font-size:0.82rem; color: var(--azul-chumbo); opacity:0.55; }
.slot-btn {
    padding: 8px 14px; border-radius:6px; border:1.5px solid var(--cinza-nuvem);
    background-color: var(--branco); font-family: var(--font-body); font-size:0.85rem; font-weight:600;
    color: var(--azul-chumbo); cursor:pointer; transition: all 0.2s ease;
}
.slot-btn:hover { border-color: var(--bege-nude); }
.slot-btn.selected { background-color: var(--bege-nude); border-color: var(--bege-nude); color: var(--branco); }

/* ================= AGENDA: CALENDÁRIO VISUAL ================= */
.admin-modal-dialog-wide { max-width: 640px; }
.origem-paciente-bloco { margin-bottom: 16px; }
.admin-form-row-even { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

.slots-grid { display:flex; flex-wrap:wrap; gap:8px; min-height: 40px; }
.slots-hint { font-size:0.82rem; color: var(--azul-chumbo); opacity:0.55; }
.slot-btn {
    padding: 8px 14px; border-radius:6px; border:1.5px solid var(--cinza-nuvem);
    background-color: var(--branco); font-family: var(--font-body); font-size:0.85rem; font-weight:600;
    color: var(--azul-chumbo); cursor:pointer; transition: all 0.2s ease;
}
.slot-btn:hover { border-color: var(--bege-nude); }
.slot-btn.selected { background-color: var(--bege-nude); border-color: var(--bege-nude); color: var(--branco); }

.checkbox-row { display:flex; flex-wrap:wrap; gap:8px; }
.checkbox-pill { position:relative; cursor:pointer; }
.checkbox-pill input[type="checkbox"], .checkbox-pill input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.checkbox-pill span {
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px 14px; border-radius:100px; border:1.5px solid var(--cinza-nuvem);
    font-size:0.82rem; font-weight:600; color: var(--azul-chumbo);
    transition: all 0.2s ease; user-select:none;
}
.checkbox-pill input:checked + span {
    background-color: var(--bege-nude); border-color: var(--bege-nude); color: var(--branco);
}

.cal-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.cal-nav { display:flex; align-items:center; gap:8px; }
.cal-nav button {
    background-color: var(--branco); border:1.5px solid var(--cinza-nuvem); border-radius:6px;
    padding:8px 14px; font-family: var(--font-body); font-weight:700; font-size:0.82rem;
    color: var(--azul-chumbo); cursor:pointer; transition: all 0.2s ease;
}
.cal-nav button:hover { border-color: var(--bege-nude); color: var(--bege-nude); }
#calRangeLabel { font-weight:700; color: var(--azul-marinho); font-size:0.95rem; margin-left:6px; text-transform:capitalize; }

.cal-view-toggle { display:flex; background-color: var(--branco); border:1.5px solid var(--cinza-nuvem); border-radius:6px; overflow:hidden; }
.cal-view-toggle button {
    background:none; border:none; padding:8px 18px; font-family: var(--font-body);
    font-weight:700; font-size:0.82rem; color: var(--azul-chumbo); cursor:pointer; transition: all 0.2s ease;
}
.cal-view-toggle button.active { background-color: var(--azul-marinho); color: var(--branco); }
.cal-view-toggle button:not(.active):hover { background-color: var(--cinza-nuvem); }

.cal-tabs-wrapper { overflow-x:auto; margin-bottom:16px; border-bottom:1px solid var(--cinza-nuvem); }
.cal-tabs { display:flex; gap:4px; min-width:max-content; padding-bottom:2px; }
.cal-tab {
    background:none; border:none; padding:10px 16px; font-family: var(--font-body);
    font-weight:600; font-size:0.85rem; color: var(--azul-chumbo); opacity:0.6; cursor:pointer;
    white-space:nowrap; border-bottom:2.5px solid transparent; transition: all 0.2s ease;
}
.cal-tab:hover { opacity:1; }
.cal-tab.active { opacity:1; color: var(--bege-nude); border-bottom-color: var(--bege-nude); }

.cal-grid-wrapper {
    background-color: var(--branco); border-radius:8px; box-shadow:0 4px 20px rgba(23,36,55,0.05);
    overflow:auto; max-height: 70vh; transition: opacity 0.15s ease;
}
.cal-grid-wrapper.is-loading { opacity:0.5; }

.cal-grid { display:flex; min-width: 700px; }
.cal-time-col {
    flex-shrink:0; width:60px; position:sticky; left:0; background-color: var(--branco);
    z-index:2; border-right:1px solid var(--cinza-nuvem);
}
.cal-time-col-header, .cal-day-col-header {
    height:44px; display:flex; align-items:center; justify-content:center;
    font-size:0.75rem; font-weight:700; color: var(--azul-marinho); text-transform:uppercase;
    letter-spacing:0.4px; border-bottom:1px solid var(--cinza-nuvem);
    position:sticky; top:0; background-color: var(--branco); z-index:3;
}
.cal-day-col-header.is-today { color: var(--bege-nude); }
.cal-time-col-body { position:relative; }
.cal-hour-label { position:absolute; right:8px; transform:translateY(-50%); font-size:0.7rem; color: var(--azul-chumbo); opacity:0.55; }

.cal-days { display:flex; flex:1; }
.cal-day-col { flex:1; min-width:120px; border-right:1px solid var(--cinza-nuvem); }
.cal-day-col:last-child { border-right:none; }
.cal-day-col-body {
    position:relative; cursor:pointer;
    background-image: repeating-linear-gradient(to bottom, var(--cinza-nuvem) 0, var(--cinza-nuvem) 1px, transparent 1px, transparent 60px);
}

.cal-event {
    position:absolute; left:4px; right:4px; border-radius:5px; padding:4px 7px;
    font-size:0.72rem; line-height:1.3; overflow:hidden; cursor:pointer; z-index:1;
    border-left:3px solid; transition: filter 0.15s ease;
}
.cal-event:hover { filter:brightness(0.96); }
.cal-event strong { display:block; font-size:0.72rem; }
.cal-event-sub { display:block; opacity:0.75; font-size:0.68rem; }

.cal-event-agendado { background-color: rgba(164,130,94,0.16); border-color: var(--bege-nude); color:#6b4e30; }
.cal-event-confirmado { background-color: rgba(23,36,55,0.1); border-color: var(--azul-marinho); color: var(--azul-marinho); }
.cal-event-realizado { background-color: rgba(46,125,50,0.14); border-color:#2E7D32; color:#2E7D32; }
.cal-event-cancelado { background-color: rgba(179,57,44,0.1); border-color:#B3392C; color:#B3392C; text-decoration:line-through; }
.cal-event-faltou { background-color: rgba(179,57,44,0.06); border-color:#B3392C; color:#B3392C; }

.cal-block-band {
    position:absolute; left:0; right:0;
    background: repeating-linear-gradient(45deg, rgba(179,57,44,0.06), rgba(179,57,44,0.06) 6px, rgba(179,57,44,0.12) 6px, rgba(179,57,44,0.12) 12px);
    border-left:3px solid #B3392C; pointer-events:none;
}

.cal-month-grid { display:grid; grid-template-columns: repeat(7, 1fr); }
.cal-month-weekday { padding:10px; text-align:center; font-size:0.72rem; font-weight:700; text-transform:uppercase; color: var(--azul-marinho); background-color: var(--cinza-nuvem); }
.cal-month-cell { min-height:100px; border:1px solid var(--cinza-nuvem); padding:6px; cursor:pointer; transition: background-color 0.2s ease; }
.cal-month-cell { min-height:100px; border:1px solid var(--cinza-nuvem); padding:6px; cursor:pointer; transition: background-color 0.2s ease; }
.cal-month-cell.has-block {
    background-image: repeating-linear-gradient(45deg, rgba(179,57,44,0.05), rgba(179,57,44,0.05) 6px, rgba(179,57,44,0.1) 6px, rgba(179,57,44,0.1) 12px);
}
.cal-month-block-label { font-size:0.64rem; font-weight:700; color:#B3392C; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-month-cell:hover { background-color: rgba(164,130,94,0.06); }
.cal-month-cell.is-outside { opacity:0.35; }
.cal-month-cell.is-today .cal-month-daynum { background-color: var(--bege-nude); color: var(--branco); border-radius:50%; }
.cal-month-daynum { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:0.78rem; font-weight:700; color: var(--azul-marinho); margin-bottom:4px; }
.cal-month-event { font-size:0.66rem; background-color: rgba(164,130,94,0.16); border-left:2px solid var(--bege-nude); padding:2px 4px; border-radius:3px; margin-bottom:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cal-month-more { font-size:0.66rem; color: var(--azul-chumbo); opacity:0.6; }

.det-header { margin-bottom:4px; }
.det-header strong { font-size:1.05rem; color: var(--azul-marinho); }
.det-sub { font-size:0.82rem; color: var(--azul-chumbo); opacity:0.7; margin-bottom:4px; }

/* ================= PRONTUÁRIO ================= */
.prontuario-section { background-color: var(--branco); border-radius:8px; box-shadow:0 4px 20px rgba(23,36,55,0.05); padding:24px 28px; margin-bottom:20px; }
.prontuario-section h3 { font-family: var(--font-title); font-weight:500; font-size:1.1rem; color: var(--azul-marinho); margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--cinza-nuvem); }
.prontuario-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.prontuario-grid-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; }
.prontuario-readonly { font-size:0.9rem; color: var(--azul-chumbo); display:flex; gap:40px; flex-wrap:wrap; }
.prontuario-readonly strong { display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.4px; color: var(--azul-marinho); opacity:0.6; margin-bottom:4px; }

/* ================= MENU "..." POR LINHA DE TABELA ================= */
.row-menu-wrapper { position:relative; display:inline-block; }
.row-menu-toggle {
    width:32px; height:32px; border-radius:6px; border:1.5px solid var(--cinza-nuvem);
    background-color: var(--branco); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: all 0.2s ease; color: var(--azul-chumbo);
}
.row-menu-toggle svg { width:16px; height:16px; }
.row-menu-toggle:hover { border-color: var(--bege-nude); color: var(--bege-nude); }
.row-dropdown {
    position:fixed;
    background-color: var(--branco); border-radius:8px;
    box-shadow: 0 10px 30px rgba(23,36,55,0.18); border:1px solid var(--cinza-nuvem);
    min-width:210px; padding:6px; display:none; z-index:1200;
}
.row-dropdown.open { display:block; }
.row-dropdown-item {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:9px 12px; border-radius:6px; background:none; border:none; cursor:pointer;
    font-family: var(--font-body); font-size:0.83rem; color: var(--azul-chumbo);
    text-align:left; text-decoration:none;
}
.row-dropdown-item:hover { background-color: var(--cinza-nuvem); }
.row-dropdown-item svg { width:15px; height:15px; flex-shrink:0; color: var(--bege-nude); }

@media (max-width: 700px) {
    .prontuario-grid-2, .prontuario-grid-3 { grid-template-columns: 1fr; }
}

/* ================= DROPZONE DE ARQUIVO (arrastar e soltar) ================= */
.file-dropzone {
    position:relative; border:2px dashed var(--cinza-nuvem); border-radius:8px;
    padding:28px 20px; text-align:center; cursor:pointer; transition: all 0.2s ease;
    background-color: rgba(164,130,94,0.02);
}
.file-dropzone:hover, .file-dropzone.is-dragover {
    border-color: var(--bege-nude); background-color: rgba(164,130,94,0.06);
}
.file-dropzone-input {
    position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:1;
}
.file-dropzone-content svg { width:30px; height:30px; color: var(--bege-nude); margin-bottom:10px; }
.file-dropzone-content p { font-size:0.86rem; color: var(--azul-chumbo); margin-bottom:4px; }
.file-dropzone-content p strong { color: var(--bege-nude); }
.file-dropzone-content span { font-size:0.75rem; color: var(--azul-chumbo); opacity:0.55; }

.file-dropzone-selected { display:flex; align-items:center; gap:12px; text-align:left; }
.file-dropzone-selected svg { width:28px; height:28px; color: var(--bege-nude); flex-shrink:0; }
.file-dropzone-selected-info { flex:1; overflow:hidden; }
.file-dropzone-selected-info strong { display:block; font-size:0.85rem; color: var(--azul-marinho); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-dropzone-selected-info span { font-size:0.76rem; color: var(--azul-chumbo); opacity:0.6; }
.file-dropzone-remove {
    background:none; border:none; font-size:1.3rem; line-height:1; color: var(--azul-chumbo);
    opacity:0.5; cursor:pointer; position:relative; z-index:2; padding:4px 8px;
}
.file-dropzone-remove:hover { opacity:1; color:#B3392C; }

/* ================= BARRA DE PROGRESSO DE UPLOAD ================= */
.upload-progress-wrap { display:none; margin-top:12px; }
.upload-progress-wrap.is-active { display:block; }
.upload-progress-track { width:100%; height:6px; background-color: var(--cinza-nuvem); border-radius:10px; overflow:hidden; }
.upload-progress-bar { height:100%; width:0%; background-color: var(--bege-nude); border-radius:10px; transition: width 0.2s ease; }
.upload-progress-label { font-size:0.76rem; color: var(--azul-chumbo); opacity:0.65; margin-top:4px; text-align:right; }

/* ================= MODAL DE CONFIRMAÇÃO (substitui o confirm() nativo do navegador) ================= */
.confirm-modal-dialog { max-width: 380px; padding: 32px 28px 28px; text-align:center; }
.confirm-modal-icon {
    width:56px; height:56px; border-radius:50%; background-color: rgba(179,57,44,0.1);
    display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:#B3392C;
}
.confirm-modal-icon svg { width:28px; height:28px; }
.confirm-modal-title { font-family: var(--font-title); font-weight:500; font-size:1.25rem; color: var(--azul-marinho); margin-bottom:10px; }
.confirm-modal-message { font-size:0.9rem; color: var(--azul-chumbo); opacity:0.8; line-height:1.5; margin-bottom:24px; }
.confirm-modal-actions { display:flex; justify-content:center; gap:10px; }
.btn-danger {
    background-color:#B3392C; color: var(--branco); border:none;
    padding:10px 22px; border-radius:6px; font-family: var(--font-body); font-weight:700; font-size:0.82rem;
    text-transform:uppercase; letter-spacing:0.5px; cursor:pointer; transition: background-color 0.2s ease;
}
.btn-danger:hover { background-color:#992F24; }

/* ================= DADOS DA CLÍNICA: TOGGLE SWITCH E HORÁRIOS (reutilizável) ================= */
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background-color: var(--cinza-nuvem); transition:.2s; border-radius:24px; }
.toggle-slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background-color: var(--branco); transition:.2s; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-slider { background-color: var(--bege-nude); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

.horario-row { display:flex; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--cinza-nuvem); flex-wrap:wrap; }
.horario-row:last-child { border-bottom:none; }
.horario-day-toggle { display:flex; align-items:center; gap:14px; min-width:160px; }
.horario-day-label { font-weight:700; font-size:0.9rem; color: var(--azul-marinho); }
.horario-times { display:flex; align-items:center; gap:10px; flex:1; }
.horario-times input[type=time] { padding:9px 12px; border:1.5px solid var(--cinza-nuvem); border-radius:6px; font-family: var(--font-body); font-size:0.88rem; color: var(--azul-chumbo); }
.horario-times span { font-size:0.82rem; color: var(--azul-chumbo); opacity:0.6; }
.horario-closed-label { font-size:0.85rem; color: var(--azul-chumbo); opacity:0.5; font-style:italic; }

@media (max-width: 640px) {
    .horario-row { flex-direction:column; align-items:flex-start; }
}

/* ================= FIELDSET SEM MOLDURA (usado pra travar formulários) ================= */
.form-fieldset-reset { border:none; padding:0; margin:0; }
.form-fieldset-reset:disabled { opacity: 0.65; }

/* ================= DROPDOWN DO USUÁRIO: ITEM COM TOGGLE + DIVISOR ================= */
.dropdown-item-toggle { cursor:default; justify-content:space-between; }
.dropdown-item-toggle span { flex:1; margin-right:8px; white-space:nowrap; }
.dropdown-toggle-switch { flex-shrink:0; }
.dropdown-divider { border:none; border-top:1px solid var(--cinza-nuvem); margin:6px 0; }
.dropdown-item-danger { color:#B3392C; }
.dropdown-item-danger svg { color:#B3392C; }

/* ================= MODO ESCURO ================= */
[data-theme="dark"] {
    --cinza-nuvem: #10151d;
    --branco: #1b232f;
    --azul-chumbo: #A9B4C0; /* --azul-chumbo é usada só como TEXTO em todo o sistema
                                (nunca como fundo), então redefini-la aqui já resolve
                                sozinha dezenas de textos secundários de uma vez —
                                dropdown, ícones, legendas, dicas de campo, etc. */
}

/* --azul-marinho NÃO é redefinida (continua o mesmo azul escuro sempre), porque ela
   também é usada como FUNDO (sidebar, cabeçalho de tabela, botões) — esses precisam
   continuar escuros nos dois temas. Por isso, os lugares onde ela vira TEXTO (títulos,
   valores em destaque) precisam de uma sobrescrita específica, e não da variável inteira. */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] strong, [data-theme="dark"] label, [data-theme="dark"] td,
[data-theme="dark"] .topbar-user-info strong,
[data-theme="dark"] .det-header strong,
[data-theme="dark"] .horario-day-label,
[data-theme="dark"] .cal-day-col-header,
[data-theme="dark"] .cal-month-daynum,
[data-theme="dark"] #calRangeLabel,
[data-theme="dark"] .dash-kpi-value,
[data-theme="dark"] .dash-funil-row strong {
    color: #EDEFF2;
}

/* A sidebar tem fundo sempre escuro (azul-marinho fixo) — o texto dela NUNCA deve
   seguir a troca de --cinza-nuvem, senão fica texto escuro sobre fundo escuro. */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .nav-item {
    color: var(--bege-marfim);
}
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item.active {
    color: #FFFFFF;
}
[data-theme="dark"] .topbar-avatar {
    color: #FFFFFF;
}

/* Bordas e hovers com mais contraste sobre fundo escuro */
[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .admin-modal-dialog,
[data-theme="dark"] .row-dropdown {
    border-color: #2a3444;
}
[data-theme="dark"] .dropdown-divider {
    border-top-color: #2a3444;
}
[data-theme="dark"] .topbar {
    border-bottom-color: #2a3444;
}
[data-theme="dark"] .topbar-user:hover,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .row-dropdown-item:hover {
    background-color: rgba(255,255,255,0.06);
}

/* Campos de formulário em QUALQUER lugar — sem restringir a .app-content, porque
   modais (Orçamento, Pedido, Dados da Clínica) ficam fora dela no HTML. */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #10151d;
    color: #DDE3E9;
    border-color: #2a3444;
}

[data-theme="dark"] .data-table-wrapper,
[data-theme="dark"] .admin-modal-dialog,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .prontuario-section,
[data-theme="dark"] .cal-grid-wrapper {
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}

/* ================= MODO ESCURO — CORREÇÕES (v24) =================
   Prefixo "html[data-theme=dark]" de propósito: sobe a especificidade para vencer
   os <style> inline das views (ex.: dashboard.blade.php), que empatam com as regras
   do bloco acima e, por virem depois no HTML, ganhavam o desempate.
   ================================================================ */

/* Scrollbars nativas, ícone do input date/time e popup do <select> respeitam o tema */
html[data-theme="dark"] { color-scheme: dark; }

/* ---------- 1. BOTÕES ----------
   Vários usam color: var(--branco) sobre fundo escuro; no escuro, --branco vira #1b232f,
   então o texto ficava escuro sobre escuro. */
html[data-theme="dark"] .btn-new,
html[data-theme="dark"] .btn-filter,
html[data-theme="dark"] .cal-view-toggle button.active {
    background-color: #223350;
    color: #FFFFFF;
}
/* fundo #172437 quase some sobre a página #10151d; o contorno devolve o formato */
html[data-theme="dark"] .btn-new,
html[data-theme="dark"] .btn-filter {
    box-shadow: inset 0 0 0 1px #34486b;
}
html[data-theme="dark"] .btn-new:hover,
html[data-theme="dark"] .btn-filter:hover {
    background-color: #2c436b;
}

/* texto branco sobre fundos coloridos (bege / vermelho) */
html[data-theme="dark"] .btn-save,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .checkbox-pill input:checked + span,
html[data-theme="dark"] .slot-btn.selected,
html[data-theme="dark"] .cal-month-cell.is-today .cal-month-daynum {
    color: #FFFFFF;
}
/* no hover o botão salvar vai pra marfim claro: o texto volta a ser escuro */
html[data-theme="dark"] .btn-save:hover {
    color: #172437;
}

/* ---------- 2. TABELAS ---------- */
html[data-theme="dark"] table.data-table th {
    color: #DDE3E9;
}
html[data-theme="dark"] .cal-month-weekday {
    color: #A9B4C0;
}

/* ---------- 3. TOGGLE SWITCH ---------- */
html[data-theme="dark"] .toggle-slider {
    background-color: #2a3444;
}
html[data-theme="dark"] .toggle-slider::before {
    background-color: #E7EAEB;
}

/* ---------- 4. AGENDA: CARDS DE AGENDAMENTO ---------- */
html[data-theme="dark"] .cal-event-agendado {
    background-color: rgba(164,130,94,0.22);
    color: #E2C9A6;
}
html[data-theme="dark"] .cal-event-confirmado {
    background-color: rgba(111,147,199,0.18);
    border-color: #6f93c7;
    color: #BCD0EC;
}
html[data-theme="dark"] .cal-event-realizado {
    background-color: rgba(76,175,80,0.16);
    border-color: #4CAF50;
    color: #86D48F;
}
html[data-theme="dark"] .cal-event-cancelado {
    background-color: rgba(224,90,75,0.14);
    border-color: #E05A4B;
    color: #F0968B;
}
html[data-theme="dark"] .cal-event-faltou {
    background-color: rgba(224,90,75,0.10);
    border-color: #E05A4B;
    color: #F0968B;
}
html[data-theme="dark"] .cal-month-block-label {
    color: #F0968B;
}

/* ---------- 5. DASHBOARD ---------- */
html[data-theme="dark"] .dash-chart-card h3,
html[data-theme="dark"] .dash-widget-card h3,
html[data-theme="dark"] .dash-widget-item-title,
html[data-theme="dark"] .dash-kpi-value,
html[data-theme="dark"] .dash-funil-row strong {
    color: #EDEFF2;
}
html[data-theme="dark"] .dash-alert {
    color: #F0B4AC;
}
html[data-theme="dark"] .dash-alert a,
html[data-theme="dark"] .dash-alert svg {
    color: #F0968B;
}

/* ---------- 6. PACIENTE, PRONTUÁRIO, HISTÓRICO, ANOTAÇÕES, ORÇAMENTO E PEDIDOS (v25) ----------
   Essas views têm <style> próprio com color: var(--azul-marinho), que some no escuro. */
html[data-theme="dark"] .paciente-codigo,
html[data-theme="dark"] .paciente-kpi-card .kpi-value,
html[data-theme="dark"] .pedido-kpi-card .kpi-value,
html[data-theme="dark"] .prontuario-section h3,
html[data-theme="dark"] .prontuario-readonly strong,
html[data-theme="dark"] .timeline-title,
html[data-theme="dark"] .anotacao-item-meta strong,
html[data-theme="dark"] .orcamento-item-subtotal,
html[data-theme="dark"] .orcamento-total-row strong {
    color: #EDEFF2;
}

/* bolinha de "agendamento" na linha do tempo do histórico */
html[data-theme="dark"] .timeline-dot.tipo-agendamento {
    border-color: #6f93c7;
    color: #BCD0EC;
}

/* cabeçalho da tabela de itens do orçamento */
html[data-theme="dark"] table.orcamento-itens-table th {
    color: #DDE3E9;
}

/* ---------- 7. ANAMNESE: legenda do IMC (v26) ---------- */
html[data-theme="dark"] .imc-display {
    color: #EDEFF2;
}