/*
 * Mosaed clinic dashboard — design system.
 * Loaded after Bootstrap 5.3 (RTL build). Tokens first, then the app shell,
 * then components. Nothing here is page specific.
 *
 * Light and dark: every colour below comes from a --c-* token; the dark
 * appearance only gives the tokens other values (html[data-bs-theme="dark"],
 * set by js/theme.js). A new rule must use tokens, never a literal page colour.
 */

/* ------------------------------------------------------------------ fonts */
/* Noto Sans Arabic for Arabic text and digits, Noto Sans for Latin text (medicine names). */
@font-face { font-family: "Mosaed Sans"; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-arabic-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+0030-0039; }
@font-face { font-family: "Mosaed Sans"; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mosaed Sans"; font-weight: 500; font-display: swap; src: url("../fonts/noto-sans-arabic-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+0030-0039; }
@font-face { font-family: "Mosaed Sans"; font-weight: 500; font-display: swap; src: url("../fonts/noto-sans-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mosaed Sans"; font-weight: 600; font-display: swap; src: url("../fonts/noto-sans-arabic-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+0030-0039; }
@font-face { font-family: "Mosaed Sans"; font-weight: 600; font-display: swap; src: url("../fonts/noto-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mosaed Sans"; font-weight: 700; font-display: swap; src: url("../fonts/noto-sans-arabic-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+0030-0039; }
@font-face { font-family: "Mosaed Sans"; font-weight: 700; font-display: swap; src: url("../fonts/noto-sans-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ----------------------------------------------------------------- tokens */
:root {
    color-scheme: light;

    /* Each colour: the fill, its *-soft background and the *-ink text that reads on that background. */
    --c-primary: #0091c2;
    --c-primary-rgb: 0, 145, 194;
    --c-primary-strong: #00779f;
    --c-primary-ink: #00779f;
    --c-primary-soft: #e6f5fa;
    --c-primary-tint: #f2fafd;
    --c-accent: #f59e0b;
    --c-accent-ink: #9a6100;
    --c-accent-soft: #fef5e3;
    --c-success: #15a05a;
    --c-success-ink: #0f7a44;
    --c-success-soft: #e7f6ee;
    --c-danger: #dc3b3b;
    --c-danger-ink: #b42828;
    --c-danger-soft: #fdecec;
    --c-info: #3b82f6;
    --c-info-ink: #1d5fd1;
    --c-info-soft: #eaf2ff;
    /* the second colour of the brand gradients, and the pressed primary button */
    --c-primary-2: #00b4c5;
    --c-primary-deep: #006585;
    /* tones that tell sections apart (menu groups, figures, shortcuts): .tone-* */
    --c-violet: #7c5cfa;
    --c-violet-ink: #5b3bd8;
    --c-violet-soft: #f0ecff;
    --c-teal: #0fa39e;
    --c-teal-ink: #0b7a76;
    --c-teal-soft: #e2f6f4;
    --c-rose: #ea4c78;
    --c-rose-ink: #c02a56;
    --c-rose-soft: #fdebf1;
    --c-slate: #64748b;
    --c-slate-ink: #475569;
    --c-slate-soft: #eef2f6;

    --c-ink: #17212f;
    --c-ink-2: #46546a;
    --c-ink-3: #7b8799;
    --c-line: #e3e8ef;
    --c-line-soft: #eef2f6;
    --c-surface: #ffffff;
    --c-surface-2: #f8fafc;                 /* table headings, disabled and read-only fields */
    --c-canvas: #f3f6fa;
    --c-field-line: #d5dce6;                /* border of a field */
    --c-placeholder: #a3adbb;
    --c-bar: rgba(255, 255, 255, .94);      /* top bar and tab bar, slightly see-through */
    --c-veil: rgba(255, 255, 255, .65);     /* over a table while it loads */

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(23, 33, 47, .05);
    --shadow: 0 1px 2px rgba(23, 33, 47, .04), 0 6px 20px rgba(23, 33, 47, .05);
    --shadow-lg: 0 12px 40px rgba(23, 33, 47, .14);
    --shadow-primary: 0 8px 22px -6px rgba(var(--c-primary-rgb), .5);
    --grad-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);

    /* menu colours (data-menu on <html>: light, dark, brand) */
    --menu-bg: var(--c-surface);
    --menu-line: var(--c-line);
    --menu-text: var(--c-ink-2);
    --menu-text-strong: var(--c-ink);
    --menu-label: var(--c-ink-3);
    --menu-hover: var(--c-line-soft);
    --menu-chip-alpha: 1;

    --sidebar-w: 268px;
    --topbar-h: 60px;
    --tabbar-h: 62px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Bootstrap */
    --bs-primary: var(--c-primary);
    --bs-primary-rgb: var(--c-primary-rgb);
    --bs-success: var(--c-success);
    --bs-success-rgb: 21, 160, 90;
    --bs-danger: var(--c-danger);
    --bs-danger-rgb: 220, 59, 59;
    --bs-warning: var(--c-accent);
    --bs-warning-rgb: 245, 158, 11;
    --bs-info: var(--c-info);
    --bs-info-rgb: 59, 130, 246;
    --bs-body-font-family: "Mosaed Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--c-ink);
    --bs-body-bg: var(--c-canvas);
    --bs-emphasis-color: var(--c-ink);
    --bs-heading-color: var(--c-ink);
    --bs-secondary-color: var(--c-ink-3);
    --bs-secondary-bg: var(--c-line-soft);
    --bs-tertiary-bg: var(--c-surface-2);
    --bs-border-color: var(--c-line);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
    --bs-link-color: var(--c-primary-ink);
    --bs-link-color-rgb: 0, 119, 159;
    --bs-link-hover-color: var(--c-primary);
    --bs-link-hover-color-rgb: var(--c-primary-rgb);
    --bs-focus-ring-color: rgba(var(--c-primary-rgb), .22);
}

/* --------------------------------------------------------- dark appearance */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --c-primary: #0e9ccd;
    --c-primary-rgb: 14, 156, 205;
    --c-primary-strong: #0b86b1;
    --c-primary-ink: #6ccdef;
    --c-primary-soft: rgba(14, 156, 205, .18);
    --c-primary-tint: rgba(14, 156, 205, .09);
    --c-accent: #f5a524;
    --c-accent-ink: #fbc55a;
    --c-accent-soft: rgba(245, 165, 36, .16);
    --c-success: #2bb673;
    --c-success-ink: #6fdca4;
    --c-success-soft: rgba(43, 182, 115, .16);
    --c-danger: #e85151;
    --c-danger-ink: #ff9393;
    --c-danger-soft: rgba(232, 81, 81, .16);
    --c-info: #5b9bff;
    --c-info-ink: #9cc2ff;
    --c-info-soft: rgba(91, 155, 255, .16);
    --c-primary-2: #13b8c8;
    --c-primary-deep: #0a7397;
    --c-violet: #9b82ff;
    --c-violet-ink: #c3b4ff;
    --c-violet-soft: rgba(155, 130, 255, .16);
    --c-teal: #2cc4bd;
    --c-teal-ink: #7fe0da;
    --c-teal-soft: rgba(44, 196, 189, .15);
    --c-rose: #f26b91;
    --c-rose-ink: #ffa3bd;
    --c-rose-soft: rgba(242, 107, 145, .16);
    --c-slate: #94a3b8;
    --c-slate-ink: #c3cedb;
    --c-slate-soft: rgba(148, 163, 184, .14);

    --c-ink: #e7ecf3;
    --c-ink-2: #b6c1cf;
    --c-ink-3: #8794a6;
    --c-line: #2b3949;
    --c-line-soft: #222e3c;
    --c-surface: #18222e;
    --c-surface-2: #1e2a38;
    --c-canvas: #0f161f;
    --c-field-line: #364557;
    --c-placeholder: #6b798b;
    --c-bar: rgba(24, 34, 46, .94);
    --c-veil: rgba(24, 34, 46, .65);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
    --shadow-primary: 0 8px 22px -8px rgba(var(--c-primary-rgb), .55);

    --bs-success-rgb: 43, 182, 115;
    --bs-danger-rgb: 232, 81, 81;
    --bs-warning-rgb: 245, 165, 36;
    --bs-info-rgb: 91, 155, 255;
    --bs-secondary-rgb: 135, 148, 166;
    --bs-link-color-rgb: 108, 205, 239;
}

/* ------------------------------------------------------- colour palettes */
/* The main colour each account chooses (data-palette on <html>, App\Support\DashboardAppearance).
   "ocean" is the default above. Each palette gives the primary tokens, in both appearances. */
:root[data-palette="emerald"] { --c-primary: #0e9f6e; --c-primary-rgb: 14, 159, 110; --c-primary-strong: #0b8159; --c-primary-ink: #0a7a54; --c-primary-soft: #e3f6ee; --c-primary-tint: #f1fbf7; --c-primary-2: #1fc2a0; --c-primary-deep: #086647; --bs-link-color-rgb: 10, 122, 84; }
:root[data-bs-theme="dark"][data-palette="emerald"] { --c-primary: #1fb27f; --c-primary-rgb: 31, 178, 127; --c-primary-strong: #18966a; --c-primary-ink: #6fe0b5; --c-primary-soft: rgba(31, 178, 127, .18); --c-primary-tint: rgba(31, 178, 127, .09); --c-primary-2: #2bd1ad; --c-primary-deep: #13805a; --bs-link-color-rgb: 111, 224, 181; }
:root[data-palette="indigo"] { --c-primary: #4f46e5; --c-primary-rgb: 79, 70, 229; --c-primary-strong: #4338ca; --c-primary-ink: #4338ca; --c-primary-soft: #ecebfd; --c-primary-tint: #f6f5fe; --c-primary-2: #7a6cff; --c-primary-deep: #3730a3; --bs-link-color-rgb: 67, 56, 202; }
:root[data-bs-theme="dark"][data-palette="indigo"] { --c-primary: #6d66f2; --c-primary-rgb: 109, 102, 242; --c-primary-strong: #5a52e0; --c-primary-ink: #b3afff; --c-primary-soft: rgba(109, 102, 242, .2); --c-primary-tint: rgba(109, 102, 242, .1); --c-primary-2: #8d82ff; --c-primary-deep: #4b43c9; --bs-link-color-rgb: 179, 175, 255; }
:root[data-palette="violet"] { --c-primary: #7c3aed; --c-primary-rgb: 124, 58, 237; --c-primary-strong: #6d28d9; --c-primary-ink: #6d28d9; --c-primary-soft: #f2ebfe; --c-primary-tint: #f9f5ff; --c-primary-2: #c056e8; --c-primary-deep: #5b21b6; --bs-link-color-rgb: 109, 40, 217; }
:root[data-bs-theme="dark"][data-palette="violet"] { --c-primary: #9461f5; --c-primary-rgb: 148, 97, 245; --c-primary-strong: #7f49e6; --c-primary-ink: #c9adff; --c-primary-soft: rgba(148, 97, 245, .2); --c-primary-tint: rgba(148, 97, 245, .1); --c-primary-2: #c76cf0; --c-primary-deep: #6b37cf; --bs-link-color-rgb: 201, 173, 255; }
:root[data-palette="rose"] { --c-primary: #e11d48; --c-primary-rgb: 225, 29, 72; --c-primary-strong: #be123c; --c-primary-ink: #be123c; --c-primary-soft: #fde8ed; --c-primary-tint: #fff4f6; --c-primary-2: #f6597a; --c-primary-deep: #9f1239; --bs-link-color-rgb: 190, 18, 60; }
:root[data-bs-theme="dark"][data-palette="rose"] { --c-primary: #f0476d; --c-primary-rgb: 240, 71, 109; --c-primary-strong: #d93a5f; --c-primary-ink: #ff9fb5; --c-primary-soft: rgba(240, 71, 109, .18); --c-primary-tint: rgba(240, 71, 109, .09); --c-primary-2: #ff7a8f; --c-primary-deep: #c22f55; --bs-link-color-rgb: 255, 159, 181; }
:root[data-palette="sunset"] { --c-primary: #ea580c; --c-primary-rgb: 234, 88, 12; --c-primary-strong: #c2410c; --c-primary-ink: #c2410c; --c-primary-soft: #fdeee4; --c-primary-tint: #fff7f1; --c-primary-2: #f59e0b; --c-primary-deep: #9a3412; --bs-link-color-rgb: 194, 65, 12; }
:root[data-bs-theme="dark"][data-palette="sunset"] { --c-primary: #f26b21; --c-primary-rgb: 242, 107, 33; --c-primary-strong: #dc5a14; --c-primary-ink: #ffb27d; --c-primary-soft: rgba(242, 107, 33, .18); --c-primary-tint: rgba(242, 107, 33, .09); --c-primary-2: #f7a531; --c-primary-deep: #c2410c; --bs-link-color-rgb: 255, 178, 125; }

/* ------------------------------------------------------------ menu styles */
/* data-menu on <html>: light (the tokens above), dark (navy) or brand (the palette's gradient). */
[data-menu="dark"] {
    --menu-bg: linear-gradient(180deg, #102038 0%, #0a1729 100%);
    --menu-line: rgba(255, 255, 255, .08);
    --menu-text: #b9c5d6;
    --menu-text-strong: #fff;
    --menu-label: #71839b;
    --menu-hover: rgba(255, 255, 255, .06);
}
[data-bs-theme="dark"][data-menu="dark"] { --menu-bg: linear-gradient(180deg, #0c1624 0%, #08101a 100%); }
[data-bs-theme="dark"][data-menu="brand"] { --menu-bg: linear-gradient(165deg, color-mix(in srgb, var(--c-primary-deep) 55%, #050b12) 0%, color-mix(in srgb, var(--c-primary) 55%, #0b1420) 100%); }
[data-menu="brand"] {
    --menu-bg: linear-gradient(165deg, var(--c-primary-deep) 0%, var(--c-primary) 62%, var(--c-primary-2) 140%);
    --menu-line: rgba(255, 255, 255, .16);
    --menu-text: rgba(255, 255, 255, .88);
    --menu-text-strong: #fff;
    --menu-label: rgba(255, 255, 255, .66);
    --menu-hover: rgba(255, 255, 255, .13);
}

/* ------------------------------------------------------------------ tones */
/* A section's colour: --tone (fill), --tone-ink (text on a light ground), --tone-soft (background). */
.tone-primary { --tone: var(--c-primary); --tone-ink: var(--c-primary-ink); --tone-soft: var(--c-primary-soft); }
.tone-blue { --tone: var(--c-info); --tone-ink: var(--c-info-ink); --tone-soft: var(--c-info-soft); }
.tone-violet { --tone: var(--c-violet); --tone-ink: var(--c-violet-ink); --tone-soft: var(--c-violet-soft); }
.tone-teal { --tone: var(--c-teal); --tone-ink: var(--c-teal-ink); --tone-soft: var(--c-teal-soft); }
.tone-amber { --tone: var(--c-accent); --tone-ink: var(--c-accent-ink); --tone-soft: var(--c-accent-soft); }
.tone-green { --tone: var(--c-success); --tone-ink: var(--c-success-ink); --tone-soft: var(--c-success-soft); }
.tone-rose { --tone: var(--c-rose); --tone-ink: var(--c-rose-ink); --tone-soft: var(--c-rose-soft); }
.tone-danger { --tone: var(--c-danger); --tone-ink: var(--c-danger-ink); --tone-soft: var(--c-danger-soft); }
.tone-slate { --tone: var(--c-slate); --tone-ink: var(--c-slate-ink); --tone-soft: var(--c-slate-soft); }

*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--c-ink); letter-spacing: 0; }
a { text-decoration: none; }
::selection { background: rgba(var(--c-primary-rgb), .18); }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* text shown as it was typed, line breaks included; a long word never widens its box */
.text-lines { white-space: pre-line; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* -------------------------------------------------------------- app shell */
.app { display: flex; min-height: 100dvh; background: radial-gradient(1100px 420px at 100% -8%, rgba(var(--c-primary-rgb), .08), transparent 62%), radial-gradient(900px 380px at 0% 0%, rgba(124, 92, 250, .045), transparent 60%), var(--c-canvas); }

.app-sidebar {
    --bs-offcanvas-width: min(86vw, var(--sidebar-w));
    --bs-offcanvas-bg: transparent;
    background: var(--menu-bg);
    border-inline-end: 1px solid var(--menu-line);
    display: flex;
    flex-direction: column;
    color: var(--menu-text);
}
@media (min-width: 992px) {
    .app-sidebar { position: sticky; top: 0; width: var(--sidebar-w); height: 100dvh; flex: none; }
    .app--focus .app-sidebar { display: none; }
}
.app-brand { display: flex; align-items: center; gap: .5rem; height: var(--topbar-h); padding: 0 1.15rem; flex: none; }
.app-brand .icon-btn { color: var(--menu-text); }
/* logo and name of the product (x-brand.mark) */
.brand-mark { display: inline-flex; align-items: center; gap: .65rem; }
.brand-mark img { flex: none; }
.brand-mark strong { display: block; font-size: 1.1rem; font-weight: 700; color: var(--c-ink); line-height: 1.15; }
.brand-mark small { display: block; font-size: .7rem; color: var(--c-ink-3); font-weight: 500; }
.app-sidebar .brand-mark strong { color: var(--menu-text-strong); }
.app-sidebar .brand-mark small { color: var(--menu-label); }
[data-menu="brand"] .app-sidebar .brand-mark img, [data-menu="brand"] .app-topbar .brand-mark img { border-radius: 9px; background: #fff; }

.app-nav { flex: 1; overflow-y: auto; padding: .25rem .75rem 1rem; scrollbar-width: thin; scrollbar-color: var(--menu-line) transparent; }
.app-nav__label { display: flex; align-items: center; gap: .45rem; margin: 1.05rem .55rem .35rem; font-size: .72rem; font-weight: 600; color: var(--menu-label); }
.app-nav__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone, var(--menu-label)); }
.app-nav__link {
    display: flex; align-items: center; gap: .7rem; min-height: 42px; padding: .35rem .5rem; border-radius: 11px;
    color: var(--menu-text); font-weight: 500; transition: background-color .15s, color .15s, box-shadow .15s;
}
/* each section has its colour: the icon sits on a soft chip of it */
.app-nav__link i {
    display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px;
    background: var(--tone-soft, var(--c-line-soft)); color: var(--tone, var(--c-ink-3)); font-size: 1rem; transition: background-color .15s, color .15s;
}
.app-nav__link:hover { background: var(--menu-hover); color: var(--menu-text-strong); }
button.app-nav__link { width: 100%; border: 0; background: transparent; text-align: start; }
.app-nav__link.is-active { background: var(--grad-primary); color: #fff; font-weight: 600; box-shadow: var(--shadow-primary); }
.app-nav__link.is-active i { background: rgba(255, 255, 255, .2); color: #fff; }
.app-nav__badge { margin-inline-start: auto; }
[data-menu="dark"] .app-nav__link i { background: color-mix(in srgb, var(--tone, #94a3b8) 18%, transparent); color: color-mix(in srgb, var(--tone, #94a3b8) 70%, #fff); }
[data-menu="brand"] .app-nav__link i { background: rgba(255, 255, 255, .15); color: #fff; }
[data-menu="brand"] .app-nav__label::before { background: rgba(255, 255, 255, .7); }
[data-menu="brand"] .app-nav__link.is-active { background: #fff; color: var(--c-primary-strong); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); }
[data-menu="brand"] .app-nav__link.is-active i { background: var(--c-primary-soft); color: var(--c-primary); }
[data-bs-theme="dark"][data-menu="brand"] .app-nav__link.is-active { background: rgba(255, 255, 255, .95); color: var(--c-primary-deep); }
.app-sidebar__foot { flex: none; padding: .8rem 1.15rem calc(.8rem + var(--safe-bottom)); border-top: 1px solid var(--menu-line); font-size: .75rem; color: var(--menu-label); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-header { position: sticky; top: 0; z-index: 1020; }
.app-topbar {
    position: relative; display: flex; align-items: center; gap: .5rem;
    height: calc(var(--topbar-h) + var(--safe-top)); padding: var(--safe-top) 1rem 0;
    background: var(--c-bar); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--c-line);
}
.app-topbar__brand { display: none; margin-inline-end: .75rem; }
/* Clipped one-line texts keep a tall line box: Arabic dots sit below the baseline. */
.app-topbar__title { font-size: 1rem; font-weight: 600; line-height: 2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar__spacer { flex: 1; min-width: 0; }
.icon-btn {
    display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 11px;
    background: transparent; color: var(--c-ink-2); font-size: 1.15rem; position: relative; transition: background-color .15s, color .15s;
}
.icon-btn:hover, .icon-btn:focus-visible, .icon-btn[aria-expanded="true"] { background: var(--c-primary-soft); color: var(--c-primary-ink); }
/* the sidebar fold button says "expanded" all the time the sidebar is open: that is not an open menu */
.icon-btn.app-topbar__collapse[aria-expanded="true"]:not(:hover, :focus-visible) { background: transparent; color: var(--c-ink-2); }
.icon-btn.is-loading { pointer-events: none; color: transparent; }
.icon-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--c-primary); border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.icon-btn .dot { position: absolute; top: 8px; inset-inline-end: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-danger); box-shadow: 0 0 0 2px var(--c-surface); }
.icon-btn .dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c-danger); opacity: .5; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { to { transform: scale(1.9); opacity: 0; } }
/* appearance switch: it shows what a press gives — the moon in the light appearance, the sun in the dark one */
.theme-toggle .when-dark, [data-bs-theme="dark"] .theme-toggle .when-light { display: none; }
[data-bs-theme="dark"] .theme-toggle .when-dark { display: inline; }

.branch-switch { display: inline-flex; align-items: center; gap: .45rem; height: 40px; max-width: 46vw; padding: 0 .75rem; border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface); color: var(--c-ink); font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.branch-switch:hover, .branch-switch[aria-expanded="true"] { border-color: rgba(var(--c-primary-rgb), .45); box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .1); }
.branch-switch i { color: var(--c-primary); }
.branch-switch span { line-height: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) {
    .app-topbar { gap: .25rem; padding-inline: .6rem; }
    .branch-switch { max-width: 34vw; padding: 0 .55rem; gap: .3rem; }
    .branch-switch .bi-chevron-down { display: none; }
}
.user-chip { display: inline-flex; align-items: center; gap: .55rem; height: 40px; padding: 0 .35rem 0 .7rem; border: 0; border-radius: 999px; background: transparent; }
[dir="rtl"] .user-chip { padding: 0 .7rem 0 .35rem; }
.user-chip:hover, .user-chip[aria-expanded="true"] { background: var(--c-line-soft); }
.user-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--c-primary-soft); box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3.5px rgba(var(--c-primary-rgb), .45); }
.user-chip b { font-weight: 600; font-size: .875rem; line-height: 2; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------------------------------- top menu */
/* data-nav="top" on a wide screen: no sidebar; the sections sit in the top bar itself, beside the
   logo and the branch switch. The dark and brand menu styles colour the whole bar. */
.app-topnav, .app-topbar__brand, .app-topbar__collapse { display: none; }
@media (min-width: 992px) {
    [data-nav="side"] .app:not(.app--focus) .app-topbar__collapse { display: inline-grid; }
    [data-nav="top"] .app-sidebar { display: none; }
    [data-nav="top"] .app:not(.app--focus) .app-topbar { gap: .5rem; padding-inline: 1.1rem; }
    [data-nav="top"] .app:not(.app--focus) .app-topbar__brand { display: flex; flex: none; margin-inline-end: .5rem; }
    [data-nav="top"] .app:not(.app--focus) .app-topnav { display: flex; align-items: center; gap: .15rem; min-width: 0; }
    [data-nav="top"] .app:not(.app--focus) .branch-switch { max-width: 200px; }

    [data-nav="top"]:is([data-menu="dark"], [data-menu="brand"]) .app:not(.app--focus) .app-topbar {
        background: var(--menu-bg); border-bottom-color: var(--menu-line); backdrop-filter: none; box-shadow: 0 10px 26px -18px rgba(10, 23, 41, .7);
    }
    [data-nav="top"]:is([data-menu="dark"], [data-menu="brand"]) .app:not(.app--focus) .app-topbar :is(.brand-mark strong, .user-chip b) { color: var(--menu-text-strong); }
    [data-nav="top"]:is([data-menu="dark"], [data-menu="brand"]) .app:not(.app--focus) .app-topbar .brand-mark small { color: var(--menu-label); }
    [data-nav="top"]:is([data-menu="dark"], [data-menu="brand"]) .app:not(.app--focus) .app-topbar .icon-btn { color: var(--menu-text); }
    [data-nav="top"]:is([data-menu="dark"], [data-menu="brand"]) .app:not(.app--focus) .app-topbar :is(.icon-btn:hover, .icon-btn:focus-visible, .icon-btn[aria-expanded="true"], .user-chip:hover, .user-chip[aria-expanded="true"]) { background: var(--menu-hover); color: var(--menu-text-strong); }
    [data-nav="top"]:is([data-menu="dark"], [data-menu="brand"]) .app:not(.app--focus) .app-topbar .icon-btn .dot { box-shadow: none; }
    [data-nav="top"]:is([data-menu="dark"], [data-menu="brand"]) .app:not(.app--focus) .app-topbar .branch-switch { border-color: var(--menu-line); background: rgba(255, 255, 255, .08); color: var(--menu-text-strong); box-shadow: none; }
    [data-nav="top"]:is([data-menu="dark"], [data-menu="brand"]) .app:not(.app--focus) .app-topbar .branch-switch i { color: inherit; }
    [data-nav="top"]:is([data-menu="dark"], [data-menu="brand"]) .app:not(.app--focus) .app-topbar .user-chip img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
}
/* A narrower wide screen keeps every destination with less text: the account's name, full screen
   and the appearance switch (also in the account menu) go first, then the section names. */
@media (min-width: 992px) and (max-width: 1599.98px) {
    [data-nav="top"] .app:not(.app--focus) .app-topbar :is([data-action="fullscreen"], .app-topbar__spacer ~ .theme-toggle) { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1439.98px) {
    [data-nav="top"] .app:not(.app--focus) .app-topbar .user-chip b { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
    [data-nav="top"] .app:not(.app--focus) .app-topbar__brand .brand-mark > span, [data-nav="top"] .app:not(.app--focus) .app-topnav__text { display: none; }
    [data-nav="top"] .app:not(.app--focus) .app-topnav__link { padding: 0 .65rem; gap: .3rem; }
}
.app-topnav__link {
    display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .75rem; border: 0; border-radius: 10px;
    background: transparent; color: var(--menu-text); font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s;
}
.app-topnav__link > i:first-child { color: var(--tone, var(--menu-label)); font-size: 1.05rem; }
.app-topnav__link .bi-chevron-down { font-size: .7rem; opacity: .7; }
.app-topnav__link:hover, .app-topnav__link[aria-expanded="true"] { background: var(--menu-hover); color: var(--menu-text-strong); }
.app-topnav__link.is-active { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-primary); }
.app-topnav__link.is-active > i { color: #fff !important; }
[data-menu="dark"] .app-topnav__link > i:first-child { color: color-mix(in srgb, var(--tone, #94a3b8) 70%, #fff); }
[data-menu="brand"] .app-topnav__link > i:first-child { color: #fff; }
[data-menu="brand"] .app-topnav__link.is-active { background: #fff; color: var(--c-primary-strong); box-shadow: none; }
[data-menu="brand"] .app-topnav__link.is-active > i { color: var(--c-primary) !important; }
.app-topnav .dropdown-item i { color: var(--tone, var(--c-ink-3)); }

/* ------------------------------------------------------- folded sidebar */
/* data-sidebar="mini" on <html> (wide screens, side menu): only the icons stay; each names itself
   in a tip (js/app.js). Chosen with [data-sidebar-toggle] and remembered on the device. */
@media (min-width: 992px) {
    .app-sidebar { transition: width .2s ease; }
    [data-nav="side"][data-sidebar="mini"] .app-sidebar { width: 78px; }
    [data-sidebar="mini"] .app-sidebar .app-brand { justify-content: center; padding: 0; }
    [data-sidebar="mini"] .app-sidebar .brand-mark > span, [data-sidebar="mini"] .app-sidebar__foot { display: none; }
    [data-sidebar="mini"] .app-nav { padding-inline: .7rem; scrollbar-width: none; }
    [data-sidebar="mini"] .app-nav::-webkit-scrollbar { display: none; }
    [data-sidebar="mini"] .app-nav__label { height: 1px; margin: .65rem .4rem; overflow: hidden; font-size: 0; background: var(--menu-line); }
    [data-sidebar="mini"] .app-nav__label::before { display: none; }
    [data-sidebar="mini"] .app-nav__link { position: relative; justify-content: center; gap: 0; padding: .35rem 0; font-size: 0; }
    [data-sidebar="mini"] .app-nav__link i { width: 34px; height: 34px; font-size: 1.05rem; }
    [data-sidebar="mini"] .app-nav__link.is-active i { background: transparent; }
    [data-sidebar="mini"] .app-nav__badge { position: absolute; top: 0; inset-inline-end: 2px; padding: .25em .45em; font-size: .62rem; }
    [data-nav="side"][data-sidebar="mini"] .app-topbar__collapse i::before { transform: scaleX(-1); }
}

.app-content { flex: 1; padding: 1.35rem 1.35rem calc(1.5rem + var(--safe-bottom)); width: 100%; max-width: 1440px; margin: 0 auto; }
[data-nav="top"] .app-content { max-width: 1520px; }
.app--focus .app-content { max-width: none; padding: .75rem .75rem calc(.75rem + var(--safe-bottom)); }
@media (max-width: 991.98px) {
    .app-content { padding: 1rem .9rem calc(var(--tabbar-h) + 1.25rem + var(--safe-bottom)); }
    .app--focus .app-content { padding: .6rem .6rem calc(.75rem + var(--safe-bottom)); }
}

.app-tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 1030; display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
    background: var(--c-bar); backdrop-filter: blur(12px); border-top: 1px solid var(--c-line);
}
.app-tabbar a, .app-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; color: var(--c-ink-3); font-size: .68rem; font-weight: 500; }
.app-tabbar i { font-size: 1.3rem; line-height: 1; }
.app-tabbar .is-active { color: var(--c-primary-ink); }
.app-tabbar .is-active i { color: var(--c-primary); }
.app-tabbar__fab { position: relative; }
.app-tabbar__fab span { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -22px; border-radius: 50%; background: var(--grad-primary); color: #fff; box-shadow: 0 0 0 4px var(--c-canvas), var(--shadow-primary); }
.app-tabbar__fab span i { font-size: 1.5rem; color: #fff !important; }
@media (min-width: 992px) { .app-tabbar { display: none; } }
/* Typing (the phone's keyboard is up): the tab bar steps aside, so it never sits over the field or
   the save bar; it comes back as the field is left. */
.app-tabbar { transition: transform .2s ease; }
@media (max-width: 991.98px) {
    body:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="file"], [type="range"]), textarea, select, [contenteditable="true"]):focus) .app-tabbar { transform: translateY(110%); }
}
.app--focus .app-tabbar { display: none; }

/* ------------------------------------------------------------ page header */
.page-header { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.1rem; }
.page-header__lead { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.page-header__icon { display: none; }
.page-header__text { min-width: 0; }
.page-header__title { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.4; }
.page-header__sub { margin: .1rem 0 0; color: var(--c-ink-3); font-size: .85rem; }
.page-header__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-inline-start: auto; }
/* Wide screens: one bar of one height on every page, washed with the section's colour from its icon's side. */
@media (min-width: 992px) {
    .page-header {
        position: relative; isolation: isolate; overflow: hidden; min-height: 76px; padding: .75rem 1rem .75rem .9rem;
        border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-sm);
    }
    .page-header::before {
        content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background: radial-gradient(90% 160% at 100% 0%, color-mix(in srgb, var(--tone, var(--c-primary)) 11%, transparent), transparent 62%);
    }
    .page-header::after { content: ""; position: absolute; inset-block: 18px; inset-inline-start: 0; width: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--tone, var(--c-primary)); opacity: .8; }
    .page-header__icon {
        display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px;
        background: var(--tone-soft, var(--c-primary-soft)); color: var(--tone, var(--c-primary)); font-size: 1.3rem;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--c-primary)) 20%, transparent);
    }
    .page-header__title { overflow: hidden; font-size: 1.22rem; text-overflow: ellipsis; white-space: nowrap; }
    .page-header__sub { overflow: hidden; margin: 0; font-size: .8rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
    .page-header__section { color: var(--tone-ink, var(--c-ink-3)); font-weight: 600; }
    .page-header__actions { gap: .45rem; }
    .page-header__actions .btn { min-height: 40px; padding-inline: 1rem; border-radius: 11px; font-size: .9rem; white-space: nowrap; }
}
@media (max-width: 575.98px) {
    .page-header__title { font-size: 1.15rem; }
    .page-header__actions { width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
    .page-header__actions::-webkit-scrollbar { display: none; }
    .page-header__actions .btn { white-space: nowrap; flex: none; }
}

/* ------------------------------------------------------------------ cards */
.card { --bs-card-bg: var(--c-surface); --bs-card-border-color: var(--c-line); --bs-card-border-radius: var(--radius-lg); --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px); --bs-card-cap-bg: transparent; --bs-card-cap-padding-y: .9rem; --bs-card-spacer-x: 1.2rem; --bs-card-spacer-y: 1.2rem; box-shadow: var(--shadow-sm); }
.card-header { display: flex; align-items: center; gap: .75rem; border-bottom-color: var(--c-line-soft); }
.card-title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1rem; font-weight: 600; }
.card-title > i:first-child { display: grid; place-items: center; width: 30px; height: 30px; flex: none; margin: 0 !important; border-radius: 9px; background: var(--tone-soft, var(--c-primary-soft)); color: var(--tone, var(--c-primary)) !important; font-size: .95rem; }
.card-header .card-actions { margin-inline-start: auto; display: flex; gap: .4rem; }
.section-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem; font-size: .95rem; font-weight: 600; }
.section-title i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--tone-soft, var(--c-primary-soft)); color: var(--tone, var(--c-primary)); font-size: .9rem; }

/* a figure: --tone comes from the tone given to x-ui.stat (primary, accent, success, danger, violet, teal, rose...) */
.stat { --tone: var(--c-primary); --tone-soft: var(--c-primary-soft); position: relative; overflow: hidden; display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.15rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); height: 100%; }
.stat { background: linear-gradient(135deg, var(--c-surface) 45%, color-mix(in srgb, var(--tone) 7%, var(--c-surface)) 100%); }
.stat__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 70%, #fff)); color: #fff; font-size: 1.3rem; box-shadow: 0 8px 18px -8px var(--tone); }
.stat--accent { --tone: var(--c-accent); --tone-soft: var(--c-accent-soft); }
.stat--success { --tone: var(--c-success); --tone-soft: var(--c-success-soft); }
.stat--danger { --tone: var(--c-danger); --tone-soft: var(--c-danger-soft); }
.stat--violet { --tone: var(--c-violet); --tone-soft: var(--c-violet-soft); }
.stat--teal { --tone: var(--c-teal); --tone-soft: var(--c-teal-soft); }
.stat--rose { --tone: var(--c-rose); --tone-soft: var(--c-rose-soft); }
.stat__value { font-size: 1.55rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.stat__value small { font-size: .8rem; font-weight: 500; color: var(--c-ink-3); }
.stat__label { color: var(--c-ink-3); font-size: .82rem; }
@media (max-width: 575.98px) {
    /* Amounts that share a row on a phone: icon and label on one line, the number on its own line below. */
    .stat--stacked { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: .45rem; padding: .8rem .85rem; }
    .stat--stacked > div { display: contents; }
    .stat--stacked .stat__icon { width: 28px; height: 28px; border-radius: 8px; font-size: .9rem; box-shadow: none; }
    .stat--stacked .stat__label { order: 1; font-size: .78rem; line-height: 1.3; }
    .stat--stacked .stat__value { order: 2; grid-column: 1 / -1; font-size: 1.3rem; }
}

.hero {
    position: relative; overflow: hidden; padding: 1.6rem 1.6rem; border-radius: 20px; color: #fff;
    background: radial-gradient(600px 220px at 85% -40%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(120deg, var(--c-primary-deep) 0%, var(--c-primary) 48%, var(--c-primary-2) 100%);
    box-shadow: 0 18px 40px -18px rgba(var(--c-primary-rgb), .65);
}
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.2px); background-size: 16px 16px; mask-image: linear-gradient(100deg, transparent 35%, #000 100%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset-inline-start: -70px; bottom: -110px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 40px rgba(255, 255, 255, .05); }
.hero h1 { color: #fff; font-size: 1.4rem; margin: 0 0 .3rem; }
.hero p { margin: 0; opacity: .92; max-width: 56ch; }
.hero__logo { width: 64px; height: 64px; flex: none; border-radius: 18px; background: rgba(255, 255, 255, .95); padding: 8px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }

.tile { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); color: var(--c-ink); font-weight: 600; transition: border-color .18s, box-shadow .18s, transform .18s; height: 100%; }
/* a tile takes the colour of its .tone-* class, the primary colour without one */
.tile:hover { border-color: color-mix(in srgb, var(--tone, var(--c-primary)) 45%, transparent); box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--tone, var(--c-primary)) 70%, transparent); transform: translateY(-2px); color: var(--c-ink); }
.tile i { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--tone-soft, var(--c-primary-soft)); color: var(--tone, var(--c-primary)); font-size: 1.15rem; transition: background .18s, color .18s; }
.tile:hover i { background: var(--tone, var(--c-primary)); color: #fff; }
.tile small { display: block; font-weight: 400; color: var(--c-ink-3); font-size: .78rem; }

/* ---------------------------------------------------------------- buttons */
.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: 10px; --bs-btn-padding-x: .95rem; --bs-btn-padding-y: .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; }
.btn-sm { --bs-btn-border-radius: 8px; min-height: 32px; }
.btn-lg { min-height: 48px; }
.btn-primary { --bs-btn-bg: var(--c-primary); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--c-primary-strong); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--c-primary-deep); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--c-primary); --bs-btn-disabled-border-color: transparent; background-image: linear-gradient(135deg, var(--c-primary) 0%, color-mix(in srgb, var(--c-primary) 72%, var(--c-primary-2)) 100%); box-shadow: 0 6px 16px -8px rgba(var(--c-primary-rgb), .75); transition: box-shadow .18s, filter .18s, transform .18s; }
.btn-primary:hover { filter: brightness(1.05) saturate(1.05); box-shadow: var(--shadow-primary); }
.btn-primary:active { background-image: none; transform: translateY(1px); }
.btn-outline-primary { --bs-btn-color: var(--c-primary-ink); --bs-btn-border-color: rgba(var(--c-primary-rgb), .45); --bs-btn-hover-bg: var(--c-primary); --bs-btn-hover-border-color: var(--c-primary); --bs-btn-active-bg: var(--c-primary-strong); --bs-btn-active-border-color: var(--c-primary-strong); }
.btn-soft { --bs-btn-color: var(--c-primary-ink); --bs-btn-bg: var(--c-primary-soft); --bs-btn-border-color: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--c-primary); --bs-btn-hover-border-color: var(--c-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--c-primary-strong); }
.btn-exam { --bs-btn-color: var(--c-rose-ink); --bs-btn-bg: var(--c-rose-soft); --bs-btn-border-color: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--c-rose); --bs-btn-hover-border-color: var(--c-rose); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--c-rose); --bs-btn-active-border-color: var(--c-rose); display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; }
/* an offer on the clinics' home page (Admin → العروض); one with a link opens it */
.offer-card { color: inherit; }
.offer-card--link { transition: border-color .15s, box-shadow .15s, transform .15s; }
.offer-card--link:hover { border-color: rgba(var(--c-primary-rgb), .35); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.offer-card .flex-none { flex: none; }
.offer-card .min-w-0 { min-width: 0; }
.offer-thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--c-line); }
/* Admin → طلبات الإضافة: a request's decisions, side by side */
.request-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.request-actions form { margin: 0; }
.request-actions .btn { white-space: nowrap; }
/* Admin → العروض: the whole section, shown or hidden */
.offers-section { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .9rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.offers-section b { display: block; font-weight: 600; }
.offers-section small { display: block; color: var(--c-ink-3); }
.offers-section__state { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--c-line-soft); color: var(--c-ink-3); font-size: 1.2rem; }
.offers-section__state.is-on { background: var(--c-success-soft); color: var(--c-success-ink); }
.btn-light { --bs-btn-bg: var(--c-surface); --bs-btn-border-color: var(--c-line); --bs-btn-color: var(--c-ink-2); --bs-btn-hover-color: var(--c-ink); --bs-btn-hover-bg: var(--c-line-soft); --bs-btn-hover-border-color: var(--c-line); --bs-btn-active-color: var(--c-ink); --bs-btn-active-bg: var(--c-line); --bs-btn-active-border-color: var(--c-line); --bs-btn-disabled-color: var(--c-ink-3); --bs-btn-disabled-bg: var(--c-surface); --bs-btn-disabled-border-color: var(--c-line); }
.btn-warning { --bs-btn-color: #3b2a00; --bs-btn-bg: #fbbf24; --bs-btn-border-color: #fbbf24; --bs-btn-hover-bg: var(--c-accent); --bs-btn-hover-border-color: var(--c-accent); }
.btn-danger { --bs-btn-bg: var(--c-danger); --bs-btn-border-color: var(--c-danger); --bs-btn-hover-bg: #c02f2f; --bs-btn-hover-border-color: #c02f2f; }
.btn-success { --bs-btn-bg: var(--c-success); --bs-btn-border-color: var(--c-success); --bs-btn-hover-bg: #128a4d; --bs-btn-hover-border-color: #128a4d; }
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading::before { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ forms */
.form-label { margin-bottom: .3rem; font-size: .84rem; font-weight: 500; color: var(--c-ink-2); }
.form-label .req { color: var(--c-danger); margin-inline-start: 2px; }
.form-control, .form-select { background-color: var(--c-surface); color: var(--c-ink); min-height: 42px; border-color: var(--c-field-line); border-radius: 10px; font-size: .9375rem; }
textarea.form-control { min-height: 96px; }
.form-control::placeholder { color: var(--c-placeholder); }
.form-control:focus, .form-select:focus { background-color: var(--c-surface); color: var(--c-ink); border-color: var(--c-primary); box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); }
.form-control:disabled, .form-select:disabled { background-color: var(--c-surface-2); color: var(--c-ink-3); }
.form-control[readonly]:not([data-datepicker]) { background-color: var(--c-surface-2); }
.form-text { color: var(--c-ink-3); }
.form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); }
.field-grid { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.field-grid > * { grid-column: span 12; min-width: 0; }
.field-grid > .f-half { grid-column: span 6; } /* two in a row even on a phone */
@media (min-width: 576px) { .field-grid > .f-6, .field-grid > .f-4, .field-grid > .f-3, .field-grid > .f-8 { grid-column: span 6; } .field-grid > .f-2 { grid-column: span 3; } }
@media (min-width: 992px) { .field-grid > .f-2 { grid-column: span 2; } .field-grid > .f-3 { grid-column: span 3; } .field-grid > .f-4 { grid-column: span 4; } .field-grid > .f-8 { grid-column: span 8; } }
/* A field grid in a narrow pane on a wide screen (a card beside another): laid out by the pane's own
   width, as on a small screen, so a phone number or an age is never cut short (.field-pane around it) */
.field-pane { container: field-pane / inline-size; }
@media (min-width: 992px) {
    @container field-pane (max-width: 640px) {
        .field-grid > .f-6, .field-grid > .f-4, .field-grid > .f-3, .field-grid > .f-8 { grid-column: span 6; }
        .field-grid > .f-2 { grid-column: span 3; }
    }
}
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--c-line-soft); }
@media (max-width: 575.98px) {
    /* The save bar stays above the tab bar while a long form scrolls. */
    .form-actions--sticky { position: sticky; bottom: calc(var(--tabbar-h) + 1.1rem + var(--safe-bottom)); z-index: 5; margin-top: 1rem; padding: .7rem .8rem; background: var(--c-bar); backdrop-filter: blur(8px); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); }
    .form-actions--sticky .btn-primary { flex: 1; }
    body:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="file"], [type="range"]), textarea, select):focus) .form-actions--sticky { bottom: calc(.6rem + var(--safe-bottom)); }
}

/* live-save feedback on a single field */
.is-saving { border-color: var(--c-accent) !important; box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .18) !important; }
.is-saved { border-color: var(--c-success) !important; box-shadow: 0 0 0 .2rem rgba(21, 160, 90, .16) !important; }
.is-failed { border-color: var(--c-danger) !important; box-shadow: 0 0 0 .2rem rgba(220, 59, 59, .16) !important; }
/* A long list with a search (js/app.js select[data-searchable]): a dropdown under its field on a wide
   screen, a sheet from the bottom on a phone. The select stays, out of sight, sent and checked as before. */
.searchable { position: relative; }
.searchable__native { position: absolute !important; inset-inline-start: 0; bottom: 0; width: 100% !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.searchable__toggle { display: block; width: 100%; overflow: hidden; text-align: start; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.searchable__toggle.is-placeholder { color: var(--c-placeholder, var(--c-ink-3)); }
.searchable.is-open .searchable__toggle { border-color: rgba(var(--c-primary-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .14); }
.searchable__backdrop { display: none; }
.searchable__panel { position: absolute; z-index: 1060; inset-inline: 0; top: calc(100% + .35rem); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); box-shadow: 0 18px 44px -12px rgba(23, 33, 47, .28), 0 2px 6px rgba(23, 33, 47, .06); animation: menu-in .16s cubic-bezier(.2, .9, .3, 1); }
[data-bs-theme="dark"] .searchable__panel { box-shadow: 0 18px 44px -10px rgba(0, 0, 0, .7); }
.searchable__panel[hidden], .searchable__backdrop[hidden] { display: none !important; }
.searchable__head { display: none; }
.searchable__search { position: relative; padding: .55rem; border-bottom: 1px solid var(--c-line-soft); }
.searchable__search i { position: absolute; top: 50%; inset-inline-start: 1.25rem; color: var(--c-ink-3); translate: 0 -50%; pointer-events: none; }
.searchable__search .form-control { min-height: 40px; padding-inline-start: 2.3rem; background: var(--c-surface-2); }
.searchable__list { max-height: 300px; margin: 0; padding: .35rem; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.searchable__list li { display: flex; align-items: center; min-height: 40px; padding: .45rem .7rem; border-radius: 10px; color: var(--c-ink-2); cursor: pointer; }
.searchable__list li[hidden] { display: none; }
.searchable__list li.is-active { background: var(--c-primary-tint); color: var(--c-ink); }
.searchable__list li[aria-selected="true"] { color: var(--c-primary-ink); font-weight: 600; }
.searchable__list li[aria-selected="true"]::after { content: "\F26E"; margin-inline-start: auto; font-family: "bootstrap-icons"; color: var(--c-primary); }
.searchable__empty { margin: 0; padding: 1rem; color: var(--c-ink-3); text-align: center; font-size: .9rem; }
@media (max-width: 575.98px) {
    .searchable__backdrop { position: fixed; inset: 0; z-index: 1059; display: block; background: rgba(15, 22, 31, .45); animation: fade-in .2s ease; }
    .searchable__panel { position: fixed; inset: auto 0 0 0; top: auto; max-height: 82dvh; border: 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheet-rise .24s cubic-bezier(.2, .9, .3, 1); }
    .searchable__head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem .35rem; }
    .searchable__head b { font-size: 1rem; }
    .searchable__head::before { content: ""; position: absolute; top: .45rem; left: 50%; width: 42px; height: 5px; border-radius: 99px; background: var(--c-line); translate: -50% 0; }
    .searchable__search { padding: .5rem 1rem .75rem; }
    .searchable__search i { inset-inline-start: 1.75rem; }
    .searchable__search .form-control { min-height: 46px; font-size: 16px; border-radius: 12px; }
    .searchable__list { flex: 1; max-height: none; padding: .25rem .6rem .75rem; }
    .searchable__list li { min-height: 50px; font-size: 1rem; }
}
/* the examination page: whether everything typed is saved (js/pages/examination.js) */
.exam-save { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.6; }
.exam-save[hidden] { display: none; }
.exam-save.is-saving { background: var(--c-line-soft); color: var(--c-ink-2); }
.exam-save.is-saving i { animation: spin 1s linear infinite; }
.exam-save.is-offline { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.exam-save.is-out { background: var(--c-danger-soft); color: var(--c-danger-ink); }
.exam-save.is-done { background: var(--c-success-soft); color: var(--c-success-ink); }

/* selectable chips (diagnoses, roles, branches) */
.chip-check { display: inline-flex; margin: 0; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .3rem .8rem; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink-2); font-size: .875rem; cursor: pointer; user-select: none; transition: all .12s; }
.chip-check span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--c-field-line); flex: none; transition: all .12s; }
.chip-check input:checked + span { background: var(--c-primary-soft); border-color: rgba(var(--c-primary-rgb), .5); color: var(--c-primary-ink); font-weight: 500; }
.chip-check input:checked + span::before { background: var(--c-primary) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") center/12px no-repeat; border-color: var(--c-primary); }
.chip-check input:focus-visible + span { box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); }
.chip-list { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ----------------------------------------------------------------- badges */
.badge { --bs-badge-font-weight: 500; --bs-badge-padding-x: .6em; --bs-badge-padding-y: .42em; --bs-badge-border-radius: 6px; font-size: .75rem; }
.badge-soft-primary, .badge-primary { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.badge-soft-warning, .badge-warning { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.badge-soft-success, .badge-success { background: var(--c-success-soft); color: var(--c-success-ink); }
.badge-soft-danger, .badge-danger { background: var(--c-danger-soft); color: var(--c-danger-ink); }
.badge-soft-info, .badge-info { background: var(--c-info-soft); color: var(--c-info-ink); }
.badge-soft-muted { background: var(--c-line-soft); color: var(--c-ink-2); }
.badge-soft-violet { background: var(--c-violet-soft); color: var(--c-violet-ink); }
.badge-soft-teal { background: var(--c-teal-soft); color: var(--c-teal-ink); }
.badge-soft-rose { background: var(--c-rose-soft); color: var(--c-rose-ink); }
.turn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .4rem; border-radius: 10px; background: var(--grad-primary); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 6px 14px -8px rgba(var(--c-primary-rgb), .9); }
.turn--done { background: var(--c-success-soft); color: var(--c-success-ink); box-shadow: none; }
.turn--waiting { background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: 1rem; box-shadow: none; }
.turn--out { background: var(--c-danger-soft); color: var(--c-danger-ink); box-shadow: none; }
.turn.is-moved { animation: moved 2s ease; }
@keyframes moved { 0%, 60% { background: var(--c-accent); transform: scale(1.12); } }
/* a visit just moved in the list: its whole row lit, the colour fading slowly (js/pages/visit-list.js) */
.table > tbody > tr.row-moved > td { animation: row-moved 3s ease; }
@keyframes row-moved { 0%, 45% { background-color: color-mix(in srgb, var(--c-accent) 22%, var(--c-surface)); } }
.turn-control { display: inline-flex; align-items: center; gap: .3rem; }
.turn-control .btn { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: 30px; min-height: 30px; border-radius: 8px; }
/* a way the visit cannot go: there, faint, not pressable */
.turn-control .btn:disabled { --bs-btn-disabled-opacity: .28; --bs-btn-disabled-border-color: transparent; }

/* ----------------------------------------------------------------- tables */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--c-line-soft); --bs-table-hover-bg: var(--c-primary-tint); margin: 0; vertical-align: middle; }
.table > thead > tr > th { padding: .75rem .9rem; background: color-mix(in srgb, var(--c-primary) 4%, var(--c-surface-2)); color: var(--c-ink-2); font-size: .78rem; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--c-line); }
.table > tbody > tr > td { padding: .7rem .9rem; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-card { overflow: hidden; }
.table-card .table-responsive { border-radius: 0 0 var(--radius) var(--radius); }
.table .dropdown-toggle::after { display: none; }
.row-actions { display: inline-flex; gap: .3rem; justify-content: flex-end; }

/* DataTables */
.dataTables_wrapper { padding: 0; }
.dataTables_wrapper .dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--c-line-soft); }
.dataTables_wrapper .dataTables_filter { flex: 1 1 220px; min-width: 0; text-align: start; }
.dataTables_wrapper .dataTables_filter label { display: block; position: relative; max-width: 360px; margin: 0; }
.dataTables_wrapper .dataTables_filter label::before { content: "\F52A"; font-family: "bootstrap-icons"; position: absolute; top: 50%; inset-inline-start: .85rem; transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.dataTables_wrapper .dataTables_filter input { display: block; box-sizing: border-box; width: 100% !important; margin: 0 !important; min-height: 40px; padding-inline: 2.4rem .9rem; border-radius: 10px; border: 1px solid var(--c-field-line); background: var(--c-surface); color: var(--c-ink); }
.dataTables_wrapper .dataTables_length select { min-height: 40px; border-radius: 10px; padding-inline: .6rem 1.8rem; }
.dataTables_wrapper .dataTables_length label { margin: 0; display: flex; align-items: center; gap: .4rem; color: var(--c-ink-3); font-size: .82rem; }
.dataTables_wrapper .dt-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--c-line-soft); }
.dataTables_wrapper .dataTables_info { padding: 0; color: var(--c-ink-3); font-size: .82rem; }
.dataTables_wrapper .dataTables_paginate { margin: 0; }
.dataTables_wrapper .pagination { --bs-pagination-border-radius: 8px; --bs-pagination-bg: var(--c-surface); --bs-pagination-color: var(--c-ink-2); --bs-pagination-hover-color: var(--c-ink); --bs-pagination-hover-bg: var(--c-line-soft); --bs-pagination-focus-color: var(--c-ink); --bs-pagination-focus-bg: var(--c-line-soft); --bs-pagination-disabled-color: var(--c-ink-3); --bs-pagination-active-bg: var(--c-primary); --bs-pagination-active-border-color: var(--c-primary); --bs-pagination-padding-x: .7rem; margin: 0; gap: .2rem; }
.dataTables_wrapper .pagination .page-link { border-radius: 8px; }
.dataTables_wrapper .dataTables_processing { position: absolute; inset: 0; z-index: 3; display: grid !important; place-items: center; margin: 0; width: auto; padding: 0; background: var(--c-veil); border: 0; box-shadow: none; color: transparent; font-size: 0; }
.dataTables_wrapper .dataTables_processing[style*="display: none"] { display: none !important; }
.dataTables_wrapper .dataTables_processing > div { display: none; }
.dataTables_wrapper .dataTables_processing::after { content: ""; width: 30px; height: 30px; border: 3px solid var(--c-primary); border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.dataTables_wrapper .dt-body { position: relative; overflow-x: auto; }
table.dataTable { margin: 0 !important; width: 100% !important; border-collapse: collapse !important; }
/* The vendor sheet is written left to right: here headings follow the text and the sort arrows sit at the end of the cell. */
table.dataTable > thead > tr > th { text-align: start; }
table.dataTable > thead > tr > th[class*="sorting"]:not(.sorting_disabled) { padding-inline: .9rem 26px; }
table.dataTable > thead > tr > th[class*="sorting"]::before, table.dataTable > thead > tr > th[class*="sorting"]::after { right: auto; inset-inline-end: 10px; opacity: .28; }

/* Wide screens: a calm table. Quiet headings whose sort arrows show on the column sorted by, or on
   a pointer; airy rows lit under the pointer with a line of the brand's colour at their start;
   figures in even columns. Phones and tablets show rows as cards (below). */
@media (min-width: 992px) {
    .table > thead > tr > th { padding-block: .8rem; vertical-align: middle; background: color-mix(in srgb, var(--c-primary) 3%, var(--c-surface-2)); color: var(--c-ink-3); font-size: .76rem; font-weight: 600; letter-spacing: .01em; }
    table.dataTable > thead > tr > th[class*="sorting"]::before, table.dataTable > thead > tr > th[class*="sorting"]::after { opacity: 0; transition: opacity .15s; }
    table.dataTable > thead > tr > th[class*="sorting"]:not(.sorting_disabled):hover::before, table.dataTable > thead > tr > th[class*="sorting"]:not(.sorting_disabled):hover::after { opacity: .35; }
    table.dataTable > thead > tr > th.sorting_asc, table.dataTable > thead > tr > th.sorting_desc { color: var(--c-primary-ink); }
    table.dataTable > thead > tr > th.sorting_asc::before, table.dataTable > thead > tr > th.sorting_desc::after { opacity: .8; }
    .table > tbody > tr > td { padding-block: .85rem; border-bottom-color: var(--c-line-soft); font-variant-numeric: tabular-nums; transition: background-color .15s; }
    /* one tint for the whole row: the grey veil Bootstrap and DataTables lay over a row under the pointer is left out.
       The line at its start comes at once: eased from the veil's 9999px shadow it would flood the first cell. */
    table.table > tbody > tr:hover > td { background-color: var(--c-primary-tint); }
    table.table > tbody > tr:hover > td, table.table.dataTable.table-hover > tbody > tr:hover > td { box-shadow: none; }
    table.table > tbody > tr:hover > td:first-child, table.table.dataTable.table-hover > tbody > tr:hover > td:first-child { box-shadow: inset -3px 0 0 var(--c-primary); }
    .table > tbody > tr > td.dataTables_empty { box-shadow: none !important; background: transparent !important; }

    .dataTables_wrapper .dt-toolbar { padding: 1rem 1.1rem; }
    .dataTables_wrapper .dataTables_filter input { background: var(--c-surface-2); border-color: transparent; transition: border-color .15s, box-shadow .15s, background-color .15s; }
    .dataTables_wrapper .dataTables_filter input:focus { background: var(--c-surface); border-color: rgba(var(--c-primary-rgb), .45); box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .12); outline: 0; }
    .dataTables_wrapper .dt-footer { padding: .8rem 1.1rem; }
    .dataTables_wrapper .pagination .page-link { display: grid; place-items: center; min-width: 36px; height: 36px; padding-block: 0; border-color: transparent; border-radius: 10px; font-variant-numeric: tabular-nums; }
    .dataTables_wrapper .pagination .page-item.active .page-link { background: var(--grad-primary); box-shadow: var(--shadow-primary); }
}
table.dataTable > thead > tr > th.sorting_asc::before, table.dataTable > thead > tr > th.sorting_desc::after { opacity: .75; color: var(--c-primary); }
table.dataTable td.dataTables_empty { padding: 2.5rem 1rem; color: var(--c-ink-3); text-align: center; }

/* Tables turn into cards on phones and tablets (two cards a row on a tablet). A cell's role, set on
   its column (BaseDataTable::$phone) or on the <td> of a static table, shapes the card:
     .cell-lead    before the heading (a visit's turn)       .cell-title  the heading
     .cell-sub     small, in a line under the heading (js/app.js repeats it there)
     .cell-meta    a pill with its icon (.cell-icon-<name>), no title
     .cell-wide    a line of its own                         .cell-hide-sm  left out
   Other cells pair up two by two under their column title. Empty cells are left out; the row menu
   sits in the corner; table[data-avatars] puts the row's initial before the heading. */
.cell-avatar, .cell-sub-line, td > .cell-icon { display: none; }
/* a phone number of a card calls when tapped; in the wide-screen table it stays plain text */
.cell-call { color: inherit; pointer-events: none; }
@media (max-width: 991.98px) {
    .table-stack > thead { display: none; }
    .table-stack, .table-stack > tbody { display: block; width: 100% !important; }
    .table-stack > tbody { padding: .75rem; }
    .dataTables_wrapper .dataTables_length { display: none; }
    /* a moved visit's card is lit whole, not cell by cell */
    .table-stack > tbody > tr.row-moved > td { animation: none; }
    .table-stack > tbody > tr.row-moved { animation: row-moved 3s ease; }
    .table-stack > tbody > tr {
        position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
        margin-bottom: .7rem; padding: .95rem 1rem 1rem; border: 1px solid var(--c-line); border-radius: 20px;
        background: var(--c-surface); box-shadow: 0 1px 2px rgba(23, 33, 47, .04), 0 12px 28px -20px rgba(23, 33, 47, .4);
        transition: border-color .15s, box-shadow .15s;
    }
    .table-stack > tbody > tr:active { border-color: rgba(var(--c-primary-rgb), .35); }
    .table-stack > tbody > tr:last-child { margin-bottom: 0; }
    /* the heading line, a hairline, then the details */
    .table-stack > tbody > tr::after { content: ""; order: 0; flex-basis: 100%; height: 1px; margin: .3rem 0 .15rem; background: var(--c-line-soft); }
    .table-stack > tbody > tr:has(> td.dataTables_empty)::after { display: none; }
    .table-stack > tbody > tr > td {
        box-sizing: border-box !important; display: block; order: 1; flex: 1 1 calc(50% - .5rem); min-width: 0; width: auto !important;
        padding: 0; border: 0; background: none; text-align: start; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere;
    }
    .table-stack > tbody > tr > td::before { content: attr(data-label); display: block; margin-bottom: .1rem; color: var(--c-ink-3); font-size: .7rem; font-weight: 500; line-height: 1.4; }
    .table-stack > tbody > tr > td[data-label=""]::before, .table-stack > tbody > tr > td:not([data-label])::before { display: none; }
    .table-stack > tbody > tr > td.is-blank, .table-stack > tbody > tr > td.cell-hide-sm, .table-stack > tbody > tr > td.cell-sub { display: none !important; }

    .table-stack > tbody > tr > td.cell-lead { order: -3; flex: none; }
    .table-stack > tbody > tr > td.cell-title { order: -2; flex: 1 1 0; min-height: 40px; padding-inline-end: 3rem; color: var(--c-ink); font-size: 1.04rem; font-weight: 700; line-height: 1.45; }
    .table-stack > tbody > tr > td.cell-title:has(> .cell-avatar) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .8rem; }
    .table-stack > tbody > tr > td.cell-title::before, .table-stack > tbody > tr > td.cell-lead::before, .table-stack > tbody > tr > td.cell-meta::before { display: none; }
    .table-stack > tbody > tr > td.cell-title > a { color: var(--c-ink); }
    .cell-avatar {
        grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
        background: linear-gradient(145deg, var(--tone), color-mix(in srgb, var(--tone) 65%, #fff)); color: #fff;
        font-size: 1.2rem; font-weight: 700; line-height: 1; box-shadow: 0 8px 18px -10px var(--tone);
    }
    .cell-sub-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin-top: .25rem; color: var(--c-ink-3); font-size: .78rem; font-weight: 500; line-height: 1.5; }
    .cell-sub-item { display: inline-flex; align-items: center; gap: .3rem; }
    .cell-sub-item .cell-icon { display: inline; color: var(--c-ink-3); font-size: .8rem; }
    .cell-sub-item .badge { font-size: .72rem; }

    /* details as pills: icon and value */
    .table-stack > tbody > tr > td.cell-meta {
        display: inline-flex; flex: 0 1 auto; align-items: center; gap: .4rem; max-width: 100%; padding: .38rem .7rem;
        border-radius: 11px; background: var(--c-surface-2); color: var(--c-ink-2); font-size: .82rem; font-weight: 500; line-height: 1.4;
    }
    .table-stack > tbody > tr > td.cell-meta > .cell-icon { display: inline; flex: none; color: var(--c-primary); font-size: .9rem; }
    .table-stack > tbody > tr > td.cell-meta .num { display: inline; }
    .table-stack > tbody > tr > td.cell-meta .cell-call { pointer-events: auto; }
    /* a heading that is only a number keeps its column title in front of it (an invoice) */
    .table-stack > tbody > tr > td.cell-title.cell-title--labelled::before { display: inline; margin-inline-end: .35rem; color: var(--c-ink-3); font-size: .8rem; font-weight: 500; }
    .table-stack > tbody > tr > td.cell-meta:has(.cell-call) { background: var(--c-primary-soft); color: var(--c-primary-ink); }
    .table-stack > tbody > tr > td.cell-wide { flex-basis: 100%; }
    /* a visit's examination: the button says what it is, across the card */
    .table-stack > tbody > tr > td:has(> .btn-exam)::before { display: none; }
    .table-stack > tbody > tr > td > .btn-exam { justify-content: center; width: 100%; min-height: 44px; }

    .table-stack > tbody > tr > td.cell-actions { position: absolute; top: .85rem; inset-inline-end: .8rem; flex: none; }
    .table-stack > tbody > tr > td.cell-actions .btn { width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 11px; background: var(--c-surface-2); color: var(--c-ink-2); }
    /* a row without a menu (a record the clinic may not change) shows no empty corner */
    .table-stack > tbody > tr > td.text-end:not(:has(*)) { display: none; }
    .turn-control .btn { width: 32px; min-height: 32px; }

    /* nothing to show: a quiet dashed box, not a card */
    .table-stack > tbody > tr:has(> td.dataTables_empty) { border-style: dashed; background: transparent; box-shadow: none; }
    .table-stack > tbody > tr > td.dataTables_empty { flex-basis: 100%; padding: 1.75rem 0; text-align: center; }
    .table-stack > tbody > tr > td.dataTables_empty::before { display: none; }
    .table-card { border-radius: var(--radius-lg); }
    .dataTables_wrapper .dt-toolbar { padding: .75rem; }
    .dataTables_wrapper .dataTables_filter label { max-width: none; }
    .dataTables_wrapper .dt-footer { justify-content: center; padding: .7rem .75rem; }
    .dataTables_wrapper .dataTables_info { display: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .table-stack > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .75rem; }
    .table-stack > tbody > tr { margin-bottom: 0; }
    .table-stack > tbody > tr:has(> td.dataTables_empty) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------- dropdowns and modals */
/* Every menu (the account, the branch, a top bar section, a table row's "…"): a raised sheet that
   opens with a short rise. The rise uses translate and scale, not transform: Popper places the
   menu with transform. */
.dropdown-menu {
    --bs-dropdown-bg: var(--c-surface); --bs-dropdown-border-color: var(--c-line); --bs-dropdown-border-radius: 14px;
    --bs-dropdown-padding-x: .35rem; --bs-dropdown-padding-y: .35rem; --bs-dropdown-spacer: .4rem; --bs-dropdown-min-width: 13.5rem;
    --bs-dropdown-item-padding-x: .7rem; --bs-dropdown-item-padding-y: .45rem; --bs-dropdown-header-padding-x: .7rem; --bs-dropdown-header-padding-y: .45rem;
    --bs-dropdown-color: var(--c-ink); --bs-dropdown-link-color: var(--c-ink-2); --bs-dropdown-link-hover-color: var(--c-ink); --bs-dropdown-link-hover-bg: var(--c-primary-tint);
    --bs-dropdown-link-active-bg: var(--c-primary-soft); --bs-dropdown-link-active-color: var(--c-primary-ink);
    --bs-dropdown-divider-bg: var(--c-line-soft); --bs-dropdown-divider-margin-y: .35rem;
    box-shadow: 0 18px 44px -12px rgba(23, 33, 47, .28), 0 2px 6px rgba(23, 33, 47, .06); font-size: .9rem;
}
[data-bs-theme="dark"] .dropdown-menu { box-shadow: 0 18px 44px -10px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3); }
.dropdown-menu.show { animation: menu-in .16s cubic-bezier(.2, .9, .3, 1); }
@keyframes menu-in { from { opacity: 0; translate: 0 -6px; scale: .98; } }
.dropdown-item { display: flex; align-items: center; gap: .65rem; min-height: 40px; border-radius: 10px; font-weight: 500; transition: background-color .12s, color .12s; }
.dropdown-item i { flex: none; width: 1.25rem; color: var(--c-ink-3); font-size: 1.05rem; text-align: center; transition: color .12s; }
.dropdown-item:is(:hover, :focus-visible) i, .dropdown-item.active i { color: var(--c-primary); }
.dropdown-item:focus-visible { outline: 2px solid rgba(var(--c-primary-rgb), .5); outline-offset: -2px; background: var(--bs-dropdown-link-hover-bg); color: var(--bs-dropdown-link-hover-color); }
.dropdown-item.active { font-weight: 600; }
.dropdown-item.text-danger:is(:hover, :focus-visible, :active) { background: var(--c-danger-soft); }
.dropdown-item.text-danger i { color: inherit; }
.dropdown-header { font-size: .72rem; font-weight: 600; color: var(--c-ink-3); }
/* the account menus: who is signed in, at their top */
.dropdown-profile { display: flex; align-items: center; gap: .7rem; min-width: 15rem; margin-bottom: .35rem; padding: .45rem .55rem .75rem; border-bottom: 1px solid var(--c-line-soft); }
.dropdown-profile :is(img, .user-chip__initial) { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: var(--c-primary-soft); }
.dropdown-profile .user-chip__initial { font-size: 1.05rem; }
.dropdown-profile > span:last-child { min-width: 0; line-height: 1.55; }
.dropdown-profile :is(b, small) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-profile b { max-width: 15rem; color: var(--c-ink); font-weight: 700; }
.dropdown-profile small { color: var(--c-ink-3); font-size: .76rem; }
.row-actions .dropdown-menu { --bs-dropdown-min-width: 10.5rem; }
@media (prefers-reduced-motion: reduce) { .dropdown-menu.show { animation: none !important; } }

/* Dialogs: a raised sheet over a dimmed, softly blurred page. A dialog with a header (x-ui.modal)
   gets a faint wash of the brand's colour and a line before its title, and its buttons on a footer
   of their own; a confirmation (x-ui.delete-modal) stays one plain card. */
.modal {
    --bs-modal-bg: var(--c-surface); --bs-modal-border-radius: 20px; --bs-modal-inner-border-radius: 19px; --bs-modal-border-width: 1px; --bs-modal-border-color: var(--c-line);
    --bs-modal-header-padding: 1.05rem 1.35rem; --bs-modal-padding: 1.35rem; --bs-modal-footer-gap: .6rem;
    --bs-modal-header-border-color: var(--c-line-soft); --bs-modal-footer-border-color: var(--c-line-soft);
    --bs-modal-box-shadow: 0 30px 80px -24px rgba(15, 23, 42, .45), 0 8px 24px -12px rgba(15, 23, 42, .2);
}
[data-bs-theme="dark"] .modal { --bs-modal-box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03); }
.modal-backdrop { --bs-backdrop-bg: #0b1220; --bs-backdrop-opacity: .5; }
.modal-backdrop.show { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-content { overflow: hidden; }
.modal-header { background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 6%, var(--c-surface)) 0%, var(--c-surface) 100%); }
.modal-title { font-size: 1.08rem; font-weight: 700; }
.modal-header .modal-title { display: flex; align-items: center; gap: .6rem; }
.modal-header .modal-title::before { content: ""; width: 4px; height: 1.15em; flex: none; border-radius: 99px; background: var(--grad-primary); }
/* the close button: a grey cross that reads on both appearances (Bootstrap's dark one inverts the whole button) */
.modal-header .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    width: 36px; height: 36px; margin: 0; margin-inline-start: auto; padding: 0; border-radius: 11px; background-color: var(--c-line-soft); background-size: .7rem; filter: none !important; opacity: .85; transition: background-color .15s, opacity .15s;
}
.modal-header .btn-close:hover { background-color: var(--c-line); opacity: 1; }
.modal-header ~ .modal-footer { background: color-mix(in srgb, var(--c-surface-2) 70%, var(--c-surface)); }
.modal-footer { flex-wrap: nowrap; padding: .9rem 1.35rem; }
.modal-footer > .btn { flex: 1; min-height: 42px; border-radius: 11px; font-weight: 600; }
@media (min-width: 576px) {
    .modal-footer > .btn { flex: none; min-width: 120px; }
    /* opening: a short rise and settle */
    .modal.fade .modal-dialog { transform: translateY(14px) scale(.98); transition: transform .24s cubic-bezier(.2, .9, .3, 1); }
    .modal.show .modal-dialog { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } }
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen) { margin: 0; min-height: 100%; display: flex; align-items: flex-end; }
    .modal-dialog:not(.modal-fullscreen) .modal-content { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: var(--safe-bottom); max-height: 92dvh; }
    .modal.fade .modal-dialog:not(.modal-fullscreen) { transform: translateY(40px); }
    .modal.show .modal-dialog:not(.modal-fullscreen) { transform: none; }
}
.confirm-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: 50%; background: var(--c-danger-soft); color: var(--c-danger); font-size: 1.6rem; }
.confirm-icon--warn { background: var(--c-accent-soft); color: var(--c-accent-ink); }

.nav-tabs { --bs-nav-tabs-border-width: 0; --bs-nav-link-color: var(--c-ink-3); --bs-nav-link-hover-color: var(--c-ink); --bs-nav-tabs-link-active-color: var(--c-primary-ink); --bs-nav-tabs-link-active-bg: transparent; gap: .25rem; border-bottom: 1px solid var(--c-line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; font-weight: 500; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; }
.nav-tabs .nav-link.active { border-bottom-color: transparent; font-weight: 600; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2)) bottom / 100% 2px no-repeat; }
.accordion { --bs-accordion-bg: var(--c-surface); --bs-accordion-border-color: var(--c-line); --bs-accordion-border-radius: var(--radius); --bs-accordion-inner-border-radius: calc(var(--radius) - 1px); --bs-accordion-btn-focus-box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); --bs-accordion-color: var(--c-ink); --bs-accordion-btn-color: var(--c-ink); --bs-accordion-active-bg: var(--c-primary-tint); --bs-accordion-active-color: var(--c-ink); --bs-accordion-btn-padding-y: .85rem; }
.accordion-button { font-weight: 500; gap: .5rem; flex-wrap: wrap; }
.alert { --bs-alert-border-radius: var(--radius); --bs-alert-padding-y: .8rem; display: flex; gap: .65rem; align-items: flex-start; }
.alert-primary { --bs-alert-bg: var(--c-primary-soft); --bs-alert-border-color: transparent; --bs-alert-color: var(--c-primary-ink); }
.alert-warning { --bs-alert-bg: var(--c-accent-soft); --bs-alert-border-color: transparent; --bs-alert-color: var(--c-accent-ink); }
.alert-danger { --bs-alert-bg: var(--c-danger-soft); --bs-alert-border-color: transparent; --bs-alert-color: var(--c-danger-ink); }

.empty { padding: 2.5rem 1rem; text-align: center; color: var(--c-ink-3); }
.empty i { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto .8rem; border-radius: 50%; background: var(--c-line-soft); font-size: 1.6rem; color: var(--c-ink-3); }
.empty h3 { font-size: 1rem; margin-bottom: .25rem; color: var(--c-ink-2); }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain > li { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--c-line); }
.list-plain > li:last-child { border-bottom: 0; }
.list-plain .n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: var(--c-line-soft); color: var(--c-ink-2); font-size: .72rem; font-weight: 600; flex: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.kv dt { color: var(--c-ink-3); font-weight: 400; font-size: .84rem; }
.kv dd { margin: 0; font-weight: 500; }

/* ----------------------------------------------------------- third party */
/* toasts (toastr): a light card at the top right, the kind told by a coloured icon and a thin timer line */
#toast-container { inset-block-start: calc(var(--topbar-h) + var(--safe-top) + 12px) !important; }
#toast-container.toast-top-right { right: 16px; left: auto; }
#toast-container > div.toast {
    --toast: var(--c-primary); --toast-soft: var(--c-primary-soft);
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: .1rem;
    width: min(92vw, 380px); min-height: 64px; margin: 0 0 .6rem; padding: .85rem 2.6rem .85rem 3.9rem; padding-inline: 3.9rem 2.6rem;
    border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface) none !important;
    box-shadow: 0 1px 2px rgba(23, 33, 47, .06), 0 16px 40px -12px rgba(23, 33, 47, .28) !important;
    color: var(--c-ink-2); font-family: inherit; font-size: .9rem; line-height: 1.55; opacity: 1;
    animation: toast-in .32s cubic-bezier(.2, .9, .3, 1.2);
}
[data-bs-theme="dark"] #toast-container > div.toast { box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .7) !important; }
#toast-container > div.toast:hover { box-shadow: 0 1px 2px rgba(23, 33, 47, .06), 0 20px 46px -12px rgba(23, 33, 47, .34) !important; opacity: 1; cursor: default; }
/* the kind's icon, in a soft chip at the start of the card */
#toast-container > div.toast::before {
    content: ""; position: absolute; top: 50%; inset-inline-start: .9rem; display: grid; place-items: center; width: 36px; height: 36px;
    margin-top: -18px; border-radius: 11px; background: var(--toast-soft); color: var(--toast); font-family: "bootstrap-icons"; font-size: 1.15rem; line-height: 1;
}
#toast-container > div.toast-success { --toast: var(--c-success); --toast-soft: var(--c-success-soft); }
#toast-container > div.toast-error { --toast: var(--c-danger); --toast-soft: var(--c-danger-soft); }
#toast-container > div.toast-warning { --toast: var(--c-accent); --toast-soft: var(--c-accent-soft); }
#toast-container > div.toast-info { --toast: var(--c-primary); --toast-soft: var(--c-primary-soft); }
#toast-container > div.toast-success::before { content: "\F633"; }
#toast-container > div.toast-error::before { content: "\F659"; }
#toast-container > div.toast-warning::before { content: "\F63C"; }
#toast-container > div.toast-info::before { content: "\F646"; }
#toast-container .toast-title { color: var(--c-ink); font-weight: 700; font-size: .92rem; }
#toast-container .toast-message { color: var(--c-ink-2); overflow-wrap: anywhere; }
#toast-container .toast-title + .toast-message { font-size: .85rem; }
/* a message without a title reads as one */
#toast-container .toast-close-button + .toast-message { color: var(--c-ink); font-weight: 500; }
#toast-container .toast .toast-close-button {
    position: absolute; top: .55rem; inset-inline-end: .6rem; right: auto; float: none; display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 8px; color: var(--c-ink-3); font-size: 1.2rem; font-weight: 400; line-height: 1; text-shadow: none; opacity: 1; transition: background-color .15s, color .15s;
}
[dir="rtl"] #toast-container .toast .toast-close-button { left: .6rem; right: auto; }
#toast-container .toast .toast-close-button:hover, #toast-container .toast .toast-close-button:focus { background: var(--c-line-soft); color: var(--c-ink); opacity: 1; }
/* time left before it goes */
#toast-container .toast-progress { inset-inline-start: 0; bottom: 0; height: 3px; background: var(--toast); opacity: .55; }
[dir="rtl"] #toast-container .toast-progress { left: auto; right: 0; }
@keyframes toast-in { from { transform: translateX(28px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 575.98px) {
    #toast-container, #toast-container.toast-top-right { inset-inline: 0 !important; display: grid; justify-items: center; padding: 0 .75rem; }
    #toast-container > div.toast { width: 100%; margin-inline: auto; animation-name: toast-drop; }
    @keyframes toast-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
}

.select2-container { width: 100% !important; }
.select2-container--bootstrap-5 .select2-selection { min-height: 42px; border-radius: 10px; border-color: var(--c-field-line); background-color: var(--c-surface); color: var(--c-ink); font-size: .9375rem; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--c-ink); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color: var(--c-placeholder); }
.select2-container--bootstrap-5.select2-container--disabled .select2-selection, .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection { background-color: var(--c-surface-2); border-color: var(--c-field-line); color: var(--c-ink-3); }
.select2-container--bootstrap-5.select2-container--disabled .select2-selection--single .select2-selection__rendered { color: var(--c-ink-2); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--c-primary); box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); }
.select2-container--bootstrap-5 .select2-dropdown { border-color: var(--c-line); border-radius: var(--radius-sm); background-color: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 1080; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected { background: var(--c-primary); color: #fff; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { border-radius: 8px; min-height: 38px; border-color: var(--c-field-line); background-color: var(--c-surface); color: var(--c-ink); }
/* the theme draws a dark arrow: the dark appearance needs a light one */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b6c1cf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.flatpickr-calendar { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--c-line); background: var(--c-surface); font-family: inherit; }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--c-surface); }
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--c-surface); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--c-ink); fill: var(--c-ink); }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background-color: var(--c-surface); color: var(--c-ink); }
.flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: var(--c-ink-2); }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: var(--c-ink-2); }
span.flatpickr-weekday { color: var(--c-ink-3); }
/* the hour row (a visit's date): the theme's ink, readable in the dark theme too */
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: var(--c-ink); }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: var(--c-line-soft); }
.flatpickr-calendar.hasTime .flatpickr-time { border-top-color: var(--c-line); }
.flatpickr-day { color: var(--c-ink); }
.flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--c-line-soft); border-color: var(--c-line-soft); }
.flatpickr-day.today { border-color: var(--c-primary); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--c-ink-3); opacity: .6; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
/* on a phone (upright, or on its side: a short touch screen) the calendar opens as a sheet at the
   foot of the screen, whole wherever its field is (beside a field low on a short screen it opened
   above it, its month cut off) */
@media (max-width: 575.98px), (pointer: coarse) and (max-height: 500px) {
    .flatpickr-calendar.open:not(.inline) { position: fixed; top: auto !important; right: 0 !important; bottom: calc(.75rem + var(--safe-bottom, 0px)); left: 0 !important; margin-inline: auto; }
    .flatpickr-calendar.open:not(.inline)::before, .flatpickr-calendar.open:not(.inline)::after { display: none; }
}
.swal2-popup { border-radius: var(--radius-lg) !important; font-family: inherit !important; background: var(--c-surface) !important; color: var(--c-ink-2) !important; }
.swal2-title { color: var(--c-ink) !important; }
.swal2-html-container ul { text-align: start; padding-inline-start: 1.2rem; }
.swal2-confirm { background: var(--c-primary) !important; border-radius: 10px !important; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.gallery__item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--c-line); background: var(--c-line-soft); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item .btn { position: absolute; top: 6px; inset-inline-end: 6px; min-height: 32px; width: 32px; padding: 0; box-shadow: var(--shadow); }
.gallery__item.is-missing .image-link { pointer-events: none; }
.gallery__item.is-missing img { visibility: hidden; }
.gallery__item.is-missing::after { content: "الملف غير متوفر"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-ink-3); font-size: .8rem; pointer-events: none; }
/* A QR code is read by a camera: it stays on white in both appearances. */
.qr-box { display: grid; place-items: center; padding: .75rem; border: 1px dashed var(--c-line); border-radius: var(--radius); background: #fff; }
.qr-box img, .qr-box canvas { width: 100% !important; max-width: 180px; height: auto !important; }

/* ------------------------------------------------------ examination screen */
.exam-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .9rem; margin-bottom: .75rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.exam-bar__patient { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.exam-bar__patient strong { font-size: 1.05rem; line-height: 1.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-bar__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.exam-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-inline-start: auto; }
.exam-bar__actions .form-control { width: 150px; }
.exam-tip { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin-bottom: .75rem; padding: .7rem .9rem; border: 1px dashed rgba(var(--c-primary-rgb), .45); border-radius: var(--radius); background: var(--c-primary-tint); color: var(--c-ink-2); font-size: .88rem; }
.exam-tip > i { color: var(--c-accent); font-size: 1.15rem; }
.exam-tip > span { flex: 1 1 260px; }
.exam-tip .btn-close { font-size: .7rem; }
.section-title__link { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: auto; color: var(--c-ink-3); font-size: .78rem; font-weight: 500; }
.section-title__link i { display: inline; width: auto; height: auto; background: none; color: inherit; font-size: .85rem; }
.section-title__link:hover { color: var(--c-primary); }
.exam-tabs { margin-bottom: .75rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0 .4rem; }
.exam-grid { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.exam-col { min-width: 0; padding: 1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
@media (min-width: 1200px) {
    .exam-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .exam-grid--fields { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 6fr); }
    /* Each column scrolls on its own so the whole examination stays on one screen. */
    .exam-col { max-height: calc(100dvh - var(--topbar-h) - 150px); overflow-y: auto; scrollbar-width: thin; }
}

.rx-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .45rem; }
.rx-lines { display: grid; gap: .45rem; }
.rx-line { display: grid; grid-template-columns: 76px minmax(0, 1.3fr) 112px minmax(0, 1fr) 36px; gap: .4rem; align-items: center; }
.rx-line .form-select { padding-inline: .55rem 1.7rem; background-position: left .45rem center; }
.rx-line .btn { min-height: 38px; width: 36px; padding: 0; }
@media (max-width: 767.98px) {
    .rx-new { grid-template-columns: minmax(0, 1fr); }
    .rx-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; padding: .55rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-primary-tint); }
    .rx-line > .rx-medicine + .select2-container { grid-column: 1 / -1; grid-row: 1; }
    .rx-line > .rx-count { grid-row: 2; grid-column: 1; }
    .rx-line > .rx-unit { grid-row: 2; grid-column: 2; }
    .rx-line > [data-rx="remove"] { grid-row: 2; grid-column: 3; }
    .rx-line > .rx-dose + .select2-container { grid-column: 1 / -1; grid-row: 3; }
}
.exam-chart, .exam-chart:hover { justify-content: flex-start; color: #17212f; font-weight: 500; }
.exam-chart--girls { background: #fde3ec; }
.exam-chart--boys { background: #dfe6ff; }

/* ------------------------------------------------------ standalone screens */
/* Screens without the dashboard shell (dashboard/layout/standalone.blade.php): sign-in, QR scan, document upload. */
.auth { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--c-canvas); }
@media (min-width: 992px) { .auth { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.auth__aside { display: none; position: relative; overflow: hidden; padding: 3rem; color: #fff; background: linear-gradient(150deg, var(--c-primary-deep) 0%, var(--c-primary) 55%, var(--c-primary-2) 100%); }
@media (min-width: 992px) { .auth__aside { display: flex; flex-direction: column; justify-content: space-between; } }
.auth__aside::before, .auth__aside::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.auth__aside::before { width: 420px; height: 420px; inset-inline-end: -140px; top: -140px; }
.auth__aside::after { width: 300px; height: 300px; inset-inline-start: -100px; bottom: -110px; }
.auth__aside h2 { color: #fff; font-size: 2rem; line-height: 1.35; max-width: 16ch; }
.auth__points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; position: relative; z-index: 1; }
.auth__points li { display: flex; align-items: center; gap: .7rem; font-size: 1rem; }
.auth__points i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .16); }
.auth__main { position: relative; display: grid; place-items: center; padding: calc(1.5rem + var(--safe-top)) 1.25rem calc(1.5rem + var(--safe-bottom)); }
/* its watermark bleeds off the screen's side (.brand-watermark--auth-main), never past it: clipped on
   that axis only, so nothing of the page is hidden and a menu may still open below */
.auth__main { overflow-x: clip; }
.auth__card { width: 100%; max-width: 400px; }
.auth__main > .theme-toggle { position: absolute; top: calc(.75rem + var(--safe-top)); inset-inline-end: .75rem; }
/* the way back to the site, across from the appearance switch; the logos lead there too */
.auth__home { position: absolute; top: calc(.75rem + var(--safe-top)); inset-inline-start: .75rem; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem 1rem; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); box-shadow: var(--shadow-sm); color: var(--c-ink); font-size: .9rem; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.auth__home:hover, .auth__home:focus-visible { border-color: var(--c-primary); color: var(--c-primary); }
.auth__brand { color: inherit; text-decoration: none; }
.auth__brand:hover { color: inherit; opacity: .9; }
.auth__logo-link { display: inline-block; border-radius: 24px; }
.auth__logo { width: 64px; height: 64px; margin-bottom: 1rem; }
.auth__card h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; top: 50%; inset-inline-start: .9rem; transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.input-icon > .form-control { padding-inline-start: 2.6rem; min-height: 48px; }
.input-icon > .toggle { position: absolute; top: 50%; inset-inline-end: .35rem; transform: translateY(-50%); width: 44px; min-height: 44px; padding: 0; border: 0; color: var(--c-ink-3); font-size: 1.1rem; }
.input-icon > .toggle:hover, .input-icon > .toggle:focus-visible { color: var(--c-ink); }
/* a screen without a side panel: one centred column on every screen size */
.auth--single { grid-template-columns: 1fr; }
.auth--single .auth__card { text-align: center; }
.auth--single .auth__card form, .auth--single .auth__card .alert { text-align: start; }
.auth--single .auth__card h1 { margin-bottom: 1.5rem; }

/* On a phone the side panel is hidden: the screen opens on the brand's colour, the form in a raised card. */
@media (max-width: 991.98px) {
    .auth { background: radial-gradient(420px 220px at 85% 0%, rgba(255, 255, 255, .18), transparent 70%), linear-gradient(160deg, var(--c-primary-deep) 0%, var(--c-primary) 62%, var(--c-primary-2) 120%) top / 100% 290px no-repeat, var(--c-canvas); }
    .auth__main { align-items: start; padding-top: calc(4.75rem + var(--safe-top)); }
    .auth__main > .theme-toggle { color: #fff; }
    .auth__main > .theme-toggle:hover { background: rgba(255, 255, 255, .16); color: #fff; }
    .auth__home { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); box-shadow: none; color: #fff; }
    .auth__home:hover, .auth__home:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .24); color: #fff; }
    .auth__logo-link { display: block; width: max-content; margin-inline: auto; }
    .auth__card { position: relative; max-width: 440px; padding: 0 1.35rem 1.5rem; border-radius: 26px; background: var(--c-surface); box-shadow: 0 26px 60px -28px rgba(16, 24, 40, .55); }
    .auth__logo { display: block; width: 78px; height: 78px; margin: -39px auto 1rem; padding: 9px; border-radius: 24px; background: #fff; box-shadow: 0 14px 30px -14px rgba(16, 24, 40, .5); }
    .auth__card > h1, .auth__card > h1 + p { text-align: center; }
    .auth__card .install-card { margin-bottom: 0; }
}

/* Brand watermark inside auth screens */
.brand-watermark { position: absolute; pointer-events: none; z-index: 0; user-select: none; }
.brand-watermark svg { display: block; width: 100%; height: 100%; }
.brand-watermark--auth-aside {
    bottom: -15%;
    inset-inline-start: -15%;
    width: 620px;
    height: auto;
    opacity: 0.55;
    filter: drop-shadow(0 0 60px rgba(126, 224, 238, 0.35));
    animation: wmFloat 10s ease-in-out infinite alternate;
}
.brand-watermark--auth-main {
    top: -15%;
    inset-inline-end: -15%;
    width: 420px;
    height: auto;
    opacity: 0.25;
}
@keyframes wmFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-16px) rotate(2deg); }
}
.forgot-password-card { padding: .5rem 0; }

/* a choice among buttons (.btn-check + .btn-light): the chosen one in the primary colour */
.btn-check:checked + .btn-light, .btn-check:checked + .btn-light:hover { border-color: rgba(var(--c-primary-rgb), .5); background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 600; }
.btn-check:focus-visible + .btn-light { box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); }

/* clinic registration (dashboard/auth/register): a wider card, a progress line of three steps */
.auth__card--wide { max-width: 620px; }
.auth__badge { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); font-size: .88rem; font-weight: 600; }
.stepper { display: flex; gap: .5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; counter-reset: none; }
.stepper li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--c-ink-3); font-size: .8rem; font-weight: 600; text-align: center; cursor: pointer; }
.stepper li::before { content: ""; position: absolute; top: 17px; inset-inline-start: calc(50% + 22px); width: calc(100% - 44px + .5rem); height: 2px; border-radius: 2px; background: var(--c-line); }
.stepper li:last-child::before { display: none; }
.stepper li.is-done::before { background: var(--grad-primary); }
.stepper__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--c-line); color: var(--c-ink-3); transition: background .2s, box-shadow .2s, color .2s; }
.stepper__dot i { display: none; font-size: 1rem; }
.stepper li.is-active { color: var(--c-primary-ink); }
.stepper li.is-active .stepper__dot { background: var(--grad-primary); box-shadow: 0 0 0 5px rgba(var(--c-primary-rgb), .15); color: #fff; }
.stepper li.is-done { color: var(--c-ink-2); }
.stepper li.is-done .stepper__dot { background: var(--c-primary-soft); box-shadow: none; color: var(--c-primary); }
.stepper li.is-done .stepper__dot b { display: none; }
.stepper li.is-done .stepper__dot i { display: block; }
.wizard-step { min-width: 0; margin: 0; padding: 0; border: 0; animation: step-in .28s ease; }
@keyframes step-in { from { opacity: 0; transform: translateX(-12px); } }
.wizard-actions { display: flex; gap: .6rem; margin-top: 1.5rem; }
.wizard-actions .btn-primary { flex: 1; }
.wizard-actions .btn-light { flex: none; }
@media (max-width: 575.98px) { .wizard-actions .btn-lg { padding-inline: .9rem; font-size: 1rem; white-space: nowrap; } }
.password-meter { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; transition: opacity .2s; }
.password-meter:not([data-level]), .password-meter[data-level="none"] { opacity: 0; }
.password-meter span { position: relative; flex: 1; height: 5px; overflow: hidden; border-radius: 99px; background: var(--c-line-soft); }
.password-meter span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--c-danger); transition: width .25s, background .25s; }
[dir="rtl"] .password-meter span::after { inset: 0 0 0 auto; }
.password-meter small { min-width: 3.5rem; color: var(--c-ink-3); font-size: .74rem; font-weight: 600; }
.password-meter[data-level="weak"] span::after { width: 25%; background: var(--c-danger); }
.password-meter[data-level="fair"] span::after { width: 50%; background: var(--c-accent); }
.password-meter[data-level="good"] span::after { width: 75%; background: var(--c-info); }
.password-meter[data-level="strong"] span::after { width: 100%; background: var(--c-success); }
.password-meter[data-level="weak"] small { color: var(--c-danger-ink); }
.password-meter[data-level="strong"] small { color: var(--c-success-ink); }
/* the secretary's step may be left for later */
/* leaving a step for later (the clinic's details, the secretary): clear, but not the main way on */
.btn-skip { --bs-btn-color: var(--c-primary-ink); --bs-btn-bg: transparent; --bs-btn-border-color: rgba(var(--c-primary-rgb), .55); --bs-btn-hover-color: var(--c-primary-ink); --bs-btn-hover-bg: var(--c-primary-soft); --bs-btn-hover-border-color: var(--c-primary); --bs-btn-active-color: var(--c-primary-ink); --bs-btn-active-bg: var(--c-primary-soft); --bs-btn-active-border-color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-width: 1.5px; border-style: dashed; font-weight: 600; white-space: nowrap; }
.wizard-actions .btn-skip { flex: none; }
/* a phone: the skip on a row of its own above back and next */
@media (max-width: 575.98px) { .wizard-actions { flex-wrap: wrap; } .wizard-actions .btn-skip { order: -1; flex: 1 1 100%; } }
.later-card { display: flex; gap: 1rem; padding: 1.25rem; border-radius: calc(var(--radius) + 4px); background: linear-gradient(135deg, var(--c-accent-soft), var(--c-surface)); box-shadow: inset 0 0 0 1px var(--c-line); animation: step-in .28s ease; }
.later-card__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c-surface); box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .25); color: var(--c-accent-ink); font-size: 1.35rem; }
.later-card > div > b:first-child { display: block; margin-bottom: .25rem; font-size: 1rem; }
.later-card .btn { white-space: nowrap; }
@media (max-width: 575.98px) { .later-card { flex-direction: column; gap: .75rem; padding: 1rem; } .later-card .btn { width: 100%; } }
.later-card p { margin: 0 0 .75rem; color: var(--c-ink-2); font-size: .88rem; line-height: 1.7; }
.register-switch { margin: 1.25rem 0 0; color: var(--c-ink-3); text-align: center; }
.register-switch a { font-weight: 700; }
.register-closed { display: grid; justify-items: center; gap: .75rem; text-align: center; }
.register-closed > i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: 1.8rem; }
@media (max-width: 575.98px) {
    .stepper li { font-size: .74rem; }
    .wizard-actions { position: sticky; bottom: calc(.5rem + var(--safe-bottom)); z-index: 3; margin-inline: -.35rem; padding: .55rem; border-radius: 18px; background: var(--c-bar); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -14px rgba(23, 33, 47, .45); }
}

/* QR scanner */
.scan-frame { position: relative; display: grid; place-items: center; min-height: 260px; overflow: hidden; border-radius: var(--radius-lg); background: #0e1c26; box-shadow: var(--shadow); }
.scan-frame > i { position: absolute; font-size: 3.5rem; color: rgba(255, 255, 255, .22); }
.scan-frame > #my-qr-reader { position: relative; width: 100%; }
.scan-frame video { display: block; width: 100% !important; }

/* photos of a patient's documents, taken or picked on the phone, as many as needed (js/pages/upload.js) */
.doc-patient { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .7rem .8rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); text-align: start; }
.doc-patient > i { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 1.25rem; }
.doc-patient > span { flex: 1; min-width: 0; }
.doc-patient b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-patient small { display: block; color: var(--c-ink-3); font-size: .8rem; }
.doc-patient .btn { flex: none; min-height: 40px; }
/* the client's file and last visit in the dashboard, side by side (one alone fills the row) */
.doc-links { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; margin: -.4rem 0 1rem; text-align: start; }
.doc-links .tile { gap: .6rem; padding: .6rem .7rem; font-size: .9rem; }
.doc-links .tile i { width: 36px; height: 36px; font-size: 1rem; }

.doc-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.doc-pick__btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 116px; margin: 0; padding: .9rem .6rem;
    border: 1.5px dashed var(--c-field-line); border-radius: var(--radius-lg); background: var(--c-surface); color: var(--c-ink); font-weight: 600; text-align: center; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.doc-pick__btn > i { font-size: 1.9rem; line-height: 1; color: var(--c-primary); }
.doc-pick__btn small { display: block; color: var(--c-ink-3); font-size: .76rem; font-weight: 400; }
.doc-pick__btn:active { transform: scale(.97); }
.doc-pick__btn:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); }
.doc-pick__btn--camera { border: 0; background: linear-gradient(150deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 72%, #fff)); color: #fff; box-shadow: 0 12px 24px -14px var(--c-primary); }
.doc-pick__btn--camera > i, .doc-pick__btn--camera small { color: #fff; }
.doc-upload.is-sending .doc-pick { opacity: .5; pointer-events: none; }

.doc-empty { margin: 1rem 0 0; color: var(--c-ink-3); font-size: .875rem; text-align: center; }

.doc-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.doc-shots:empty { display: none; }
.doc-shot { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius); background: var(--c-line); }
.doc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-shot img:not([src]) { visibility: hidden; }
.doc-shot__no { position: absolute; top: .35rem; inset-inline-start: .35rem; min-width: 1.5rem; padding: 0 .35rem; border-radius: 999px; background: rgba(14, 28, 38, .72); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.5rem; text-align: center; }
/* a 40px target for a finger around a smaller circle */
.doc-shot__remove { position: absolute; top: 0; inset-inline-end: 0; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #fff; }
.doc-shot__remove i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(14, 28, 38, .72); font-size: .8rem; }
.doc-shot__state { position: absolute; inset: 0; display: none; place-items: center; color: #fff; font-size: 1.5rem; }
.doc-shot__state > * { display: none; }
.doc-shot:is([data-state="shrinking"], [data-state="sending"]) .doc-shot__state { display: grid; background: rgba(14, 28, 38, .45); }
.doc-shot:is([data-state="shrinking"], [data-state="sending"]) .spinner-border { display: block; }
.doc-shot[data-state="sent"] { border-color: var(--c-success); }
.doc-shot[data-state="sent"] .doc-shot__state { display: block; }
.doc-shot[data-state="sent"] .bi-check-lg { display: grid; place-items: center; position: absolute; bottom: .35rem; inset-inline-end: .35rem; width: 26px; height: 26px; border-radius: 50%; background: var(--c-success); font-size: 1rem; }
.doc-shot[data-state="failed"] { border-color: var(--c-danger); }
.doc-shot[data-state="failed"] .doc-shot__state { display: grid; background: color-mix(in srgb, var(--c-danger) 35%, transparent); }
.doc-shot[data-state="failed"] .bi-exclamation-lg { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-danger); font-size: 1.2rem; }

.doc-done { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.doc-done > i { font-size: 2.75rem; line-height: 1; color: var(--c-success); }
.doc-done > p { margin: 0 0 .4rem; font-weight: 600; }

/* "send" within reach of the thumb, under the photos however many there are */
.doc-bar { position: sticky; bottom: calc(.75rem + var(--safe-bottom)); z-index: 3; display: grid; gap: .5rem; margin-top: 1.25rem; }
.doc-bar .progress { height: .45rem; }
.doc-bar .progress-bar { width: 0; transition: width .2s; }
@media (max-width: 575.98px) {
    .doc-bar { margin-inline: -.35rem; padding: .55rem; border-radius: 18px; background: var(--c-bar); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -14px rgba(23, 33, 47, .45); }
}

/* the scanner says what it found under the camera: checking, the patient, or why not */
.scan-hint { margin: .75rem 0 0; color: var(--c-ink-3); font-size: .875rem; text-align: center; }
.scan-status { display: flex; align-items: center; gap: .55rem; margin-top: .75rem; padding: .7rem .85rem; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); font-weight: 500; text-align: start; }
.scan-status > :is(.spinner-border, i) { display: none; flex: none; }
.scan-status[data-state="checking"] > .spinner-border { display: inline-block; color: var(--c-primary); }
.scan-status[data-state="found"] { border-color: var(--c-success); background: var(--c-success-soft); }
.scan-status[data-state="found"] > .bi-check-circle-fill { display: inline; color: var(--c-success); font-size: 1.2rem; }
.scan-status[data-state="refused"] { border-color: var(--c-danger); background: var(--c-danger-soft); }
.scan-status[data-state="refused"] > .bi-x-circle-fill { display: inline; color: var(--c-danger); font-size: 1.2rem; }

/* the photos page's two tabs: new photos, earlier documents */
.doc-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; margin-bottom: 1rem; padding: .25rem; border-radius: 14px; background: var(--c-line); }
.doc-tabs button { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 42px; padding: .4rem .5rem; border: 0; border-radius: 11px; background: none; color: var(--c-ink-2); font-weight: 600; font-size: .9rem; white-space: nowrap; transition: background .15s, color .15s; }
.doc-tabs button.is-active { background: var(--c-surface); color: var(--c-primary); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.doc-tabs button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.doc-tabs__count { min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary); font-size: .75rem; line-height: 1.45rem; }
/* a narrow phone: the words and the count, no icons; the narrowest: the patient's name before the button's words */
@media (max-width: 420px) { .doc-tabs button > i { display: none; } }
@media (max-width: 360px) {
    .doc-tabs button { white-space: normal; font-size: .82rem; line-height: 1.25; }
    .doc-patient__other { display: none; }
    .doc-patient .btn { min-width: 40px; }
}

/* earlier documents: by day, newest first, a page at a time */
.doc-gallery { text-align: start; }
.doc-gallery__day { position: sticky; top: 0; z-index: 2; margin: 0; padding: .55rem 0 .45rem; background: var(--c-canvas); color: var(--c-ink-2); font-size: .85rem; font-weight: 600; }
.doc-gallery__day:not(:first-child) { margin-top: .5rem; }
.doc-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.doc-gallery__item { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); background: var(--c-line); }
.doc-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.doc-gallery__item:active img { transform: scale(.96); }
.doc-gallery__missing { display: none; }
.doc-gallery__item.is-missing img { visibility: hidden; }
.doc-gallery__item.is-missing .doc-gallery__missing { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .3rem; color: var(--c-ink-3); font-size: .75rem; }
.doc-gallery__missing i { font-size: 1.5rem; }
.doc-gallery__item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.doc-gallery__more { display: grid; place-items: center; min-height: 3.5rem; margin-top: .75rem; }
.doc-gallery > .alert { margin: .75rem 0 0; }
@media (max-width: 575.98px) {
    /* the card's own background, behind the day that stays on top */
    .doc-gallery__day { margin-inline: -1.35rem; padding-inline: 1.35rem; background: var(--c-surface); }
}

/* one document on the whole screen */
.doc-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #0b141b; color: #fff; overflow: hidden; }
.doc-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.doc-viewer::backdrop { background: #0b141b; }
.doc-viewer:not([open]) { display: none; }
.doc-viewer__bar { display: flex; align-items: center; gap: .5rem; padding: calc(.5rem + var(--safe-top)) .5rem .5rem; }
.doc-viewer__info { flex: 1; min-width: 0; text-align: center; }
.doc-viewer__info b { display: block; font-size: .95rem; }
.doc-viewer__info small { display: block; color: rgba(255, 255, 255, .65); font-size: .78rem; }
.doc-viewer__button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.1rem; }
.doc-viewer__stage { position: relative; display: grid; place-items: center; overflow: hidden; padding-bottom: var(--safe-bottom); touch-action: pan-y pinch-zoom; }
.doc-viewer__stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.doc-viewer__stage .spinner-border { position: absolute; }
.doc-viewer__missing { display: grid; justify-items: center; gap: .5rem; margin: 0; padding: 1rem; color: rgba(255, 255, 255, .75); text-align: center; }
.doc-viewer__missing i { font-size: 2.5rem; }
.doc-viewer.is-zoomed .doc-viewer__stage { display: block; overflow: auto; touch-action: auto; }
.doc-viewer.is-zoomed .doc-viewer__stage img { max-width: none; max-height: none; cursor: zoom-out; }
/* dark buttons: seen on a white page as on a dark x-ray */
.doc-viewer__nav { position: absolute; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(11, 20, 27, .62); color: #fff; font-size: 1.2rem; }
.doc-viewer__nav--prev { right: .5rem; }
.doc-viewer__nav--next { left: .5rem; }
.doc-viewer__nav:disabled, .doc-viewer.is-zoomed .doc-viewer__nav { display: none; }

/* the admin panel's error log */
.error-log-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
/* the error, its words and its place in one cell: they wrap, the table stays within the page */
.error-log-cell { min-width: 280px; max-width: 520px; white-space: normal; }
.error-log-cell small, .error-log-cell code { text-align: left; overflow-wrap: anywhere; }
.error-log-cell code { margin-top: .2rem; font-size: .75rem; }
.error-message { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radius); background: var(--c-danger-soft); color: var(--c-danger-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.error-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .85rem 1.25rem; margin: 0; }
.error-facts dt { color: var(--c-ink-3); font-size: .78rem; font-weight: 600; }
.error-facts dd { margin: 0; overflow-wrap: anywhere; }
.error-trace { margin: 0; max-height: 480px; overflow: auto; font-size: .78rem; line-height: 1.7; white-space: pre; text-align: left; }

/* ------------------------------------------------------------ page loader */
/* While the next page is on its way (js/loader.js, partials/page-loader.blade.php): a thin bar at
   the top and the logo in a turning ring, breathing, with a light sweeping over it (.is-active
   .is-waiting). The next page opens with it on screen (html.page-arriving) and lets it fade
   (.is-leaving) to reveal itself. On every surface: site, dashboard, admin, sign-in. */
.page-loader {
    --loader-accent: var(--c-primary, var(--loader-brand));
    --loader-accent-2: var(--c-primary-2, var(--loader-accent));
    position: fixed; inset: 0; z-index: 2000; visibility: hidden; pointer-events: none;
}
.page-loader.is-active { visibility: visible; }
.page-loader.is-waiting { pointer-events: auto; cursor: progress; }
.page-loader__bar {
    position: absolute; inset: 0 0 auto; height: 3px; border-radius: 0 0 3px 3px; opacity: 0;
    background: linear-gradient(270deg, var(--loader-accent) 0%, var(--loader-accent-2) 100%);
    box-shadow: 0 0 12px color-mix(in srgb, var(--loader-accent) 70%, transparent);
    transform: scaleX(0); transform-origin: right;
}
html:not([dir="rtl"]) .page-loader__bar { transform-origin: left; }
/* runs fast at first, then ever slower: it never reaches the end before the page comes */
.page-loader.is-active .page-loader__bar { opacity: 1; transform: scaleX(.92); transition: transform 10s cubic-bezier(.05, .75, .1, 1), opacity .15s; }
.page-loader__veil {
    position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
    background: color-mix(in srgb, var(--c-canvas, #f3f6fa) 58%, transparent);
    -webkit-backdrop-filter: blur(7px) saturate(1.15); backdrop-filter: blur(7px) saturate(1.15);
    transition: opacity .16s ease;
}
.page-loader.is-waiting .page-loader__veil { opacity: 1; }
.page-loader__mark { position: relative; display: grid; place-items: center; width: 112px; height: 112px; transform: scale(.88); transition: transform .45s cubic-bezier(.2, .9, .3, 1.25); }
.page-loader.is-waiting .page-loader__mark { transform: none; }
/* a soft glow of the brand colour behind the logo */
.page-loader__mark::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: var(--loader-accent); filter: blur(22px); opacity: .3; animation: loader-glow 1.8s ease-in-out infinite; }
.page-loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: loader-spin 1.1s linear infinite; }
.page-loader__ring circle { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.page-loader__track { stroke: color-mix(in srgb, var(--loader-accent) 14%, transparent); }
.page-loader__arc { stroke-dasharray: 78 211; animation: loader-arc 1.8s ease-in-out infinite; }
.page-loader__logo { position: relative; display: block; width: 58px; height: 58px; animation: loader-breathe 1.8s ease-in-out infinite; }
.page-loader__logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--loader-accent) 45%, transparent)); }
/* light sweeping across the logo, only where the logo is drawn */
.page-loader__logo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
    -webkit-mask: var(--loader-logo) center / contain no-repeat; mask: var(--loader-logo) center / contain no-repeat;
    animation: loader-shine 1.8s ease-in-out infinite;
}
[data-bs-theme="dark"] .page-loader__veil { background: color-mix(in srgb, var(--c-canvas, #0f161f) 60%, transparent); }
/* on the page just opened: there from the first paint, then fading to reveal the page */
.page-arriving .page-loader { visibility: visible; pointer-events: auto; animation: loader-give-up .01s 4s forwards; }
.page-arriving .page-loader__veil { opacity: 1; transition: none; }
.page-arriving .page-loader__mark { transform: none; transition: none; }
.page-arriving .page-loader__bar { opacity: 1; transform: none; transition: none; }
.page-loader.is-leaving { pointer-events: none; }
.page-loader.is-leaving .page-loader__veil { opacity: 0; transition: opacity .4s ease; }
.page-loader.is-leaving .page-loader__mark { opacity: 0; transform: scale(1.12); transition: opacity .3s ease, transform .4s ease; }
.page-loader.is-leaving .page-loader__bar { opacity: 0; transition: opacity .3s ease .1s; }
/* whatever happens to the script, the page is never left covered */
@keyframes loader-give-up { to { visibility: hidden; } }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-arc { 0%, 100% { stroke-dasharray: 40 249; } 50% { stroke-dasharray: 150 139; } }
@keyframes loader-breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.03); } }
@keyframes loader-shine { 0%, 15% { background-position: 160% 0; } 75%, 100% { background-position: -60% 0; } }
@keyframes loader-glow { 0%, 100% { opacity: .18; transform: scale(.85); } 50% { opacity: .4; transform: scale(1.08); } }

/* ------------------------------------------------------------------- pwa */
.net-banner { position: fixed; inset: auto 0 calc(var(--tabbar-h) + var(--safe-bottom) + 10px) 0; z-index: 1090; display: flex; justify-content: center; pointer-events: none; }
@media (min-width: 992px) { .net-banner { inset-block-end: 16px; } }
.net-banner > div { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; background: #1f2a37; color: #fff; font-size: .85rem; box-shadow: var(--shadow-lg); }
.install-card { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; margin-bottom: 1rem; border: 1px solid rgba(var(--c-primary-rgb), .3); border-radius: var(--radius); background: var(--c-primary-tint); }
.install-card img { width: 44px; height: 44px; flex: none; }
.install-card p { margin: 0; font-size: .85rem; color: var(--c-ink-2); }
.install-card strong { display: block; color: var(--c-ink); }
.install-card__close { flex: none; margin-inline-start: -.35rem; }
.install-card > .flex-grow-1 { min-width: 0; }
/* A phone: the words take the row and the install button goes under them, the close button in the
   corner; side by side they are wider than a 320–360px screen. */
@media (max-width: 575.98px) {
    .install-card { position: relative; flex-wrap: wrap; padding-inline-end: 2.6rem; }
    .install-card > .flex-grow-1 { flex: 1 1 calc(100% - 44px - .85rem); }
    .install-card [data-install-app] { margin-inline-start: calc(44px + .85rem); }
    .install-card__close { position: absolute; top: .3rem; inset-inline-end: .3rem; margin: 0; }
}

/* ------------------------------------------------- welcome after registering */
.welcome-hero { position: relative; display: flex; align-items: center; gap: 1.1rem; overflow: hidden; padding: 1.6rem; border-radius: 22px; color: #fff; background: radial-gradient(600px 220px at 85% -40%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(120deg, var(--c-primary-deep), var(--c-primary) 55%, var(--c-primary-2)); box-shadow: 0 18px 40px -18px rgba(var(--c-primary-rgb), .65); }
.welcome-hero h1 { margin: 0 0 .3rem; color: #fff; font-size: 1.45rem; }
.welcome-hero p { margin: 0; opacity: .92; }
.welcome-hero .welcome-hero__login { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .88rem; opacity: 1; }
.welcome-hero__icon { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 20px; background: rgba(255, 255, 255, .18); font-size: 2rem; animation: pop-in .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } }
.credentials { display: grid; gap: .55rem; margin: 0; }
.credentials > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; min-width: 0; padding: .7rem .85rem; border-radius: 14px; background: var(--c-surface-2); }
.credentials dt { color: var(--c-ink-3); font-size: .8rem; font-weight: 500; }
.credentials dd { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: .6rem; min-width: 0; margin: 0; }
.credentials dd b { min-width: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.credentials dd .btn { flex: none; }
.credentials dd .num { font-size: 1.3rem; letter-spacing: .06em; }
.list-steps { display: grid; gap: .5rem; }
.list-steps__item { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border: 1px solid var(--c-line); border-radius: 14px; color: var(--c-ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
.list-steps__item:hover { border-color: color-mix(in srgb, var(--tone, var(--c-primary)) 45%, transparent); color: var(--c-ink); transform: translateX(-2px); box-shadow: 0 10px 22px -16px var(--tone, var(--c-primary)); }
.list-steps__item > i:first-child { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--tone-soft, var(--c-primary-soft)); color: var(--tone, var(--c-primary)); font-size: 1.1rem; }
.list-steps__item b { display: block; font-weight: 600; }
.list-steps__item small { display: block; color: var(--c-ink-3); font-size: .78rem; }
.list-steps__go { margin-inline-start: auto; color: var(--c-ink-3); }
@media (max-width: 575.98px) {
    .welcome-hero { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
    .welcome-hero h1 { font-size: 1.2rem; }
    .credentials > div { flex-direction: column; align-items: stretch; }
    .credentials dd { justify-content: space-between; }
    .credentials dd b[dir="ltr"] { font-size: .88rem; }
}

/* ------------------------------------------------- the clinic's fields page */
.fields-intro { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; overflow: hidden; padding: 1.3rem 1.4rem; border-radius: 20px; color: #fff; background: radial-gradient(500px 200px at 90% -40%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(120deg, var(--c-primary-deep), var(--c-primary) 60%, var(--c-primary-2)); box-shadow: 0 16px 36px -18px rgba(var(--c-primary-rgb), .6); }
.fields-intro h2 { margin: 0 0 .25rem; color: #fff; font-size: 1.2rem; }
.fields-intro p { max-width: 58ch; margin: 0; opacity: .9; font-size: .9rem; }
.fields-intro__steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.fields-intro__steps li { display: flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .15); font-size: .84rem; font-weight: 600; }
.fields-intro__steps li + li::before { content: "\F12C"; margin-inline-end: .1rem; font-family: "bootstrap-icons"; font-weight: 400; opacity: .7; }
.kind-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.kind-tab { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .75rem .9rem; border: 1.5px solid var(--c-line); border-radius: 16px; background: var(--c-surface); color: var(--c-ink); transition: border-color .15s, box-shadow .15s; }
.kind-tab > i { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--tone-soft); color: var(--tone); font-size: 1.1rem; }
.kind-tab b { display: block; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kind-tab small { color: var(--c-ink-3); font-size: .76rem; }
.kind-tab:hover { border-color: color-mix(in srgb, var(--tone) 45%, transparent); color: var(--c-ink); }
.kind-tab.is-active { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 6%, var(--c-surface)); box-shadow: 0 10px 22px -16px var(--tone); }
.kind-tab.is-active > i { background: var(--tone); color: #fff; }
.field-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.field-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); }
.field-item__order { display: grid; gap: 2px; }
.field-item__order .btn { width: 28px; min-height: 22px; padding: 0; border-radius: 7px; font-size: .75rem; }
.field-item__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--c-primary-soft); color: var(--c-primary); }
.field-item__main { flex: 1; min-width: 0; }
.field-item__main b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.field-item__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin-top: .15rem; font-size: .76rem; }
.field-item__actions { display: flex; gap: .3rem; }
.field-item__actions .btn { width: 34px; min-height: 34px; padding: 0; }
.print-toggle { display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .7rem; border: 1px dashed var(--c-field-line); border-radius: 999px; background: transparent; color: var(--c-ink-3); font-size: .78rem; font-weight: 600; white-space: nowrap; transition: all .15s; }
.print-toggle.is-on { border: 1px solid transparent; background: var(--c-success-soft); color: var(--c-success-ink); }
.print-toggle:hover { border-color: var(--c-primary); }
.print-toggle:disabled { opacity: .7; cursor: progress; }
/* the order, saved in place (js/pages/fields.js): a handle to drag, the row moved shown for a moment */
.field-item { position: relative; transition: box-shadow .18s, border-color .18s, background .18s, transform .18s; }
.field-item__drag { flex: none; display: grid; place-items: center; width: 22px; height: 38px; margin-inline-end: -.3rem; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--c-ink-3); font-size: 1.05rem; cursor: grab; touch-action: none; }
.field-item__drag:hover, .field-item__drag:focus-visible { background: var(--c-line-soft); color: var(--c-primary); }
.field-list.is-sorting { cursor: grabbing; user-select: none; }
.field-list.is-sorting .field-item:not(.is-dragging) { opacity: .75; }
.field-item.is-dragging { z-index: 2; border-color: rgba(var(--c-primary-rgb), .5); box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .35); transform: scale(1.015); }
.field-item.is-dragging .field-item__drag { cursor: grabbing; color: var(--c-primary); }
.field-item.is-moved { animation: field-moved .9s ease; }
@keyframes field-moved { 0% { background: var(--c-primary-soft); border-color: rgba(var(--c-primary-rgb), .5); } 100% { background: var(--c-surface); } }
.field-list.is-saving { cursor: progress; }
.fields-empty { display: grid; justify-items: center; gap: .35rem; padding: 1.75rem 1rem; border: 1.5px dashed var(--c-line); border-radius: 16px; text-align: center; }
.fields-empty > i { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .3rem; border-radius: 18px; background: var(--tone-soft, var(--c-primary-soft)); color: var(--tone, var(--c-primary)); font-size: 1.6rem; }
.fields-empty h3 { margin: 0; font-size: 1rem; }
.fields-empty p { margin: 0 0 .5rem; color: var(--c-ink-3); font-size: .86rem; }
.fields-empty--side { height: 100%; align-content: center; background: var(--c-surface); }
.new-patient-extra { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--c-line); }
.library-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; border: 1px solid var(--c-line); border-radius: 13px; }
.library-item b { display: block; font-weight: 600; }
.library-item small { display: block; color: var(--c-ink-3); font-size: .76rem; }

/* where the fields show: drawings of the screen and the paper */
.where-preview { position: sticky; top: calc(var(--topbar-h) + 1rem); padding: 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: repeating-linear-gradient(45deg, var(--c-surface-2) 0 10px, var(--c-canvas) 10px 20px); }
.where-preview__bar { margin-bottom: .7rem; color: var(--c-ink-2); font-size: .85rem; font-weight: 700; }
.where-preview__arrow { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: .5rem 0; color: var(--c-ink-3); font-size: .78rem; font-weight: 600; }
.mock { overflow: hidden; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); box-shadow: var(--shadow-sm); }
.mock__title { display: flex; align-items: center; gap: .45rem; padding: .55rem .8rem; border-bottom: 1px solid var(--c-line-soft); color: var(--c-ink-2); font-size: .8rem; font-weight: 700; }
.mock__title i { color: var(--c-primary); }
.mock__body { display: grid; gap: .5rem; padding: .75rem .8rem; }
.mock__body--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mock-field span { display: block; margin-bottom: .2rem; overflow: hidden; color: var(--c-ink-2); font-size: .74rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mock-field i { display: block; height: 26px; border: 1.5px solid rgba(var(--c-primary-rgb), .55); border-radius: 8px; background: var(--c-primary-tint); }
.mock-field--fixed i { border-color: var(--c-line); background: var(--c-surface-2); }
.mock-field--fixed span { color: var(--c-ink-3); }
.mock-field--ghost { opacity: .45; }
.mock-field--ghost i { border-style: dashed; }
.mock--paper { background: #fff; color: #1b2430; }
.mock-paper__head { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; border-bottom: 2px solid var(--c-primary); font-size: .8rem; }
.mock-paper__head span { color: var(--c-primary); font-family: Georgia, serif; font-style: italic; font-weight: 700; direction: ltr; }
.mock-paper__body { display: grid; grid-template-columns: minmax(0, 1fr) 38%; gap: .7rem; padding: .7rem .8rem; }
.mock-paper__fields { order: 2; display: grid; align-content: start; gap: .3rem; padding-inline-start: .6rem; border-inline-start: 1px solid #dfe4ea; }
.mock-paper__fields small { display: block; color: #6b7686; font-size: .66rem; }
.mock-paper__fields b { display: block; font-size: .74rem; }
.mock-paper__lines { display: grid; align-content: start; gap: .45rem; }
.mock-paper__lines i { display: block; height: 6px; border-radius: 3px; background: #e6eaf0; }
.mock-paper__lines i:nth-child(2) { width: 80%; }
.mock-paper__lines i:nth-child(3) { width: 60%; }
@media (max-width: 767.98px) {
    .kind-tabs { gap: .45rem; }
    .kind-tab { flex-direction: column; gap: .35rem; padding: .65rem .35rem; text-align: center; }
    .kind-tab > i { width: 36px; height: 36px; }
    .kind-tab b { font-size: .78rem; line-height: 1.4; white-space: normal; }
    .fields-intro__steps li { font-size: .78rem; }
    .card-header:has(.card-actions) { flex-wrap: wrap; }
    .card-header .card-actions .btn { white-space: nowrap; }
    .field-item { flex-wrap: wrap; }
    .field-item__main { flex-basis: calc(100% - 150px); }
    .field-item__print { order: 5; }
    .where-preview { position: static; }
}

/* -------------------------------------------------------------- settings */
/* A choice shown as a card (radio inside .choice): menu position, menu style, prescription template. */
.choice-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--choice-min, 200px)), 1fr)); }
.choice { position: relative; display: block; margin: 0; cursor: pointer; }
.choice > input { position: absolute; opacity: 0; pointer-events: none; }
.choice__body { display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: .8rem; border: 1.5px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.choice__body b { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.choice__body small { color: var(--c-ink-3); font-size: .8rem; line-height: 1.5; }
.choice:hover .choice__body { border-color: rgba(var(--c-primary-rgb), .4); }
.choice > input:checked + .choice__body { border-color: var(--c-primary); background: var(--c-primary-tint); box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .14); }
.choice > input:checked + .choice__body b::after { content: "\F26A"; margin-inline-start: auto; font-family: "bootstrap-icons"; font-weight: 400; color: var(--c-primary); }
.choice > input:focus-visible + .choice__body { box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); }

.choice__body--compact { gap: .1rem; padding: .6rem .75rem; }
.choice__body--compact b { font-size: .92rem; }
.choice__body--compact small { font-size: .75rem; }

/* little drawings of a screen layout / a menu style / a sheet */
.sketch { position: relative; display: grid; height: 96px; overflow: hidden; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-canvas); }
.sketch i { display: block; font-style: normal; }
.sketch--side { grid-template-columns: 1fr 26%; }
.sketch--side .sketch__menu { grid-column: 2; grid-row: 1 / 3; }
.sketch--side .sketch__page { grid-column: 1; grid-row: 1 / 3; }
.sketch--top { grid-template-rows: 22% 1fr; }
.sketch__menu { display: flex; flex-direction: column; gap: 5px; padding: 8px 7px; background: var(--sk-menu, var(--c-surface)); border-inline-start: 1px solid var(--c-line); }
.sketch--top .sketch__menu { flex-direction: row; align-items: center; padding: 0 8px; border: 0; border-bottom: 1px solid var(--c-line); }
.sketch__menu i { height: 6px; border-radius: 3px; background: var(--sk-item, var(--c-line)); }
.sketch--top .sketch__menu i { width: 16%; }
.sketch__menu i:first-child { background: var(--c-primary); }
.sketch__page { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6px; padding: 9px; }
.sketch__page i { height: 22px; border-radius: 5px; background: var(--c-surface); border: 1px solid var(--c-line); }
.sketch__page i:first-child { grid-column: 1 / -1; height: 14px; background: var(--grad-primary); border: 0; }
.sketch--dark { --sk-menu: linear-gradient(180deg, #102038, #0a1729); --sk-item: rgba(255, 255, 255, .18); }
.sketch--brand { --sk-menu: linear-gradient(165deg, var(--c-primary-deep), var(--c-primary) 60%, var(--c-primary-2)); --sk-item: rgba(255, 255, 255, .35); }
.sketch--brand .sketch__menu i:first-child { background: #fff; }

/* a prescription template in miniature; --sk is the prescription colour being chosen */
.rx-sketch { position: relative; display: flex; flex-direction: column; gap: 6px; height: 128px; padding: 12px 14px 10px; overflow: hidden; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; }
.rx-sketch i { display: block; height: 5px; border-radius: 3px; background: #e5e9ef; font-style: normal; }
.rx-sketch .h { position: relative; height: 18px; border-radius: 0; background: transparent; border-bottom: 2px solid var(--sk); }
.rx-sketch .h::before { content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 44%; height: 6px; border-radius: 3px; background: var(--sk); }
.rx-sketch .h::after { content: ""; position: absolute; inset-inline-end: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: #e5e9ef; }
.rx-sketch .p { height: 11px; border: 1px solid color-mix(in srgb, var(--sk) 30%, #fff); background: color-mix(in srgb, var(--sk) 12%, #fff); }
.rx-sketch .l { width: 72%; }
.rx-sketch .s { width: 46%; }
.rx-sketch .f { height: 9px; margin-top: auto; border-radius: 0; background: transparent; border-top: 1.5px solid var(--sk); }
.rx-sketch--classic::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sk); }
.rx-sketch--modern .h { height: 30px; margin: -12px -14px 0; border: 0; border-radius: 0 0 12px 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--sk) 78%, #000), var(--sk)); }
.rx-sketch--modern .h::before { top: 11px; inset-inline-start: 14px; background: rgba(255, 255, 255, .85); }
.rx-sketch--modern .h::after { top: 8px; inset-inline-end: 14px; background: #fff; }
.rx-sketch--modern .p { background: #fff; border-radius: 4px; }
.rx-sketch--modern .f { height: 16px; margin: auto -14px -10px; border-top-width: 2px; background: color-mix(in srgb, var(--sk) 10%, #fff); }
.rx-sketch--minimal .h { border-bottom: 1px solid #1b2430; }
.rx-sketch--minimal .h::before { background: #1b2430; }
.rx-sketch--minimal .p { border: 0; border-bottom: 1px solid #d5dbe3; border-radius: 0; background: transparent; }
.rx-sketch--minimal .f { border-top: 1px solid #1b2430; }

.swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.swatch { position: relative; margin: 0; cursor: pointer; }
.swatch > input { position: absolute; opacity: 0; pointer-events: none; }
.swatch > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .15s, box-shadow .15s; }
.swatch:hover > span { transform: scale(1.06); }
.swatch > input:checked + span { box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--swatch); }
.swatch > input:checked + span::after { content: "\F26E"; font-family: "bootstrap-icons"; color: #fff; font-size: 1.25rem; }
.swatch > input:focus-visible + span { box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--c-ink); }
.swatch--labelled { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 64px; font-size: .78rem; color: var(--c-ink-2); }
.swatch--labelled > span { width: 48px; height: 48px; background: linear-gradient(135deg, var(--swatch), var(--swatch-2, var(--swatch))); }
.swatch--custom > span { background: conic-gradient(#e11d48, #f59e0b, #22c55e, #06b6d4, #4f46e5, #c026d3, #e11d48); }
.swatch--custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.switch-list { display: grid; gap: .1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.switch-list .form-check { display: flex; align-items: center; gap: .6rem; min-height: 40px; margin: 0; padding: .25rem .5rem; border-radius: 9px; }
.switch-list .form-check:hover { background: var(--c-line-soft); }
.switch-list .form-check-input { float: none; margin: 0; flex: none; }
.switch-list .form-check-label { cursor: pointer; }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }

.range-field { display: flex; align-items: center; gap: .75rem; }
.range-field .form-range { flex: 1; }
.range-field output { min-width: 3.4rem; padding: .2rem .5rem; border-radius: 8px; background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 600; font-size: .85rem; text-align: center; }
.form-range::-webkit-slider-thumb { background: var(--c-primary); }
.form-range::-moz-range-thumb { background: var(--c-primary); }

.logo-pick { display: flex; align-items: center; gap: 1rem; }
.logo-pick__image { display: grid; place-items: center; width: 84px; height: 84px; flex: none; padding: 8px; border: 1px dashed var(--c-field-line); border-radius: var(--radius); background: #fff; }
.logo-pick__image img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* the prescription preview: a sticky column beside the form */
.rx-preview { position: sticky; top: calc(var(--topbar-h) + 1rem); }
.rx-preview__frame { display: block; width: 100%; height: 640px; border: 0; border-radius: var(--radius); background: repeating-linear-gradient(45deg, var(--c-line-soft) 0 10px, var(--c-surface-2) 10px 20px); transition: height .2s; }
.rx-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; color: var(--c-ink-3); font-size: .8rem; }
.rx-preview__bar .badge { font-size: .72rem; }
.hint-card { display: flex; gap: .75rem; padding: .85rem 1rem; border-radius: var(--radius); background: var(--c-info-soft); color: var(--c-info-ink); font-size: .85rem; }
.hint-card i { font-size: 1.1rem; line-height: 1.4; }
.hint-card code { direction: ltr; unicode-bidi: isolate; padding: .05rem .35rem; border-radius: 5px; background: rgba(255, 255, 255, .55); color: inherit; font-size: .8rem; }
[data-bs-theme="dark"] .hint-card code { background: rgba(0, 0, 0, .25); }

/* printing a sheet without leaving the screen (js/app.js, [data-print-sheet]) */
.print-frame { position: fixed; inset-inline-start: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ admin panel */
/* The admin panel has no phone tab bar: its content needs no room for one. */
@media (max-width: 991.98px) { .app--admin .app-content { padding-bottom: calc(1.5rem + var(--safe-bottom)); } }
@media (max-width: 575.98px) { .app--admin .form-actions--sticky { bottom: calc(.6rem + var(--safe-bottom)); } }
.user-chip__initial { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 700; }
.avatar-sm { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: var(--c-line-soft); }
.cell-person { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cell-person b { display: block; font-weight: 600; }
.cell-person small { display: block; color: var(--c-ink-3); }
/* a row of a short list inside a card: picture or icon, two lines, something at the end */
.list-row { display: flex; align-items: center; gap: .8rem; padding: .75rem 1.15rem; border-bottom: 1px solid var(--c-line-soft); color: var(--c-ink); transition: background-color .15s; }
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--c-primary-tint); color: var(--c-ink); }
.list-row__main { flex: 1; min-width: 0; }
.list-row__main b { display: block; overflow: hidden; font-weight: 600; line-height: 1.9; text-overflow: ellipsis; white-space: nowrap; }
.list-row__main small { display: block; color: var(--c-ink-3); font-size: .8rem; }
/* HTML typed by an admin: read left to right, in the normal font (monospace fonts break Arabic letters apart) */
.code-field { direction: ltr; text-align: left; font-size: .88rem; line-height: 1.7; }
.preview-frame { display: block; width: 100%; height: 480px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.option-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .5rem; align-items: center; }
.option-row + .option-row { margin-top: .5rem; }
@media (max-width: 575.98px) { .option-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .option-row > :nth-child(3) { grid-column: 1 / 3; } }
.perm-group { height: 100%; }
.perm-group .card-header .form-check { margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.perm-group .card-header .form-check-input { margin: 0; float: none; }

/* ----------------------------------------------------------------- phones */
/* The dashboard on a phone, an app in the hand: a floating tab bar, compact lists, menus that rise
   from the bottom, fields that never make iOS zoom, the examination's actions under the thumb. */
@media (max-width: 991.98px) {
    /* the tab bar floats above the page's edge */
    .app-tabbar {
        inset: auto .75rem calc(.6rem + var(--safe-bottom)) .75rem; height: var(--tabbar-h); padding: 0 .25rem;
        border: 1px solid var(--c-line); border-radius: 24px;
        background: color-mix(in srgb, var(--c-surface) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
        box-shadow: 0 14px 34px -14px rgba(23, 33, 47, .35);
    }
    [data-bs-theme="dark"] .app-tabbar { box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7); }
    .app-tabbar a, .app-tabbar button { position: relative; isolation: isolate; gap: 3px; font-size: .66rem; transition: color .15s; }
    .app-tabbar a.is-active::before { content: ""; position: absolute; top: 7px; z-index: -1; width: 50px; height: 30px; border-radius: 12px; background: var(--c-primary-soft); }
    .app-tabbar a.is-active { font-weight: 700; }
    .app-tabbar__fab span { width: 56px; height: 56px; margin-top: -30px; box-shadow: 0 0 0 5px var(--c-canvas), var(--shadow-primary); }
    .app-content { padding-bottom: calc(var(--tabbar-h) + 2rem + var(--safe-bottom)); }
    .net-banner { inset-block-end: calc(var(--tabbar-h) + var(--safe-bottom) + 1.4rem); }

    /* the drawer: rounded on its inner edge, the account on top */
    .app-sidebar { border-start-end-radius: 24px; border-end-end-radius: 24px; border-inline-end: 0; overflow: hidden; }
    .app-sidebar .app-brand { padding-top: var(--safe-top); height: calc(var(--topbar-h) + var(--safe-top)); }
}
@media (min-width: 992px) {
    .app-sidebar__me, .app-brand__close { display: none !important; }
}
.app-brand__close { margin-inline-start: auto; }
.app-sidebar__me { display: flex; align-items: center; gap: .75rem; margin: .1rem .75rem .35rem; padding: .7rem .8rem; border-radius: 16px; background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-primary); }
.app-sidebar__me > span { min-width: 0; }
.app-sidebar__me:hover { color: #fff; filter: brightness(1.05); }
.app-sidebar__me img { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); }
.app-sidebar__me b { display: block; overflow: hidden; font-weight: 700; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar__me small { display: flex; align-items: center; gap: .3rem; opacity: .9; font-size: .76rem; }
[data-menu="brand"] .app-sidebar__me { background: rgba(255, 255, 255, .14); box-shadow: none; }

/* 16px fields: an iPhone zooms into anything smaller, upright or turned on its side (wider than
   768px then: a touch screen of any width gets them) */
@media (max-width: 767.98px), (pointer: coarse) {
    .form-control, .form-select, .select2-container--bootstrap-5 .select2-selection, .dataTables_wrapper .dataTables_filter input, .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { font-size: 16px; }
}

@media (max-width: 767.98px) {
    .form-control, .form-select, .select2-container--bootstrap-5 .select2-selection { min-height: 46px; border-radius: 12px; }
    .card { --bs-card-border-radius: 18px; --bs-card-inner-border-radius: 17px; --bs-card-spacer-x: 1rem; --bs-card-spacer-y: 1rem; }

    /* a row's menu rises from the bottom, with large choices */
    .row-actions .dropdown-menu.show {
        position: fixed !important; inset: auto .6rem calc(.6rem + var(--safe-bottom)) .6rem !important; z-index: 1065;
        margin: 0 !important; padding: .5rem; transform: none !important; border: 0; border-radius: 22px;
        box-shadow: 0 -14px 44px rgba(15, 22, 31, .3); animation: sheet-rise .24s cubic-bezier(.2, .9, .3, 1);
    }
    .row-actions .dropdown-menu .dropdown-item { min-height: 52px; margin: 0; padding: .6rem 1rem; border-radius: 14px; font-size: 1rem; font-weight: 500; }
    .row-actions .dropdown-menu .dropdown-item i { font-size: 1.2rem; }
    .row-actions:has(> .dropdown-menu.show)::before { content: ""; position: fixed; inset: 0; z-index: 1064; background: rgba(15, 22, 31, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fade-in .2s ease; }
}
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } }
/* the row menu's sheet keeps transform: none (it overrides Popper's): it rises with translate */
@keyframes sheet-rise { from { translate: 0 28px; opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

@media (max-width: 575.98px) {
    /* room for the page's name: tighter gaps around it (the buttons keep a fingertip's 40px) */
    .app-topbar { gap: .2rem; padding-inline: .5rem; }
    .app-topbar__title { flex: 0 1 auto; min-width: 0; margin-inline-start: .15rem; font-size: 1rem; font-weight: 700; }
    .branch-switch { max-width: 30vw; height: 40px; padding: 0 .55rem; border: 0; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary-ink); font-size: .8rem; font-weight: 600; }
    .branch-switch:hover, .branch-switch[aria-expanded="true"] { box-shadow: none; }
    .user-chip { padding: 0 .2rem; }
    .user-chip img { width: 32px; height: 32px; }

    /* the page's shortcuts: a row of pills */
    .page-header { margin-bottom: .9rem; }
    .page-header__actions { gap: .45rem; }
    .page-header__actions .btn { min-height: 40px; padding-inline: 1rem; border-radius: 999px; font-size: .86rem; }

    /* sheets: a handle on top */
    .modal-dialog:not(.modal-fullscreen) .modal-content { border-radius: 24px 24px 0 0; }
    .modal-dialog:not(.modal-fullscreen) .modal-content::before { content: ""; display: block; width: 42px; height: 5px; margin: .6rem auto -.35rem; border-radius: 99px; background: var(--c-line); }
    .dropdown-item { min-height: 44px; }

    /* home: a compact welcome, shortcuts as app icons */
    .hero { padding: 1.1rem 1.15rem; border-radius: 22px; }
    .hero h1 { font-size: 1.12rem; }
    .hero p { display: -webkit-box; overflow: hidden; font-size: .82rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .hero__logo { width: 50px; height: 50px; padding: 6px; border-radius: 15px; }
    .install-card { padding: .75rem .85rem; }
    .install-card p { font-size: .78rem; }
    .tile--app { flex-direction: column; justify-content: flex-start; gap: .45rem; height: auto; padding: .3rem 0; border: 0; background: none; box-shadow: none; font-size: .74rem; line-height: 1.35; text-align: center; }
    .tile--app:hover { transform: none; box-shadow: none; }
    .tile--app i, .tile--app:hover i { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(145deg, var(--tone, var(--c-primary)), color-mix(in srgb, var(--tone, var(--c-primary)) 68%, #fff)); color: #fff; font-size: 1.4rem; box-shadow: 0 10px 22px -12px var(--tone, var(--c-primary)); }
    .tile--app small { display: none; }

    /* examination: the follow-up date, printing and the next visit stay under the thumb */
    .exam-bar__actions {
        position: fixed; inset: auto 0 0 0; z-index: 1030; display: flex; flex-wrap: nowrap; gap: .5rem; width: auto; margin: 0;
        padding: .65rem .75rem calc(.65rem + var(--safe-bottom));
        border-top: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-surface) 88%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 -12px 30px -18px rgba(23, 33, 47, .4);
    }
    .exam-bar__actions .form-control { flex: 1 1 auto; width: auto; min-width: 0; }
    .exam-bar__actions .btn { flex: none; min-height: 46px; border-radius: 12px; }
    /* the narrowest phones: slimmer padding, so the follow-up date is read whole */
    @media (max-width: 359.98px) { .exam-bar__actions .form-control { padding-inline: .5rem; } .exam-bar__actions .btn { --bs-btn-padding-x: .7rem; } }
    .app--focus .app-content { padding-bottom: calc(5.5rem + var(--safe-bottom)); }
    .exam-bar { padding: .8rem .9rem; border-radius: 18px; }
}

/* ----------------------------------------------------------------- print */
@media print {
    .app-sidebar, .app-header, .app-tabbar, .page-header__actions, .net-banner, .install-card, #toast-container, .print-frame, .page-loader { display: none !important; }
    .app-content { padding: 0; max-width: none; }
    body, .app { background: #fff; }
    .card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ------------------------------------------------------------------ one's own account
   (dashboard/team/parts/account): the password dialog and, for the clinic owner, the reset */
.password-dots { display: flex; align-items: center; background: var(--c-surface-2); color: var(--c-ink-3); letter-spacing: .2em; user-select: none; }
.modal-intro { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.1rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--c-primary-tint, var(--c-primary-soft)); }
.modal-intro p { margin: 0; color: var(--c-ink-2); font-size: .87rem; line-height: 1.7; }
.modal-intro__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-surface); box-shadow: var(--shadow-sm); color: var(--c-primary); font-size: 1.2rem; }

.danger-zone { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: 1.25rem 1.35rem; border-radius: calc(var(--radius) + 4px); background: linear-gradient(135deg, var(--c-danger-soft), var(--c-surface) 70%); box-shadow: inset 0 0 0 1px rgba(220, 59, 59, .28), var(--shadow); }
.danger-zone__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--c-surface); box-shadow: 0 8px 20px -10px rgba(220, 59, 59, .55); color: var(--c-danger); font-size: 1.45rem; }
.danger-zone__text { flex: 1; min-width: 0; }
.danger-zone h2 { margin: 0 0 .25rem; color: var(--c-danger-ink); font-size: 1.05rem; font-weight: 800; }
.danger-zone p { margin: 0; color: var(--c-ink-2); font-size: .87rem; line-height: 1.75; }
.danger-zone .btn { flex: none; }
.danger-zone__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 767.98px) { .danger-zone { flex-direction: column; align-items: stretch; text-align: start; } .danger-zone__icon { width: 46px; height: 46px; } .danger-zone__actions .btn { flex: 1 1 auto; } }

.reset-warning { display: flex; gap: .75rem; margin-bottom: 1.25rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--c-danger-soft); color: var(--c-danger-ink); font-size: .87rem; line-height: 1.7; }
.reset-warning > i { font-size: 1.2rem; line-height: 1.4; }
.reset-step { display: flex; align-items: center; gap: .55rem; margin: 0 0 .75rem; font-size: .95rem; font-weight: 800; }
.reset-step span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-ink-2); color: var(--c-surface); font-size: .8rem; }
.reset-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
@media (max-width: 575.98px) { .reset-options { grid-template-columns: minmax(0, 1fr); } }
.reset-option { position: relative; display: flex; align-items: flex-start; gap: .7rem; margin: 0; padding: .85rem .9rem; border-radius: var(--radius); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); cursor: pointer; transition: box-shadow .18s, background .18s; }
.reset-option:hover { box-shadow: inset 0 0 0 1px rgba(220, 59, 59, .45); }
.reset-option .form-check-input { flex: none; margin: .2rem 0 0; }
.reset-option .form-check-input:checked { border-color: var(--c-danger); background-color: var(--c-danger); }
.reset-option .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(220, 59, 59, .2); }
.reset-option__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c-surface-2); color: var(--c-ink-2); font-size: 1rem; }
.reset-option__body { flex: 1; min-width: 0; }
.reset-option__body b { display: flex; align-items: center; gap: .4rem; font-size: .92rem; }
.reset-option__body small { display: block; margin-top: .2rem; color: var(--c-ink-3); font-size: .78rem; line-height: 1.6; }
.reset-option__count { flex: none; min-width: 2.2rem; padding: .15rem .5rem; border-radius: 999px; background: var(--c-surface-2); color: var(--c-ink-2); font-size: .78rem; font-weight: 700; text-align: center; }
.reset-option__along { display: none; padding: .05rem .45rem; border-radius: 999px; background: var(--c-danger-soft); color: var(--c-danger-ink); font-size: .68rem; font-style: normal; font-weight: 700; }
.reset-option.is-chosen { background: var(--c-danger-soft); box-shadow: inset 0 0 0 1.5px rgba(220, 59, 59, .55); }
.reset-option.is-chosen .reset-option__icon { background: var(--c-surface); color: var(--c-danger); }
.reset-option.is-chosen .reset-option__count { background: var(--c-danger); color: #fff; }
.reset-option.is-along { cursor: default; }
.reset-option.is-along .reset-option__along { display: inline-block; }
.reset-option.is-along .form-check-input:disabled { opacity: .75; }
.reset-keep { display: flex; gap: .55rem; margin: 1rem 0 1.4rem; padding: .75rem .9rem; border-radius: var(--radius); background: var(--c-success-soft); color: var(--c-ink-2); font-size: .83rem; line-height: 1.7; }
.reset-keep > i { color: var(--c-success, #1f9d63); font-size: 1.05rem; }
.reset-summary { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: 1rem; padding: .7rem .9rem; border-radius: var(--radius); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px rgba(220, 59, 59, .3); color: var(--c-danger-ink); font-size: .86rem; font-weight: 600; line-height: 1.7; }
.reset-summary > i { margin-top: .15rem; }

/* ------------------------------------------------------------------ the subscription
   (App\Services\Shared\SubscriptionPricing): the owner's plan on the invoices page, the cost of a
   further branch or team member, the admins' price example */
.cost-note { display: flex; gap: .85rem; padding: .95rem 1.05rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--c-accent-soft), var(--c-surface) 85%); box-shadow: inset 0 0 0 1px rgba(232, 150, 30, .3); }
.cost-note[hidden] { display: none; }
.cost-note__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--c-surface); box-shadow: var(--shadow-sm); color: var(--c-accent-ink); font-size: 1.2rem; }
.cost-note b { font-weight: 700; }
.cost-note > div > b:first-child { display: block; margin-bottom: .2rem; font-size: .95rem; }
.cost-note p { margin: 0; color: var(--c-ink-2); font-size: .85rem; line-height: 1.75; }
.cost-note__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .82rem; font-weight: 600; }
.cost-note--free { background: linear-gradient(135deg, var(--c-success-soft), var(--c-surface) 85%); box-shadow: inset 0 0 0 1px rgba(21, 160, 90, .28); }
.cost-note--free .cost-note__icon { color: var(--c-success); }
.cost-note__body { flex: 1; min-width: 0; }
/* the price before and after: two figures side by side */
.cost-note__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: .7rem 0 .55rem; }
.cost-note__figures > div { display: grid; gap: .1rem; padding: .6rem .75rem; border-radius: 12px; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.cost-note__figures > div.is-total { box-shadow: inset 0 0 0 1.5px rgba(var(--c-primary-rgb), .45); }
.cost-note__figures small { color: var(--c-ink-3); font-size: .74rem; }
.cost-note__figures b { margin: 0 !important; font-size: 1.15rem; font-weight: 800; color: var(--c-ink); }
.cost-note__figures .is-total b { color: var(--c-primary-ink); }
.cost-note__when { display: flex; align-items: center; gap: .4rem; }
.cost-note__when i { color: var(--c-ink-3); }

.plan-card { padding: 1.25rem; border-radius: calc(var(--radius) + 6px); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line), var(--shadow); }
.plan-card__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.plan-card__icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--grad-primary); box-shadow: var(--shadow-primary); color: #fff; font-size: 1.35rem; }
.plan-card h2 { margin: 0 0 .15rem; font-size: 1.15rem; font-weight: 800; }
.plan-card__head p { margin: 0; color: var(--c-ink-3); font-size: .87rem; }
.plan-card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; }
@media (max-width: 991.98px) { .plan-card__body { grid-template-columns: minmax(0, 1fr); } }
.plan-lines { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.plan-lines th, .plan-lines td { padding: .55rem .2rem; border-bottom: 1px dashed var(--c-line); font-weight: 500; }
.plan-lines td { text-align: end; white-space: nowrap; }
.plan-lines th small { color: var(--c-ink-3); }
.plan-lines tfoot th, .plan-lines tfoot td { border-bottom: 0; padding-top: .75rem; font-size: 1.02rem; font-weight: 800; color: var(--c-primary-ink); }
.plan-card__fine { margin: .6rem 0 0; color: var(--c-ink-3); font-size: .8rem; line-height: 1.7; }
.plan-cycle__price { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.plan-cycle__price small { font-size: .78rem; font-weight: 500; }
.plan-cycle__save { padding: .1rem .5rem; border-radius: 999px; background: var(--c-success-soft); color: var(--c-success-ink); font-size: .72rem; font-weight: 700; }
.plan-cycle__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .9rem; }
.plan-cycle__actions small { color: var(--c-ink-3); }

.price-example { margin: 0; }
.price-example > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--c-line); font-size: .9rem; }
.price-example dt { font-weight: 500; color: var(--c-ink-2); }
.price-example dd { margin: 0; font-weight: 600; white-space: nowrap; }
.price-example__total dt, .price-example__total dd { font-weight: 800; color: var(--c-primary-ink); }
.price-example__saving { border-bottom: 0 !important; }
.price-example__saving dd { color: var(--c-success-ink); }

/* ------------------------------------------------------------------ the clinic's unpaid invoice
   (x-ui.billing-notice): issued and due soon, due today, past due, new visits stopped */
.billing-notice { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-radius: calc(var(--radius) + 4px); background: linear-gradient(135deg, var(--c-info-soft), var(--c-surface) 80%); box-shadow: inset 0 0 0 1px rgba(var(--c-primary-rgb), .25), var(--shadow-sm); }
.billing-notice__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--c-surface); box-shadow: var(--shadow-sm); color: var(--c-primary); font-size: 1.35rem; }
.billing-notice__body { flex: 1; min-width: 0; }
.billing-notice__body > b { display: block; margin-bottom: .15rem; font-size: 1rem; font-weight: 800; }
.billing-notice__body p { margin: 0; color: var(--c-ink-2); font-size: .87rem; line-height: 1.75; }
.billing-notice__actions { flex: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.billing-notice__body p.billing-notice__all { margin-top: .2rem; color: var(--c-ink); }

/* the invoices page: several left to pay, together */
.dues-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .75rem; }
.dues-summary__pay { display: flex; align-items: center; justify-content: center; gap: .65rem; padding-inline: 1.4rem; border-radius: var(--radius-lg); font-weight: 700; text-align: start; }
.dues-summary__pay > i { font-size: 1.6rem; }
.dues-summary .stat__value { overflow-wrap: normal; white-space: nowrap; }
.dues-summary__pay small { display: block; font-size: .75rem; font-weight: 400; opacity: .9; }
@media (max-width: 991.98px) {
    .dues-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dues-summary > .stat:first-child, .dues-summary__pay { grid-column: 1 / -1; }
    .dues-summary__pay { min-height: 52px; }
}
.billing-notice--due, .billing-notice--overdue { background: linear-gradient(135deg, var(--c-accent-soft), var(--c-surface) 80%); box-shadow: inset 0 0 0 1px rgba(232, 150, 30, .4), var(--shadow-sm); }
.billing-notice--due .billing-notice__icon { color: var(--c-accent-ink); animation: notice-ring 1.6s ease-in-out 2; }
.billing-notice--overdue .billing-notice__icon { color: var(--c-accent-ink); }
.billing-notice--grace, .billing-notice--blocked { background: linear-gradient(135deg, var(--c-danger-soft), var(--c-surface) 80%); box-shadow: inset 0 0 0 1px rgba(220, 59, 59, .35), var(--shadow-sm); }
.billing-notice--grace .billing-notice__icon, .billing-notice--blocked .billing-notice__icon { color: var(--c-danger); }
.billing-notice--blocked .billing-notice__body > b { color: var(--c-danger-ink); }
@keyframes notice-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }
@media (max-width: 767.98px) {
    .billing-notice { flex-wrap: wrap; }
    .billing-notice__actions { width: 100%; }
    .billing-notice__actions .btn { flex: 1; }
}
.invoice-row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.pay-frame { position: relative; min-height: 560px; }
.pay-frame iframe { display: block; width: 100%; height: 70vh; min-height: 560px; border: 0; border-radius: 0 0 var(--radius) var(--radius); }
.pay-frame__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; color: var(--c-ink-3); }

/* ------------------------------------------------------------------ admin invoices
   (admin/invoices): the filters, what is ticked to settle together, a clinic's unpaid invoices */
.invoice-filters__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .8rem; align-items: end; }
.invoice-filters__actions { display: flex; gap: .5rem; }
.invoice-filters__chip { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .35rem .8rem; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary-ink); font-size: .85rem; }
.invoice-filters__chip a { color: inherit; }
/* one clinic's invoices: its chip, and deleting them all (the start-over dialog) */
.invoice-filters__clinic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .9rem; }
.invoice-filters__clinic .invoice-filters__chip { margin-top: 0; }
.cell-select { width: 36px; }
.settle-bar { position: sticky; bottom: calc(var(--tabbar-h, 0px) + 1rem + var(--safe-bottom, 0px)); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--c-bar, var(--c-surface)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(21, 160, 90, .35), var(--shadow); animation: sheet-up .22s ease; }
.settle-bar[hidden] { display: none; }
.settle-bar__actions { display: flex; gap: .5rem; }
.settle-summary { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; padding: .85rem 1rem; border-radius: var(--radius); background: var(--c-success-soft); color: var(--c-ink-2); }
.settle-summary > i { color: var(--c-success); font-size: 1.4rem; }
.open-invoices { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.open-invoices li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .7rem; border-radius: 10px; background: var(--c-surface-2); font-size: .9rem; }
.open-invoices li.is-current { box-shadow: inset 0 0 0 1.5px rgba(var(--c-primary-rgb), .45); background: var(--c-primary-soft); }
.open-invoices__total { display: flex; justify-content: space-between; margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--c-line); font-size: .95rem; }
/* a date or an amount in a table cell stays on one line */
.table td .num { white-space: nowrap; }

/* ------------------------------------------------------------------ notifications
   Settings → الإشعارات (dashboard/settings/notifications): a switch per choice, the tones with a
   button to listen, what this device allows; and the notice any page shows when this browser stands
   in the way of a sound or a notification (js/app.js). */
.notify-rows { display: grid; gap: .35rem; }
.notify-row { display: flex; align-items: center; gap: .8rem; margin: 0; padding: .7rem .8rem; border-radius: 12px; cursor: pointer; transition: background-color .15s; }
.notify-row:hover { background: var(--c-line-soft); }
.notify-row__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 1.1rem; }
.notify-row__text { flex: 1; min-width: 0; }
.notify-row__text b { display: block; color: var(--c-ink); font-weight: 600; }
.notify-row__text small { display: block; color: var(--c-ink-3); font-size: .82rem; line-height: 1.6; }
.notify-row .form-check-input { float: none; margin: 0; }
.notify-sound { transition: opacity .15s; }
.notify-sound.is-off { opacity: .45; }
.tone-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .5rem; }
.tone { position: relative; display: flex; }
.tone__choice { flex: 1; display: flex; align-items: center; gap: .5rem; min-height: 46px; margin: 0; padding-block: .5rem; padding-inline: .8rem 3.2rem; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); color: var(--c-ink-2); cursor: pointer; transition: border-color .15s, background-color .15s; }
.tone__choice i { color: var(--c-ink-3); }
.btn-check:checked + .tone__choice { border-color: rgba(var(--c-primary-rgb), .55); background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 600; }
.btn-check:checked + .tone__choice i { color: var(--c-primary); }
.btn-check:focus-visible + .tone__choice { box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); }
.tone__play { position: absolute; top: 50%; inset-inline-end: .35rem; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--c-primary); font-size: 1.25rem; transform: translateY(-50%); }
.tone__play:hover, .tone__play:focus-visible { background: rgba(var(--c-primary-rgb), .12); }
.notify-permission { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; padding: .8rem .9rem; border-radius: 12px; background: var(--c-accent-soft); color: var(--c-ink-2); font-size: .85rem; line-height: 1.7; }
.notify-permission[hidden] { display: none; }
.notify-permission > i { flex: none; color: var(--c-accent-ink); font-size: 1.25rem; }
.notify-permission > div { flex: 1; min-width: 0; }
.notify-permission b { display: block; color: var(--c-ink); }
.notify-permission[data-state="granted"] { background: var(--c-success-soft); }
.notify-permission[data-state="granted"] > i { color: var(--c-success-ink); }
.notify-permission .btn { flex: none; }
.device-status { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.device-status li { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: 10px; background: var(--c-surface-2); color: var(--c-ink-2); font-size: .88rem; }
.device-status li i { color: var(--c-ink-3); font-size: 1.1rem; }
.device-status li[data-state="ok"] i { color: var(--c-success-ink); }
.device-status li[data-state="warn"] i { color: var(--c-accent-ink); }
/* the far corner from the menu and the messages (top, on the menu's side) */
.notify-notice { position: fixed; inset-inline-end: 1.25rem; bottom: calc(1.25rem + var(--safe-bottom, 0px)); z-index: 1045; display: flex; align-items: center; gap: .75rem; width: min(460px, calc(100vw - 2.5rem)); padding: .8rem .9rem; border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--c-line); animation: sheet-up .22s ease; }
.notify-notice[hidden] { display: none; }
.notify-notice__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: 1.2rem; }
.notify-notice__text { flex: 1; min-width: 0; color: var(--c-ink-2); font-size: .83rem; line-height: 1.6; }
.notify-notice__text b { display: block; color: var(--c-ink); font-size: .92rem; }
.notify-notice__actions { display: flex; flex: none; align-items: center; gap: .35rem; }
@media (max-width: 991.98px) { .notify-notice { inset-inline: .75rem; width: auto; bottom: calc(var(--tabbar-h, 0px) + 1.4rem + var(--safe-bottom, 0px)); } }
@media (max-width: 575.98px) {
    .notify-notice { flex-wrap: wrap; }
    .notify-notice__text { flex-basis: calc(100% - 52px); }
    .notify-notice__actions { width: 100%; }
    .notify-notice__actions .btn-primary { flex: 1; }
    .notify-permission { flex-wrap: wrap; }
    .notify-permission .btn { width: 100%; }
}

/* ------------------------------------------------------------------ touch targets
   A fingertip needs about 40px. On a phone, or any touch screen (a tablet, a phone on its side), the
   small controls grow to it; a link or a label sitting in a line of text reaches further than it shows
   instead (padding given back by a negative margin, so nothing around it moves). A desktop with a
   mouse keeps its sizes. */
@media (max-width: 575.98px), (pointer: coarse) {
    .btn-sm { min-height: 40px; }
    .field-item__drag { width: 40px; height: 40px; }
    .field-item__order .btn, .field-item__actions .btn, .turn-control .btn, .rx-line .btn { width: 40px; min-height: 40px; }
    .print-toggle { height: 40px; }
    .form-range { height: 2.5rem; }
    .section-title__link, .cost-note__link, .auth__forgot, .card .num.d-block[href], label.form-check, .perm-group .card-header .form-check, .form-switch > .form-check-label, .switch-list .form-check-label { padding-block: .6rem; margin-block: -.6rem; }
    .cell-select__hit { display: grid; place-items: center; width: 40px; height: 40px; margin: -.8rem; cursor: pointer; }
}