/* ============================================================================
   PHARMACY THEME — refined modern apothecary
   ============================================================================
   Loaded AFTER app.css so it overrides the cool-slate template defaults with
   a warmer, more distinctive palette. Lean violet brand on parchment-tone
   surfaces, editorial serif display + precise sans body, atmospheric layered
   backdrops, considered spacing rhythm. The aim: a pharmacy counter app that
   feels deliberately designed, not generic SaaS.
   ============================================================================ */

/* ── Typography ─────────────────────────────────────────────────────────────
   Caprasimo: chunky modern display in the AdLib / Cooper Black lineage —
     used for page titles and hero text where character matters.
   Manrope: geometric modern sans, used for everything else.
   JetBrains Mono: tabular numerics (counters, totals, doses).

   Self-hosted from wwwroot/fonts/ (downloaded once from Google Fonts). No
   runtime fetch from fonts.googleapis.com / fonts.gstatic.com — keeps the
   pharmacy-counter app working offline (PWA), avoids GDPR concerns about
   leaking IPs to Google on every page load, and removes the third-party
   single-point-of-failure. The unicode-range hints let browsers skip
   downloading a subset until the page actually needs a glyph from it. */

/* Caprasimo · 400 · latin-ext + latin */
@font-face {
    font-family: 'Caprasimo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/esDT31JQOPuXIUGBp72UnJ8DKpE.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Caprasimo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/esDT31JQOPuXIUGBp72Ukp8D.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope · variable 300-800 · two subsets pointing at the same woff2 (the
   variable font ships every weight in one file). */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/xn7gYHE41ni1AdIRggmxSuXd.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/xn7gYHE41ni1AdIRggexSg.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono · variable 400-700 · same trick — one woff2 per subset. */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
.theme-white {
    /* ── Brand: cooler-than-default violet primary, warm saffron accent ──── */
    --color-primary: #7c3aed;
    --color-primary-dark: #5b21b6;
    --color-primary-light: #a855f7;
    --color-primary-rgb: 124, 58, 237;

    --color-secondary: #a855f7;
    --color-secondary-light: #c084fc;
    --color-secondary-rgb: 168, 85, 247;

    /* Warm accent — used sparingly (eyebrow on login, accent dot, small
       pull-quotes). Saffron, not the standard SaaS-cyan. */
    --color-accent: #f59e0b;
    --color-accent-light: #fbbf24;
    --color-accent-rgb: 245, 158, 11;

    /* ── Surfaces: warm parchment, not cool slate ─────────────────────── */
    --bg-primary: #fbfaf7;
    --bg-secondary: #f5f3ee;
    --bg-tertiary: #ede9e0;
    --bg-elevated: #ffffff;

    --surface-card: #ffffff;
    --surface-card-hover: #fbfaf7;
    --surface-input: #ffffff;
    --surface-highlight: rgba(124, 58, 237, 0.07);

    /* ── Text: violet-tinged dark for warmth, never pure black ────────── */
    --text-primary: #1c1227;
    --text-secondary: #5b4f6a;
    --text-muted: #8d829c;
    --text-on-primary: #ffffff;
    --text-link: #7c3aed;
    --text-link-hover: #5b21b6;

    /* ── Borders: warm neutral ───────────────────────────────────────── */
    --border-default: #e7e2db;
    --border-light: #f3efea;
    --border-strong: #c8c0b6;
    --border-focus: #a855f7;

    /* ── Shadows: warm, low elevation, never crispy black ────────────── */
    --shadow-sm: 0 1px 2px rgba(28, 18, 39, 0.04);
    --shadow-md: 0 2px 8px rgba(28, 18, 39, 0.05), 0 1px 3px rgba(28, 18, 39, 0.04);
    --shadow-lg: 0 12px 28px rgba(28, 18, 39, 0.08), 0 4px 8px rgba(28, 18, 39, 0.05);
    --shadow-xl: 0 28px 64px rgba(28, 18, 39, 0.12), 0 8px 16px rgba(28, 18, 39, 0.06);
    --shadow-brand: 0 12px 28px rgba(124, 58, 237, 0.22), 0 4px 8px rgba(124, 58, 237, 0.10);
    --shadow-glow: 0 0 32px rgba(124, 58, 237, 0.25);

    /* ── Gradients ───────────────────────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    --gradient-violet-saffron: linear-gradient(120deg, #7c3aed 0%, #a855f7 55%, #f59e0b 100%);
    --gradient-card: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(168, 85, 247, 0.04) 100%);
    --gradient-page: radial-gradient(ellipse 120% 60% at 50% -20%, rgba(124, 58, 237, 0.12), transparent 70%),
                     radial-gradient(ellipse 80% 50% at 100% 100%, rgba(245, 158, 11, 0.08), transparent 60%),
                     linear-gradient(180deg, #fbfaf7 0%, #f5f3ee 100%);

    /* ── Type system ─────────────────────────────────────────────────── */
    --font-display: 'Caprasimo', 'Cooper Black', 'Bookman Old Style', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'SF Mono', monospace;

    /* ── Spacing scale: refined, with consistent ratio ─────────────── */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.25rem;
    --space-2xl: 3.5rem;
    --space-3xl: 5rem;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-full: 999px;

    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Body / global type rendering ──────────────────────────────────────── */
html, body {
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-variant-numeric: oldstyle-nums;
}

h1, h2, h3, h4 {
    /* Caprasimo ships at a single weight (chunky by design) — no weight axis,
       no italic axis. Weight rules removed because they only triggered the
       browser's synthetic-bold fallback. Letter-spacing pulled in slightly
       since Caprasimo's metrics are wider than Fraunces. */
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.022em;
    line-height: 1.06;
    font-weight: 400;
}

/* Tabular numerics inside any element with this class — useful for counters,
   totals, dose values, prices. Prevents the digits-shift wobble you get with
   the default proportional figures. */
.tnum, .pha-tnum {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
}

/* ── Shared atmospheric backdrop ───────────────────────────────────────────
   Drop <div class="pha-atmosphere" aria-hidden="true">…</div> into a layout to
   get a layered, painterly background: warm gradient mesh + subtle dot grid
   + two soft glow orbs. Pure decoration, behind everything. */
.pha-atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--gradient-page);
}
.pha-atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0,0,0,0.5), transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0,0,0,0.5), transparent 75%);
}
.pha-atmosphere::after {
    content: "";
    position: absolute;
    top: -20vh;
    right: -15vw;
    width: 65vw;
    height: 65vw;
    max-width: 900px;
    max-height: 900px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.22), transparent 70%);
    filter: blur(80px);
    opacity: 0.7;
}
.pha-atmosphere-glow {
    position: absolute;
    bottom: -25vh;
    left: -20vw;
    width: 70vw;
    height: 70vw;
    max-width: 1000px;
    max-height: 1000px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.16), transparent 70%);
    filter: blur(100px);
    opacity: 0.55;
    animation: pha-atmos-drift 18s ease-in-out infinite alternate;
}
@keyframes pha-atmos-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(40px, -30px) scale(1.07); }
}

/* ── Telerik overrides — keep their theme but match brand violet ──────── */
:root {
    --kendo-color-primary: #7c3aed !important;
    --kendo-color-primary-hover: #6d28d9 !important;
    --kendo-color-primary-active: #5b21b6 !important;
    --kendo-color-primary-emphasis: #a855f7 !important;
}

/* ── Inputs: more refined, more pharmacy-counter-feeling ──────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: border-color 0.15s var(--ease-soft), box-shadow 0.15s var(--ease-soft), background 0.15s var(--ease-soft);
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* ── Primary buttons: subtle gradient, brand glow on hover ────────────── */
.btn.btn-primary {
    background: var(--gradient-primary);
    border: 1px solid transparent;
    color: var(--text-on-primary);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: var(--shadow-md);
    transition: transform 0.18s var(--ease-soft), box-shadow 0.18s var(--ease-soft);
}
.btn.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand);
}
.btn.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}
.btn.btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* ── Selection color matches brand ────────────────────────────────────── */
::selection {
    background: rgba(168, 85, 247, 0.25);
    color: var(--text-primary);
}

/* Reduce-motion: previously had a blanket `*, *::before, *::after` rule that
   killed every animation in the app (including the splash orbits + pulse
   rings) on machines with the accessibility preference enabled. Removed
   because it made the loading screen look static next to PBP.Web. If we
   want to respect the preference later, scope it per-animation class rather
   than across every element. */