/* ==========================================================================================================================================================
   Doctor Phone Pro - design system v3.13.5 ("dark navy + one light-blue accent", from the design handoff bundle: theme.css + handoff.md)
   Loaded LAST. Presentation only: no id, class, markup, handler or text changes anywhere; the colours of the Tailwind utilities come from js/core/dp-palette.js.
   Language: flat surfaces with thin 1px frames, a 14px rhythm, NO gradients / shadows / blur / glow / background blobs, plain line icons without tiles.
   Colour is a code: light blue = default + accent, green = success + money in, red = loss + delete, amber = edit + warning. Nothing else.
   Target: standard iPhone portrait, 360-430 px wide (19.5:9), one hand; taps >= 38-44 px.
   Sections: 1 tokens  2 flat surfaces  3 tone remap  4 dashboard (home)  5 controls and button roles  6 motion
   ========================================================================================================================================================== */

/* ============================== 1. tokens ============================== */
:root {
    --dp-bg: #101F33; --dp-surface: #172A42; --dp-surface-2: #1D3350; --dp-field: #0D1A2B; --dp-line: #223A57;
    --dp-text: #F1F7FF; --dp-muted: #8FA6C0; --dp-muted-2: #6F89A6;
    --dp-accent: #8CCBFF; --dp-accent-ink: #0B1B2E; --dp-accent-soft: #2A4A70; --dp-accent-text: #CFE9FF;
    --dp-ok: #7EE0A8; --dp-ok-bg: #14332B; --dp-ok-ink: #06261A;
    --dp-bad: #FF9AA8; --dp-bad-bg: #35202A;
    --dp-warn: #FFD479; --dp-warn-bg: #2E2813;
    --dp-border: rgba(255, 255, 255, .16); --dp-border-soft: rgba(255, 255, 255, .10); --dp-border-card: rgba(140, 203, 255, .20);
    --dp-border-ok: rgba(126, 224, 168, .42); --dp-border-bad: rgba(255, 154, 168, .45); --dp-border-warn: rgba(255, 212, 121, .42);
    --dp-r-card: 18px; --dp-r-field: 15px; --dp-r-btn: 14px;
    --dp-ease: cubic-bezier(.2, .8, .2, 1);

    /* the existing token layers re-point to the bundle (ui-polish.css + the inline :root block of index.html) */
    --ui-bg: var(--dp-bg); --ui-surface: var(--dp-surface); --ui-surface-2: var(--dp-surface-2); --ui-hairline: var(--dp-border-card);
    --ui-text: var(--dp-text); --ui-muted: var(--dp-muted); --ui-accent: var(--dp-accent); --ui-shadow: none;
    --app-bg: var(--dp-bg); --app-card-bg: var(--dp-surface); --app-border: var(--dp-border-card); --app-text: var(--dp-text); --app-text-muted: var(--dp-muted);
}

/* ============================== 2. flat surfaces: no gradients, shadows, blur, glow, blobs ============================== */
html:not([data-theme="light"]) body, html:not([data-theme="light"]) body[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--dp-bg); background-image: none; }
body::before { display: none; }                                  /* the per-section "stage light" */
.brand-hero::before { display: none; }
:root .blur-2xl, :root .blur-3xl { display: none; }

html:not([data-theme="light"]) .glass { background: var(--dp-surface); border-color: var(--dp-border-card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
:root .shadow, :root .shadow-sm, :root .shadow-md, :root .shadow-lg, :root .shadow-xl, :root .shadow-2xl, :root .shadow-inner { box-shadow: none; }
:root [class*="shadow-["], :root [class*="shadow-cyan"], :root [class*="shadow-sky"], :root [class*="shadow-blue"], :root [class*="shadow-emerald"], :root [class*="shadow-amber"], :root [class*="shadow-rose"] { box-shadow: none; }
:root [class*="backdrop-blur"] { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root [class*="drop-shadow"] { filter: none; }

/* section fingerprints: one accent for every screen (green = treasury, red = losses), no coloured header glow */
body[data-tab] { --stage: 140, 203, 255; --stage-2: 140, 203, 255; }
body[data-tab="closing"], body[data-tab="finance"] { --stage: 126, 224, 168; --stage-2: 126, 224, 168; }
body[data-tab="losses"], body[data-tab="deleted"] { --stage: 255, 154, 168; --stage-2: 255, 154, 168; }
body[data-tab]:not([data-tab="home"]) > #adminApp > header { border-bottom-color: var(--dp-border-card); box-shadow: none; }
body[data-tab="new"] #btnSaveNewPhone { box-shadow: none; }

/* ============================== 3. tone remap: every dashboard hue collapses to the code ============================== */
.tone-sky, .tone-cyan, .tone-teal, .tone-blue, .tone-petrol, .tone-sapphire, .tone-cobalt, .tone-neonteal, .tone-orange, .tone-industrial { --tone: 140, 203, 255; }
.tone-emerald { --tone: 126, 224, 168; }
.tone-rose, .tone-red { --tone: 255, 154, 168; }
.tone-amber { --tone: 255, 212, 121; }
[class*="tone-"].card-interactive, [data-module-id].tone-cyan { background-image: none; box-shadow: none; }
[data-module-id].tone-cyan:focus-within { box-shadow: 0 0 0 2px rgba(140, 203, 255, .35); }   /* a focus ring is the only "glow" left */
.tone-icon { background: none; box-shadow: none; }
.tone-count { box-shadow: none; background: #1A2F49; border: 1px solid rgba(var(--tone), .38); }
#tab-home .tone-emerald .tone-icon { animation: none; }
.pulse-dot { animation: none; }

/* ============================== 4. dashboard (الرئيسية): flat cards with a 1px frame, line icons, one code of colour ============================== */
:root #adminApp #tab-home > [data-module-id]:not([data-module-id="intakeHandover"]), :root #adminApp #tab-home [data-module-id="intakeHandover"] > button {
    background: var(--dp-surface); border: 1px solid var(--dp-border-card); box-shadow: none; background-image: none; color: var(--dp-text);
}
:root #adminApp #tab-home > [data-module-id].tone-emerald, :root #adminApp #tab-home [data-module-id="intakeHandover"] > button.tone-emerald { background: var(--dp-ok-bg); border-color: var(--dp-border-ok); }
:root #adminApp #tab-home > [data-module-id="ledger"].card-interactive { --tone: 255, 154, 168; background: var(--dp-bad-bg); border-color: var(--dp-border-bad); }
:root #adminApp #tab-home > [data-module-id="watchdog"].card-interactive { background: var(--dp-warn-bg); border-color: var(--dp-border-warn); }
@media (hover: hover) { :root #adminApp #tab-home [data-module-id].card-interactive:hover, :root #adminApp #tab-home [data-module-id="intakeHandover"] > button:hover { border-color: rgba(var(--tone), .55); } }
:root #adminApp #tab-home .tone-title { color: var(--dp-text); }
:root #adminApp #tab-home .tone-icon { background: none; box-shadow: none; border: 0; color: rgb(var(--tone)); }
:root #adminApp #tab-home .tone-glyph { color: rgb(var(--tone)); }
:root #adminApp #tab-home .tone-count { color: rgb(var(--tone)); }

/* the search card: a framed field + a solid light-blue "open" button */
:root #adminApp #tab-home [data-module-id="quickSearch"] .rounded-lg.border { background: var(--dp-field); border: 1px solid var(--dp-border); border-radius: var(--dp-r-field); }
:root #adminApp #tab-home [data-module-id="quickSearch"] .rounded-lg.border:focus-within { border-color: var(--dp-accent); box-shadow: 0 0 0 2px rgba(140, 203, 255, .35); }
:root #adminApp #tab-home #quickDirectCodeInput { color: var(--dp-text); }
:root #adminApp #tab-home [data-module-id="quickSearch"] button.bg-slate-800, :root #adminApp #tab-home #quickQrScanBtn, :root #adminApp #tab-home #lostReceiptBtn, :root #adminApp #tab-home #quickImeiScanBtn { background: #1A2F49; border: 1px solid var(--dp-border); color: var(--dp-accent); }
:root #adminApp #tab-home [data-module-id="quickSearch"] button.bg-sky-500 { background: var(--dp-accent); color: var(--dp-accent-ink); border: 1px solid var(--dp-accent); border-radius: var(--dp-r-btn); }

@media (max-width: 480px) {
    /* portrait phones: 14px between blocks, roomy 18px cards that still keep every row on one line */
    :root #adminApp #tab-home { display: flex; flex-direction: column; gap: 10px; }
    :root #adminApp #tab-home > * { margin: 0; }
    :root #adminApp #tab-home > [data-module-id]:not([data-module-id="intakeHandover"]) { padding: 8px 12px; border-radius: var(--dp-r-card); }
    :root #adminApp #tab-home > [data-module-id="intakeHandover"] { padding: 0; background: none; border: 0; border-radius: 0; }
    :root #adminApp #tab-home > [data-module-id="quickSearch"] { padding: 10px; }
    :root #adminApp #tab-home > button[data-module-id], :root #adminApp #tab-home > [data-module-id]:not([data-module-id="quickSearch"]):not([data-module-id="intakeHandover"]) { min-height: 54px; }
    :root #adminApp #tab-home > button[data-module-id] .tone-icon { width: 30px; height: 30px; font-size: 20px; border-radius: 0; }
    :root #adminApp #tab-home > button[data-module-id] .tone-title { font-size: 14px; font-weight: 700; }
    :root #adminApp #tab-home [data-module-id="intakeHandover"] { gap: 8px; }
    :root #adminApp #tab-home [data-module-id="intakeHandover"] > button { padding: 10px 12px; gap: 8px; min-height: 96px; border-radius: 22px; }
    :root #adminApp #tab-home [data-module-id="intakeHandover"] .tone-icon { width: 34px; height: 34px; font-size: 26px; border-radius: 0; }
    :root #adminApp #tab-home [data-module-id="intakeHandover"] .tone-title { font-size: 15px; font-weight: 700; }
    :root #adminApp #tab-home [data-module-id="quickSearch"] button { min-height: 40px; }
    :root #adminApp #tab-home #quickDirectCodeInput { min-height: 40px; height: 40px; font-size: 16px; }
}

/* ============================== 5. controls and button roles ============================== */
/* every filled "light blue" button is the PRIMARY role: solid accent, dark ink */
:root #adminApp button[class*="bg-sky-500"], :root #adminApp button[class*="bg-cyan-500"], :root #adminApp button[class*="bg-cyan-400"], :root #adminApp button[class*="bg-sky-400"], :root #adminApp button.bg-blue-500, :root #adminApp .bg-blue-500.text-white { color: var(--dp-accent-ink); }
/* gradient buttons go flat: blue-ish gradients -> primary, green -> confirm, red -> danger */
:root #adminApp [class*="bg-gradient-to-"][class*="from-cyan"], :root #adminApp [class*="bg-gradient-to-"][class*="from-sky"], :root #adminApp [class*="bg-gradient-to-"][class*="from-blue"], :root #adminApp [class*="bg-gradient-to-"][class*="from-teal"] { background-image: none; background-color: var(--dp-accent); color: var(--dp-accent-ink); }
:root #adminApp [class*="bg-gradient-to-"][class*="from-emerald"], :root #adminApp [class*="bg-gradient-to-"][class*="from-green"] { background-image: none; background-color: var(--dp-ok); color: var(--dp-ok-ink); }
:root #adminApp [class*="bg-gradient-to-"][class*="from-rose"], :root #adminApp [class*="bg-gradient-to-"][class*="from-red"] { background-image: none; background-color: var(--dp-bad-bg); color: var(--dp-bad); border: 1px solid var(--dp-border-bad); }
:root #adminApp [class*="bg-gradient-to-"][class*="from-amber"], :root #adminApp [class*="bg-gradient-to-"][class*="from-orange"], :root #adminApp [class*="bg-gradient-to-"][class*="from-yellow"] { background-image: none; background-color: var(--dp-warn-bg); color: var(--dp-warn); border: 1px solid var(--dp-border-warn); }
@media (hover: hover) { button.bg-sky-500:hover, button.bg-cyan-500:hover { box-shadow: none; transform: translateY(-2px); } }
:root #adminApp button:not(:focus-visible) { box-shadow: none; }          /* no drop shadows, no inset highlights (focus rings stay) */
:root #adminApp button:not([class*="bg-gradient-to-"]) { background-image: none; }
#activePhonesContainer > .tk { box-shadow: none; }                          /* tickets are separated by the frame and the 12px gap, not by a shadow */

/* fields: field surface, 1px frame, 15px radius, a 2px accent ring on focus */
:root #adminApp input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), :root #adminApp select, :root #adminApp textarea { background-color: var(--dp-field); border-color: var(--dp-border); }
:root #adminApp input:not([type="checkbox"]):not([type="radio"]):focus, :root #adminApp select:focus, :root #adminApp textarea:focus { border-color: var(--dp-accent); box-shadow: 0 0 0 2px rgba(140, 203, 255, .35); outline: none; }

/* thin frames everywhere cards sit next to each other, so nothing looks glued together */
:root #adminApp .tab-content > .glass, :root #adminApp .tab-content > div > .glass { border: 1px solid var(--dp-border-card); }

/* ============================== 6. motion ============================== */
:root #adminApp #tab-home .card-interactive:active, :root #adminApp #tab-home [data-module-id="intakeHandover"] > button:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { #tab-home > *, .tab-content, .card-interactive, .pulse-dot { animation: none; transition: none; } }

/* the owners' badge (crown + name): flat amber code instead of the gold gradient */
#headerAdminBadge[data-owner="1"] { background: var(--dp-warn-bg); background-image: none; border-color: var(--dp-border-warn); }