/* ==========================================================================
   SmartPharmacy — Theme Settings
   Accent-color presets, configurable typography/radius/density, and the
   slide-in settings panel. All applied via data-* attributes on <html> and
   CSS variable overrides, so they layer cleanly on top of design-system.css
   without touching any view markup. Persistence lives in theme-settings.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accent color presets — set on <html data-ds-accent="…">.
      Each overrides the same --ds-primary* tokens design-system.css consumes,
      so buttons, links, focus rings, active nav, badges, spinners all follow.
   -------------------------------------------------------------------------- */
:root[data-ds-accent="teal"] {              /* default — SmartPharmacy teal */
    --ds-primary: #16A3A0;
    --ds-primary-hover: #128C8A;
    --ds-primary-active: #0E7573;
    --ds-secondary: #4FC3C0;
}

:root[data-ds-accent="purple"] {
    --ds-primary: #6D5CE0;
    --ds-primary-hover: #5C4CD1;
    --ds-primary-active: #4E3FBD;
    --ds-secondary: #4FC3C0;
}

:root[data-ds-accent="blue"] {
    --ds-primary: #2563EB;
    --ds-primary-hover: #1d4ed8;
    --ds-primary-active: #1e40af;
    --ds-secondary: #60A5FA;
}

:root[data-ds-accent="emerald"] {
    --ds-primary: #059669;
    --ds-primary-hover: #047857;
    --ds-primary-active: #065f46;
    --ds-secondary: #34D399;
}

:root[data-ds-accent="orange"] {
    --ds-primary: #EA580C;
    --ds-primary-hover: #c2410c;
    --ds-primary-active: #9a3412;
    --ds-secondary: #FB923C;
}

:root[data-ds-accent="rose"] {
    --ds-primary: #E11D48;
    --ds-primary-hover: #be123c;
    --ds-primary-active: #9f1239;
    --ds-secondary: #FB7185;
}

:root[data-ds-accent="graphite"] {
    --ds-primary: #2e2e2e;
    --ds-primary-hover: #1f1f1f;
    --ds-primary-active: #141414;
    --ds-secondary: #6b6b6b;
}

/* Custom accent — --ds-primary(-hover|-active) are set inline on <html> by
   theme-settings.js from the user's chosen color; this rule only supplies
   the derived --ds-secondary fallback. */
:root[data-ds-accent="custom"] {
    --ds-secondary: var(--ds-primary);
}

/* Keep the derived hover/active tints in sync with whichever accent is active. */
:root[data-ds-accent] {
    --ds-hover: color-mix(in srgb, var(--ds-primary) 8%, transparent);
    --ds-active: color-mix(in srgb, var(--ds-primary) 15%, transparent);
}

/* --------------------------------------------------------------------------
   2. Configurable font family — set on <html data-ds-font="…">.
      Loaded on demand by theme-settings.js (adds the Google Fonts <link>).
   -------------------------------------------------------------------------- */
:root[data-ds-font="inter"]      { --ds-font: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; }
:root[data-ds-font="poppins"]    { --ds-font: 'Poppins', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; }
:root[data-ds-font="roboto"]     { --ds-font: 'Roboto', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; }
:root[data-ds-font="noto"]       { --ds-font: 'Noto Sans', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* "jakarta" is the built-in default already defined in design-system.css. */

/* --------------------------------------------------------------------------
   3. Configurable base font size — set on <html data-ds-size="…">.
      design-system.css pins html { font-size:14px }; these override it and
      every rem-based size in the app scales accordingly.
   -------------------------------------------------------------------------- */
:root[data-ds-size="small"]   { font-size: 13px; }
:root[data-ds-size="default"] { font-size: 14px; }
:root[data-ds-size="large"]   { font-size: 15px; }

/* --------------------------------------------------------------------------
   4. Configurable corner radius — set on <html data-ds-radius="…">.
   -------------------------------------------------------------------------- */
:root[data-ds-radius="sharp"]   { --radius-sm: 3px;  --radius-md: 5px;  --radius-lg: 8px; }
:root[data-ds-radius="default"] { --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 16px; }
/* --radius-md capped at 12px (not 16px) — border-radius on a standard 36px
   control gets clamped by the browser to 50% of height (18px) regardless of
   the requested value, so anything close to 18px here reads visually
   identical to the "Pill" preset's 999px (also clamped to 18px). Keeping a
   real gap below that clamp is what makes Round look distinctly rounder
   than Default without collapsing into Pill. */
:root[data-ds-radius="round"]   { --radius-sm: 10px; --radius-md: 12px; --radius-lg: 24px; }

/* "Pill" only forces 999px on the small-control class list below (buttons,
   inputs, badges, ...) — a literal 999px on --radius-lg would be fine for
   those but absurd on a card/panel-sized box. It never reassigned --radius-lg
   at all, though, which meant every card/modal/panel (anything consuming
   --radius-lg / --bs-border-radius-lg, e.g. .custom-card in the Return
   Selling views) silently fell back to the SAME 16px as the "Default" preset
   — visibly inconsistent with the fully-pill buttons/inputs sitting right
   next to them under the same "Pill" selection. Large surfaces get their own
   proportionate extra-round radius here instead, distinct from Default/Round
   and consistent with the rest of the Pill aesthetic, without becoming a
   capsule shape. */
:root[data-ds-radius="pill"]    { --radius-lg: 28px; }

/* "Pill" is scoped to the controls a fully round corner actually reads well
   on (buttons, inputs, badges, select2) rather than swapping --radius-md/-lg
   globally, which would also warp cards/modals/panels into pill shapes. */
:root[data-ds-radius="pill"] .btn,
:root[data-ds-radius="pill"] .form-control,
:root[data-ds-radius="pill"] .form-select,
:root[data-ds-radius="pill"] .input-group-text,
:root[data-ds-radius="pill"] .badge,
:root[data-ds-radius="pill"] .select2-container .select2-selection,
:root[data-ds-radius="pill"] .tooltip-inner {
    border-radius: 999px !important;
}

/* Navbar icon chips (.circle shortcuts, dollar-price chip, user-menu
   trigger/rows/switch-account rows) all read --radius-md directly rather
   than through the small-control class list above, so they stayed square
   under Pill while every button/input next to them went fully round. Same
   opt-in list, same 999px treatment. */
:root[data-ds-radius="pill"] .navbar.sticky-top .circle,
:root[data-ds-radius="pill"] .ds-navbar-icon-btn,
:root[data-ds-radius="pill"] .ds-navbar-price,
:root[data-ds-radius="pill"] .ds-user-trigger,
:root[data-ds-radius="pill"] .ds-user-menu-item,
:root[data-ds-radius="pill"] .ds-user-menu-item-icon,
:root[data-ds-radius="pill"] .ds-switch-option,
:root[data-ds-radius="pill"] .ds-switch-option-icon {
    border-radius: 999px !important;
}

/* SweetAlert2 buttons need a different mechanism than the selector list
   above: the bundled vendor sweetalert2.min.css has its own
   `.swal2-popup .swal2-styled.swal2-confirm`/`.swal2-cancel` rules (3
   classes) that OUTRANK a same-specificity override regardless of load
   order — CSS resolves border-radius by highest specificity first, source
   order only breaks ties at EQUAL specificity. A plain selector here would
   silently lose to the vendor rule (confirmed: buttons stayed locked at the
   vendor's fixed .25em under every preset, not just Pill). Routing through
   a variable sidesteps the specificity fight entirely — swal-theme.css's
   own (already-!important, see that file's header) rules just consume
   this, so there's nothing left for the vendor rule to outrank. */
:root[data-ds-radius="pill"] {
    --swal-radius-override: 999px;
}

/* A blanket 999px on every corner also overrides Bootstrap's own
   .input-group logic that squares off the corners where two grouped
   elements touch — the label/addon then renders as a fully round pill
   floating next to the input instead of a flush, connected addon. Restore
   Bootstrap's connected-corner shape for anything inside an .input-group
   specifically (still pill-shaped everywhere else); a leading item keeps a
   round start-cap, a trailing item a round end-cap, and the touching side(s)
   in between stay square. */
:root[data-ds-radius="pill"] .input-group > .input-group-text,
:root[data-ds-radius="pill"] .input-group > .form-control,
:root[data-ds-radius="pill"] .input-group > .form-select {
    border-radius: var(--radius-md) !important;
}

:root[data-ds-radius="pill"] .input-group > :first-child {
    border-start-start-radius: 999px !important;
    border-end-start-radius: 999px !important;
}

:root[data-ds-radius="pill"] .input-group > :last-child {
    border-start-end-radius: 999px !important;
    border-end-end-radius: 999px !important;
}

:root[data-ds-radius="pill"] .input-group > :not(:first-child) {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}

:root[data-ds-radius="pill"] .input-group > :not(:last-child) {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

/* Same problem as .input-group above, for .btn-group/.btn-group-vertical:
   the blanket 999px on .btn also fights bootstrap-shadcn-theme.css's
   edge-only rounding for grouped buttons, so every segment ballooned into
   its own disconnected pill instead of one continuous rounded strip. Square
   off the touching side(s), keep a round cap only on the true outer edge. */
:root[data-ds-radius="pill"] .btn-group > .btn:not(:first-child) {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}

:root[data-ds-radius="pill"] .btn-group > .btn:not(:last-child) {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

:root[data-ds-radius="pill"] .btn-group-vertical > .btn:not(:first-child) {
    border-start-start-radius: 0 !important;
    border-start-end-radius: 0 !important;
}

:root[data-ds-radius="pill"] .btn-group-vertical > .btn:not(:last-child) {
    border-end-start-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

/* Several older views (e.g. Views/DebitPayment/Index.cshtml) still markup
   addons the Bootstrap-4 way — .input-group-text nested one level deeper
   inside a .input-group-prepend/-append wrapper, rather than Bootstrap 5's
   flat .input-group > .input-group-text. The :first-child/:last-child rules
   above only match a DIRECT child, so they never applied to this nested
   variant; handled here by naming convention instead of DOM depth (a
   -prepend addon is always the leading/start corner, a -append addon is
   always the trailing/end corner, regardless of nesting). */
:root[data-ds-radius="pill"] .input-group-prepend .input-group-text {
    border-radius: var(--radius-md) !important;
    border-start-start-radius: 999px !important;
    border-end-start-radius: 999px !important;
}

:root[data-ds-radius="pill"] .input-group-append .input-group-text {
    border-radius: var(--radius-md) !important;
    border-start-end-radius: 999px !important;
    border-end-end-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   5. Compact mode — set on <html data-ds-density="compact">.
      Tightens the shell paddings for higher information density.
   -------------------------------------------------------------------------- */
:root[data-ds-density="compact"] {
    --space-5: 16px;
    --space-6: 20px;
}

:root[data-ds-density="compact"] .card-body { padding: var(--space-4); }
:root[data-ds-density="compact"] .table td,
:root[data-ds-density="compact"] .table thead th { padding: var(--space-2) var(--space-3); }
/* Reuse the existing --control-height-sm tier (also used by FormControlSize
   "Compact") instead of a second, disconnected 34px literal — the two
   settings touch the same controls, so they must share one source of truth
   or they'd fight whichever cascades last. */
:root[data-ds-density="compact"] { --control-height: var(--control-height-sm); }
:root[data-ds-density="compact"] .sidebar-nav .list-group-item { padding: 6px var(--space-3); }

/* --------------------------------------------------------------------------
   5b. Sidebar style — set on <html data-ds-sidebar="…"> (a user preference
       independent of the app-wide light/dark theme — "always-dark sidebar",
       Slack/Notion-style). Re-point the shell's own --ds-sidebar-* tokens at
       their dark-theme values instead of a second, disconnected set of flat
       hex colors: shell.css (the sidebar's one source of truth) consumes
       these tokens everywhere already — glass surface, hover/active tints,
       borders, label color — so this now composes with it automatically
       instead of fighting it. Previously this also targeted `.active`, but
       the sidebar's active-route script applies `.ds-active` (see
       _LayoutScripts.cshtml); that selector never matched current markup. */
:root[data-ds-sidebar="dark"] .sidebar-nav {
    --ds-sidebar-bg: #1E293B;
    --ds-sidebar-border: #334155;
    --ds-sidebar-text: #9095AB;
    --ds-sidebar-text-active: #F8FAFC;
    --ds-sidebar-label: #64748B;
    --ds-sidebar-hover-bg: color-mix(in srgb, var(--ds-primary) 16%, transparent);
    --ds-sidebar-active-bg: color-mix(in srgb, var(--ds-primary) 26%, transparent);
}

/* --------------------------------------------------------------------------
   5c. Motion — set on <html data-ds-motion="reduced">.
   -------------------------------------------------------------------------- */
:root[data-ds-motion="reduced"] *,
:root[data-ds-motion="reduced"] *::before,
:root[data-ds-motion="reduced"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   5d. Focus style — set on <html data-ds-focus="…">. Controls only the ring
   WIDTH via --ds-ring-width (every :focus-visible box-shadow already reads
   var(--ds-ring), itself built from this token in tokens.css) — no
   per-component focus CSS to touch. "Strong" adds a visible solid outline
   on top of the ring for the highest-contrast option.
   -------------------------------------------------------------------------- */
:root[data-ds-focus="subtle"] { --ds-ring-width: 2px; }
:root[data-ds-focus="modern"] { --ds-ring-width: 3px; }
:root[data-ds-focus="strong"] { --ds-ring-width: 4px; }

:root[data-ds-focus="strong"] .form-control:focus,
:root[data-ds-focus="strong"] .form-select:focus,
:root[data-ds-focus="strong"] .btn:focus-visible,
:root[data-ds-focus="strong"] .select2-container--focus .select2-selection {
    outline: 2px solid var(--ds-primary);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   6. The settings launcher button + slide-in panel
   -------------------------------------------------------------------------- */
.ds-settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 32, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1050;
}

.ds-settings-overlay.open { opacity: 1; visibility: visible; }

.ds-settings-panel {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    height: 100%;
    width: 340px;
    max-width: 90vw;
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-lg);
    z-index: 1051;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Panel slides in from the correct edge in RTL too. */
:root[dir="rtl"] .ds-settings-panel { transform: translateX(-100%); }
.ds-settings-panel.open { transform: translateX(0) !important; }

.ds-settings-panel .ds-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--ds-border);
}

.ds-settings-panel .ds-settings-header h5 { margin: 0; }

/* The close button + footer button use Bootstrap's own fixed border-radius by
   default; pin them to the theme's corner-radius tokens so "Corner radius"
   actually affects every control in this panel, not just the .ds-seg ones. */
.ds-settings-panel .ds-settings-header .circle {
    border-radius: var(--radius-md);
}

.ds-settings-footer .btn {
    border-radius: var(--radius-sm);
}

.ds-settings-subtitle {
    margin: 2px 0 0;
    font-size: .78rem;
    color: var(--ds-text-muted);
}

.ds-settings-footnote {
    margin: var(--space-2) 0 0;
    font-size: .72rem;
    color: var(--ds-text-muted);
    text-align: center;
}

.ds-settings-panel .ds-settings-body {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
}

.ds-settings-section { margin-bottom: var(--space-6); }

.ds-settings-section > .ds-settings-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ds-text-muted);
    margin-bottom: var(--space-3);
}

.ds-settings-title .ds-settings-title-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background-color: var(--ds-active);
    color: var(--ds-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .625rem;
    flex-shrink: 0;
}

/* Segmented option groups (mode / size / radius / density / dir) */
.ds-seg {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ds-seg button {
    flex: 1 1 auto;
    min-width: 64px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

.ds-seg button:hover { border-color: var(--ds-primary); }

.ds-seg button:active {
    background: var(--ds-active);
    border-color: var(--ds-primary);
}

.ds-seg button.active:active {
    background: var(--ds-primary-active);
}

.ds-seg button.active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: #fff;
}

/* Accent swatches */
.ds-swatches { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.ds-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: transform .12s ease;
}

.ds-swatch:hover { transform: scale(1.1); }
.ds-swatch:active { transform: scale(.95); }
.ds-swatch.active { border-color: var(--ds-text); }

.ds-swatch.active::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    color: #fff;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
}

.ds-swatch[data-accent="teal"]    { background: #16A3A0; }
.ds-swatch[data-accent="purple"]  { background: #6D5CE0; }
.ds-swatch[data-accent="blue"]    { background: #2563EB; }
.ds-swatch[data-accent="emerald"] { background: #059669; }
.ds-swatch[data-accent="orange"]  { background: #EA580C; }
.ds-swatch[data-accent="rose"]    { background: #E11D48; }
.ds-swatch[data-accent="graphite"] { background: #2e2e2e; }

/* Custom accent swatch — a "+" tile that hosts a hidden native color input. */
.ds-swatch-custom {
    background: var(--ds-bg-subtle, #f1f1f5);
    color: var(--ds-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    border: 2px dashed var(--ds-border);
}

.ds-swatch-custom.active {
    border-style: solid;
    color: #fff;
}

.ds-swatch-custom.active::after { content: none; }

.ds-swatch-custom input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.ds-settings-panel select.form-select { width: 100%; }

.ds-settings-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--ds-border);
}

@media print {
    .ds-settings-overlay, .ds-settings-panel { display: none !important; }
}