:root {
    --sidebar-open: 260px;
    --sidebar-mini: 72px;
    --bg: #ffffff;
    --border: #e5e7eb;
    --hover: #f3f4f6;
    --active: #eef2ff;
    --primary: #2563eb;
}

/* ================= Sidebar ================= */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--sidebar-open);
    background: var(--bg);
    border-right: 1px solid var(--border);
    z-index: 2000;
    transition: width .25s ease, transform .3s ease;
}

/* English */
body:not(.rtl) .sidebar {
    left: 0;
}

/* Arabic */
body.rtl .sidebar {
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--border);
}

/* Collapsed */
body.sidebar-collapsed .sidebar {
    width: var(--sidebar-mini);
}

/* ================= Brand ================= */
.sidebar-brand {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}

.brand-logo {
    width: 34px;
    height: 34px;
}

.brand-text {
    white-space: nowrap;
}

body.sidebar-collapsed .brand-text {
    display: none;
}

/* ================= Menu ================= */
.sidebar-menu {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    transition: background .15s ease;
    position: relative;
}

    .menu-item i {
        font-size: 20px;
        min-width: 24px;
        text-align: center;
    }

    .menu-item:hover {
        background: var(--hover);
    }

    .menu-item.active {
        background: var(--active);
        color: var(--primary);
        font-weight: 600;
    }

.nav-text {
    white-space: nowrap;
}

/* Mini mode */
body.sidebar-collapsed .nav-text {
    display: none;
}

body.sidebar-collapsed .menu-item {
    justify-content: center;
}

    /* Tooltip (ChatGPT style) */
    body.sidebar-collapsed .menu-item::after {
        content: attr(data-title);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #111827;
        color: #fff;
        font-size: 13px;
        padding: 6px 10px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: .15s;
    }

body:not(.rtl).sidebar-collapsed .menu-item::after {
    left: calc(100% + 10px);
}

body.rtl.sidebar-collapsed .menu-item::after {
    right: calc(100% + 10px);
}

body.sidebar-collapsed .menu-item:hover::after {
    opacity: 1;
}

/* Divider */
.menu-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
}

/* ================= Main ================= */
.main {
    transition: margin .25s ease;
}

/* English */
body:not(.rtl) .main {
    margin-left: var(--sidebar-open);
}

body:not(.rtl).sidebar-collapsed .main {
    margin-left: var(--sidebar-mini);
}

/* Arabic */
body.rtl .main {
    margin-right: var(--sidebar-open);
}

body.rtl.sidebar-collapsed .main {
    margin-right: var(--sidebar-mini);
}

/* ================= Mobile ================= */
@media (max-width: 991px) {

    .sidebar {
        transform: translateX(-100%);
    }

    body.rtl .sidebar {
        transform: translateX(100%);
    }

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

    .main {
        margin: 0 !important;
    }

    body.sidebar-mobile-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 1500;
    }
}



/* =========================
   DASHBOARD CARDS (PRO)
========================= */

.dashboard-card {
    position: relative;
    border-radius: 14px;
    background: #fff;
    transition: all .25s ease;
    cursor: pointer;
    overflow: hidden;
}

    /* Hover effect */
    .dashboard-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
    }

    /* Top accent line */
    .dashboard-card::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #0d6efd, #6ea8fe);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .dashboard-card:hover::before {
        opacity: 1;
    }

/* Icon container */
.icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all .25s ease;
}

/* Icon animation on hover */
.dashboard-card:hover .icon-circle {
    transform: scale(1.12) rotate(3deg);
}

/* Soft backgrounds */
.bg-primary-soft {
    background: rgba(13,110,253,.15);
}

.bg-success-soft {
    background: rgba(25,135,84,.15);
}

.bg-info-soft {
    background: rgba(13,202,240,.15);
}

.bg-danger-soft {
    background: rgba(220,53,69,.15);
}

/* =========================
   TABLE CARDS
========================= */

.card-header {
    padding: 16px 20px;
}

    .card-header h6 {
        font-size: 15px;
    }

.table-hover tbody tr {
    transition: background .15s ease;
}

    .table-hover tbody tr:hover {
        background: #f8fafc;
    }

/* Empty state */
.table tbody tr td.text-muted {
    font-size: 14px;
}

/* 2026 responsive clinic UI */ body{background:#f6f8fc;color:#172033}.main main{max-width:1600px;margin:auto}.panel{border:0;border-radius:16px;padding:20px;box-shadow:0 6px 24px rgba(18,38,63,.06)}.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.page-head h2{font-weight:800;margin:0}.page-head p{color:#718096;margin:4px 0 0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-full{grid-column:1/-1}.service-picks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.service-picks label{border:1px solid #e6eaf0;border-radius:12px;padding:12px;display:flex;gap:8px;align-items:center}.service-picks span{margin-inline-start:auto}.invoice-totals{display:flex;gap:22px;justify-content:flex-end;flex-wrap:wrap}.teeth{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.tooth{border:1px solid #dbe3ef;border-radius:12px;text-align:center;padding:9px 4px;background:#fff}.tooth small{display:block;font-size:10px;color:#718096}.tooth.has-condition{background:#fff4e5;border-color:#ffca7a}.timeline-item{padding:12px 0;border-bottom:1px solid #edf0f5}.file-list{display:flex;flex-direction:column;margin-top:12px}.file-list a{padding:10px;border-bottom:1px solid #eee;text-decoration:none}.file-list small{display:block;color:#718096}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 6px 24px rgba(18,38,63,.06)}.stat-card span{display:block;color:#718096}.stat-card b{font-size:28px}.filter-bar{display:flex;flex-direction:row;gap:10px}.report-row{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #eee}@media(max-width:767px){.page-head{align-items:flex-start;flex-direction:column}.form-grid,.service-picks{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr}.teeth{grid-template-columns:repeat(4,1fr)}.panel{padding:14px}.filter-bar{flex-direction:column}.table{min-width:720px}.main main{padding:14px!important}}

/* ===== DentalClinic PRO 2026 ===== */
:root{--sidebar-open:272px;--primary:#176bff;--navy:#0b1f3a;--ink:#12213a;--muted:#74829a;--surface:#fff;--line:#e7edf5;--soft:#f4f7fb}
body{font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;background:#f4f7fb;color:var(--ink)}
.sidebar{background:linear-gradient(180deg,#0b213d 0%,#0a1830 100%);border:0!important;box-shadow:10px 0 35px rgba(7,25,49,.08)}
.sidebar-brand{height:76px;color:#fff;border-color:rgba(255,255,255,.1);font-size:18px}.sidebar-brand small{font-size:9px;background:#1f7aff;padding:3px 5px;border-radius:5px;margin-inline-start:4px}.brand-logo{background:#fff;border-radius:10px;padding:4px}
.sidebar-menu{padding:14px 12px}.menu-item{color:#d6e1ef;padding:11px 14px;border-radius:10px}.menu-item:hover{background:rgba(255,255,255,.08);color:#fff}.menu-item.active{background:#176bff;color:#fff;box-shadow:0 7px 18px rgba(23,107,255,.25)}.menu-divider{background:rgba(255,255,255,.1)}
.navbar{min-height:66px!important;box-shadow:0 1px 0 #e7edf5}.panel{border:1px solid #edf1f6;border-radius:18px;box-shadow:0 10px 30px rgba(25,50,80,.055)}
.page-head h2{font-size:30px}.page-head p,.section-title p{color:var(--muted);margin:4px 0 0}.btn{border-radius:9px}.btn-primary{background:#176bff;border-color:#176bff}.form-control,.form-select{min-height:42px;border-radius:9px;border-color:#dce4ef}.form-control:focus,.form-select:focus{border-color:#7aa8ff;box-shadow:0 0 0 .2rem rgba(23,107,255,.1)}
.hero-dashboard{background:linear-gradient(120deg,#0d2442,#133b6b);color:#fff;border-radius:22px;padding:28px 30px;display:flex;justify-content:space-between;align-items:center;gap:24px;box-shadow:0 16px 40px rgba(13,36,66,.15)}.hero-dashboard h1{font-size:30px;font-weight:800;margin:6px 0}.hero-dashboard p{color:#c9d8ea;margin:0}.eyebrow{font-size:11px;letter-spacing:1.6px;color:#79b2ff;font-weight:700}.quick-actions{display:flex;gap:8px;flex-wrap:wrap}.quick-actions .btn-light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:18px}.kpi{background:#fff;border:1px solid #eaf0f6;border-radius:16px;padding:18px;min-height:128px;box-shadow:0 8px 24px rgba(25,50,80,.045)}.kpi span,.kpi small{display:block;color:#77869c}.kpi b{display:block;font-size:24px;margin:12px 0 8px}.kpi.danger b{color:#d64152}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title h5{font-weight:800;margin:0}.invoice-mini{display:flex;justify-content:space-between;align-items:center;padding:13px 4px;border-bottom:1px solid #edf1f6;text-decoration:none;color:inherit}.invoice-mini:hover{background:#f8faff}.invoice-mini small{display:block;color:var(--muted);margin-top:3px}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#eef2f7;color:#56657a}.status-confirmed,.status-completed,.status-paid{background:#e8f8ef;color:#18794e}.status-pending,.status-open,.status-partiallypaid{background:#fff4dc;color:#a96700}.status-cancelled,.status-noshow,.status-overdue{background:#ffebee;color:#c6283b}.empty-state{text-align:center!important;color:#8794a7!important;padding:32px!important}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.detail-grid small,.detail-grid b{display:block}.detail-grid small{color:var(--muted);margin-bottom:4px}.invoice-builder{border:1px solid var(--line);border-radius:14px;padding:16px}.invoice-summary{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:18px;padding:18px;background:#f7f9fc;border-radius:14px}.invoice-summary>div:first-child{max-width:280px}.summary-numbers{display:flex;gap:22px;align-items:center}.summary-numbers span{color:var(--muted)}.summary-numbers b{color:var(--ink);margin-inline-start:8px}.summary-numbers .grand{font-size:18px}.summary-numbers .grand b{font-size:24px;color:#176bff}
@media(max-width:1300px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:767px){.hero-dashboard{padding:22px;align-items:flex-start;flex-direction:column}.hero-dashboard h1{font-size:24px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.invoice-summary{align-items:stretch;flex-direction:column}.summary-numbers{justify-content:space-between}.quick-actions{width:100%}.quick-actions .btn{flex:1}.page-head h2{font-size:25px}}@media(max-width:430px){.kpi-grid{grid-template-columns:1fr}}

/* Global workflow polish */
.patient-lookup{background:linear-gradient(135deg,#f7faff,#eef5ff);border:1px solid #dce9ff;border-radius:16px;padding:18px}.lookup-title{display:flex;align-items:center;gap:12px;margin-bottom:12px}.lookup-title small{display:block;color:var(--muted);margin-top:2px}.lookup-icon{width:42px;height:42px;display:grid;place-items:center;background:#176bff;color:#fff;border-radius:12px;font-size:20px}.lookup-state{min-height:25px;padding-top:8px}.info-chip{width:100%;background:#f1f6ff;border:1px solid #d9e7ff;color:#416083;border-radius:10px;padding:10px 12px}.financial-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}.financial-summary>div{background:#f7f9fc;border-radius:12px;padding:14px}.financial-summary span,.financial-summary b{display:block}.financial-summary span{color:var(--muted);font-size:12px}.financial-summary b{margin-top:7px}.financial-summary .discount b{color:#c43d4f}.financial-summary .net{background:#eaf2ff}.financial-summary .net b{color:#176bff;font-size:18px}.report-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.report-kpis .stat-card b{font-size:22px}.report-kpis small{color:var(--muted)}@media(max-width:1200px){.report-kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:767px){.financial-summary{grid-template-columns:1fr 1fr}.report-kpis{grid-template-columns:1fr 1fr}}

/* ===== Global PRO UX 2026 ===== */
.app-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;margin:-8px 0 18px;color:#7c8aa5}.app-breadcrumb a{color:#66758f;text-decoration:none}.app-breadcrumb a:hover{color:#2563eb}.app-breadcrumb i{font-size:11px}.phone-first{background:linear-gradient(135deg,#f7fbff,#eef5ff);border:1px solid #d8e7ff;border-radius:18px;padding:20px}.feature-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#2474ff;color:white;font-size:20px}.patient-found,.patient-new{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px}.patient-found{background:#eafaf1;color:#147a45}.patient-new{background:#eef5ff;color:#175ec9}.patient-found small,.patient-new small{display:block;font-weight:400}.service-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.service-option{display:flex;gap:10px;align-items:center;border:1px solid #dce5f1;border-radius:13px;padding:14px;cursor:pointer}.service-option:hover{border-color:#80aefc;background:#f8fbff}.service-option small{display:block;color:#75839a}.availability-note{display:flex;align-items:center;gap:8px;background:#eef5ff;color:#52709d;border-radius:10px;padding:12px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.detail-grid>div{padding:14px;background:#f8fafc;border-radius:12px}.detail-grid small,.detail-grid b{display:block}.filter-panel label{font-size:13px;font-weight:600;margin-bottom:5px}.person-cell{display:flex;align-items:center;gap:11px}.person-cell small{display:block;color:#8491a5}.avatar-circle{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#edf4ff;color:#246ff2}.avatar-circle.large{width:58px;height:58px;font-size:25px}.patient-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(135deg,#0b2b54,#175dc7);color:#fff;border-radius:20px;padding:24px;margin-bottom:16px}.patient-hero p{margin:0;color:#cbdcf6}.patient-hero .avatar-circle{background:rgba(255,255,255,.16);color:#fff}.medical-alert{display:flex;gap:12px;align-items:center;background:#fff3e7;border:1px solid #ffd6ae;color:#9a4e00;padding:14px 18px;border-radius:14px;margin-bottom:16px}.medical-alert span,.medical-alert b{display:block}.medical-tabs{display:flex;gap:7px;flex-wrap:wrap;background:#fff;padding:8px;border-radius:14px;border:1px solid #e4eaf2}.medical-tabs li{list-style:none}.medical-tabs .nav-link{border:0;color:#52627b;border-radius:10px}.medical-tabs .nav-link.active{background:#2474ff;color:white}.teeth.modern{grid-template-columns:repeat(8,1fr);gap:8px}.teeth.modern .tooth{border:1px solid #e1e8f2;border-radius:12px;padding:12px 5px;text-align:center;background:#fff}.teeth.modern .tooth.has-condition{background:#fff4e8;border-color:#ffc98e}.plan-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #edf0f4}.plan-row small,.plan-row b{display:block}.file-list a{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e4eaf2;border-radius:11px;margin-top:8px;text-decoration:none}.file-list a small{margin-inline-start:auto}.status-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#eef2f7}.status-paid{background:#e8f8ef!important;color:#157347!important}.status-cancelled{background:#fff0f0!important;color:#c0392b!important}
@media(max-width:767px){.service-picker,.detail-grid{grid-template-columns:1fr}.patient-hero{align-items:flex-start;flex-direction:column}.teeth.modern{grid-template-columns:repeat(4,1fr)}}

/* ===== Global workflow upgrade ===== */
.clinic-flow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5edf7;border-radius:18px;padding:12px 16px;margin:18px 0;box-shadow:0 8px 25px rgba(15,45,85,.04)}
.clinic-flow>a{flex:1;display:flex;align-items:center;gap:10px;text-decoration:none;color:#102b4e;padding:10px;border-radius:12px;transition:.2s}.clinic-flow>a:hover{background:#f2f7ff}.clinic-flow>a>span,.workflow-step>span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#eaf2ff;color:#1672ff;font-weight:800}.clinic-flow small,.workflow-step small{display:block;color:#8090a8;margin-top:2px}.clinic-flow>i{color:#a9b7c9}
.outstanding-panel{border-top:3px solid #dc3545}.section-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#eef5ff;color:#1672ff}.section-icon.danger{background:#fff0f1;color:#dc3545}.outstanding-panel .section-title>div:first-child{display:flex;align-items:center;gap:10px}
.workflow-steps{display:flex;align-items:center;background:#fff;border:1px solid #e5edf7;border-radius:16px;padding:13px 18px}.workflow-step{display:flex;align-items:center;gap:8px;min-width:145px}.workflow-step.active>span{background:#1672ff;color:#fff}.workflow-line{height:2px;flex:1;background:#e4ebf4;margin:0 8px}.booking-page-head .page-kicker{font-size:12px;font-weight:800;color:#1672ff;letter-spacing:.4px}.service-picker-qty .service-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px}.service-check{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer}.service-check>span{display:flex;flex-direction:column}.service-qty{display:flex;align-items:center;gap:8px;min-width:135px}.service-qty label{font-size:12px;color:#71819a;margin:0}.service-qty input{width:75px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid #edf1f6}
@media(max-width:900px){.clinic-flow,.workflow-steps{overflow-x:auto}.clinic-flow>a,.workflow-step{min-width:180px}.clinic-flow>i,.workflow-line{display:none}.service-picker-qty .service-row{align-items:flex-start;flex-direction:column}.service-qty{width:100%;justify-content:flex-end}}

/* V5 clinical & analytics workflow */
.analytics-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.analytics-card{background:#fff;border:1px solid #e5edf7;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:5px;box-shadow:0 8px 28px rgba(17,48,86,.05)}.analytics-card span{color:#687b98}.analytics-card b{font-size:1.55rem;color:#0d2d52}.analytics-card small{color:#8796ac}.danger-soft{border-top:3px solid #ef5361}.treatment-line{display:grid;grid-template-columns:2fr .7fr .7fr 1fr auto;gap:10px;margin-bottom:10px;align-items:center}.workflow-total{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f5f9ff;border:1px solid #dce9fb;border-radius:14px}.plan-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.timeline-date{font-variant-numeric:tabular-nums;color:#63758f}.pagination-shell{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-top:1px solid #edf1f6}.page-link-modern{min-width:38px;height:38px;border:1px solid #dce5f0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin:0 2px}.page-link-modern.active{background:#1672ff;color:#fff;border-color:#1672ff}@media(max-width:992px){.analytics-strip{grid-template-columns:repeat(2,1fr)}.treatment-line{grid-template-columns:1fr 1fr}.treatment-line .svc{grid-column:1/-1}}@media(max-width:576px){.analytics-strip{grid-template-columns:1fr}.treatment-line{grid-template-columns:1fr}}
/* V6 unified UI + help + local charts */
.help-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,#f8fbff,#eef5ff)}.help-hero p{margin:4px 0 0;color:var(--muted)}.help-search{min-width:360px}.workflow-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.guide-card{display:flex;gap:16px;background:#fff;border:1px solid #e4ebf4;border-radius:18px;padding:20px;box-shadow:0 8px 26px rgba(18,50,90,.04)}.guide-no{flex:0 0 42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eaf2ff;color:#176bff;font-weight:800}.guide-card h5{margin:2px 0 6px}.guide-card p{color:#687b98;line-height:1.8;margin-bottom:8px}.guide-card a{text-decoration:none;font-weight:700}.journey-map{display:flex;align-items:center;gap:10px;overflow:auto;padding:8px 0}.journey-map span{white-space:nowrap;padding:10px 14px;background:#f2f6fc;border-radius:12px;font-weight:700}.journey-map b{color:#9aacbf}.chart-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}.local-chart{height:240px;display:flex;align-items:flex-end;gap:10px;padding:20px 8px 30px;border-bottom:1px solid #dfe7f1}.chart-col{height:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;position:relative}.chart-bar{width:min(42px,70%);min-height:3px;background:linear-gradient(180deg,#1f7aff,#75aaff);border-radius:9px 9px 3px 3px;position:relative}.chart-bar em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;font-style:normal;color:#52647d;white-space:nowrap;margin-bottom:5px}.chart-col small{position:absolute;top:calc(100% + 8px);font-size:11px;color:#75859b;white-space:nowrap}.status-chart{display:grid;gap:13px;margin-top:18px}.status-line{display:grid;grid-template-columns:95px 1fr 42px;gap:10px;align-items:center}.status-track{height:11px;background:#edf2f7;border-radius:20px;overflow:hidden}.status-fill{height:100%;background:#2474ff;border-radius:20px}.table-shell{background:#fff;border:1px solid #e5edf7;border-radius:18px;overflow:hidden}.table-shell .table{margin:0}.pagination-shell .pages{display:flex;gap:4px;flex-wrap:wrap}.quick-date{display:flex;gap:6px;flex-wrap:wrap}.quick-date a{font-size:12px;padding:6px 10px;border:1px solid #dbe5f1;border-radius:9px;text-decoration:none}.quick-date a.active{background:#176bff;color:#fff;border-color:#176bff}.page-kicker{font-size:12px;font-weight:800;color:#176bff;letter-spacing:.4px}.unified-list-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:18px}.unified-list-head p{margin:4px 0 0;color:var(--muted)}
@media(max-width:900px){.workflow-guide,.chart-grid{grid-template-columns:1fr}.help-hero{align-items:stretch;flex-direction:column}.help-search{min-width:0}.unified-list-head{align-items:flex-start;flex-direction:column}.filter-bar>*{min-width:150px}.pagination-shell{align-items:flex-start;gap:10px;flex-direction:column}}
@media(max-width:576px){.workflow-guide{grid-template-columns:1fr}.guide-card{padding:15px}.journey-map{margin-inline:-5px}.local-chart{height:190px}.status-line{grid-template-columns:80px 1fr 35px}}
/* V6 unified UI + help + local charts */
.help-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,#f8fbff,#eef5ff)}.help-hero p{margin:4px 0 0;color:var(--muted)}.help-search{min-width:360px}.workflow-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.guide-card{display:flex;gap:16px;background:#fff;border:1px solid #e4ebf4;border-radius:18px;padding:20px;box-shadow:0 8px 26px rgba(18,50,90,.04)}.guide-no{flex:0 0 42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eaf2ff;color:#176bff;font-weight:800}.guide-card h5{margin:2px 0 6px}.guide-card p{color:#687b98;line-height:1.8;margin-bottom:8px}.guide-card a{text-decoration:none;font-weight:700}.journey-map{display:flex;align-items:center;gap:10px;overflow:auto;padding:8px 0}.journey-map span{white-space:nowrap;padding:10px 14px;background:#f2f6fc;border-radius:12px;font-weight:700}.journey-map b{color:#9aacbf}.chart-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}.local-chart{height:240px;display:flex;align-items:flex-end;gap:10px;padding:20px 8px 30px;border-bottom:1px solid #dfe7f1}.chart-col{height:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;position:relative}.chart-bar{width:min(42px,70%);min-height:3px;background:linear-gradient(180deg,#1f7aff,#75aaff);border-radius:9px 9px 3px 3px;position:relative}.chart-bar em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;font-style:normal;color:#52647d;white-space:nowrap;margin-bottom:5px}.chart-col small{position:absolute;top:calc(100% + 8px);font-size:11px;color:#75859b;white-space:nowrap}.status-chart{display:grid;gap:13px;margin-top:18px}.status-line{display:grid;grid-template-columns:95px 1fr 42px;gap:10px;align-items:center}.status-track{height:11px;background:#edf2f7;border-radius:20px;overflow:hidden}.status-fill{height:100%;background:#2474ff;border-radius:20px}.table-shell{background:#fff;border:1px solid #e5edf7;border-radius:18px;overflow:hidden}.table-shell .table{margin:0}.pagination-shell .pages{display:flex;gap:4px;flex-wrap:wrap}.quick-date{display:flex;gap:6px;flex-wrap:wrap}.quick-date a{font-size:12px;padding:6px 10px;border:1px solid #dbe5f1;border-radius:9px;text-decoration:none}.quick-date a.active{background:#176bff;color:#fff;border-color:#176bff}.page-kicker{font-size:12px;font-weight:800;color:#176bff;letter-spacing:.4px}.unified-list-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:18px}.unified-list-head p{margin:4px 0 0;color:var(--muted)}
@media(max-width:900px){.workflow-guide,.chart-grid{grid-template-columns:1fr}.help-hero{align-items:stretch;flex-direction:column}.help-search{min-width:0}.unified-list-head{align-items:flex-start;flex-direction:column}.filter-bar>*{min-width:150px}.pagination-shell{align-items:flex-start;gap:10px;flex-direction:column}}
@media(max-width:576px){.workflow-guide{grid-template-columns:1fr}.guide-card{padding:15px}.journey-map{margin-inline:-5px}.local-chart{height:190px}.status-line{grid-template-columns:80px 1fr 35px}}
/* V6.1 clinical workflow */
.workflow-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;background:#fff;border:1px solid #e5edf7;border-radius:18px;padding:14px}.workflow-step{position:relative;padding:12px;border-radius:14px;background:#f7f9fc;min-height:78px}.workflow-step b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e7edf5;margin-left:8px}.workflow-step span{font-weight:800}.workflow-step small{display:block;color:#8090a8;margin-top:7px}.workflow-step.done{background:#eef6ff;border:1px solid #cfe2ff}.workflow-step.done b{background:#1677ff;color:#fff}.grid-span-2{grid-column:span 2}@media(max-width:900px){.workflow-strip{grid-template-columns:1fr 1fr}.workflow-step:last-child{grid-column:span 2}}@media(max-width:575px){.workflow-strip{grid-template-columns:1fr}.workflow-step:last-child{grid-column:auto}.grid-span-2{grid-column:auto}}

/* v6.2 patient journey/navigation polish */
.workflow-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:12px;background:#fff;border:1px solid #e5eaf2;border-radius:18px;box-shadow:0 8px 24px rgba(15,45,82,.05)}
.workflow-strip .workflow-step{min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:12px;border-radius:14px;background:#f7f9fc;border:1px solid transparent}
.workflow-strip .workflow-step b{grid-row:1/3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e8eef8;color:#60738e}.workflow-strip .workflow-step span{font-weight:800;white-space:normal;line-height:1.35}.workflow-strip .workflow-step small{display:block;color:#7d8da5;white-space:normal;line-height:1.35;margin-top:3px}.workflow-strip .workflow-step.done{background:#eef6ff;border-color:#d3e5ff}.workflow-strip .workflow-step.done b{background:#1677ff;color:#fff}
.booking-form .service-picker-qty{display:grid;grid-template-columns:1fr;gap:10px}.booking-form .service-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:14px;align-items:center;padding:14px 16px;border:1px solid #e1e7f0;border-radius:14px;background:#fff}.booking-form .service-check{display:flex;gap:10px;align-items:flex-start;min-width:0}.booking-form .service-check span{min-width:0}.booking-form .service-check small{display:block;color:#7b8aa2;margin-top:4px}.booking-form .service-qty{display:flex;align-items:center;gap:8px}.booking-form .service-qty label{font-size:.78rem;color:#7b8aa2;margin:0}.booking-form .service-qty input{width:75px;text-align:center}
@media(max-width:900px){.workflow-strip{grid-template-columns:1fr}.workflow-strip .workflow-step{grid-template-columns:36px 1fr}.booking-form .service-row{grid-template-columns:1fr}.booking-form .service-qty{padding-inline-start:30px}.detail-grid{grid-template-columns:1fr!important}.grid-span-2{grid-column:auto!important}}
/* V7 final V1 - advanced unified date filter */
.advanced-filter{position:relative;overflow:visible}.date-range-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;text-align:start;color:#263750;min-width:300px}.date-range-trigger span{flex:1}.date-range-popover{display:none;position:absolute;z-index:1080;top:calc(100% - 8px);inset-inline-end:18px;width:min(760px,calc(100vw - 40px));background:#fff;border:1px solid #dfe7f1;border-radius:18px;box-shadow:0 24px 70px rgba(12,34,62,.22);overflow:hidden}.date-range-popover.show{display:block}.date-pop-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid #edf1f6}.date-pop-head b{display:block;font-size:18px}.date-pop-head small{color:#8290a5}.date-pop-body{display:grid;grid-template-columns:190px 1fr}.date-presets{grid-row:1/3;padding:12px;border-inline-end:1px solid #edf1f6;background:#fafcff}.date-presets button{width:100%;border:0;background:transparent;text-align:start;padding:10px 12px;border-radius:9px;color:#30425d}.date-presets button:hover{background:#eaf2ff;color:#176bff}.custom-range{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;padding:22px}.custom-range label{font-size:12px;color:#667892}.custom-range input{margin-top:6px}.date-pop-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 22px 20px}.medical-center-card{display:grid;grid-template-columns:1.4fr repeat(3,1fr) auto;gap:14px;align-items:center}.patient-meta-chip{background:#f7f9fc;border:1px solid #e7edf5;border-radius:12px;padding:10px 12px}.patient-meta-chip small{display:block;color:#7c8ca4}.patient-meta-chip b{display:block;margin-top:3px}@media(max-width:900px){.date-range-popover{inset-inline:0;width:100%}.date-pop-body{grid-template-columns:1fr}.date-presets{grid-row:auto;display:grid;grid-template-columns:repeat(2,1fr);border-inline-end:0;border-bottom:1px solid #edf1f6}.custom-range{grid-template-columns:1fr}.custom-range>span{display:none}.date-range-trigger{min-width:0}.medical-center-card{grid-template-columns:1fr 1fr}}@media(max-width:575px){.date-range-popover{position:fixed;inset:72px 10px auto 10px;width:auto;max-height:calc(100vh - 90px);overflow:auto}.medical-center-card{grid-template-columns:1fr}}
/* V8 scheduling */
.booking-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px}.slot-card{border:1px solid #dbe5f3;background:#fff;border-radius:14px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:4px;transition:.15s}.slot-card:hover{border-color:#2474ff;transform:translateY(-1px)}.slot-card.selected{background:#eaf2ff;border:2px solid #2474ff;box-shadow:0 0 0 3px rgba(36,116,255,.08)}.slot-no{font-size:.78rem;color:#2474ff}.slot-card b{font-size:1.08rem}.slot-card small{color:#7c8ba1}.exception-box{border:1px dashed #f0a43a;background:#fffaf1;border-radius:14px;padding:14px}.exception-box .form-check{display:flex;gap:12px}.exception-box small{display:block;color:#7c6a50}.plan-actions{display:flex;gap:8px;flex-wrap:wrap}.plan-items{margin-top:12px;display:grid;gap:8px}.plan-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;border:1px solid #e6ebf2;border-radius:12px;padding:12px}.queue-badge{display:inline-flex;min-width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#eaf2ff;color:#1466e8;font-weight:700}

/* Phase 1 final workflow: reception billing queue */
.billing-queue{display:grid;gap:10px}.billing-queue-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #e5eaf2;border-radius:14px;background:#fff}.billing-queue-row small{display:block;color:#7b879b;margin-top:4px}.billing-queue-panel{border-top:3px solid #f0ad4e}@media(max-width:700px){.billing-queue-row{align-items:stretch;flex-direction:column}.billing-queue-row .btn{width:100%}}

/* Phase 1.1 — booking command UI + live clinic board */
.booking-command-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px;padding:8px 2px 2px}.booking-command-copy{max-width:820px}.booking-command-copy h2{font-size:32px;font-weight:850;margin:5px 0;color:#102b4e}.booking-command-copy p{margin:0;color:#70819a;line-height:1.7}.booking-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#60738e;font-size:13px;margin-bottom:8px}.booking-back:hover{color:#176bff}.booking-head-meta{display:flex;gap:8px;flex-wrap:wrap}.booking-head-meta span{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #dfe8f4;background:#fff;border-radius:12px;color:#50637e;font-size:12px}.booking-progress{display:flex;align-items:center;padding:11px 14px;background:#fff;border:1px solid #e2eaf4;border-radius:18px;box-shadow:0 8px 28px rgba(17,48,86,.04)}.booking-progress-step{display:flex;align-items:center;gap:9px;min-width:150px;padding:8px 10px;border-radius:12px}.booking-progress-step b{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#edf2f8;color:#70819a}.booking-progress-step span{font-weight:800;color:#263a57}.booking-progress-step small{display:block;font-weight:400;color:#8998ad;margin-top:2px}.booking-progress-step.active{background:#eef5ff}.booking-progress-step.active b{background:#176bff;color:#fff}.booking-progress>i{height:2px;flex:1;background:#e5ebf3;margin:0 5px}.booking-form{border:1px solid #e4ebf4!important}.slot-board{padding:18px;border:1px solid #e1e9f4;border-radius:18px;background:#fbfdff}.booking-slots{grid-template-columns:repeat(auto-fill,minmax(115px,1fr))}.slot-card{min-height:86px;justify-content:center}.slot-card b{font-size:1.18rem}.slot-no{order:2}.live-clinic-panel{border:1px solid #dfe8f3!important;background:linear-gradient(180deg,#fff,#fbfdff)}.live-clinic-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.live-clinic-head h4{font-weight:850;margin:0}.live-clinic-head p{color:#7b8ba2;margin:4px 0 0}.live-clinic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.live-lane{border:1px solid #e2e9f2;border-radius:16px;padding:14px;background:#fff}.live-lane.next{border-color:#b9d4ff;background:#f5f9ff}.live-lane.billing{border-color:#ffe0ad;background:#fffaf2}.live-lane-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.live-lane-title b{font-size:15px}.live-count{min-width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#edf3fb;color:#365a86;font-weight:800}.live-patient{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid #edf1f6;text-decoration:none;color:#172b49}.live-patient:first-of-type{border-top:0}.live-patient strong{display:block}.live-patient small{display:block;color:#7c8ca2;margin-top:2px}.live-patient .queue-badge{flex:0 0 auto}.live-empty{padding:14px 4px;color:#8b99ad;font-size:13px}.doctor-live-note{display:inline-flex;align-items:center;gap:6px;color:#176bff;font-size:12px;font-weight:700}
@media(max-width:900px){.booking-command-head{align-items:flex-start;flex-direction:column}.booking-head-meta{width:100%}.booking-progress{overflow-x:auto}.booking-progress-step{min-width:165px}.booking-progress>i{min-width:35px}.live-clinic-grid{grid-template-columns:1fr}}@media(max-width:575px){.booking-command-copy h2{font-size:26px}.booking-head-meta span{flex:1}.slot-board{padding:12px}.booking-slots{grid-template-columns:repeat(2,1fr)}}

/* Phase 1.2 - cleaner navigation and accounting workflow */
.app-breadcrumb{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;padding:.7rem .9rem;background:#fff;border:1px solid #e5edf7;border-radius:14px;box-shadow:0 5px 18px rgba(15,43,76,.04);font-size:.86rem;color:#7a8ca6}
.app-breadcrumb a{color:#60748f;text-decoration:none;font-weight:600}.app-breadcrumb a:first-child{color:#1769e0}.app-breadcrumb span{font-weight:700;color:#102a4d}.app-breadcrumb i.bi-chevron-left{font-size:.7rem;color:#aab7c8}
.billing-queue-row{align-items:center}.billing-queue-row>div{display:flex;flex-direction:column;gap:.18rem}.accounting-stage{display:inline-flex;width:max-content;margin-top:.25rem;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;font-weight:700}.accounting-stage.needs-invoice{background:#fff4dd;color:#9a5a00}.accounting-stage.invoice-ready{background:#e8f8ef;color:#157347}
@media(max-width:767px){.app-breadcrumb{overflow:auto;white-space:nowrap}.billing-queue-row{align-items:stretch;gap:.75rem}.billing-queue-row .btn{width:100%}}

/* Phase 1.5 - live clinic actions */
.live-patient-actions{display:flex!important;align-items:center;gap:.65rem;}
.live-patient-actions .live-patient-main{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex:1;min-width:0;color:inherit;text-decoration:none;}
.live-patient-actions .live-end-form{margin:0;flex:0 0 auto;}
.live-patient-actions .live-end-form .btn{white-space:nowrap;}
@media(max-width:767.98px){.live-patient-actions{align-items:stretch;flex-direction:column}.live-patient-actions .live-end-form .btn{width:100%}}

/* ===== PHASE 1 FINAL LOCKED responsive hardening ===== */
@media(max-width:767.98px){
  .navbar .container-fluid{gap:8px}.navbar .d-flex.align-items-center{gap:6px!important}.navbar .form-select{max-width:130px}
  .table-responsive{border-radius:12px;-webkit-overflow-scrolling:touch}.table-responsive .table{margin-bottom:0}
  .financial-summary{grid-template-columns:1fr!important}.collection-panel{position:static!important}
  .page-head .d-flex{width:100%;flex-wrap:wrap}.page-head .d-flex .btn{flex:1 1 auto}
  .panel{overflow-wrap:anywhere}.invoice-mini{align-items:flex-start;gap:8px;flex-direction:column}
}
/* Phase 1 final UX polish */
.topbar-modern{height:72px;background:#fff;border-bottom:1px solid #e7edf5;display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:1020}.topbar-icon{width:44px;height:44px;border:1px solid #e3eaf4;background:#f8fafc;border-radius:13px;font-size:20px;color:#17365f}.topbar-actions{display:flex;align-items:center;gap:12px}.language-switch{display:inline-flex;padding:4px;background:#f1f5f9;border-radius:12px;gap:2px}.language-switch button{border:0;background:transparent;border-radius:9px;padding:7px 11px;font-weight:700;color:#64748b}.language-switch button.active{background:#fff;color:#176bff;box-shadow:0 2px 8px #0f172a12}.user-chip{display:flex;align-items:center;gap:10px;border:1px solid #e3eaf4;background:#fff;border-radius:14px;padding:6px 10px}.user-avatar{width:34px;height:34px;border-radius:10px;background:#eaf2ff;color:#176bff;display:grid;place-items:center;font-weight:800}.user-meta{display:flex;flex-direction:column;text-align:start;line-height:1.15}.user-meta small{color:#94a3b8;font-size:11px}.public-body{min-height:100vh;background:linear-gradient(180deg,#f7faff,#eef4fb)}.public-header{height:72px;background:#fff;border-bottom:1px solid #e7edf5;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1120px)/2));}.public-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0b1f3a;font-weight:850;font-size:19px}.public-brand img{width:38px;height:38px}.public-main{max-width:980px;margin:auto;padding:40px 18px}.public-booking-card{border:0;border-radius:24px;box-shadow:0 20px 60px rgba(18,33,58,.09);overflow:hidden}.public-booking-head{padding:26px 28px;background:linear-gradient(135deg,#0c2b52,#176bff);color:#fff}.optional-badge{font-size:11px;background:#eef4ff;color:#176bff;border-radius:999px;padding:4px 8px}.tooth{cursor:pointer;transition:.15s}.tooth:hover{transform:translateY(-2px);border-color:#176bff}.quick-clinical{background:#f8fbff;border:1px solid #e4edf8;border-radius:14px;padding:12px}.quick-chips{display:flex;gap:6px;flex-wrap:wrap}.quick-chip{border:1px solid #dbe7f7;background:#fff;border-radius:999px;padding:5px 10px;font-size:12px}.quick-chip:hover{border-color:#176bff;color:#176bff}@media(max-width:767px){.topbar-modern{padding:0 10px}.user-meta{display:none}.public-header{padding:0 16px}.public-main{padding:20px 10px}.public-booking-head{padding:20px}.language-switch button{padding:6px 9px}}
.user-menu{position:relative}.user-menu summary{list-style:none;cursor:pointer}.user-menu summary::-webkit-details-marker{display:none}.user-popover{position:absolute;inset-inline-end:0;top:54px;min-width:180px;background:#fff;border:1px solid #e3eaf4;border-radius:13px;padding:7px;box-shadow:0 14px 35px #0f172a1f;z-index:1100}.logout-action{width:100%;border:0;background:#fff;color:#dc3545;text-align:start;padding:9px 11px;border-radius:9px}.logout-action:hover{background:#fff1f2}
.notification-wrap{position:fixed;top:14px;inset-inline-start:250px;z-index:1200}.notification-bell{position:relative;width:44px;height:44px;border:1px solid #e2e8f0;border-radius:13px;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.06);font-size:19px}.notification-count{position:absolute;top:-6px;inset-inline-end:-6px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#dc3545;color:#fff;font-size:11px;font-weight:800;line-height:21px}.notification-panel{position:absolute;top:52px;inset-inline-start:0;width:360px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 18px 45px rgba(15,23,42,.18);overflow:hidden}.notification-panel-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid #edf2f7}.notification-panel-head button{border:0;background:none;color:#1677ff;font-size:12px}.notification-item{display:block;padding:12px 15px;border-bottom:1px solid #f1f5f9;text-decoration:none;color:inherit}.notification-item.unread{background:#f4f8ff}.notification-item b{display:block;margin-bottom:3px}.notification-item small{display:block;color:#718096}.notification-empty{padding:24px;text-align:center;color:#94a3b8}.clinic-toast{position:fixed;top:74px;inset-inline-start:24px;z-index:2000;width:360px;max-width:calc(100vw - 48px);background:#fff;border-inline-start:4px solid #1677ff;border-radius:14px;padding:14px 16px;box-shadow:0 18px 45px rgba(15,23,42,.2)}body.sidebar-collapsed .notification-wrap{inset-inline-start:92px}@media(max-width:991px){.notification-wrap{inset-inline-start:80px;top:12px}.notification-panel{width:330px}}

/* V3.3.5 - realtime notification center */
.notification-wrap{position:absolute;top:14px;inset-inline-start:76px;z-index:1300}.notification-bell{display:grid;place-items:center;transition:.2s;overflow:visible}.notification-bell-icon{font-size:20px;line-height:1;filter:none}.notification-bell.has-unread{background:#fff8e8;border-color:#ffd879}.notification-bell.has-unread .notification-bell-icon{animation:bellIdle 2.8s ease-in-out infinite}.notification-panel{top:56px;width:390px;border:0;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.20)}.notification-panel-head{padding:16px 18px;background:#fff}.notification-panel-head b{font-size:16px}.notification-panel-head button{font-weight:700}.notification-item{display:flex;gap:12px;padding:14px 16px;align-items:flex-start;transition:.15s}.notification-item:hover{background:#f8fbff}.notification-item.unread{background:linear-gradient(90deg,#f1f7ff,#fff);position:relative}.notification-item.unread:after{content:"";position:absolute;inset-inline-end:12px;top:18px;width:7px;height:7px;border-radius:50%;background:#176bff}.notification-item-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;font-weight:900;background:#eaf3ff;color:#176bff}.notification-item-icon.updated{background:#fff7e6;color:#d97706}.notification-item-icon.cancelled{background:#fff0f0;color:#dc3545}.notification-item-body{min-width:0;display:block;padding-inline-end:12px}.notification-item-body b{font-size:14px;color:#102a4c}.notification-item-body small{font-size:12px;line-height:1.65;margin-top:3px}.notification-item-body em{display:inline-block;margin-top:6px;font-style:normal;font-size:10px;font-weight:800;color:#176bff;background:#eaf3ff;padding:2px 7px;border-radius:999px}.notification-arrived .notification-bell{animation:bellPulse .75s ease}.clinic-toast{top:88px;inset-inline-start:24px;width:430px;max-width:calc(100vw - 32px);display:flex;gap:14px;align-items:flex-start;border:1px solid #dbe9ff;border-inline-start:0;border-radius:20px;padding:16px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.24);transform:translateY(-14px);opacity:0;transition:.25s}.clinic-toast.show{transform:translateY(0);opacity:1}.clinic-toast-icon{width:46px;height:46px;flex:0 0 46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#0c2b52,#176bff);font-size:20px;box-shadow:0 8px 20px rgba(23,107,255,.22)}.clinic-toast-content{min-width:0;flex:1}.clinic-toast-kicker{display:block;color:#176bff;font-size:10px;font-weight:900;letter-spacing:.2px;margin-bottom:3px}.clinic-toast-content b{display:block;font-size:15px;color:#102a4c;margin-bottom:4px}.clinic-toast-content div{font-size:13px;color:#64748b;line-height:1.55}.clinic-toast-content a{display:inline-block;margin-top:9px;color:#176bff;font-size:12px;font-weight:800;text-decoration:none}.clinic-toast-close{border:0;background:#f1f5f9;color:#64748b;width:28px;height:28px;border-radius:9px;font-size:18px;line-height:1}.notification-empty{padding:30px 18px}.topbar-modern{position:sticky}.topbar-actions{padding-inline-start:58px}@keyframes bellPulse{0%{transform:scale(1)}25%{transform:scale(1.12) rotate(-10deg)}50%{transform:scale(1.12) rotate(10deg)}75%{transform:scale(1.06) rotate(-5deg)}100%{transform:scale(1)}}@keyframes bellIdle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}95%{transform:rotate(-4deg)}}@media(max-width:991px){.notification-wrap{position:absolute;inset-inline-start:62px;top:14px}.topbar-actions{padding-inline-start:52px}.notification-panel{width:min(390px,calc(100vw - 20px));inset-inline-start:-52px}.clinic-toast{top:82px;inset-inline-start:10px;max-width:calc(100vw - 20px)}}

/* V3.3.6: notification bell lives beside language switch in both RTL/LTR */
.topbar-actions .notification-wrap{position:relative!important;top:auto!important;inset-inline-start:auto!important;z-index:1300;flex:0 0 auto}.topbar-actions{padding-inline-start:0!important}.topbar-actions .notification-panel{top:52px;inset-inline-start:0}.topbar-actions .notification-bell{width:42px;height:42px;border-radius:12px}.topbar-actions .notification-bell-icon{font-size:18px}@media(max-width:767px){.topbar-actions{gap:7px}.topbar-actions .notification-panel{position:fixed;top:68px;inset-inline-start:10px;inset-inline-end:10px;width:auto!important;max-width:none!important}}

/* V3.3.7 - header search + notification UX */
.topbar-actions{display:flex;align-items:center;gap:10px}.topbar-actions .notification-panel{inset-inline-start:auto!important;inset-inline-end:0!important}.global-search{position:relative}.global-search-button{height:42px;display:flex;align-items:center;gap:8px;border:1px solid #e2e8f0;background:#f8fafc;color:#334155;border-radius:12px;padding:0 12px;font-weight:700}.global-search-button:hover{background:#fff;border-color:#bfd4f5}.global-search-button kbd{font-size:10px;background:#e8eef7;color:#64748b;border:0;border-radius:6px;padding:2px 6px}.global-search-panel{position:absolute;top:52px;inset-inline-end:0;width:430px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.20);overflow:hidden;z-index:1350}.global-search-input-wrap{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #edf2f7}.global-search-input-wrap>i{color:#64748b}.global-search-input-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px}.global-search-input-wrap button{border:0;background:#f1f5f9;color:#64748b;width:28px;height:28px;border-radius:8px;font-size:18px}.global-search-results{max-height:390px;overflow:auto;padding:7px}.global-search-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;text-decoration:none;color:#183153}.global-search-item:hover,.global-search-item.active{background:#f1f6ff;color:#176bff}.global-search-item i{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#edf4ff;color:#176bff}.global-search-item span{display:flex;flex-direction:column;min-width:0}.global-search-item b{font-size:13px}.global-search-item small{font-size:11px;color:#94a3b8;margin-top:2px}.global-search-empty{padding:22px;text-align:center;color:#94a3b8}.clinic-toast{top:auto!important;bottom:22px!important;inset-inline-start:24px!important;inset-inline-end:auto!important;transform:translateY(18px)!important}.clinic-toast.show{transform:translateY(0)!important}.rtl .clinic-toast{left:24px!important;right:auto!important}html[dir="ltr"] .clinic-toast{right:24px!important;left:auto!important}@media(max-width:767px){.global-search-button span,.global-search-button kbd{display:none}.global-search-button{width:42px;padding:0;justify-content:center}.global-search-panel{position:fixed;top:68px;inset-inline-start:10px;inset-inline-end:10px;width:auto;max-width:none}.topbar-actions{gap:6px}.user-meta{display:none}.clinic-toast,.rtl .clinic-toast,html[dir="ltr"] .clinic-toast{bottom:12px!important;left:10px!important;right:10px!important;max-width:none!important;width:auto!important}}

/* V3.3.8 - final topbar order + larger search + clearer toast */
/* Keep the visual action order stable in Arabic and English:
   Account/Logout -> Language -> Notifications -> Search */
.topbar-actions{
    direction:ltr;
    flex-direction:row!important;
    gap:10px!important;
}
.topbar-actions .user-menu,
.topbar-actions .language-switch,
.topbar-actions .notification-wrap,
.topbar-actions .global-search{direction:initial}

/* Search is intentionally wider and more visible on desktop */
.global-search-button{
    width:180px;
    min-width:180px;
    height:44px;
    justify-content:flex-start;
    padding:0 14px;
    background:#fff;
    border:1px solid #d6e2f1;
    box-shadow:0 3px 12px rgba(15,42,76,.06);
}
.global-search-button span{flex:1;text-align:start;font-size:14px}
.global-search-button i{font-size:16px;color:#176bff}
.global-search-panel{width:480px}

/* Stronger contrast while keeping the same realtime/toast behaviour */
.clinic-toast{
    width:440px;
    border:1px solid #b9d5ff!important;
    border-inline-start:5px solid #176bff!important;
    background:linear-gradient(135deg,#f3f8ff 0%,#ffffff 72%)!important;
    box-shadow:0 20px 55px rgba(12,43,82,.26),0 4px 14px rgba(23,107,255,.12)!important;
    padding:17px 18px!important;
}
.clinic-toast-icon{
    background:linear-gradient(135deg,#0b2c55,#176bff)!important;
    color:#fff;
    border:1px solid rgba(255,255,255,.35);
}
.clinic-toast-kicker{font-size:11px!important;color:#0f62d8!important}
.clinic-toast-content b{font-size:16px!important;color:#0b2442!important}
.clinic-toast-content div{color:#4d6178!important}
.clinic-toast-content a{
    padding:6px 10px;
    border-radius:8px;
    background:#e7f1ff;
    color:#0f62d8!important;
}
.clinic-toast-close{background:#e8eef6!important;color:#42566f!important}

@media(max-width:767px){
    .topbar-actions{gap:6px!important}
    .global-search-button{width:44px!important;min-width:44px!important;height:42px;padding:0!important;justify-content:center!important}
    .global-search-panel{width:auto}
    .clinic-toast{width:auto!important;padding:14px!important}
}

/* V3.3.9 - production notification dropdown + persistent toast polish */
.topbar-actions .notification-panel{
    width:410px!important;
    max-width:calc(100vw - 32px)!important;
    top:54px!important;
    inset-inline-start:0!important;
    inset-inline-end:auto!important;
    border:1px solid #dce7f5!important;
    border-radius:16px!important;
    box-shadow:0 22px 60px rgba(15,42,76,.22)!important;
    overflow:hidden!important;
    background:#fff!important;
}
.notification-item{padding:14px 15px!important;gap:12px!important}
.notification-item-body{min-width:0!important;overflow:visible!important}
.notification-item-body b,.notification-item-body small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word!important}
.notification-item-body small{line-height:1.55!important}
.notification-panel-head{padding:13px 15px!important;background:#f8fbff!important}
.clinic-toast{z-index:1450!important}
@media(max-width:767px){
    .topbar-actions .notification-panel{
        position:fixed!important;top:68px!important;left:10px!important;right:10px!important;
        width:auto!important;max-width:none!important;
    }
}

/* V3.4.0 - paged notification center + responsive internal scroll */
.notification-list-scroll{
    max-height:min(520px,calc(100vh - 180px));
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#cbd8ea transparent;
    background:#fff;
}
.notification-list-scroll::-webkit-scrollbar{width:7px}
.notification-list-scroll::-webkit-scrollbar-track{background:transparent}
.notification-list-scroll::-webkit-scrollbar-thumb{background:#cbd8ea;border-radius:999px}
.notification-list-scroll::-webkit-scrollbar-thumb:hover{background:#aebfd7}
.notification-load-state{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 14px;color:#7890ad;font-size:12px;background:#fbfdff;border-top:1px solid #edf2f7}
.notification-end{min-height:38px;color:#9aabc0}
.notification-spinner{width:17px;height:17px;border:2px solid #dce8f7;border-top-color:#176bff;border-radius:50%;animation:notificationSpin .7s linear infinite}
@keyframes notificationSpin{to{transform:rotate(360deg)}}
@media(max-width:767px){
    .topbar-actions .notification-panel{top:62px!important;bottom:auto!important;max-height:calc(100dvh - 78px)!important;border-radius:15px!important}
    .notification-list-scroll{max-height:calc(100dvh - 150px)!important;-webkit-overflow-scrolling:touch}
    .notification-item{padding:12px 13px!important;gap:10px!important}
    .notification-item-icon{width:34px!important;height:34px!important;flex-basis:34px!important;border-radius:10px!important}
    .notification-item-body b{font-size:13px!important}
    .notification-item-body small{font-size:11px!important;line-height:1.5!important}
    .notification-panel-head{position:sticky;top:0;z-index:2}
}
@media(max-width:380px){
    .topbar-actions .notification-panel{left:6px!important;right:6px!important}
    .notification-list-scroll{max-height:calc(100dvh - 142px)!important}
}

/* V3.8.2 REALISTIC LIVE ODONTOGRAM - interactive anatomical assets */
.realistic-live-zone{background:#fff!important;border:1px solid #dfe9f5!important;border-radius:22px!important;padding:14px 12px 18px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin}
.realistic-jaw-label{text-align:center;margin:0 0 5px}.realistic-jaw-label b{display:block;color:#173457;font-size:1rem}.realistic-jaw-label small{display:block;color:#99a9bc;font-size:.72rem}.realistic-jaw-label.lower-label{margin:5px 0 0}
.realistic-gum{position:relative;min-width:850px;margin:auto;padding:8px 15px 5px;background:radial-gradient(ellipse at 50% 110%,#ffd0ca 0,#f8a19a 43%,#ef7977 67%,#e96669 78%,transparent 79%);border-radius:45% 45% 18% 18%/38% 38% 15% 15%}
.realistic-gum.lower-gum{background:radial-gradient(ellipse at 50% -10%,#ffd0ca 0,#f8a19a 43%,#ef7977 67%,#e96669 78%,transparent 79%);border-radius:18% 18% 45% 45%/15% 15% 38% 38%;padding:5px 15px 8px}
.realistic-row{display:grid;grid-template-columns:repeat(16,minmax(44px,1fr));align-items:end;gap:0;min-height:115px;direction:ltr}.lower-row{align-items:start}
.realistic-tooth{height:122px!important;min-height:122px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;gap:1px!important;position:relative!important;transform:none!important;transition:none!important;z-index:1}
.lower-row .realistic-tooth{justify-content:flex-start!important}
.realistic-tooth:hover{transform:none!important;background:rgba(36,119,255,.04)!important;z-index:4}.realistic-tooth.selected{transform:none!important;background:rgba(36,119,255,.08)!important;box-shadow:0 0 0 2px #2477ff inset!important;border-radius:13px!important;z-index:5}
.realistic-number{font-size:.7rem;font-weight:900;color:#173f70;line-height:16px}.realistic-state{font-size:.52rem;color:#71839a;line-height:14px;white-space:nowrap;max-width:50px;overflow:hidden;text-overflow:ellipsis}
.tooth-art{position:relative;width:100%;height:84px;display:flex;align-items:center;justify-content:center;isolation:isolate}.tooth-art img{display:block;max-width:64px;max-height:97px;width:auto;height:auto;object-fit:contain;user-select:none;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(87,53,27,.18));transition:none!important}
.realistic-tooth.selected .tooth-art img{filter:drop-shadow(0 0 2px #2477ff) drop-shadow(0 3px 2px rgba(87,53,27,.18))}
.condition-mark{position:absolute;z-index:3;pointer-events:none;display:none;left:50%;top:43%;transform:translate(-50%,-50%)}
/* healthy = untouched natural tooth */
.realistic-tooth.cond-0 .condition-mark{display:none}
/* caries */
.realistic-tooth.cond-1 .condition-mark{display:block;width:20px;height:27px;background:radial-gradient(circle at 38% 28%,#a66a3b 0 18%,#754124 46%,#5c321f 72%,#8a5431 100%);border-radius:48% 42% 55% 40%;box-shadow:0 1px 3px rgba(67,34,18,.3)}
/* filling */
.realistic-tooth.cond-2 .condition-mark{display:block;width:24px;height:18px;background:linear-gradient(145deg,#75c2ff,#2689e8);border-radius:48% 52% 43% 57%;box-shadow:inset 0 1px 2px #bce2ff,0 1px 2px rgba(20,87,150,.25)}
/* crown */
.realistic-tooth.cond-3 .tooth-art img{filter:grayscale(.8) contrast(.8) brightness(.88) drop-shadow(0 3px 2px rgba(50,60,70,.22))}
.realistic-tooth.cond-3 .condition-mark{display:block;width:34px;height:37px;background:linear-gradient(135deg,rgba(216,226,235,.82),rgba(107,126,145,.8));border-radius:42% 42% 28% 28%;mix-blend-mode:multiply}
/* root canal */
.realistic-tooth.cond-4 .condition-mark{display:block;width:10px;height:43px;background:linear-gradient(#ff6b72,#e83f50);border-radius:8px 8px 55% 55%;box-shadow:0 0 0 2px rgba(255,255,255,.65)}
/* missing */
.realistic-tooth.cond-5 .tooth-art img{opacity:.12}.realistic-tooth.cond-5 .condition-mark{display:block;width:42px;height:42px}.realistic-tooth.cond-5 .condition-mark:before,.realistic-tooth.cond-5 .condition-mark:after{content:"";position:absolute;left:19px;top:0;width:4px;height:42px;background:#d9505c;border-radius:4px}.realistic-tooth.cond-5 .condition-mark:before{transform:rotate(45deg)}.realistic-tooth.cond-5 .condition-mark:after{transform:rotate(-45deg)}
/* implant */
.realistic-tooth.cond-6 .tooth-art img{opacity:.18}.realistic-tooth.cond-6 .condition-mark{display:block;width:22px;height:58px;top:52%;background:repeating-linear-gradient(0deg,#566575 0 4px,#c8d1da 4px 7px);border-radius:8px 8px 5px 5px;box-shadow:0 0 0 1px #536170}.realistic-tooth.cond-6 .condition-mark:before{content:"";position:absolute;left:-7px;top:-10px;width:36px;height:20px;border-radius:45% 45% 30% 30%;background:linear-gradient(135deg,#e1e7ed,#7f8f9e)}
/* extraction planned */
.realistic-tooth.cond-7 .tooth-art:after{content:"";position:absolute;inset:4px 7px;border:3px dashed #f0a12a;border-radius:45%;z-index:4}
/* other */
.realistic-tooth.cond-8 .condition-mark{display:block;width:30px;height:35px;background:linear-gradient(145deg,#cba6ff,#8e59dc);border-radius:45%;opacity:.9}
.realistic-occlusion{min-width:850px;display:flex;align-items:center;gap:10px;color:#9aaabd;font-size:.65rem;margin:4px auto}.realistic-occlusion:before,.realistic-occlusion:after{content:"";height:1px;background:#dce5ef;flex:1}
@media(max-width:1180px){.dental-workspace{grid-template-columns:1fr!important}.realistic-live-zone{order:1}.tooth-editor{order:2}.realistic-gum,.realistic-occlusion{min-width:800px}.realistic-row{grid-template-columns:repeat(16,50px)}}
@media(max-width:767px){.realistic-live-zone{padding:10px 4px 14px!important;border-radius:16px!important;-webkit-overflow-scrolling:touch}.realistic-gum,.realistic-occlusion{min-width:760px}.realistic-row{grid-template-columns:repeat(16,47px)}.realistic-tooth{height:112px!important;min-height:112px!important}.tooth-art{height:78px}.tooth-art img{max-width:59px;max-height:90px}.dental-workspace{gap:12px!important}.tooth-editor{padding:13px!important}.dental-title{display:block!important}.dental-legend{margin-top:8px!important}}