/* ════════════════════════════════════════════════════════════════
   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; /* Prevent zoom on iOS */
    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; /* Cancel button below on mobile */
}

: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;
}

/* ===== 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; /* Larger touch targets */
    }
    
    :where(.page-add_doctor) .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    :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;
}
: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;
}
:where(.page-calendar) .cal-slot:hover {
    background: rgb(var(--primary-rgb) / 0.12) !important;
}
:where(.page-calendar) .cal-slot:hover::after {
    content: "+ Qo'shish";
    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: 3;
}
: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;
    padding: 16px;
}
:where(.page-calendar) .appt-modal-overlay.open { display: flex; }
:where(.page-calendar) .appt-modal {
    background: var(--surface);
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    max-height: 90vh;
    overflow-y: auto;
}
: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;
    padding: 16px;
}
:where(.page-calendar) .replace-modal-overlay.open { display: flex; }

/* ===== SHIFOKOR O'ZGARTIRISH MODAL ===== */
:where(.page-calendar) .change-doctor-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 3200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
:where(.page-calendar) .change-doctor-modal-overlay.open { display: flex; }
:where(.page-calendar) .change-doctor-modal {
    background: var(--surface);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 50px rgba(0,0,0,0.28);
    animation: slideUpModal 0.22s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUpModal {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
:where(.page-calendar) .change-doctor-modal-header {
    padding: 20px 22px 14px;
    border-bottom: 1.5px solid var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 2;
    border-radius: 16px 16px 0 0;
}
:where(.page-calendar) .change-doctor-modal-header h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
:where(.page-calendar) .change-doctor-modal-close {
    background: #f0f4fa;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
:where(.page-calendar) .change-doctor-modal-close:hover { background: #dde4f4; }
:where(.page-calendar) .change-doctor-modal-body { padding: 16px 22px 22px; }
:where(.page-calendar) .change-doctor-info-box {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1.5px solid #ffb74d;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #bf6010;
    line-height: 1.6;
}
:where(.page-calendar) .change-doctor-info-box strong { color: #7c3800; }
:where(.page-calendar) .change-doctor-search {
    position: relative;
    margin-bottom: 12px;
}
:where(.page-calendar) .change-doctor-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1.5px solid #d0daea;
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--ink);
}
:where(.page-calendar) .change-doctor-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.12);
}
:where(.page-calendar) .change-doctor-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8fa3cc;
    font-size: 13px;
    pointer-events: none;
}
:where(.page-calendar) .change-doctor-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
}
:where(.page-calendar) .change-doctor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid #e0e8f5;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--surface-2);
    position: relative;
}
:where(.page-calendar) .change-doctor-item:hover {
    background: #edf4ff;
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgb(var(--primary-rgb) / 0.12);
}
:where(.page-calendar) .change-doctor-item.is-current {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--surface-2);
    border-color: var(--line);
}
:where(.page-calendar) .change-doctor-item.is-current:hover {
    background: var(--surface-2);
    border-color: var(--line);
    box-shadow: none;
}
:where(.page-calendar) .change-doctor-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    flex-shrink: 0;
}
:where(.page-calendar) .change-doctor-item-info { flex: 1; min-width: 0; }
:where(.page-calendar) .change-doctor-item-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:where(.page-calendar) .change-doctor-item-spec {
    font-size: 11.5px;
    color: #7a93b8;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:where(.page-calendar) .change-doctor-item-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--primary-light);
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
}
:where(.page-calendar) .change-doctor-item.is-current .change-doctor-item-badge {
    background: #e8e8e8;
    color: var(--muted);
}
:where(.page-calendar) .change-doctor-empty {
    text-align: center;
    color: var(--muted);
    padding: 28px 0;
    font-size: 13px;
}
:where(.page-calendar) .change-doctor-empty i { font-size: 26px; display: block; margin-bottom: 8px; }

/* ── Mobile moslashuvchanlik ── */
@media (max-width: 640px) {
    :where(.page-calendar) .appt-modal { padding: 18px 16px; }
    :where(.page-calendar) .change-doctor-modal-body { padding: 14px 16px 18px; }
    :where(.page-calendar) .change-doctor-modal-header { padding: 16px 16px 12px; }
    :where(.page-calendar) .change-doctor-item { padding: 10px 12px; gap: 10px; }
    :where(.page-calendar) .change-doctor-avatar { width: 36px; height: 36px; min-width: 36px; font-size: 13px; }
    :where(.page-calendar) .change-doctor-list { max-height: 260px; }
}

/* ─────────── 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 ─────────── */
:where(.page-finance) .today-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
:where(.page-finance) .today-modal-overlay.active { display: flex; }
:where(.page-finance) .today-modal-box {
    background: var(--surface);
    border-radius: 10px;
    max-width: 540px;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
:where(.page-finance) .today-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--surface);
}
:where(.page-finance) .today-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
    padding: 0 4px;
}
:where(.page-finance) .today-modal-close:hover { color: var(--text); }
:where(.page-finance) .today-modal-body { padding: 16px 20px; }

:where(.page-finance) .doc-history-toggle-btn { white-space: nowrap; }
:where(.page-finance) .doc-history-toggle-btn i { transition: transform .15s ease; }
:where(.page-finance) .doc-history-toggle-btn.open i { transform: rotate(180deg); }

/* ─────────── 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; }
}

/* ─────────── 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-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); }

/* 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;
}

/* ── 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;
}

/* ─────────── 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;
        }
        
        @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; }
}

/* ════════════════════════════════════════════════════════════════
   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%; }
}

/* ════════════════════════════════════════════════════════════════
   12. STOMATOLOGIK TIBBIY KARTA (043-shakl) — patient_card.php
   Ekranda A4 varaq ko'rinishida, chop etishda toza qora-oq hujjat
   ════════════════════════════════════════════════════════════════ */
.m43-toolbar { max-width: 210mm; margin: 0 auto 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.m43-opts { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--text-2); margin-left: auto; }
.m43-opts span { color: var(--muted); }
.m43-opts label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.m43 {
    --ink-m: #111; --line-m: #9aa3a8; --soft-m: #f3f5f6;
    max-width: 210mm; margin: 0 auto 30px; padding: 14mm 14mm 12mm;
    background: #fff; color: var(--ink-m);
    box-shadow: var(--shadow-lg); border-radius: 4px;
    font-size: 12.5px; line-height: 1.45;
}
.m43-top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--ink-m); }
.m43-ministry { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: #444; }
.m43-clinic { font-size: 16px; font-weight: 800; margin-top: 4px; }
.m43-small { font-size: 11px; color: #444; }
.m43-form { text-align: right; font-size: 11px; color: #444; border: 1px solid var(--ink-m); padding: 6px 10px; align-self: flex-start; }
.m43-form b { display: block; font-size: 15px; color: var(--ink-m); }
.m43-title { font-size: 15.5px; font-weight: 800; text-align: center; margin: 14px 0 4px; letter-spacing: .3px; color: var(--ink-m); }
.m43-title span { border-bottom: 1.5px solid var(--ink-m); padding: 0 6px; }
.m43-dates { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-size: 11.5px; color: #333; margin-bottom: 10px; }

.m43-sec { margin-top: 12px; }
.m43-sec h2 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-m); padding: 4px 0; border-bottom: 1px solid var(--ink-m); margin-bottom: 8px; }
.m43-sec h2 span { width: 20px; height: 20px; border: 1.5px solid var(--ink-m); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.m43-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px; }
.m43-f { display: flex; flex-direction: column; border-bottom: 1px dotted var(--line-m); padding-bottom: 2px; min-width: 0; }
.m43-f.wide { grid-column: span 2; }
.m43-f i { font-style: normal; font-size: 10.5px; color: #555; }
.m43-f b { font-size: 13px; font-weight: 600; min-height: 18px; overflow-wrap: anywhere; }
.m43-list { list-style: none; display: grid; gap: 3px; }
.m43-list em { font-style: normal; font-weight: 700; margin-right: 6px; font-variant-numeric: tabular-nums; }
.m43-labeled { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 4px; }
.m43-labeled i { font-style: normal; font-size: 12px; color: #333; white-space: nowrap; }
.m43-labeled .m43-line { flex: 1; }
.m43-line { height: 20px; border-bottom: 1px solid var(--line-m); }
.m43-note { font-size: 12px; margin-top: 4px; padding: 6px 8px; background: var(--soft-m); }
.m43-note i { font-style: normal; font-weight: 700; }

.m43-formula { border-collapse: collapse; margin: 4px auto 6px; table-layout: fixed; }
.m43-formula td, .m43-formula th { width: 9.2mm; height: 8mm; text-align: center; border: 1px solid var(--ink-m); font-size: 12px; }
.m43-formula th { font-weight: 700; background: var(--soft-m); }
.m43-formula .m43-nums.up th { border-bottom: 2.5px solid var(--ink-m); }
.m43-formula .m43-mid { width: 3mm; border-top: 0; border-bottom: 0; background: transparent; }
.m43-code { font-weight: 800; font-size: 12.5px; }
.m43-code.st-caries  { color: #b42318; }
.m43-code.st-missing { color: #555; background: repeating-linear-gradient(45deg, transparent 0 3px, #ddd 3px 4px); }
.m43-code.st-treated, .m43-code.st-filled { color: #0b5f67; }
.m43-code.st-proc { color: #666; }
.m43-sublabel { text-align: center; font-size: 11px; font-weight: 700; color: #444; margin-top: 4px; }
.m43-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 11px; color: #333; margin: 4px 0 8px; }

.m43-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.m43-table th, .m43-table td { border: 1px solid var(--line-m); padding: 4px 6px; text-align: left; vertical-align: top; }
.m43-table th { background: var(--soft-m); font-size: 10.5px; text-transform: uppercase; letter-spacing: .2px; color: #333; }
.m43-table .c { text-align: center; } .m43-table .r { text-align: right; } .m43-table .nw { white-space: nowrap; }
.m43-table small { color: #666; }
.m43-table .sig { width: 22mm; }
.m43-table tfoot td { font-weight: 700; background: var(--soft-m); }
.m43-empty-row td { height: 22px; }
.m43-tn { margin-top: 4px; }
.m43-xrays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.m43-xrays figure { margin: 0; border: 1px solid var(--line-m); break-inside: avoid; }
.m43-xrays img { width: 100%; height: 30mm; object-fit: cover; display: block; background: #000; }
.m43-xrays figcaption { font-size: 10px; padding: 2px 4px; }
.m43-totals { display: flex; justify-content: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
.m43-totals .debt b { color: #b42318; }
.m43-consent { font-size: 12px; font-style: italic; margin: 6px 0 16px; }
.m43-signs { display: grid; grid-template-columns: repeat(3, 1fr) 24mm; gap: 18px; align-items: end; }
.m43-signs span { display: block; text-align: center; font-size: 10.5px; color: #444; margin-top: 3px; }
.m43-sline { border-bottom: 1px solid var(--ink-m); height: 22px; }
.m43-stamp { width: 22mm; height: 22mm; border: 1px dashed var(--line-m); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #777; }
.m43-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line-m); font-size: 10px; color: #555; }
.m43.no-blank .m43-line, .m43.no-blank .m43-empty-row { display: none; }
.m43.no-blank .m43-labeled { display: none; }
[hidden] { display: none !important; }

/* Tungi rejimda ham karta oq qog'oz ko'rinishida qoladi */
html[data-theme="dark"] .m43 { box-shadow: 0 0 0 1px var(--line); }

@media (max-width: 768px) {
    .m43 { padding: 16px 12px; font-size: 12px; }
    .m43-grid { grid-template-columns: 1fr 1fr; }
    .m43-formula td, .m43-formula th { width: auto; min-width: 16px; font-size: 10px; padding: 0; }
    .m43-formula { width: 100%; }
    .m43-signs { grid-template-columns: 1fr 1fr; }
    .m43-xrays { grid-template-columns: repeat(2, 1fr); }
}

@media print {
    @page { size: A4; margin: 10mm 10mm 12mm; }
    .m43-toolbar, .bottom-nav, .bn-bar { display: none !important; }
    .content { padding: 0 !important; }
    .m43 { max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; font-size: 11px; }
    .m43-sec { margin-top: 8px; }
    .m43-line { height: 17px; }
    .m43-sec h2 { margin-bottom: 5px; }
    .m43-table th, .m43-table td { padding: 3px 5px; }
    .m43-keep, .m43-table tr, .m43-xrays figure { break-inside: avoid; page-break-inside: avoid; }
    .m43-sec h2 { break-after: avoid; page-break-after: avoid; }
    .m43, .m43 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ════════════════════════════════════════════════════════════════
   13. NAVBAT EKRANI — AKSIYALAR (queue_screen.php)
   ════════════════════════════════════════════════════════════════ */
.qp .card-header { flex-wrap: wrap; }
.qp-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.qp-list { display: grid; gap: 8px; }
.qp-item { display: grid; grid-template-columns: 42px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: var(--border); border-left: 4px solid var(--promo); border-radius: 10px; background: var(--surface); }
.qp-item.off { opacity: .5; }
.qp-ico { width: 42px; height: 42px; border-radius: 10px; background: var(--promo); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.qp-txt { min-width: 0; }
.qp-txt b { font-size: 14px; }
.qp-txt small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--promo); color: #fff; font-size: 11.5px; font-weight: 700; }
.qp-thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; }
.qp-acts { display: flex; gap: 4px; }
.qp-acts form { display: inline; }
.qp-acts .btn { padding: 6px 8px; }
.qp-del:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-light); }
.qp-settings { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; padding-top: 12px; border-top: var(--border); font-size: 13px; color: var(--text-2); }
.qp-settings label { display: inline-flex; align-items: center; gap: 6px; }
.qp-settings .form-control { width: 70px; padding: 6px 8px; }
.qp-form { display: grid; gap: 6px; padding: 16px; background: var(--surface-2); border: var(--border); border-radius: var(--radius); }
.qp-form .form-label { margin: 6px 0 0; }
.qp-form-title { font-weight: 700; font-size: 15px; }
.qp-colors, .qp-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.qp-colors input, .qp-icons input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qp-colors span { display: block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.qp-colors input:checked + span { outline: 3px solid var(--text); outline-offset: 2px; }
.qp-icons span { width: 38px; height: 38px; border-radius: 10px; border: var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); }
.qp-icons input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); }
.qp-colors input:focus-visible + span, .qp-icons input:focus-visible + span { box-shadow: var(--ring); }
.qp-rm { font-size: 13px; display: flex; gap: 6px; align-items: center; }
.qp-form-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 992px) { .qp-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .qp-item { grid-template-columns: 42px 1fr; } .qp-acts { grid-column: 1 / -1; justify-content: flex-end; } .qp-thumb { display: none; } }

/* TV: aksiya slaydlari */
.qtv-stage { position: relative; min-height: 0; display: grid; }
.qtv-stage > section { grid-area: 1 / 1; }
.qtv-promo { position: relative; border-radius: 2vw; overflow: hidden; }
.qtv-slide {
    --promo: var(--primary);
    position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch;
    background: var(--promo); /* eski TV brauzerlari uchun */
    background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--promo) 85%, #fff 15%) 0%, var(--promo) 45%, color-mix(in srgb, var(--promo) 70%, #000 30%) 100%);
    color: #fff; opacity: 0; transform: scale(1.02); transition: opacity .8s ease, transform 1.2s ease;
}
.qtv-slide.on { opacity: 1; transform: none; }
.qtv-slide-body { padding: 4vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.2vw; min-width: 0; }
.qtv-slide-icon { width: 6vw; height: 6vw; border-radius: 1.6vw; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 3vw; }
.qtv-slide-badge { padding: .4vw 1.4vw; border-radius: 999px; background: #fff; color: var(--promo); font-weight: 800; font-size: 2.2vw; letter-spacing: -.01em; }
.qtv-slide-title { font-size: 4.6vw; line-height: 1.04; font-weight: 800; letter-spacing: -.03em; }
.qtv-slide-text { font-size: 1.9vw; line-height: 1.35; opacity: .92; max-width: 32ch; }
.qtv-slide.has-img { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.qtv-slide-img { min-width: 0; height: 100%; }
.qtv-slide-img img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%); mask-image: linear-gradient(90deg, transparent 0, #000 25%); }
.qtv-dots { position: absolute; left: 4vw; bottom: 2.4vw; display: flex; gap: .6vw; }
.qtv-dots i { width: .8vw; height: .8vw; min-width: 8px; min-height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .3s ease, width .3s ease; }
.qtv-dots i.on { background: #fff; width: 2.4vw; border-radius: 1vw; }
@media (prefers-reduced-motion: reduce) { .qtv-slide { transition: none; transform: none; } }
@media (max-width: 900px) {
    .qtv-promo { min-height: 320px; }
    .qtv-slide-title { font-size: 34px; } .qtv-slide-text { font-size: 16px; } .qtv-slide-badge { font-size: 18px; }
    .qtv-slide-icon { width: 54px; height: 54px; font-size: 26px; border-radius: 14px; }
    .qtv-slide-img { display: none; } .qtv-slide { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   14. TELEFON VA PLANSHET UCHUN MOSLASHUV
   Bemor sahifasi (patients_view), bemorlar ro'yxati, protsedura qo'shish.
   Barcha qoidalar faqat kichik ekran media so'rovlari ichida —
   kompyuter (1101px dan katta) ko'rinishi o'zgarmaydi.
   ════════════════════════════════════════════════════════════════ */

/* ── PLANSHET (769–1100px): sidebar ixcham (faqat ikonkalar) ──
   ☰ bosilganda to'liq menyu ustiga ochiladi */
@media (min-width: 769px) and (max-width: 1100px) {
    .sidebar { width: var(--sidebar-mini); }
    .sidebar .sidebar-brand,
    .sidebar .menu-item span,
    .sidebar .menu-label { display: none; }
    .sidebar .sidebar-header { padding: 18px 19px; }
    .sidebar .menu-item { justify-content: center; padding: 11px 0; }
    .sidebar .menu-item i { font-size: 17px; }
    .main-content, .main-content.expanded { margin-left: var(--sidebar-mini); }

    .sidebar.collapsed { width: var(--sidebar-width); box-shadow: 0 0 0 100vmax rgba(15,42,51,.35), var(--shadow-lg); }
    .sidebar.collapsed .sidebar-brand { display: block; }
    .sidebar.collapsed .menu-item span { display: inline; }
    .sidebar.collapsed .menu-label { display: block; }
    .sidebar.collapsed .sidebar-header { padding: 18px 20px; }
    .sidebar.collapsed .menu-item { justify-content: flex-start; padding: 9px 12px; }
    .sidebar.collapsed .menu-item i { font-size: 15px; }
}

/* ── BEMORLAR RO'YXATI ── */
@media (max-width: 1100px) {
    .page-patients .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 1100px) and (min-width: 601px) {
    .page-patients .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    .page-patients .stat-info h3 { font-size: 11.5px; line-height: 1.3; }
}

/* ══════════════ BEMOR SAHIFASI ══════════════ */
@media (max-width: 1100px) {
    .page-patients_view .patient-view-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
    .page-patients_view .patient-view-grid > * { min-width: 0; }

    /* Chap karta: ma'lumotlar ikki ustunda, eng kerakli tugmalar tepada */
    .page-patients_view .pv-left .card { margin-bottom: 0; }
    .page-patients_view .pv-left .card-body {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px; row-gap: 0; align-items: start;
    }
    .page-patients_view .pv-identity { grid-column: 1 / -1; order: 1; margin-bottom: 14px !important; }
    .page-patients_view .pv-actions  { grid-column: 1 / -1; order: 2; margin: 0 0 14px !important; }
    .page-patients_view .pv-balance  { order: 3; margin: 0 0 12px !important; }
    .page-patients_view .pv-visit    { order: 4; margin: 0 0 12px !important; }
    .page-patients_view .pv-info-row { order: 5; }
    .page-patients_view .pv-notes    { grid-column: 1 / -1; order: 6; }

    /* Tablar ekran tepasida yopishib turadi */
    .page-patients_view .pv-right .card { overflow: visible; }
    .page-patients_view .pv-right .tabs {
        position: sticky; top: var(--header-height); z-index: 20;
        background: var(--surface); margin-left: -20px; margin-right: -20px; padding: 0 12px;
        scrollbar-width: none;
    }
    .page-patients_view .pv-right .tabs::-webkit-scrollbar { display: none; }
    .page-patients_view .tab-btn { padding: 13px 14px; }
}

@media (max-width: 600px) {
    .page-patients_view .pv-left .card-body { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .page-patients_view .pv-left .card-header { padding: 12px 16px; flex-direction: row; align-items: center; }
    .page-patients_view .pv-left .card-header > * { width: auto; }
    .page-patients_view .pv-identity { gap: 12px !important; }
    .page-patients_view .pv-identity > div:first-child { width: 56px !important; height: 56px !important; min-width: 56px; font-size: 22px !important; }
    .page-patients_view .pv-actions .btn { padding: 12px 10px; font-size: 14px; }
    .page-patients_view .pv-balance { padding: 12px 14px !important; }
    .page-patients_view .pv-right .card-body { padding: 0 12px 14px !important; }
    .page-patients_view .pv-right .tabs { margin-left: -12px; margin-right: -12px; }
    .page-patients_view .tab-btn { padding: 12px 12px; font-size: 13.5px; }

    .page-patients_view .pv-treat-head { flex-direction: column; align-items: stretch !important; gap: 10px; }
    .page-patients_view .pv-treat-head .btn { width: 100%; justify-content: center; padding: 11px 14px; font-size: 14px; }
    .page-patients_view .pv-treat-head > div:first-child { line-height: 1.7; }

    /* Jadvallar → kartochkalar (data-label JS orqali qo'yiladi) */
    .page-patients_view .rt-ready { min-width: 0 !important; border-collapse: separate; }
    .page-patients_view .rt-ready thead { display: none; }
    .page-patients_view .rt-ready,
    .page-patients_view .rt-ready tbody,
    .page-patients_view .rt-ready tr,
    .page-patients_view .rt-ready td { display: block; width: 100%; }
    .page-patients_view .rt-ready tr {
        border: var(--border); border-radius: 12px; background: var(--surface);
        padding: 6px 14px; margin-bottom: 10px; box-shadow: var(--shadow);
    }
    .page-patients_view .rt-ready td {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        border: 0 !important; padding: 7px 0 !important; text-align: right !important;
        white-space: normal !important; background: transparent !important;
    }
    .page-patients_view .rt-ready td + td { border-top: 1px dashed var(--line) !important; }
    .page-patients_view .rt-ready td::before {
        content: attr(data-label); flex-shrink: 0; text-align: left;
        font-size: 12px; font-weight: 600; color: var(--muted);
    }
    .page-patients_view .rt-ready td[data-label=""]::before { content: none; }
    .page-patients_view .rt-ready td[data-label=""] { justify-content: flex-end; }
    .page-patients_view .rt-ready tr:hover td { background: transparent !important; }
    .page-patients_view .table-container:has(.rt-ready) { overflow: visible; }
}

/* ══════════════ PROTSEDURA QO'SHISH ══════════════ */
.pa-sticky-total { display: none; }

@media (max-width: 1100px) {
    .page-procedures_add .content > .card { max-width: 760px !important; }
}

@media (max-width: 768px) {
    .page-procedures_add .content { padding: 10px; }
    .page-procedures_add .content > .card { overflow: visible; border-radius: 14px; }
    .page-procedures_add .card-header { flex-direction: row !important; align-items: center !important; }
    .page-procedures_add .card-header > * { width: auto !important; }

    /* Pastki panel: Jami + Saqlash doim ko'rinadi (telefon menyusi ustida) */
    .page-procedures_add .pa-actions {
        position: sticky; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 30;
        flex-wrap: nowrap !important; align-items: center; gap: 8px !important;
        margin: 12px -20px -20px !important; padding: 10px 14px;
        background: var(--surface); border-top: var(--border);
        border-radius: 0 0 14px 14px; box-shadow: 0 -8px 20px -12px rgba(15,42,51,.25);
    }
    .page-procedures_add .pa-actions .btn-outline { padding: 10px 14px !important; font-size: 13px; }
    .page-procedures_add .pa-actions .btn-primary { padding: 12px 18px !important; font-size: 15px !important; }
    .page-procedures_add .pa-sticky-total {
        display: block; flex: 1; min-width: 0; text-align: center;
        font-weight: 800; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .page-procedures_add .pa-sticky-total::before { content: 'Jami: '; font-weight: 500; color: var(--muted); font-size: 12px; }

    /* Tanlangan xizmatlar: boshqaruv tugmalari kattaroq (barmoq uchun) */
    .page-procedures_add .sel-item { padding: 12px !important; }
    .page-procedures_add .sel-item button,
    .page-procedures_add .sel-item input { min-height: 34px; }
    .page-procedures_add .sel-remove { width: 34px; height: 34px; }
}

/* Telefon: tishlar 2 qatorda (o'ng va chap yarim) — ekranga sig'adi, gorizontal siljish yo'q */
@media (max-width: 600px) {
    .page-procedures_add .content { padding: 8px; }
    .page-procedures_add .card-body { padding: 14px !important; }
    .page-procedures_add .teeth-scroll-wrapper { overflow: visible; }
    .page-procedures_add .teeth-grid-adult {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        min-width: 0 !important; row-gap: 8px !important;
    }
    .page-procedures_add .teeth-grid-child {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        min-width: 0 !important; row-gap: 8px !important;
    }
    .page-procedures_add .teeth-grid-adult > .tooth-btn:nth-child(8)::after,
    .page-procedures_add .teeth-grid-child > .tooth-btn:nth-child(5)::after { display: none; }
    .page-procedures_add .teeth-grid-adult > .tooth-btn:nth-child(n+9),
    .page-procedures_add .teeth-grid-child > .tooth-btn:nth-child(n+6) { box-shadow: inset 0 1px 0 var(--line); border-radius: 0 0 10px 10px; }
    .page-procedures_add .tooth-btn.tooth-shape { padding: 5px 1px; }
    .page-procedures_add .tooth-svg { max-width: 34px; }
    .page-procedures_add .tooth-num { font-size: 11px; }

    .page-procedures_add .pa-actions { margin: 12px -14px -14px !important; }
}

/* Modal oynalar telefonda pastdan chiqadigan varaq ko'rinishida */
@media (max-width: 600px) {
    .page-procedures_add .modal-overlay,
    .page-patients_view .modal-overlay { align-items: flex-end; padding: 0; }
    .page-procedures_add .modal-overlay .modal,
    .page-patients_view .modal-overlay .modal {
        max-width: 100% !important; width: 100% !important; max-height: 92vh;
        border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .page-procedures_add #servicesModal .modal-body { padding: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   15. ZUBOTEKNIK LABORATORIYASI (technicians.php, technician_dashboard.php)
   ════════════════════════════════════════════════════════════════ */
.lab-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lab-title { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.lab-title i { color: var(--primary); }
.lab-sub { color: var(--muted); font-size: 13.5px; }
.lab-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--surface); border: var(--border); border-radius: 12px; overflow-x: auto; }
.lab-tabs a { 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; }
.lab-tabs a:hover { background: var(--surface-2); color: var(--text); }
.lab-tabs a.active { background: var(--primary); color: #fff; }
.lab-tabs b { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: rgba(0,0,0,.08); }
.lab-tabs a.active b { background: rgba(255,255,255,.25); }
.lab-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.lab-filter .form-control { width: auto; padding: 8px 10px; font-size: 13px; }
.lab-filter .lab-q { flex: 1; min-width: 180px; }
.lab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; text-decoration: none; }
.lab-chip.danger { color: var(--danger); border-color: #f3c9c9; }
.lab-chip.on { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Kanban */
.lab-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.lab-col { background: var(--surface-2); border: var(--border); border-radius: 14px; min-width: 0; }
.lab-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; font-size: 13.5px; border-bottom: var(--border); position: sticky; top: 0; }
.lab-col-head b { margin-left: auto; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: var(--border); }
.lab-col-head small { font-weight: 400; color: var(--faint); font-size: 11px; }
.tone-info    .lab-col-head i { color: var(--info); }
.tone-warning .lab-col-head i { color: #b7791f; }
.tone-primary .lab-col-head i { color: var(--primary); }
.tone-success .lab-col-head i { color: var(--success); }
.lab-col-body { padding: 10px; display: grid; gap: 10px; max-height: calc(100vh - 290px); overflow-y: auto; }
.lab-empty { text-align: center; color: var(--faint); font-size: 12.5px; padding: 18px 0; }
.lab-card { background: var(--surface); border: var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 8px; box-shadow: var(--shadow); border-left: 3px solid transparent; }
.lab-card.urgent { border-left-color: var(--warning); }
.lab-card.late { border-left-color: var(--danger); }
.lab-card-top { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.lab-type { font-size: 12px; font-weight: 600; color: var(--primary-dark); background: var(--primary-light); padding: 3px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; }
.lab-card-title { all: unset; cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--text); line-height: 1.3; }
.lab-card-title:hover { color: var(--primary); text-decoration: underline; }
.lab-card-title:focus-visible { outline: 2px solid var(--primary); border-radius: 4px; }
.lab-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-2); }
.lab-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lab-shade { font-weight: 800; padding: 1px 7px; border-radius: 5px; background: #f6efe0; color: #6b4e16; border: 1px solid #e8dcc2; }
.lab-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.lab-who { color: var(--muted); }
.lab-next { justify-content: center; background: var(--surface-2); border: var(--border); color: var(--text-2); }
.lab-next:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.lab-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.lab-badge.danger  { background: var(--danger-light);  color: var(--danger); }
.lab-badge.warning { background: var(--warning-light); color: #8a5a00; }
.lab-badge.success { background: var(--success-light); color: var(--success); }
.lab-badge.info    { background: var(--primary-light); color: var(--primary-dark); }
.lab-badge.muted   { background: var(--surface-2);     color: var(--muted); }
.lab-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.lab-status.s-new { background: var(--info-light); color: var(--info); }
.lab-status.s-in_progress { background: var(--warning-light); color: #8a5a00; }
.lab-status.s-review { background: var(--primary-light); color: var(--primary-dark); }
.lab-status.s-completed { background: var(--success-light); color: var(--success); }
.lab-status.s-cancelled { background: var(--surface-2); color: var(--muted); }

/* Texniklar */
.lab-techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.lab-tech { padding: 16px; display: grid; gap: 12px; margin: 0; }
.lab-tech-head { display: flex; gap: 12px; align-items: center; }
.lab-tech-head b { display: block; font-size: 15px; }
.lab-tech-head small { color: var(--muted); font-size: 12.5px; }
.lab-avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.lab-tech-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; }
.lab-tech-stats div { background: var(--surface-2); border-radius: 10px; padding: 8px; text-align: center; }
.lab-tech-stats b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.lab-tech-stats span { font-size: 11px; color: var(--muted); }
.lab-tech-stats .bad b { color: var(--danger); }
.lab-tech-stats .warn b { color: #b7791f; }
.lab-tech-info { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--text-2); }
.lab-tech-info a { color: var(--primary); text-decoration: none; }
.lab-tech-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.lab-del:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-light); }
.lab-hint { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* Hisob-kitob */
.lab-fin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 16px; }
.lab-fin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.lab-fin { padding: 14px; text-decoration: none; color: var(--text); display: grid; gap: 4px; margin: 0; }
.lab-fin.on { border-color: var(--primary); box-shadow: var(--ring); }
.lab-fin span { font-size: 12.5px; color: var(--muted); }
.lab-fin-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; }
.lab-fin-row .ok { color: var(--success); } .lab-fin-row .bad { color: var(--danger); }
.lab-fin-btns { display: flex; gap: 6px; }
.lab-fin-table .r { text-align: right; } .lab-fin-table .nw { white-space: nowrap; }

/* Modallar va formalar */
.lab-modal { max-width: 720px; }
.lab-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.lab-f { display: flex; flex-direction: column; min-width: 0; }
.lab-f.wide { grid-column: 1 / -1; }
.lab-f .form-label { margin-bottom: 4px; }
.lab-f .form-label small { font-weight: 400; color: var(--faint); }
.lab-psearch { position: relative; }
.lab-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin-top: 4px; background: var(--surface); border: var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden; }
.lab-suggest button { all: unset; display: flex; flex-direction: column; padding: 9px 12px; cursor: pointer; width: calc(100% - 24px); }
.lab-suggest button:hover, .lab-suggest button:focus-visible { background: var(--primary-light); }
.lab-suggest small { color: var(--muted); font-size: 12px; }
.lab-plink { margin-top: 4px; color: var(--success); font-size: 12px; }
.lab-unlink { all: unset; color: var(--danger); cursor: pointer; text-decoration: underline; margin-left: 6px; }
.lab-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lab-types input, .lab-urgent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lab-types span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 10px; border: var(--border); background: var(--surface); font-size: 12px; text-align: center; cursor: pointer; line-height: 1.2; }
.lab-types span i { font-size: 17px; color: var(--muted); }
.lab-types input:checked + span { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); font-weight: 600; }
.lab-types input:checked + span i { color: var(--primary); }
.lab-types input:focus-visible + span { box-shadow: var(--ring); }
.lab-teeth { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 6px; }
.lab-teeth div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.lab-teeth div:nth-child(1), .lab-teeth div:nth-child(2) { padding-bottom: 4px; border-bottom: 1.5px solid var(--line-strong); }
.lab-teeth button { all: unset; text-align: center; padding: 6px 0; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; font-variant-numeric: tabular-nums; }
.lab-teeth button:hover { border-color: var(--primary); }
.lab-teeth button.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.lab-quick { display: flex; gap: 6px; margin-top: 6px; }
.lab-quick button { all: unset; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: var(--border); cursor: pointer; color: var(--text-2); }
.lab-quick button:hover { border-color: var(--primary); color: var(--primary); }
.lab-urgent { flex-direction: row; align-items: center; }
.lab-urgent span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: var(--border); cursor: pointer; font-size: 13.5px; }
.lab-urgent input:checked + span { background: var(--warning-light); border-color: var(--warning); color: #8a5a00; font-weight: 600; }
.lab-err { grid-column: 1 / -1; background: var(--danger-light); color: var(--danger); padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.lab-view-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.lab-dls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.lab-dl { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.lab-dl span { color: var(--muted); }
.lab-dl b { text-align: right; font-weight: 600; }
.lab-note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.lab-hist-title { margin: 14px 0 6px; font-weight: 700; font-size: 13px; color: var(--muted); }
.lab-hist { list-style: none; display: grid; gap: 6px; max-height: 200px; overflow-y: auto; }
.lab-hist li { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lab-hist time { color: var(--muted); font-variant-numeric: tabular-nums; }
.lab-hist em { color: var(--faint); font-style: normal; }
.lab-hist .muted { color: var(--faint); display: block; }
.lab-view-foot { flex-wrap: wrap; }
.lab-view-foot .form-control { width: auto; flex: 1; min-width: 140px; }

/* Texnik sahifasi */
.td-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.td-stats div { background: var(--surface); border: var(--border); border-radius: 12px; padding: 12px; }
.td-stats b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.td-stats span { font-size: 12px; color: var(--muted); }
.td-stats .bad b { color: var(--danger); } .td-stats .warn b { color: #b7791f; }
.td-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.td-card { padding: 16px; margin: 0; display: grid; gap: 10px; border-left: 4px solid transparent; }
.td-card.urgent { border-left-color: var(--warning); } .td-card.late { border-left-color: var(--danger); }
.td-card-head { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.td-no { margin-left: auto; font-size: 12px; color: var(--faint); }
.td-patient { font-size: 17px; font-weight: 700; }
.td-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.td-grid div { display: flex; flex-direction: column; font-size: 13.5px; }
.td-grid span { font-size: 11.5px; color: var(--muted); }
.td-grid b { align-self: flex-start; }
.td-comments summary { cursor: pointer; font-size: 13px; color: var(--primary); }
.td-comments div { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.td-form { display: grid; gap: 8px; padding-top: 10px; border-top: var(--border); }
.td-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.td-btns .btn-warning, .td-btns .btn-success { flex: 1; padding: 11px; font-size: 14.5px; }

/* Buyurtma varaqasi (chop etish) */
body.page-lab_print { background: var(--bg); }
.lp-bar { max-width: 190mm; margin: 16px auto 10px; display: flex; gap: 8px; }
.lp { max-width: 190mm; margin: 0 auto 30px; padding: 12mm; background: #fff; color: #111; box-shadow: var(--shadow-lg); font-size: 13px; }
.lp-top { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 10px; }
.lp-clinic { font-size: 17px; display: block; } .lp-top small { display: block; color: #444; font-size: 11.5px; }
.lp-no { text-align: right; font-size: 11px; color: #444; letter-spacing: .4px; }
.lp-no b { display: block; font-size: 20px; color: #111; }
.lp-tbl { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.lp-tbl th, .lp-tbl td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
.lp-tbl th { width: 16%; background: #f3f5f6; font-size: 11px; text-transform: uppercase; color: #333; }
.lp-sec { font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .4px; margin: 12px 0 6px; border-bottom: 1px solid #111; padding-bottom: 3px; }
.lp-deadline { font-size: 15px; } .lp-urgent { background: #111; color: #fff; padding: 1px 6px; font-size: 11px; font-weight: 800; }
.lp-shade { font-size: 16px; }
.lp-teeth { border-collapse: collapse; margin: 0 auto; }
.lp-teeth td { width: 9mm; height: 8mm; border: 1px solid #555; text-align: center; font-weight: 700; font-size: 12px; }
.lp-teeth tr.up td { border-bottom-width: 2.5px; }
.lp-teeth td.mid { width: 3mm; border-top: 0; border-bottom: 0; }
.lp-teeth td.on { background: #111; color: #fff; }
.lp-notes { min-height: 22mm; border: 1px solid #999; padding: 8px; }
.lp-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18mm; font-size: 11px; color: #444; text-align: center; }
.lp-signs span { display: block; border-bottom: 1px solid #111; height: 18px; margin-bottom: 3px; }
@media print {
    @page { size: A4; margin: 10mm; }
    .lp-bar { display: none; }
    body.page-lab_print { background: #fff; }
    .lp { box-shadow: none; padding: 0; max-width: none; }
    .lp, .lp * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Moslashuv */
@media (max-width: 1100px) {
    .lab-board { grid-template-columns: repeat(4, minmax(230px, 1fr)); }
    .td-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .lab-board { grid-template-columns: repeat(4, 82vw); scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 8px; }
    .lab-col { scroll-snap-align: start; }
    .lab-col-body { max-height: none; }
    .lab-form { grid-template-columns: 1fr; }
    .lab-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lab-teeth { grid-template-columns: 1fr; }
    .lab-teeth div:nth-child(2) { border-bottom: 0; padding-bottom: 0; }
    .lab-teeth div:nth-child(3) { border-top: 1.5px solid var(--line-strong); padding-top: 4px; }
    .lab-teeth div:nth-child(1) { border-bottom: 0; }
    .lab-teeth button { padding: 9px 0; }
    .lab-dls { grid-template-columns: 1fr; }
    .lab-hist li { grid-template-columns: 1fr; gap: 2px; }
    .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .td-list { grid-template-columns: 1fr; }
    .lab-head-btns { width: 100%; } .lab-head-btns .btn { flex: 1; }
}

/* ════════════ Bemor sahifasi: shifokorlar ro'yxati va xizmat shifokori ════════════ */
.pv-doctors { margin-top: 14px; padding: 12px; border: var(--border); border-radius: 10px; background: var(--surface-2); }
.pv-doctors-title { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pv-doctors-title span { margin-left: auto; font-weight: 600; background: var(--primary-light); color: var(--primary-dark); padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.pv-doc-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); }
.pv-doc-row:first-of-type { border-top: 0; }
.pv-doc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dc); flex-shrink: 0; }
.pv-doc-main { flex: 1; min-width: 0; font-size: 13px; }
.pv-doc-main b { font-weight: 600; }
.pv-doc-main em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--primary-dark); background: var(--primary-light); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.pv-doc-main small { display: block; color: var(--muted); font-size: 11.5px; }
.pv-doc-sum { font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-proc-doc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--dc); background: color-mix(in srgb, var(--dc) 12%, transparent); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
@supports not (background: color-mix(in srgb, red 10%, white)) { .pv-proc-doc { background: var(--surface-2); } }
@media (max-width: 1100px) { .page-patients_view .pv-doctors { grid-column: 1 / -1; order: 6; } }

/* ════════════════════════════════════════════════════════════════
   16. BEMOR SHAXSIY SAHIFASI (portal.php) + havola yuborish oynasi
   ════════════════════════════════════════════════════════════════ */
body.page-portal { background: var(--bg); }
.pt { max-width: 560px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom)); }
.pt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pt-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--ink); }
.pt-brand .sidebar-logo { font-size: 13px; }
.pt-out { font-size: 13px; color: var(--muted); text-decoration: none; }
.pt-card { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.pt-card h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pt-card h2 i { color: var(--primary); }
.pt-center, .pt-login { text-align: center; padding: 30px 20px; }
.pt-big-ico { font-size: 38px; color: var(--primary); margin-bottom: 10px; display: block; }
.pt-login h1, .pt-center h1 { font-size: 21px; margin-bottom: 6px; }
.pt-login p, .pt-center p { color: var(--text-2); margin-bottom: 14px; }
.pt-code-form { display: grid; gap: 10px; margin: 6px auto 10px; max-width: 300px; }
.pt-code { text-align: center; font-size: 28px !important; letter-spacing: 10px; font-weight: 700; padding: 12px; font-variant-numeric: tabular-nums; }
.pt-muted { color: var(--muted); font-size: 13px; }
.pt-hello { margin: 6px 4px 12px; }
.pt-hello h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pt-hello p { color: var(--muted); font-size: 13px; }
.pt-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pt-sum-box { background: var(--surface); border: var(--border); border-radius: 14px; padding: 12px 14px; }
.pt-sum-box:first-child { grid-column: 1 / -1; }
.pt-sum-box span { display: block; font-size: 12px; color: var(--muted); }
.pt-sum-box b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pt-sum-box.bad { background: var(--danger-light); border-color: transparent; } .pt-sum-box.bad b { color: var(--danger); font-size: 24px; }
.pt-sum-box.ok  { background: var(--success-light); border-color: transparent; } .pt-sum-box.ok b { color: var(--success); font-size: 22px; }
.pt-appt { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.pt-appt:first-of-type { border-top: 0; }
.pt-appt-date { width: 50px; text-align: center; background: var(--primary-light); color: var(--primary-dark); border-radius: 12px; padding: 6px 0; flex-shrink: 0; }
.pt-appt-date b { display: block; font-size: 20px; line-height: 1; } .pt-appt-date span { font-size: 11px; text-transform: uppercase; font-weight: 600; }
.pt-appt-main { flex: 1; min-width: 0; } .pt-appt-main b { display: block; font-size: 14px; } .pt-appt-main span { font-size: 12.5px; color: var(--muted); }
.pt-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pt-badge.ok { background: var(--success-light); color: var(--success); }
.pt-list { list-style: none; }
.pt-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); align-items: center; }
.pt-list li:first-child { border-top: 0; }
.pt-list b { display: block; font-size: 13.5px; font-weight: 600; } .pt-list small { color: var(--muted); font-size: 12px; }
.pt-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .pt-amt.ok { color: var(--success); }
.pt-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pt-gallery a { display: block; text-decoration: none; color: var(--text-2); font-size: 11px; line-height: 1.3; }
.pt-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--surface-2); display: block; margin-bottom: 4px; }
.pt-contact { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-contact .btn { flex: 1; justify-content: center; padding: 12px; }
.pt-foot { text-align: center; color: var(--faint); font-size: 12px; margin-top: 18px; }

.pv-success { flex-wrap: wrap; }
.pv-success-ask { margin-left: auto; font-weight: 600; }
.pv-portal-btn { justify-content: center; }
.pv-portal-code { text-align: center; background: var(--primary-light); border-radius: 12px; padding: 14px; margin: 10px 0; }
.pv-portal-code span { display: block; font-size: 12px; color: var(--primary-dark); }
.pv-portal-code b { display: block; font-size: 34px; letter-spacing: 8px; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.pv-portal-code small { color: var(--muted); }
.pv-portal-link { display: flex; gap: 6px; }
.pv-portal-link .form-control { font-size: 12px; }

/* ════════════════════════════════════════════════════════════════
   17. JONLI QABUL DOSKASI (live_board.php)
   ════════════════════════════════════════════════════════════════ */
.lb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lb-title { font-size: 22px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.lb-title i { color: var(--primary); }
.lb-sub { color: var(--muted); font-size: 13px; }
.lb-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-stats span { background: var(--surface); border: var(--border); border-radius: 10px; padding: 7px 12px; font-size: 12.5px; color: var(--muted); }
.lb-stats b { color: var(--text); font-size: 16px; margin-right: 3px; }
.lb-board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.lb-col { background: var(--surface-2); border: var(--border); border-radius: 14px; min-width: 0; }
.lb-col header { display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-weight: 700; font-size: 13px; border-bottom: var(--border); }
.lb-col header b { margin-left: auto; background: var(--surface); border: var(--border); border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.lb-expected header i { color: var(--muted); } .lb-arrived header i { color: #b7791f; } .lb-in_chair header i { color: var(--primary); }
.lb-done header i { color: var(--info); } .lb-paid header i { color: var(--success); }
.lb-arrived { border-top: 3px solid var(--warning); } .lb-in_chair { border-top: 3px solid var(--primary); }
.lb-col-body { padding: 8px; display: grid; gap: 8px; max-height: calc(100vh - 230px); overflow-y: auto; }
.lb-empty { text-align: center; color: var(--faint); padding: 14px 0; }
.lb-card { background: var(--surface); border: var(--border); border-left: 4px solid var(--dc); border-radius: 10px; padding: 10px; display: grid; gap: 6px; box-shadow: var(--shadow); }
.lb-card-top { display: flex; align-items: center; gap: 6px; }
.lb-time { font-size: 14px; font-variant-numeric: tabular-nums; }
.lb-ok { color: var(--success); font-size: 12px; }
.lb-doc { margin-left: auto; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-doc i { width: 8px; height: 8px; border-radius: 50%; background: var(--dc); flex-shrink: 0; }
.lb-name { font-weight: 700; font-size: 14.5px; color: var(--text); text-decoration: none; }
.lb-name:hover { color: var(--primary); }
.lb-compl { font-size: 12px; color: var(--text-2); }
.lb-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; }
.lb-timer { font-weight: 700; color: var(--text-2); }
.lb-timer.warn { color: #b7791f; } .lb-timer.bad { color: var(--danger); }
.lb-waited { color: var(--muted); }
.lb-debt { color: var(--danger); font-weight: 700; } .lb-paid { color: var(--success); font-weight: 700; }
.lb-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.lb-next { flex: 1; justify-content: center; background: var(--primary); color: #fff; }
.lb-next:hover { background: var(--primary-dark); color: #fff; }
.lb-actions .btn { padding: 7px 9px; }
@media (max-width: 1100px) { .lb-board { grid-template-columns: repeat(5, 240px); } }
@media (max-width: 768px) {
    .lb-board { grid-template-columns: repeat(5, 84vw); scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 8px; }
    .lb-col { scroll-snap-align: start; } .lb-col-body { max-height: none; }
    .lb-next { padding: 11px !important; font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   18. OMBOR SKANERI (inventory_scan.php)
   ════════════════════════════════════════════════════════════════ */
.isc { max-width: 560px; margin: 0 auto; }
.isc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.isc-head h1 { font-size: 20px; display: flex; gap: 8px; align-items: center; }
.isc-cam { padding: 14px; display: grid; gap: 10px; }
.isc-video-wrap { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.isc-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.isc-frame { position: absolute; left: 10%; right: 10%; top: 30%; bottom: 30%; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
.isc-frame::after { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: iscScan 1.6s ease-in-out infinite alternate; }
@keyframes iscScan { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
.isc-cam-btns { display: flex; gap: 8px; }
.isc-cam-btns .btn-lg { flex: 1; justify-content: center; padding: 14px; }
.isc-manual { display: flex; gap: 8px; }
.isc-hint { color: var(--muted); font-size: 12.5px; }
.isc-result { padding: 14px; display: grid; gap: 10px; }
.isc-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.isc-name { font-size: 17px; display: block; } .isc-item small { color: var(--muted); font-size: 12px; }
.isc-stock { text-align: right; } .isc-stock b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.isc-stock span { font-size: 12px; color: var(--muted); } .isc-stock.low b, .isc-stock.low span { color: var(--danger); }
.isc-qty { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; }
.isc-qty .form-control { text-align: center; font-size: 22px !important; font-weight: 700; }
.isc-step { border: var(--border); background: var(--surface-2); border-radius: 12px; font-size: 24px; font-weight: 700; cursor: pointer; color: var(--text); }
.isc-move { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.isc-move .btn { justify-content: center; padding: 14px; font-size: 16px; }
.isc-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border-radius: 10px; }
.isc-tabs button { flex: 1; border: 0; background: none; padding: 8px; border-radius: 8px; font: 600 13px var(--font); color: var(--muted); cursor: pointer; }
.isc-tabs button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.isc-pane { display: grid; gap: 8px; }
.isc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.isc-found { display: grid; gap: 6px; }
.isc-found button { text-align: left; border: var(--border); background: var(--surface); border-radius: 10px; padding: 9px 12px; cursor: pointer; font: inherit; }
.isc-found button:hover { border-color: var(--primary); }
.isc-found small { display: block; color: var(--muted); font-size: 12px; }
.isc-recent { list-style: none; padding: 6px 16px 12px; }
.isc-recent li { display: grid; grid-template-columns: 64px 1fr; column-gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.isc-recent li:first-child { border-top: 0; }
.isc-recent small { grid-column: 2; color: var(--muted); font-size: 11.5px; }
.isc-t { grid-row: span 2; font-weight: 800; font-variant-numeric: tabular-nums; align-self: center; }
.isc-t.in { color: var(--success); } .isc-t.out { color: var(--danger); }
.isc-muted { color: var(--muted); }

/* "Navbat ekrani" bo'limi tablari (Chaqirish va TV | Jonli doska) */
.qt-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--surface); border: var(--border); border-radius: 12px; overflow-x: auto; }
.qt-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.qt-tabs a:hover { background: var(--surface-2); color: var(--text); }
.qt-tabs a.active { background: var(--primary); color: #fff; }

/* ════════════════════════════════════════════════════════════════
   19. KALENDAR — tozalangan sarlavha va telefon ko'rinishi
   ════════════════════════════════════════════════════════════════ */
.page-calendar .cal-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-calendar .cal-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: var(--border); border-radius: 10px; }
.page-calendar .cal-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.page-calendar .cal-seg a:hover { color: var(--text); }
.page-calendar .cal-seg a.on { background: var(--primary); color: #fff; box-shadow: var(--shadow); }
.page-calendar .cal-today-btn, .page-calendar .cal-list-btn { color: var(--primary); border-color: var(--primary-soft); font-weight: 600; }
.page-calendar .cal-mode-btn { display: none; }
.page-calendar .cal-agenda { display: none; }

/* Agenda (ro'yxat) elementlari */
.cal-agenda { padding: 8px 10px 14px; }
.cal-ag-day { display: flex; align-items: center; gap: 10px; padding: 12px 6px 6px; text-decoration: none; color: var(--text); position: sticky; top: var(--header-height); background: var(--surface); z-index: 2; }
.cal-ag-day b { font-size: 22px; line-height: 1; min-width: 30px; }
.cal-ag-day span { font-size: 13px; color: var(--muted); font-weight: 600; }
.cal-ag-day em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }
.cal-ag-day.is-today b, .cal-ag-day.is-today span { color: var(--primary); }
.cal-ag-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 0 0 8px; padding: 11px 12px;
    background: var(--surface); border: var(--border); border-left: 4px solid var(--dc); border-radius: 12px; cursor: pointer; font: inherit; color: var(--text); box-shadow: var(--shadow); }
.cal-ag-item:active { transform: scale(.99); }
.cal-ag-time { display: flex; flex-direction: column; align-items: center; min-width: 46px; font-variant-numeric: tabular-nums; }
.cal-ag-time b { font-size: 15px; } .cal-ag-time small { font-size: 11px; color: var(--muted); }
.cal-ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-ag-main b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ag-main small { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ag-main small i { width: 8px; height: 8px; border-radius: 50%; background: var(--dc); flex-shrink: 0; }
.cal-ag-st { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.st-upcoming .cal-ag-st  { background: var(--info-light); color: var(--info); }
.st-active .cal-ag-st    { background: var(--success-light); color: var(--success); }
.st-completed .cal-ag-st { background: var(--surface-2); color: var(--muted); }
.st-completed { opacity: .75; }
.st-noshow .cal-ag-st    { background: var(--danger-light); color: var(--danger); }
.st-active { box-shadow: 0 0 0 2px var(--success-light), var(--shadow); }
.cal-ag-empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.cal-ag-empty i { display: block; font-size: 28px; margin-bottom: 8px; color: var(--faint); }

@media (max-width: 768px) {
    .page-calendar .content { padding: 8px; }
    .page-calendar .calendar-header { padding: 10px 12px !important; gap: 8px !important; flex-direction: column; align-items: stretch !important; }
    .page-calendar .calendar-nav { justify-content: space-between; width: 100%; gap: 6px; }
    .page-calendar .calendar-title { font-size: 15px !important; min-width: 0 !important; flex: 1; text-align: center; }
    .page-calendar .cal-tools { width: 100%; gap: 6px; }
    .page-calendar .cal-seg { flex: 1; }
    .page-calendar .cal-seg a { flex: 1; justify-content: center; padding: 8px 6px; }
    .page-calendar .cal-today-btn span, .page-calendar .cal-add-btn span, .page-calendar .cal-list-btn #listViewLabel { display: none; }
    .page-calendar .cal-add-btn { padding: 8px 12px; }
    .page-calendar .cal-mode-btn { display: inline-flex; color: var(--primary); border-color: var(--primary-soft); }
    .page-calendar .cal-list-btn { display: none; }
    /* Sukut bo'yicha — ro'yxat; "Jadval" bosilsa — odatdagi jadval */
    body.page-calendar:not(.cal-grid-mode) .cal-agenda { display: block; }
    body.page-calendar:not(.cal-grid-mode) .cal-grid-wrap { display: none !important; }
    body.page-calendar.cal-grid-mode .cal-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.page-calendar.cal-grid-mode .cal-doc-col { min-width: 150px; }

    /* Kunlik ro'yxat oynasi — butun ekran, jadval o'rniga kartochkalar */
    #listViewModal > div { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; }
    #listViewBody { padding: 10px !important; }
    #listViewBody table, #listViewBody tbody, #listViewBody tr, #listViewBody td { display: block; width: 100%; }
    #listViewBody thead { display: none; }
    #listViewBody tr { display: grid !important; grid-template-columns: 64px 1fr auto; gap: 2px 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; }
    #listViewBody td { padding: 0 !important; border: 0 !important; background: none !important; }
    #listViewBody td:nth-child(1) { grid-row: span 2; }
    #listViewBody td:nth-child(3) { grid-column: 2; font-size: 12px; }
    #listViewBody td:nth-child(4) { grid-column: 3; grid-row: 1; }
}

/* ════════════════════════════════════════════════════════════════
   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; }


/* ═════════ RETSEPT / TAVSIYA SMS (patients_view) ═════════ */
.pv-rx-btn { border-color: var(--primary-soft); color: var(--primary-dark); }
.rx-modal { max-width: 980px; width: calc(100% - 24px); }
.rx-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; height: min(calc(100vh - 230px), 600px); overflow: hidden; }
.rx-pick { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.rx-groups { overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.rx-group h4 { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 0 0 7px; }
.rx-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rx-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2);
    font: inherit; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.rx-chip i { color: var(--primary); font-size: 12px; }
.rx-chip:hover { border-color: var(--primary); }
.rx-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.rx-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.rx-chip[aria-pressed="true"] i { color: #fff; }
.rx-chip .rx-n:empty { display: none; }
.rx-chip .rx-n { background: #fff; color: var(--primary-dark); border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; display: inline-grid; place-items: center; }
.rx-compose { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
.rx-to { font-size: 13px; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 4px; }
.rx-to b { color: var(--text); }
.rx-compose .form-label { margin: 6px 0 2px; }
.rx-compose .form-label small { color: var(--faint); font-weight: 400; }
.rx-text { font-size: 14px; line-height: 1.5; resize: vertical; min-height: 180px; }
.rx-meter { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.rx-warn { color: var(--danger); font-weight: 600; }
.rx-result { margin: 4px 0 0; }
.rx-history { margin-top: 8px; font-size: 12.5px; }
.rx-history summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.rx-history ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rx-history li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--text-2); }
.rx-history li span { color: var(--faint); font-variant-numeric: tabular-nums; }
.rx-st { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.rx-st-sent { background: var(--success-light); color: var(--success); }
.rx-st-pending { background: var(--warning-light); color: #8a6400; }
.rx-st-failed { background: var(--danger-light); color: var(--danger); }
@media (max-width: 760px) {
    .rx-body { grid-template-columns: 1fr; height: auto; overflow: visible; }
    .rx-pick { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
    .rx-groups { max-height: 36vh; }
    .rx-modal .modal-body { max-height: calc(100vh - 150px); overflow-y: auto; }
}

/* ═════════ RENTGEN USTIDA CHIZISH (xray_upload) ═════════ */
.xa-badge {
    position: absolute; top: 8px; left: 8px; z-index: 1; background: rgba(255, 59, 48, .92); color: #fff;
    font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; pointer-events: none;
}
.xa-vtoggle {
    background: rgba(255,255,255,.15); border: none; color: #fff; height: 36px; padding: 0 12px;
    border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
}
.xa {
    --xa-bg: #0b1114; --xa-panel: #141d22; --xa-line: #26333a; --xa-text: #dce6e9; --xa-muted: #8ea1a8; --xa-accent: #19b3bf;
    position: fixed; inset: 0; z-index: 4000; background: var(--xa-bg); color: var(--xa-text);
    display: flex; flex-direction: column; font-family: var(--font);
}
.xa[hidden] { display: none; }
.xa-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--xa-panel); border-bottom: 1px solid var(--xa-line); }
.xa-title { font-weight: 600; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xa-title i { color: var(--xa-accent); margin-right: 6px; }
.xa-top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.xa-status { font-size: 12.5px; color: var(--xa-muted); }
.xa-status.ok { color: #4cd585; }
.xa-status.bad { color: #ff6b61; }
.xa-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 14px; background: var(--xa-panel); border-bottom: 1px solid var(--xa-line); }
.xa-grp { display: flex; align-items: center; gap: 4px; }
.xa-grp + .xa-grp { padding-left: 14px; border-left: 1px solid var(--xa-line); }
.xa-tool, .xa-btn, .xa-size {
    height: 36px; min-width: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent;
    background: transparent; color: var(--xa-text); font: inherit; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .12s, border-color .12s;
}
.xa-tool:hover, .xa-btn:hover:not(:disabled), .xa-size:hover { background: rgba(255,255,255,.08); }
.xa-tool:focus-visible, .xa-btn:focus-visible, .xa-size:focus-visible, .xa-color:focus-visible { outline: 2px solid var(--xa-accent); outline-offset: 1px; }
.xa-tool[aria-pressed="true"], .xa-size[aria-pressed="true"] { background: rgba(25,179,191,.18); border-color: var(--xa-accent); color: #fff; }
.xa-btn:disabled { opacity: .35; cursor: default; }
.xa-num { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; border: 2px solid currentColor; font-size: 10.5px; line-height: 1; }
.xa-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--xa-line); background: var(--c); cursor: pointer; padding: 0; }
.xa-color[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--xa-accent); }
.xa-size i { display: block; width: 18px; height: var(--s); border-radius: 99px; background: currentColor; }
.xa-zoom { font-variant-numeric: tabular-nums; min-width: 58px; font-size: 13px; }
.xa-save { background: var(--xa-accent); color: #031417; font-weight: 600; }
.xa-save:hover:not(:disabled) { background: #22c7d3; }
.xa-save.pulse { box-shadow: 0 0 0 3px rgba(25,179,191,.35); }
.xa-del:hover { color: #ff6b61; }
.xa-close { font-size: 18px; }
.xa-adj { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 8px 14px; background: #10181c; border-bottom: 1px solid var(--xa-line); font-size: 13px; color: var(--xa-muted); }
.xa-adj[hidden] { display: none; }
.xa-adj label { display: inline-flex; align-items: center; gap: 8px; }
.xa-adj input[type="range"] { width: 150px; accent-color: var(--xa-accent); }
.xa-check input { accent-color: var(--xa-accent); width: 16px; height: 16px; }
.xa-stage { position: relative; flex: 1 1 auto; overflow: hidden; touch-action: none; min-height: 0; background: #05090b; }
.xa-board { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 0 0 1px var(--xa-line); }
.xa-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.xa-stage #xaDraw { cursor: crosshair; touch-action: none; }
.xa-stage[data-tool="pan"] #xaDraw, .xa-stage.panning #xaDraw { cursor: grab; }
.xa-stage.panning #xaDraw:active { cursor: grabbing; }
.xa-stage[data-tool="text"] #xaDraw { cursor: text; }
.xa-stage[data-tool="erase"] #xaDraw { cursor: not-allowed; }
.xa-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--xa-muted); font-size: 14px; }
.xa-loading[hidden] { display: none; }
.xa-textin {
    position: absolute; z-index: 2; min-width: 200px; max-width: 60%; background: rgba(0,0,0,.75);
    border: 1px dashed var(--xa-accent); border-radius: 6px; padding: 6px 8px; font: 600 16px var(--font); resize: none; outline: none;
}
.xa-hint { padding: 6px 14px; font-size: 11.5px; color: var(--xa-muted); background: var(--xa-panel); border-top: 1px solid var(--xa-line); }
@media (max-width: 760px) {
    .xa-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .xa-bar::-webkit-scrollbar { display: none; }
    .xa-save span, .xa-hint, .xa-status { display: none; }
    .xa-adj input[type="range"] { width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .xa-tool, .xa-btn, .rx-chip { transition: none; } }

/* ═════════ TIZIM HOLATI (system_status.php) ═════════ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-xs { padding: 5px 9px; font-size: 12px; border-radius: 7px; min-height: 0; }
.ss-wrap { max-width: 1180px; margin: 0 auto; }
.ss-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ss-back { font-size: 13px; color: var(--muted); text-decoration: none; }
.ss-back:hover { color: var(--primary); }
.ss-title { font-size: 26px; font-weight: 700; margin: 4px 0 2px; letter-spacing: -.01em; }
.ss-sub { color: var(--faint); font-size: 12.5px; margin: 0; }
.ss-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-inline { display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.ss-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.ss-tabs::-webkit-scrollbar { display: none; }
.ss-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
          border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ss-tab:hover { color: var(--text); }
.ss-tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); }
.ss-count { background: var(--danger); color: #fff; font-size: 11px; border-radius: 999px; padding: 1px 7px; }
.ss-summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); margin-bottom: 18px; border: 1px solid; }
.ss-sum-ok   { background: var(--success-light); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.ss-sum-warn { background: var(--warning-light); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.ss-sum-bad  { background: var(--danger-light);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.ss-sum-icon .ss-lvl { font-size: 26px; }
.ss-sum-text strong { display: block; font-size: 17px; }
.ss-sum-text span { color: var(--text-2); font-size: 13px; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; align-items: start; }
.ss-card { margin-bottom: 16px; }
.ss-grid .ss-card { margin-bottom: 0; }
.ss-card .card-title i { color: var(--primary); margin-right: 4px; }
.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-item { display: grid; grid-template-columns: 22px minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 13.5px; }
.ss-list .ss-item:first-child { border-top: 0; }
.ss-item.ss-loading { display: flex; color: var(--muted); }
.ss-item-title { font-weight: 600; color: var(--text); }
.ss-item-hint { color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }
.ss-item-val { text-align: right; color: var(--text-2); overflow-wrap: anywhere; }
.ss-row-bad .ss-item-val { color: var(--danger); font-weight: 600; }
.ss-row-warn .ss-item-val { color: #8a6400; font-weight: 600; }
.ss-link { display: inline-block; margin-left: 6px; font-weight: 600; font-size: 12.5px; color: var(--primary); white-space: nowrap; }
.ss-lvl { font-size: 17px; line-height: 1.2; }
.ss-ok { color: var(--success); } .ss-warn { color: var(--warning); } .ss-bad { color: var(--danger); } .ss-info { color: var(--info); }
.ss-backup-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ss-form { display: flex; flex-direction: column; gap: 10px; }
.ss-form .form-label { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.ss-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-help, .ss-muted { color: var(--muted); font-size: 12.5px; margin: 0; }
.ss-muted { display: inline; }
td .ss-muted { display: block; }
.ss-table td, .ss-table th { vertical-align: middle; }
.ss-right { text-align: right; white-space: nowrap; }
.ss-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-style: normal; }
.ss-pill.ok { background: var(--success-light); color: var(--success); }
.ss-pill.bad { background: var(--danger-light); color: var(--danger); }
.ss-del:hover { color: var(--danger); border-color: var(--danger); }
.ss-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
.ss-howto p, .ss-howto li { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.ss-howto h4 { margin: 18px 0 6px; font-size: 14.5px; }
.ss-howto ol { padding-left: 20px; margin: 0 0 8px; }
.ss-code { background: var(--ink); color: #d8eef0; border-radius: var(--radius-sm); padding: 10px 12px; margin: 6px 0 10px; overflow-x: auto; }
.ss-code code { font-size: 12.5px; white-space: nowrap; color: inherit; background: none; }
.ss-logbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.ss-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); text-decoration: none; font-size: 13px; background: var(--surface); }
.ss-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ss-logfiles { display: block; margin-bottom: 12px; }
.ss-logs { display: flex; flex-direction: column; gap: 6px; }
.ss-log { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ss-log.ss-row-bad { border-left: 3px solid var(--danger); }
.ss-log.ss-row-warn { border-left: 3px solid var(--warning); }
.ss-log.stale { opacity: .6; }
.ss-log summary { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.ss-log summary::-webkit-details-marker { display: none; }
.ss-log-msg { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.ss-log-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ss-log-body { padding: 0 14px 12px 46px; }
.ss-log-body pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--surface-2); padding: 10px; border-radius: 6px; margin: 0 0 8px; }
.ss-log-body dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; margin: 0; }
.ss-log-body dt { color: var(--muted); }
@media (max-width: 760px) {
    .ss-backup-top { grid-template-columns: 1fr; }
    .ss-item { grid-template-columns: 22px minmax(0, 1fr); }
    .ss-item-val { grid-column: 2; text-align: left; max-width: none; }
    .ss-log summary { grid-template-columns: 22px minmax(0, 1fr); }
    .ss-log-meta { grid-column: 2; }
    .ss-log-body { padding-left: 14px; }
    .ss-form-row { grid-template-columns: 1fr; }
}
.ss-fix { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }

/* ═════════ SHIFOKORGA BILDIRISHNOMA (doctor-alerts.js) ═════════ */
.da-stack { position: fixed; right: 16px; bottom: 16px; z-index: 3500; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.da-card {
    pointer-events: auto; display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 12px; align-items: start;
    background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 12px 10px 12px 14px; transform: translateX(24px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.da-card.in { transform: none; opacity: 1; }
.da-card.da-arrived { border-left-color: var(--success); }
.da-card.da-moved { border-left-color: var(--warning); }
.da-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-light); color: var(--primary-dark); font-size: 17px; }
.da-arrived .da-ic { background: var(--success-light); color: var(--success); }
.da-moved .da-ic { background: var(--warning-light); color: #8a6400; }
.da-new .da-ic { animation: da-ring 1s ease 2; }
.da-tx b { display: block; font-size: 14px; color: var(--text); }
.da-tx span { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.da-tx a { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--primary); }
.da-x { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--faint); cursor: pointer; padding: 2px; }
.da-x:hover { color: var(--text); }
.da-mute[aria-pressed="true"] { color: var(--danger); }
.da-mute.floating { position: fixed; left: 16px; bottom: 16px; z-index: 3400; }
@keyframes da-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@media (max-width: 760px) { .da-stack { bottom: calc(76px + env(safe-area-inset-bottom)); right: 12px; width: calc(100vw - 24px); } }
@media (prefers-reduced-motion: reduce) { .da-card { transition: none; } .da-new .da-ic { animation: none; } }

/* ═════════ 3D TISH XARITASI (odontogram-3d.js) ═════════ */
.odo-viewbar { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; margin: 0 0 12px; }
.odo-viewbtn { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.odo-viewbtn[aria-pressed="true"] { background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow); }
.odo-viewbtn:focus-visible { outline: none; box-shadow: var(--ring); }
.odo3d { display: none; position: relative; border-radius: var(--radius); overflow: hidden; min-height: 460px;
         background: radial-gradient(120% 90% at 50% 30%, #f7fbfb 0%, #e3eeee 60%, #d3e2e3 100%); border: 1px solid var(--line); }
html[data-theme="dark"] .odo3d { background: radial-gradient(120% 90% at 50% 30%, #1f3036 0%, #142228 60%, #0d181c 100%); }
.odo.odo-mode-3d .odo3d { display: block; }
.odo.odo-mode-3d .odo-chart { display: none; }
.odo3d-stage { position: relative; height: clamp(380px, 58vh, 620px); touch-action: none; cursor: grab; }
.odo3d-stage:active { cursor: grabbing; }
.odo3d-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.odo3d-ctl { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.odo3d-grp { display: flex; gap: 2px; align-items: center; padding: 3px; border-radius: 10px; background: rgb(255 255 255 / .82); backdrop-filter: blur(6px);
             border: 1px solid var(--line); pointer-events: auto; flex-wrap: wrap; }
html[data-theme="dark"] .odo3d-grp { background: rgb(20 34 40 / .85); }
.odo3d-grp button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 7px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.odo3d-grp button:hover { background: var(--surface-2); }
.odo3d-grp button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.odo3d-grp button:focus-visible { outline: none; box-shadow: var(--ring); }
.odo3d-open { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--muted); font-size: 13px; }
.odo3d-open input { width: 90px; accent-color: var(--primary); }
.odo3d-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.odo3d-labels[hidden] { display: none; }
.odo3d-num { position: absolute; left: 0; top: 0; pointer-events: auto; border: 0; cursor: pointer; font: 600 10.5px/1 var(--font); color: var(--text-2);
             background: rgb(255 255 255 / .78); border-radius: 999px; padding: 3px 5px; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .odo3d-num { background: rgb(13 24 28 / .75); color: #c9dadd; }
.odo3d-num.sel { background: var(--primary); color: #fff; }
.odo3d-num.miss { text-decoration: line-through; opacity: .6; }
.odo3d-tip { position: absolute; z-index: 4; pointer-events: none; background: var(--ink); color: #e8f2f3; font-size: 12.5px; line-height: 1.4;
             padding: 7px 10px; border-radius: 8px; box-shadow: var(--shadow-lg); max-width: 240px; }
.odo3d-tip b { color: #7fe0e8; margin-right: 4px; }
.odo3d-tip span { color: #a9c1c6; }
.odo3d-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; padding: 20px; text-align: center; }
.odo3d-msg[hidden] { display: none; }
.odo3d-hint { text-align: center; font-size: 11.5px; color: var(--muted); pointer-events: none; }
@media (max-width: 760px) {
    .odo3d-stage { height: 64vh; }
    .odo3d-ctl { position: static; padding: 8px 8px 0; }
    .odo3d-hint { display: none; }
}
.odo3d-hint { position: static; padding: 6px 10px 10px; }
.odo.panel-open .odo3d-ctl { position: static; padding: 8px 8px 0; }
.odo.panel-open .odo3d-hint { display: none; }

/* ═════════ ZAMONAVIY TISH XARITASI (dental-chart.js) ═════════ */
.odo.dc {
    --dc-caries: #d64a3b; --dc-filled: #3a7bd5; --dc-crown: #c99a2e; --dc-implant: #6f7a82; --dc-bridge: #e67e22;
    --dc-veneer: #16a085; --dc-endo: #e2412f; --dc-extract: #c0392b; --dc-frac: #e67e22; --dc-peri: #c0392b; --dc-other: #6b4fc4;
    --dc-plan: #0e9aa6; --dc-chart-bg: linear-gradient(180deg, #fbfcfc 0%, #f1f6f5 100%);
    --t-crown-fill: #fff3c9; --t-crown-line: #c99a2e; --t-implant-fill: #e3e8eb; --t-implant-line: #6f7a82;
    --t-bridge-fill: #fde3c4; --t-bridge-line: #e67e22; --t-veneer-fill: #d4f3ec; --t-veneer-line: #16a085;
    --t-periapical-fill: #f9dcd8; --t-periapical-line: #c0392b; --t-fracture-fill: #fde7d2; --t-fracture-line: #e67e22;
    --t-extract-fill: #f6d3cf; --t-extract-line: #c0392b; --t-treated-fill: #fbe0dd; --t-treated-line: #e2412f;
    --t-plan-fill: #d5f1f3; --t-plan-line: #0e9aa6;
}
html[data-theme="dark"] .odo.dc {
    --dc-chart-bg: linear-gradient(180deg, #172a30 0%, #13242a 100%);
    --t-crown-fill: #4a3b14; --t-implant-fill: #33393d; --t-bridge-fill: #4a3018; --t-veneer-fill: #143a33;
    --t-periapical-fill: #4a2322; --t-fracture-fill: #4a3018; --t-extract-fill: #4a2322; --t-treated-fill: #4a2322; --t-plan-fill: #143a40;
}
.s-crown { --fill: var(--t-crown-fill); --line-c: var(--t-crown-line); }
.s-implant { --fill: var(--t-implant-fill); --line-c: var(--t-implant-line); }
.s-bridge { --fill: var(--t-bridge-fill); --line-c: var(--t-bridge-line); }
.s-veneer { --fill: var(--t-veneer-fill); --line-c: var(--t-veneer-line); }
.s-periapical { --fill: var(--t-periapical-fill); --line-c: var(--t-periapical-line); }
.s-fracture { --fill: var(--t-fracture-fill); --line-c: var(--t-fracture-line); }
.s-extract { --fill: var(--t-extract-fill); --line-c: var(--t-extract-line); }
.odo.dc .s-treated { --fill: var(--t-treated-fill); --line-c: var(--t-treated-line); }
.s-plan { --fill: var(--t-plan-fill); --line-c: var(--t-plan-line); }

/* yuqori qator */
.dc-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.dc-top .odo-viewbar { margin: 0; }
.dc-tools { margin-left: auto; display: flex; gap: 6px; }
.dc-tbtn { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600;
           height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.dc-tbtn:hover { border-color: var(--primary); color: var(--primary-dark); }
.dc-tbtn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* legenda — filtr */
.dc-legend { gap: 6px; }
.dc-lg { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 12.5px; }
.dc-lg:hover { border-color: var(--line-c); }
.dc-lg[aria-pressed="true"] { background: var(--fill); border-color: var(--line-c); color: var(--text); box-shadow: 0 0 0 1px var(--line-c); }
.dc-lg.zero { opacity: .55; }
.dc-lg.zero b { display: none; }
.dc-lg b:empty { display: none; }
.dc-lg b { background: var(--line-c); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; line-height: 17px; }
.dc-lg.s-plan i { border-style: dashed; }

/* xarita */
.odo.dc .dc-chart { background: var(--dc-chart-bg); padding: 16px 10px 12px; position: relative; }
.dc-set { display: none; }
.odo.dc[data-set="adult"] .dc-set[data-set="adult"], .odo.dc[data-set="child"] .dc-set[data-set="child"] { display: block; }
.dc-jaw { display: flex; justify-content: center; align-items: flex-end; min-width: 600px; }
.dc-lower { align-items: flex-start; }
.dc-side { display: flex; gap: 1px; align-items: inherit; }
.dc-right { padding-right: 10px; margin-right: 10px; border-right: 1.5px dashed var(--line-strong); }
.dc-midline { display: flex; justify-content: space-between; max-width: 760px; margin: 6px auto; padding: 0 6%; font-size: 10px; font-weight: 700;
              color: var(--faint); letter-spacing: .08em; border-top: 1.5px dashed var(--line-strong); padding-top: 4px; }

.odo.dc .dc-tooth { flex: 0 0 auto; max-width: none; padding: 4px 1px; gap: 3px; border-radius: 12px; color: var(--muted);
                    transition: background-color .12s ease, opacity .15s ease, transform .12s ease; }
.odo.dc .dc-tooth:hover { background: rgb(var(--primary-rgb) / .07); transform: translateY(-1px); }
.dc-lower .dc-tooth:hover { transform: translateY(1px); }
.odo.dc .dc-tooth.selected { background: var(--surface); box-shadow: 0 0 0 2px var(--primary), 0 6px 16px -8px rgb(var(--primary-rgb) / .6); }
.odo.dc .dc-tooth.multi { background: var(--warning-light); box-shadow: 0 0 0 2px var(--warning); }
.odo.dc .dc-tooth.dim { opacity: .22; }
.odo.dc .dc-tooth .tn { font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.odo.dc .dc-tooth.selected .tn { color: var(--primary); }
.odo.dc .dc-tooth.has-hist::after { width: 5px; height: 5px; }

/* yon ko'rinish (realistik) */
.odo.dc .dc-tooth svg.tv { max-width: none; aspect-ratio: auto; height: auto; overflow: visible; display: block; }
.odo.dc .tv .t-root { fill: url(#dcRoot); stroke: #c8b085; stroke-width: 1.2; }
.odo.dc .tv .t-crown { fill: url(#dcEnamel); stroke: #cbbd9f; stroke-width: 1.3; }
.odo.dc .tv .t-enamel { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .75; }
.odo.dc .tv .t-canal, .odo.dc .tv .t-implant, .odo.dc .tv .t-apex, .odo.dc .tv .t-cap, .odo.dc .tv .t-veneer,
.odo.dc .tv .t-frac, .odo.dc .tv .t-x, .odo.dc .tv .t-spot { display: none; }
.odo.dc .tv .t-canal { fill: none; stroke: var(--dc-endo); stroke-width: 3.2; stroke-linecap: round; }
.odo.dc .tv .t-implant path:first-child { fill: url(#dcTi); stroke: #5f696f; stroke-width: 1.2; }
.odo.dc .tv .t-implant .thr { stroke: #5f696f; stroke-width: 1.6; fill: none; }
.odo.dc .tv .t-apex { fill: rgb(192 57 43 / .28); stroke: var(--dc-peri); stroke-width: 1.6; }
.odo.dc .tv .t-cap { fill: url(#dcGold); stroke: #a87d18; stroke-width: 2.2; }
.odo.dc .tv .t-veneer { fill: #c9f2e8; stroke: var(--dc-veneer); stroke-width: 2; opacity: .9; }
.odo.dc .tv .t-frac { fill: none; stroke: var(--dc-frac); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.odo.dc .tv .t-x path { stroke: var(--dc-extract); stroke-width: 6; stroke-linecap: round; }
.odo.dc .tv .t-spot { stroke: rgb(0 0 0 / .15); stroke-width: 1; }

.odo.dc .s-caries .tv .t-spot, .odo.dc .sf-caries .tv .t-spot { display: block; fill: #6b3a22; }
.odo.dc .s-filled .tv .t-spot, .odo.dc .sf-filled .tv .t-spot { display: block; fill: var(--dc-filled); }
.odo.dc .s-treated .tv .t-canal { display: block; }
.odo.dc .s-treated .tv .t-spot { display: block; fill: var(--dc-filled); }
.odo.dc .s-crown .tv .t-cap { display: block; }
.odo.dc .s-bridge .tv .t-cap { display: block; fill: #fde3c4; stroke: var(--dc-bridge); stroke-dasharray: 5 3; }
.odo.dc .s-implant .tv .t-root { display: none; }
.odo.dc .s-implant .tv .t-implant { display: block; }
.odo.dc .s-implant .tv .t-crown { fill: #f8f9fb; stroke: #9aa5ad; }
.odo.dc .s-veneer .tv .t-veneer { display: block; }
.odo.dc .s-periapical .tv .t-apex { display: block; }
.odo.dc .s-fracture .tv .t-frac { display: block; }
.odo.dc .s-extract .tv .t-x { display: block; }
.odo.dc .s-extract .tv .t-crown, .odo.dc .s-extract .tv .t-root { opacity: .7; }
.odo.dc .s-other .tv .t-crown { stroke: var(--dc-other); stroke-width: 2.4; }
.odo.dc .s-missing .tv { opacity: .2; }
.odo.dc .s-missing .tv .t-crown, .odo.dc .s-missing .tv .t-root { stroke-dasharray: 4 3; fill: none; stroke: var(--faint); }
.odo.dc .s-missing .to { opacity: .15; }
.odo.dc .s-missing .tn { text-decoration: line-through; color: var(--faint); }

/* 5 yuzali chaynash ko'rinishi */
.odo.dc .dc-tooth svg.to { width: 26px; height: 26px; max-width: none; aspect-ratio: 1; }
.odo.dc .to .srf, .dc-rose .srf { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.4; stroke-linejoin: round; }
.odo.dc .to .srf.c-caries, .dc-rose .srf.c-caries { fill: var(--dc-caries); stroke: #8f2a20; }
.odo.dc .to .srf.c-filled, .dc-rose .srf.c-filled { fill: var(--dc-filled); stroke: #1f4f94; }
.odo.dc .s-crown .to .srf { fill: #f5dc92; }
.odo.dc .s-implant .to .srf { fill: #d5dbdf; }
.odo.dc .s-bridge .to .srf { fill: #fbd3a8; }

/* reja va qimirlash belgilari */
.odo.dc .dc-tooth.has-plan .tv { filter: drop-shadow(0 0 0 transparent); }
.odo.dc .dc-tooth.has-plan::before { content: ''; position: absolute; inset: 1px; border: 2px dashed var(--dc-plan); border-radius: 12px; pointer-events: none; }
.dc-mob { position: absolute; top: 46%; right: -1px; font-size: 10px; font-weight: 800; color: var(--danger); letter-spacing: -.05em; }
.dc-mob:empty { display: none; }

.dc-hint-multi { display: none; }
.odo.dc.dc-multi .dc-hint-multi { display: inline; color: var(--warning); font-weight: 600; }

/* panel */
.dc-panel { max-height: calc(100vh - var(--header-height) - 32px); overflow-y: auto; }
.odo.dc.panel-open .odo-layout { grid-template-columns: minmax(0, 1fr) 340px; }
.dc-sec-title { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 4px 0 8px; display: flex; align-items: center; gap: 8px; }
.dc-sec-title small { font-weight: 500; color: var(--faint); }
.dc-conds { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.dc-conds .odo-chip { justify-content: flex-start; border-radius: 10px; padding: 7px 9px; font-size: 12px; }
.dc-surf { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.dc-rose { width: 120px; height: 120px; flex-shrink: 0; cursor: pointer; }
.dc-rose .srf { stroke-width: 2; transition: fill .12s ease; }
.dc-rose .srf:hover { fill: var(--primary-light); }
.dc-rose.blocked { opacity: .35; cursor: not-allowed; }
.dc-rose text { font-size: 13px; font-weight: 800; fill: var(--muted); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.dc-surf-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.dc-surf-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.dc-surf-legend .sw.caries { background: var(--dc-caries); } .dc-surf-legend .sw.filled { background: var(--dc-filled); }
.dc-surf-legend small { color: var(--faint); font-size: 11.5px; line-height: 1.4; }
.dc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dc-row .dc-sec-title { margin: 0; }
.dc-mobsel { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.dc-mobsel button { border: 0; background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 11px; cursor: pointer; color: var(--text-2); }
.dc-mobsel button + button { border-left: 1px solid var(--line); }
.dc-mobsel button[aria-checked="true"] { background: var(--primary); color: #fff; }
.odo-save.dirty { box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .3); }
.odo-save.dirty span::after { content: ' *'; }
.dc-panel.is-multi .dc-single, .dc-panel.is-multi #odoNotes, .dc-panel.is-multi #odoSave { display: none; }
.dc-panel.is-multi .odo-panel-num { background: var(--warning); }
.dc-add { margin-left: auto; border: 0; background: var(--primary-light); color: var(--primary-dark); font: inherit; font-size: 12px; font-weight: 700;
          border-radius: 8px; padding: 4px 9px; cursor: pointer; }

/* davolash rejasi */
.dc-plan { margin-top: 18px; background: var(--surface); border: var(--border); border-radius: var(--radius); padding: 14px 16px; }
.dc-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.dc-plan-head h4 { margin: 0; font-size: 15px; }
.dc-plan-head h4 i { color: var(--primary); margin-right: 4px; }
.dc-plan-head .btn { margin-left: auto; }
.dc-plan-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.dc-plan-sum b { color: var(--text); }
.dc-prog { width: 120px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; display: inline-block; }
.dc-prog i { display: block; height: 100%; background: var(--success); border-radius: 6px; }
.dc-plan-empty { color: var(--faint); font-size: 13px; padding: 8px 0; }
.dc-stage + .dc-stage { margin-top: 10px; }
.dc-stage-h { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); padding: 4px 2px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.dc-pi { display: grid; grid-template-columns: 28px 54px minmax(0, 1fr) auto 28px; gap: 8px; align-items: center; padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.dc-tplan .dc-pi { grid-template-columns: 26px 40px minmax(0, 1fr) auto 24px; font-size: 12.5px; }
.dc-pi-chk { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-strong); background: var(--surface); color: transparent; cursor: pointer; display: grid; place-items: center; font-size: 11px; }
.dc-pi.done .dc-pi-chk { background: var(--success); border-color: var(--success); color: #fff; }
.dc-pi-tooth { font-weight: 700; font-variant-numeric: tabular-nums; }
.dc-pi-tooth small { display: block; font-size: 10.5px; color: var(--faint); font-weight: 600; }
.dc-pi-title small { display: block; font-size: 11.5px; color: var(--success); }
.dc-pi.done .dc-pi-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.dc-pi-price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.dc-pi-del { border: 0; background: none; color: var(--faint); cursor: pointer; border-radius: 6px; height: 26px; }
.dc-pi-del:hover { color: var(--danger); background: var(--danger-light); }

/* oyna */
.dc-dialog { position: fixed; inset: 0; z-index: 3000; background: rgb(15 42 51 / .45); display: grid; place-items: center; padding: 16px; }
.dc-dialog[hidden] { display: none; }
.dc-dlg-card { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); }
.dc-dlg-card h4 { margin: 0 0 2px; }
.dc-dlg-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.dc-dlg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dc-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

@media (max-width: 1100px) { .odo.dc.panel-open .odo-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
    .dc-tools { margin-left: 0; }
    .dc-conds { grid-template-columns: 1fr 1fr; }
    .dc-pi { grid-template-columns: 26px 44px minmax(0, 1fr) auto 26px; font-size: 13px; }
}
@media print {
    body.dc-printing * { visibility: hidden !important; }
    body.dc-printing #odontogram, body.dc-printing #odontogram * { visibility: visible !important; }
    body.dc-printing #odontogram { position: absolute; left: 0; top: 0; width: 100%; }
    body.dc-printing .odo3d, body.dc-printing .dc-top, body.dc-printing .odo-panel, body.dc-printing .dc-pi-del,
    body.dc-printing .dc-plan-head .btn, body.dc-printing .dc-hint { display: none !important; }
    body.dc-printing .odo.dc .dc-chart { display: block !important; overflow: visible; }
    body.dc-printing .dc-tooth.dim { opacity: 1 !important; }
}
/* tishlar konteyner kengligiga moslashadi */
.dc-jaw { min-width: 560px; }
.dc-side { flex: 1 1 0; min-width: 0; }
.dc-right { justify-content: flex-end; }
.odo.dc .dc-tooth { flex: var(--tw, 44) 1 0; min-width: 0; }
.odo.dc .dc-tooth.ty-inc { --tw: 40; } .odo.dc .dc-tooth.ty-can { --tw: 42; } .odo.dc .dc-tooth.ty-pre { --tw: 44; } .odo.dc .dc-tooth.ty-mol { --tw: 54; }
.odo.dc .dc-tooth svg.tv { width: 100%; max-width: 58px; }
.odo.dc .dc-tooth svg.to { width: min(26px, 80%); height: auto; }
/* panel xarita ostida — xarita doim to'liq kenglikda */
.odo.dc.panel-open .odo-layout { grid-template-columns: minmax(0, 1fr); }
.odo.dc .dc-panel { position: static; max-height: none; overflow: visible; }
.dc-pgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; }
.dc-pcol { min-width: 0; }
.dc-pcol .odo-hist { max-height: 260px; }
@media (max-width: 1000px) { .dc-pgrid { grid-template-columns: 1fr 1fr; } .dc-pgrid .dc-pcol:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .dc-pgrid { grid-template-columns: 1fr; } }

/* ═════════ MEDIA MARKAZI (photo_protocol.php) — foto-protokol, rentgen, oldin/keyin ═════════ */
.mc { --mc-pink: #d6336c; --mc-x: #5b4bc4; --mc-before: #c2410c; --mc-progress: #2f6fb3; --mc-after: #1e9a6a; display: flex; flex-direction: column; gap: 16px; }
.mc [hidden] { display: none !important; }
.mc-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.mc-crumbs a { color: var(--muted); text-decoration: none; }
.mc-crumbs a:hover { color: var(--primary); }
.mc-crumbs i { font-size: 9px; opacity: .6; }
.mc-crumbs span { color: var(--text); font-weight: 600; }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow); }
.mc-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mc-avatar { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, var(--primary), #19b3bf); box-shadow: 0 6px 16px -6px rgb(var(--primary-rgb) / .6); flex: none; }
.mc-head h1 { font-size: 19px; line-height: 1.25; margin: 0; color: var(--text); }
.mc-sub { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mc-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; transition: var(--transition); }
.mc-btn:hover { border-color: var(--primary); color: var(--primary); }
.mc-btn.mc-primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px -4px rgb(var(--primary-rgb) / .6); }
.mc-btn.mc-primary:hover { background: var(--primary-dark); color: #fff; }
.mc-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mc-stat { background: var(--surface); border: var(--border); border-radius: var(--radius); padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.mc-stat i { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-light); color: var(--primary); font-size: 14px; }
.mc-stat b { font-size: 16px; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-stat span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: var(--border); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.mc-tabs::-webkit-scrollbar { display: none; }
.mc-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: var(--transition); white-space: nowrap; }
.mc-tabs button:hover { color: var(--text); background: var(--surface-2); }
.mc-tabs button[aria-selected="true"] { background: var(--primary); color: #fff; box-shadow: 0 4px 12px -5px rgb(var(--primary-rgb) / .7); }
.mc-tabs b { font-size: 11px; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: rgb(var(--primary-rgb) / .12); color: inherit; }
.mc-tabs button[aria-selected="true"] b { background: rgb(255 255 255 / .22); }
.mc-tabs b:empty { display: none; }
.mc-panel { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: 16px 18px 20px; box-shadow: var(--shadow); }
.mc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mc-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-2); border: var(--border); border-radius: 10px; }
.mc-seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mc-seg button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.mc-seg button[data-stage="before"][aria-pressed="true"] { color: var(--mc-before); }
.mc-seg button[data-stage="progress"][aria-pressed="true"] { color: var(--mc-progress); }
.mc-seg button[data-stage="after"][aria-pressed="true"] { color: var(--mc-after); }
.mc-progress { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); min-width: 240px; }
.mc-progress > div { flex: 1; height: 8px; border-radius: 6px; background: var(--surface-2); border: var(--border); overflow: hidden; }
.mc-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #19b3bf); border-radius: 6px; transition: width .4s ease; }
.mc-progress.done i { background: linear-gradient(90deg, var(--success), #39c98e); }
.mc-hint { font-size: 12.5px; color: var(--muted); margin: -4px 0 14px; display: flex; gap: 8px; align-items: flex-start; }
.mc-hint i { color: var(--primary); margin-top: 3px; }
.mc-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 6px 0 10px; display: flex; align-items: center; gap: 8px; }
.mc-h3 i { color: var(--primary); }
.mc-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.mc-slot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.mc-slot:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.mc-slot.busy { opacity: .55; pointer-events: none; }
.mc-slot.busy::after { content: ''; position: absolute; top: 40%; left: 50%; width: 28px; height: 28px; margin: -14px; border: 3px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
.mc-slot-img, .mc-slot-add { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; cursor: pointer; position: relative; background: #0d1a1f; }
.mc-slot-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.mc-slot:hover .mc-slot-img img { transform: scale(1.04); }
.mc-slot.empty { border-style: dashed; border-width: 1.5px; border-color: var(--line-strong); }
.mc-slot-add { background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--surface) 10px 20px); color: var(--faint); }
.mc-slot.empty:hover { border-color: var(--primary); }
.mc-slot.empty:hover .mc-slot-add { color: var(--primary); }
.mc-guide { width: 70%; height: 70%; margin: auto; position: absolute; inset: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.mc-plus { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 13px; box-shadow: 0 4px 10px -3px rgb(var(--primary-rgb) / .7); transition: transform .2s; }
.mc-slot.empty:hover .mc-plus { transform: scale(1.12); }
.mc-slot-cap { padding: 9px 11px 10px; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
.mc-slot-cap b { font-size: 13px; color: var(--text); line-height: 1.3; }
.mc-slot-cap small { grid-column: 1; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.mc-mini { grid-row: 1 / 3; grid-column: 2; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--primary); cursor: pointer; }
.mc-mini:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.mc-badge { position: absolute; top: 8px; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; font-size: 11.5px; font-weight: 700; color: #fff; backdrop-filter: blur(6px); }
.mc-badge-n { right: 8px; background: rgb(15 42 51 / .7); }
.mc-badge-ann { left: 8px; background: rgb(214 51 108 / .9); }
.mc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-chips button { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mc-chips button b { font-size: 11px; color: var(--muted); }
.mc-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.mc-chips button[aria-pressed="true"] b { color: rgb(255 255 255 / .7); }
html[data-theme="dark"] .mc-chips button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); }
.mc-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--muted); min-width: 240px; }
.mc-search input { border: 0; outline: 0; background: none; color: var(--text); font-size: 13px; width: 100%; }
.mc-search:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.mc-group + .mc-group { margin-top: 18px; }
.mc-group h4 { font-size: 14px; color: var(--text); margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.mc-group h4 small { font-size: 12px; color: var(--muted); font-weight: 500; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mc-tile { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.mc-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.mc-tile-img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; background: #0d1a1f; cursor: zoom-in; overflow: hidden; }
.mc-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.mc-tile.is-x .mc-tile-img img { object-fit: contain; }
.mc-tile:hover .mc-tile-img img { transform: scale(1.04); }
.mc-tile-img.broken img { opacity: 0; }
.mc-tile-img.broken::after { content: "Rasm topilmadi"; position: absolute; inset: 0; display: grid; place-items: center; color: #9aa7ab; font-size: 12px; }
.mc-tile-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-tile-body b { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-tile-body small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mc-tag { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; }
.mc-tag.t-before { background: #fff1e8; color: var(--mc-before); border-color: #fbd5bd; }
.mc-tag.t-progress { background: var(--info-light); color: var(--mc-progress); border-color: #c7dbf1; }
.mc-tag.t-after { background: var(--success-light); color: var(--mc-after); border-color: #bfe7d4; }
.mc-tag.t-x { background: #efedfb; color: var(--mc-x); border-color: #d9d4f6; }
.mc-tag.t-tooth { color: var(--primary); }
html[data-theme="dark"] .mc-tag.t-before { background: #3a2414; border-color: #5a3418; color: #f6a86f; }
html[data-theme="dark"] .mc-tag.t-progress { border-color: #24425f; color: #8fc0f0; }
html[data-theme="dark"] .mc-tag.t-after { border-color: #1f4a3a; color: #6fdcaa; }
html[data-theme="dark"] .mc-tag.t-x { background: #241f45; border-color: #382f6a; color: #b9aef5; }
.mc-tile-act { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: .2s; }
.mc-tile:hover .mc-tile-act, .mc-tile:focus-within .mc-tile-act { opacity: 1; transform: none; }
.mc-tile-act button, .mc-tile-act a { width: 32px; height: 32px; border-radius: 9px; border: 0; display: grid; place-items: center; background: rgb(255 255 255 / .92); color: var(--ink); cursor: pointer; font-size: 13px; text-decoration: none; box-shadow: 0 2px 8px rgb(0 0 0 / .2); }
.mc-tile-act button:hover, .mc-tile-act a:hover { background: var(--primary); color: #fff; }
@media (hover: none) { .mc-tile-act { opacity: 1; transform: none; } }
.mc-empty { grid-column: 1 / -1; text-align: center; padding: 46px 16px; color: var(--muted); }
.mc-empty i { font-size: 40px; color: var(--primary-soft); display: block; margin-bottom: 12px; }
.mc-empty p { margin: 0 0 14px; }
.mc-drop { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: var(--transition); margin-bottom: 14px; position: relative; }
.mc-drop > i { font-size: 28px; color: var(--mc-x); width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: #efedfb; flex: none; }
html[data-theme="dark"] .mc-drop > i { background: #241f45; color: #b9aef5; }
.mc-drop small { color: var(--muted); }
.mc-drop:hover, .mc-drop.over, .mc-drop:focus-visible { border-color: var(--primary); background: var(--primary-light); outline: 0; }
.mc-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.mc-drop-sm > i { color: var(--primary); background: var(--primary-light); }
.mc.dropping::after { content: "Rasmlarni qo'yib yuboring"; position: fixed; inset: 12px; z-index: 3000; border: 3px dashed var(--primary); border-radius: 20px; background: rgb(var(--primary-rgb) / .1); display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--primary); pointer-events: none; backdrop-filter: blur(2px); }
/* oldin / keyin */
.mc-sel { max-width: 320px; height: 38px; }
.mc-cmp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.mc-cmp-pick label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.mc-cmp-pick > div:first-child label { color: var(--mc-before); }
.mc-cmp-pick > div:last-child label { color: var(--mc-after); }
.mc-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.mc-strip em { color: var(--muted); font-size: 13px; }
.mc-strip button { flex: none; width: 92px; border: 2px solid transparent; border-radius: 10px; padding: 0; background: var(--surface-2); cursor: pointer; overflow: hidden; text-align: center; }
.mc-strip button img { width: 100%; height: 64px; object-fit: cover; display: block; background: #0d1a1f; }
.mc-strip button span { display: block; font-size: 10.5px; color: var(--muted); padding: 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-strip button[aria-pressed="true"] { border-color: var(--primary); box-shadow: var(--ring); }
.mc-cmp { border-radius: 14px; overflow: hidden; background: #0b1418; }
.mc-cmp .mc-empty { background: var(--surface); }
.mc-cap { position: absolute; left: 12px; top: 12px; z-index: 3; background: rgb(0 0 0 / .62); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; backdrop-filter: blur(4px); pointer-events: none; }
.mc-cap.r { left: auto; right: 12px; }
.mc-slider { position: relative; --p: 50%; user-select: none; line-height: 0; }
.mc-slider > img { width: 100%; max-height: 72vh; object-fit: contain; display: block; }
.mc-clip { position: absolute; inset: 0; width: var(--p); overflow: hidden; border-right: 0; }
.mc-clip img { height: 100%; max-height: 72vh; object-fit: contain; display: block; }
.mc-handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 8px rgb(0 0 0 / .5); pointer-events: none; z-index: 2; }
.mc-handle span { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 4px 14px rgb(0 0 0 / .35); line-height: 1; }
.mc-slider input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 4; }
.mc-side { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.mc-side figure { position: relative; margin: 0; background: #0b1418; display: grid; place-items: center; }
.mc-side img { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.mc-fade { position: relative; --o: .5; line-height: 0; }
.mc-fade img { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.mc-fade img.top { position: absolute; inset: 0; height: 100%; opacity: var(--o); }
.mc-range { width: calc(100% - 32px); margin: 12px 16px; accent-color: var(--primary); }
/* ko'ruvchi */
.mc-view { position: fixed; inset: 0; z-index: 4000; background: #070d10; color: #e6eef0; display: flex; flex-direction: column; }
.mcv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: rgb(255 255 255 / .04); border-bottom: 1px solid rgb(255 255 255 / .07); flex-wrap: wrap; }
.mcv-title { min-width: 0; display: flex; flex-direction: column; }
.mcv-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcv-title span { font-size: 12px; color: #9fb3b8; }
.mcv-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mcv-tools button, .mcv-tools a { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .07); color: #e6eef0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }
.mcv-tools button:hover, .mcv-tools a:hover { background: rgb(255 255 255 / .16); }
.mcv-tools button[aria-pressed="true"] { background: rgb(30 165 162 / .3); border-color: rgb(30 165 162 / .6); }
.mcv-tools .mcv-accent { background: var(--mc-pink); border-color: var(--mc-pink); }
.mcv-tools .mcv-accent:hover { background: #b82a5c; }
.mcv-tools .mcv-close { background: rgb(209 67 67 / .25); border-color: rgb(209 67 67 / .45); }
.mcv-adj { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 8px 16px; font-size: 12.5px; color: #c9d6d9; background: rgb(255 255 255 / .03); border-bottom: 1px solid rgb(255 255 255 / .06); }
.mcv-adj label { display: inline-flex; align-items: center; gap: 8px; }
.mcv-adj input[type=range] { width: 120px; accent-color: #1ea5a2; }
.mcv-adj button { height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .15); background: none; color: #e6eef0; cursor: pointer; }
.mcv-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
.mc-view.no-info .mcv-body { grid-template-columns: minmax(0, 1fr) 0; }
.mc-view.no-info .mcv-info { display: none; }
.mcv-stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; background: radial-gradient(ellipse at center, #10202a 0%, #070d10 70%); }
.mcv-stage:active { cursor: grabbing; }
.mcv-stage img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; user-select: none; -webkit-user-drag: none; transition: opacity .2s; will-change: transform; }
.mcv-nav { position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .1); color: #fff; font-size: 16px; cursor: pointer; z-index: 2; backdrop-filter: blur(6px); }
.mcv-nav:hover { background: rgb(255 255 255 / .22); }
.mcv-prev { left: 14px; } .mcv-next { right: 14px; }
.mcv-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 12px; background: rgb(0 0 0 / .5); padding: 3px 10px; border-radius: 10px; pointer-events: none; }
.mcv-count:empty { display: none; }
.mcv-info { background: var(--surface); color: var(--text); border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; }
.mcv-info form { display: flex; flex-direction: column; gap: 10px; }
.mcv-info label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mcv-row, .mcv-p { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mc-view .mcv-x { display: none; }
.mc-view.is-x .mcv-x { display: block; }
.mc-view.is-x .mcv-p { display: none; }
.mcv-by { font-size: 12px; color: var(--muted); line-height: 1.7; }
.mcv-by i { width: 16px; color: var(--faint); }
.mcv-btns { display: flex; gap: 8px; }
.mcv-btns .btn-primary { flex: 1; }
.mcv-del { color: var(--danger) !important; }
/* oynalar */
.mc-modal { position: fixed; inset: 0; z-index: 4100; background: rgb(8 20 25 / .55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.mc-dlg { width: min(620px, 100%); background: var(--surface); color: var(--text); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.mc-dlg-sm { width: min(400px, 100%); text-align: center; }
.mc-dlg-head { display: flex; align-items: center; justify-content: space-between; }
.mc-dlg-head h3 { font-size: 17px; margin: 0; display: flex; gap: 8px; align-items: center; }
.mc-dlg-head h3 i { color: var(--primary); }
.mc-x { width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.mc-x:hover { background: var(--danger-light); color: var(--danger); }
.mc-dlg label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.mc-dlg label.mc-drop { flex-direction: row; font-weight: 400; margin: 0; }
.mc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc-kind { align-self: flex-start; }
.mc-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.mc-thumbs:empty { display: none; }
.mc-thumbs figure { position: relative; margin: 0; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.mc-thumbs img { width: 100%; height: 66px; object-fit: cover; display: block; }
.mc-thumbs figcaption { font-size: 10px; color: var(--muted); padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-thumbs button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .6); color: #fff; font-size: 11px; cursor: pointer; }
.mc-upbar { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.mc-upbar > div { flex: 1; height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; border: var(--border); }
.mc-upbar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.mc-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.mc-muted { color: var(--muted); font-size: 13px; margin: 0; }
.mc-qr { display: grid; place-items: center; gap: 10px; min-height: 220px; }
.mc-qr svg { width: 220px; height: 220px; background: #fff; border-radius: 12px; padding: 6px; }
.mc-qr a { font-size: 12.5px; color: var(--primary); }
.mc-qr-stat { font-size: 13px; color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 8px; }
.mc-qr-stat .fa-circle-check { color: var(--success); }
.mc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); animation: mcPulse 1.2s ease-in-out infinite; }
@keyframes mcPulse { 50% { opacity: .3; } }
.mc-err { color: var(--danger); font-size: 13px; }
@media (max-width: 1100px) { .mc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .mcv-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .mcv-info { max-height: 42vh; border-left: 0; border-top: 1px solid var(--line); }
    .mc-view.no-info .mcv-body { grid-template-rows: minmax(0, 1fr) 0; }
    .mc-cmp-pick { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .mc-head { padding: 14px; }
    .mc-actions { width: 100%; }
    .mc-actions .mc-btn { flex: 1; justify-content: center; padding: 0 8px; }
    .mc-actions .mc-btn span { display: none; }
    .mc-actions .mc-primary span { display: inline; }
    .mc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mc-panel { padding: 14px 12px 16px; }
    .mc-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mc-slot-cap small { display: none; }
    .mc-search { min-width: 0; width: 100%; }
    .mc-progress { min-width: 0; width: 100%; }
    .mc-row, .mcv-row, .mcv-p { grid-template-columns: 1fr; }
    .mcv-tools button span, .mcv-tools .mcv-accent span { display: none; }
    .mcv-adj input[type=range] { width: 90px; }
    .mc-side { grid-template-columns: 1fr; }
    .mc-drop { padding: 14px; gap: 12px; }
}

/* ═════════ ORTODONTIYA (ortho.php) — .mc asosida ═════════ */
.or-avatar { background: linear-gradient(135deg, #2f6fb3, #7b5cd6); box-shadow: 0 6px 16px -6px rgb(47 111 179 / .6); }
.or .pulse { animation: orPulse 1.4s ease-in-out infinite; }
@keyframes orPulse { 50% { box-shadow: 0 0 0 6px rgb(var(--primary-rgb) / .22); } }
.or-empty { text-align: center; padding: 34px 20px; }
.or-empty-art svg { width: 220px; height: 110px; }
.or-empty-art .w { fill: none; stroke: #9aa7ab; stroke-width: 2.5; }
.or-empty-art .t rect { fill: #fffdf8; stroke: #c9bc9d; stroke-width: 1.4; }
.or-empty-art .t rect.b { fill: #c9d1d6; stroke: #8b979d; }
.or-empty h2 { font-size: 19px; margin: 10px 0 6px; color: var(--text); }
.or-empty p { color: var(--muted); margin: 0 0 18px; }
.or-create { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; text-align: left; max-width: 980px; margin: 0 auto; }
.or-create label, .or-grid2 label, .or-grid3 label, .or-full, .or-fields label, .or-vform label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.or-cases { display: flex; gap: 8px; flex-wrap: wrap; }
.or-cases:empty { display: none; }
.or-cases button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; }
.or-cases button small { color: var(--muted); font-weight: 500; }
.or-cases button[aria-pressed="true"] { border-color: var(--primary); box-shadow: var(--ring); }
.or-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.or-dot.st-plan { background: var(--warning); } .or-dot.st-active { background: var(--primary); } .or-dot.st-retention { background: #7b5cd6; } .or-dot.st-done { background: var(--success); } .or-dot.st-cancel { background: var(--danger); }
.or-steps { display: flex; align-items: center; gap: 8px; background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: var(--shadow); flex-wrap: wrap; }
.or-step { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px; cursor: pointer; color: var(--muted); font: inherit; }
.or-step:disabled { cursor: default; }
.or-step span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-strong); background: var(--surface); font-size: 14px; transition: var(--transition); }
.or-step b { font-size: 13px; font-weight: 600; }
.or-step.done span { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.or-step.done b { color: var(--text-2); }
.or-step.on span { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 5px rgb(var(--primary-rgb) / .15); }
.or-step.on b { color: var(--text); font-weight: 700; }
.or-step:not(:disabled):hover span { border-color: var(--primary); }
.or-step-line { flex: 1; min-width: 18px; height: 2px; background: var(--line-strong); border-radius: 2px; }
.or-cancel { font-size: 12px; font-weight: 700; color: var(--danger); background: var(--danger-light); padding: 3px 10px; border-radius: 8px; }
.or-stop { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.or-kpis .mc-stat { position: relative; }
.or-kpis .mc-stat.warn i { background: var(--danger-light); color: var(--danger); }
.or-kpis .mc-stat.warn span { color: var(--danger); font-weight: 600; }
.or-bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.or-bar i { display: block; height: 100%; background: var(--primary); }
/* 3D */
.or-model { padding: 12px; }
.or3d-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; }
.or3d { position: relative; min-height: 560px; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #e6eeee 60%, #d3e0e0 100%); border: var(--border); }
html[data-theme="dark"] .or3d { background: radial-gradient(ellipse at 50% 40%, #1e3a42 0%, #122229 65%, #0c171c 100%); }
.or3d .j3-stage { position: absolute; inset: 0; touch-action: none; }
.or3d .j3-stage canvas { width: 100% !important; height: 100% !important; display: block; }
.or3d .j3-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.or3d .j3-labels .odo3d-num { pointer-events: auto; }
.or3d .j3-tip { position: absolute; z-index: 5; pointer-events: none; }
.or3d-views { position: absolute; top: 10px; left: 10px; display: flex; gap: 3px; padding: 3px; background: rgb(255 255 255 / .85); border-radius: 10px; box-shadow: var(--shadow); z-index: 3; backdrop-filter: blur(6px); flex-wrap: wrap; }
html[data-theme="dark"] .or3d-views { background: rgb(18 34 41 / .85); }
.or3d-views button { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.or3d-views button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.or3d-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; text-align: center; padding: 20px; }
.or3d-time { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: rgb(255 255 255 / .9); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); }
html[data-theme="dark"] .or3d-time { background: rgb(18 34 41 / .9); }
.or3d-time input { flex: 1; accent-color: var(--primary); }
.or3d-time b { min-width: 42px; text-align: right; font-size: 14px; color: var(--primary); }
.or-tl { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.or-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; cursor: pointer; font-size: 14px; flex: none; box-shadow: 0 4px 12px -4px rgb(var(--primary-rgb) / .7); }
.or-play.on { animation: orPulse 1s ease-in-out infinite; }
.or-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.or-box { border: var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); }
.or-box h4 { font-size: 13px; margin: 0 0 8px; color: var(--text); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.or-box h4 small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.or-box h4 + .or-toggles { margin-bottom: 10px; }
.or-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 13px; }
.or-toggles label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.or-toggles input { accent-color: var(--primary); width: 16px; height: 16px; }
.or-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 6px 0 10px; }
.or-lbl input[type=range] { accent-color: var(--primary); }
.or-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.or-colors button { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--surface); background: var(--c); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; transition: transform .15s; }
.or-colors button:hover { transform: scale(1.1); }
.or-colors button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); transform: scale(1.1); }
.or-tooth-empty { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.or-tooth-empty i { color: var(--primary); margin-right: 4px; }
.or-tooth-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.or-tooth-head b { font-size: 18px; color: var(--primary); }
.or-tooth-head span { font-size: 12.5px; color: var(--text-2); flex: 1; min-width: 0; }
.or-brk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
.or-brk input { accent-color: var(--primary); }
.or-sliders { display: flex; flex-direction: column; gap: 6px; }
.or-sl { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; font-size: 12px; color: var(--text-2); }
.or-sl > span { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.or-sl b { color: var(--primary); font-variant-numeric: tabular-nums; }
.or-sl input { accent-color: var(--primary); width: 100%; }
.or-sl-u { font-style: normal; color: var(--faint); font-size: 11px; align-self: center; }
.or-row2 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.or-row2 .btn-primary { margin-left: auto; }
.or-moves { display: flex; flex-direction: column; gap: 5px; max-height: 220px; overflow-y: auto; }
.or-mv { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; font-size: 12px; }
.or-mv.on { border-color: var(--primary); }
.or-mv b { color: var(--primary); }
.or-mv span { color: var(--text-2); line-height: 1.35; }
.or-mv button { border: 0; background: none; color: var(--faint); cursor: pointer; }
.or-mv button:hover { color: var(--danger); }
/* tashxis */
.or-summary { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--primary-light); border: 1px solid var(--primary-soft); margin-bottom: 16px; }
.or-summary > i { font-size: 20px; color: var(--primary); margin-top: 2px; }
.or-summary b { font-size: 13px; color: var(--text); }
.or-summary p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.or-diag-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.or-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.or-fields .or-full, .or-full { grid-column: 1 / -1; }
.or-ojob { margin: 0; position: sticky; top: 80px; }
.or-ojob svg { width: 100%; height: auto; display: block; }
.or-ojob figcaption { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 6px; }
.or-oj-bg { fill: var(--surface-2); stroke: var(--line); }
.or-dim { stroke: var(--primary); stroke-width: 1.4; }
.or-dim.b { stroke: #7b5cd6; }
.or-dim-t { font-size: 11px; font-weight: 700; fill: var(--primary); }
.or-dim-t.b { fill: #7b5cd6; }
.or-lab { font-size: 10px; fill: var(--muted); }
.or-h4 { font-size: 13px; margin: 18px 0 8px; color: var(--text); display: flex; gap: 8px; align-items: baseline; }
.or-h4 small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.or-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.or-chipset button { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.or-chipset button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.or-chipset button:disabled { cursor: default; }
.or-save { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: var(--border); }
.or-danger { color: var(--danger) !important; margin-right: auto; }
/* reja */
.or-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.or-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.or-ext { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: var(--border); border-radius: 12px; background: var(--surface-2); margin-bottom: 12px; overflow-x: auto; }
.or-ext-row { display: flex; gap: 4px; justify-content: center; }
.or-ext-row > i { width: 2px; background: var(--line-strong); margin: 0 6px; border-radius: 2px; }
.or-ext-row button { width: 36px; height: 32px; flex: none; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 700; cursor: pointer; }
.or-ext-row button.miss { opacity: .45; text-decoration: line-through; }
.or-ext-row button[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: #fff; text-decoration: none; opacity: 1; }
.or-ext-sum { text-align: center; font-size: 12.5px; color: var(--muted); }
.or-ext-sum b { color: var(--danger); }
.or-phases { display: flex; flex-direction: column; gap: 6px; }
.or-ph { display: grid; grid-template-columns: 28px 1fr 110px 34px; gap: 8px; align-items: center; }
.or-ph-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 12px; }
.or-ph-m { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.or-ph-add { display: flex; gap: 6px; margin-top: 4px; }
.or-gt { position: relative; height: 46px; margin-top: 14px; border-radius: 10px; background: var(--surface-2); border: var(--border); }
.or-gt-bar { position: absolute; top: 5px; bottom: 5px; border-radius: 7px; background: var(--c); color: #fff; padding: 3px 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; border: 2px solid var(--surface); }
.or-gt-bar span { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.or-gt-bar small { font-size: 10px; opacity: .85; line-height: 1.2; }
.or-gt-now { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--danger); }
.or-gt-now span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--danger); white-space: nowrap; }
.or-gt-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
/* tashriflar */
.or-visits { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; align-items: start; }
.or-vform { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: var(--border); border-radius: 14px; background: var(--surface-2); position: sticky; top: 80px; }
.or-vform h4 { margin: 0; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.or-vform h4 i { color: var(--primary); }
.or-vform .or-grid2 { margin-top: 0; }
.or-vform input[type=range] { accent-color: var(--primary); }
.or-vform .or-lbl { margin: 0; }
.or-hyg button[data-h="good"][aria-pressed="true"] { color: var(--success); }
.or-hyg button[data-h="fair"][aria-pressed="true"] { color: var(--warning); }
.or-hyg button[data-h="poor"][aria-pressed="true"] { color: var(--danger); }
.or-vlist { min-width: 0; }
.or-wires h4 { font-size: 13px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.or-wires h4 i { color: var(--primary); }
.or-wires:not(:empty) { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; border: var(--border); }
.or-wseq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; margin-top: 6px; }
.or-wseq > span { width: 54px; color: var(--muted); font-weight: 600; }
.or-wseq b { padding: 3px 8px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 600; color: var(--text-2); }
.or-wseq b.cur { background: var(--primary); border-color: var(--primary); color: #fff; }
.or-wseq i { color: var(--faint); font-size: 10px; }
.or-timeline { display: flex; flex-direction: column; gap: 10px; position: relative; }
.or-v { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.or-v-date { text-align: center; padding-top: 6px; }
.or-v-date b { display: block; font-size: 13px; color: var(--text); line-height: 1.2; }
.or-v-date span { font-size: 11px; color: var(--muted); }
.or-v-body { border: var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); position: relative; }
.or-v-body::before { content: ''; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--primary-soft); }
.or-v-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.or-wire { font-size: 12.5px; font-weight: 700; color: var(--text); }
.or-wire i { color: var(--primary); }
.or-hy { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.or-hy.ok { background: var(--success-light); color: var(--success); } .or-hy.mid { background: var(--warning-light); color: var(--warning); } .or-hy.bad { background: var(--danger-light); color: var(--danger); }
.or-v-del { margin-left: auto; border: 0; background: none; color: var(--faint); cursor: pointer; }
.or-v-del:hover { color: var(--danger); }
.or-v-procs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.or-v-procs span { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--primary-light); color: var(--primary); font-weight: 600; }
.or-v-line { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.or-v-line i { color: var(--faint); }
.or-v-body p { font-size: 13px; color: var(--text-2); margin: 6px 0 0; white-space: pre-line; }
.or-v-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 11.5px; color: var(--muted); align-items: center; }
.or-v-prog { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary); }
.or-v-prog em { width: 70px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; display: block; }
.or-v-prog em i { display: block; height: 100%; background: var(--primary); }
/* oldin / keyin */
.or-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 12px; }
.or-pair { border: var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.or-pair h4 { margin: 0; padding: 9px 12px; font-size: 13px; border-bottom: var(--border); }
.or-pair-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.or-pair figure { margin: 0; position: relative; background: #0d1a1f; aspect-ratio: 4 / 3; }
.or-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.or-pair figcaption { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 600; color: #fff; background: rgb(0 0 0 / .6); padding: 2px 8px; border-radius: 6px; }
.or-pair figure.a figcaption { background: rgb(194 65 12 / .85); }
.or-pair figure.b figcaption { background: rgb(30 154 106 / .85); }
.or-pair figure.none { display: grid; place-items: center; background: var(--surface-2); }
.or-pair figure.none a { font-size: 12px; color: var(--primary); text-decoration: none; font-weight: 600; text-align: center; padding: 10px; }
@media (max-width: 1200px) { .or-visits { grid-template-columns: 1fr; } .or-vform { position: static; } }
@media (max-width: 1100px) { .or3d-wrap { grid-template-columns: 1fr; } .or-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .or-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .or-diag-grid { grid-template-columns: 1fr; } .or-ojob { position: static; max-width: 300px; margin: 0 auto; } .or-create { grid-template-columns: 1fr 1fr; } .or-create .btn { grid-column: 1 / -1; } }
@media (max-width: 640px) {
    .or3d { min-height: 420px; }
    .or-steps { padding: 10px; gap: 4px; }
    .or-step b { display: none; }
    .or-step.on b { display: inline; }
    .or-fields, .or-grid3, .or-grid2 { grid-template-columns: 1fr; }
    .or-tl { display: none; }
    .or-ph { grid-template-columns: 26px 1fr 84px 30px; gap: 6px; }
    .or-pairs { grid-template-columns: 1fr; }
    .or-v { grid-template-columns: 52px 1fr; gap: 8px; }
}
.or-hp { display: flex; flex-direction: column; gap: 10px; }
.or-hp label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }

/* ═════════ SOZLAMALAR (settings.php) ═════════ */
.st { display: flex; flex-direction: column; gap: 16px; }
.st [hidden] { display: none !important; }
.st-hero { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--radius-lg); color: #fff; background: radial-gradient(120% 140% at 0% 0%, #19b3bf 0%, var(--primary) 45%, #0b4f57 100%); box-shadow: var(--shadow-lg); flex-wrap: wrap; position: relative; overflow: hidden; }
.st-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgb(255 255 255 / .07); pointer-events: none; }
.st-avatar { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; font-weight: 800; background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .3); flex: none; }
.st-who { flex: 1; min-width: 200px; }
.st-who h1 { font-size: 21px; margin: 0; color: #fff; }
.st-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: rgb(255 255 255 / .82); margin-top: 4px; align-items: center; }
.st-hero .st-role { background: rgb(255 255 255 / .18); color: #fff; }
.st-hero-act { display: flex; gap: 8px; position: relative; z-index: 1; }
.st-hero .st-btn { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .3); color: #fff; }
.st-hero .st-btn:hover { background: rgb(255 255 255 / .26); color: #fff; }
.st-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; transition: var(--transition); }
.st-btn:hover { border-color: var(--primary); color: var(--primary); }
.st-btn.st-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.st-btn.st-primary:hover { background: var(--primary-dark); color: #fff; }
.st-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; border: 1px solid; }
.st-alert i { font-size: 18px; margin-top: 1px; }
.st-alert.ok { background: var(--success-light); border-color: #bfe7d4; color: var(--success); }
.st-alert.bad { background: var(--danger-light); border-color: #f3c3c3; color: var(--danger); }
html[data-theme="dark"] .st-alert.ok { border-color: #1f4a3a; } html[data-theme="dark"] .st-alert.bad { border-color: #5a2a2e; }
.st-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.st-nav { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--surface); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.st-nav button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text-2); cursor: pointer; text-align: left; font: inherit; transition: var(--transition); }
.st-nav button > i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 15px; flex: none; transition: var(--transition); }
.st-nav button span { display: flex; flex-direction: column; font-weight: 600; font-size: 13.5px; line-height: 1.25; min-width: 0; }
.st-nav button small { font-weight: 500; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-nav button:hover { background: var(--surface-2); }
.st-nav button[aria-current="page"] { background: var(--primary-light); color: var(--text); }
.st-nav button[aria-current="page"] > i { background: var(--primary); color: #fff; box-shadow: 0 4px 10px -4px rgb(var(--primary-rgb) / .7); }
.st-main { min-width: 0; }
.st-sec { display: flex; flex-direction: column; gap: 14px; animation: stIn .25s ease; }
@keyframes stIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.st-h2 { font-size: 18px; margin: 0; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.st-h2 small { font-size: 13px; color: var(--muted); font-weight: 600; background: var(--surface-2); border: var(--border); padding: 1px 9px; border-radius: 10px; }
.st-h2row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-muted { color: var(--muted); font-size: 13px; margin: 0; }
.st-panel { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow); }
.st-panel h3 { font-size: 14.5px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: var(--text); }
.st-panel h3 i { color: var(--primary); }
.st-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-card, .st-hero2 { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: var(--transition); }
.st-card:hover, .st-hero2:hover, .st-tile:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.st-card div, .st-hero2 div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-card b, .st-hero2 b { font-size: 14px; }
.st-card span, .st-hero2 span { font-size: 12.5px; color: var(--muted); }
.st-hero2 small { font-size: 12px; font-weight: 600; margin-top: 4px; }
.st-hero2 small.ok { color: var(--success); } .st-hero2 small.bad { color: var(--danger); }
.st-go { color: var(--faint); }
.st-ic { width: 44px; height: 44px; border-radius: 12px; display: grid !important; place-items: center; font-size: 18px; flex: none; }
.st-ic.c-teal { background: var(--primary-light); color: var(--primary); }
.st-ic.c-orange { background: #fff1e8; color: #c2410c; } .st-ic.c-blue { background: var(--info-light); color: var(--info); }
.st-ic.c-green { background: var(--success-light); color: var(--success); } .st-ic.c-violet { background: #efedfb; color: #5b4bc4; }
.st-ic.c-pink { background: #fde8ef; color: #d6336c; }
html[data-theme="dark"] .st-ic.c-orange { background: #3a2414; color: #f6a86f; } html[data-theme="dark"] .st-ic.c-violet { background: #241f45; color: #b9aef5; } html[data-theme="dark"] .st-ic.c-pink { background: #3a1a28; color: #f29bbd; }
.st-dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.st-dl div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.st-dl dt { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.st-dl dd { margin: 2px 0 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
.st-theme { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.st-theme button { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13px; cursor: pointer; }
.st-theme button[aria-checked="true"] { border-color: var(--primary); box-shadow: var(--ring); color: var(--text); }
.st-th { width: 120px; height: 72px; border-radius: 8px; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: 14px 1fr; gap: 5px; padding: 6px; }
.st-th i:nth-child(1) { grid-row: 1 / 3; border-radius: 4px; } .st-th i:nth-child(2) { border-radius: 4px; } .st-th i:nth-child(3) { border-radius: 4px; }
.th-light { background: #f2f5f4; } .th-light i:nth-child(1) { background: #0f2a33; } .th-light i:nth-child(2) { background: #fff; } .th-light i:nth-child(3) { background: #fff; }
.th-dark { background: #0c171c; } .th-dark i:nth-child(1) { background: #08151a; } .th-dark i:nth-child(2) { background: #172b33; } .th-dark i:nth-child(3) { background: #122229; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.st-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--surface); border: var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: var(--transition); }
.st-tile .st-ic { margin-bottom: 8px; }
.st-tile b { font-size: 14px; }
.st-tile span { font-size: 12.5px; color: var(--muted); }
.st-tile em { position: absolute; top: 14px; right: 14px; font-style: normal; font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: 10px; background: var(--surface-2); border: var(--border); color: var(--text-2); }
.st-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.st-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--muted); }
.st-search input { border: 0; outline: 0; background: none; width: 100%; color: var(--text); font-size: 13.5px; }
.st-search:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.st-chips button { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.st-chips button b { color: var(--muted); font-size: 11px; margin-left: 2px; }
.st-chips button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.st-chips button[aria-pressed="true"] b { color: rgb(255 255 255 / .75); }
.st-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.st-user { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.st-uav { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--primary); flex: none; font-size: 16px; }
.st-uav.r-admin { background: linear-gradient(135deg, #0e7c86, #0b4f57); } .st-uav.r-doctor { background: linear-gradient(135deg, #1e9a6a, #13734e); }
.st-uav.r-staff { background: linear-gradient(135deg, #e08a00, #c2410c); } .st-uav.r-cashier { background: linear-gradient(135deg, #7b5cd6, #5b4bc4); } .st-uav.r-technician { background: linear-gradient(135deg, #2f9bd6, #2f6fb3); }
.st-uinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-uinfo b { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-uinfo > span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-me { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: var(--warning-light); color: var(--warning); vertical-align: middle; }
.st-role { display: inline-flex; align-items: center; gap: 5px; width: fit-content; font-size: 11px !important; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2) !important; }
.st-role.r-admin { background: var(--primary-light); color: var(--primary) !important; } .st-role.r-doctor { background: var(--success-light); color: var(--success) !important; }
.st-role.r-staff { background: var(--warning-light); color: #b45309 !important; } .st-role.r-cashier { background: #efedfb; color: #5b4bc4 !important; } .st-role.r-technician { background: var(--info-light); color: var(--info) !important; }
html[data-theme="dark"] .st-role.r-cashier { background: #241f45; color: #b9aef5 !important; } html[data-theme="dark"] .st-role.r-staff { color: var(--warning) !important; }
.st-uact { display: flex; gap: 6px; }
.st-uact form { margin: 0; }
.st-ibtn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; text-decoration: none; font-size: 13px; }
.st-ibtn:hover { border-color: var(--primary); color: var(--primary); }
.st-ibtn.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }
.st-none { grid-column: 1 / -1; text-align: center; padding: 20px; }
.st-roles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.st-rolecard { cursor: pointer; }
.st-rolecard input { position: absolute; opacity: 0; pointer-events: none; }
.st-rolecard span { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); height: 100%; transition: var(--transition); }
.st-rolecard i { font-size: 16px; color: var(--muted); }
.st-rolecard b { font-size: 13px; color: var(--text); }
.st-rolecard small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.st-rolecard input:checked + span { border-color: var(--primary); background: var(--primary-light); }
.st-rolecard input:checked + span i { color: var(--primary); }
.st-rolecard input:focus-visible + span { box-shadow: var(--ring); }
.st-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.st-for { grid-column: 1 / -1; }
.st-pass { position: relative; display: block; }
.st-pass input { padding-right: 40px; width: 100%; }
.st-pass button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.st-warn { font-size: 12.5px; color: var(--danger); font-weight: 500; }
.st-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.st-foot .st-muted { margin-right: auto; }
.st-comm { display: flex; flex-direction: column; gap: 8px; }
.st-crow { display: grid; grid-template-columns: 42px minmax(140px, 1fr) minmax(120px, 1.2fr) 96px 120px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.st-crow input[type=range] { accent-color: var(--primary); width: 100%; }
.st-pct { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--muted); }
.st-pct input { width: 70px; height: 36px; border: 1px solid var(--line-strong); border-radius: 9px; text-align: center; font-weight: 700; font-size: 14px; color: var(--primary); background: var(--surface); }
.st-ex { font-size: 12.5px; font-weight: 600; color: var(--success); text-align: right; white-space: nowrap; }
.st-empty { text-align: center; color: var(--muted); padding: 30px; }
.st-empty i { font-size: 34px; color: var(--primary-soft); display: block; margin-bottom: 8px; }
@media (max-width: 1100px) { .st-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .st-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .st-layout { grid-template-columns: 1fr; }
    .st-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 6px; }
    .st-nav::-webkit-scrollbar { display: none; }
    .st-nav button { flex: none; padding: 8px 12px 8px 8px; }
    .st-nav button > i { width: 30px; height: 30px; font-size: 13px; }
    .st-nav button small { display: none; }
    .st-crow { grid-template-columns: 42px 1fr 96px; }
    .st-crow input[type=range] { grid-column: 1 / -1; grid-row: 2; }
    .st-ex { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 640px) {
    .st-hero { padding: 16px; }
    .st-hero-act { width: 100%; }
    .st-hero-act .st-btn { flex: 1; justify-content: center; }
    .st-cards, .st-form { grid-template-columns: 1fr; }
    .st-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-users { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .or-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .or-steps::-webkit-scrollbar { display: none; } .or-step-line { min-width: 12px; flex: none; width: 12px; } .or-stop { flex: none; } }

/* Protsedura sanasi (bemor sahifasi) */
.pv-pdate { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #c5cae9; background: #eef0fb; color: #3949ab; border-radius: 6px; padding: 2px 8px; font: 600 11px/1.6 var(--font); cursor: pointer; }
.pv-pdate:hover { background: #dfe3f7; }
.pv-pdate span { font-weight: 400; opacity: .75; }
.pv-pdate-pen { font-size: 9px; opacity: .5; }
html[data-theme="dark"] .pv-pdate { background: #1d2547; border-color: #2c376a; color: #a9b4f0; }
.pv-pdate-pop { position: absolute; z-index: 5000; width: 270px; background: var(--surface); border: var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pv-pdate-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pv-pdate-btns { display: flex; justify-content: flex-end; gap: 6px; }

/* Til almashtirish (UZ / RU) */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: var(--border); flex: none; }
.lang-switch a { min-width: 34px; height: 28px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 7px; font: 700 12px/1 var(--font); color: var(--muted); text-decoration: none; transition: var(--transition); }
.lang-switch a:hover { color: var(--text); }
.lang-switch a.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.header-lang { margin-right: 4px; }
@media (max-width: 520px) { .header-lang a { min-width: 28px; padding: 0 5px; } }