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

    --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: #f3f6f9;
    --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);

    --sidebar-w: 264px;
    --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-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);

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

*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
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; }

.app-sidebar {
    --bs-offcanvas-width: min(86vw, var(--sidebar-w));
    --bs-offcanvas-bg: var(--c-surface);
    background: var(--c-surface);
    border-inline-end: 1px solid var(--c-line);
    display: flex;
    flex-direction: column;
}
@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; height: var(--topbar-h); padding: 0 1.1rem; flex: none; }
/* 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-nav { flex: 1; overflow-y: auto; padding: .35rem .7rem 1rem; scrollbar-width: thin; }
.app-nav__label { margin: 1rem .6rem .35rem; font-size: .72rem; font-weight: 600; color: var(--c-ink-3); }
.app-nav__link {
    display: flex; align-items: center; gap: .7rem; min-height: 42px; padding: .45rem .7rem; border-radius: var(--radius-sm);
    color: var(--c-ink-2); font-weight: 500; transition: background-color .15s, color .15s;
}
.app-nav__link i { font-size: 1.1rem; width: 1.3rem; text-align: center; color: var(--c-ink-3); transition: color .15s; }
.app-nav__link:hover { background: var(--c-line-soft); color: var(--c-ink); }
button.app-nav__link { width: 100%; border: 0; background: transparent; text-align: start; }
.app-nav__link.is-active { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: 600; }
.app-nav__link.is-active i { color: var(--c-primary); }
.app-nav__badge { margin-inline-start: auto; }
.app-sidebar__foot { flex: none; padding: .8rem 1.1rem calc(.8rem + var(--safe-bottom)); border-top: 1px solid var(--c-line-soft); font-size: .75rem; color: var(--c-ink-3); }

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

.app-topbar {
    position: sticky; top: 0; z-index: 1020; 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);
}
/* 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: 10px;
    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-line-soft); color: var(--c-ink); }
.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: 10px; background: var(--c-surface); color: var(--c-ink); font-weight: 500; }
.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); }
.user-chip b { font-weight: 600; font-size: .875rem; line-height: 2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-content { flex: 1; padding: 1.25rem 1.25rem calc(1.5rem + var(--safe-bottom)); width: 100%; max-width: 1440px; margin: 0 auto; }
.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(--c-primary); color: #fff; box-shadow: 0 8px 20px rgba(var(--c-primary-rgb), .4); }
.app-tabbar__fab span i { font-size: 1.5rem; color: #fff !important; }
@media (min-width: 992px) { .app-tabbar { display: none; } }
.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__title { margin: 0; font-size: 1.35rem; font-weight: 700; }
.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; }
@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); --bs-card-inner-border-radius: calc(var(--radius) - 1px); --bs-card-cap-bg: transparent; --bs-card-cap-padding-y: .9rem; --bs-card-spacer-x: 1.15rem; --bs-card-spacer-y: 1.15rem; box-shadow: var(--shadow-sm); }
.card-header { display: flex; align-items: center; gap: .75rem; border-bottom-color: var(--c-line-soft); }
.card-title { margin: 0; font-size: 1rem; font-weight: 600; }
.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 { color: var(--c-primary); }

.stat { 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); box-shadow: var(--shadow-sm); height: 100%; }
.stat__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 1.3rem; }
.stat--accent .stat__icon { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.stat--success .stat__icon { background: var(--c-success-soft); color: var(--c-success); }
.stat--danger .stat__icon { background: var(--c-danger-soft); color: var(--c-danger); }
.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; }
    .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.5rem; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(120deg, #0091c2 0%, #00a8b8 100%); box-shadow: 0 10px 30px rgba(var(--c-primary-rgb), .25); }
.hero::after { content: ""; position: absolute; inset-inline-start: -60px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.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, .16); padding: 8px; }

.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); color: var(--c-ink); font-weight: 600; transition: border-color .15s, box-shadow .15s, transform .15s; height: 100%; }
.tile:hover { border-color: rgba(var(--c-primary-rgb), .5); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--c-ink); }
.tile i { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 1.15rem; }
.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: var(--c-primary); --bs-btn-hover-bg: var(--c-primary-strong); --bs-btn-hover-border-color: var(--c-primary-strong); --bs-btn-active-bg: #006585; --bs-btn-active-border-color: #006585; --bs-btn-disabled-bg: var(--c-primary); --bs-btn-disabled-border-color: var(--c-primary); }
.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-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; } }
.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) + 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; }
}

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

/* 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); }
.turn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .4rem; border-radius: 10px; background: var(--c-primary); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.turn--done { background: var(--c-success-soft); color: var(--c-success-ink); }
.turn--waiting { background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: 1rem; }
.turn--out { background: var(--c-danger-soft); color: var(--c-danger-ink); }
.turn.is-moved { animation: moved 1.2s ease; }
@keyframes moved { 0%, 60% { background: var(--c-accent); transform: scale(1.12); } }
.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; }

/* ----------------------------------------------------------------- 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: .7rem .9rem; background: var(--c-surface-2); color: var(--c-ink-3); 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; }
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 stacked cards on phones */
@media (max-width: 767.98px) {
    .table-stack > thead { display: none; }
    .table-stack, .table-stack > tbody, .table-stack > tbody > tr, .table-stack > tbody > tr > td { display: block; width: 100% !important; }
    .table-stack > tbody { padding: .6rem; }
    .dataTables_wrapper .dataTables_length { display: none; }
    .table-stack > tbody > tr { position: relative; margin-bottom: .6rem; padding: .35rem .2rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); box-shadow: var(--shadow-sm); }
    .table-stack > tbody > tr:last-child { margin-bottom: 0; }
    .table-stack > tbody > tr > td { box-sizing: border-box !important; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .8rem; border: 0; text-align: end; min-height: 36px; overflow-wrap: anywhere; }
    .table-stack > tbody > tr > td::before { content: attr(data-label); flex: none; color: var(--c-ink-3); font-size: .78rem; font-weight: 500; text-align: start; }
    .table-stack > tbody > tr > td[data-label=""]::before, .table-stack > tbody > tr > td:not([data-label])::before { display: none; }
    .table-stack > tbody > tr > td.dataTables_empty { justify-content: center; }
    .table-stack > tbody > tr > td.cell-actions { justify-content: flex-end; padding-top: .55rem; margin-top: .25rem; border-top: 1px solid var(--c-line-soft); }
    .table-stack > tbody > tr > td.cell-title { font-weight: 600; font-size: 1rem; }
}

/* ---------------------------------------------------- dropdowns and modals */
.dropdown-menu { --bs-dropdown-bg: var(--c-surface); --bs-dropdown-border-color: var(--c-line); --bs-dropdown-border-radius: var(--radius); --bs-dropdown-padding-y: .4rem; --bs-dropdown-item-padding-x: .85rem; --bs-dropdown-item-padding-y: .5rem; --bs-dropdown-color: var(--c-ink); --bs-dropdown-link-color: var(--c-ink); --bs-dropdown-link-hover-color: var(--c-ink); --bs-dropdown-link-hover-bg: var(--c-line-soft); --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-min-width: 12rem; box-shadow: var(--shadow-lg); font-size: .9rem; }
.dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: 8px; margin: 0 .35rem; width: auto; }
.dropdown-item i { color: var(--c-ink-3); font-size: 1rem; }
.dropdown-item.text-danger i { color: inherit; }
.dropdown-header { font-size: .72rem; color: var(--c-ink-3); }

.modal { --bs-modal-bg: var(--c-surface); --bs-modal-border-radius: var(--radius-lg); --bs-modal-border-width: 0; --bs-modal-header-padding: 1rem 1.25rem; --bs-modal-padding: 1.25rem; --bs-modal-footer-gap: .5rem; --bs-modal-header-border-color: var(--c-line-soft); --bs-modal-footer-border-color: var(--c-line-soft); --bs-modal-box-shadow: var(--shadow-lg); }
.modal-title { font-size: 1.05rem; }
.modal-footer { flex-wrap: nowrap; }
.modal-footer > .btn { flex: 1; }
@media (min-width: 576px) { .modal-footer > .btn { flex: none; min-width: 110px; } }
@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: var(--c-primary); font-weight: 600; }
.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 */
#toast-container { inset-block-start: calc(var(--topbar-h) + var(--safe-top) + 10px) !important; }
#toast-container > div { opacity: 1; width: min(92vw, 360px); padding: .85rem 1rem .85rem 3rem; border-radius: var(--radius); box-shadow: var(--shadow-lg) !important; font-family: inherit; background-position: calc(100% - 14px) center !important; }
[dir="rtl"] #toast-container > div { padding: .85rem 3rem .85rem 1rem; background-position: calc(100% - 14px) center !important; }
#toast-container .toast-success { background-color: #128a4d; }
#toast-container .toast-error { background-color: #c93333; }
#toast-container .toast-warning { background-color: #c97f06; }
#toast-container .toast-info { background-color: var(--c-primary-strong); }
#toast-container .toast-title { font-weight: 600; }
@media (max-width: 575.98px) { #toast-container { inset-inline: 0 !important; display: grid; justify-items: center; } #toast-container > div { margin-inline: auto; } }

.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); }
.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; }
.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); }
/* 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-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; }
}
@media (max-width: 575.98px) {
    .exam-bar__actions { width: 100%; margin: 0; }
    .exam-bar__actions .form-control { flex: 1 1 100%; width: auto; }
    .exam-bar__actions .btn { flex: 1; }
}
.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, #00779f 0%, #0091c2 55%, #00a8b8 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)); }
.auth__card { width: 100%; max-width: 400px; }
.auth__main > .theme-toggle { position: absolute; top: calc(.75rem + var(--safe-top)); inset-inline-end: .75rem; }
.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; }

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

/* document photos picked on the phone: a chosen photo fills its tile */
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.doc-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    aspect-ratio: 1; margin: 0; padding: .75rem; overflow: hidden; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--c-field-line); border-radius: var(--radius); background: var(--c-surface) center / cover no-repeat;
    color: var(--c-ink-2); font-weight: 500; transition: border-color .15s, box-shadow .15s;
}
.doc-tile input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.doc-tile > i { font-size: 1.9rem; line-height: 1; color: var(--c-primary); }
.doc-tile > .bi-check-circle-fill { display: none; }
.doc-tile:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); }
.doc-tile.has-file { justify-content: flex-end; border: 2px solid var(--c-success); color: #fff; }
.doc-tile.has-file::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(14, 28, 38, 0) 35%, rgba(14, 28, 38, .78)); }
.doc-tile.has-file > span { position: relative; }
.doc-tile.has-file > .bi-camera { display: none; }
.doc-tile.has-file > .bi-check-circle-fill { display: block; position: absolute; top: .5rem; inset-inline-end: .5rem; border-radius: 50%; background: #fff; font-size: 1.5rem; color: var(--c-success); box-shadow: 0 1px 4px rgba(14, 28, 38, .35); }

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

/* ------------------------------------------------------------ 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)); } }
.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; }
.dropdown-header span { font-size: .78rem; color: var(--c-ink-3); }
.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; }

/* ----------------------------------------------------------------- print */
@media print {
    .app-sidebar, .app-topbar, .app-tabbar, .page-header__actions, .net-banner, .install-card, #toast-container { display: none !important; }
    .app-content { padding: 0; max-width: none; }
    body { 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; } }