/* ════════════════════════════════════════════════════════════════
   DENT CRM — Yagona dizayn tizimi (style.css)
   ────────────────────────────────────────────────────────────────
   Tuzilishi:
     1. Shrift (Onest — o'zbek lotin va kirill harflari uchun)
     2. Dizayn tokenlari (ranglar, o'lchamlar) — rangni shu yerdan o'zgartiring
     3. Asosiy komponentlar (sidebar, header, karta, jadval, forma...)
     4. Moslashuvchanlik (planshet / telefon)
     5. Sahifalarga xos uslublar — har bir sahifa .page-<nom> bilan
        ajratilgan, shuning uchun bir sahifaning uslubi boshqasiga
        ta'sir qilmaydi.
   ════════════════════════════════════════════════════════════════ */

/* ═════════ 1. SHRIFT ═════════ */
@font-face {
    font-family: 'Onest';
    font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('../fonts/onest-cyrillic-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Onest';
    font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('../fonts/onest-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Onest';
    font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('../fonts/onest-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Onest';
    font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('../fonts/onest-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═════════ 2. DIZAYN TOKENLARI ═════════ */
:root {
    /* Asosiy brend rangi — "petrol" (chuqur feruza) */
    --primary:        #0e7c86;
    --primary-rgb:    14 124 134;
    --primary-dark:   #0a5f67;
    --primary-light:  #e3f1f0;
    --primary-soft:   #c9e6e3;

    /* Sidebar va sarlavhalar uchun to'q "siyoh" rang */
    --ink:            #0f2a33;
    --ink-2:          #173a45;
    --ink-text:       #a9c1c6;

    /* Holat ranglari */
    --success:        #1e9a6a;
    --success-light:  #e2f4ec;
    --danger:         #d14343;
    --danger-light:   #fbe9e9;
    --warning:        #e0a100;
    --warning-light:  #fdf3d8;
    --info:           #2f6fb3;
    --info-light:     #e5eef8;

    /* Neytral ranglar ("chinni" fon) */
    --bg:             #f2f5f4;
    --surface:        #ffffff;
    --surface-2:      #f7f9f9;
    --line:           #e2e8e7;
    --line-strong:    #cfd8d7;
    --text:           #1c2b30;
    --text-2:         #3d4f55;
    --muted:          #66777d;
    --faint:          #98a6ab;

    /* Shrift */
    --font:           'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* O'lchamlar (eski nomlar saqlangan — sahifalar ularni ishlatadi) */
    --sidebar-width:  250px;
    --sidebar-mini:   76px;
    --header-height:  60px;
    --radius:         12px;
    --radius-sm:      8px;
    --radius-lg:      16px;
    --shadow:         0 1px 2px rgba(15,42,51,.04), 0 1px 3px rgba(15,42,51,.06);
    --shadow-lg:      0 12px 32px -8px rgba(15,42,51,.18), 0 4px 10px -4px rgba(15,42,51,.08);
    --border:         1px solid var(--line);
    --transition:     all .2s ease;
    --ring:           0 0 0 3px rgb(var(--primary-rgb) / .18);
}

/* ═════════ 3. ASOS ═════════ */
* { margin:0; padding:0; box-sizing:border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button, input, select, textarea { font-family: inherit; }

::selection { background: var(--primary-soft); color: var(--ink); }

a { color: var(--primary); }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Nozik skrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Raqamlar ustunlarda tekis turishi uchun */
.value, .table td, .stat-info .value, .amount, .price, .money { font-variant-numeric: tabular-nums; }

/* ═════════ LAYOUT ═════════ */
.wrapper { display:flex; min-height:100vh; }

/* ═════════ SIDEBAR ═════════ */
.sidebar {
    width: var(--sidebar-width);
    background: var(--ink);
    background-image: linear-gradient(180deg, var(--ink) 0%, #0c232b 100%);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    transition: width .25s ease, transform .25s ease;
    display: flex;
    flex-direction: column;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sidebar::-webkit-scrollbar       { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:2px; border:0; }

.sidebar-header {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-logo {
    width: 38px; height: 38px; min-width: 38px;
    background: var(--primary);
    border-radius: 11px 11px 11px 4px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .5px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 6px 16px -6px rgb(var(--primary-rgb) / .8);
}
.sidebar-brand {
    font-size: 18px; font-weight: 700; color: #fff; letter-spacing: .4px;
    white-space: nowrap;
}
.sidebar-menu { padding: 12px 12px 16px; flex:1; display:flex; flex-direction:column; gap:2px; }

.menu-item {
    position: relative;
    padding: 9px 12px;
    display: flex; align-items: center; gap: 12px;
    color: var(--ink-text); text-decoration: none;
    border-radius: 10px;
    border-left: 0;
    font-size: 14px; font-weight: 500;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.menu-item:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}
.menu-item.active {
    background: rgba(255,255,255,.1);
    color: #fff;
}
.menu-item.active::before {
    content: '';
    position: absolute; left: -12px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: #5fd0c7;
}
.menu-item.active i { color: #5fd0c7; }
.menu-item i { width:20px; text-align:center; font-size:15px; flex-shrink:0; opacity:.9; }

.menu-label {
    font-size: 11.5px; color: rgba(169,193,198,.55);
    padding: 16px 12px 6px; font-weight: 600; letter-spacing: .2px;
    white-space: nowrap;
}
.logout-item { color:#f19a9a !important; margin-top: 8px; }
.logout-item:hover {
    background: rgba(209,67,67,.14) !important;
    color: #ffb4b4 !important;
}

/* Kompyuterda sidebarni yig'ish (☰ tugmasi) */
@media (min-width: 769px) {
    .sidebar.collapsed { width: var(--sidebar-mini); }
    .sidebar.collapsed .sidebar-brand,
    .sidebar.collapsed .menu-item span,
    .sidebar.collapsed .menu-label { display: none; }
    .sidebar.collapsed .sidebar-header { padding: 18px 19px; }
    .sidebar.collapsed .menu-item { justify-content: center; padding: 11px 0; }
    .sidebar.collapsed .menu-item i { font-size: 17px; }
    .main-content.expanded { margin-left: var(--sidebar-mini); }
}

/* ═════════ MAIN CONTENT ═════════ */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left .25s ease;
    min-width: 0;
}

/* ═════════ HEADER ═════════ */
.header {
    height: var(--header-height);
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    position: sticky; top: 0; z-index: 100;
}
.header-left  { display:flex; align-items:center; gap:14px; }
.header-right { display:flex; align-items:center; gap:4px;  }

.header-brand {
    font-size: 17px; font-weight: 700;
    color: var(--ink); letter-spacing: .4px;
    display: none;
}
.toggle-sidebar {
    background: none; border: none; font-size: 18px;
    cursor: pointer; color: var(--muted);
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.toggle-sidebar:hover { background:var(--primary-light); color:var(--primary); }

.header-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; cursor: pointer; color: var(--muted);
    font-size: 16px; transition: var(--transition);
    background: none; border: none; position: relative;
}
.header-icon:hover { background:var(--primary-light); color:var(--primary); }

/* Qidiruv */
.header-search-wrap { position: relative; }
.header-search-box {
    display: none;
    position: absolute; top: 48px; right: 0;
    width: 340px; background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: var(--border);
    padding: 10px 14px;
    align-items: center; gap: 8px;
    z-index: 300;
}
.header-search-box.active { display: flex; animation: dropIn .16s ease-out; }
.header-search-box i     { color:var(--faint); flex-shrink:0; }
.header-search-box input { flex:1; border:none; outline:none; font-size:14px; background:transparent; color:var(--text); }
.header-search-box button { background:none; border:none; cursor:pointer; color:var(--faint); }

.search-dropdown {
    position: absolute; top:calc(100% + 8px); left:0; right:0;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); border: var(--border);
    max-height: 300px; overflow-y: auto; z-index: 301;
}
.search-dropdown:empty { display: none; }
.search-item {
    padding: 11px 16px; cursor: pointer;
    border-bottom: var(--border);
    transition: background .12s ease;
    text-decoration: none; display: flex;
    align-items: center; gap: 10px; color: var(--text);
}
.search-item:hover       { background: var(--primary-light); }
.search-item:last-child  { border-bottom: none; }

/* Bildirishnoma */
.notif-wrap { position: relative; }
.notif-badge {
    position: absolute; top:4px; right:4px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--danger); color: #fff;
    border-radius: 9px; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--surface);
}
.notif-dropdown {
    display: none;
    position: absolute; top:48px; right:0;
    width: 290px; background: var(--surface);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    border: var(--border); z-index: 300; overflow: hidden;
    cursor: default;
}
.notif-wrap.open .notif-dropdown { display: block; animation: dropIn .16s ease-out; }
.notif-title { padding:12px 16px; font-weight:600; border-bottom:var(--border); font-size:13px; color:var(--text); }
.notif-item  { padding:12px 16px; font-size:13px; display:flex; align-items:center; gap:10px; border-bottom:var(--border); color:var(--text-2); }
.notif-item:last-child { border-bottom: 0; }

/* Foydalanuvchi menyusi */
.user-menu-wrap { position: relative; margin-left: 6px; }
.user-avatar-btn {
    width: 36px; height: 36px;
    background: var(--ink);
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: #fff; font-weight: 600;
    font-size: 14px; cursor: pointer; border: none; flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--primary-soft);
}
.user-dropdown {
    display: none;
    position: absolute; top:48px; right:0;
    width: 230px; background: var(--surface);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    border: var(--border); z-index: 300; overflow: hidden;
}
.user-menu-wrap.open .user-dropdown { display: block; animation: dropIn .16s ease-out; }
.user-dropdown-info {
    padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    background: var(--surface-2); border-bottom: var(--border);
}
.user-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; color: var(--text-2); text-decoration: none;
    font-size: 14px; transition: background .12s ease, color .12s ease;
}
.user-dropdown-item:hover { background:var(--primary-light); color:var(--primary); }

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sidebar ustidagi qoplama (telefonda) */
.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(15,42,51,.45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    z-index: 999;
}
.sidebar-overlay.active { display: block; }

/* ═════════ CONTENT ═════════ */
.content { padding: 24px; }

h1, h2, h3, h4 { color: var(--text); letter-spacing: -.01em; }

/* ═════════ KARTALAR ═════════ */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    border: var(--border);
    box-shadow: var(--shadow);
    margin-bottom: 20px; overflow: hidden;
}
.card-header {
    padding: 16px 20px; border-bottom: var(--border);
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.card-title { font-size:15.5px; font-weight:600; color:var(--text); margin:0; }
.card-body  { padding: 20px; }

/* ═════════ STATISTIKA ═════════ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 20px;
}
.stat-card {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    padding: 18px 20px; display: flex; align-items: center;
    justify-content: space-between; box-shadow: var(--shadow);
    transition: border-color .2s ease, box-shadow .2s ease; cursor: default;
}
.stat-card:hover { box-shadow:var(--shadow-lg); border-color: var(--line-strong); }
.stat-info h3 {
    font-size: 12.5px; font-weight: 500;
    color: var(--muted); margin-bottom: 6px; letter-spacing: 0;
    text-transform: none;
}
.stat-info .value { font-size:22px; font-weight:700; color:var(--text); letter-spacing: -.02em; }
.stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0;
}
.stat-icon.blue   { background:var(--primary-light); color:var(--primary); }
.stat-icon.green  { background:var(--success-light); color:var(--success); }
.stat-icon.red    { background:var(--danger-light);  color:var(--danger);  }
.stat-icon.yellow { background:var(--warning-light); color:#b7791f;        }

/* ═════════ TUGMALAR ═════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border-radius: 10px;
    font-size: 14px; font-weight: 500; cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
    text-decoration: none; white-space: nowrap;
    line-height: 1.1; font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { padding:6px 12px; font-size:12.5px; border-radius: 8px; }
.btn-lg { padding:12px 22px; font-size:15px; }

.btn-primary { background:var(--primary); color:#fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.btn-primary:hover { background:var(--primary-dark); color:#fff; }
.btn-success { background:var(--success); color:#fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.btn-success:hover { background:#17805a; color:#fff; }
.btn-danger  { background:var(--danger);  color:#fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.btn-danger:hover  { background:#b53434; color:#fff; }
.btn-warning { background:var(--warning); color:#3a2a00; }
.btn-warning:hover { background:#c98f00; }
.btn-outline {
    background: var(--surface);
    border: 1px solid var(--line-strong); color: var(--text-2);
}
.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* ═════════ FORMALAR ═════════ */
.form-group  { margin-bottom: 18px; }
.form-label  {
    display: block; margin-bottom: 6px;
    font-weight: 600; color: var(--text-2); font-size: 13px;
}
.form-control {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--line-strong); border-radius: 10px;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    color: var(--text); background: var(--surface); font-family: inherit;
}
.form-control:hover { border-color: #b9c5c4; }
.form-control:focus {
    outline: none; border-color: var(--primary);
    box-shadow: var(--ring);
}
.form-control::placeholder { color: var(--faint); }
.form-control:disabled, .form-control[readonly] { background: var(--surface-2); }
textarea.form-control { resize:vertical; min-height:80px; }
select.form-control { cursor: pointer; }
.form-row   { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr;       gap:16px; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ═════════ QIDIRUV MAYDONI ═════════ */
.search-box { position:relative; }
.search-box i {
    position:absolute; left:13px; top:50%;
    transform:translateY(-50%); color:var(--faint); pointer-events:none;
}
.search-box input { padding-left: 38px; }

/* ═════════ JADVAL ═════════ */
.table-container { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th {
    padding: 11px 16px; text-align: left;
    font-size: 12.5px; font-weight: 600;
    text-transform: none; letter-spacing: 0;
    color: var(--muted); background: var(--surface-2);
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td {
    padding: 12px 16px; border-bottom: var(--border);
    color: var(--text-2); vertical-align: middle;
}
.table tr:hover td { background: #f6faf9; }
.table tr:last-child td { border-bottom: none; }

/* ═════════ BEMOR KARTALARI ═════════ */
.patients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.patient-card {
    background: var(--surface); border-radius: var(--radius);
    border: var(--border); overflow: hidden;
    box-shadow: var(--shadow);
    transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer;
}
.patient-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-soft);
}
.patient-card-header {
    padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    border-bottom: var(--border); background: var(--surface);
}
.patient-avatar {
    width: 42px; height: 42px;
    background: var(--primary-light);
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 17px;
    color: var(--primary); flex-shrink: 0;
}
.patient-info h4  { font-size:14.5px; font-weight:600; margin-bottom:1px; color:var(--text); }
.patient-info .id { font-size:12px; color:var(--faint); font-variant-numeric: tabular-nums; }
.patient-card-body { padding: 14px 16px; }
.patient-field {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 7px; gap: 8px;
}
.patient-field:last-child { margin-bottom: 0; }
.patient-field .label {
    font-size: 12.5px; text-transform: none; letter-spacing: 0;
    color: var(--muted); font-weight: 500; white-space: nowrap;
}
.patient-field .value { font-size:13px; font-weight:500; color:var(--text-2); text-align:right; }
.patient-field .value.debt { color: var(--danger); font-weight: 600; }

/* ═════════ KALENDAR ═════════ */
.calendar-header {
    padding: 16px 20px; border-bottom: var(--border);
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.calendar-nav    { display:flex; align-items:center; gap:12px; }
.calendar-title  { font-size:16px; font-weight:600; min-width:180px; text-align:center; }
.calendar-view-toggle {
    display: flex; background: var(--surface-2);
    border: var(--border);
    border-radius: 10px; padding: 3px;
}
.calendar-view-toggle a {
    padding: 6px 14px; border-radius: 7px;
    text-decoration: none; color: var(--muted);
    font-size: 13px; transition: var(--transition); font-weight: 500;
}
.calendar-view-toggle a.active,
.calendar-view-toggle a:hover {
    background: var(--surface); color: var(--primary); box-shadow: var(--shadow);
}

.week-view { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.time-column {
    min-width: 60px; width: 60px; flex-shrink: 0;
    border-right: var(--border); padding-top: 50px;
}
.time-slot {
    height: 60px; padding: 4px 8px;
    font-size: 11px; color: var(--faint);
    border-bottom: var(--border);
    display: flex; align-items: flex-start;
    font-variant-numeric: tabular-nums;
}
.days-container { display:flex; flex:1; min-width:560px; }
.day-column {
    flex: 1; min-width: 0; border-right: var(--border);
}
.day-column:last-child { border-right: none; }
.day-header {
    height: 50px; padding: 8px; border-bottom: var(--border);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--surface-2); position: sticky; top: 0;
}
.day-header .day-name   { font-size:11px; color:var(--muted); font-weight:600; }
.day-header .day-number { font-size:18px; font-weight:700; color:var(--text); }
.day-header.is-today .day-number {
    background: var(--primary); color: #fff;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.day-slots { position: relative; }
.day-slot  { height:60px; border-bottom:1px dashed var(--line); }

.appointment {
    position: absolute; left:3px; right:3px;
    border-radius: 8px; padding: 4px 6px;
    cursor: pointer; overflow: hidden;
    transition: box-shadow .15s ease, filter .15s ease; font-size: 11px;
}
.appointment:hover { filter: brightness(.97); box-shadow:var(--shadow-lg); }
.appt-time    { font-weight:700; font-variant-numeric: tabular-nums; }
.appt-patient { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Kichik kalendar */
.mini-calendar {
    background: var(--surface); border-radius: var(--radius);
    border: var(--border);
    padding: 14px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.mini-calendar-header {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 10px;
}
.mini-calendar-grid {
    display: grid; grid-template-columns: repeat(7,1fr); gap: 3px;
}
.mini-calendar-grid .day-name {
    font-size: 11px; text-align: center;
    color: var(--faint); font-weight: 600; padding: 4px 0;
}
.mini-calendar-grid .day {
    font-size: 12.5px; text-align: center;
    padding: 5px 2px; border-radius: 8px; cursor: pointer;
    transition: background .12s ease, color .12s ease;
    font-variant-numeric: tabular-nums;
}
.mini-calendar-grid .day:hover       { background:var(--primary-light); color:var(--primary); }
.mini-calendar-grid .day.is-today    { background:var(--primary); color:#fff; font-weight:700; }
.mini-calendar-grid .day.has-event   { font-weight:700; color:var(--primary); }
.mini-calendar-grid .day.other-month { color:#cdd5d4; }

/* Faoliyat jurnali */
.activity-log {
    background: var(--surface); border-radius: var(--radius);
    border: var(--border);
    padding: 14px; box-shadow: var(--shadow);
}
.activity-item {
    display: flex; gap: 12px;
    padding: 10px 0; border-bottom: var(--border);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
    width: 32px; height: 32px; background: var(--primary-light);
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: var(--primary);
    font-size: 13px; flex-shrink: 0;
}
.activity-content { flex:1; min-width:0; }
.activity-text { font-size:13px; color:var(--text-2); }
.activity-time { font-size:11.5px; color:var(--faint); margin-top:2px; }

/* ═════════ MODAL OYNA ═════════ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,42,51,.5);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    z-index: 2000; display: flex;
    align-items: center; justify-content: center; padding: 16px;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.modal-overlay.active { opacity:1; visibility:visible; }
.modal {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px -12px rgba(15,42,51,.4);
    width: 100%; max-width: 520px; max-height: 90vh;
    overflow-y: auto; transform: translateY(8px) scale(.98);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.active .modal { transform: none; }
.modal-header {
    padding: 16px 20px; border-bottom: var(--border);
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.modal-title { font-size:16px; font-weight:600; }
.modal-close {
    background: none; border: none; font-size: 22px;
    cursor: pointer; color: var(--faint); width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; transition: var(--transition);
}
.modal-close:hover { background:var(--danger-light); color:var(--danger); }
.modal-body   { padding: 20px; }
.modal-footer { padding:16px 20px; border-top:var(--border); display:flex; justify-content:flex-end; gap:10px; background: var(--surface-2); }

/* ═════════ OGOHLANTIRISHLAR ═════════ */
.alert {
    padding: 12px 16px; border-radius: 10px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px; font-size: 14px;
    border: 1px solid transparent;
}
.alert-success { background:var(--success-light); color:#146446; border-color:#bfe5d3; }
.alert-danger  { background:var(--danger-light);  color:#9b2c2c; border-color:#f3c9c9; }
.alert-warning { background:var(--warning-light); color:#7a5500; border-color:#f3dd9f; }
.alert-info    { background:var(--primary-light); color:var(--primary-dark); border-color:var(--primary-soft); }

/* ═════════ TABLAR ═════════ */
.tabs {
    display: flex; border-bottom: 1px solid var(--line);
    margin-bottom: 20px; overflow-x: auto; gap: 4px;
    -webkit-overflow-scrolling: touch;
}
.tab-btn {
    padding: 11px 16px; border: none; background: none;
    color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 500;
    white-space: nowrap; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color .15s ease, border-color .15s ease;
    display: flex; align-items: center; gap: 7px; font-family: inherit;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight: 600; }
.tab-content          { display: none; }
.tab-content.active   { display: block; }

/* ═════════ NISHONLAR (BADGE) ═════════ */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.badge-success { background:var(--success-light); color:#146446; }
.badge-warning { background:var(--warning-light); color:#7a5500; }
.badge-danger  { background:var(--danger-light);  color:#9b2c2c; }
.badge-info    { background:var(--info-light);    color:#1f4f82; }
.badge-primary { background:var(--primary-light); color:var(--primary-dark); }

/* Qabul holatlari */
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.status-badge::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.85; }
.status-scheduled { background:var(--info-light);    color:var(--info); }
.status-confirmed  { background:var(--success-light); color:var(--success); }
.status-completed  { background:#eeeaf8; color:#5b43a8; }
.status-cancelled  { background:var(--danger-light);  color:var(--danger);  }
.status-no_show    { background:var(--warning-light); color:#a86b00; }
.status-pending    { background:#fdeee3; color:#b4531a; }

/* ═════════ SAHIFALASH ═════════ */
.pagination {
    display: flex; justify-content: flex-end;
    gap: 6px; margin-top: 20px; flex-wrap: wrap;
}
.page-btn {
    min-width: 36px; height: 36px; padding: 0 10px;
    border-radius: 10px; border: var(--border); background: var(--surface);
    color: var(--text-2); cursor: pointer; font-size: 13px;
    transition: var(--transition);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-variant-numeric: tabular-nums;
}
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ═════════ BO'SH HOLAT ═════════ */
.empty-state { text-align:center; padding:52px 20px; color:var(--muted); }
.empty-state i {
    font-size:26px; margin: 0 auto 14px; color:var(--primary);
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--primary-light);
    display:flex; align-items:center; justify-content:center;
}

/* ═════════ TOAST XABARLAR ═════════ */
.toast-container {
    position: fixed; top: 74px; right: 20px;
    z-index: 9999; display: flex; flex-direction: column; gap: 10px;
}
.toast {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px; border-radius: 12px;
    box-shadow: var(--shadow-lg); font-size: 14px;
    font-weight: 500; min-width: 260px;
    animation: slideInRight .3s cubic-bezier(.2,.8,.2,1);
}
.toast-success { background:var(--success); color:#fff; }
.toast-error   { background:var(--danger);  color:#fff; }
.toast-info    { background:var(--ink);     color:#fff; }
.toast-warning { background:var(--warning); color:#3a2a00; }

@keyframes slideInRight {
    from { transform:translateX(110%); opacity:0; }
    to   { transform:translateX(0);    opacity:1; }
}

/* ═════════ YUKLANISH ═════════ */
.loading {
    display: inline-block; width: 20px; height: 20px;
    border: 2px solid var(--line); border-top-color: var(--primary);
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═════════ CHOP ETISH ═════════ */
@media print {
    .sidebar, .header, .btn { display:none !important; }
    .main-content { margin-left:0 !important; }
    body { background: #fff; }
    .card, .stat-card { box-shadow: none; }
}

/* ═════════ HARAKATNI KAMAYTIRISH ═════════
   Tizim sozlamasida "animatsiyani kamaytirish" yoqilgan bo'lsa */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════
   4. MOSLASHUVCHANLIK
   ════════════════════════════════════════ */

/* Katta planshet */
@media (max-width:1200px) {
    .stats-grid    { grid-template-columns:repeat(2,1fr); }
    .patients-grid { grid-template-columns:repeat(2,1fr); }
}

/* Planshet */
@media (max-width:992px) {
    .form-row      { grid-template-columns:1fr 1fr; }
    .dashboard-cols { grid-template-columns:1fr !important; }
}

/* Kichik planshet / Telefon */
@media (max-width:768px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed; z-index: 1001;
        box-shadow: var(--shadow-lg);
        width: min(280px, 84vw);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .main-content { margin-left: 0 !important; }

    .header-brand { display: block; }
    .header       { padding: 0 12px; }
    .content      { padding: 14px; }

    .stats-grid    { grid-template-columns:1fr 1fr; gap:10px; }
    .stat-card     { padding:14px; }
    .stat-info .value { font-size:18px; }

    .patients-grid { grid-template-columns:1fr; }
    .form-row      { grid-template-columns:1fr; }
    .form-row-2    { grid-template-columns:1fr; }

    .card-header   { flex-direction:column; align-items:flex-start; }
    .card-header > * { width:100%; }

    .calendar-header { flex-direction:column; align-items:flex-start; }
    .calendar-title  { min-width:auto; }
    .days-container  { min-width:480px; }

    .modal { max-height:95vh; }

    /* Telefonda maydonlar 16px — iOS avtomatik kattalashtirmasligi uchun */
    .form-control, .header-search-box input { font-size: 16px; }
}

/* Kichik telefon */
@media (max-width:480px) {
    .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .stat-card  {
        padding: 12px; flex-direction: column;
        align-items: flex-start; gap: 8px;
    }
    .stat-info .value { font-size:16px; }
    .stat-info h3     { font-size:11.5px; }
    .stat-icon        { width:38px; height:38px; font-size:16px; border-radius: 10px; }

    .card-body { padding:14px;   }
    .btn       { font-size:13px; padding:8px 12px; }

    .header-search-box { width:280px; right:-40px; }
}

/* ════════════════════════════════════════════════════════════════
   4b. YANGI IMKONIYATLAR
   ════════════════════════════════════════════════════════════════ */

/* ═════════ TELEFON: PASTKI MENYU ═════════ */
.bottom-nav { display: none; }
@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px -12px rgba(15,42,51,.25);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around; align-items: flex-end;
    }
    .bn-item {
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 2px 4px; border: 0; background: none; cursor: pointer;
        color: var(--muted); text-decoration: none;
        font-size: 11px; font-weight: 500; font-family: inherit;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent;
    }
    .bn-item i { font-size: 18px; height: 22px; display: flex; align-items: center; }
    .bn-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .bn-item.active { color: var(--primary); }
    .bn-item.active i { transform: translateY(-1px); }
    .bn-item:active { background: var(--primary-light); }
    .bn-fab i {
        width: 46px; height: 46px; margin-top: -22px;
        border-radius: 15px 15px 15px 5px;
        background: var(--primary); color: #fff; font-size: 18px;
        justify-content: center;
        box-shadow: 0 8px 18px -6px rgb(var(--primary-rgb) / .7), 0 0 0 4px var(--surface);
    }
    .bn-fab.active i { transform: none; }
    .bn-fab span { color: var(--text-2); }

    body:has(.bottom-nav) .content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    body:has(.bottom-nav) .toast-container { top: auto; bottom: 90px; right: 12px; left: 12px; }
}

/* ═════════ TISH XARITASI (odontogramma) ═════════ */
.odo {
    --t-healthy-fill: var(--surface);      --t-healthy-line: var(--line-strong);
    --t-caries-fill:  #f7d7d2;             --t-caries-line:  #c9483b;
    --t-filled-fill:  #d6e5f6;             --t-filled-line:  #2f6fb3;
    --t-treated-fill: var(--primary-soft); --t-treated-line: var(--primary);
    --t-missing-fill: transparent;         --t-missing-line: var(--faint);
    --t-other-fill:   #e6ddf8;             --t-other-line:   #6b4fc4;
}
html[data-theme="dark"] .odo {
    --t-caries-fill: #4a2322; --t-filled-fill: #1d3550; --t-other-fill: #2f2550;
    --t-caries-line: #ef7b6f; --t-filled-line: #6aa7e6; --t-other-line: #a58ef0;
}
.odo-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:14px; }
.odo-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-2); }
.odo-legend-item i, .odo-chip i {
    width:12px; height:12px; border-radius:4px;
    background: var(--fill); border: 1.5px solid var(--line-c);
}
.odo-legend-item b { font-weight:700; color:var(--text); font-variant-numeric: tabular-nums; }
.s-healthy { --fill: var(--t-healthy-fill); --line-c: var(--t-healthy-line); }
.s-caries  { --fill: var(--t-caries-fill);  --line-c: var(--t-caries-line); }
.s-filled  { --fill: var(--t-filled-fill);  --line-c: var(--t-filled-line); }
.s-treated { --fill: var(--t-treated-fill); --line-c: var(--t-treated-line); }
.s-missing { --fill: var(--t-missing-fill); --line-c: var(--t-missing-line); }
.s-other   { --fill: var(--t-other-fill);   --line-c: var(--t-other-line); }
.odo-legend-item.s-missing i, .odo-chip.s-missing i { border-style: dashed; }

.odo-layout { display:grid; grid-template-columns: minmax(0,1fr); gap:16px; align-items:start; }
.odo.panel-open .odo-layout { grid-template-columns: minmax(0,1fr) 300px; }

.odo-chart {
    background: var(--surface-2);
    border: var(--border); border-radius: var(--radius);
    padding: 18px 12px 12px;
    overflow-x: auto;
}
.odo-jaw { display:flex; justify-content:center; min-width: 440px; }
.odo-upper { padding-bottom: 10px; border-bottom: 1px dashed var(--line-strong); margin-bottom: 10px; }
.odo-side { display:flex; gap:2px; flex: 1 1 0; min-width: 0; justify-content: center; }
.odo-side:first-child { padding-right: 8px; border-right: 1px dashed var(--line-strong); margin-right: 8px; }

.odo .tooth {
    position: relative;
    flex: 1 1 0; min-width: 0; max-width: 40px; padding: 2px 0;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:0; cursor:pointer; border-radius: 8px;
    color: var(--muted); font-family: inherit;
    transition: background-color .12s ease;
}
.odo .tooth svg { width: 100%; max-width: 32px; height: auto; aspect-ratio: 44 / 68; overflow: visible; }
.odo .tooth .t-crown { fill: var(--fill); stroke: var(--line-c); stroke-width: 1.8; transition: fill .15s ease; }
.odo .tooth .t-root  { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.4; }
.odo .tooth .t-x     { stroke: var(--faint); stroke-width: 2; stroke-linecap: round; display: none; }
.odo .tooth.s-missing .t-crown { stroke-dasharray: 3 3; }
.odo .tooth.s-missing .t-root  { opacity: .35; }
.odo .tooth.s-missing .t-x     { display: block; }
.odo .tooth .tn { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.odo .tooth.has-hist::after {
    content:''; position:absolute; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%; background: var(--primary);
}
.odo-upper .tooth.has-hist::after { bottom: -5px; }
.odo-lower .tooth.has-hist::after { top: -5px; }
.odo .tooth:hover { background: var(--surface); }
.odo .tooth:hover .tn { color: var(--text); }
.odo .tooth.selected { background: var(--surface); box-shadow: 0 0 0 2px var(--primary); }
.odo .tooth.selected .tn { color: var(--primary); }
.odo .tooth:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.odo-hint { text-align:center; font-size:12px; color:var(--faint); margin-top:12px; }

.odo-panel {
    background: var(--surface); border: var(--border); border-radius: var(--radius);
    padding: 16px; box-shadow: var(--shadow);
    position: sticky; top: calc(var(--header-height) + 16px);
    animation: dropIn .18s ease-out;
}
.odo-panel[hidden] { display: none; }
.odo-panel-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.odo-panel-num {
    width:44px; height:44px; flex-shrink:0;
    border-radius: 12px 12px 12px 4px;
    background: var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; font-weight:700; font-variant-numeric: tabular-nums;
}
.odo-panel-title { font-weight:600; font-size:14px; line-height:1.3; }
.odo-panel-sub { font-size:12px; color:var(--faint); }
.odo-close {
    margin-left:auto; align-self:flex-start;
    width:30px; height:30px; border-radius:8px; border:0; background:none;
    color:var(--faint); cursor:pointer;
}
.odo-close:hover { background: var(--surface-2); color: var(--text); }
.odo-status-group { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.odo-chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:999px;
    border:1px solid var(--line-strong); background: var(--surface);
    font-size:12.5px; font-weight:500; color: var(--text-2);
    cursor:pointer; font-family: inherit;
}
.odo-chip:hover:not(:disabled) { border-color: var(--line-c); }
.odo-chip.active { border-color: var(--line-c); background: var(--fill); color: var(--text); font-weight:600; box-shadow: 0 0 0 1px var(--line-c); }
.odo-chip.s-healthy.active { background: var(--surface-2); }
.odo-chip:disabled { cursor: default; opacity: .7; }
.odo-chip:disabled.active { opacity: 1; }
.odo-notes { margin-bottom:10px; min-height: 60px !important; }
.odo-notes-ro:not(:empty) { font-size:13px; color:var(--text-2); background:var(--surface-2); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.odo-save { width:100%; }
.odo-hist-title { font-size:12.5px; font-weight:600; color:var(--muted); margin:16px 0 8px; }
.odo-hist { display:flex; flex-direction:column; gap:8px; max-height: 320px; overflow-y:auto; }
.odo-hist-item { border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: 0 8px 8px 0; padding: 8px 10px; }
.odo-hist-item.xray { border-left-color: var(--info); }
.odo-hist-top { display:flex; justify-content:space-between; gap:8px; font-size:13px; font-weight:600; }
.odo-hist-top time { font-weight:500; color:var(--faint); font-size:12px; font-variant-numeric: tabular-nums; white-space:nowrap; }
.odo-hist-top i { color: var(--muted); margin-right: 3px; }
.odo-hist-meta, .odo-hist-note { font-size:12.5px; color:var(--muted); margin-top:2px; }
.odo-hist-link { font-size:12.5px; display:inline-flex; gap:5px; align-items:center; margin-top:4px; text-decoration:none; }
.odo-hist-empty { font-size:13px; color:var(--faint); padding: 6px 0; }

@media (max-width: 1100px) {
    .odo.panel-open .odo-layout { grid-template-columns: minmax(0,1fr); }
    .odo-panel { position: static; }
}

/* ═════════ VAQT CHIZIG'I ═════════ */
.tl-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.tl-filter {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:999px; border:1px solid var(--line-strong);
    background: var(--surface); color: var(--text-2);
    font-size:13px; font-weight:500; cursor:pointer; font-family: inherit;
}
.tl-filter span { font-size:11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tl-filter:hover { border-color: var(--primary); color: var(--primary); }
.tl-filter.active { background: var(--ink); border-color: var(--ink); color:#fff; }
.tl-filter.active span { color: rgba(255,255,255,.65); }
html[data-theme="dark"] .tl-filter.active { background: var(--primary); border-color: var(--primary); }

.tl { position: relative; }
.tl-month {
    position: sticky; top: calc(var(--header-height) + 4px); z-index: 2;
    display: inline-block; margin: 6px 0 10px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--surface-2); border: var(--border);
    font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.tl-month[hidden], .tl-item[hidden] { display: none; }
.tl-item { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding-bottom: 16px; }
.tl-item:last-child::before { display: none; }
.tl-item::before {
    content:''; position:absolute; left:16px; top:34px; bottom:0; width:2px;
    background: var(--line);
}
.tl-dot {
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; position: relative; z-index: 1;
    background: var(--surface-2); color: var(--muted);
    box-shadow: 0 0 0 4px var(--surface);
}
.tl-treatment   .tl-dot { background: var(--primary-light); color: var(--primary); }
.tl-payment     .tl-dot { background: var(--success-light); color: var(--success); }
.tl-appointment .tl-dot { background: var(--info-light);    color: var(--info); }
.tl-xray        .tl-dot { background: #e9e4f7; color: #5b43a8; }
.tl-photo       .tl-dot { background: #fbe7ef; color: #b83268; }
html[data-theme="dark"] .tl-xray  .tl-dot { background:#262040; color:#b9a8f5; }
html[data-theme="dark"] .tl-photo .tl-dot { background:#3a1a28; color:#f29bbd; }
.tl-appointment.st-cancelled .tl-dot, .tl-appointment.st-no_show .tl-dot { background: var(--danger-light); color: var(--danger); }

.tl-body {
    background: var(--surface); border: var(--border); border-radius: var(--radius);
    padding: 10px 14px; min-width: 0;
}
.tl-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.tl-title { font-weight:600; font-size:14px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.tl-top time { font-size:12px; color: var(--faint); white-space:nowrap; font-variant-numeric: tabular-nums; }
.tl-meta  { font-size:12.5px; color: var(--muted); margin-top:2px; }
.tl-extra { font-size:12.5px; color: var(--text-2); margin-top:4px; }
.tl-payment .tl-title { color: var(--success); }
.tl-thumb { display:inline-block; margin-top:8px; border-radius:8px; overflow:hidden; border: var(--border); }
.tl-thumb img { display:block; width: 120px; height: 84px; object-fit: cover; }

/* ═════════ OLDIN / KEYIN ═════════ */
.ba {
    border: var(--border); border-radius: var(--radius);
    background: var(--surface-2); padding: 14px; margin-bottom: 18px;
}
.ba-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ba-title { font-weight:600; font-size:14.5px; display:flex; gap:8px; align-items:center; }
.ba-title i { color: var(--primary); }
.ba-selects { display:flex; gap:10px; flex-wrap:wrap; }
.ba-selects label { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:500; }
.ba-selects select { width:auto; min-width: 150px; padding: 6px 10px; font-size: 13px; }
.ba-stage {
    position: relative; overflow: hidden; border-radius: 10px;
    background: #0b1417; aspect-ratio: 4 / 3; max-height: 460px;
    user-select: none; touch-action: pan-y; cursor: ew-resize;
    margin-inline: auto;
}
.ba-img { position:absolute; inset:0; width:100%; height:100%; object-fit: contain; pointer-events:none; }
.ba-clip { position:absolute; inset:0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle {
    position:absolute; top:0; bottom:0; left: var(--pos); width:2px; margin-left:-1px;
    background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events:none;
}
.ba-handle span {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:38px; height:38px; border-radius:50%;
    background:#fff; color: var(--ink);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.ba-tag {
    position:absolute; top:10px; padding:3px 10px; border-radius:999px;
    background: rgba(8,21,26,.65); color:#fff; font-size:12px; font-weight:600;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events:none;
}
.ba-tag-l { left:10px; } .ba-tag-r { right:10px; }
.ba-range { position:absolute; left:0; right:0; bottom:0; width:100%; opacity:0; height: 36px; cursor: ew-resize; }
.ba-range:focus-visible + * , .ba-stage:focus-within .ba-handle span { box-shadow: 0 0 0 3px var(--primary), 0 4px 14px rgba(0,0,0,.3); }
.ba-note { font-size:13px; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; display:flex; gap:8px; align-items:center; }

/* ═════════ KALENDAR: SURIB KO'CHIRISH ═════════ */
.cal-appt.is-draggable { cursor: grab; touch-action: manipulation; }
body.cal-dragging, body.cal-dragging * { cursor: grabbing !important; user-select: none !important; }
.cal-appt.drag-source { opacity: .35; filter: grayscale(.4); }
.cal-drop-preview {
    position: absolute; left: 3px; right: 5px; z-index: 30;
    border-radius: 8px; padding: 4px 7px;
    background: rgb(var(--primary-rgb) / .14);
    border: 2px dashed var(--primary);
    color: var(--primary-dark); font-size: 11px; font-weight: 700;
    display:flex; flex-direction:column; gap:1px; pointer-events:none;
    box-shadow: 0 6px 18px -8px rgb(var(--primary-rgb) / .6);
}
html[data-theme="dark"] .cal-drop-preview { color: #9fe3df; }
.cal-drop-preview .cdp-time { font-variant-numeric: tabular-nums; font-size: 12px; }
.cal-drop-preview .cdp-name { font-weight: 500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-drop-preview.is-same { opacity: .5; border-style: dotted; }

.cd-confirm {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(15,42,51,.45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    display:flex; align-items:center; justify-content:center; padding:16px;
    animation: fadeIn .15s ease-out;
}
.cd-card {
    width: 100%; max-width: 380px;
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px -12px rgba(15,42,51,.45);
    overflow: hidden; animation: dropIn .18s ease-out;
}
.cd-title { padding: 16px 18px 4px; font-weight:700; font-size:16px; }
.cd-body { padding: 8px 18px 16px; }
.cd-name { font-weight:600; margin-bottom:10px; color: var(--text-2); }
.cd-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top: var(--border); font-size:13.5px; }
.cd-row span { color: var(--muted); }
.cd-row b { font-variant-numeric: tabular-nums; }
.cd-new b { color: var(--primary); }
.cd-hint { font-size:12px; color: var(--faint); margin-top: 8px; }
.cd-actions { display:flex; justify-content:flex-end; gap:8px; padding: 12px 18px; background: var(--surface-2); border-top: var(--border); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ═════════ TELEFON: gorizontal siljishni oldini olish ═════════
   Grid ichidagi bloklar kontentga qarab kengayib, sahifani ekrandan
   chiqarib yubormasligi uchun */
@media (max-width:768px) {
    .content [style*="grid-template-columns"] > *,
    .content [class*="grid"] > * { min-width: 0; }
    .content .tabs { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   5. SAHIFALARGA XOS USLUBLAR
   Har bir blok faqat o'z sahifasida ishlaydi: :where(.page-<nom>)
   (:where() tanlovchi og'irligini oshirmaydi — eski ustuvorlik saqlanadi)
   ════════════════════════════════════════════════════════════════ */

/* ─────────── add_doctor.php  →  .page-add_doctor ─────────── */
/* ===== RESPONSIVE ADD DOCTOR PAGE ===== */

:where(.page-add_doctor) .add-container {
    width: 100%;
    padding: 15px;
    max-width: 600px;
    margin: 0 auto;
}

:where(.page-add_doctor) .add-card {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

:where(.page-add_doctor) .add-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 25px 20px;
    text-align: center;
}

:where(.page-add_doctor) .add-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 28px;
}

:where(.page-add_doctor) .add-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

:where(.page-add_doctor) .add-body {
    padding: 20px;
}

:where(.page-add_doctor) .form-group {
    margin-bottom: 20px;
}

:where(.page-add_doctor) .form-label {
    display: block;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 8px;
    font-size: 14px;
}

:where(.page-add_doctor) .form-label i {
    margin-right: 8px;
    color: var(--primary);
}

:where(.page-add_doctor) .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--line);
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s;
    box-sizing: border-box;
}

:where(.page-add_doctor) .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.1);
}

:where(.page-add_doctor) .color-picker {
    width: 60px;
    height: 45px;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid var(--line);
    transition: all 0.2s;
}

:where(.page-add_doctor) .color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

:where(.page-add_doctor) .color-option {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
}

:where(.page-add_doctor) .color-option.active {
    border-color: white;
    box-shadow: 0 0 0 2px #333;
}

:where(.page-add_doctor) .form-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
}

:where(.page-add_doctor) .btn {
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    width: 100%;
}

:where(.page-add_doctor) .btn-cancel {
    background: #f0f0f0;
    color: var(--muted);
    order: 2;
}

:where(.page-add_doctor) .btn-submit {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(79,172,254,0.3);
    order: 1;
}

:where(.page-add_doctor) .alert {
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

:where(.page-add_doctor) .alert-danger {
    background: #ffebee;
    border-left: 4px solid #e74c3c;
    color: #c62828;
}

:where(.page-add_doctor) .required {
    color: #e74c3c;
}

:where(.page-add_doctor) .phone-hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 5px;
}

/* ===== TABLET BREAKPOINT (768px and up) ===== */
@media (min-width: 768px) {
    :where(.page-add_doctor) .add-container {
        padding: 30px 20px;
        margin-top: 20px;
    }
    
    :where(.page-add_doctor) .add-header {
        padding: 30px;
    }
    
    :where(.page-add_doctor) .add-icon {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }
    
    :where(.page-add_doctor) .add-title {
        font-size: 24px;
    }
    
    :where(.page-add_doctor) .add-body {
        padding: 30px;
    }
    
    :where(.page-add_doctor) .form-actions {
        flex-direction: row;
        gap: 15px;
    }
    
    :where(.page-add_doctor) .btn {
        width: auto;
        flex: 1;
    }
    
    :where(.page-add_doctor) .btn-cancel {
        order: 1;
    }
    
    :where(.page-add_doctor) .btn-submit {
        order: 2;
    }
}

/* ===== DESKTOP BREAKPOINT (1024px and up) ===== */
@media (min-width: 1024px) {
    :where(.page-add_doctor) .add-container {
        margin-top: 40px;
    }
    
    :where(.page-add_doctor) .add-card {
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    :where(.page-add_doctor) .btn {
        padding: 16px 24px;
    }
    
    :where(.page-add_doctor) .form-control {
        font-size: 16px;
    }
    
    :where(.page-add_doctor) .color-option {
        width: 44px;
        height: 44px;
    }
}

/* ─────────── edit_doctor.php  →  .page-edit_doctor ─────────── */
/* ===== RESPONSIVE EDIT DOCTOR PAGE ===== */

:where(.page-edit_doctor) .edit-container {
    width: 100%;
    padding: 15px;
    max-width: 600px;
    margin: 0 auto;
}

:where(.page-edit_doctor) .edit-card {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

:where(.page-edit_doctor) .edit-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 25px 20px;
    text-align: center;
}

:where(.page-edit_doctor) .edit-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 28px;
}

:where(.page-edit_doctor) .edit-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

:where(.page-edit_doctor) .edit-body {
    padding: 20px;
}

:where(.page-edit_doctor) .form-group {
    margin-bottom: 20px;
}

:where(.page-edit_doctor) .form-label {
    display: block;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 8px;
    font-size: 14px;
}

:where(.page-edit_doctor) .form-label i {
    margin-right: 8px;
    color: #f5576c;
}

:where(.page-edit_doctor) .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--line);
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s;
    box-sizing: border-box;
}

:where(.page-edit_doctor) .form-control:focus {
    outline: none;
    border-color: #f5576c;
    box-shadow: 0 0 0 3px rgba(245,87,108,0.1);
}

:where(.page-edit_doctor) .color-picker {
    width: 60px;
    height: 45px;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid var(--line);
    transition: all 0.2s;
}

:where(.page-edit_doctor) .color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

:where(.page-edit_doctor) .color-option {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
}

:where(.page-edit_doctor) .color-option.active {
    border-color: white;
    box-shadow: 0 0 0 2px #333;
}

:where(.page-edit_doctor) .form-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
}

:where(.page-edit_doctor) .btn {
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    width: 100%;
}

:where(.page-edit_doctor) .btn-cancel {
    background: #f0f0f0;
    color: var(--muted);
    order: 2;
}

:where(.page-edit_doctor) .btn-submit {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(245,87,108,0.3);
    order: 1;
}

:where(.page-edit_doctor) .alert {
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

:where(.page-edit_doctor) .alert-danger {
    background: #ffebee;
    border-left: 4px solid #e74c3c;
    color: #c62828;
}

:where(.page-edit_doctor) .required {
    color: #e74c3c;
}

/* ===== TABLET BREAKPOINT (768px and up) ===== */
@media (min-width: 768px) {
    :where(.page-edit_doctor) .edit-container {
        padding: 30px 20px;
        margin-top: 20px;
    }
    
    :where(.page-edit_doctor) .edit-header {
        padding: 30px;
    }
    
    :where(.page-edit_doctor) .edit-icon {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }
    
    :where(.page-edit_doctor) .edit-title {
        font-size: 24px;
    }
    
    :where(.page-edit_doctor) .edit-body {
        padding: 30px;
    }
    
    :where(.page-edit_doctor) .form-actions {
        flex-direction: row;
        gap: 15px;
    }
    
    :where(.page-edit_doctor) .btn {
        width: auto;
        flex: 1;
    }
    
    :where(.page-edit_doctor) .btn-cancel {
        order: 1;
    }
    
    :where(.page-edit_doctor) .btn-submit {
        order: 2;
    }
}

/* ===== DESKTOP BREAKPOINT (1024px and up) ===== */
@media (min-width: 1024px) {
    :where(.page-edit_doctor) .edit-container {
        margin-top: 40px;
    }
    
    :where(.page-edit_doctor) .edit-card {
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    :where(.page-edit_doctor) .btn {
        padding: 16px 24px;
    }
    
    :where(.page-edit_doctor) .form-control {
        font-size: 16px;
    }
    
    :where(.page-edit_doctor) .color-option {
        width: 44px;
        height: 44px;
    }
}

/* ─────────── delete_doctor.php  →  .page-delete_doctor ─────────── */
/* ===== RESPONSIVE DELETE DOCTOR PAGE ===== */

:where(.page-delete_doctor) .delete-container {
    width: 100%;
    padding: 15px;
    max-width: 600px;
    margin: 0 auto;
}

:where(.page-delete_doctor) .delete-card {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

:where(.page-delete_doctor) .delete-header {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    padding: 25px 20px;
    text-align: center;
}

:where(.page-delete_doctor) .delete-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 28px;
}

:where(.page-delete_doctor) .delete-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

:where(.page-delete_doctor) .delete-body {
    padding: 20px;
}

:where(.page-delete_doctor) .doctor-info {
    background: var(--surface-2);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

:where(.page-delete_doctor) .doctor-avatar-large {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

:where(.page-delete_doctor) .doctor-details h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: var(--text);
}

:where(.page-delete_doctor) .doctor-details p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

:where(.page-delete_doctor) .linked-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

:where(.page-delete_doctor) .stat-item {
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
}

:where(.page-delete_doctor) .stat-number {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    display: block;
}

:where(.page-delete_doctor) .stat-label {
    font-size: 11px;
    color: var(--muted);
    margin-top: 5px;
}

:where(.page-delete_doctor) .stat-item.has-data {
    border-color: #f39c12;
    background: #fff3e0;
}

:where(.page-delete_doctor) .stat-item.has-data .stat-number {
    color: #e65100;
}

:where(.page-delete_doctor) .warning-box {
    background: #fff3e0;
    border-left: 4px solid #f57c00;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

:where(.page-delete_doctor) .warning-box.danger {
    background: #ffebee;
    border-left-color: #e74c3c;
}

:where(.page-delete_doctor) .warning-title {
    font-weight: 600;
    color: #e65100;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

:where(.page-delete_doctor) .warning-box.danger .warning-title {
    color: #c62828;
}

:where(.page-delete_doctor) .warning-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
}

:where(.page-delete_doctor) .warning-list li {
    margin-bottom: 5px;
}

:where(.page-delete_doctor) .delete-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
}

:where(.page-delete_doctor) .btn {
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    width: 100%;
}

:where(.page-delete_doctor) .btn-cancel {
    background: #f0f0f0;
    color: var(--muted);
    order: 2;
}

:where(.page-delete_doctor) .btn-delete {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
    order: 1;
}

:where(.page-delete_doctor) .btn-disable {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(243,156,18,0.3);
    order: 1;
}

:where(.page-delete_doctor) .alert {
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

:where(.page-delete_doctor) .alert-danger {
    background: #ffebee;
    border-left: 4px solid #e74c3c;
    color: #c62828;
}

/* ===== TABLET BREAKPOINT (768px and up) ===== */
@media (min-width: 768px) {
    :where(.page-delete_doctor) .delete-container {
        padding: 30px 20px;
        margin-top: 20px;
    }
    
    :where(.page-delete_doctor) .delete-header {
        padding: 30px;
    }
    
    :where(.page-delete_doctor) .delete-icon {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }
    
    :where(.page-delete_doctor) .delete-title {
        font-size: 24px;
    }
    
    :where(.page-delete_doctor) .delete-body {
        padding: 30px;
    }
    
    :where(.page-delete_doctor) .doctor-info {
        padding: 20px;
    }
    
    :where(.page-delete_doctor) .doctor-avatar-large {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    :where(.page-delete_doctor) .doctor-details h3 {
        font-size: 18px;
    }
    
    :where(.page-delete_doctor) .doctor-details p {
        font-size: 14px;
    }
    
    :where(.page-delete_doctor) .stat-item {
        padding: 15px;
    }
    
    :where(.page-delete_doctor) .stat-number {
        font-size: 24px;
    }
    
    :where(.page-delete_doctor) .stat-label {
        font-size: 12px;
    }
    
    :where(.page-delete_doctor) .warning-title {
        font-size: 15px;
    }
    
    :where(.page-delete_doctor) .warning-list {
        font-size: 14px;
    }
    
    :where(.page-delete_doctor) .delete-actions {
        flex-direction: row;
        gap: 15px;
    }
    
    :where(.page-delete_doctor) .btn {
        width: auto;
        flex: 1;
    }
    
    :where(.page-delete_doctor) .btn-cancel {
        order: 1;
    }
}

/* ===== DESKTOP BREAKPOINT (1024px and up) ===== */
@media (min-width: 1024px) {
    :where(.page-delete_doctor) .delete-container {
        margin-top: 40px;
    }
    
    :where(.page-delete_doctor) .delete-card {
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    :where(.page-delete_doctor) .btn {
        padding: 16px 24px;
    }
    
    :where(.page-delete_doctor) .stat-item {
        padding: 15px 5px;
    }
}

/* ─────────── doctors.php  →  .page-doctors ─────────── */
/* ===== RESPONSIVE STYLES ===== */

/* Asosiy reset */
:where(.page-doctors) * {
    box-sizing: border-box;
}

/* Mobil-first approach - default styles for mobile */
:where(.page-doctors) .doctors-container {
    width: 100%;
    padding: 10px;
}

:where(.page-doctors) .page-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    padding: 0 5px;
}

:where(.page-doctors) .page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

:where(.page-doctors) .page-subtitle {
    color: var(--muted);
    font-size: 13px;
    margin: 5px 0 0 0;
}

:where(.page-doctors) .add-btn {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(79,172,254,0.3);
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
}

:where(.page-doctors) .add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79,172,254,0.4);
    color: white;
}

/* Card styles */
:where(.page-doctors) .doctors-card {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: none;
    overflow: hidden;
}

:where(.page-doctors) .card-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

:where(.page-doctors) .card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

:where(.page-doctors) .count-badge {
    background: rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
}

/* Table styles - Mobile first */
:where(.page-doctors) .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

:where(.page-doctors) .doctors-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px; /* Minimum width for horizontal scroll on mobile */
}

:where(.page-doctors) .doctors-table th {
    background: var(--surface-2);
    padding: 12px 15px;
    font-weight: 600;
    color: var(--text-2);
    border-bottom: 2px solid var(--line);
    text-align: left;
    font-size: 13px;
    white-space: nowrap;
}

:where(.page-doctors) .doctors-table td {
    padding: 15px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-size: 14px;
}

/* Doctor info cell */
:where(.page-doctors) .doctor-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

:where(.page-doctors) .doctor-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}

:where(.page-doctors) .doctor-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 3px;
}

:where(.page-doctors) .doctor-specialty {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Status badge */
:where(.page-doctors) .status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

:where(.page-doctors) .status-active {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

:where(.page-doctors) .status-inactive {
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}

/* Stats badges */
:where(.page-doctors) .stat-badge {
    background: var(--surface-2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

:where(.page-doctors) .stat-badge.has-data {
    background: var(--primary-light);
    color: var(--primary);
}

/* Action buttons */
:where(.page-doctors) .actions-cell {
    text-align: center;
}

:where(.page-doctors) .action-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

:where(.page-doctors) .action-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 13px;
}

:where(.page-doctors) .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

:where(.page-doctors) .edit-btn {
    background: var(--primary-light);
    color: var(--primary);
}

:where(.page-doctors) .edit-btn:hover {
    background: var(--primary);
    color: white;
}

:where(.page-doctors) .toggle-btn {
    background: var(--surface-2);
    color: var(--muted);
}

:where(.page-doctors) .toggle-btn:hover {
    background: #666;
    color: white;
}

:where(.page-doctors) .delete-btn {
    background: #ffebee;
    color: #c62828;
}

:where(.page-doctors) .delete-btn:hover {
    background: #ef5350;
    color: white;
}

/* Phone link */
:where(.page-doctors) .phone-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

:where(.page-doctors) .phone-link i {
    font-size: 11px;
}

/* Empty state */
:where(.page-doctors) .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--faint);
}

:where(.page-doctors) .empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    display: block;
}

:where(.page-doctors) .empty-state p {
    margin: 0;
}

/* Alert styles */
:where(.page-doctors) .alert {
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

:where(.page-doctors) .alert-success {
    background: #f0f9f4;
    border-left: 4px solid #27ae60;
    color: #27ae60;
}

:where(.page-doctors) .alert-danger {
    background: #fdf2f2;
    border-left: 4px solid #e74c3c;
    color: #c62828;
}

/* ===== TABLET BREAKPOINT (768px and up) ===== */
@media (min-width: 768px) {
    :where(.page-doctors) .doctors-container {
        padding: 20px;
    }
    
    :where(.page-doctors) .page-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }
    
    :where(.page-doctors) .page-title {
        font-size: 26px;
    }
    
    :where(.page-doctors) .page-subtitle {
        font-size: 14px;
    }
    
    :where(.page-doctors) .add-btn {
        width: auto;
        padding: 12px 24px;
        font-size: 15px;
    }
    
    :where(.page-doctors) .card-header {
        padding: 20px 25px;
    }
    
    :where(.page-doctors) .card-title {
        font-size: 18px;
    }
    
    :where(.page-doctors) .doctors-table {
        min-width: auto;
    }
    
    :where(.page-doctors) .doctors-table th,
    :where(.page-doctors) .doctors-table td {
        padding: 18px 20px;
    }
    
    :where(.page-doctors) .doctor-avatar {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    
    :where(.page-doctors) .doctor-name {
        font-size: 15px;
    }
    
    :where(.page-doctors) .action-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ===== DESKTOP BREAKPOINT (1024px and up) ===== */
@media (min-width: 1024px) {
    :where(.page-doctors) .doctors-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 30px;
    }
    
    :where(.page-doctors) .page-title {
        font-size: 28px;
    }
    
    :where(.page-doctors) .doctors-table th {
        font-size: 14px;
    }
    
    :where(.page-doctors) .stat-badge {
        padding: 5px 12px;
        font-size: 13px;
    }
}

/* ===== LARGE DESKTOP (1440px and up) ===== */
@media (min-width: 1440px) {
    :where(.page-doctors) .doctors-container {
        max-width: 1600px;
    }
}

/* Mobile-specific optimizations */
@media (max-width: 767px) {
    :where(.page-doctors) .hide-mobile {
        display: none !important;
    }
    
    :where(.page-doctors) .doctors-table {
        font-size: 13px;
    }
    
    :where(.page-doctors) .doctor-specialty {
        font-size: 11px;
    }
    
    :where(.page-doctors) .status-indicator {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    :where(.page-doctors) .action-btn {
        width: 40px;
        height: 40px;
    }
    
    :where(.page-doctors) .action-btn:hover {
        transform: none;
    }
    
    :where(.page-doctors) .add-btn:hover {
        transform: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :where(.page-doctors) .doctors-card {
        background: #1e1e1e;
    }
    
    :where(.page-doctors) .doctors-table th {
        background: #2d2d2d;
        color: #e0e0e0;
        border-bottom-color: #444;
    }
    
    :where(.page-doctors) .doctors-table td {
        border-bottom-color: #333;
        color: #e0e0e0;
    }
    
    :where(.page-doctors) .doctor-name {
        color: #fff;
    }
    
    :where(.page-doctors) .page-title {
        color: #fff;
    }
    
    :where(.page-doctors) .page-subtitle {
        color: var(--muted);
    }
}

/* ─────────── calendar.php  →  .page-calendar ─────────── */
/* ── Asosiy jadval ── */
:where(.page-calendar) .cal-grid-wrap {
    display: flex;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 82vh;
    border-top: 1px solid #b0bcd8;
}
:where(.page-calendar) .cal-time-col {
    flex-shrink: 0;
    width: 66px;
    position: sticky;
    left: 0;
    background: #e8edf8;
    z-index: 10;
    border-right: 2px solid #8fa3cc;
}
:where(.page-calendar) .cal-time-col .th-spacer {
    height: 52px;
    border-bottom: 2px solid #8fa3cc;
    background: #dce4f5;
}
:where(.page-calendar) .cal-time-row {
    height: var(--pv-calendar-1);
    position: relative;
    box-sizing: border-box;
    border-bottom: 2px solid #8fa3cc;
    background: #e8edf8;
}
:where(.page-calendar) .cal-time-row .hl {
    position: absolute;
    top: -11px;
    right: 7px;
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 900;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
:where(.page-calendar) .cal-time-row .hhl {
    position: absolute;
    top: var(--pv-calendar-2);
    right: 7px;
    font-size: 12px;
    color: #3a5080;
    font-weight: 700;
    white-space: nowrap;
}
:where(.page-calendar) .cal-doc-col {
    flex: 1;
    min-width: 180px;
    border-right: 1.5px solid #8fa3cc;
}
:where(.page-calendar) .cal-doc-col:last-child { border-right: none; }

/* ── Ustun sarlavhasi (umumiy) ── */
:where(.page-calendar) .cal-col-header {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border-bottom: 2px solid #8fa3cc;
    position: sticky;
    top: 0;
    z-index: 5;
    overflow: hidden;
}

/* ── KUN UCHUN: shifokor rangi bo'yalgan ustun sarlavhasi ── */
:where(.page-calendar) .cal-col-header-doctor {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border-bottom: 3px solid transparent;
    position: sticky;
    top: 0;
    z-index: 5;
    overflow: hidden;
}
:where(.page-calendar) .cal-col-header-doctor .doc-name-text {
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── KUN UCHUN: shifokor rangi bo'yalgan ustun tanasi ── */
:where(.page-calendar) .cal-doc-col-body-tinted {
    position: relative;
    height: var(--pv-calendar-3);
}

/* ── Haftalik ustun sarlavhasi ── */
:where(.page-calendar) .cal-week-dh {
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #8fa3cc;
    background: linear-gradient(180deg, #d8e4f8 0%, #c4d4f0 100%);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: sticky;
    top: 0;
    z-index: 5;
    transition: background 0.15s;
}
:where(.page-calendar) .cal-week-dh:hover { background: linear-gradient(180deg,#c0d4f8,#a8c0f0); }
:where(.page-calendar) .cal-week-dh.is-today {
    background: linear-gradient(135deg, var(--primary) 0%, #1044b8 100%);
    border-bottom-color: #0c34a0;
}
:where(.page-calendar) .cal-week-dh .dn {
    font-size: 12px;
    color: #2a4070;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
:where(.page-calendar) .cal-week-dh .dd {
    font-size: 22px;
    font-weight: 900;
    color: #0e1e40;
    line-height: 1.1;
}
:where(.page-calendar) .cal-week-dh.is-today .dn { color: rgba(255,255,255,0.92); }
:where(.page-calendar) .cal-week-dh.is-today .dd { color: #fff; }

/* ── Jadval tanasi ── */
:where(.page-calendar) .cal-col-body {
    position: relative;
    height: var(--pv-calendar-4);
}

/* ── Chiziqlar ── */
:where(.page-calendar) .cal-hline-hour {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 1.5px solid #90a8c8;
    pointer-events: none;
    z-index: 1;
}
:where(.page-calendar) .cal-hline-half {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 1px dashed #b8cce0;
    pointer-events: none;
    z-index: 1;
}
:where(.page-calendar) .cal-hline {
    position: absolute;
    left: 0; right: 0;
    box-sizing: border-box;
    border-bottom: 1.5px solid #a8bcd8;
    pointer-events: none;
    z-index: 1;
}
:where(.page-calendar) .cal-hline::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: var(--pv-calendar-5);
    border-top: 1px dashed #c8d8ec;
}

/* ── Bo'sh slot ── */
:where(.page-calendar) .cal-slot {
    position: absolute;
    left: 0; right: 0;
    cursor: pointer;
    z-index: 2;
    transition: background 0.12s;
    pointer-events: auto;
}
:where(.page-calendar) .cal-slot:hover {
    background: rgb(var(--primary-rgb) / 0.12) !important;
}
:where(.page-calendar) .cal-slot:hover::after {
    content: "var(--pv-calendar-6)";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 900;
    color: #1044b8;
    white-space: nowrap;
    pointer-events: none;
    background: rgba(255,255,255,0.92);
    padding: 2px 10px;
    border-radius: 4px;
}

/* ── Qabul bloklari ── */
:where(.page-calendar) .cal-appt {
    position: absolute;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    border-left-width: 5px;
    border-left-style: solid;
    box-shadow: 0 3px 10px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.14);
    transition: opacity 0.15s, box-shadow 0.15s, transform 0.1s;
    z-index: 4;
    pointer-events: auto;
}
:where(.page-calendar) .cal-appt:hover {
    opacity: 0.97;
    box-shadow: 0 8px 22px rgba(0,0,0,0.30), 0 3px 8px rgba(0,0,0,0.18);
    transform: translateX(2px) scale(1.007);
}
:where(.page-calendar) .cal-appt .at {
    font-size: 12.5px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
    opacity: 1;
}
:where(.page-calendar) .cal-appt .an {
    font-size: 14px;
    font-weight: 900;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
:where(.page-calendar) .cal-appt .astat {
    font-size: 11px;
    font-weight: 800;
    margin-top: 3px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
:where(.page-calendar) .cal-appt .adoc {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

/* ── Holat bo'yicha YORQIN ranglar ── */
:where(.page-calendar) .cal-appt.st-completed {
    background: rgb(var(--primary-rgb) / 0.28) !important;
    border-left-color: #1044c8 !important;
    color: #0a2870 !important;
}
:where(.page-calendar) .cal-appt.st-active {
    background: rgba(30,142,62,0.32) !important;
    border-left-color: #0d6e30 !important;
    color: #063318 !important;
}
:where(.page-calendar) .cal-appt.st-upcoming {
    background: rgba(217,48,37,0.28) !important;
    border-left-color: #b71c1c !important;
    color: #5c0808 !important;
}

/* ── Afsonaviy belgilar ── */
:where(.page-calendar) .cal-legend {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 8px 16px;
    background: #edf1fa;
    border-bottom: 1.5px solid #b0bcd8;
    flex-wrap: wrap;
}
:where(.page-calendar) .cal-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ink);
    font-weight: 700;
}
:where(.page-calendar) .cal-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ── KUN: shifokor ranglar afsonasi ── */
:where(.page-calendar) .cal-doc-legend {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 7px 16px;
    background: #f4f6fc;
    border-bottom: 1.5px solid #b0bcd8;
    flex-wrap: wrap;
    overflow-x: auto;
}
:where(.page-calendar) .cal-doc-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}
:where(.page-calendar) .cal-doc-legend-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* ===== QABUL MODAL ===== */
:where(.page-calendar) .appt-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}
:where(.page-calendar) .appt-modal-overlay.open { display: flex; }
:where(.page-calendar) .appt-modal {
    background: var(--surface);
    border-radius: 14px;
    padding: 24px;
    width: 380px;
    max-width: 95vw;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
:where(.page-calendar) .appt-modal h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
:where(.page-calendar) .appt-modal-btn {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
:where(.page-calendar) .appt-modal-btn .btn { flex: 1; }

/* Replace modal */
:where(.page-calendar) .replace-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3100;
    align-items: center;
    justify-content: center;
}
:where(.page-calendar) .replace-modal-overlay.open { display: flex; }

/* ─────────── export_patients.php  →  .page-export_patients ─────────── */
:where(.page-export_patients) .export-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
:where(.page-export_patients) .export-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; padding: 30px; border-radius: 12px; margin-bottom: 30px; text-align: center; }
:where(.page-export_patients) .export-header h1 { margin: 0 0 10px 0; font-size: 28px; }
:where(.page-export_patients) .export-header p { margin: 0; opacity: 0.9; }
:where(.page-export_patients) .export-card { background: var(--surface); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 30px; margin-bottom: 20px; }
:where(.page-export_patients) .export-section-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--primary); }
:where(.page-export_patients) .search-box { position: relative; margin-bottom: 20px; }
:where(.page-export_patients) .search-box input { width: 100%; padding: 15px 20px 15px 50px; border: 2px solid var(--line); border-radius: 10px; font-size: 16px; transition: all 0.3s; }
:where(.page-export_patients) .search-box input:focus { border-color: var(--primary); outline: none; }
:where(.page-export_patients) .search-box i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; }
:where(.page-export_patients) .search-results { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 10px; display: none; background: var(--surface); }
:where(.page-export_patients) .search-results.active { display: block; }
:where(.page-export_patients) .patient-item { padding: 15px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; }
:where(.page-export_patients) .patient-item:hover { background: var(--surface-2); }
:where(.page-export_patients) .patient-item:last-child { border-bottom: none; }
:where(.page-export_patients) .patient-item-info h4 { margin: 0 0 5px 0; color: var(--text); font-size: 15px; }
:where(.page-export_patients) .patient-item-info p { margin: 0; color: var(--muted); font-size: 13px; }
:where(.page-export_patients) .patient-item-select { color: var(--primary); font-size: 14px; }
:where(.page-export_patients) .export-buttons { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 20px; }
:where(.page-export_patients) .btn-export { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 10px; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.3s; border: none; cursor: pointer; }
:where(.page-export_patients) .btn-csv { background: #28a745; color: white; }
:where(.page-export_patients) .btn-csv:hover { background: #218838; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); }
:where(.page-export_patients) .btn-html { background: #17a2b8; color: white; }
:where(.page-export_patients) .btn-html:hover { background: #138496; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3); }
:where(.page-export_patients) .btn-all { background: var(--primary); color: white; }
:where(.page-export_patients) .btn-all:hover { background: #5a6fd6; transform: translateY(-2px); box-shadow: 0 4px 15px rgb(var(--primary-rgb) / 0.3); }
:where(.page-export_patients) .selected-patient { background: var(--surface-2); border: 2px solid var(--primary); border-radius: 10px; padding: 20px; margin-bottom: 20px; display: none; }
:where(.page-export_patients) .selected-patient.active { display: block; }
:where(.page-export_patients) .selected-patient h4 { margin: 0 0 10px 0; color: var(--primary); }
:where(.page-export_patients) .selected-patient p { margin: 0; color: var(--muted); }
:where(.page-export_patients) .alert { padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; }
:where(.page-export_patients) .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
:where(.page-export_patients) .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
@media (max-width: 768px) { :where(.page-export_patients) .export-buttons { flex-direction: column; } :where(.page-export_patients) .btn-export { width: 100%; justify-content: center; } :where(.page-export_patients) .summary { flex-direction: column; gap: 15px; } }

/* ─────────── finance.php  →  .page-finance ─────────── */
/* ═══════════ Shifokorlar hisobi — telefon / planshet / kompyuter ═══════════ */
:where(.page-finance) .fd-wrap {
    --fd-primary: var(--primary, var(--primary));
    --fd-success: var(--success, #27ae60);
    --fd-warn: #e67e22;
    --fd-danger: #e74c3c;
    --fd-muted: #7f8c8d;
    --fd-line: #eceff3;
    --fd-bg: #f6f8fb;
    --fd-text: #2c3e50;
}
:where(.page-finance) .fd-wrap, :where(.page-finance) .fd-overlay { box-sizing: border-box; color: var(--fd-text, #2c3e50); }
:where(.page-finance) .fd-wrap *, :where(.page-finance) .fd-overlay * { box-sizing: border-box; }

:where(.page-finance) .fd-section-head { flex-wrap: wrap; gap: 10px; }
:where(.page-finance) .fd-subtitle { font-size: 13px; color: #7f8c8d; margin-top: 4px; line-height: 1.4; }
:where(.page-finance) .fd-body { padding: 16px; }

:where(.page-finance) .fd-alert { padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; margin-bottom: 14px; line-height: 1.4; }
:where(.page-finance) .fd-alert-ok { background: #eafaf1; color: #1e8449; }
:where(.page-finance) .fd-alert-err { background: #fdecea; color: #c0392b; }

:where(.page-finance) .fd-label { font-size: 12px; font-weight: 600; color: #7f8c8d; letter-spacing: .2px; line-height: 1.3; }

/* — Umumiy yig'indi — */
:where(.page-finance) .fd-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
:where(.page-finance) .fd-sum { background: #f6f8fb; border-radius: 14px; padding: 14px 16px; }
:where(.page-finance) .fd-sum-primary { background: #eef4ff; }
:where(.page-finance) .fd-sum-primary .fd-sum-val { color: #2f6fd0; }
:where(.page-finance) .fd-sum-val { font-size: 20px; font-weight: 800; margin-top: 4px; overflow-wrap: anywhere; }
:where(.page-finance) .fd-sum.fd-warn { background: #fff4e6; } :where(.page-finance) .fd-sum.fd-warn   .fd-sum-val { color: #d35400; }
:where(.page-finance) .fd-sum.fd-ok { background: #eafaf1; } :where(.page-finance) .fd-sum.fd-ok     .fd-sum-val { color: #1e8449; }
:where(.page-finance) .fd-sum.fd-danger { background: #fdecea; } :where(.page-finance) .fd-sum.fd-danger .fd-sum-val { color: #c0392b; }

/* — Kartochkalar to'ri: telefonda 1 ta, planshetda 2, kompyuterda 3 — */
:where(.page-finance) .fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
:where(.page-finance) .fd-card {
    background: var(--surface); border: 1px solid var(--fd-line); border-radius: 16px;
    padding: 16px; display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 1px 3px rgba(20, 40, 80, .04); min-width: 0;
}
:where(.page-finance) .fd-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
:where(.page-finance) .fd-avatar {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
:where(.page-finance) .fd-avatar-sm { width: 38px; height: 38px; font-size: 16px; }
:where(.page-finance) .fd-who { flex: 1; min-width: 0; }
:where(.page-finance) .fd-name { font-weight: 700; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
:where(.page-finance) .fd-spec { font-size: 12px; color: #7f8c8d; margin-top: 2px; }
:where(.page-finance) .fd-pct { background: #e8f5e9; color: #2e7d32; font-weight: 800; font-size: 14px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
:where(.page-finance) .fd-pct-none { background: #f0f0f0; color: var(--muted); }

:where(.page-finance) .fd-earned { background: #eef4ff; border-radius: 14px; padding: 14px; }
:where(.page-finance) .fd-earned-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
:where(.page-finance) .fd-big { font-size: clamp(22px, 6vw, 28px); font-weight: 800; color: #2f6fd0; line-height: 1.15; overflow-wrap: anywhere; }
:where(.page-finance) .fd-hint { font-size: 12px; color: #5d6d7e; margin-top: 8px; line-height: 1.45; }
:where(.page-finance) .fd-hint-warn { color: #d35400; }
:where(.page-finance) .fd-hint-warn a { color: inherit; text-decoration: underline; }

:where(.page-finance) .fd-two, :where(.page-finance) .fd-three { display: grid; gap: 10px; }
:where(.page-finance) .fd-two { grid-template-columns: 1fr 1fr; }
:where(.page-finance) .fd-three { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
:where(.page-finance) .fd-mini { background: #f6f8fb; border-radius: 12px; padding: 11px 12px; min-width: 0; }
:where(.page-finance) .fd-mini-primary { background: #eef4ff; }
:where(.page-finance) .fd-mini-primary .fd-val { color: #2f6fd0; }
:where(.page-finance) .fd-val { font-size: 16px; font-weight: 800; margin-top: 4px; overflow-wrap: anywhere; line-height: 1.25; }
:where(.page-finance) .fd-mini.fd-warn { background: #fff4e6; } :where(.page-finance) .fd-mini.fd-warn   .fd-val { color: #d35400; }
:where(.page-finance) .fd-mini.fd-ok { background: #eafaf1; } :where(.page-finance) .fd-mini.fd-ok     .fd-val { color: #1e8449; }
:where(.page-finance) .fd-mini.fd-danger { background: #fdecea; } :where(.page-finance) .fd-mini.fd-danger .fd-val { color: #c0392b; }

:where(.page-finance) .fd-bar { height: 8px; background: #e9edf2; border-radius: 999px; overflow: hidden; margin-top: -4px; }
:where(.page-finance) .fd-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #27ae60); border-radius: 999px; }
:where(.page-finance) .fd-barlabel { font-size: 11px; color: #95a5a6; margin-top: -8px; text-align: right; }

:where(.page-finance) .fd-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
:where(.page-finance) .fd-notes li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 7px; border-top: 1px dashed var(--fd-line); }
:where(.page-finance) .fd-notes li span { color: #5d6d7e; }
:where(.page-finance) .fd-notes li b { text-align: right; white-space: nowrap; }
:where(.page-finance) .fd-note-warn span, :where(.page-finance) .fd-note-warn b { color: #d35400; }

/* — Tugmalar — */
:where(.page-finance) .fd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
    border-radius: 10px; padding: 10px 14px; min-height: 42px; line-height: 1.2;
    transition: filter .15s, background .15s; -webkit-tap-highlight-color: transparent;
}
:where(.page-finance) .fd-btn-primary { background: var(--fd-primary); color: #fff; }
:where(.page-finance) .fd-btn-primary:hover { filter: brightness(.94); }
:where(.page-finance) .fd-btn-ghost { background: var(--surface); color: #2f6fd0; border: 1px solid #c9dcf7; }
:where(.page-finance) .fd-btn-ghost:hover { background: #f3f8ff; }
:where(.page-finance) .fd-btn-lg { min-height: 48px; font-size: 15px; }
:where(.page-finance) .fd-btn:disabled { opacity: .6; cursor: not-allowed; }
:where(.page-finance) .fd-full { width: 100%; }
:where(.page-finance) .fd-btn:focus-visible, :where(.page-finance) .fd-x:focus-visible, :where(.page-finance) .fd-link:focus-visible, :where(.page-finance) .fd-del:focus-visible {
    outline: 3px solid rgb(var(--primary-rgb) / .45); outline-offset: 2px;
}

:where(.page-finance) .fd-empty { text-align: center; padding: 40px 16px; color: #95a5a6; }
:where(.page-finance) .fd-empty i { font-size: 34px; margin-bottom: 8px; display: block; }
:where(.page-finance) .fd-empty p { margin: 0; }

/* — Modal — */
:where(.page-finance) .fd-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(15, 25, 40, .5);
    align-items: center; justify-content: center; padding: 16px;
}
:where(.page-finance) .fd-overlay.fd-open { display: flex; }
:where(.page-finance) .fd-modal {
    background: var(--surface); border-radius: 18px; width: 100%; max-width: 520px;
    max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
:where(.page-finance) .fd-modal-lg { max-width: 860px; }
:where(.page-finance) .fd-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--fd-line, #eceff3);
    position: sticky; top: 0; background: var(--surface); z-index: 2; border-radius: 18px 18px 0 0;
}
:where(.page-finance) .fd-modal-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
:where(.page-finance) .fd-x {
    background: #f1f3f6; border: 0; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    font-size: 24px; line-height: 1; cursor: pointer; color: #5d6d7e;
}
:where(.page-finance) .fd-x:hover { background: #e5e9ee; }
:where(.page-finance) .fd-modal-body { padding: 16px 18px 20px; }

/* — Oyma-oy jadval — */
:where(.page-finance) .fd-mtable { width: 100%; border-collapse: collapse; font-size: 14px; }
:where(.page-finance) .fd-mtable th {
    text-align: left; font-size: 12px; color: #7f8c8d; font-weight: 700; padding: 9px 10px;
    border-bottom: 2px solid var(--fd-line, #eceff3); white-space: nowrap;
}
:where(.page-finance) .fd-mtable td { padding: 11px 10px; border-bottom: 1px solid var(--fd-line, #eceff3); vertical-align: top; }
:where(.page-finance) .fd-mtable .fd-r { text-align: right; }
:where(.page-finance) .fd-mtable .fd-m-month { font-weight: 700; white-space: nowrap; }
:where(.page-finance) .fd-mtable .fd-strong { font-weight: 800; color: #2f6fd0; }
:where(.page-finance) .fd-mtable tfoot td { border-top: 2px solid var(--fd-line, #eceff3); border-bottom: 0; font-weight: 800; background: #f6f8fb; }
:where(.page-finance) .fd-row-cur { background: #fffbea; }
:where(.page-finance) .fd-debt { display: block; font-size: 11px; color: #d35400; font-weight: 600; margin-top: 2px; }
:where(.page-finance) .fd-warn-text { color: #d35400; font-weight: 700; }
:where(.page-finance) .fd-danger-text { color: #c0392b; font-weight: 700; }
:where(.page-finance) .fd-ok-text { color: #1e8449; font-weight: 700; }
:where(.page-finance) .fd-foot-note { font-size: 12px; color: #95a5a6; margin: 12px 2px 0; line-height: 1.5; }

/* — Forma — */
:where(.page-finance) .fd-field { margin-bottom: 14px; }
:where(.page-finance) .fd-field label { display: block; font-size: 13px; font-weight: 600; color: #5d6d7e; margin-bottom: 6px; }
:where(.page-finance) .fd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
:where(.page-finance) .fd-input {
    width: 100%; padding: 12px 12px; border: 1px solid #d5dbe3; border-radius: 10px;
    font: inherit; font-size: 16px; /* 16px — iPhone'da avtomatik zoom bo'lmasligi uchun */
    background: var(--surface); color: inherit; min-height: 46px;
}
:where(.page-finance) .fd-input:focus { outline: none; border-color: var(--fd-primary); box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .18); }
:where(.page-finance) #fd-pay-amount { font-size: 20px; font-weight: 700; }
:where(.page-finance) .fd-link { background: none; border: 0; padding: 8px 0 0; color: #2f6fd0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; }
:where(.page-finance) .fd-link[hidden] { display: none; }

/* — To'lovlar tarixi — */
:where(.page-finance) .fd-hist-wrap { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--fd-line, #eceff3); }
:where(.page-finance) .fd-hist[hidden] { display: none; }
:where(.page-finance) .fd-hist-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f2f4f7; }
:where(.page-finance) .fd-hist-amount { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:where(.page-finance) .fd-hist-note { font-size: 12px; color: #95a5a6; margin-top: 2px; overflow-wrap: anywhere; }
:where(.page-finance) .fd-hist-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
:where(.page-finance) .fd-hist-date { font-size: 12px; color: #95a5a6; white-space: nowrap; }
:where(.page-finance) .fd-hist-empty { font-size: 13px; color: #b2bec3; padding: 6px 0; }
:where(.page-finance) .fd-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
:where(.page-finance) .fd-tag-oylik { background: #e8f5e9; color: #2e7d32; }
:where(.page-finance) .fd-tag-avans { background: #fff4e6; color: #d35400; }
:where(.page-finance) .fd-del-form { margin: 0; }
:where(.page-finance) .fd-del { background: #fdecea; color: #c0392b; border: 0; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; }
:where(.page-finance) .fd-del:hover { background: #f9d6d2; }

/* ═══════════ Planshet ═══════════ */
@media (max-width: 900px) {
    :where(.page-finance) .fd-body { padding: 14px; }
}

/* ═══════════ Telefon ═══════════ */
@media (max-width: 640px) {
    :where(.page-finance) .fd-body { padding: 12px; }
    :where(.page-finance) .fd-card { padding: 14px; border-radius: 14px; }
    :where(.page-finance) .fd-three { grid-template-columns: 1fr; }
    :where(.page-finance) .fd-three .fd-mini { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    :where(.page-finance) .fd-three .fd-val { margin-top: 0; text-align: right; }

    /* Modal — pastdan chiqadigan oyna (bir qo'l bilan qulay) */
    :where(.page-finance) .fd-overlay { padding: 0; align-items: flex-end; }
    :where(.page-finance) .fd-modal, :where(.page-finance) .fd-modal-lg { max-width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; }
    :where(.page-finance) .fd-modal-head { border-radius: 20px 20px 0 0; }
    :where(.page-finance) .fd-modal-body { padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
    :where(.page-finance) .fd-field-row { grid-template-columns: 1fr; gap: 0; }

    /* Jadval — har bir oy alohida kartochka bo'lib chiqadi */
    :where(.page-finance) .fd-mtable, :where(.page-finance) .fd-mtable tbody, :where(.page-finance) .fd-mtable tfoot, :where(.page-finance) .fd-mtable tr, :where(.page-finance) .fd-mtable td { display: block; width: 100%; }
    :where(.page-finance) .fd-mtable thead { display: none; }
    :where(.page-finance) .fd-mtable tr { border: 1px solid var(--fd-line, #eceff3); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--surface); }
    :where(.page-finance) .fd-mtable tr.fd-row-cur { background: #fffbea; }
    :where(.page-finance) .fd-mtable td, :where(.page-finance) .fd-mtable tfoot td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
        padding: 6px 0; border: 0; background: transparent; text-align: right;
    }
    :where(.page-finance) .fd-mtable td::before { content: attr(data-label); color: #7f8c8d; font-weight: 600; font-size: 13px; text-align: left; flex-shrink: 0; }
    :where(.page-finance) .fd-mtable td.fd-m-month { font-size: 15px; padding-bottom: 8px; border-bottom: 1px dashed var(--fd-line, #eceff3); margin-bottom: 4px; }
    :where(.page-finance) .fd-mtable td.fd-m-month::before { content: none; }
    :where(.page-finance) .fd-mtable .fd-r { text-align: right; }
    :where(.page-finance) .fd-debt { display: inline; margin: 0 0 0 6px; }
    :where(.page-finance) .fd-mtable tfoot tr { background: #f6f8fb; }
}

@media (max-width: 380px) {
    :where(.page-finance) .fd-two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.page-finance) .fd-btn { transition: none; }
}

/* ─────────── patient_card.php  →  .page-patient_card ─────────── */
/* ===== UMUMIY ===== */
:where(.page-patient_card) .med-card {
    max-width: 860px;
    margin: 0 auto 40px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 32px 36px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* ===== SARLAVHA ===== */
:where(.page-patient_card) .mc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 4px;
}
:where(.page-patient_card) .mc-clinic-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--ink);
    text-transform: uppercase;
    margin-bottom: 4px;
}
:where(.page-patient_card) .mc-clinic-sub {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 2px;
}
:where(.page-patient_card) .mc-clinic-sub i { margin-right: 4px; color: var(--ink); }

:where(.page-patient_card) .mc-title-block {
    text-align: center;
    flex: 1;
}
:where(.page-patient_card) .mc-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 6px 20px;
    display: inline-block;
    border-radius: 4px;
}
:where(.page-patient_card) .mc-subtitle {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

:where(.page-patient_card) .mc-meta {
    text-align: right;
    min-width: 160px;
}
:where(.page-patient_card) .mc-meta-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 3px;
    font-size: 12px;
}
:where(.page-patient_card) .mc-meta-label { color: var(--muted); }
:where(.page-patient_card) .mc-meta-val { font-weight: 700; color: var(--text); min-width: 80px; text-align: right; }

/* ===== DIVIDER ===== */
:where(.page-patient_card) .mc-divider {
    border: none;
    border-top: 1.5px solid #c5cae9;
    margin: 14px 0;
}

/* ===== SECTION ===== */
:where(.page-patient_card) .mc-section { margin-bottom: 4px; }
:where(.page-patient_card) .mc-section-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink);
    background: #e8eaf6;
    padding: 6px 12px;
    border-left: 4px solid var(--ink);
    border-radius: 0 4px 4px 0;
    margin-bottom: 12px;
}
:where(.page-patient_card) .mc-section-title i { margin-right: 6px; }

/* ===== INFO GRID ===== */
:where(.page-patient_card) .mc-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
}
:where(.page-patient_card) .mc-info-full { grid-column: 1 / -1; }
:where(.page-patient_card) .mc-info-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
:where(.page-patient_card) .mc-info-val {
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px dotted var(--line);
    padding-bottom: 4px;
    min-height: 20px;
}
:where(.page-patient_card) .mc-info-val.bold { font-weight: 700; font-size: 14px; }
:where(.page-patient_card) .mc-dim { color: var(--muted); font-size: 11px; }

/* ===== STATISTIKA ===== */
:where(.page-patient_card) .mc-stats-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin: 4px 0;
}
:where(.page-patient_card) .mc-stat-box {
    text-align: center;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    padding: 10px 6px;
    background: var(--surface-2);
}
:where(.page-patient_card) .mc-stat-box.mc-stat-green { border-color: #a5d6a7; background: #f1f8e9; }
:where(.page-patient_card) .mc-stat-box.mc-stat-red { border-color: #ef9a9a; background: #ffebee; }
:where(.page-patient_card) .mc-stat-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}
:where(.page-patient_card) .mc-stat-green .mc-stat-val { color: #2e7d32; }
:where(.page-patient_card) .mc-stat-red   .mc-stat-val { color: #c62828; }
:where(.page-patient_card) .mc-stat-lbl {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 3px;
    letter-spacing: 0.3px;
}

/* ===== DAVOLANISH ===== */
:where(.page-patient_card) .mc-treatment {
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
}
:where(.page-patient_card) .mc-treatment-header {
    background: var(--surface-2);
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}
:where(.page-patient_card) .mc-treatment-num {
    font-weight: 800;
    color: var(--ink);
    font-size: 13px;
}

/* ===== JADVAL ===== */
:where(.page-patient_card) .mc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
:where(.page-patient_card) .mc-table th {
    background: #e8eaf6;
    color: var(--ink);
    font-weight: 700;
    padding: 7px 8px;
    text-align: left;
    border: 1px solid #c5cae9;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
:where(.page-patient_card) .mc-table td {
    padding: 6px 8px;
    border: 1px solid var(--line);
    vertical-align: middle;
}
:where(.page-patient_card) .mc-table tr:nth-child(even) td { background: var(--surface-2); }
:where(.page-patient_card) .mc-table tr:hover td { background: #f3f4ff; }
:where(.page-patient_card) .mc-table-total td {
    background: #e8f5e9 !important;
    border-top: 2px solid #a5d6a7;
}
:where(.page-patient_card) .mc-table-debt td {
    background: #ffebee !important;
    border-top: 1px solid #ef9a9a;
}

/* ===== BADGELAR ===== */
:where(.page-patient_card) .mc-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
:where(.page-patient_card) .mc-badge-completed { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
:where(.page-patient_card) .mc-badge-pending { background: #fff8e1; color: #f57c00; border: 1px solid #ffe082; }
:where(.page-patient_card) .mc-badge-cancelled { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
:where(.page-patient_card) .mc-badge-scheduled { background: var(--primary-light); color: var(--primary-dark); border: 1px solid #90caf9; }
:where(.page-patient_card) .mc-badge-confirmed { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
:where(.page-patient_card) .mc-badge-no_show { background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }

:where(.page-patient_card) .mc-pay-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid #90caf9;
    white-space: nowrap;
}

/* ===== IMZO ===== */
:where(.page-patient_card) .mc-sign-row {
    display: flex;
    gap: 40px;
    margin: 20px 0 10px;
    align-items: flex-end;
}
:where(.page-patient_card) .mc-sign-box { flex: 1; }
:where(.page-patient_card) .mc-sign-line {
    border-bottom: 1.5px solid #333;
    margin-bottom: 6px;
    height: 36px;
}
:where(.page-patient_card) .mc-sign-label {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}
:where(.page-patient_card) .mc-sign-date {
    font-size: 12px;
    color: var(--text-2);
    text-align: center;
    padding-bottom: 6px;
}

/* ===== EMPTY ===== */
:where(.page-patient_card) .mc-empty {
    color: var(--muted);
    font-size: 12px;
    padding: 10px 14px;
    font-style: italic;
}

/* ===== RENTGEN GRID ===== */
:where(.page-patient_card) .mc-xray-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 4px;
}
:where(.page-patient_card) .mc-xray-item {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface);
    break-inside: avoid;
    page-break-inside: avoid;
}
:where(.page-patient_card) .mc-xray-img-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
:where(.page-patient_card) .mc-xray-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
:where(.page-patient_card) .mc-xray-noimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    padding: 20px;
    text-align: center;
}
:where(.page-patient_card) .mc-xray-noimg i { font-size: 28px; color: var(--text-2); }
:where(.page-patient_card) .mc-xray-num {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(26,35,126,0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(.page-patient_card) .mc-xray-info {
    padding: 7px 8px;
    border-top: 1px solid var(--line);
}
:where(.page-patient_card) .mc-xray-tooth {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}
:where(.page-patient_card) .mc-xray-tooth i { margin-right: 3px; }
:where(.page-patient_card) .mc-xray-date {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 2px;
}
:where(.page-patient_card) .mc-xray-desc {
    font-size: 11px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}
:where(.page-patient_card) .mc-xray-fname {
    font-size: 10px;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== FOOTER ===== */
:where(.page-patient_card) .mc-footer {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
}

/* ===== CHOP ETISH ===== */
@media print {
    :where(.page-patient_card) .no-print { display: none !important; }

    body:where(.page-patient_card) {
        background: var(--surface) !important;
        margin: 0;
        padding: 0;
    }

    /* Headerdan faqat kartani ko'rsatish */
    :where(.page-patient_card) header, :where(.page-patient_card) nav, :where(.page-patient_card) .sidebar, :where(.page-patient_card) .topbar, :where(.page-patient_card) aside,
    :where(.page-patient_card) .navbar, :where(.page-patient_card) .sidebar-nav, :where(.page-patient_card) #sidebar, :where(.page-patient_card) #header,
    :where(.page-patient_card) .main-header, :where(.page-patient_card) .left-panel {
        display: none !important;
    }

    :where(.page-patient_card) .main-content, :where(.page-patient_card) .content-wrapper,
    :where(.page-patient_card) .page-wrapper, :where(.page-patient_card) main, :where(.page-patient_card) .container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    :where(.page-patient_card) .med-card {
        max-width: 100%;
        margin: 0;
        padding: 16px 20px;
        border: none;
        border-radius: 0;
        box-shadow: none;
        font-size: 11px;
    }

    :where(.page-patient_card) .mc-clinic-name { font-size: 15px; }
    :where(.page-patient_card) .mc-title { font-size: 18px; }
    :where(.page-patient_card) .mc-stat-val { font-size: 14px; }

    :where(.page-patient_card) .mc-table th, :where(.page-patient_card) .mc-table td { padding: 4px 6px; font-size: 10px; }
    :where(.page-patient_card) .mc-section-title { font-size: 10px; padding: 4px 10px; }
    :where(.page-patient_card) .mc-info-val { font-size: 12px; }

    /* Jadvallar yangi sahifada boshlanmasin */
    :where(.page-patient_card) .mc-treatment { break-inside: avoid; page-break-inside: avoid; }
    :where(.page-patient_card) .mc-table { break-inside: auto; }
    :where(.page-patient_card) .mc-table tr { break-inside: avoid; page-break-inside: avoid; }

    /* Har bir asosiy bo'lim biriktirilsin */
    :where(.page-patient_card) .mc-section { break-inside: avoid; page-break-inside: avoid; }
    :where(.page-patient_card) .mc-stats-row { break-inside: avoid; page-break-inside: avoid; }
    :where(.page-patient_card) .mc-sign-row { break-inside: avoid; page-break-inside: avoid; }

    /* Rentgen grid — chop etishda 3 ustun */
    :where(.page-patient_card) .mc-xray-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    :where(.page-patient_card) .mc-xray-img-wrap {
        height: 130px !important;
    }
    :where(.page-patient_card) .mc-xray-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    :where(.page-patient_card) .mc-xray-img {
        /* base64 rasm chop etishda to'liq ko'rinsin */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    @page {
        size: A4 portrait;
        margin: 10mm 12mm;
    }
}

/* ─────────── patients_view.php  →  .page-patients_view ─────────── */
@keyframes slideUp {
    from { transform: translateY(100%); opacity:0; }
    to   { transform: translateY(0);   opacity:1; }
}
@media (max-width:900px) {
    :where(.page-patients_view) .patient-view-grid { grid-template-columns:1fr !important; }
}
:where(.page-patients_view) .proc-disc-src-btn {
    border: 1.5px solid #ffc107;
    background: var(--surface);
    color: #b28704;
}
:where(.page-patients_view) .proc-disc-src-btn.active {
    background: #f57c00;
    border-color: #f57c00;
    color: #fff;
}

/* ─────────── appointment_detail_modal.php  →  .page-patients_view ─────────── */
@keyframes adSlideIn {
    from { opacity:0; transform:scale(0.92) translateY(16px); }
    to   { opacity:1; transform:scale(1)    translateY(0);    }
}
:where(.page-patients_view) .ad-row {
    background:#f8faff;border:1.5px solid var(--primary-light);
    border-radius:12px;padding:14px 16px;margin-bottom:10px;
    transition:border-color 0.15s,background 0.15s;
}
:where(.page-patients_view) .ad-row.editing { border-color:var(--primary);background:var(--primary-light); }
:where(.page-patients_view) .ad-row-label {
    font-size:11px;color:#8899bb;font-weight:700;
    text-transform:uppercase;letter-spacing:0.5px;
    margin-bottom:6px;display:flex;align-items:center;gap:6px;
}
:where(.page-patients_view) .ad-row-value {
    font-size:15px;font-weight:700;color:var(--ink);
    display:flex;align-items:center;justify-content:space-between;gap:8px;
}
:where(.page-patients_view) .ad-edit-btn {
    width:32px;height:32px;border-radius:8px;background:var(--primary-light);
    border:none;cursor:pointer;color:var(--primary);font-size:13px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;transition:background 0.15s;
}
:where(.page-patients_view) .ad-edit-btn:hover { background:var(--primary-light); }
:where(.page-patients_view) .ad-save-btn {
    width:32px;height:32px;border-radius:8px;background:#22c55e;
    border:none;cursor:pointer;color:#fff;font-size:13px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;transition:background 0.15s;
}
:where(.page-patients_view) .ad-save-btn:hover { background:#16a34a; }
:where(.page-patients_view) .ad-cancel-btn {
    width:32px;height:32px;border-radius:8px;background:var(--surface-2);
    border:none;cursor:pointer;color:var(--muted);font-size:13px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;transition:background 0.15s;
}
:where(.page-patients_view) .ad-cancel-btn:hover { background:#e2e8f0; }

/* O'chirish tugmasi */
:where(.page-patients_view) .ad-delete-btn {
    width:32px;height:32px;border-radius:8px;background:#fff0f0;
    border:none;cursor:pointer;color:#ef4444;font-size:13px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:background 0.15s,color 0.15s;
}
:where(.page-patients_view) .ad-delete-btn:hover { background:#fee2e2;color:#c62828; }

:where(.page-patients_view) .ad-input {
    flex:1;padding:7px 10px;border:1.5px solid #93c5fd;
    border-radius:8px;font-size:14px;color:var(--ink);background:var(--surface);
    outline:none;transition:border-color 0.15s;
}
:where(.page-patients_view) .ad-input:focus { border-color:var(--primary); }
:where(.page-patients_view) .ad-select {
    flex:1;padding:7px 10px;border:1.5px solid #93c5fd;
    border-radius:8px;font-size:14px;color:var(--ink);background:var(--surface);
    outline:none;cursor:pointer;transition:border-color 0.15s;
}
:where(.page-patients_view) .ad-select:focus { border-color:var(--primary); }
:where(.page-patients_view) .ad-textarea {
    width:100%;padding:10px 12px;border:1.5px solid #93c5fd;
    border-radius:8px;font-size:14px;color:var(--ink);background:var(--surface);
    outline:none;resize:vertical;min-height:80px;box-sizing:border-box;
    transition:border-color 0.15s;font-family:inherit;
}
:where(.page-patients_view) .ad-textarea:focus { border-color:var(--primary); }
:where(.page-patients_view) .ad-section-title {
    font-size:12px;font-weight:800;color:var(--ink);
    text-transform:uppercase;letter-spacing:0.6px;
    margin:18px 0 10px;display:flex;align-items:center;gap:7px;
    padding-bottom:7px;border-bottom:1.5px solid var(--primary-light);
}
:where(.page-patients_view) .ad-proc-row {
    background:#f8faff;border:1.5px solid var(--primary-light);
    border-radius:12px;padding:12px 14px;margin-bottom:8px;
    transition:border-color 0.15s,background 0.15s;
}
:where(.page-patients_view) .ad-proc-row.editing { border-color:#10b981;background:#f0fdf4; }
:where(.page-patients_view) .ad-proc-row.deleting { border-color:#ef4444;background:#fff5f5; }
:where(.page-patients_view) .ad-pay-row {
    background:#f8faff;border:1.5px solid var(--primary-light);
    border-radius:12px;padding:12px 14px;margin-bottom:8px;
    transition:border-color 0.15s,background 0.15s;
}
:where(.page-patients_view) .ad-pay-row.editing { border-color:#f59e0b;background:#fffbeb; }
:where(.page-patients_view) .ad-pay-badge {
    display:inline-flex;align-items:center;gap:4px;
    border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;
}
:where(.page-patients_view) .ad-pay-badge.cash { background:#d1fae5;color:#065f46; }
:where(.page-patients_view) .ad-pay-badge.card { background:var(--primary-light);color:var(--primary-dark); }
:where(.page-patients_view) .ad-pay-badge.transfer { background:var(--primary-light);color:var(--primary-dark); }
:where(.page-patients_view) .ad-pay-badge.other { background:#fef3c7;color:#92400e; }
:where(.page-patients_view) .ad-debt-bar {
    background:linear-gradient(135deg,#fff7ed,#ffedd5);
    border:1.5px solid #fed7aa;border-radius:12px;
    padding:12px 16px;margin-bottom:14px;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
}
:where(.page-patients_view) .ad-balance-bar {
    background:linear-gradient(135deg,#f0fdf4,#dcfce7);
    border:1.5px solid #86efac;border-radius:12px;
    padding:12px 16px;margin-bottom:14px;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
}

/* O'chirish tasdiqlash bloki */
:where(.page-patients_view) .ad-delete-confirm {
    display:none;
    margin-top:10px;
    background:#fff5f5;
    border:1.5px solid #fca5a5;
    border-radius:10px;
    padding:12px 14px;
}
:where(.page-patients_view) .ad-delete-confirm-text {
    font-size:13px;
    color:#c62828;
    font-weight:600;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:7px;
}
:where(.page-patients_view) .ad-delete-confirm-btns {
    display:flex;
    gap:8px;
    justify-content:flex-end;
}
:where(.page-patients_view) .ad-delete-confirm-yes {
    padding:6px 16px;
    background:#ef4444;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:700;
    font-size:13px;
    transition:background 0.15s;
}
:where(.page-patients_view) .ad-delete-confirm-yes:hover { background:#dc2626; }
:where(.page-patients_view) .ad-delete-confirm-no {
    padding:6px 14px;
    background:var(--surface-2);
    color:var(--muted);
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    font-size:13px;
    transition:background 0.15s;
}
:where(.page-patients_view) .ad-delete-confirm-no:hover { background:#e2e8f0; }

/* ─────────── payment_add.php  →  .page-payment_add ─────────── */
@media print {
    body:where(.page-payment_add) * { visibility: hidden !important; }
    :where(.page-payment_add) #receiptBox, :where(.page-payment_add) #receiptBox * { visibility: visible !important; }
    :where(.page-payment_add) #receiptBox {
        position: fixed !important;
        top: 0; left: 50%;
        transform: translateX(-50%);
        border: none !important;
        font-size: 12px !important;
        width: 72mm !important;
        padding: 4mm !important;
    }
}

/* ─────────── photo_protocol.php  →  .page-photo_protocol ─────────── */
:where(.page-photo_protocol) .pp-upload-zone {
    border: 2.5px dashed #f48fb1;
    border-radius: 14px;
    background: #fce4ec;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
:where(.page-photo_protocol) .pp-upload-zone:hover,
:where(.page-photo_protocol) .pp-upload-zone.drag-over {
    background: #f8bbd0;
    border-color: #e91e63;
}
:where(.page-photo_protocol) .pp-upload-zone input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
:where(.page-photo_protocol) .pp-photo-card {
    position: relative;
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--line);
    transition: box-shadow 0.2s, transform 0.15s;
    cursor: pointer;
}
:where(.page-photo_protocol) .pp-photo-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    transform: translateY(-2px);
}
:where(.page-photo_protocol) .pp-photo-card .pp-delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(198,40,40,0.88);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
:where(.page-photo_protocol) .pp-photo-card:hover .pp-delete-btn {
    opacity: 1;
}
:where(.page-photo_protocol) .pp-type-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
:where(.page-photo_protocol) .preview-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1.5px solid #f48fb1;
    cursor: pointer;
    transition: transform 0.15s;
}
:where(.page-photo_protocol) .preview-thumb:hover { transform: scale(1.07); }
:where(.page-photo_protocol) #previewGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* ─────────── procedures_add.php  →  .page-procedures_add ─────────── */
/* ── RESPONSIVE ASOSIY ─────────────────────────────────────────────────────── */
:where(.page-procedures_add) * { box-sizing: border-box; }

:where(.page-procedures_add) .svc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
    gap: 10px;
}
:where(.page-procedures_add) .svc-item:last-child { border-bottom: none; }
:where(.page-procedures_add) .svc-item:hover { background: #f5f8ff; }
:where(.page-procedures_add) .svc-item.selected { background: var(--primary-light); }

:where(.page-procedures_add) .svc-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}
:where(.page-procedures_add) .svc-item-price {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
:where(.page-procedures_add) .svc-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #cdd6e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    background: var(--surface);
}
:where(.page-procedures_add) .svc-check.checked {
    background: var(--primary, var(--primary));
    border-color: var(--primary, var(--primary));
    color: #fff;
}

:where(.page-procedures_add) .sel-item {
    border: 1.5px solid #d0dff8;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
}
:where(.page-procedures_add) .sel-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 10px;
}
:where(.page-procedures_add) .sel-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
    line-height: 1.4;
}
:where(.page-procedures_add) .sel-item-prices {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
:where(.page-procedures_add) .sel-item-total {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary, var(--primary));
    background: var(--primary-light);
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
:where(.page-procedures_add) .qty-ctrl {
    display: flex;
    align-items: center;
}
:where(.page-procedures_add) .qty-btn {
    width: 30px;
    height: 30px;
    border: 1.5px solid #cdd6e0;
    background: var(--surface-2);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}
:where(.page-procedures_add) .qty-btn:hover { background: #e0e0e0; }
:where(.page-procedures_add) .qty-num {
    width: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
:where(.page-procedures_add) .tooth-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-light);
    color: var(--primary, var(--primary));
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
}
:where(.page-procedures_add) .sel-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--faint);
    font-size: 18px;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.1s;
    flex-shrink: 0;
}
:where(.page-procedures_add) .sel-remove:hover { color: var(--danger, #d93025); }

/* Chegirma input */
:where(.page-procedures_add) .disc-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
:where(.page-procedures_add) .disc-input {
    width: 90px;
    padding: 5px 8px;
    border: 1.5px solid #ffc107;
    border-radius: 6px 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #e65100;
    outline: none;
    box-sizing: border-box;
    border-right: none;
}
:where(.page-procedures_add) .disc-type-btn {
    padding: 5px 11px;
    border: 1.5px solid #ffc107;
    border-radius: 0 6px 6px 0;
    background: #fff8e1;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    color: #e65100;
    min-width: 46px;
    white-space: nowrap;
}
:where(.page-procedures_add) .disc-src-btn {
    border: 1.5px solid #ffc107;
    background: var(--surface);
    color: #b28704;
}
:where(.page-procedures_add) .disc-src-btn.active {
    background: #f57c00;
    border-color: #f57c00;
    color: #fff;
}
:where(.page-procedures_add) .disc-info {
    font-size: 11px;
    color: #e65100;
    font-weight: 600;
}

/* ── TISH TANLASH ───────────────────────────────────────────────────────────── */
:where(.page-procedures_add) .teeth-selector-container {
    background: var(--surface-2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

:where(.page-procedures_add) .teeth-type-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 16px;
    background: var(--surface);
    border-radius: 30px;
    border: 1px solid var(--line);
}

:where(.page-procedures_add) .teeth-type-label {
    font-weight: 600;
    color: var(--muted);
    font-size: 13px;
    transition: color 0.2s;
}
:where(.page-procedures_add) .teeth-type-label.active { color: var(--primary, var(--primary)); }

:where(.page-procedures_add) .toggle-switch {
    position: relative;
    width: 52px;
    height: 26px;
    background: #ccc;
    border-radius: 13px;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}
:where(.page-procedures_add) .toggle-switch.active { background: var(--primary, var(--primary)); }
:where(.page-procedures_add) .toggle-switch::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--surface);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
:where(.page-procedures_add) .toggle-switch.active::after { transform: translateX(26px); }

/* ── TISH GRIDI — PLANSHET UCHUN MOSLASHTIRILGAN ─────────────────────────── */
:where(.page-procedures_add) .teeth-jaw-block {
    margin-bottom: 8px;
}

:where(.page-procedures_add) .jaw-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* Kattalar: 16 ta ustun — overflow scroll bilan planshetda ham ishlaydi */
:where(.page-procedures_add) .teeth-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

:where(.page-procedures_add) .teeth-grid-adult {
    display: grid;
    grid-template-columns: repeat(16, minmax(34px, 1fr));
    gap: 4px;
    min-width: 560px; /* eng kam kenglik — scroll ishga tushadi */
}

/* Bolalar: 10 ta ustun */
:where(.page-procedures_add) .teeth-grid-child {
    display: grid;
    grid-template-columns: repeat(10, minmax(36px, 1fr));
    gap: 4px;
    min-width: 380px;
}

/* Tish tugmasi */
:where(.page-procedures_add) .tooth-btn {
    aspect-ratio: 1;
    border: 2px solid var(--line);
    background: var(--surface);
    border-radius: 7px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-2);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    min-height: 34px;
    padding: 0;
    line-height: 1;
    touch-action: manipulation; /* mobil qurilmalarda tez bosilish */
}
:where(.page-procedures_add) .tooth-btn:hover {
    border-color: var(--primary, var(--primary));
    color: var(--primary, var(--primary));
    background: #f0f4ff;
}
:where(.page-procedures_add) .tooth-btn.selected {
    background: var(--primary, var(--primary));
    border-color: var(--primary, var(--primary));
    color: #fff;
    box-shadow: 0 2px 6px rgb(var(--primary-rgb) / 0.35);
}

/* Tanlangan tishlar ko'rinishi */
:where(.page-procedures_add) .selected-teeth-display {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    min-height: 38px;
    padding: 8px 10px;
    background: var(--surface);
    border-radius: 8px;
    border: 2px dashed var(--line);
    align-items: center;
}
:where(.page-procedures_add) .selected-tooth-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--primary-light);
    color: var(--primary, var(--primary));
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
}
:where(.page-procedures_add) .selected-tooth-tag .remove {
    cursor: pointer;
    color: #d93025;
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
}

/* Tish soni ko'rsatkichi */
:where(.page-procedures_add) .teeth-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--primary-light);
    color: var(--primary, var(--primary));
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
}

/* ── MODAL ──────────────────────────────────────────────────────────────────── */
:where(.page-procedures_add) .modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
:where(.page-procedures_add) .modal-overlay.active { display: flex; }

:where(.page-procedures_add) .modal {
    background: var(--surface);
    border-radius: 16px;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
:where(.page-procedures_add) .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
:where(.page-procedures_add) .modal-header h3 { margin: 0; color: var(--text); font-size: 16px; }
:where(.page-procedures_add) .modal-close {
    background: none; border: none;
    font-size: 24px; cursor: pointer; color: var(--muted);
    padding: 0; line-height: 1;
}
:where(.page-procedures_add) .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
}
:where(.page-procedures_add) .modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
:where(.page-procedures_add) .btn-secondary {
    padding: 9px 20px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}
:where(.page-procedures_add) .btn-primary-modal {
    padding: 9px 22px;
    background: var(--primary, var(--primary));
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}

/* Xizmat tanlash tugmasi */
:where(.page-procedures_add) .services-select-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary, var(--primary));
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
    margin-top: 15px;
    font-size: 14px;
}
:where(.page-procedures_add) .services-select-btn:hover { background: var(--primary-dark); }

/* ── RESPONSIVE MEDIA QUERIES ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    :where(.page-procedures_add) .teeth-selector-container { padding: 12px; }
    :where(.page-procedures_add) .tooth-btn { font-size: 10px; min-height: 30px; }
    :where(.page-procedures_add) .teeth-grid-adult { gap: 3px; min-width: 500px; }
    :where(.page-procedures_add) .teeth-grid-child { gap: 3px; min-width: 320px; }
    :where(.page-procedures_add) .sel-item-top { flex-wrap: wrap; }
    :where(.page-procedures_add) .sel-item-total { font-size: 12px; }
}

@media (max-width: 480px) {
    :where(.page-procedures_add) .tooth-btn { font-size: 9px; min-height: 28px; border-radius: 5px; }
    :where(.page-procedures_add) .teeth-grid-adult { gap: 2px; min-width: 460px; }
    :where(.page-procedures_add) .teeth-grid-child { gap: 2px; min-width: 290px; }
}

/* ─────────── services.php  →  .page-services ─────────── */
:where(.page-services) .toggle-switch input:checked + .toggle-slider { background: var(--primary, var(--primary)) !important; }
:where(.page-services) .toggle-switch input:checked + .toggle-slider span { transform: translateX(22px) !important; }
@keyframes modalFadeIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
:where(.page-services) #addModal > div, :where(.page-services) #editModal > div { animation: modalFadeIn 0.2s ease; }

/* ─────────── settings.php  →  .page-settings ─────────── */
:where(.page-settings) {
    --s-blue:    var(--primary);
    --s-blue-lt: var(--primary-light);
    --s-green:   #1e8e3e;
    --s-green-lt:#e6f4ea;
    --s-orange:  #f57c00;
    --s-orange-lt:#fff3e0;
    --s-red:     #d93025;
    --s-red-lt:  #fce8e6;
    --s-gray:    #5f6368;
    --s-border:  #dadce0;
    --s-bg:      #f8f9fa;
    --s-white:   #ffffff;
    --s-radius:  12px;
    --s-shadow:  0 1px 8px rgba(0,0,0,.10);
}

:where(.page-settings) .settings-tabs {
    display: flex;
    gap: 4px;
    background: var(--s-white);
    border: 1.5px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 6px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
:where(.page-settings) .settings-tabs::-webkit-scrollbar { display: none; }

:where(.page-settings) .stab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--s-gray);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
:where(.page-settings) .stab:hover { background: var(--s-bg); }
:where(.page-settings) .stab.active {
    background: var(--s-blue);
    color: #fff;
    box-shadow: 0 2px 8px rgb(var(--primary-rgb) / .3);
}
:where(.page-settings) .stab i { font-size: 14px; }

:where(.page-settings) .stab-panel { display: none; }
:where(.page-settings) .stab-panel.active { display: block; animation: sfadeIn .22s ease; }
@keyframes sfadeIn {
    from { opacity:0; transform:translateY(5px); }
    to   { opacity:1; transform:translateY(0); }
}

:where(.page-settings) .profile-hero {
    background: linear-gradient(135deg, #1a3a6c 0%, var(--primary) 60%, #34a853 100%);
    border-radius: var(--s-radius);
    padding: 28px 24px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
:where(.page-settings) .profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    flex-shrink: 0;
    border: 3px solid rgba(255,255,255,.4);
}
:where(.page-settings) .profile-info h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
:where(.page-settings) .profile-info p { font-size: 13px; opacity: .8; margin: 0 0 6px; }
:where(.page-settings) .role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(255,255,255,.2);
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 1px solid rgba(255,255,255,.3);
}

:where(.page-settings) .profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media(max-width:480px){ :where(.page-settings) .profile-actions { grid-template-columns:1fr; } }

:where(.page-settings) .action-card {
    background: var(--s-white);
    border: 1.5px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
    width: 100%;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--s-shadow);
}
:where(.page-settings) .action-card:hover {
    border-color: var(--s-blue);
    box-shadow: 0 4px 16px rgb(var(--primary-rgb) / .12);
    transform: translateY(-1px);
}
:where(.page-settings) .action-card .ac-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
:where(.page-settings) .ac-icon.blue { background:var(--s-blue-lt);   color:var(--s-blue); }
:where(.page-settings) .ac-icon.orange { background:var(--s-orange-lt); color:var(--s-orange); }
:where(.page-settings) .action-card .ac-text h4 { font-size:14px;font-weight:700;margin:0 0 3px;color:var(--text); }
:where(.page-settings) .action-card .ac-text p { font-size:12px;color:var(--muted);margin:0; }
:where(.page-settings) .ac-arrow { margin-left:auto;color:var(--faint);font-size:14px;flex-shrink:0; }

:where(.page-settings) .profile-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media(max-width:480px){ :where(.page-settings) .profile-detail-grid {grid-template-columns:1fr;} }

:where(.page-settings) .pdetail-item {
    background: var(--s-bg);
    border-radius: 10px;
    padding: 12px 14px;
}
:where(.page-settings) .pdetail-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing:.4px; margin-bottom: 4px; }
:where(.page-settings) .pdetail-val { font-size: 14px; font-weight: 600; color: var(--text); }

:where(.page-settings) .users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
:where(.page-settings) .user-card {
    background: var(--s-white);
    border: 1.5px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--s-shadow);
    position: relative;
}
:where(.page-settings) .user-card .u-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
:where(.page-settings) .u-info { flex: 1; min-width: 0; }
:where(.page-settings) .u-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
:where(.page-settings) .u-username { font-size: 12px; color: var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-family: monospace; }
:where(.page-settings) .u-role {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 4px;
}
:where(.page-settings) .u-role.admin { background:var(--primary-light);color:var(--primary); }
:where(.page-settings) .u-role.doctor { background:#e6f4ea;color:#1e8e3e; }
:where(.page-settings) .u-role.staff { background:#fff3e0;color:#f57c00; }
:where(.page-settings) .u-role.cashier { background:#f3e5f5;color:#7c3aed; }
:where(.page-settings) .u-role.technician { background:#e0f2fe;color:#0284c7; }
:where(.page-settings) .u-del {
    background: none;
    border: none;
    cursor: pointer;
    color: #ddd;
    font-size: 16px;
    padding: 4px;
    transition: color .15s;
    flex-shrink: 0;
}
:where(.page-settings) .u-del:hover { color: var(--s-red); }
:where(.page-settings) .me-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    background: var(--s-blue-lt);
    color: var(--s-blue);
    padding: 2px 7px;
    border-radius: 99px;
    font-weight: 700;
}

:where(.page-settings) .add-user-card {
    background: linear-gradient(135deg, var(--primary-light), #e8f5e9);
    border: 1.5px dashed #90caf9;
    border-radius: var(--s-radius);
    padding: 22px;
    margin-bottom: 20px;
}
:where(.page-settings) .sf-group { margin-bottom: 16px; }
:where(.page-settings) .sf-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 6px;
}
:where(.page-settings) .sf-label .req { color: var(--s-red); }
:where(.page-settings) .sf-input, :where(.page-settings) .sf-select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--s-border);
    border-radius: 9px;
    font-size: 14px;
    color: var(--text);
    background: var(--s-white);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
:where(.page-settings) .sf-input:focus, :where(.page-settings) .sf-select:focus {
    border-color: var(--s-blue);
    box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .12);
    outline: none;
}

:where(.page-settings) .s-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 20px;
}
:where(.page-settings) .s-alert.success {
    background: var(--s-green-lt);
    border: 1.5px solid #a8d5b5;
    color: #145c28;
}
:where(.page-settings) .s-alert.danger {
    background: var(--s-red-lt);
    border: 1.5px solid #f0aeab;
    color: #8c1c18;
}

/* Role select block styles */
:where(.page-settings) .role-block {
    display: none;
    margin-top: 14px;
    border-radius: 10px;
    padding: 14px;
}
:where(.page-settings) .role-block.active { display: block; }
:where(.page-settings) .role-block.doctor { background:var(--primary-light);border:2px solid var(--primary); }
:where(.page-settings) .role-block.technician { background:#f0f9ff;border:2px solid #0ea5e9; }

/* ─────────── settings_password.php  →  .page-settings_password ─────────── */
:where(.page-settings_password) .edit-page {
    max-width: 500px;
    margin: 0 auto;
}
:where(.page-settings_password) .edit-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
:where(.page-settings_password) .back-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6368;
    text-decoration: none;
    transition: all .15s;
}
:where(.page-settings_password) .back-btn:hover {
    border-color: #f57c00;
    color: #f57c00;
    background: #fff3e0;
}
:where(.page-settings_password) .edit-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
:where(.page-settings_password) .edit-card {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,.10);
    padding: 24px;
}
:where(.page-settings_password) .info-box {
    background: #fff8e1;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #7c5200;
}
:where(.page-settings_password) .sf-group { margin-bottom: 20px; }
:where(.page-settings_password) .sf-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 8px;
}
:where(.page-settings_password) .sf-label .req { color: #d93025; }
:where(.page-settings_password) .pass-wrap {
    position: relative;
}
:where(.page-settings_password) .sf-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: 15px;
    color: var(--text);
    transition: all .15s;
}
:where(.page-settings_password) .sf-input:focus {
    border-color: #f57c00;
    box-shadow: 0 0 0 3px rgba(245,124,0,.12);
    outline: none;
}
:where(.page-settings_password) .pass-wrap .sf-input { padding-right: 50px; }
:where(.page-settings_password) .pass-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--faint);
    font-size: 16px;
    padding: 4px;
}
:where(.page-settings_password) .pass-eye:hover { color: #f57c00; }
:where(.page-settings_password) .strength-bar {
    height: 5px;
    background: #eee;
    border-radius: 99px;
    overflow: hidden;
    margin-top: 8px;
}
:where(.page-settings_password) .strength-fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    transition: all .3s;
}
:where(.page-settings_password) .strength-text {
    font-size: 12px;
    margin-top: 4px;
}
:where(.page-settings_password) .btn-save {
    width: 100%;
    padding: 14px;
    background: #f57c00;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
}
:where(.page-settings_password) .btn-save:hover {
    background: #d56700;
}
:where(.page-settings_password) .alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}
:where(.page-settings_password) .alert-success {
    background: #e6f4ea;
    border: 1.5px solid #a8d5b5;
    color: #1e8e3e;
}
:where(.page-settings_password) .alert-danger {
    background: #fce8e6;
    border: 1.5px solid #f0aeab;
    color: #d93025;
}

/* ─────────── settings_profile.php  →  .page-settings_profile ─────────── */
:where(.page-settings_profile) .edit-page {
    max-width: 500px;
    margin: 0 auto;
}
:where(.page-settings_profile) .edit-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
:where(.page-settings_profile) .back-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6368;
    text-decoration: none;
    transition: all .15s;
}
:where(.page-settings_profile) .back-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}
:where(.page-settings_profile) .edit-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
:where(.page-settings_profile) .edit-card {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,.10);
    padding: 24px;
}
:where(.page-settings_profile) .sf-group { margin-bottom: 20px; }
:where(.page-settings_profile) .sf-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 8px;
}
:where(.page-settings_profile) .sf-label .req { color: #d93025; }
:where(.page-settings_profile) .sf-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: 15px;
    color: var(--text);
    transition: all .15s;
}
:where(.page-settings_profile) .sf-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .12);
    outline: none;
}
:where(.page-settings_profile) .sf-input.readonly {
    background: var(--surface-2);
    color: var(--muted);
    cursor: not-allowed;
}
:where(.page-settings_profile) .btn-save {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
}
:where(.page-settings_profile) .btn-save:hover {
    background: var(--primary-dark);
}
:where(.page-settings_profile) .alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}
:where(.page-settings_profile) .alert-success {
    background: #e6f4ea;
    border: 1.5px solid #a8d5b5;
    color: #1e8e3e;
}
:where(.page-settings_profile) .alert-danger {
    background: #fce8e6;
    border: 1.5px solid #f0aeab;
    color: #d93025;
}

/* ─────────── technician_dashboard.php  →  .page-technician_dashboard ─────────── */
:where(.page-technician_dashboard) {
    --tech-primary: var(--primary);
    --tech-primary-light: var(--primary-light);
    --tech-success: #10b981;
    --tech-warning: #f59e0b;
    --tech-danger: #ef4444;
    --tech-info: var(--primary);
}

:where(.page-technician_dashboard) .tech-header {
    background: linear-gradient(135deg, var(--tech-primary) 0%, var(--primary) 100%);
    color: white;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

:where(.page-technician_dashboard) .tech-avatar {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    border: 3px solid rgba(255,255,255,0.3);
}

:where(.page-technician_dashboard) .tech-info h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
}

:where(.page-technician_dashboard) .tech-info p {
    opacity: 0.9;
    margin: 0;
}

:where(.page-technician_dashboard) .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

:where(.page-technician_dashboard) .stat-box {
    background: var(--surface);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--line);
    text-align: center;
    transition: all 0.2s;
}

:where(.page-technician_dashboard) .stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

:where(.page-technician_dashboard) .stat-box.new { border-top: 4px solid var(--tech-primary); }
:where(.page-technician_dashboard) .stat-box.progress { border-top: 4px solid var(--tech-warning); }
:where(.page-technician_dashboard) .stat-box.review { border-top: 4px solid var(--tech-info); }
:where(.page-technician_dashboard) .stat-box.completed { border-top: 4px solid var(--tech-success); }

:where(.page-technician_dashboard) .stat-number {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 4px;
}

:where(.page-technician_dashboard) .stat-box.new .stat-number { color: var(--tech-primary); }
:where(.page-technician_dashboard) .stat-box.progress .stat-number { color: var(--tech-warning); }
:where(.page-technician_dashboard) .stat-box.review .stat-number { color: var(--tech-info); }
:where(.page-technician_dashboard) .stat-box.completed .stat-number { color: var(--tech-success); }

:where(.page-technician_dashboard) .stat-label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
}

:where(.page-technician_dashboard) .work-section {
    margin-bottom: 24px;
}

:where(.page-technician_dashboard) .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
}

:where(.page-technician_dashboard) .section-header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

:where(.page-technician_dashboard) .badge {
    background: #e5e7eb;
    color: var(--text-2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

:where(.page-technician_dashboard) .work-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    transition: all 0.2s;
}

:where(.page-technician_dashboard) .work-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

:where(.page-technician_dashboard) .work-card.priority-high {
    border-left: 4px solid var(--tech-danger);
}

:where(.page-technician_dashboard) .work-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
}

:where(.page-technician_dashboard) .patient-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

:where(.page-technician_dashboard) .work-type {
    color: var(--muted);
    font-size: 14px;
}

:where(.page-technician_dashboard) .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

:where(.page-technician_dashboard) .status-new { background: var(--primary-light); color: var(--primary-dark); }
:where(.page-technician_dashboard) .status-in_progress { background: #fef3c7; color: #92400e; }
:where(.page-technician_dashboard) .status-review { background: var(--primary-light); color: var(--primary-dark); }
:where(.page-technician_dashboard) .status-completed { background: #d1fae5; color: #065f46; }

:where(.page-technician_dashboard) .work-details {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

:where(.page-technician_dashboard) .detail-tag {
    background: var(--surface-2);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

:where(.page-technician_dashboard) .detail-tag i {
    color: var(--tech-primary);
}

:where(.page-technician_dashboard) .deadline-warning {
    color: var(--tech-danger);
    font-weight: 600;
}

:where(.page-technician_dashboard) .doctor-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
    padding: 8px;
    background: var(--surface-2);
    border-radius: 8px;
}

:where(.page-technician_dashboard) .doctor-avatar {
    width: 28px;
    height: 28px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 12px;
}

:where(.page-technician_dashboard) .status-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

:where(.page-technician_dashboard) .status-select {
    padding: 8px 12px;
    border: 2px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    flex: 1;
}

:where(.page-technician_dashboard) .comment-input {
    padding: 8px 12px;
    border: 2px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    flex: 2;
}

:where(.page-technician_dashboard) .btn-update {
    background: var(--tech-primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

:where(.page-technician_dashboard) .btn-update:hover {
    background: var(--primary);
}

:where(.page-technician_dashboard) .empty-state {
    text-align: center;
    padding: 40px;
    color: var(--muted);
}

:where(.page-technician_dashboard) .empty-state i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}

:where(.page-technician_dashboard) .notes-box {
    margin-top: 12px;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 8px;
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 768px) {
    :where(.page-technician_dashboard) .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    :where(.page-technician_dashboard) .tech-header {
        flex-direction: column;
        text-align: center;
    }
    
    :where(.page-technician_dashboard) .status-form {
        flex-direction: column;
    }
}

/* ─────────── technicians.php  →  .page-technicians ─────────── */
/* Modal styles */
:where(.page-technicians) .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}
:where(.page-technicians) .modal-overlay.active {
    display: flex;
}
:where(.page-technicians) .modal-content {
    background: var(--surface);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlide 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
@keyframes modalSlide {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
:where(.page-technicians) .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-light) 0%, white 100%);
    border-radius: 16px 16px 0 0;
}
:where(.page-technicians) .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}
:where(.page-technicians) .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--muted);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}
:where(.page-technicians) .modal-close:hover {
    background: var(--surface-2);
    color: var(--text);
}
:where(.page-technicians) .modal-body {
    padding: 24px;
}
:where(.page-technicians) .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: var(--surface-2);
    border-radius: 0 0 16px 16px;
}

/* Ish topshirish modal (katta) */
:where(.page-technicians) .modal-large {
    max-width: 700px;
}

/* Status badges */
:where(.page-technicians) .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
:where(.page-technicians) .status-new { background: var(--primary-light); color: var(--primary-dark); }
:where(.page-technicians) .status-in_progress { background: #fef3c7; color: #92400e; }
:where(.page-technicians) .status-review { background: #fce7f3; color: #9d174d; }
:where(.page-technicians) .status-completed { background: #d1fae5; color: #065f46; }
:where(.page-technicians) .status-cancelled { background: #fee2e2; color: #991b1b; }

/* Priority badges */
:where(.page-technicians) .priority-high { 
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}
:where(.page-technicians) .priority-normal {
    background: #6b7280;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
}

/* Work cards */
:where(.page-technicians) .work-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
:where(.page-technicians) .work-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border-color: var(--primary);
}
:where(.page-technicians) .work-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary);
}
:where(.page-technicians) .work-card.status-in_progress::before { background: #f59e0b; }
:where(.page-technicians) .work-card.status-review::before { background: #ec4899; }
:where(.page-technicians) .work-card.status-completed::before { background: #10b981; }

:where(.page-technicians) .work-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
}
:where(.page-technicians) .work-patient {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 4px;
}
:where(.page-technicians) .work-type {
    color: var(--muted);
    font-size: 14px;
}
:where(.page-technicians) .work-meta {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
    flex-wrap: wrap;
}
:where(.page-technicians) .work-meta i {
    color: var(--primary);
    margin-right: 4px;
}

/* Texnik kartochkasi */
:where(.page-technicians) .tech-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--line);
    transition: all 0.2s;
    position: relative;
}
:where(.page-technicians) .tech-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
:where(.page-technicians) .tech-avatar {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
}
:where(.page-technicians) .tech-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 4px;
}
:where(.page-technicians) .tech-specialty {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}
:where(.page-technicians) .tech-lab {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 12px;
}
:where(.page-technicians) .tech-stats {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
:where(.page-technicians) .tech-stat {
    text-align: center;
    flex: 1;
}
:where(.page-technicians) .tech-stat-value {
    font-weight: 700;
    font-size: 18px;
    color: var(--primary);
}
:where(.page-technicians) .tech-stat-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
}

/* Grid layouts */
:where(.page-technicians) .tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
:where(.page-technicians) .works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Action buttons */
:where(.page-technicians) .btn-floating {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
    transition: all 0.3s;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(.page-technicians) .btn-floating:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 20px 35px -10px rgba(0,0,0,0.4);
}

/* Responsive */
@media (max-width: 768px) {
    :where(.page-technicians) .tech-grid {
        grid-template-columns: 1fr;
    }
    :where(.page-technicians) .modal-content {
        width: 95%;
        margin: 10px;
    }
    :where(.page-technicians) .work-header {
        flex-direction: column;
        gap: 8px;
    }
    :where(.page-technicians) .btn-floating {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
    }
}

/* Form styles */
:where(.page-technicians) .form-select, :where(.page-technicians) .form-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    margin-bottom: 16px;
}
:where(.page-technicians) .form-select:focus, :where(.page-technicians) .form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
:where(.page-technicians) .form-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
:where(.page-technicians) .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
    :where(.page-technicians) .form-row {
        grid-template-columns: 1fr;
    }
}

/* Tabs */
:where(.page-technicians) .tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--line);
    padding-bottom: 0;
    overflow-x: auto;
}
:where(.page-technicians) .tab {
    padding: 12px 20px;
    background: none;
    border: none;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: all 0.2s;
}
:where(.page-technicians) .tab.active {
    color: var(--primary);
}
:where(.page-technicians) .tab.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
}
:where(.page-technicians) .tab:hover {
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 8px 8px 0 0;
}

/* Stats cards */
:where(.page-technicians) .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
:where(.page-technicians) .stat-card {
    background: var(--surface);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--line);
    text-align: center;
}
:where(.page-technicians) .stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 8px;
}
:where(.page-technicians) .stat-label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}
@media (max-width: 768px) {
    :where(.page-technicians) .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Autocomplete styles */
:where(.page-technicians) .patient-search-container {
    position: relative;
}
:where(.page-technicians) .patient-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 2px solid var(--primary);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
:where(.page-technicians) .patient-search-results.active {
    display: block;
}
:where(.page-technicians) .patient-result-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    transition: background 0.2s;
}
:where(.page-technicians) .patient-result-item:hover {
    background: var(--primary-light);
}
:where(.page-technicians) .patient-result-item:last-child {
    border-bottom: none;
}
:where(.page-technicians) .patient-result-name {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
}
:where(.page-technicians) .patient-result-phone {
    font-size: 12px;
    color: var(--muted);
}

/* ─────────── treatment_add.php  →  .page-treatment_add ─────────── */
:where(.page-treatment_add) .svc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
    gap: 10px;
}
:where(.page-treatment_add) .svc-item:last-child { border-bottom: none; }
:where(.page-treatment_add) .svc-item:hover { background: #f5f8ff; }
:where(.page-treatment_add) .svc-item.selected { background: var(--primary-light); }

:where(.page-treatment_add) .svc-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}
:where(.page-treatment_add) .svc-item-price {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
:where(.page-treatment_add) .svc-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #cdd6e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    background: var(--surface);
}
:where(.page-treatment_add) .svc-check.checked {
    background: var(--primary, var(--primary));
    border-color: var(--primary, var(--primary));
    color: #fff;
}

:where(.page-treatment_add) .sel-item {
    border: 1.5px solid #d0dff8;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
}
:where(.page-treatment_add) .sel-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 10px;
}
:where(.page-treatment_add) .sel-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
    line-height: 1.4;
}
:where(.page-treatment_add) .sel-item-prices {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
:where(.page-treatment_add) .sel-item-total {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary, var(--primary));
    background: var(--primary-light);
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
:where(.page-treatment_add) .qty-ctrl {
    display: flex;
    align-items: center;
}
:where(.page-treatment_add) .qty-btn {
    width: 30px;
    height: 30px;
    border: 1.5px solid #cdd6e0;
    background: var(--surface-2);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}
:where(.page-treatment_add) .qty-btn:hover { background: #e0e0e0; }
:where(.page-treatment_add) .qty-num {
    width: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
:where(.page-treatment_add) .tooth-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-light);
    color: var(--primary, var(--primary));
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
}
:where(.page-treatment_add) .sel-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--faint);
    font-size: 18px;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.1s;
    flex-shrink: 0;
}
:where(.page-treatment_add) .sel-remove:hover { color: var(--danger, #d93025); }

/* Chegirma input */
:where(.page-treatment_add) .disc-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
:where(.page-treatment_add) .disc-input {
    width: 90px;
    padding: 5px 8px;
    border: 1.5px solid #ffc107;
    border-radius: 6px 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #e65100;
    outline: none;
    box-sizing: border-box;
    border-right: none;
}
:where(.page-treatment_add) .disc-type-btn {
    padding: 5px 11px;
    border: 1.5px solid #ffc107;
    border-radius: 0 6px 6px 0;
    background: #fff8e1;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    color: #e65100;
    min-width: 46px;
    white-space: nowrap;
}
:where(.page-treatment_add) .disc-info {
    font-size: 11px;
    color: #e65100;
    font-weight: 600;
}

/* ─────────── index.php  →  .page-index ─────────── */
        :where(.page-index) * { margin: 0; padding: 0; box-sizing: border-box; }

        body:where(.page-index) {
            font-family: var(--font);
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, #2c5f8a 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        :where(.page-index) .login-wrap {
            background: var(--surface);
            border-radius: 18px;
            box-shadow: 0 24px 64px rgba(0,0,0,0.22);
            width: 100%;
            max-width: 420px;
            overflow: hidden;
        }

        :where(.page-index) .login-top {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            padding: 36px 40px 30px;
            text-align: center;
            color: #fff;
        }

        :where(.page-index) .login-logo {
            width: 64px;
            height: 64px;
            background: rgba(255,255,255,0.2);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 700;
            margin: 0 auto 16px;
            border: 2px solid rgba(255,255,255,0.35);
        }

        :where(.page-index) .login-top h1 {
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }

        :where(.page-index) .login-top p {
            font-size: 13px;
            opacity: 0.85;
        }

        :where(.page-index) .login-body {
            padding: 32px 36px;
        }

        :where(.page-index) .error-msg {
            background: #ffebee;
            color: #c62828;
            padding: 11px 14px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-left: 4px solid #ef5350;
        }

        :where(.page-index) .warn-msg {
            background: #fff8e1;
            color: #7c5200;
            padding: 11px 14px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-left: 4px solid #f9a825;
        }

        :where(.page-index) .form-group {
            margin-bottom: 18px;
        }

        :where(.page-index) .form-label {
            display: block;
            margin-bottom: 7px;
            font-weight: 600;
            color: var(--text-2);
            font-size: 13px;
        }

        :where(.page-index) .input-wrap {
            position: relative;
        }

        :where(.page-index) .input-wrap i.fa-user,
        :where(.page-index) .input-wrap i.fa-lock {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted);
            font-size: 14px;
        }

        :where(.page-index) .form-input {
            width: 100%;
            padding: 11px 14px 11px 40px;
            border: 1.5px solid var(--line);
            border-radius: 9px;
            font-size: 14px;
            color: var(--text);
            font-family: inherit;
            transition: all 0.3s;
        }

        :where(.page-index) .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.13);
        }

        :where(.page-index) .form-input:disabled {
            background: var(--surface-2);
            color: var(--muted);
            cursor: not-allowed;
        }

        :where(.page-index) .form-input::placeholder {
            color: var(--faint);
        }

        :where(.page-index) .password-wrap {
            position: relative;
        }

        :where(.page-index) .password-wrap .form-input {
            padding-right: 40px;
        }

        :where(.page-index) .toggle-password {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--muted);
            cursor: pointer;
            font-size: 14px;
            padding: 5px;
            transition: color 0.2s;
        }

        :where(.page-index) .toggle-password:hover {
            color: var(--primary);
        }

        :where(.page-index) .btn-login {
            width: 100%;
            padding: 13px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            border: none;
            border-radius: 9px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            font-family: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        :where(.page-index) .btn-login:hover:not(:disabled) {
            opacity: 0.92;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgb(var(--primary-rgb) / 0.38);
        }

        :where(.page-index) .btn-login:disabled {
            background: #b0bec5;
            cursor: not-allowed;
            transform: none;
        }

        /* Countdown timer */
        :where(.page-index) .countdown {
            text-align: center;
            margin-top: 14px;
            font-size: 13px;
            color: var(--muted);
        }
        :where(.page-index) .countdown span {
            font-weight: 700;
            color: #c62828;
        }

        /* Til tugmasi */
        :where(.page-index) .lang-switcher {
            text-align: center;
            margin-top: 18px;
        }
        :where(.page-index) .lang-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border: 1.5px solid var(--line);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-2);
            text-decoration: none;
            transition: all 0.2s;
            background: var(--surface-2);
        }
        :where(.page-index) .lang-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: #eef4fd;
        }

        @media (max-width: 480px) {
            :where(.page-index) .login-top { padding: 28px 24px 22px; }
            :where(.page-index) .login-body { padding: 24px 20px; }
        }
    

/* ════════════════════════════════════════════════════════════════
   8. 3-BOSQICH: til, ovoz bilan yozish, telefondan foto, navbat ekrani
   ════════════════════════════════════════════════════════════════ */

/* ═════════ TIL TANLASH ═════════ */
.user-dropdown-lang {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 12px 8px 16px;
    border-top: var(--border); border-bottom: var(--border);
    color: var(--muted); font-size: 13px;
}
.user-dropdown-lang i { margin-right: 6px; }
.user-dropdown-lang a {
    padding: 4px 9px; border-radius: 8px;
    color: var(--text-2); text-decoration: none; font-weight: 500;
}
.user-dropdown-lang a:hover { background: var(--surface-2); }
.user-dropdown-lang a.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }

.login-lang {
    position: fixed; top: 16px; right: 16px; z-index: 5;
    display: flex; gap: 2px; padding: 3px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.login-lang a {
    padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
    color: rgba(255,255,255,.85); text-decoration: none;
}
.login-lang a.active { background: #fff; color: var(--ink); }

/* ═════════ OVOZ BILAN YOZISH ═════════ */
.voice-bar {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px; min-height: 28px;
}
.voice-btn, .voice-lang {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--muted);
    font: 500 12.5px/1 var(--font); cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.voice-btn:hover, .voice-lang:hover { border-color: var(--primary-soft); color: var(--primary); background: var(--primary-light); }
.voice-lang { padding: 0 8px; font-weight: 700; font-size: 11px; letter-spacing: .3px; }
.voice-live {
    flex: 1; min-width: 0; font-size: 12px; color: var(--faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic;
}
.voice-bar.rec .voice-btn { background: var(--danger); border-color: var(--danger); color: #fff; }
.voice-bar.rec .voice-btn i { animation: voicePulse 1.1s ease-in-out infinite; }
@keyframes voicePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }

/* ═════════ TELEFONDAN FOTO — kompyuter tomoni ═════════ */
.pu-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 16px;
    border: 1px dashed var(--primary-soft); border-radius: var(--radius);
    background: var(--primary-light);
}
.pu-text { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--primary-dark); }
.pu-text i { font-size: 18px; }
.pu-modal { max-width: 400px; }
.pu-qr {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 14px; margin: 0 auto 16px; width: 260px; max-width: 100%;
    background: #fff; border: var(--border); border-radius: var(--radius);
}
.pu-qr svg { width: 220px; height: 220px; display: block; }
.pu-qr .loading { margin: 100px auto; }
.pu-link { font-size: 12px; color: var(--primary); }
.pu-err { color: var(--danger); font-size: 13px; padding: 40px 10px; text-align: center; }
.pu-steps { padding-left: 20px; font-size: 13px; color: var(--text-2); display: grid; gap: 6px; }
.pu-status {
    display: flex; align-items: center; gap: 8px; margin-top: 16px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--surface-2); font-size: 13px; color: var(--muted);
}
.pu-status.ok { background: var(--success-light); color: var(--success); font-weight: 600; }
.pu-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); animation: voicePulse 1.4s ease-in-out infinite; }

/* ═════════ TELEFONDAN FOTO — telefon sahifasi ═════════ */
body.page-mobile_upload { background: var(--bg); }
.mu-wrap {
    max-width: 480px; margin: 0 auto;
    padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.mu-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mu-brand { font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: .3px; }
.mu-card {
    background: var(--surface); border: var(--border); border-radius: var(--radius-lg);
    padding: 18px; box-shadow: var(--shadow);
}
.mu-card .form-label { margin-top: 14px; }
.mu-patient { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: var(--border); }
.mu-pname { font-weight: 700; font-size: 16px; color: var(--text); }
.mu-pid { font-size: 12.5px; color: var(--muted); }
.mu-types { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-type {
    padding: 8px 12px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface);
    font: 500 13.5px/1.2 var(--font); color: var(--text-2); cursor: pointer;
}
.mu-type.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.mu-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-top: 18px; }
.mu-shot, .mu-gallery {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 104px; border-radius: var(--radius);
    font-weight: 600; font-size: 15px; cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mu-shot { background: var(--primary); color: #fff; box-shadow: 0 10px 24px -10px rgb(var(--primary-rgb) / .8); }
.mu-shot i { font-size: 28px; }
.mu-gallery { background: var(--surface-2); color: var(--text-2); border: var(--border); }
.mu-gallery i { font-size: 22px; color: var(--primary); }
.mu-shot:active, .mu-gallery:active { transform: scale(.98); }
.mu-actions label.disabled { opacity: .4; pointer-events: none; }
.mu-list { display: grid; gap: 8px; margin-top: 14px; }
.mu-item {
    display: flex; gap: 12px; align-items: center;
    padding: 8px; background: var(--surface); border: var(--border); border-radius: var(--radius);
}
.mu-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--surface-2); }
.mu-item-body { flex: 1; min-width: 0; }
.mu-item-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-bar { height: 4px; background: var(--line); border-radius: 4px; margin: 6px 0 4px; overflow: hidden; }
.mu-bar span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s ease; }
.mu-item-state { font-size: 12px; color: var(--muted); }
.mu-item.ok .mu-bar span { background: var(--success); width: 100% !important; }
.mu-item.ok .mu-item-state { color: var(--success); font-weight: 600; }
.mu-item.err .mu-bar span { background: var(--danger); }
.mu-item.err .mu-item-state { color: var(--danger); }
.mu-hint { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 14px; }
.mu-expired { text-align: center; padding: 36px 20px; }
.mu-expired i { font-size: 34px; color: var(--warning); margin-bottom: 12px; display: block; }
.mu-expired h1 { font-size: 19px; margin-bottom: 8px; }
.mu-expired p { font-size: 14px; color: var(--muted); }

/* ═════════ NAVBAT — boshqaruv paneli ═════════ */
.q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.q-title { font-size: 22px; font-weight: 700; }
.q-sub { color: var(--muted); font-size: 13.5px; max-width: 60ch; }
.q-table .q-time { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-tv-name { font-size: 12px; color: var(--faint); }
.q-doc { display: inline-flex; align-items: center; gap: 8px; }
.q-doc i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.q-room { max-width: 160px; padding: 7px 10px; font-size: 13px; }
.q-act { text-align: right; }
.q-table tr.q-now td { background: var(--success-light); }
.q-table tr.q-done td { opacity: .55; }

/* ═════════ NAVBAT — TV ekran ═════════ */
body.page-queue_tv {
    background: radial-gradient(1200px 600px at 20% 0%, #10323b 0%, var(--bg) 60%);
    color: var(--text);
    overflow: hidden;
}
.qtv { height: 100vh; display: flex; flex-direction: column; padding: 2.2vw 2.6vw; gap: 2vw; }
.qtv-top { display: flex; align-items: center; gap: 2vw; }
.qtv-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.6vw; color: #fff; }
.qtv-brand .sidebar-logo { width: 3vw; height: 3vw; min-width: 36px; min-height: 36px; font-size: 1.1vw; }
.qtv-date { margin-left: auto; font-size: 1.4vw; color: var(--muted); }
.qtv-clock { font-size: 3.2vw; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.qtv-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 2vw; }

.qtv-call {
    --call-color: var(--primary);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 4vw; border-radius: 2vw;
    background: var(--surface); border: 1px solid var(--line);
}
.qtv-call::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: .8vw;
    background: var(--call-color); opacity: .25; transition: opacity .3s ease;
}
.qtv-call.on::before { opacity: 1; }
.qtv-call-label { font-size: 2vw; color: var(--muted); font-weight: 500; }
.qtv-call-name {
    font-size: 7.4vw; line-height: 1.02; font-weight: 800; color: #fff;
    letter-spacing: -.035em; margin: .6vw 0 1.4vw;
    overflow-wrap: anywhere;
}
.qtv-call:not(.on) .qtv-call-name { color: var(--line-strong); }
.qtv-call-to { font-size: 2.4vw; color: var(--ink-text); }
.qtv-call-to b { color: #fff; background: var(--call-color); padding: .1em .5em; border-radius: .4em; font-weight: 700; }
.qtv-call.pulse { animation: qtvPulse 1.4s ease-out 3; }
@keyframes qtvPulse {
    0%   { box-shadow: 0 0 0 0 rgb(var(--primary-rgb) / .6); }
    100% { box-shadow: 0 0 0 3vw rgb(var(--primary-rgb) / 0); }
}

.qtv-side { display: grid; grid-template-rows: auto 1fr; gap: 2vw; min-height: 0; }
.qtv-block { background: var(--surface); border: 1px solid var(--line); border-radius: 1.4vw; padding: 1.6vw 1.8vw; min-height: 0; overflow: hidden; }
.qtv-block h2 { font-size: 1.35vw; color: var(--muted); font-weight: 600; margin-bottom: 1vw; display: flex; gap: .7vw; align-items: center; }
.qtv-list { list-style: none; display: grid; gap: .5vw; }
.qtv-list li {
    display: grid; grid-template-columns: 6vw 1fr auto; align-items: center; gap: 1vw;
    padding: .8vw 0; border-bottom: 1px solid var(--line);
    font-size: 1.7vw;
}
.qtv-list li:last-child { border-bottom: 0; }
.qtv-time { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.qtv-name { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtv-doc { font-size: 1.2vw; color: var(--muted); display: flex; align-items: center; gap: .6vw; white-space: nowrap; }
.qtv-doc i { width: .8vw; height: .8vw; min-width: 8px; min-height: 8px; border-radius: 50%; display: inline-block; }
.qtv-list .qtv-empty { display: block; color: var(--faint); font-size: 1.4vw; border: 0; }
.qtv-sound {
    position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%);
    padding: 14px 24px; border-radius: 999px; border: 0;
    background: var(--primary); color: #fff; font: 600 16px/1 var(--font); cursor: pointer;
    box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
    .qtv-main { grid-template-columns: 1fr; }
    .qtv-list li { font-size: 16px; grid-template-columns: 60px 1fr auto; }
    .qtv-doc, .qtv-block h2, .qtv-date { font-size: 13px; }
    .qtv-call-name { font-size: 48px; }
    .qtv-call-label, .qtv-call-to { font-size: 18px; }
    .qtv-clock { font-size: 28px; }
    .qtv-brand { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   9. SMS XABARNOMALAR MARKAZI (notifications.php)
   ════════════════════════════════════════════════════════════════ */
.sx { max-width: 1180px; }
.sx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sx-title { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.sx-title i { color: var(--primary); }
.sx-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.sx-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sx-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.sx-pill i { font-size: 7px; }
.sx-pill.on  { background: var(--success-light); color: var(--success); }
.sx-pill.off { background: var(--danger-light);  color: var(--danger); }
.sx-muted { color: var(--muted); font-size: 12.5px; }
.sx-right { text-align: right; }
.sx-nowrap { white-space: nowrap; }
.sx-intro { color: var(--text-2); font-size: 13.5px; margin-bottom: 16px; max-width: 80ch; }

/* Tablar */
.sx-tabs {
    display: flex; gap: 4px; margin-bottom: 18px; padding: 4px;
    background: var(--surface); border: var(--border); border-radius: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sx-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 9px;
    color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.sx-tab:hover { background: var(--surface-2); color: var(--text); }
.sx-tab.active { background: var(--primary); color: #fff; }
.sx-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; }
.sx-count.bad { background: var(--danger); color: #fff; }

/* Statistika */
.sx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.sx-stat { background: var(--surface); border: var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.sx-stat span { font-size: 12.5px; color: var(--muted); }
.sx-stat b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sx-stat b.sm { font-size: 20px; padding-top: 4px; }
.sx-stat small { font-size: 12px; color: var(--faint); }
.sx-stat.bad b { color: var(--danger); }
.sx-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.sx-grid > .card { margin-bottom: 16px; }

/* Holat tekshiruvi */
.sx-checks { list-style: none; display: grid; gap: 10px; margin-bottom: 16px; }
.sx-checks li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.sx-checks li i { font-size: 17px; margin-top: 1px; }
.sx-checks li.ok i  { color: var(--success); }
.sx-checks li.bad   { background: var(--warning-light); }
.sx-checks li.bad i { color: #b7791f; }
.sx-checks b { display: block; font-size: 13.5px; font-weight: 600; }
.sx-checks small { display: block; font-size: 12.5px; color: var(--muted); }
.sx-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sx-form { display: grid; gap: 8px; }
.sx-form .form-label { margin-bottom: 0; margin-top: 4px; }
.sx-form .btn { justify-self: start; margin-top: 4px; }

/* SMS hisoblagich */
.sx-meter { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.sx-meter-n { font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; }
.sx-meter-n.ok   { background: var(--success-light); color: var(--success); }
.sx-meter-n.warn { background: var(--warning-light); color: #a86b00; }
.sx-meter-n.bad  { background: var(--danger-light);  color: var(--danger); }
.sx-meter-bar { flex: 1; min-width: 60px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.sx-meter-bar i { display: block; height: 100%; background: var(--primary); border-radius: 4px; transition: width .15s ease; }

/* Shablon kartasi */
.sx-tpl { scroll-margin-top: 80px; }
.sx-tpl-title { display: flex; align-items: center; gap: 12px; }
.sx-tpl-title .card-title { line-height: 1.2; }
.sx-tpl-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sx-tpl-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.sx-tpl-edit { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sx-tpl-text { font-size: 14px; line-height: 1.6; min-height: 120px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chip {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 8px;
    border: 1px dashed var(--primary-soft); background: var(--primary-light); color: var(--primary-dark);
    font: 600 12.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer;
}
.sx-chip em { font: 400 11.5px/1 var(--font); color: var(--muted); font-style: normal; }
.sx-chip:hover { border-style: solid; background: var(--surface); }
.sx-tpl-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sx-tpl-foot .btn-primary { margin-left: auto; }

.sx-preview { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; background: var(--surface-2); border-radius: var(--radius); border: var(--border); }
.sx-preview-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.sx-bubble {
    align-self: flex-start; max-width: 100%;
    background: var(--surface); border: var(--border); border-radius: 16px 16px 16px 4px;
    padding: 11px 14px; font-size: 13.5px; line-height: 1.5; color: var(--text);
    box-shadow: var(--shadow); overflow-wrap: anywhere;
}
.sx-warn { font-size: 12.5px; color: #8a5a00; background: var(--warning-light); padding: 8px 10px; border-radius: 8px; }
.sx-test { display: flex; gap: 8px; margin-top: auto; }
.sx-test .form-control { padding: 7px 10px; font-size: 13px; }

/* Kalitlar (switch) */
.sx-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--text-2); user-select: none; }
.sx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sx-switch span { width: 38px; height: 22px; border-radius: 11px; background: var(--line-strong); position: relative; flex-shrink: 0; transition: background-color .15s ease; }
.sx-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s ease; }
.sx-switch input:checked + span { background: var(--primary); }
.sx-switch input:checked + span::after { transform: translateX(16px); }
.sx-switch input:focus-visible + span { box-shadow: var(--ring); }
.sx-switch.big { font-weight: 600; font-size: 14.5px; color: var(--text); margin-bottom: 14px; }

/* Filtr va ro'yxatlar */
.sx-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sx-filter label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.sx-filter .form-control { width: auto; min-width: 140px; padding: 7px 10px; font-size: 13px; }
.sx-filter input[type="number"] { width: 130px; min-width: 0; }
.sx-seg { padding: 6px 12px; border-radius: 999px; border: var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; font-size: 13px; }
.sx-seg.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sx-bulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: var(--border); background: var(--surface-2); }
.sx-bulk-btns { margin-left: auto; display: flex; gap: 8px; }
.sx-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.sx-cb { width: 36px; }
.sx-list tr.sx-dim td { opacity: .6; }
.sx-money { font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-phone.bad { color: var(--danger); font-size: 12.5px; }
.sx-err { display: block; color: var(--danger); font-size: 11.5px; margin-top: 2px; max-width: 280px; }

/* Jurnal */
.sx-type { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); border: var(--border); white-space: nowrap; }
.sx-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sx-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sx-status.ok   { background: var(--success-light); color: var(--success); }
.sx-status.bad  { background: var(--danger-light);  color: var(--danger); }
.sx-status.wait { background: var(--info-light);    color: var(--info); }
.sx-logs td { vertical-align: top; }
.sx-body { max-width: 340px; }
.sx-body summary { cursor: pointer; font-size: 13px; color: var(--text-2); list-style: none; }
.sx-body summary::-webkit-details-marker { display: none; }
.sx-body pre { white-space: pre-wrap; font: 13px/1.5 var(--font); background: var(--surface-2); padding: 8px 10px; border-radius: 8px; margin-top: 6px; }
.sx-logs form { display: inline; }

/* Sozlamalar */
.sx-settings .card { margin-bottom: 16px; }
.sx-fields { display: grid; gap: 4px; }
.sx-fields.two { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.sx-span { grid-column: 1 / -1; }
.sx-fields code, .sx-settings .form-label code { font-size: 11.5px; color: var(--primary-dark); background: var(--primary-light); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.sx-code { display: grid; gap: 4px; margin: 10px 0; }
.sx-code span { font-size: 12px; color: var(--muted); }
.sx-code code { display: block; padding: 9px 12px; border-radius: 8px; background: var(--ink); color: #cfe7e4; font-size: 12.5px; overflow-x: auto; white-space: nowrap; }
.sx-save { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; z-index: 5; }
.sx-save .btn { box-shadow: var(--shadow-lg); }

@media (max-width: 992px) {
    .sx-grid, .sx-tpl-body { grid-template-columns: 1fr; }
    .sx-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .sx-fields.two { grid-template-columns: 1fr; }
    .sx-tab span { display: none; }
    .sx-tab.active span { display: inline; }
    .sx-bulk-btns { margin-left: 0; width: 100%; }
    .sx-save { bottom: 76px; }
}

/* ════════════════════════════════════════════════════════════════
   10. SHIKOYAT / QABUL SABABI — TEZKOR SO'ZLAR (includes/complaint_chips.php)
   ════════════════════════════════════════════════════════════════ */
.cc-box { margin: 2px 0 10px; display: grid; gap: 6px; }
.cc-hint { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.cc-hint i { color: var(--warning); }
.cc-row { display: flex; align-items: flex-start; gap: 8px; }
.cc-group {
    flex: 0 0 64px; padding-top: 6px;
    font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .3px;
}
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2);
    font: 500 13px/1.2 var(--font); cursor: pointer; user-select: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.cc-chip:hover { border-color: var(--primary); color: var(--primary); }
.cc-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.cc-chip.on::before { content: '\2713'; font-size: 11px; font-weight: 700; }
.cc-chip:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 768px) {
    .cc-row { flex-direction: column; gap: 4px; }
    .cc-group { flex: none; padding-top: 0; }
    .cc-chip { padding: 8px 12px; font-size: 13.5px; }
}

/* ════════════════════════════════════════════════════════════════
   7. PROTSEDURA QO'SHISH — TISH TANLASH (haqiqiy tish shakllari)
   procedures_add.php → buildTeethHtml() yaratadigan SVG tishlar
   ════════════════════════════════════════════════════════════════ */
.page-procedures_add {
    --tooth-enamel:   #fdfcf8;
    --tooth-enamel-2: #f3efe4;
    --tooth-root:     #eadfc8;
    --tooth-stroke:   #b8ab92;
    --tooth-groove:   #d3c7b0;
}

/* Jag' qatorlari — tishlar tishlash chizig'iga qarab tekislanadi */
.page-procedures_add .teeth-grid-adult,
.page-procedures_add .teeth-grid-child { gap: 2px; align-items: end; }
.page-procedures_add .teeth-jaw-block + .teeth-jaw-block .teeth-grid-adult,
.page-procedures_add .teeth-jaw-block + .teeth-jaw-block .teeth-grid-child { align-items: start; }

/* Tish tugmasi */
.page-procedures_add .tooth-btn.tooth-shape {
    position: relative;
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    padding: 6px 2px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: var(--muted);
    transition: background-color .15s ease, border-color .15s ease;
}
.page-procedures_add .tooth-btn.tooth-lower { justify-content: flex-start; }

.page-procedures_add .tooth-svg {
    display: block;
    width: 100%;
    max-width: 38px;
    height: auto;
    overflow: visible;
    transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.page-procedures_add .tooth-molar .tooth-svg   { max-width: 44px; }
.page-procedures_add .tooth-incisor .tooth-svg { max-width: 34px; }

.page-procedures_add .tooth-svg path { vector-effect: non-scaling-stroke; transition: fill .15s ease, stroke .15s ease; }
.page-procedures_add .tooth-svg .t-root  { fill: var(--tooth-root);   stroke: var(--tooth-stroke); stroke-width: 1; }
.page-procedures_add .tooth-svg .t-crown { fill: var(--tooth-enamel); stroke: var(--tooth-stroke); stroke-width: 1.2; }
.page-procedures_add .tooth-svg .t-line  { fill: none; stroke: var(--tooth-groove); stroke-width: 1; stroke-linecap: round; }

/* Raqam */
.page-procedures_add .tooth-num {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    transition: background-color .15s ease, color .15s ease;
}

/* Hover */
.page-procedures_add .tooth-btn.tooth-shape:hover {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--text);
}
.page-procedures_add .tooth-btn.tooth-shape:hover .t-crown { fill: #ffffff; stroke: var(--primary); }
.page-procedures_add .tooth-btn.tooth-upper:hover .tooth-svg { transform: translateY(2px); }
.page-procedures_add .tooth-btn.tooth-lower:hover .tooth-svg { transform: translateY(-2px); }

/* Tanlangan */
.page-procedures_add .tooth-btn.tooth-shape.selected {
    background: var(--primary-light);
    border-color: var(--primary-soft);
    box-shadow: none;
    color: var(--primary-dark);
}
.page-procedures_add .tooth-btn.tooth-shape.selected .t-crown { fill: var(--primary); stroke: var(--primary-dark); }
.page-procedures_add .tooth-btn.tooth-shape.selected .t-root  { fill: var(--primary-soft); stroke: var(--primary); }
.page-procedures_add .tooth-btn.tooth-shape.selected .t-line  { stroke: rgb(255 255 255 / .55); }
.page-procedures_add .tooth-btn.tooth-shape.selected .tooth-num { background: var(--primary); color: #fff; }

/* Klaviatura fokusi */
.page-procedures_add .tooth-btn.tooth-shape:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* O'rta chiziq (chap / o'ng yarim) */
.page-procedures_add .teeth-grid-adult > .tooth-btn:nth-child(8)::after,
.page-procedures_add .teeth-grid-child > .tooth-btn:nth-child(5)::after {
    content: '';
    position: absolute;
    right: -2px; top: 12%; bottom: 12%;
    border-right: 1.5px dashed var(--line-strong);
    pointer-events: none;
}

/* Jag' orasidagi tishlash chizig'i */
.page-procedures_add .teeth-jaw-block + .teeth-jaw-block {
    border-top: 1.5px solid var(--line);
    padding-top: 6px;
}

/* Tungi rejim */
html[data-theme="dark"] .page-procedures_add {
    --tooth-enamel: #e9e5da;
    --tooth-root:   #b9ab90;
    --tooth-stroke: #6f6552;
    --tooth-groove: #a89c85;
}
html[data-theme="dark"] .page-procedures_add .tooth-btn.tooth-shape:hover .t-crown { fill: #ffffff; }
html[data-theme="dark"] .page-procedures_add .tooth-btn.tooth-shape.selected .t-root { fill: #2c6f70; }

/* Telefon */
@media (max-width: 768px) {
    .page-procedures_add .tooth-btn.tooth-shape { padding: 4px 1px; gap: 3px; min-height: 0; font-size: 10px; }
    .page-procedures_add .tooth-num { font-size: 10px; padding: 2px 4px; }
    .page-procedures_add .teeth-grid-adult { min-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-procedures_add .tooth-svg { transition: none; }
}

/* Individual (ro'yxatda yo'q) xizmat qo'shish izohi */
.page-procedures_add .custom-svc-hint {
    font-size: 12px; color: var(--muted);
    margin: -2px 0 10px; line-height: 1.45;
}

/* ════════════════════════════════════════════════════════════════
   6. TUNGI REJIM (dark mode)
   <html data-theme="dark"> bo'lganda ishlaydi. Tanlov brauzerda
   saqlanadi (header'dagi 🌙 tugmasi).
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    color-scheme: dark;
    --primary:        #1ea5a2;
    --primary-rgb:    30 165 162;
    --primary-dark:   #178886;
    --primary-light:  #123a3c;
    --primary-soft:   #1b5053;

    --ink:            #08151a;
    --ink-2:          #10252c;
    --ink-text:       #98b2b7;

    --success:        #2fb77f;
    --success-light:  #10332a;
    --danger:         #e86464;
    --danger-light:   #3a1b1f;
    --warning:        #e8ac25;
    --warning-light:  #372c10;
    --info:           #5ea4e8;
    --info-light:     #14273a;

    --bg:             #0c171c;
    --surface:        #122229;
    --surface-2:      #172b33;
    --line:           #22393f;
    --line-strong:    #30494f;
    --text:           #e2ebeb;
    --text-2:         #c3d1d2;
    --muted:          #8fa4a8;
    --faint:          #6c8388;

    --shadow:         0 1px 2px rgba(0,0,0,.3);
    --shadow-lg:      0 14px 34px -10px rgba(0,0,0,.6), 0 4px 10px -4px rgba(0,0,0,.4);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .header { background: rgba(18,34,41,.86); }
html[data-theme="dark"] .sidebar { background-image: linear-gradient(180deg, #0a1a20 0%, #071317 100%); border-right: 1px solid var(--line); }
html[data-theme="dark"] .table tr:hover td { background: #16303a; }
html[data-theme="dark"] .form-control:hover { border-color: #3b575e; }
html[data-theme="dark"] .mini-calendar-grid .day.other-month { color: #3b5157; }
html[data-theme="dark"] .alert-success { color:#8fe0bd; border-color:#1d4a3a; }
html[data-theme="dark"] .alert-danger  { color:#ffb1b1; border-color:#5a2a2f; }
html[data-theme="dark"] .alert-warning { color:#f4d27a; border-color:#5a4817; }
html[data-theme="dark"] .alert-info    { color:#8fd9d6; }
html[data-theme="dark"] .badge-success, html[data-theme="dark"] .status-confirmed { color:#7ddcb3; }
html[data-theme="dark"] .badge-danger,  html[data-theme="dark"] .status-cancelled { color:#ff9f9f; }
html[data-theme="dark"] .badge-warning, html[data-theme="dark"] .status-no_show   { color:#f4cf6e; }
html[data-theme="dark"] .badge-info,    html[data-theme="dark"] .status-scheduled { color:#8cc1f2; }
html[data-theme="dark"] .badge-primary { color:#8fd9d6; }
html[data-theme="dark"] .status-completed { background:#262040; color:#b9a8f5; }
html[data-theme="dark"] .status-pending   { background:#3a2515; color:#f5b683; }
html[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.6); }
html[data-theme="dark"] img { opacity: .94; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color: var(--text); background-color: var(--surface); border-color: var(--line-strong); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--faint); }
html[data-theme="dark"] ::-webkit-calendar-picker-indicator { filter: invert(.8); }
html[data-theme="dark"] canvas { filter: none; }

/* Mavzuni almashtirganda silliq o'tish */
html.theme-anim, html.theme-anim * { transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; }
/* ════════════════════════════════════════════════════════════════
   6. TUNGI REJIM — sahifa ichidagi style="..." ranglarini moslash
   (HTML ichida yozilgan eski ranglar tungi rejimda ham o'qiladigan bo'lsin)
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background:#fff\a "],
html[data-theme="dark"] [style*="background:#fff "],
html[data-theme="dark"] [style$="background:#fff"],
html[data-theme="dark"] [style*="background-color:#fff;"],
html[data-theme="dark"] [style$="background-color:#fff"],
html[data-theme="dark"] [style*="background: #fff;"],
html[data-theme="dark"] [style*="background: #fff\a "],
html[data-theme="dark"] [style*="background: #fff "],
html[data-theme="dark"] [style$="background: #fff"],
html[data-theme="dark"] [style*="background-color: #fff;"],
html[data-theme="dark"] [style$="background-color: #fff"],
html[data-theme="dark"] [style*="background:#ffffff;"],
html[data-theme="dark"] [style*="background:#ffffff\a "],
html[data-theme="dark"] [style*="background:#ffffff "],
html[data-theme="dark"] [style$="background:#ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff;"],
html[data-theme="dark"] [style$="background-color:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff;"],
html[data-theme="dark"] [style*="background: #ffffff\a "],
html[data-theme="dark"] [style*="background: #ffffff "],
html[data-theme="dark"] [style$="background: #ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff;"],
html[data-theme="dark"] [style$="background-color: #ffffff"],
html[data-theme="dark"] [style*="background:white;"],
html[data-theme="dark"] [style*="background:white\a "],
html[data-theme="dark"] [style*="background:white "],
html[data-theme="dark"] [style$="background:white"],
html[data-theme="dark"] [style*="background: white;"],
html[data-theme="dark"] [style*="background: white\a "],
html[data-theme="dark"] [style*="background: white "],
html[data-theme="dark"] [style$="background: white"] { background: var(--surface) !important; }
html[data-theme="dark"] [style*="background:#f8f9fa;"],
html[data-theme="dark"] [style*="background:#f8f9fa\a "],
html[data-theme="dark"] [style*="background:#f8f9fa "],
html[data-theme="dark"] [style$="background:#f8f9fa"],
html[data-theme="dark"] [style*="background-color:#f8f9fa;"],
html[data-theme="dark"] [style$="background-color:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa;"],
html[data-theme="dark"] [style*="background: #f8f9fa\a "],
html[data-theme="dark"] [style*="background: #f8f9fa "],
html[data-theme="dark"] [style$="background: #f8f9fa"],
html[data-theme="dark"] [style*="background-color: #f8f9fa;"],
html[data-theme="dark"] [style$="background-color: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f5f5f5;"],
html[data-theme="dark"] [style*="background:#f5f5f5\a "],
html[data-theme="dark"] [style*="background:#f5f5f5 "],
html[data-theme="dark"] [style$="background:#f5f5f5"],
html[data-theme="dark"] [style*="background-color:#f5f5f5;"],
html[data-theme="dark"] [style$="background-color:#f5f5f5"],
html[data-theme="dark"] [style*="background: #f5f5f5;"],
html[data-theme="dark"] [style*="background: #f5f5f5\a "],
html[data-theme="dark"] [style*="background: #f5f5f5 "],
html[data-theme="dark"] [style$="background: #f5f5f5"],
html[data-theme="dark"] [style*="background-color: #f5f5f5;"],
html[data-theme="dark"] [style$="background-color: #f5f5f5"],
html[data-theme="dark"] [style*="background:#fafafa;"],
html[data-theme="dark"] [style*="background:#fafafa\a "],
html[data-theme="dark"] [style*="background:#fafafa "],
html[data-theme="dark"] [style$="background:#fafafa"],
html[data-theme="dark"] [style*="background-color:#fafafa;"],
html[data-theme="dark"] [style$="background-color:#fafafa"],
html[data-theme="dark"] [style*="background: #fafafa;"],
html[data-theme="dark"] [style*="background: #fafafa\a "],
html[data-theme="dark"] [style*="background: #fafafa "],
html[data-theme="dark"] [style$="background: #fafafa"],
html[data-theme="dark"] [style*="background-color: #fafafa;"],
html[data-theme="dark"] [style$="background-color: #fafafa"],
html[data-theme="dark"] [style*="background:#fafbff;"],
html[data-theme="dark"] [style*="background:#fafbff\a "],
html[data-theme="dark"] [style*="background:#fafbff "],
html[data-theme="dark"] [style$="background:#fafbff"],
html[data-theme="dark"] [style*="background-color:#fafbff;"],
html[data-theme="dark"] [style$="background-color:#fafbff"],
html[data-theme="dark"] [style*="background: #fafbff;"],
html[data-theme="dark"] [style*="background: #fafbff\a "],
html[data-theme="dark"] [style*="background: #fafbff "],
html[data-theme="dark"] [style$="background: #fafbff"],
html[data-theme="dark"] [style*="background-color: #fafbff;"],
html[data-theme="dark"] [style$="background-color: #fafbff"],
html[data-theme="dark"] [style*="background:#f3f4f6;"],
html[data-theme="dark"] [style*="background:#f3f4f6\a "],
html[data-theme="dark"] [style*="background:#f3f4f6 "],
html[data-theme="dark"] [style$="background:#f3f4f6"],
html[data-theme="dark"] [style*="background-color:#f3f4f6;"],
html[data-theme="dark"] [style$="background-color:#f3f4f6"],
html[data-theme="dark"] [style*="background: #f3f4f6;"],
html[data-theme="dark"] [style*="background: #f3f4f6\a "],
html[data-theme="dark"] [style*="background: #f3f4f6 "],
html[data-theme="dark"] [style$="background: #f3f4f6"],
html[data-theme="dark"] [style*="background-color: #f3f4f6;"],
html[data-theme="dark"] [style$="background-color: #f3f4f6"],
html[data-theme="dark"] [style*="background:#f9fafb;"],
html[data-theme="dark"] [style*="background:#f9fafb\a "],
html[data-theme="dark"] [style*="background:#f9fafb "],
html[data-theme="dark"] [style$="background:#f9fafb"],
html[data-theme="dark"] [style*="background-color:#f9fafb;"],
html[data-theme="dark"] [style$="background-color:#f9fafb"],
html[data-theme="dark"] [style*="background: #f9fafb;"],
html[data-theme="dark"] [style*="background: #f9fafb\a "],
html[data-theme="dark"] [style*="background: #f9fafb "],
html[data-theme="dark"] [style$="background: #f9fafb"],
html[data-theme="dark"] [style*="background-color: #f9fafb;"],
html[data-theme="dark"] [style$="background-color: #f9fafb"],
html[data-theme="dark"] [style*="background:#f0f2f5;"],
html[data-theme="dark"] [style*="background:#f0f2f5\a "],
html[data-theme="dark"] [style*="background:#f0f2f5 "],
html[data-theme="dark"] [style$="background:#f0f2f5"],
html[data-theme="dark"] [style*="background-color:#f0f2f5;"],
html[data-theme="dark"] [style$="background-color:#f0f2f5"],
html[data-theme="dark"] [style*="background: #f0f2f5;"],
html[data-theme="dark"] [style*="background: #f0f2f5\a "],
html[data-theme="dark"] [style*="background: #f0f2f5 "],
html[data-theme="dark"] [style$="background: #f0f2f5"],
html[data-theme="dark"] [style*="background-color: #f0f2f5;"],
html[data-theme="dark"] [style$="background-color: #f0f2f5"],
html[data-theme="dark"] [style*="background:#f8fafc;"],
html[data-theme="dark"] [style*="background:#f8fafc\a "],
html[data-theme="dark"] [style*="background:#f8fafc "],
html[data-theme="dark"] [style$="background:#f8fafc"],
html[data-theme="dark"] [style*="background-color:#f8fafc;"],
html[data-theme="dark"] [style$="background-color:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc;"],
html[data-theme="dark"] [style*="background: #f8fafc\a "],
html[data-theme="dark"] [style*="background: #f8fafc "],
html[data-theme="dark"] [style$="background: #f8fafc"],
html[data-theme="dark"] [style*="background-color: #f8fafc;"],
html[data-theme="dark"] [style$="background-color: #f8fafc"],
html[data-theme="dark"] [style*="background:#f5f7fa;"],
html[data-theme="dark"] [style*="background:#f5f7fa\a "],
html[data-theme="dark"] [style*="background:#f5f7fa "],
html[data-theme="dark"] [style$="background:#f5f7fa"],
html[data-theme="dark"] [style*="background-color:#f5f7fa;"],
html[data-theme="dark"] [style$="background-color:#f5f7fa"],
html[data-theme="dark"] [style*="background: #f5f7fa;"],
html[data-theme="dark"] [style*="background: #f5f7fa\a "],
html[data-theme="dark"] [style*="background: #f5f7fa "],
html[data-theme="dark"] [style$="background: #f5f7fa"],
html[data-theme="dark"] [style*="background-color: #f5f7fa;"],
html[data-theme="dark"] [style$="background-color: #f5f7fa"] { background: var(--surface-2) !important; }
html[data-theme="dark"] [style*="background:#fff8e1;"],
html[data-theme="dark"] [style*="background:#fff8e1\a "],
html[data-theme="dark"] [style*="background:#fff8e1 "],
html[data-theme="dark"] [style$="background:#fff8e1"],
html[data-theme="dark"] [style*="background-color:#fff8e1;"],
html[data-theme="dark"] [style$="background-color:#fff8e1"],
html[data-theme="dark"] [style*="background: #fff8e1;"],
html[data-theme="dark"] [style*="background: #fff8e1\a "],
html[data-theme="dark"] [style*="background: #fff8e1 "],
html[data-theme="dark"] [style$="background: #fff8e1"],
html[data-theme="dark"] [style*="background-color: #fff8e1;"],
html[data-theme="dark"] [style$="background-color: #fff8e1"],
html[data-theme="dark"] [style*="background:#fff3e0;"],
html[data-theme="dark"] [style*="background:#fff3e0\a "],
html[data-theme="dark"] [style*="background:#fff3e0 "],
html[data-theme="dark"] [style$="background:#fff3e0"],
html[data-theme="dark"] [style*="background-color:#fff3e0;"],
html[data-theme="dark"] [style$="background-color:#fff3e0"],
html[data-theme="dark"] [style*="background: #fff3e0;"],
html[data-theme="dark"] [style*="background: #fff3e0\a "],
html[data-theme="dark"] [style*="background: #fff3e0 "],
html[data-theme="dark"] [style$="background: #fff3e0"],
html[data-theme="dark"] [style*="background-color: #fff3e0;"],
html[data-theme="dark"] [style$="background-color: #fff3e0"],
html[data-theme="dark"] [style*="background:#fffbeb;"],
html[data-theme="dark"] [style*="background:#fffbeb\a "],
html[data-theme="dark"] [style*="background:#fffbeb "],
html[data-theme="dark"] [style$="background:#fffbeb"],
html[data-theme="dark"] [style*="background-color:#fffbeb;"],
html[data-theme="dark"] [style$="background-color:#fffbeb"],
html[data-theme="dark"] [style*="background: #fffbeb;"],
html[data-theme="dark"] [style*="background: #fffbeb\a "],
html[data-theme="dark"] [style*="background: #fffbeb "],
html[data-theme="dark"] [style$="background: #fffbeb"],
html[data-theme="dark"] [style*="background-color: #fffbeb;"],
html[data-theme="dark"] [style$="background-color: #fffbeb"],
html[data-theme="dark"] [style*="background:#fff3cd;"],
html[data-theme="dark"] [style*="background:#fff3cd\a "],
html[data-theme="dark"] [style*="background:#fff3cd "],
html[data-theme="dark"] [style$="background:#fff3cd"],
html[data-theme="dark"] [style*="background-color:#fff3cd;"],
html[data-theme="dark"] [style$="background-color:#fff3cd"],
html[data-theme="dark"] [style*="background: #fff3cd;"],
html[data-theme="dark"] [style*="background: #fff3cd\a "],
html[data-theme="dark"] [style*="background: #fff3cd "],
html[data-theme="dark"] [style$="background: #fff3cd"],
html[data-theme="dark"] [style*="background-color: #fff3cd;"],
html[data-theme="dark"] [style$="background-color: #fff3cd"],
html[data-theme="dark"] [style*="background:#fef3c7;"],
html[data-theme="dark"] [style*="background:#fef3c7\a "],
html[data-theme="dark"] [style*="background:#fef3c7 "],
html[data-theme="dark"] [style$="background:#fef3c7"],
html[data-theme="dark"] [style*="background-color:#fef3c7;"],
html[data-theme="dark"] [style$="background-color:#fef3c7"],
html[data-theme="dark"] [style*="background: #fef3c7;"],
html[data-theme="dark"] [style*="background: #fef3c7\a "],
html[data-theme="dark"] [style*="background: #fef3c7 "],
html[data-theme="dark"] [style$="background: #fef3c7"],
html[data-theme="dark"] [style*="background-color: #fef3c7;"],
html[data-theme="dark"] [style$="background-color: #fef3c7"] { background: var(--warning-light) !important; }
html[data-theme="dark"] [style*="background:#e8f5e9;"],
html[data-theme="dark"] [style*="background:#e8f5e9\a "],
html[data-theme="dark"] [style*="background:#e8f5e9 "],
html[data-theme="dark"] [style$="background:#e8f5e9"],
html[data-theme="dark"] [style*="background-color:#e8f5e9;"],
html[data-theme="dark"] [style$="background-color:#e8f5e9"],
html[data-theme="dark"] [style*="background: #e8f5e9;"],
html[data-theme="dark"] [style*="background: #e8f5e9\a "],
html[data-theme="dark"] [style*="background: #e8f5e9 "],
html[data-theme="dark"] [style$="background: #e8f5e9"],
html[data-theme="dark"] [style*="background-color: #e8f5e9;"],
html[data-theme="dark"] [style$="background-color: #e8f5e9"],
html[data-theme="dark"] [style*="background:#d1fae5;"],
html[data-theme="dark"] [style*="background:#d1fae5\a "],
html[data-theme="dark"] [style*="background:#d1fae5 "],
html[data-theme="dark"] [style$="background:#d1fae5"],
html[data-theme="dark"] [style*="background-color:#d1fae5;"],
html[data-theme="dark"] [style$="background-color:#d1fae5"],
html[data-theme="dark"] [style*="background: #d1fae5;"],
html[data-theme="dark"] [style*="background: #d1fae5\a "],
html[data-theme="dark"] [style*="background: #d1fae5 "],
html[data-theme="dark"] [style$="background: #d1fae5"],
html[data-theme="dark"] [style*="background-color: #d1fae5;"],
html[data-theme="dark"] [style$="background-color: #d1fae5"],
html[data-theme="dark"] [style*="background:#e6f4ea;"],
html[data-theme="dark"] [style*="background:#e6f4ea\a "],
html[data-theme="dark"] [style*="background:#e6f4ea "],
html[data-theme="dark"] [style$="background:#e6f4ea"],
html[data-theme="dark"] [style*="background-color:#e6f4ea;"],
html[data-theme="dark"] [style$="background-color:#e6f4ea"],
html[data-theme="dark"] [style*="background: #e6f4ea;"],
html[data-theme="dark"] [style*="background: #e6f4ea\a "],
html[data-theme="dark"] [style*="background: #e6f4ea "],
html[data-theme="dark"] [style$="background: #e6f4ea"],
html[data-theme="dark"] [style*="background-color: #e6f4ea;"],
html[data-theme="dark"] [style$="background-color: #e6f4ea"],
html[data-theme="dark"] [style*="background:#f0fdf4;"],
html[data-theme="dark"] [style*="background:#f0fdf4\a "],
html[data-theme="dark"] [style*="background:#f0fdf4 "],
html[data-theme="dark"] [style$="background:#f0fdf4"],
html[data-theme="dark"] [style*="background-color:#f0fdf4;"],
html[data-theme="dark"] [style$="background-color:#f0fdf4"],
html[data-theme="dark"] [style*="background: #f0fdf4;"],
html[data-theme="dark"] [style*="background: #f0fdf4\a "],
html[data-theme="dark"] [style*="background: #f0fdf4 "],
html[data-theme="dark"] [style$="background: #f0fdf4"],
html[data-theme="dark"] [style*="background-color: #f0fdf4;"],
html[data-theme="dark"] [style$="background-color: #f0fdf4"],
html[data-theme="dark"] [style*="background:#d4edda;"],
html[data-theme="dark"] [style*="background:#d4edda\a "],
html[data-theme="dark"] [style*="background:#d4edda "],
html[data-theme="dark"] [style$="background:#d4edda"],
html[data-theme="dark"] [style*="background-color:#d4edda;"],
html[data-theme="dark"] [style$="background-color:#d4edda"],
html[data-theme="dark"] [style*="background: #d4edda;"],
html[data-theme="dark"] [style*="background: #d4edda\a "],
html[data-theme="dark"] [style*="background: #d4edda "],
html[data-theme="dark"] [style$="background: #d4edda"],
html[data-theme="dark"] [style*="background-color: #d4edda;"],
html[data-theme="dark"] [style$="background-color: #d4edda"] { background: var(--success-light) !important; }
html[data-theme="dark"] [style*="background:#ffebee;"],
html[data-theme="dark"] [style*="background:#ffebee\a "],
html[data-theme="dark"] [style*="background:#ffebee "],
html[data-theme="dark"] [style$="background:#ffebee"],
html[data-theme="dark"] [style*="background-color:#ffebee;"],
html[data-theme="dark"] [style$="background-color:#ffebee"],
html[data-theme="dark"] [style*="background: #ffebee;"],
html[data-theme="dark"] [style*="background: #ffebee\a "],
html[data-theme="dark"] [style*="background: #ffebee "],
html[data-theme="dark"] [style$="background: #ffebee"],
html[data-theme="dark"] [style*="background-color: #ffebee;"],
html[data-theme="dark"] [style$="background-color: #ffebee"],
html[data-theme="dark"] [style*="background:#fff3f3;"],
html[data-theme="dark"] [style*="background:#fff3f3\a "],
html[data-theme="dark"] [style*="background:#fff3f3 "],
html[data-theme="dark"] [style$="background:#fff3f3"],
html[data-theme="dark"] [style*="background-color:#fff3f3;"],
html[data-theme="dark"] [style$="background-color:#fff3f3"],
html[data-theme="dark"] [style*="background: #fff3f3;"],
html[data-theme="dark"] [style*="background: #fff3f3\a "],
html[data-theme="dark"] [style*="background: #fff3f3 "],
html[data-theme="dark"] [style$="background: #fff3f3"],
html[data-theme="dark"] [style*="background-color: #fff3f3;"],
html[data-theme="dark"] [style$="background-color: #fff3f3"],
html[data-theme="dark"] [style*="background:#fef2f2;"],
html[data-theme="dark"] [style*="background:#fef2f2\a "],
html[data-theme="dark"] [style*="background:#fef2f2 "],
html[data-theme="dark"] [style$="background:#fef2f2"],
html[data-theme="dark"] [style*="background-color:#fef2f2;"],
html[data-theme="dark"] [style$="background-color:#fef2f2"],
html[data-theme="dark"] [style*="background: #fef2f2;"],
html[data-theme="dark"] [style*="background: #fef2f2\a "],
html[data-theme="dark"] [style*="background: #fef2f2 "],
html[data-theme="dark"] [style$="background: #fef2f2"],
html[data-theme="dark"] [style*="background-color: #fef2f2;"],
html[data-theme="dark"] [style$="background-color: #fef2f2"],
html[data-theme="dark"] [style*="background:#fce8e6;"],
html[data-theme="dark"] [style*="background:#fce8e6\a "],
html[data-theme="dark"] [style*="background:#fce8e6 "],
html[data-theme="dark"] [style$="background:#fce8e6"],
html[data-theme="dark"] [style*="background-color:#fce8e6;"],
html[data-theme="dark"] [style$="background-color:#fce8e6"],
html[data-theme="dark"] [style*="background: #fce8e6;"],
html[data-theme="dark"] [style*="background: #fce8e6\a "],
html[data-theme="dark"] [style*="background: #fce8e6 "],
html[data-theme="dark"] [style$="background: #fce8e6"],
html[data-theme="dark"] [style*="background-color: #fce8e6;"],
html[data-theme="dark"] [style$="background-color: #fce8e6"],
html[data-theme="dark"] [style*="background:#fee2e2;"],
html[data-theme="dark"] [style*="background:#fee2e2\a "],
html[data-theme="dark"] [style*="background:#fee2e2 "],
html[data-theme="dark"] [style$="background:#fee2e2"],
html[data-theme="dark"] [style*="background-color:#fee2e2;"],
html[data-theme="dark"] [style$="background-color:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2;"],
html[data-theme="dark"] [style*="background: #fee2e2\a "],
html[data-theme="dark"] [style*="background: #fee2e2 "],
html[data-theme="dark"] [style$="background: #fee2e2"],
html[data-theme="dark"] [style*="background-color: #fee2e2;"],
html[data-theme="dark"] [style$="background-color: #fee2e2"],
html[data-theme="dark"] [style*="background:#f8d7da;"],
html[data-theme="dark"] [style*="background:#f8d7da\a "],
html[data-theme="dark"] [style*="background:#f8d7da "],
html[data-theme="dark"] [style$="background:#f8d7da"],
html[data-theme="dark"] [style*="background-color:#f8d7da;"],
html[data-theme="dark"] [style$="background-color:#f8d7da"],
html[data-theme="dark"] [style*="background: #f8d7da;"],
html[data-theme="dark"] [style*="background: #f8d7da\a "],
html[data-theme="dark"] [style*="background: #f8d7da "],
html[data-theme="dark"] [style$="background: #f8d7da"],
html[data-theme="dark"] [style*="background-color: #f8d7da;"],
html[data-theme="dark"] [style$="background-color: #f8d7da"] { background: var(--danger-light) !important; }
html[data-theme="dark"] [style*="background:#f0f7ff;"],
html[data-theme="dark"] [style*="background:#f0f7ff\a "],
html[data-theme="dark"] [style*="background:#f0f7ff "],
html[data-theme="dark"] [style$="background:#f0f7ff"],
html[data-theme="dark"] [style*="background-color:#f0f7ff;"],
html[data-theme="dark"] [style$="background-color:#f0f7ff"],
html[data-theme="dark"] [style*="background: #f0f7ff;"],
html[data-theme="dark"] [style*="background: #f0f7ff\a "],
html[data-theme="dark"] [style*="background: #f0f7ff "],
html[data-theme="dark"] [style$="background: #f0f7ff"],
html[data-theme="dark"] [style*="background-color: #f0f7ff;"],
html[data-theme="dark"] [style$="background-color: #f0f7ff"],
html[data-theme="dark"] [style*="background:#e8f0fe;"],
html[data-theme="dark"] [style*="background:#e8f0fe\a "],
html[data-theme="dark"] [style*="background:#e8f0fe "],
html[data-theme="dark"] [style$="background:#e8f0fe"],
html[data-theme="dark"] [style*="background-color:#e8f0fe;"],
html[data-theme="dark"] [style$="background-color:#e8f0fe"],
html[data-theme="dark"] [style*="background: #e8f0fe;"],
html[data-theme="dark"] [style*="background: #e8f0fe\a "],
html[data-theme="dark"] [style*="background: #e8f0fe "],
html[data-theme="dark"] [style$="background: #e8f0fe"],
html[data-theme="dark"] [style*="background-color: #e8f0fe;"],
html[data-theme="dark"] [style$="background-color: #e8f0fe"],
html[data-theme="dark"] [style*="background:#e3f2fd;"],
html[data-theme="dark"] [style*="background:#e3f2fd\a "],
html[data-theme="dark"] [style*="background:#e3f2fd "],
html[data-theme="dark"] [style$="background:#e3f2fd"],
html[data-theme="dark"] [style*="background-color:#e3f2fd;"],
html[data-theme="dark"] [style$="background-color:#e3f2fd"],
html[data-theme="dark"] [style*="background: #e3f2fd;"],
html[data-theme="dark"] [style*="background: #e3f2fd\a "],
html[data-theme="dark"] [style*="background: #e3f2fd "],
html[data-theme="dark"] [style$="background: #e3f2fd"],
html[data-theme="dark"] [style*="background-color: #e3f2fd;"],
html[data-theme="dark"] [style$="background-color: #e3f2fd"],
html[data-theme="dark"] [style*="background:#eff6ff;"],
html[data-theme="dark"] [style*="background:#eff6ff\a "],
html[data-theme="dark"] [style*="background:#eff6ff "],
html[data-theme="dark"] [style$="background:#eff6ff"],
html[data-theme="dark"] [style*="background-color:#eff6ff;"],
html[data-theme="dark"] [style$="background-color:#eff6ff"],
html[data-theme="dark"] [style*="background: #eff6ff;"],
html[data-theme="dark"] [style*="background: #eff6ff\a "],
html[data-theme="dark"] [style*="background: #eff6ff "],
html[data-theme="dark"] [style$="background: #eff6ff"],
html[data-theme="dark"] [style*="background-color: #eff6ff;"],
html[data-theme="dark"] [style$="background-color: #eff6ff"],
html[data-theme="dark"] [style*="background:#dbeafe;"],
html[data-theme="dark"] [style*="background:#dbeafe\a "],
html[data-theme="dark"] [style*="background:#dbeafe "],
html[data-theme="dark"] [style$="background:#dbeafe"],
html[data-theme="dark"] [style*="background-color:#dbeafe;"],
html[data-theme="dark"] [style$="background-color:#dbeafe"],
html[data-theme="dark"] [style*="background: #dbeafe;"],
html[data-theme="dark"] [style*="background: #dbeafe\a "],
html[data-theme="dark"] [style*="background: #dbeafe "],
html[data-theme="dark"] [style$="background: #dbeafe"],
html[data-theme="dark"] [style*="background-color: #dbeafe;"],
html[data-theme="dark"] [style$="background-color: #dbeafe"],
html[data-theme="dark"] [style*="background:#f0f4ff;"],
html[data-theme="dark"] [style*="background:#f0f4ff\a "],
html[data-theme="dark"] [style*="background:#f0f4ff "],
html[data-theme="dark"] [style$="background:#f0f4ff"],
html[data-theme="dark"] [style*="background-color:#f0f4ff;"],
html[data-theme="dark"] [style$="background-color:#f0f4ff"],
html[data-theme="dark"] [style*="background: #f0f4ff;"],
html[data-theme="dark"] [style*="background: #f0f4ff\a "],
html[data-theme="dark"] [style*="background: #f0f4ff "],
html[data-theme="dark"] [style$="background: #f0f4ff"],
html[data-theme="dark"] [style*="background-color: #f0f4ff;"],
html[data-theme="dark"] [style$="background-color: #f0f4ff"] { background: var(--primary-light) !important; }
html[data-theme="dark"] [style*="color:#333;"],
html[data-theme="dark"] [style*="color:#333\a "],
html[data-theme="dark"] [style*="color:#333 "],
html[data-theme="dark"] [style$="color:#333"],
html[data-theme="dark"] [style*="color: #333;"],
html[data-theme="dark"] [style*="color: #333\a "],
html[data-theme="dark"] [style*="color: #333 "],
html[data-theme="dark"] [style$="color: #333"],
html[data-theme="dark"] [style*="color:#222;"],
html[data-theme="dark"] [style*="color:#222\a "],
html[data-theme="dark"] [style*="color:#222 "],
html[data-theme="dark"] [style$="color:#222"],
html[data-theme="dark"] [style*="color: #222;"],
html[data-theme="dark"] [style*="color: #222\a "],
html[data-theme="dark"] [style*="color: #222 "],
html[data-theme="dark"] [style$="color: #222"],
html[data-theme="dark"] [style*="color:#111;"],
html[data-theme="dark"] [style*="color:#111\a "],
html[data-theme="dark"] [style*="color:#111 "],
html[data-theme="dark"] [style$="color:#111"],
html[data-theme="dark"] [style*="color: #111;"],
html[data-theme="dark"] [style*="color: #111\a "],
html[data-theme="dark"] [style*="color: #111 "],
html[data-theme="dark"] [style$="color: #111"],
html[data-theme="dark"] [style*="color:#1f2937;"],
html[data-theme="dark"] [style*="color:#1f2937\a "],
html[data-theme="dark"] [style*="color:#1f2937 "],
html[data-theme="dark"] [style$="color:#1f2937"],
html[data-theme="dark"] [style*="color: #1f2937;"],
html[data-theme="dark"] [style*="color: #1f2937\a "],
html[data-theme="dark"] [style*="color: #1f2937 "],
html[data-theme="dark"] [style$="color: #1f2937"],
html[data-theme="dark"] [style*="color:#1a2f5a;"],
html[data-theme="dark"] [style*="color:#1a2f5a\a "],
html[data-theme="dark"] [style*="color:#1a2f5a "],
html[data-theme="dark"] [style$="color:#1a2f5a"],
html[data-theme="dark"] [style*="color: #1a2f5a;"],
html[data-theme="dark"] [style*="color: #1a2f5a\a "],
html[data-theme="dark"] [style*="color: #1a2f5a "],
html[data-theme="dark"] [style$="color: #1a2f5a"],
html[data-theme="dark"] [style*="color:#1a237e;"],
html[data-theme="dark"] [style*="color:#1a237e\a "],
html[data-theme="dark"] [style*="color:#1a237e "],
html[data-theme="dark"] [style$="color:#1a237e"],
html[data-theme="dark"] [style*="color: #1a237e;"],
html[data-theme="dark"] [style*="color: #1a237e\a "],
html[data-theme="dark"] [style*="color: #1a237e "],
html[data-theme="dark"] [style$="color: #1a237e"],
html[data-theme="dark"] [style*="color:#212529;"],
html[data-theme="dark"] [style*="color:#212529\a "],
html[data-theme="dark"] [style*="color:#212529 "],
html[data-theme="dark"] [style$="color:#212529"],
html[data-theme="dark"] [style*="color: #212529;"],
html[data-theme="dark"] [style*="color: #212529\a "],
html[data-theme="dark"] [style*="color: #212529 "],
html[data-theme="dark"] [style$="color: #212529"],
html[data-theme="dark"] [style*="color:#000;"],
html[data-theme="dark"] [style*="color:#000\a "],
html[data-theme="dark"] [style*="color:#000 "],
html[data-theme="dark"] [style$="color:#000"],
html[data-theme="dark"] [style*="color: #000;"],
html[data-theme="dark"] [style*="color: #000\a "],
html[data-theme="dark"] [style*="color: #000 "],
html[data-theme="dark"] [style$="color: #000"],
html[data-theme="dark"] [style*="color:#1a2a4a;"],
html[data-theme="dark"] [style*="color:#1a2a4a\a "],
html[data-theme="dark"] [style*="color:#1a2a4a "],
html[data-theme="dark"] [style$="color:#1a2a4a"],
html[data-theme="dark"] [style*="color: #1a2a4a;"],
html[data-theme="dark"] [style*="color: #1a2a4a\a "],
html[data-theme="dark"] [style*="color: #1a2a4a "],
html[data-theme="dark"] [style$="color: #1a2a4a"],
html[data-theme="dark"] [style*="color:#111827;"],
html[data-theme="dark"] [style*="color:#111827\a "],
html[data-theme="dark"] [style*="color:#111827 "],
html[data-theme="dark"] [style$="color:#111827"],
html[data-theme="dark"] [style*="color: #111827;"],
html[data-theme="dark"] [style*="color: #111827\a "],
html[data-theme="dark"] [style*="color: #111827 "],
html[data-theme="dark"] [style$="color: #111827"] { color: var(--text) !important; }
html[data-theme="dark"] [style*="color:#444;"],
html[data-theme="dark"] [style*="color:#444\a "],
html[data-theme="dark"] [style*="color:#444 "],
html[data-theme="dark"] [style$="color:#444"],
html[data-theme="dark"] [style*="color: #444;"],
html[data-theme="dark"] [style*="color: #444\a "],
html[data-theme="dark"] [style*="color: #444 "],
html[data-theme="dark"] [style$="color: #444"],
html[data-theme="dark"] [style*="color:#555;"],
html[data-theme="dark"] [style*="color:#555\a "],
html[data-theme="dark"] [style*="color:#555 "],
html[data-theme="dark"] [style$="color:#555"],
html[data-theme="dark"] [style*="color: #555;"],
html[data-theme="dark"] [style*="color: #555\a "],
html[data-theme="dark"] [style*="color: #555 "],
html[data-theme="dark"] [style$="color: #555"],
html[data-theme="dark"] [style*="color:#374151;"],
html[data-theme="dark"] [style*="color:#374151\a "],
html[data-theme="dark"] [style*="color:#374151 "],
html[data-theme="dark"] [style$="color:#374151"],
html[data-theme="dark"] [style*="color: #374151;"],
html[data-theme="dark"] [style*="color: #374151\a "],
html[data-theme="dark"] [style*="color: #374151 "],
html[data-theme="dark"] [style$="color: #374151"],
html[data-theme="dark"] [style*="color:#4b5563;"],
html[data-theme="dark"] [style*="color:#4b5563\a "],
html[data-theme="dark"] [style*="color:#4b5563 "],
html[data-theme="dark"] [style$="color:#4b5563"],
html[data-theme="dark"] [style*="color: #4b5563;"],
html[data-theme="dark"] [style*="color: #4b5563\a "],
html[data-theme="dark"] [style*="color: #4b5563 "],
html[data-theme="dark"] [style$="color: #4b5563"] { color: var(--text-2) !important; }
html[data-theme="dark"] [style*="color:#666;"],
html[data-theme="dark"] [style*="color:#666\a "],
html[data-theme="dark"] [style*="color:#666 "],
html[data-theme="dark"] [style$="color:#666"],
html[data-theme="dark"] [style*="color: #666;"],
html[data-theme="dark"] [style*="color: #666\a "],
html[data-theme="dark"] [style*="color: #666 "],
html[data-theme="dark"] [style$="color: #666"],
html[data-theme="dark"] [style*="color:#777;"],
html[data-theme="dark"] [style*="color:#777\a "],
html[data-theme="dark"] [style*="color:#777 "],
html[data-theme="dark"] [style$="color:#777"],
html[data-theme="dark"] [style*="color: #777;"],
html[data-theme="dark"] [style*="color: #777\a "],
html[data-theme="dark"] [style*="color: #777 "],
html[data-theme="dark"] [style$="color: #777"],
html[data-theme="dark"] [style*="color:#888;"],
html[data-theme="dark"] [style*="color:#888\a "],
html[data-theme="dark"] [style*="color:#888 "],
html[data-theme="dark"] [style$="color:#888"],
html[data-theme="dark"] [style*="color: #888;"],
html[data-theme="dark"] [style*="color: #888\a "],
html[data-theme="dark"] [style*="color: #888 "],
html[data-theme="dark"] [style$="color: #888"],
html[data-theme="dark"] [style*="color:#999;"],
html[data-theme="dark"] [style*="color:#999\a "],
html[data-theme="dark"] [style*="color:#999 "],
html[data-theme="dark"] [style$="color:#999"],
html[data-theme="dark"] [style*="color: #999;"],
html[data-theme="dark"] [style*="color: #999\a "],
html[data-theme="dark"] [style*="color: #999 "],
html[data-theme="dark"] [style$="color: #999"],
html[data-theme="dark"] [style*="color:#aaa;"],
html[data-theme="dark"] [style*="color:#aaa\a "],
html[data-theme="dark"] [style*="color:#aaa "],
html[data-theme="dark"] [style$="color:#aaa"],
html[data-theme="dark"] [style*="color: #aaa;"],
html[data-theme="dark"] [style*="color: #aaa\a "],
html[data-theme="dark"] [style*="color: #aaa "],
html[data-theme="dark"] [style$="color: #aaa"],
html[data-theme="dark"] [style*="color:#6b7280;"],
html[data-theme="dark"] [style*="color:#6b7280\a "],
html[data-theme="dark"] [style*="color:#6b7280 "],
html[data-theme="dark"] [style$="color:#6b7280"],
html[data-theme="dark"] [style*="color: #6b7280;"],
html[data-theme="dark"] [style*="color: #6b7280\a "],
html[data-theme="dark"] [style*="color: #6b7280 "],
html[data-theme="dark"] [style$="color: #6b7280"],
html[data-theme="dark"] [style*="color:#9ca3af;"],
html[data-theme="dark"] [style*="color:#9ca3af\a "],
html[data-theme="dark"] [style*="color:#9ca3af "],
html[data-theme="dark"] [style$="color:#9ca3af"],
html[data-theme="dark"] [style*="color: #9ca3af;"],
html[data-theme="dark"] [style*="color: #9ca3af\a "],
html[data-theme="dark"] [style*="color: #9ca3af "],
html[data-theme="dark"] [style$="color: #9ca3af"] { color: var(--muted) !important; }
html[data-theme="dark"] [style*="color:#bbb;"],
html[data-theme="dark"] [style*="color:#bbb\a "],
html[data-theme="dark"] [style*="color:#bbb "],
html[data-theme="dark"] [style$="color:#bbb"],
html[data-theme="dark"] [style*="color: #bbb;"],
html[data-theme="dark"] [style*="color: #bbb\a "],
html[data-theme="dark"] [style*="color: #bbb "],
html[data-theme="dark"] [style$="color: #bbb"],
html[data-theme="dark"] [style*="color:#ccc;"],
html[data-theme="dark"] [style*="color:#ccc\a "],
html[data-theme="dark"] [style*="color:#ccc "],
html[data-theme="dark"] [style$="color:#ccc"],
html[data-theme="dark"] [style*="color: #ccc;"],
html[data-theme="dark"] [style*="color: #ccc\a "],
html[data-theme="dark"] [style*="color: #ccc "],
html[data-theme="dark"] [style$="color: #ccc"] { color: var(--faint) !important; }
html[data-theme="dark"] [style*="color:#065f46;"],
html[data-theme="dark"] [style*="color:#065f46\a "],
html[data-theme="dark"] [style*="color:#065f46 "],
html[data-theme="dark"] [style$="color:#065f46"],
html[data-theme="dark"] [style*="color: #065f46;"],
html[data-theme="dark"] [style*="color: #065f46\a "],
html[data-theme="dark"] [style*="color: #065f46 "],
html[data-theme="dark"] [style$="color: #065f46"],
html[data-theme="dark"] [style*="color:#15803d;"],
html[data-theme="dark"] [style*="color:#15803d\a "],
html[data-theme="dark"] [style*="color:#15803d "],
html[data-theme="dark"] [style$="color:#15803d"],
html[data-theme="dark"] [style*="color: #15803d;"],
html[data-theme="dark"] [style*="color: #15803d\a "],
html[data-theme="dark"] [style*="color: #15803d "],
html[data-theme="dark"] [style$="color: #15803d"],
html[data-theme="dark"] [style*="color:#2e7d32;"],
html[data-theme="dark"] [style*="color:#2e7d32\a "],
html[data-theme="dark"] [style*="color:#2e7d32 "],
html[data-theme="dark"] [style$="color:#2e7d32"],
html[data-theme="dark"] [style*="color: #2e7d32;"],
html[data-theme="dark"] [style*="color: #2e7d32\a "],
html[data-theme="dark"] [style*="color: #2e7d32 "],
html[data-theme="dark"] [style$="color: #2e7d32"],
html[data-theme="dark"] [style*="color:#1e8e3e;"],
html[data-theme="dark"] [style*="color:#1e8e3e\a "],
html[data-theme="dark"] [style*="color:#1e8e3e "],
html[data-theme="dark"] [style$="color:#1e8e3e"],
html[data-theme="dark"] [style*="color: #1e8e3e;"],
html[data-theme="dark"] [style*="color: #1e8e3e\a "],
html[data-theme="dark"] [style*="color: #1e8e3e "],
html[data-theme="dark"] [style$="color: #1e8e3e"] { color: #6fd3a8 !important; }
html[data-theme="dark"] [style*="color:#b71c1c;"],
html[data-theme="dark"] [style*="color:#b71c1c\a "],
html[data-theme="dark"] [style*="color:#b71c1c "],
html[data-theme="dark"] [style$="color:#b71c1c"],
html[data-theme="dark"] [style*="color: #b71c1c;"],
html[data-theme="dark"] [style*="color: #b71c1c\a "],
html[data-theme="dark"] [style*="color: #b71c1c "],
html[data-theme="dark"] [style$="color: #b71c1c"],
html[data-theme="dark"] [style*="color:#c62828;"],
html[data-theme="dark"] [style*="color:#c62828\a "],
html[data-theme="dark"] [style*="color:#c62828 "],
html[data-theme="dark"] [style$="color:#c62828"],
html[data-theme="dark"] [style*="color: #c62828;"],
html[data-theme="dark"] [style*="color: #c62828\a "],
html[data-theme="dark"] [style*="color: #c62828 "],
html[data-theme="dark"] [style$="color: #c62828"],
html[data-theme="dark"] [style*="color:#991b1b;"],
html[data-theme="dark"] [style*="color:#991b1b\a "],
html[data-theme="dark"] [style*="color:#991b1b "],
html[data-theme="dark"] [style$="color:#991b1b"],
html[data-theme="dark"] [style*="color: #991b1b;"],
html[data-theme="dark"] [style*="color: #991b1b\a "],
html[data-theme="dark"] [style*="color: #991b1b "],
html[data-theme="dark"] [style$="color: #991b1b"] { color: #ff8a8a !important; }
html[data-theme="dark"] [style*="color:#1565c0;"],
html[data-theme="dark"] [style*="color:#1565c0\a "],
html[data-theme="dark"] [style*="color:#1565c0 "],
html[data-theme="dark"] [style$="color:#1565c0"],
html[data-theme="dark"] [style*="color: #1565c0;"],
html[data-theme="dark"] [style*="color: #1565c0\a "],
html[data-theme="dark"] [style*="color: #1565c0 "],
html[data-theme="dark"] [style$="color: #1565c0"],
html[data-theme="dark"] [style*="color:#1a73e8;"],
html[data-theme="dark"] [style*="color:#1a73e8\a "],
html[data-theme="dark"] [style*="color:#1a73e8 "],
html[data-theme="dark"] [style$="color:#1a73e8"],
html[data-theme="dark"] [style*="color: #1a73e8;"],
html[data-theme="dark"] [style*="color: #1a73e8\a "],
html[data-theme="dark"] [style*="color: #1a73e8 "],
html[data-theme="dark"] [style$="color: #1a73e8"],
html[data-theme="dark"] [style*="color:#1e40af;"],
html[data-theme="dark"] [style*="color:#1e40af\a "],
html[data-theme="dark"] [style*="color:#1e40af "],
html[data-theme="dark"] [style$="color:#1e40af"],
html[data-theme="dark"] [style*="color: #1e40af;"],
html[data-theme="dark"] [style*="color: #1e40af\a "],
html[data-theme="dark"] [style*="color: #1e40af "],
html[data-theme="dark"] [style$="color: #1e40af"] { color: #7fb5f0 !important; }
html[data-theme="dark"] [style*="solid #eee"],
html[data-theme="dark"] [style*="solid #f0f0f0"],
html[data-theme="dark"] [style*="solid #e0e0e0"],
html[data-theme="dark"] [style*="solid #e5e7eb"],
html[data-theme="dark"] [style*="solid #ddd"],
html[data-theme="dark"] [style*="solid #e2e8f0"],
html[data-theme="dark"] [style*="solid #e0e4ec"],
html[data-theme="dark"] [style*="solid #f3f4f6"],
html[data-theme="dark"] [style*="solid #dadce0"] { border-color: var(--line) !important; }

/* Tungi rejim — sahifalardagi qolgan yorug' bloklar */
html[data-theme="dark"] :where(.page-settings) .settings-tabs,
html[data-theme="dark"] :where(.page-settings) .action-card { background: var(--surface); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] :where(.page-settings) .pdetail-item { background: var(--surface-2); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] :where(.page-calendar) .cal-legend,
html[data-theme="dark"] :where(.page-calendar) .cal-time-col,
html[data-theme="dark"] :where(.page-calendar) .cal-time-row { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] :where(.page-notifications) .instagram-info { background: #3a1830; color: #f4b8d8; }
html[data-theme="dark"] :where(.page-doctors) .action-btn.delete-btn { background: var(--danger-light); }
html[data-theme="dark"] :where(.page-add_doctor, .page-edit_doctor) .btn-cancel { background: var(--surface-2); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] [style*="background:#f1fff4"],
html[data-theme="dark"] [style*="background: #f1fff4"] { background: var(--success-light) !important; }
html[data-theme="dark"] [style*="background:#fafbfc"],
html[data-theme="dark"] [style*="background: #fafbfc"] { background: var(--surface-2) !important; }


/* ════════════════════════════════════════════════════════════════
   NOVADENT — qo'shimcha: til tugmasi, individual xizmat bloki
   ════════════════════════════════════════════════════════════════ */
.lang-switcher { display: flex; align-items: center; gap: 2px; margin-right: 4px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: var(--border); flex-shrink: 0; }
.lang-switcher a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 28px; padding: 0 8px; border-radius: 7px;
    font-size: 12px; font-weight: 600; text-decoration: none; color: var(--muted);
    -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, color .15s ease;
}
.lang-switcher a:hover { color: var(--primary); }
.lang-switcher a.active-lang { background: var(--primary); color: #fff; }
.lang-switcher .lang-divider { display: none; }
@media (max-width: 480px) { .lang-switcher a { min-width: 28px; padding: 0 5px; font-size: 11px; } }

/* Ro'yxatda yo'q — qo'lda xizmat qo'shish bloki */
:where(.page-procedures_add) .custom-svc-box {
    background: #f6f9ff;
    border: 1.5px dashed #b8cdf5;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
:where(.page-procedures_add) .custom-svc-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
:where(.page-procedures_add) .custom-svc-fields {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
:where(.page-procedures_add) .custom-svc-fields input[type="text"] {
    flex: 2;
    min-width: 140px;
    padding: 8px 10px;
    border: 1.5px solid #d0dff8;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
:where(.page-procedures_add) .custom-svc-fields input[type="number"] {
    flex: 1;
    min-width: 110px;
    padding: 8px 10px;
    border: 1.5px solid #d0dff8;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
:where(.page-procedures_add) .custom-svc-add-btn {
    padding: 8px 14px;
    background: var(--primary, var(--primary));
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
:where(.page-procedures_add) .custom-svc-add-btn:hover { background: var(--primary-dark); }
:where(.page-procedures_add) .custom-svc-error {
    font-size: 11.5px;
    color: #d93025;
    font-weight: 600;
    margin-top: 6px;
    min-height: 14px;
}
:where(.page-procedures_add) .custom-badge {
    display: inline-block;
    background: #fff3cd;
    color: #b26a00;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 5px;
    vertical-align: middle;
}
html[data-theme="dark"] :where(.page-procedures_add) .custom-svc-box { background: var(--surface-2); border-color: var(--line-strong); }

/* NOVADENT — tungi rejim: shifokor hisobi (moliya), kalendar legendasi */
html[data-theme="dark"] :where(.page-calendar) .cal-doc-legend { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }
html[data-theme="dark"] :where(.page-finance) .fd-sum,
html[data-theme="dark"] :where(.page-finance) .fd-mini { background: var(--surface-2); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] :where(.page-finance) .fd-sum-primary,
html[data-theme="dark"] :where(.page-finance) .fd-earned { background: var(--primary-light); color: var(--text); }
html[data-theme="dark"] :where(.page-finance) .fd-ok { background: var(--success-light); color: var(--text); }
html[data-theme="dark"] :where(.page-finance) .fd-pct-none { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background: #f0f0f0"] { background: var(--surface-2) !important; color: var(--text-2) !important; }
html[data-theme="dark"] [style*="background:#e8eaf6"],
html[data-theme="dark"] [style*="background: #e8eaf6"] { background: var(--primary-light) !important; }

/* NOVADENT — telefonda yuqori panel sig'ishi uchun (til tugmasi qo'shimcha joy oladi) */
@media (max-width: 768px) {
    .header-brand { display: none !important; }
    .header-right { gap: 0; min-width: 0; }
    .header-icon { width: 34px; height: 34px; }
    .user-menu-wrap { margin-left: 2px; }
}
@media (max-width: 360px) {
    .lang-switcher { margin-right: 0; }
    .lang-switcher a { min-width: 26px; padding: 0 4px; }
}

/* ════════════════════════════════════════════════════════════════
   11. FAOLIYAT JURNALI (activity_log.php + bosh sahifa)
   ════════════════════════════════════════════════════════════════ */
.al { max-width: 1100px; }
.al-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.al-title { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.al-title i { color: var(--primary); }
.al-sub { color: var(--muted); font-size: 13.5px; }
.al-sub-inline { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.al-filter { padding: 14px 16px; display: grid; gap: 12px; margin-bottom: 12px; }
.al-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.al-seg { padding: 6px 12px; border-radius: 999px; border: var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; font-size: 13px; }
.al-seg:hover { border-color: var(--primary); color: var(--primary); }
.al-seg.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.al-fields { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.al-fields label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.al-fields .form-control { width: auto; padding: 7px 10px; font-size: 13px; }
.al-fields .al-q { flex: 1; min-width: 200px; }
.al-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.al-total { font-size: 13px; color: var(--muted); margin-right: 4px; }
.al-total b { color: var(--text); font-size: 15px; }
.al-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: var(--border); font-size: 12.5px; color: var(--text-2); text-decoration: none; }
.al-chip b { font-variant-numeric: tabular-nums; }
.al-chip i { color: var(--muted); }
.al-chip.active { background: var(--primary-light); border-color: var(--primary-soft); color: var(--primary-dark); }
.al-chip.danger { background: var(--danger-light); border-color: transparent; color: var(--danger); }
.al-chip.danger i { color: var(--danger); }

.al-list { padding: 0; }
.al-day { position: sticky; top: 0; z-index: 1; padding: 8px 18px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-bottom: var(--border); letter-spacing: .2px; }
.al-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: flex-start; padding: 11px 18px; border-bottom: var(--border); }
.al-row:last-child { border-bottom: 0; }
.al-row:hover { background: #f8fbfa; }
.al-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--surface-2); color: var(--muted); }
.tone-success .al-icon { background: var(--success-light); color: var(--success); }
.tone-warning .al-icon { background: var(--warning-light); color: #a86b00; }
.tone-danger  .al-icon { background: var(--danger-light);  color: var(--danger); }
.tone-info    .al-icon { background: var(--primary-light); color: var(--primary); }
.al-main { min-width: 0; }
.al-line1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.al-action { font-size: 14px; font-weight: 600; color: var(--text); }
.tone-danger .al-action { color: var(--danger); }
.al-patient { font-size: 13px; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.al-patient:hover { text-decoration: underline; }
.al-patient i { font-size: 11px; }
.al-desc { font-size: 13px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.al-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; white-space: nowrap; }
.al-time { font-weight: 700; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.al-user { font-size: 12px; color: var(--muted); }
.al-ip { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.al-dash .card-header { flex-wrap: nowrap; }
.al-dash-actions { display: flex; align-items: center; gap: 8px; }
.al-compact { max-height: 460px; overflow-y: auto; }
.al-compact .al-row { padding: 9px 18px; }
html[data-theme="dark"] .al-row:hover { background: var(--surface-2); }
@media (max-width: 768px) {
    .al-row { grid-template-columns: 30px 1fr; padding: 10px 14px; }
    .al-icon { width: 30px; height: 30px; font-size: 12px; }
    .al-meta { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; }
    .al-dash .card-header { flex-wrap: wrap; }
    .al-fields .form-control, .al-fields label { width: 100%; }
}