/* =========================================================
   ORANGE THEME - GLOBAL
========================================================= */

:root{
    --main-orange: #eb7719;
    --orange-dark: #d96200;
    --orange-soft: #fff7ed;
    --orange-soft-2: #fff3e8;
    --orange-border: #ffd8bf;
    --orange-border-2: #ffcfaa;

    --sidebar-bg: #383737;
    --sidebar-w: 250px;
    --sidebar-c: 55px;
    --sidebar-font: 'Be Vietnam Pro','Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;

    --text-main: #333333;
    --text-muted: #6c757d;
    --border-soft: #eeeeee;
    --border-soft-2: #f0f0f0;
    --bg-page: #f8f9fa;
    --bg-surface: #ffffff;
    --bg-surface-2: #f8f9fa;
    --shadow-soft: 0 2px 6px rgba(0,0,0,.05);
    --topbar-title: #1f2937;
    --input-bg: #ffffff;
    --table-hover: #fff8f2;
    --label-color: #555555;
}

[data-theme="dark"]{
    color-scheme: dark;
    --orange-soft: #3a2414;
    --orange-soft-2: #2f1d10;
    --orange-border: #6b3f1a;
    --orange-border-2: #7a4a22;

    --text-main: #e8e8e8;
    --text-muted: #a0a0a0;
    --border-soft: #333333;
    --border-soft-2: #3a3a3a;
    --bg-page: #121212;
    --bg-surface: #1e1e1e;
    --bg-surface-2: #242424;
    --shadow-soft: 0 2px 8px rgba(0,0,0,.35);
    --topbar-title: #f3f4f6;
    --input-bg: #2a2a2a;
    --table-hover: #2a1c12;
    --label-color: #cfcfcf;
}

.theme-pref-group{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}

.theme-pref-btn{
    border:1px solid var(--border-soft);
    background:var(--bg-surface);
    color:var(--text-main);
    border-radius:10px;
    padding:8px 6px;
    font-size:11px;
    font-weight:600;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    cursor:pointer;
    transition:.15s ease;
}

.theme-pref-btn i{
    font-size:14px;
    color:var(--main-orange);
}

.theme-pref-btn:hover{
    border-color:var(--main-orange);
    background:var(--orange-soft);
}

.theme-pref-btn.is-active{
    border-color:var(--main-orange);
    background:var(--orange-soft);
    color:var(--main-orange);
    box-shadow:0 0 0 .12rem rgba(235,119,25,.18);
}

.topbar-logout-btn{
    transition:background-color .15s ease, color .15s ease;
}

.topbar-logout-btn:hover,
.topbar-logout-btn:focus{
    background:#fff1f0 !important;
    color:#dc3545 !important;
}

[data-theme="dark"] .topbar-logout-btn:hover,
[data-theme="dark"] .topbar-logout-btn:focus{
    background:#3b1d20 !important;
    color:#ff7883 !important;
}

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

body{
    margin:0;
    background: var(--bg-page);
    color: var(--text-main);
    font-family:'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
    font-size:.875rem;
    transition:.3s;
}

#patientTab,
#patientTabContent,
#patientTabContent input,
#patientTabContent select,
#patientTabContent textarea,
#patientTabContent button{
    font-family:'Be Vietnam Pro','Segoe UI',sans-serif;
}

label,
.form-label{
    font-size:.85rem !important;
    font-weight:600;
    margin-bottom:.3rem;
    color:var(--label-color);
}

.table th,
.table td{
    font-size:.875rem !important;
    vertical-align:middle !important;
}

.table th{
    font-weight:600;
}

.table-hover tbody tr:hover{
    background:var(--table-hover);
}

.form-control,
.form-select{
    font-size:.875rem !important;
    height:38px;
}

.form-control:focus,
.form-select:focus{
    border-color: var(--main-orange) !important;
    box-shadow: 0 0 0 .1rem rgba(235,119,25,.15) !important;
}

textarea.form-control{
    resize:none !important;
    min-height:70px;
}

.dropdown-menu,
.dropdown-item{
    font-size:.875rem !important;
}

.pagination .page-link{
    font-size:.85rem !important;
    padding:.4rem .75rem !important;
    display:flex;
    align-items:center;
    justify-content:center;
    height:34px;
}

.shadow-sm{
    box-shadow: var(--shadow-soft) !important;
}

.bg-white{
    border:1px solid var(--border-soft);
}

/* =========================================================
   TEXT / HELPERS
========================================================= */

.text-orange{
    color: var(--main-orange) !important;
    text-decoration:none !important;
    transition:.3s;
    font-weight:bold;
}

.text-orange:hover{
    color: var(--orange-dark) !important;
}

.bg-orange{
    background: var(--main-orange);
    color:#fff;
}

.cursor-pointer{
    cursor:pointer;
}

.fw-500{
    font-weight:500;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
    font-size:.875rem !important;
    font-weight:500;
    padding-top:.4rem;
    padding-bottom:.4rem;
}

.btn-primary{
    background: var(--main-orange) !important;
    border-color: var(--main-orange) !important;
}

.btn-orange{
    background:linear-gradient(135deg,#f68a2d 0%,var(--main-orange) 58%,#dd5d0c 100%) !important;
    border-color:#df640f !important;
    color:#ffffff !important;
    border-radius:8px !important;
    box-shadow:0 3px 8px rgba(221,93,12,.22) !important;
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}

.btn-orange:hover{
    color:#ffffff !important;
    filter:saturate(1.06) brightness(1.02);
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(221,93,12,.3) !important;
}

.btn-orange:active{
    color:#ffffff !important;
    transform:translateY(0);
    box-shadow:0 2px 6px rgba(221,93,12,.22) !important;
}

.btn-orange:focus-visible{
    color:#ffffff !important;
    box-shadow:0 0 0 .25rem rgba(235,119,25,.28),0 4px 10px rgba(221,93,12,.24) !important;
}

.btn-orange:disabled,
.btn-orange.disabled{
    opacity:.62;
    box-shadow:none !important;
    transform:none;
}

.btn-orange-outline,
.btn-outline-orange{
    color: var(--main-orange) !important;
    border:1px solid var(--main-orange) !important;
    background:#fff !important;
}

.btn-orange-outline:hover,
.btn-outline-orange:hover,
.btn-outline-orange:active,
.btn-outline-orange:focus,
.btn-outline-orange.active,
.btn-outline-orange.dropdown-toggle.show{
    background: var(--main-orange) !important;
    color:#fff !important;
    border-color: var(--main-orange) !important;
    box-shadow:0 0 0 .25rem rgba(235,119,25,.25) !important;
}

/* =========================================================
   FORM CHECK / RADIO
========================================================= */

.form-check-input:checked{
    background-color: var(--main-orange) !important;
    border-color: var(--main-orange) !important;
}

.form-check-input:focus{
    border-color: var(--main-orange) !important;
    box-shadow: 0 0 0 .25rem rgba(235,119,25,.25) !important;
}

.form-check-input[type="radio"]:checked{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

/* =========================================================
   MODAL
========================================================= */

.modal-header{
    border-bottom:1px solid var(--border-soft-2);
}

.modal-title{
    font-weight:600;
}

/* =========================================================
   BADGE / LIST GROUP
========================================================= */

.badge-orange{
    background: var(--main-orange);
}

.list-group-item.active{
    background-color: var(--main-orange) !important;
    border-color: var(--main-orange) !important;
    color:#fff !important;
}

.list-group-item:hover{
    background:#fff3ea;
    color: var(--main-orange);
}

/* =========================================================
   AVATAR
========================================================= */

.avatar-sm{
    width:35px;
    height:35px;
    border-radius:50%;
}

/* =========================================================
   EXAM / PLAN / TOOTH
========================================================= */

.exam-card{
    border:1px solid var(--border-soft);
    border-radius:10px;
    margin-bottom:15px;
}

.exam-header{
    background:#fff;
    padding:12px 15px;
    border-bottom:1px solid var(--border-soft);
}

.exam-body{
    padding:15px;
    background:#fff;
}

.plan-tr td{
    vertical-align:middle;
}

.plan-btn-edit,
.plan-btn-delete,
.plan-btn-save,
.plan-btn-cancel{
    min-width:32px;
}

.plan-editing{
    background:#fff6ed;
    box-shadow: inset 0 0 0 2px var(--main-orange);
}

.tooth-chart{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.tooth-row{
    display:flex;
    gap:6px;
}

.tooth-box{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dddddd;
    border-radius:6px;
    cursor:pointer;
    background:#fff;
    font-size:13px;
    font-weight:600;
}

.tooth-box:hover{
    border-color: var(--main-orange);
}

.tooth-box.selected{
    background: var(--main-orange);
    color:#fff;
    border-color: var(--main-orange);
}

/* =========================================================
   SIDEBAR SEARCH DROPDOWN
========================================================= */

#sidebar_patient_dropdown{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#ffffff;
    border-radius:10px;
    border:1px solid var(--border-soft);
    z-index:2000;
    max-height:280px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:4px 0;
}

#sidebar_patient_dropdown .dropdown-item{
    color:#333 !important;
    font-weight:500;
    opacity:1 !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
    line-height:1.35;
    padding:10px 12px;
    display:block;
}

#sidebar_patient_dropdown .dropdown-item:hover{
    background: var(--orange-soft);
    color:#333 !important;
}

.sidebar-patient-line1{
    display:block;
    font-weight:700;
    color:#333;
}

.sidebar-patient-line2{
    display:block;
    margin-top:3px;
    font-size:12px;
    color: var(--text-muted);
    font-weight:400;
}

.sidebar-patient-search{
    transition:.2s;
}

html.sidebar-is-collapsed .sidebar-patient-search{
    display:none;
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{
    width: var(--sidebar-w);
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    flex-direction:column;
    background: linear-gradient(180deg, #383737 0%, #302f2f 100%);
    transition:.3s;
    z-index:1000;
    font-family: var(--sidebar-font);
    letter-spacing:.01em;
}
.sidebar-nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(235,119,25,.72) rgba(255,255,255,.06);
}
.sidebar-nav::-webkit-scrollbar{ width:7px; }
.sidebar-nav::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(235,119,25,.72); border-radius:999px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover{ background:var(--main-orange); }

.sidebar .logo{
    color:#fff;
    padding:16px 15px;
    font-weight:700;
    font-size:.95rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    white-space:nowrap;
    display:flex;
    justify-content:space-between;
    align-items:center;
    letter-spacing:.04em;
}

.sidebar-brand{
    display:flex;
    align-items:center;
    min-width:0;
}
.sidebar-brand img{
    display:block;
    width:150px;
    max-width:calc(var(--sidebar-w) - 82px);
    height:32px;
    object-fit:contain;
    object-position:left center;
}
.sidebar .logo-text{
    font-family: var(--sidebar-font);
    font-weight:700;
    letter-spacing:.08em;
}

#toggle-btn{
    background:none;
    border:none;
    color: var(--main-orange);
    font-size:22px;
    cursor:pointer;
    padding:0;
}

.sidebar a{
    color:rgba(255,255,255,.94);
    text-decoration:none;
    padding:12px 15px;
    display:flex;
    align-items:center;
    white-space:nowrap;
    transition:.24s ease;
    border-radius:12px;
    margin:4px 8px;
    font-family: var(--sidebar-font);
    font-size:14px;
    font-weight:600;
    line-height:1.35;
}

.sidebar a i{
    color: var(--main-orange);
    min-width:30px;
    font-size:16px;
}

.sidebar a span,
.sidebar .menu-item ul li a,
.sidebar .menu-item > a > div{
    font-family: var(--sidebar-font);
}

.sidebar a:hover,
.sidebar a.active{
    background:rgba(255,255,255,.12);
    color:#ffb06a;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* =========================================================
   MAIN / TOPBAR
========================================================= */

.main{
    margin-left: var(--sidebar-w);
    padding:15px 25px;
}

.topbar{
    background:transparent;
    padding:5px 0;
    margin-bottom:5px;
}

.topbar-user-toggle{
    cursor:pointer;
}

.topbar-user-avatar{
    width:40px;
    height:40px;
    border-color:#fd7e14 !important;
    display:flex;
    align-items:center;
    justify-content:center;
}

.topbar-user-menu{
    border-radius:12px;
    min-width:240px;
    overflow:hidden;
    right:0;
    left:auto;
}

+.clinic-chat-drawer{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;transition:.2s ease;}
.clinic-chat-drawer.is-open{pointer-events:auto;opacity:1;}
.clinic-chat-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.22);}
.clinic-chat-panel{position:absolute;top:0;right:0;width:380px;max-width:100%;height:100%;background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;transform:translateX(100%);transition:.2s ease;}
.clinic-chat-drawer.is-open .clinic-chat-panel{transform:translateX(0);}
.clinic-chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f1dfcf;}
.clinic-chat-title{font-size:16px;font-weight:700;color:#f97316;}
.clinic-chat-subtitle{font-size:12px;color:#8a6f5a;}
.clinic-chat-close{border:none;background:transparent;font-size:24px;line-height:1;color:#666;}
.clinic-chat-body{flex:1;overflow:auto;padding:14px;background:#fffaf5;display:flex;flex-direction:column;gap:10px;}
.clinic-chat-empty{color:#9a8b7d;text-align:center;padding:24px 12px;font-size:13px;}
.clinic-chat-item{max-width:88%;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid #f2dfcf;box-shadow:0 4px 12px rgba(0,0,0,.03);}
.clinic-chat-item.is-web{align-self:flex-end;background:#fff3e8;border-color:#ffd5b0;}
.clinic-chat-author{font-size:12px;font-weight:700;color:#f97316;margin-bottom:4px;}
.clinic-chat-text{font-size:13px;color:#2b2b2b;white-space:pre-wrap;word-break:break-word;}
.clinic-chat-meta{font-size:11px;color:#9b8a79;margin-top:6px;}
.clinic-chat-attachment{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:7px 10px;border-radius:10px;background:#fff7f0;color:#d66a00;text-decoration:none;font-size:12px;font-weight:600;}
.clinic-chat-form{padding:12px 14px;border-top:1px solid #f1dfcf;background:#fff;display:flex;flex-direction:column;gap:10px;}
.clinic-chat-file-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.clinic-chat-file-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #ffd3af;border-radius:999px;background:#fff8f2;color:#f97316;cursor:pointer;font-size:12px;font-weight:600;}
.clinic-chat-file-name{font-size:12px;color:#8b735f;}
.clinic-chat-actions{display:flex;justify-content:flex-end;}
@media (max-width: 575.98px){.clinic-chat-panel{width:100%;}}

.procedure-settings .group-item-row:hover{
    background-color:#fff3e0 !important;
}

.procedure-settings .action-icons{
    display:flex;
    align-items:center;
    gap:5px;
    visibility:hidden;
    opacity:0;
    transition:opacity .2s ease-in-out;
}

.procedure-settings .group-item-row:hover .action-icons{
    visibility:visible;
    opacity:1;
}

.procedure-settings .action-icons .btn{
    margin:0 !important;
    padding:4px 8px;
}

.procedure-settings .group-item-row.active-orange{
    background-color:#fff3e0 !important;
    color:var(--main-orange) !important;
    border-left:3px solid var(--main-orange) !important;
    font-weight:700;
}

.procedure-settings .procedure-row > td{
    transition:none !important;
}

.procedure-settings .table-hover > tbody > tr:hover > td{
    --bs-table-accent-bg:transparent !important;
    background:var(--table-hover) !important;
    box-shadow:none !important;
}

.procedure-settings .procedure-row > td.text-orange:hover{
    color:var(--main-orange) !important;
}

.procedure-settings .table{
    table-layout:auto !important;
    width:100% !important;
}

.procedure-settings .table td:nth-child(2),
.procedure-settings .table td:nth-child(4){
    max-width:200px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.procedure-settings .table td:nth-child(3),
.procedure-settings .table td:nth-child(5),
.procedure-settings .table th:nth-child(3),
.procedure-settings .table th:nth-child(5){
    width:1% !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
}

.procedure-settings .page-item.active .page-link{
    background-color:#eb7719 !important;
    border-color:#eb7719 !important;
    color:#fff !important;
}

.procedure-settings .page-link{
    color:#eb7719 !important;
}

.procedure-settings .page-link:hover{
    background-color:#fff3e0 !important;
    color:#d35400 !important;
    border-color:#dee2e6 !important;
}

.procedure-settings .page-link:focus{
    box-shadow:0 0 0 .25rem rgba(235,119,25,.25) !important;
}

.procedure-settings .action-col{
    white-space:nowrap;
}

.procedure-settings .btn-icon{
    width:34px;
    height:34px;
    padding:0;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid #dee2e6;
    transition:all .15s ease-in-out;
}

.procedure-settings .btn-edit{
    color:#ff6600;
}

.procedure-settings .btn-edit:hover{
    background:#e7f1ff;
    border-color:#2222227e;
}

.procedure-settings .btn-delete{
    color:#dc3545;
}

.procedure-settings .btn-delete:hover{
    background:#fdecea;
    border-color:#dc3545;
}

.procedure-settings #statusFilter{
    border:1.5px solid #dee2e6;
    color:#555;
    transition:all .2s;
    cursor:pointer;
}

.procedure-settings #statusFilter:hover{
    border-color:var(--main-orange);
    background-color:#fff3e0;
}

.procedure-settings #statusFilter:focus{
    border-color:var(--main-orange) !important;
    box-shadow:0 0 0 .25rem rgba(235,119,25,.25) !important;
    outline:none;
}

.procedure-table-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin:14px;
    padding:10px 14px;
    background:var(--bg-surface-2);
    border-radius:12px;
    flex-wrap:wrap;
}

.procedure-table-footer-left{
    margin-left:auto;
    color:var(--text-main);
    font-size:14px;
    font-weight:500;
}

.procedure-table-footer-right{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.procedure-pagination-box .pagination{
    margin-bottom:0;
    gap:8px;
}

.procedure-pagination-box .page-link{
    min-width:40px;
    height:40px;
    padding:0 12px;
    border-radius:8px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}

.procedure-settings .procedure-per-page-control{
    min-width:120px;
    min-height:40px;
    height:40px;
    padding:0 32px 0 12px;
    font-size:13px;
    border-radius:8px;
}

.procedure-settings .procedure-per-page-dropdown .psd-menu{
    min-width:130px;
    bottom:calc(100% + 8px);
    top:auto;
}

@media (max-width: 768px){
    .procedure-settings .scrollable-list{
        max-height:220px;
        overflow-y:auto;
    }

    .procedure-settings .table{
        min-width:760px;
    }

    .procedure-table-footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .procedure-table-footer-left{
        margin-left:0;
    }

    .procedure-table-footer-right{
        width:100%;
        justify-content:space-between;
    }

    .procedure-pagination-box{
        max-width:calc(100% - 132px);
        overflow-x:auto;
    }

    .procedure-pagination-box .pagination{
        width:max-content;
    }
}

.psd{
    position:relative;
    width:100%;
}

.psd-control{
    width:100%;
    min-height:38px;
    border:1px solid #ced4da;
    border-radius:10px;
    background:#fff;
    padding:6px 34px 6px 10px;
    display:flex;
    align-items:center;
    text-align:left;
    position:relative;
    transition:.15s;
    font-size:13px;
    color:#24324a;
}

.psd-control:hover,
.psd-control.is-open{
    border-color:#f28c28;
    box-shadow:0 0 0 .12rem rgba(242,140,40,.12);
}

.psd-placeholder{
    color:#6b7280;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.psd-tag{
    display:inline-flex;
    align-items:center;
    max-width:100%;
    background:#fff3ea;
    color:#f28c28;
    border:1px solid #ffd3b5;
    border-radius:999px;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
}

.psd-tag-text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.psd-arrow{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    color:#666;
    pointer-events:none;
    font-size:12px;
}

.psd-menu{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    z-index:2600;
    padding:6px;
    max-height:240px;
    overflow-y:auto;
}

.psd-item{
    width:100%;
    border:none;
    background:transparent;
    text-align:left;
    padding:9px 10px;
    border-radius:8px;
    font-size:13px;
    color:#333;
    transition:.15s;
}

.psd-item:hover,
.psd-item.is-selected{
    background:#fff3ea;
    color:#f28c28;
}

.psd-control-multi{
    gap:6px;
}

.psd-tag-count{
    display:inline-flex;
    align-items:center;
    background:#fff7ef;
    color:#f28c28;
    border:1px solid #ffd3b5;
    border-radius:999px;
    padding:3px 8px;
    font-size:12px;
    font-weight:600;
}

.psd-item-multi{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:4px;
}

.psd-item-multi:last-child{
    margin-bottom:0;
}

.psd-item-remove{
    width:20px;
    height:20px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid #ffd3b5;
    color:#f28c28;
    font-size:12px;
    flex:0 0 20px;
}

.psd-item.is-selected + .psd-item.is-selected,
.psd-menu .psd-item.is-selected{
    box-shadow:none;
}

/* =========================================================
   COLLAPSED SIDEBAR
========================================================= */

html.sidebar-is-collapsed .sidebar{
    width: var(--sidebar-c);
}

html.sidebar-is-collapsed .main{
    margin-left: var(--sidebar-c);
}

html.sidebar-is-collapsed .sidebar span{
    display:none;
}

html.sidebar-is-collapsed .sidebar .logo > div:first-child{
    display:none !important;
}

html.sidebar-is-collapsed .sidebar .logo{
    justify-content:center !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

html.sidebar-is-collapsed #toggle-btn{
    margin-right:0 !important;
}

html.sidebar-is-collapsed .sidebar{
    overflow:visible !important;
}
html.sidebar-is-collapsed .sidebar-nav{
    overflow:visible;
}

html.sidebar-is-collapsed .menu-item{
    position:relative;
}

html.sidebar-is-collapsed .rotate-icon{
    display:none !important;
}

/* =========================================================
   SUBMENU
========================================================= */

.rotate-icon{
    transition:transform .25s ease-in-out;
}

[aria-expanded="true"] .rotate-icon{
    transform:rotate(90deg);
    color: var(--main-orange);
}

#settingsSubmenu ul,
#reportSubmenu ul{
    font-family: var(--sidebar-font);
}

#settingsSubmenu a,
#reportSubmenu a{
    font-size:13.5px;
    font-weight:500;
    color:rgba(255,255,255,.82);
}

#settingsSubmenu ul,
#reportSubmenu ul{
    background:rgba(255,255,255,.02);
    margin-left:20px !important;
}

#settingsSubmenu a,
#reportSubmenu a{
    transition:all .2s;
}

#settingsSubmenu a:hover,
#reportSubmenu a:hover{
    color: var(--main-orange) !important;
    opacity:1 !important;
    padding-left:25px !important;
}

.active-sub{
    background:rgba(235,119,25,.1);
    color:#fff !important;
}

/* =========================================================
   FLYOUT SUBMENU - COLLAPSED
========================================================= */

html.sidebar-is-collapsed #settingsSubmenu,
html.sidebar-is-collapsed #reportSubmenu{
    display:none !important;
}

html.sidebar-is-collapsed .menu-item:hover #settingsSubmenu,
html.sidebar-is-collapsed .menu-item:hover #reportSubmenu{
    display:block !important;
    position:absolute;
    left:calc(100% - 2px);
    top:0;
    width:220px;
    background:#383737;
    border-radius:0 8px 8px 0;
    box-shadow:4px 4px 10px rgba(0,0,0,.3);
    z-index:9999;
    height:auto !important;
    padding-bottom:10px;
}

html.sidebar-is-collapsed .menu-item:hover #settingsSubmenu::before,
html.sidebar-is-collapsed .menu-item:hover #reportSubmenu::before{
    content:"";
    position:absolute;
    left:-18px;
    top:0;
    width:18px;
    height:100%;
    background:transparent;
}

html.sidebar-is-collapsed .menu-item:hover #settingsSubmenu ul,
html.sidebar-is-collapsed .menu-item:hover #reportSubmenu ul{
    background:transparent !important;
    margin-left:0 !important;
    border-left:none !important;
    padding-left:0 !important;
}

html.sidebar-is-collapsed .menu-item:hover #settingsSubmenu li,
html.sidebar-is-collapsed .menu-item:hover #reportSubmenu li{
    width:100%;
}

html.sidebar-is-collapsed .menu-item:hover #settingsSubmenu a,
html.sidebar-is-collapsed .menu-item:hover #reportSubmenu a{
    padding-left:20px !important;
    color:#bdc3c7 !important;
    opacity:1 !important;
}

html.sidebar-is-collapsed .menu-item:hover #settingsSubmenu a:hover,
html.sidebar-is-collapsed .menu-item:hover #reportSubmenu a:hover{
    background: var(--main-orange) !important;
    color:#ffffff !important;
    padding-left:25px !important;
}

/* =========================================================
   SWEETALERT
========================================================= */

.swal2-confirm{
    background: var(--main-orange) !important;
    border-color: var(--main-orange) !important;
    box-shadow:none !important;
}

.swal2-confirm:hover{
    background:#e56700 !important;
    border-color:#e56700 !important;
}

.swal2-confirm:focus{
    box-shadow:0 0 0 .2rem rgba(235,119,25,.2) !important;
}

/* =========================================================
   SPECIAL READONLY FIELD
========================================================= */

#customer_phone:read-only{
    cursor:not-allowed;
    background-color:#e9ecef;
    opacity:1;
}

/* =========================================================
   GLOBAL ORANGE NAV TABS
   ĐẶT GẦN CUỐI FILE ĐỂ ƯU TIÊN CAO
========================================================= */

.nav.nav-tabs{
    border-bottom:1px solid #e9d7c7 !important;
    gap:4px;
}

.nav.nav-tabs .nav-item{
    margin-bottom:-1px;
}

.nav.nav-tabs .nav-link{
    color:#3f3f46 !important;
    font-weight:600 !important;
    border:1px solid transparent !important;
    border-top-left-radius:10px !important;
    border-top-right-radius:10px !important;
    border-bottom:1px solid transparent !important;
    background:transparent !important;
    padding:10px 18px !important;
    transition:all .18s ease;
    box-shadow:none !important;
    text-decoration:none !important;
}

.nav.nav-tabs .nav-link:hover,
.nav.nav-tabs .nav-link:focus{
    color: var(--main-orange) !important;
    background: var(--orange-soft) !important;
    border-color:#ffe0c2 #ffe0c2 #e9d7c7 !important;
}

.nav.nav-tabs .nav-link.active,
.nav.nav-tabs .nav-item.show .nav-link{
    color: var(--main-orange) !important;
    background:#fff !important;
    border-color:#ffd4ad #ffd4ad #fff !important;
    font-weight:700 !important;
    position:relative;
}

.nav.nav-tabs .nav-link.active::after,
.nav.nav-tabs .nav-item.show .nav-link::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:-1px;
    height:3px;
    border-radius:999px;
    background: var(--main-orange);
}

.tab-content{
    background:#fff;
}

.nav.nav-tabs .btn,
.nav.nav-tabs button.btn{
    margin-top:2px;
}

/* =========================================================
   MOBILE
========================================================= */

/* PWA install prompt: mobile only. */
.pwa-install-prompt{
    display:none;
}

/* Patient detail: both stored phone numbers are tap-to-call links. */
.patient-phone-link{
    color:inherit;
    text-decoration:none;
}
.patient-phone-link:hover{
    color:var(--main-orange);
    text-decoration:underline;
}

/* Mobile-only patient search. Desktop keeps its existing sidebar search. */
.mobile-patient-search{
    display:none;
}

@media (max-width:768px){
    html, body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    body{
        font-size:13px;
        line-height:1.4;
        -webkit-text-size-adjust:100%;
    }

    .main{
        padding: calc(56px + env(safe-area-inset-top)) 8px calc(12px + env(safe-area-inset-bottom)) !important;
        margin-left:0 !important;
        width:100% !important;
        min-width:0;
        transition:.3s;
        overflow-x:hidden;
    }

    .main > .container,
    .main > .container-fluid,
    .main .container,
    .main .container-fluid{
        max-width:100%;
        padding-left:6px !important;
        padding-right:6px !important;
    }

    /* Mobile: compact, visually balanced fixed row. */
    .app-topbar,
    .app-topbar.is-title-empty{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        z-index:1002 !important;
        width:100% !important;
        height:calc(48px + env(safe-area-inset-top));
        min-height:calc(48px + env(safe-area-inset-top));
        margin:0 !important;
        padding:calc(5px + env(safe-area-inset-top)) 7px 5px calc(var(--sidebar-c) + 6px) !important;
        gap:8px !important;
        flex-wrap:nowrap;
        align-items:center;
        background:var(--sidebar-bg);
        box-shadow:0 2px 8px rgba(0,0,0,.18);
        transform:translateZ(0);
    }

    .mobile-patient-search{
        display:block;
        flex:1 1 auto;
        min-width:0;
        order:1;
    }

    .mobile-patient-search .form-control{
        height:38px;
        padding:7px 10px !important;
        border:1px solid rgba(255,255,255,.20);
        border-radius:8px;
        background:rgba(255,255,255,.96);
        box-shadow:none;
    }

    .mobile-patient-search-icon{
        display:none;
    }

    .mobile-patient-search .dropdown-menu{
        top:calc(100% + 6px);
        max-height:min(320px, calc(100dvh - 76px));
        overflow-y:auto;
        overflow-x:hidden;
        border:1px solid #f1c38f;
        border-radius:10px;
        background:#fffdf9;
        box-shadow:0 10px 24px rgba(53,36,20,.24);
        padding:0;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    .mobile-patient-search .dropdown-item{
        padding:11px 12px;
        white-space:normal;
        border-bottom:1px solid #f5ddc4;
        background:#fffdf9;
        -webkit-tap-highlight-color:rgba(244,129,32,.22);
        user-select:none;
        -webkit-user-select:none;
    }

    .mobile-patient-search .dropdown-item:last-child{
        border-bottom:0;
    }

    .mobile-patient-search .dropdown-item:active,
    .mobile-patient-search .dropdown-item:focus,
    .mobile-patient-search .dropdown-item:hover{
        color:#9c4a05;
        background:#fff0df;
    }

    .mobile-patient-search .sidebar-patient-line1{
        color:#873e00;
        font-size:14px;
        line-height:1.4;
    }

    .mobile-patient-search .sidebar-patient-line2{
        color:#806452;
        font-size:12px;
        line-height:1.45;
    }

    .app-topbar-title-slot{
        display:none !important;
    }

    /* Pages without a title used to move the topbar to the right.
       Keep the mobile search/chat/avatar bar visible in installed PWA too. */
    .main.has-empty-topbar{
        padding-top:calc(56px + env(safe-area-inset-top)) !important;
    }

    .app-topbar-actions{
        display:flex !important;
        order:2;
        gap:4px !important;
        flex:0 0 auto;
        align-items:center;
    }

    #topbarChatToggle{
        color:#fff !important;
    }

    .topbar-avatar-dropdown .rounded-circle{
        width:32px !important;
        height:32px !important;
    }

    #topbarChatToggle{
        margin-right:0 !important;
        width:32px;
        height:32px;
        min-height:32px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .pwa-install-prompt{
        position:fixed;
        left:10px;
        right:10px;
        bottom:calc(12px + env(safe-area-inset-bottom));
        z-index:10020;
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px 10px 10px 13px;
        border:1px solid rgba(255,176,106,.44);
        border-radius:14px;
        background:#383737;
        color:#fff;
        box-shadow:0 12px 28px rgba(0,0,0,.26);
    }

    .pwa-install-prompt.d-none{
        display:none !important;
    }

    .pwa-install-prompt__content{
        display:flex;
        flex:1;
        min-width:0;
        flex-direction:column;
        gap:2px;
    }

    .pwa-install-prompt__content strong{
        color:#ffb06a;
        font-size:13px;
    }

    .pwa-install-prompt__content span{
        font-size:11px;
        line-height:1.35;
        color:rgba(255,255,255,.82);
    }

    .pwa-install-prompt__button{
        border:0;
        background:#f47b20;
        color:#fff;
        font-weight:700;
        white-space:nowrap;
    }

    .pwa-install-prompt__dismiss{
        width:28px;
        height:28px;
        padding:0;
        border:0;
        background:transparent;
        color:rgba(255,255,255,.78);
        font-size:23px;
        line-height:1;
    }

    .patient-phone-link{
        display:block;
        min-height:36px;
        padding:4px 0;
        -webkit-tap-highlight-color:rgba(244,129,32,.22);
    }

    .patient-phone-link:active{
        color:var(--main-orange) !important;
        opacity:.75;
    }

    .card{
        border-radius:12px !important;
    }

    .card-body{
        padding:10px !important;
    }

    .card-header,
    .card-footer{
        padding:.6rem .7rem;
    }

    .row.g-3,
    .row.g-4{
        --bs-gutter-x:8px;
        --bs-gutter-y:8px;
    }

    .form-label{
        margin-bottom:.25rem;
        font-size:.85rem;
    }

    .table-responsive{
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        border-radius:10px;
    }

    .table{
        font-size:12px;
    }

    .table > :not(caption) > * > *{
        padding:7px 6px;
        white-space:nowrap;
    }

    .btn{
        min-height:36px;
        padding:.35rem .65rem;
        font-size:.875rem;
    }

    .btn-sm{
        min-height:32px;
        padding:.25rem .5rem;
        font-size:.8rem;
    }

    input.form-control,
    select.form-select{
        min-height:36px;
        padding-top:.3rem !important;
        padding-bottom:.3rem !important;
    }

    input.form-control,
    select.form-select,
    textarea.form-control{
        font-size:16px !important;
    }

    .modal{
        padding-left:6px !important;
        padding-right:6px !important;
    }

    .modal-dialog{
        margin:10px auto;
        max-width:calc(100vw - 12px);
    }

    .modal-content{
        max-height:calc(100dvh - 20px);
        border-radius:14px;
        overflow:hidden;
        display:flex;
        flex-direction:column;
    }

    .modal-body{
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        padding:10px;
    }

    .modal-header{
        padding:.65rem .75rem;
    }

    .modal-title{
        font-size:1rem;
    }

    .modal-footer{
        padding:8px 10px calc(8px + env(safe-area-inset-bottom));
        gap:.4rem;
        flex-wrap:wrap;
    }

    .dropdown-menu{
        max-width:calc(100vw - 20px);
    }

    /* Mobile default: show the compact icon rail.
       Keep overflow visible so a clicked report/settings flyout can extend right. */
    .sidebar{
        width: var(--sidebar-c) !important;
        left:0;
        padding-top:calc(48px + env(safe-area-inset-top));
        box-sizing:border-box;
        overflow:visible !important;
        z-index:1004;
    }

    /* The toggle is fixed in the top bar; start sidebar icons below that bar. */
    .sidebar-nav{
        overflow:visible;
    }

    .sidebar .logo{
        height:0;
        min-height:0;
        padding:0 !important;
        border:0;
        overflow:visible;
    }

    .sidebar .logo > div:first-child,
    .sidebar span,
    .sidebar-patient-search,
    .rotate-icon{
        display:none !important;
    }

    /* The icon rail opens report/settings submenus as a mobile flyout. */
    .sidebar .menu-item{
        position:relative;
    }
    .sidebar .menu-item > #settingsSubmenu.show,
    .sidebar .menu-item > #reportSubmenu.show{
        display:block !important;
        position:absolute;
        left:calc(100% - 2px);
        top:0;
        width:220px;
        height:auto !important;
        max-height:calc(100dvh - 16px);
        overflow-y:auto;
        background:#383737;
        border-radius:0 8px 8px 0;
        box-shadow:4px 4px 10px rgba(0,0,0,.3);
        z-index:9999;
        padding:0 0 10px;
    }
    .sidebar .menu-item > #settingsSubmenu.show ul,
    .sidebar .menu-item > #reportSubmenu.show ul{
        background:transparent !important;
        margin-left:0 !important;
        border-left:none !important;
        padding-left:0 !important;
    }
    .sidebar .menu-item > #settingsSubmenu.show a,
    .sidebar .menu-item > #reportSubmenu.show a{
        display:block !important;
        padding-left:20px !important;
        color:#bdc3c7 !important;
    }

    #toggle-btn{
        position:fixed;
        top:calc(5px + env(safe-area-inset-top));
        left:8px;
        width:38px;
        height:38px;
        display:flex;
        align-items:center;
        justify-content:center;
        background: var(--sidebar-bg);
        padding:0;
        border-radius:6px;
        z-index:1003;
        box-shadow:0 2px 5px rgba(0,0,0,.2);
        margin:0 !important;
    }

    /* On mobile, collapsed means fully hidden; only the floating toggle stays visible. */
    html.sidebar-is-collapsed .sidebar{
        left:-80px;
        overflow:hidden !important;
        z-index:1004;
    }

    /* On mobile, a collapsed sidebar must not render desktop hover flyouts. */
    html.sidebar-is-collapsed .sidebar #settingsSubmenu,
    html.sidebar-is-collapsed .sidebar #reportSubmenu,
    html.sidebar-is-collapsed .sidebar .menu-item:hover #settingsSubmenu,
    html.sidebar-is-collapsed .sidebar .menu-item:hover #reportSubmenu{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
    }

    html.sidebar-is-collapsed #toggle-btn{
        position:fixed;
        top:calc(5px + env(safe-area-inset-top));
        left:8px;
        width:38px;
        height:38px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:var(--sidebar-bg);
        padding:0;
        border-radius:6px;
        z-index:1003;
        box-shadow:0 2px 5px rgba(0,0,0,.2);
        margin:0 !important;
        display:block;
    }

    html.sidebar-is-collapsed .sidebar .logo{
        padding:0 !important;
    }

    .main{
        margin-left:var(--sidebar-c) !important;
        width:calc(100% - var(--sidebar-c)) !important;
        padding-left:6px !important;
        padding-right:6px !important;
    }

    html.sidebar-is-collapsed .main{
        margin-left:0 !important;
        width:100% !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    html.sidebar-is-collapsed .sidebar a{
        padding:12px 0 !important;
        margin:5px 8px !important;
        justify-content:center !important;
        text-align:center;
    }

    html.sidebar-is-collapsed .sidebar a i{
        margin:0 !important;
        min-width:unset !important;
        width:100% !important;
        text-align:center !important;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    html.sidebar-is-collapsed .sidebar a > div{
        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        margin:0 !important;
    }
    
    .pagination{
        flex-wrap: wrap;
        gap: 5px;
    }

    .pagination .page-link{
        min-width:34px;
        height:34px;
        padding:0 8px !important;
        font-size:12px !important;
        display:flex;
        align-items:center;
        justify-content:center;
    }
}

/* =========================================================
   DROPDOWN
========================================================= */
.dropdown-item-orange:hover,
.dropdown-item-orange:focus{
    background:var(--orange-soft) !important;
    color:var(--orange-dark) !important;
}

/* =========================================================
   SYSTEM CLINICS
========================================================= */
.system-clinics__hero{
    padding:18px 20px;
    border:1px solid var(--orange-border);
    border-radius:14px;
    background:linear-gradient(135deg,var(--orange-soft),#fff);
}
.system-clinics__hero h2,
.system-clinics__card h5{
    color:var(--orange-dark);
    font-weight:700;
}
.system-clinics__card{
    border:1px solid var(--orange-border) !important;
}
.system-clinics .table-responsive{
    position:relative;
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:14px;
    border:1px solid #e8e8e8;
    background:#fff;
}
.system-clinics .table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin-bottom:0;
}
.system-clinics .table thead th{
    background:#4d4d4d !important;
    color:#fff !important;
    font-weight:700;
    vertical-align:middle;
    border-top:0;
    border-bottom:1px solid #6a6a6a;
    border-right:1px solid #6a6a6a;
    padding:16px 12px;
    white-space:nowrap;
    font-size:14px;
}
.system-clinics .table thead th:last-child{
    border-right:0;
}
.system-clinics .table tbody td{
    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec;
    border-right:1px solid #e3e3e3;
    border-left:0;
    padding:16px 12px;
    color:#24324a;
    background:#fff;
    vertical-align:middle;
    white-space:nowrap;
    font-size:14px;
}
.system-clinics .table tbody td:first-child{
    border-left:1px solid #e3e3e3;
}
.system-clinics .table tbody tr:hover td{
    background:#fffaf5;
}
.system-clinic-owner-note{
    padding:10px 12px;
    border:1px solid var(--orange-border);
    border-radius:8px;
    background:var(--orange-soft);
    color:var(--orange-dark);
}

/* =========================================================
   SUBSCRIPTION EXPIRY BANNER
========================================================= */
.sub-expiry-banner{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex:0 0 auto;
    width:auto;
    max-width:320px;
    margin-left:auto;
    margin-right:8px;
    padding:7px 8px 7px 10px;
    border:1px solid #ffd8a8;
    border-radius:10px;
    background:linear-gradient(135deg,#fff7ed,#ffe8cc);
    color:#9a3412;
    box-shadow:0 4px 14px rgba(154,52,18,.08);
    z-index:30;
}
.sub-expiry-banner.is-visible{
    display:flex !important;
}
.sub-expiry-banner__body{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    flex:1 1 auto;
}
.sub-expiry-banner__icon{
    flex-shrink:0;
    color:#ea580c;
    font-size:13px;
}
.sub-expiry-banner__text{
    min-width:0;
    font-size:12.5px;
    font-weight:600;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.sub-expiry-banner__close{
    flex-shrink:0;
    width:26px;
    height:26px;
    border:0;
    border-radius:8px;
    background:rgba(255,255,255,.72);
    color:#9a3412;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.sub-expiry-banner__close:hover{
    background:#fff;
    color:#7c2d12;
}
.app-topbar-title-slot{
    flex:1 1 auto !important;
    min-width:0 !important;
}
.app-topbar-title{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
@media (max-width:1100px){
    .sub-expiry-banner{
        max-width:260px;
    }
}
@media (max-width:768px){
    .sub-expiry-banner,
    .sub-expiry-banner.is-visible{
        position:absolute;
        left:calc(var(--sidebar-c) + 6px);
        right:56px;
        top:calc(5px + env(safe-area-inset-top));
        height:38px;
        width:auto;
        max-width:none;
        margin:0;
        padding:0 6px 0 10px;
        z-index:1005;
        border-radius:8px;
        box-shadow:0 6px 16px rgba(0,0,0,.18);
    }
    .app-topbar:has(#topbarChatToggle) .sub-expiry-banner{
        right:92px;
    }
    .sub-expiry-banner__text{
        font-size:12px;
    }
    .sub-expiry-banner__close{
        width:30px;
        height:30px;
    }
}
@media (display-mode:standalone) and (max-width:768px){
    .sub-expiry-banner,
    .sub-expiry-banner.is-visible{
        z-index:1006;
        box-shadow:0 8px 18px rgba(0,0,0,.22);
    }
}

/* =========================================================
   SYSTEM NOTICE
========================================================= */
#systemNoticeModal .modal-dialog{
    height:auto;
    max-height:min(85vh,720px);
}
#systemNoticeModal .modal-dialog-scrollable{
    display:flex;
    align-items:center;
}
#systemNoticeModal .modal-dialog-scrollable .modal-content{
    display:flex;
    flex-direction:column;
    max-height:min(85vh,720px);
    overflow:hidden;
}
.system-notice-modal{
    position:relative;
    border:0;
    border-radius:22px;
    background:#fff;
    box-shadow:0 28px 80px rgba(91,48,9,.22);
}
.system-notice-accent{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:5px;
    background:linear-gradient(90deg,#ff9a3c,var(--main-orange),var(--orange-dark));
    border-radius:22px 22px 0 0;
}
.system-notice-modal .modal-header{
    flex-shrink:0;
    border:0;
    padding:28px 28px 18px;
    background:#fff;
    color:var(--text-main);
}
.system-notice-header{
    display:flex;
    align-items:flex-start;
    gap:14px;
    width:100%;
}
.system-notice-icon{
    flex-shrink:0;
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(145deg,var(--main-orange),var(--orange-dark));
    box-shadow:0 10px 20px rgba(235,119,25,.28);
    font-size:18px;
}
.system-notice-heading{ min-width:0; flex:1; padding-top:2px; }
.system-notice-eyebrow{
    margin-bottom:6px;
    color:var(--main-orange);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.system-notice-modal .modal-title{
    color:#1f2937;
    font-size:1.35rem;
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.015em;
}
.system-notice-modal .modal-body.system-notice-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    margin:0 20px;
    padding:20px 22px;
    border:1px solid var(--orange-border);
    border-radius:16px;
    background:linear-gradient(180deg,#fffdfb 0%,#fff 100%);
    scrollbar-width:thin;
    scrollbar-color:rgba(232,125,42,.45) transparent;
}
.system-notice-modal .modal-body.system-notice-scroll::-webkit-scrollbar{ width:6px; }
.system-notice-modal .modal-body.system-notice-scroll::-webkit-scrollbar-button{ display:none; height:0; width:0; }
.system-notice-modal .modal-body.system-notice-scroll::-webkit-scrollbar-track{ background:transparent; }
.system-notice-modal .modal-body.system-notice-scroll::-webkit-scrollbar-thumb{
    background:rgba(232,125,42,.45);
    border-radius:999px;
}
.system-notice-content{
    white-space:pre-wrap;
    word-break:break-word;
    font-size:15.5px;
    line-height:1.75;
    color:#374151;
}
.system-notice-modal .modal-footer{
    flex-shrink:0;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    padding:18px 28px 24px;
    border-top:0;
    background:#fff;
}
.system-notice-btn-secondary{
    min-width:120px;
    border:1px solid #e5e7eb !important;
    color:#4b5563 !important;
    background:#fff !important;
}
.system-notice-btn-secondary:hover{
    border-color:var(--orange-border) !important;
    color:var(--orange-dark) !important;
    background:var(--orange-soft) !important;
}
.system-notice-btn-primary{
    min-width:140px;
}
@media (max-width:576px){
    #systemNoticeModal .modal-dialog,
    #systemNoticeModal .modal-dialog-scrollable .modal-content{
        max-height:min(92vh,720px);
    }
    .system-notice-modal{ border-radius:18px; }
    .system-notice-modal .modal-header{ padding:22px 18px 14px; }
    .system-notice-icon{ width:42px; height:42px; border-radius:12px; font-size:16px; }
    .system-notice-modal .modal-title{ font-size:1.15rem; }
    .system-notice-modal .modal-body.system-notice-scroll{
        margin:0 14px;
        padding:16px;
    }
    .system-notice-modal .modal-footer{
        padding:14px 18px 18px;
        justify-content:stretch;
    }
    .system-notice-modal .modal-footer .btn{
        flex:1 1 auto;
        min-width:0;
    }
}
html[data-theme="dark"] #systemNoticeModal .system-notice-modal,
html[data-theme="dark"] #systemNoticeModal .system-notice-modal .modal-header,
html[data-theme="dark"] #systemNoticeModal .system-notice-modal .modal-footer{
    background:var(--bg-surface) !important;
    color:var(--text-main);
}
html[data-theme="dark"] #systemNoticeModal .system-notice-modal{
    border:1px solid var(--border-soft);
    box-shadow:0 28px 80px rgba(0,0,0,.55);
}
html[data-theme="dark"] #systemNoticeModal .system-notice-modal .modal-title{
    color:var(--text-main);
}
html[data-theme="dark"] #systemNoticeModal .system-notice-modal .modal-body.system-notice-scroll{
    background:var(--bg-surface-2);
    border-color:var(--border-soft);
    scrollbar-color:var(--orange-border) transparent;
}
html[data-theme="dark"] #systemNoticeModal .system-notice-content{
    color:var(--text-main);
}
html[data-theme="dark"] #systemNoticeModal .system-notice-btn-secondary{
    background:var(--input-bg) !important;
    border-color:var(--border-soft) !important;
    color:var(--text-main) !important;
}
html[data-theme="dark"] #systemNoticeModal .system-notice-btn-secondary:hover{
    background:var(--bg-surface-2) !important;
    border-color:var(--orange-border) !important;
    color:var(--orange-soft) !important;
}
textarea.notice-content-input{
    min-height:220px !important;
    height:220px;
    resize:none !important;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(232,125,42,.45) transparent;
}
textarea.notice-content-input::-webkit-scrollbar{ width:6px; }
textarea.notice-content-input::-webkit-scrollbar-button{ display:none; height:0; width:0; }
textarea.notice-content-input::-webkit-scrollbar-track{ background:transparent; }
textarea.notice-content-input::-webkit-scrollbar-thumb{
    background:rgba(232,125,42,.45);
    border-radius:999px;
}

/* =========================================================
   EXAM / TREATMENT PROGRESS - SHARED COLUMNS
========================================================= */
.progress-table,
.progress-draft-table{
    width:1680px !important;
    min-width:1680px !important;
    table-layout:fixed;
}
.progress-table th,
.progress-table td,
.progress-draft-table th,
.progress-draft-table td{
    box-sizing:border-box;
}
.progress-table tr > :nth-child(1),
.progress-draft-table tr > :nth-child(1){width:70px;min-width:70px;max-width:70px;}
.progress-table tr > :nth-child(2),
.progress-draft-table tr > :nth-child(2){width:100px;min-width:100px;max-width:100px;}
.progress-table tr > :nth-child(3),
.progress-draft-table tr > :nth-child(3){width:160px;min-width:160px;max-width:160px;}
.progress-table tr > :nth-child(4),
.progress-draft-table tr > :nth-child(4){width:280px;min-width:280px;max-width:280px;}
.progress-table tr > :nth-child(5),
.progress-draft-table tr > :nth-child(5){width:140px;min-width:140px;max-width:140px;}
.progress-table tr > :nth-child(6),
.progress-draft-table tr > :nth-child(6){width:140px;min-width:140px;max-width:140px;}
.progress-table tr > :nth-child(7),
.progress-draft-table tr > :nth-child(7){width:70px;min-width:70px;max-width:70px;}
.progress-table tr > :nth-child(8),
.progress-draft-table tr > :nth-child(8){width:100px;min-width:100px;max-width:100px;}
.progress-table tr > :nth-child(9),
.progress-draft-table tr > :nth-child(9){width:110px;min-width:110px;max-width:110px;}
.progress-table tr > :nth-child(10),
.progress-draft-table tr > :nth-child(10){width:80px;min-width:80px;max-width:80px;}
.progress-table tr > :nth-child(11),
.progress-draft-table tr > :nth-child(11){width:100px;min-width:100px;max-width:100px;}
.progress-table tr > :nth-child(12),
.progress-draft-table tr > :nth-child(12){width:110px;min-width:110px;max-width:110px;}
.progress-table tr > :nth-child(13),
.progress-draft-table tr > :nth-child(13){width:130px;min-width:130px;max-width:130px;}
.progress-table tr > :nth-child(14),
.progress-draft-table tr > :nth-child(14){width:90px;min-width:90px;max-width:90px;}
.progress-table tr > :nth-child(4),
.progress-draft-table tr > :nth-child(4){white-space:normal;overflow-wrap:anywhere;}
.progress-table tr > :nth-child(14),
.progress-draft-table tr > :nth-child(14){white-space:nowrap;}
.progress-draft-table .progress-draft-content-cell,
.progress-draft-table .progress-draft-content-cell textarea,
.progress-draft-table .prog-note,
.progress-draft-table .progress-draft-note{
    width:100%;
    min-width:0;
    max-width:none;
}
.progress-draft-table th.progress-sticky-action,
.progress-draft-table td.progress-sticky-action{
    min-width:90px;
    width:90px;
    max-width:90px;
}

    .main.has-empty-topbar{
        padding-top:calc(54px + env(safe-area-inset-top)) !important;
    }

    .app-topbar-title{
        max-width:170px;
        font-size:17px !important;
    }

    h1{font-size:1.55rem;}
    h2{font-size:1.35rem;}
    h3{font-size:1.2rem;}

    .d-flex.gap-2,
    .d-flex.gap-3{
        row-gap:8px !important;
    }

    .modal-footer .btn{
        flex:1 1 auto;
    }

    .payment-pagination-box{
        overflow-x:auto;
        justify-content:flex-start !important;
        padding-bottom:4px;
    }
}

/* =========================================================
   DARK THEME OVERRIDES
========================================================= */
html[data-theme="dark"],
html[data-theme="dark"] body,
[data-theme="dark"] .main,
[data-theme="dark"] .content,
[data-theme="dark"] .container-fluid{
    background:var(--bg-page) !important;
    color:var(--text-main) !important;
} 

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .popover,
[data-theme="dark"] .toast{
    background:var(--bg-surface) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .table,
[data-theme="dark"] .table > :not(caption) > * > *{
    background-color:var(--bg-surface) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-secondary{
    background:var(--bg-surface-2) !important;
    color:var(--text-main) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled{
    background-color:var(--input-bg) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}

[data-theme="dark"] .form-control::placeholder{
    color:#888 !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .app-topbar-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .fw-bold{
    color:var(--text-main) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary{
    color:var(--text-muted) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end,
[data-theme="dark"] .dropdown-divider,
[data-theme="dark"] hr{
    border-color:var(--border-soft) !important;
}

[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-outline-secondary{
    background:var(--bg-surface-2) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}

[data-theme="dark"] .btn-link.text-dark,
[data-theme="dark"] #topbarChatToggle{
    color:var(--text-main) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer{
    background:var(--bg-surface-2) !important;
    border-color:var(--border-soft) !important;
    color:var(--text-main) !important;
}

[data-theme="dark"] .nav-tabs .nav-link{
    color:var(--text-muted);
}

[data-theme="dark"] .nav-tabs .nav-link.active{
    background:var(--bg-surface) !important;
    color:var(--main-orange) !important;
    border-color:var(--border-soft) var(--border-soft) var(--bg-surface) !important;
}

[data-theme="dark"] .page-link{
    background:var(--bg-surface) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}

[data-theme="dark"] .page-item.active .page-link{
    background:var(--main-orange) !important;
    border-color:var(--main-orange) !important;
    color:#fff !important;
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .alert-info{
    border-color:var(--border-soft);
}

[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow,
[data-theme="dark"] .card.shadow-sm{
    box-shadow:var(--shadow-soft) !important;
}

[data-theme="dark"] .app-topbar{
    background:transparent;
}

[data-theme="dark"] .dropdown-item{
    color:var(--text-main) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus{
    background:var(--orange-soft) !important;
    color:var(--main-orange) !important;
}

[data-theme="dark"] .swal2-popup{
    background:var(--bg-surface) !important;
    color:var(--text-main) !important;
}

[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container{
    color:var(--text-main) !important;
}

[data-theme="dark"] .flatpickr-calendar{
    background:var(--bg-surface) !important;
    box-shadow:var(--shadow-soft) !important;
}

[data-theme="dark"] .crp-popup,
[data-theme="dark"] .sdp-picker{
    background:var(--bg-surface) !important;
    border-color:var(--orange-border) !important;
    color:var(--text-main) !important;
}

[data-theme="dark"] .crp-input,
[data-theme="dark"] .sdp-picker__day,
[data-theme="dark"] .crp-day,
[data-theme="dark"] .crp-top-input{
    color:var(--text-main);
}

[data-theme="dark"] .finance-page-card,
[data-theme="dark"] .dash-report-card,
[data-theme="dark"] .dash-chart-card,
[data-theme="dark"] .dash-mini-stat{
    background:var(--bg-surface) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}

/* Shared dark surfaces; keep light styles and picker geometry untouched. */
[data-theme="dark"] .tab-content,
[data-theme="dark"] .psd-menu,
[data-theme="dark"] #sidebar_patient_dropdown,
[data-theme="dark"] .mobile-patient-search .dropdown-item,
[data-theme="dark"] .crp-top-inputs,
[data-theme="dark"] .crp-presets,
[data-theme="dark"] .sdp-picker__weekdays,
[data-theme="dark"] .sdp-picker__days,
[data-theme="dark"] .sdp-picker__footer,
[data-theme="dark"] .sdp-time-col,
[data-theme="dark"] .apx-date-picker,
[data-theme="dark"] .apx-time-picker,
[data-theme="dark"] .apx-date-picker__weekdays,
[data-theme="dark"] .apx-date-picker__days,
[data-theme="dark"] .apx-date-picker__footer,
[data-theme="dark"] .apx-time-picker__top,
[data-theme="dark"] .apx-time-picker__body{
    background:var(--bg-surface);
    border-color:var(--border-soft);
    color:var(--text-main);
}
[data-theme="dark"] .psd-control,
[data-theme="dark"] .crp-input,
[data-theme="dark"] .crp-top-input{
    background:var(--input-bg);
    border-color:var(--border-soft);
    color:var(--text-main);
}
[data-theme="dark"] .psd-item,
[data-theme="dark"] .sidebar-patient-line1,
[data-theme="dark"] .mobile-patient-search .sidebar-patient-line1,
[data-theme="dark"] .apx-date-picker__day,
[data-theme="dark"] .apx-time-picker__preview,
[data-theme="dark"] .sdp-time-item{
    color:var(--text-main);
}
[data-theme="dark"] #sidebar_patient_dropdown .dropdown-item{
    color:var(--text-main) !important;
}
[data-theme="dark"] .psd-placeholder,
[data-theme="dark"] .psd-arrow,
[data-theme="dark"] .mobile-patient-search .sidebar-patient-line2,
[data-theme="dark"] .crp-top-sep,
[data-theme="dark"] .crp-weekday,
[data-theme="dark"] .sdp-picker__weekday,
[data-theme="dark"] .apx-date-picker__weekday,
[data-theme="dark"] .crp-day.is-other-month,
[data-theme="dark"] .sdp-picker__day.is-other-month,
[data-theme="dark"] .apx-date-picker__day.is-other-month,
[data-theme="dark"] .apx-time-picker__item{
    color:var(--text-muted);
}
[data-theme="dark"] .crp-panel + .crp-panel,
[data-theme="dark"] .sdp-picker__time{
    border-color:var(--border-soft);
}
[data-theme="dark"] .sdp-picker__time{
    background:var(--bg-surface-2);
}
[data-theme="dark"] .sdp-time-label{
    color:var(--main-orange);
}
[data-theme="dark"] .psd-tag,
[data-theme="dark"] .psd-tag-count,
[data-theme="dark"] .psd-item-remove,
[data-theme="dark"] .psd-item:hover,
[data-theme="dark"] .psd-item.is-selected,
[data-theme="dark"] .crp-preset-btn:not(.is-active):not(:hover),
[data-theme="dark"] .crp-day.is-in-range,
[data-theme="dark"] .crp-day:hover:not(.is-other-month),
[data-theme="dark"] .sdp-picker__day:hover:not(.is-selected),
[data-theme="dark"] .sdp-picker__today:hover,
[data-theme="dark"] .sdp-time-item:hover:not(.is-active),
[data-theme="dark"] .apx-date-picker__day:hover:not(.is-selected),
[data-theme="dark"] .apx-date-picker__preset{
    background:var(--orange-soft);
    border-color:var(--orange-border);
    color:var(--main-orange);
}
[data-theme="dark"] .crp-clear-btn:not(:hover){
    background:var(--bg-surface-2);
    color:var(--text-muted);
}
[data-theme="dark"] .sdp-picker__day.is-selected,
[data-theme="dark"] .sdp-time-item.is-active,
[data-theme="dark"] .apx-date-picker__day.is-selected{
    color:#fff;
}
[data-theme="dark"] .apx-time-picker__item.is-selected,
[data-theme="dark"] .apx-time-picker__item:hover{
    color:var(--main-orange);
}
[data-theme="dark"] .apx-time-picker__col-sep{
    background:var(--border-soft);
}
[data-theme="dark"] .apx-time-picker__wheel::after{
    background:var(--orange-soft);
    box-shadow:inset 0 0 0 1px var(--orange-border);
}
/* Bootstrap/custom !important rules need equally scoped state overrides. */
[data-theme="dark"] .nav.nav-tabs{
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] .nav.nav-tabs .nav-link{
    color:var(--text-muted) !important;
}
[data-theme="dark"] .nav.nav-tabs .nav-link:hover,
[data-theme="dark"] .nav.nav-tabs .nav-link:focus{
    color:var(--main-orange) !important;
    border-color:var(--orange-border) !important;
}
[data-theme="dark"] .nav.nav-tabs .nav-link.active,
[data-theme="dark"] .nav.nav-tabs .nav-item.show .nav-link{
    background:var(--bg-surface) !important;
    color:var(--main-orange) !important;
    border-color:var(--orange-border) var(--orange-border) var(--bg-surface) !important;
}
[data-theme="dark"] .btn-orange-outline:not(:hover):not(:focus):not(:active):not(.active):not(.show),
[data-theme="dark"] .btn-outline-orange:not(:hover):not(:focus):not(:active):not(.active):not(.show){
    background:var(--bg-surface) !important;
}
[data-theme="dark"] .list-group-item:hover:not(.active){
    background:var(--orange-soft) !important;
}
[data-theme="dark"] .list-group-item.active{
    background:var(--main-orange) !important;
    border-color:var(--main-orange) !important;
    color:#fff !important;
}
[data-theme="dark"] .dropdown-item.disabled,
[data-theme="dark"] .page-item.disabled .page-link{
    color:var(--text-muted) !important;
}
[data-theme="dark"] .table{
    --bs-table-hover-bg:var(--table-hover);
    --bs-table-hover-color:var(--text-main);
    --bs-table-striped-bg:var(--bg-surface-2);
    --bs-table-striped-color:var(--text-main);
}
/* Flatpickr's stock stylesheet only darkened the outer popup before. */
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-weekdays,
[data-theme="dark"] span.flatpickr-weekday,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-month{
    background:var(--bg-surface);
    color:var(--text-main);
}
[data-theme="dark"] .flatpickr-day,
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm{
    color:var(--text-main);
}
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus,
[data-theme="dark"] .flatpickr-day.inRange{
    background:var(--orange-soft);
    border-color:var(--orange-border);
}
[data-theme="dark"] .flatpickr-day.inRange{
    box-shadow:-5px 0 0 var(--orange-soft),5px 0 0 var(--orange-soft);
}
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled{
    color:var(--text-muted);
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange{
    background:var(--main-orange);
    border-color:var(--main-orange);
    color:#fff;
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month{
    color:var(--text-main);
    fill:var(--text-main);
}

/* Patient exam colors: layout does not render the page's styles stack. */
[data-theme="dark"] #exam-pane .exam-header,
[data-theme="dark"] #exam-pane .exam-toggle-btn,
[data-theme="dark"] #exam-pane .progress-table .progress-date-group-cell,
[data-theme="dark"] #exam-pane .progress-date-group-actions,
[data-theme="dark"] #exam-pane .progress-content-cell.is-tooltip-visible::before,
[data-theme="dark"] #exam-pane .progress-content-cell.is-tooltip-visible::after{
    background:var(--bg-surface-2) !important;
    color:var(--text-main) !important;
}
[data-theme="dark"] #exam-pane .exam-body,
[data-theme="dark"] #exam-pane .plan-table-wrap,
[data-theme="dark"] #exam-pane .progress-table-wrap{
    background:var(--bg-surface) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] #exam-pane .exam-note-inline,
[data-theme="dark"] #exam-pane .plan-summary-row strong{
    color:var(--text-main) !important;
}
[data-theme="dark"] #exam-pane .plan-summary,
[data-theme="dark"] #exam-pane .plan-sort-toggle:not(.active),
[data-theme="dark"] #exam-pane .btn-treatment-custom{
    background:var(--orange-soft) !important;
    color:var(--main-orange) !important;
    border-color:var(--orange-border) !important;
}
[data-theme="dark"] #exam-pane .plan-summary-row{
    color:#e2c0a2 !important;
}
[data-theme="dark"] #exam-pane .plan-summary-total,
[data-theme="dark"] #exam-pane .plan-summary-total strong{
    color:var(--main-orange) !important;
    border-color:var(--orange-border) !important;
}
[data-theme="dark"] #exam-pane .plan-table thead th,
[data-theme="dark"] #exam-pane .progress-table thead th{
    background:var(--bg-surface-2) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] #exam-pane .plan-table tbody tr:hover td,
[data-theme="dark"] #exam-pane .progress-table tbody tr:not(.progress-date-row):hover td,
[data-theme="dark"] #exam-pane .plan-sort-mode .plan-tr[data-sortable="1"],
[data-theme="dark"] #exam-pane .plan-sort-ghost,
[data-theme="dark"] #exam-pane .plan-editing{
    background:var(--table-hover) !important;
}
[data-theme="dark"] #exam-pane .plan-table td.text-orange,
[data-theme="dark"] #exam-pane .progress-table td.text-orange{
    color:var(--main-orange) !important;
}
[data-theme="dark"] #exam-pane .plan-table td.text-danger,
[data-theme="dark"] #exam-pane .progress-table td.text-danger{
    color:#ff8995 !important;
}
[data-theme="dark"] #exam-pane .plan-table td.text-muted,
[data-theme="dark"] #exam-pane .progress-table td.text-muted{
    color:var(--text-muted) !important;
}
[data-theme="dark"] #exam-pane .plan-sticky,
[data-theme="dark"] #exam-pane .progress-sticky{
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] #exam-pane .plan-sticky-1,
[data-theme="dark"] #exam-pane .progress-sticky-1{
    box-shadow:-2px 0 0 var(--border-soft);
}
[data-theme="dark"] #exam-pane .progress-date-group-actions{
    box-shadow:-10px 0 14px var(--bg-surface-2);
}
[data-theme="dark"] #exam-pane .exam-inner-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] #exam-pane .plan-table-wrap::-webkit-scrollbar-thumb,
[data-theme="dark"] #exam-pane .progress-table-wrap::-webkit-scrollbar-thumb{
    background:var(--border-soft-2);
}
/* Patient detail tabs and their owned dialogs: dark colors only. */
[data-theme="dark"] .patient-show-page :is(.patient-show-card, .patient-show-relative),
[data-theme="dark"] #images-pane :is(.image-group-card, .image-group-body, .image-thumb-box),
[data-theme="dark"] #prescription-pane .prescription-list-wrap,
[data-theme="dark"] #appointment-pane .appointment-table-wrap,
[data-theme="dark"] #payment-pane .payment-table-wrap,
[data-theme="dark"] #care-pane .pcare-list-wrap,
[data-theme="dark"] #labo-pane :is(.labo-patient-list, .labo-card:not(.is-overdue-sent)) {
    background:var(--bg-surface) !important;
    border-color:var(--border-soft) !important;
    box-shadow:var(--shadow-soft);
}
[data-theme="dark"] .patient-show-page .patient-show-card-head,
[data-theme="dark"] #images-pane :is(.exam-header, .pdf-thumb),
[data-theme="dark"] #payment-pane .payment-table-footer,
[data-theme="dark"] #prescription-pane :is(.rx-code-badge, .rx-doctor-chip) {
    background:var(--bg-surface-2) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] .patient-show-page .patient-show-field .value:not(.text-muted),
[data-theme="dark"] #prescription-pane .rx-prescription-name,
[data-theme="dark"] #payment-pane .payment-table-footer-left {
    color:var(--text-main) !important;
}
[data-theme="dark"] .patient-show-page :is(.label, .value-sub),
[data-theme="dark"] #prescription-pane :is(.rx-prescription-sub, .prescription-empty-text) {
    color:var(--text-muted) !important;
}
[data-theme="dark"] .patient-show-page :is(.patient-show-chip, .patient-show-history-tag),
[data-theme="dark"] #prescription-pane :is(.rx-date-pill, .prescription-empty-icon),
[data-theme="dark"] #care-pane :is(.pcare-badge-type, .pcare-badge-orange) {
    background:var(--orange-soft) !important;
    color:var(--main-orange) !important;
    border-color:var(--orange-border) !important;
}
[data-theme="dark"] .patient-show-page .patient-show-chip-muted,
[data-theme="dark"] #care-pane .pcare-badge-muted {
    background:var(--bg-surface-2) !important;
    color:var(--text-muted) !important;
}
[data-theme="dark"] #care-pane .pcare-badge-green {
    background:#173c29 !important;
    color:#75d69c !important;
}
[data-theme="dark"] #care-pane .pcare-badge-red {
    background:#421f25 !important;
    color:#ff8995 !important;
}
[data-theme="dark"] #prescription-pane .rx-action-btn {
    background:var(--bg-surface-2) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] #prescription-pane .rx-action-btn:hover {
    background:var(--orange-soft) !important;
    border-color:var(--orange-border) !important;
}
[data-theme="dark"] #prescription-pane .rx-action-danger {
    color:#ff8995 !important;
}
[data-theme="dark"] #prescription-pane .rx-action-danger:hover {
    background:#421f25 !important;
    border-color:#86404a !important;
}
[data-theme="dark"] :is(#prescription-pane, #appointment-pane, #payment-pane, #care-pane) .table thead th,
[data-theme="dark"] :is(#paymentModal, #treatmentFeeModal, #prescriptionCreateModal, #prescriptionDrugPickModal, #modalSelectProcedure) .table thead th {
    background:var(--bg-surface-2) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] :is(#prescription-pane, #appointment-pane, #payment-pane, #care-pane) .table tbody tr:hover td {
    background:var(--table-hover) !important;
}
[data-theme="dark"] #appointment-pane .appointment-sticky {
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] #appointment-pane .appointment-sticky-2 {
    box-shadow:-2px 0 0 var(--border-soft);
}
/* Modal IDs survive Bootstrap's body-level modal stack; labo stays tab-owned. */
[data-theme="dark"] :is(#normalImageModal, #imageEditorModal, #prescriptionCreateModal, #prescriptionDrugPickModal, #patientBookingModal, #patientEditBookingModal, #receiptModal, #refundModal, #paymentModal, #treatmentFeeModal, #receiptPreviewModal, #modalSelectProcedure, #modalSelectTooth, #modalReviewPlan, #progressModal) :is(.modal-body, .preview-panel, .image-preview-item, .upload-box-inline, .upload-note-box, .editor-toolbar, .editor-subpanel, .prescription-modal-body, .rx-dd-menu, .rx-dd-item, .aptd-menu, .aptd-item:not(.is-active), .ftd-menu, .assistant-menu, .procedure-table-wrap, .payment-table-wrap, .tooth-row, .jaw-option:not(:has(input:checked))),
[data-theme="dark"] #labo-pane :is(#createLaboModal, #laboToothPickerModal, #laboImageEditorModal, #laboDetailModal) :is(.modal-body, .tooth-row, .jaw-option:not(:has(input:checked)), .labo-editor-toolbar, .labo-editor-subpanel, .labo-image-preview-card, .detail-image-wrap) {
    background:var(--bg-surface) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] :is(#patientBookingModal, #patientEditBookingModal) .modal-header,
[data-theme="dark"] #labo-pane #createLaboModal :is(.modal-header, .modal-footer),
[data-theme="dark"] #imageEditorModal :is(.editor-stage, .editor-tool-btn),
[data-theme="dark"] #normalImageModal :is(.fake-paste-box, .upload-note-plus, .image-preview-action-btn),
[data-theme="dark"] #prescriptionCreateModal .btn-cancel-prescription,
[data-theme="dark"] #labo-pane #laboImageEditorModal :is(.labo-editor-stage, .labo-editor-tool-btn) {
    background:var(--bg-surface-2) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] :is(#prescriptionCreateModal, #prescriptionDrugPickModal) :is(.rx-dd-toggle, .prescription-tag-input, .prescription-tag-input input),
[data-theme="dark"] :is(#patientBookingModal, #patientEditBookingModal) .aptd-control,
[data-theme="dark"] :is(#receiptModal, #refundModal, #paymentModal) .ftd-control,
[data-theme="dark"] #progressModal .assistant-input {
    background:var(--input-bg) !important;
    color:var(--text-main) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] :is(#receiptModal, #refundModal, #paymentModal) :is(.ftd-value, .ftd-item),
[data-theme="dark"] :is(#prescriptionCreateModal, #prescriptionDrugPickModal) :is(.rx-dd-item-title, .prescription-info-label),
[data-theme="dark"] :is(#patientBookingModal, #patientEditBookingModal) :is(.aptd-text, .appt-inline-radios label),
[data-theme="dark"] #labo-pane :is(.labo-modal-close, .tooth span),
[data-theme="dark"] #modalSelectTooth .tooth span {
    color:var(--text-main) !important;
}
[data-theme="dark"] :is(#receiptModal, #refundModal, #paymentModal) :is(.ftd-placeholder, .ftd-arrow),
[data-theme="dark"] :is(#prescriptionCreateModal, #prescriptionDrugPickModal) .rx-dd-item-sub,
[data-theme="dark"] :is(#patientBookingModal, #patientEditBookingModal) .aptd-arrow,
[data-theme="dark"] #normalImageModal :is(.upload-icon, .plus-mini, .image-preview-pdf) {
    color:var(--text-muted) !important;
}
[data-theme="dark"] #modalSelectProcedure .procedure-sidebar,
[data-theme="dark"] #modalSelectProcedure .procedure-category-link:not(.active),
[data-theme="dark"] #modalSelectProcedure #noResult,
[data-theme="dark"] #labo-pane #createLaboModal :is(.labo-image-drop, .labo-add-item-btn, .labo-image-plus),
[data-theme="dark"] #prescriptionCreateModal :is(.btn-remove-drug, .rx-dd-item-icon),
[data-theme="dark"] #progressModal :is(.assistant-tag, .assistant-count),
[data-theme="dark"] :is(#receiptModal, #refundModal, #paymentModal) :is(.ftd-item:hover, .ftd-item.is-active, .ftd-item.is-selected),
[data-theme="dark"] :is(#prescriptionCreateModal, #prescriptionDrugPickModal) :is(.rx-dd-item:hover, .rx-dd-item.is-selected),
[data-theme="dark"] :is(#patientBookingModal, #patientEditBookingModal) :is(.aptd-item:hover, .aptd-duration .aptd-item.is-active) {
    background:var(--orange-soft) !important;
    color:var(--main-orange) !important;
    border-color:var(--orange-border) !important;
}
[data-theme="dark"] :is(#modalSelectTooth, #labo-pane) :is(.tooth:has(input:checked), .jaw-option:has(input:checked)) {
    background:var(--orange-soft) !important;
    color:var(--main-orange) !important;
    border-color:var(--orange-border) !important;
}
[data-theme="dark"] :is(#modalSelectTooth, #labo-pane) .tooth:has(input:checked) span {
    color:var(--main-orange) !important;
}
/* Restore semantic text hidden by older shared table/fw-bold/btn-light rules. */
[data-theme="dark"] :is(#patientTabContent, #payment-pane, #appointment-pane, #receiptModal, #refundModal, #paymentModal, #treatmentFeeModal, #modalReviewPlan, #progressModal) .text-success:not(.badge) {
    color:#75d69c !important;
}
[data-theme="dark"] :is(#patientTabContent, #payment-pane, #appointment-pane, #receiptModal, #refundModal, #paymentModal, #treatmentFeeModal, #modalReviewPlan, #progressModal) .text-danger:not(.badge) {
    color:#ff8995 !important;
}
[data-theme="dark"] :is(#patientTabContent, #payment-pane, #receiptModal, #refundModal, #paymentModal, #treatmentFeeModal, #modalReviewPlan, #progressModal) .text-orange:not(.badge) {
    color:var(--main-orange) !important;
}
[data-theme="dark"] :is(#prescription-pane, #appointment-pane, #payment-pane, #care-pane, #paymentModal, #treatmentFeeModal) .table td.text-muted {
    color:var(--text-muted) !important;
}

/* Customer create/edit: only custom surfaces missed by shared dark controls. */
[data-theme="dark"] .patient-gender-dropdown .ftd-control {
    background-color:var(--input-bg) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] .patient-gender-dropdown .ftd-menu,
[data-theme="dark"] :is(.patient-relative-card, .patient-history-item, .relative-search-dropdown, .address-dropdown-menu) {
    background-color:var(--bg-surface) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] .patient-gender-dropdown .ftd-item,
[data-theme="dark"] :is(.address-dropdown-item, .duplicate-check-line1, .relative-search-line1) {
    color:var(--text-main) !important;
}
[data-theme="dark"] .patient-gender-dropdown :is(.ftd-placeholder, .ftd-arrow),
[data-theme="dark"] :is(.address-dropdown-empty, .duplicate-check-line2, .relative-search-line2) {
    color:var(--text-muted) !important;
}
[data-theme="dark"] .patient-form-tabs.nav-pills .nav-link:not(.active),
[data-theme="dark"] .patient-gender-dropdown :is(.ftd-tag, .ftd-item:hover, .ftd-item.is-active, .ftd-item.is-selected),
[data-theme="dark"] :is(.duplicate-check-item, .duplicate-check-badge, .address-dropdown-item:hover, .address-dropdown-item.is-active),
[data-theme="dark"] .relative-search-dropdown .relative-search-item:hover {
    background-color:var(--orange-soft) !important;
    border-color:var(--orange-border) !important;
    color:var(--main-orange) !important;
}
[data-theme="dark"] .patient-gender-dropdown :is(.ftd-control:hover, .ftd-control.is-open) {
    border-color:var(--main-orange) !important;
}

/* Patient list toolbar: dark-only surfaces, preserve layout. */
[data-theme="dark"] .patient-list-toolbar :is(#filterBtn, #columnDisplayToggle),
[data-theme="dark"] .patient-list-toolbar .patient-sort-wrap .ftd-control {
    background:var(--input-bg) !important;
    border:1px solid var(--border-soft) !important;
    color:var(--text-main) !important;
    box-shadow:none !important;
}
[data-theme="dark"] .patient-list-toolbar :is(#filterBtn, #columnDisplayToggle):hover,
[data-theme="dark"] .patient-list-toolbar .patient-sort-wrap .ftd-control:hover,
[data-theme="dark"] .patient-list-toolbar .patient-sort-wrap .ftd-control.is-open {
    background:var(--orange-soft) !important;
    border:1px solid var(--orange-border) !important;
    color:var(--main-orange) !important;
}
[data-theme="dark"] #columnDisplayMenu,
[data-theme="dark"] .patient-list-toolbar .patient-sort-wrap .ftd-menu,
[data-theme="dark"] #filterPanel {
    background:var(--bg-surface) !important;
    border-color:var(--border-soft) !important;
    color:var(--text-main) !important;
}
[data-theme="dark"] #columnDisplayMenu .form-check,
[data-theme="dark"] #filterPanel :is(.form-label, .form-check-label),
[data-theme="dark"] .patient-list-toolbar .patient-sort-wrap .ftd-item {
    color:var(--text-main) !important;
}
[data-theme="dark"] #columnDisplayMenu .form-check { border-color:var(--border-soft) !important; }
[data-theme="dark"] .patient-list-toolbar .patient-sort-wrap :is(.ftd-placeholder, .ftd-arrow) { color:var(--text-muted) !important; }
[data-theme="dark"] .patient-list-toolbar .patient-sort-wrap .ftd-item:hover,
[data-theme="dark"] .patient-list-toolbar .patient-sort-wrap .ftd-item.is-active,
[data-theme="dark"] .patient-list-toolbar .patient-sort-wrap .ftd-item.is-selected {
    background:var(--orange-soft) !important;
    color:var(--main-orange) !important;
}
[data-theme="dark"] #filterPanel .patient-filter-control,
[data-theme="dark"] #filterPanel .patient-filter-menu {
    background:var(--input-bg) !important;
    border-color:var(--border-soft) !important;
    color:var(--text-main) !important;
}

/* Calendar booking customer search: embedded, non-interactive icon. */
#bookingModal .booking-customer-search { position:relative; }
#bookingModal .booking-customer-search-icon {
    position:absolute;
    z-index:4;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:#9ca3af;
    pointer-events:none;
}
#bookingModal .booking-customer-search #customer_search { padding-left:38px !important; }
[data-theme="dark"] #bookingModal .booking-customer-search-icon { color:var(--text-muted) !important; }

/* Appointment create/edit modals: dark-only, shared by calendar and patient tab. */
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) .modal-content,
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) .modal-header,
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) .modal-body,
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) .modal-footer {
    background:var(--bg-surface) !important;
    border-color:var(--border-soft) !important;
    color:var(--text-main) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) :is(.modal-title, .form-label, .form-check, .aptd-text) {
    color:var(--text-main) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) :is(.form-control, .input-group-text, .aptd-control) {
    background:var(--input-bg) !important;
    border-color:var(--border-soft) !important;
    color:var(--text-main) !important;
    box-shadow:none !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) :is(.form-control, .aptd-control)::placeholder {
    color:var(--text-muted) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) :is(.form-control:focus, .aptd-control:focus) {
    border-color:var(--main-orange) !important;
    box-shadow:0 0 0 .2rem rgba(235,119,25,.18) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) :is(.aptd-menu, #patient_dropdown, [id^="doctor_dropdown"], [id^="content_dropdown"]) {
    background:var(--bg-surface-2) !important;
    border-color:var(--border-soft) !important;
    color:var(--text-main) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) :is(.aptd-item, .doctor-item, .content-item, .doctor-item-patient, .content-item-patient, .doctor-item-patient-edit, .content-item-patient-edit) {
    background:transparent !important;
    border-color:var(--border-soft) !important;
    color:var(--text-main) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) :is(.aptd-item:hover, .doctor-item:hover, .content-item:hover, .doctor-item-patient:hover, .content-item-patient:hover, .doctor-item-patient-edit:hover, .content-item-patient-edit:hover) {
    background:var(--orange-soft) !important;
    color:var(--main-orange) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) :is(.aptd-item.is-active, .aptd-duration .aptd-item.is-active) {
    background:var(--orange-soft) !important;
    color:var(--main-orange) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) .btn-light {
    background:var(--bg-surface-2) !important;
    border-color:var(--border-soft) !important;
    color:var(--text-main) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) .btn-close {
    filter:invert(1) grayscale(1) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) .form-check-input {
    background-color:var(--input-bg) !important;
    border-color:var(--border-soft) !important;
}
[data-theme="dark"] :is(#bookingModal, #patientBookingModal, #patientEditBookingModal) .form-check-input:checked {
    background-color:var(--main-orange) !important;
    border-color:var(--main-orange) !important;
}