/* WEB-CJK-FONT-1 (2026-05-25, user "font not display also"):
   Self-host Noto Sans SC + TC so rendering is deterministic across
   Windows / Mac / Linux. Subset variable fonts cover U+4E00–U+9FFF
   (CJK Unified Ideographs). Browser still falls through to system
   fonts (PingFang SC / Microsoft YaHei) for chars outside the
   subset — e.g. CJK Extension B (U+20000+, rare names like 𠘺).
   Use font-display: swap so the page never blocks on the ~30MB
   font payload. */
@font-face {
    font-family: "Noto Sans SC";
    src: url("/fonts/NotoSansSC-VF.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF;
}

@font-face {
    font-family: "Noto Sans TC";
    src: url("/fonts/NotoSansTC-VF.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF;
}

/* Latin first (system), then bundled CJK, then system CJK fallbacks
   for chars outside the bundled subset (Extension B etc). */
:root, body, html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Noto Sans SC", "Noto Sans TC",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        "Noto Sans CJK SC", "WenQuanYi Micro Hei",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Custom Scrollbar Styles */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Dark mode scrollbar */
.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Animate View */
.animate-view {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Prevent focus highlight on non-interactive elements */
h1, h2, h3, h4, h5, h6, p, span, div, label, nav, header, footer, section, aside, main {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

h1:focus, h2:focus, h3:focus, h4:focus, p:focus, span:focus, div:focus,
label:focus, nav:focus, header:focus, section:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible, h4:focus-visible,
p:focus-visible, span:focus-visible, div:focus-visible,
label:focus-visible, nav:focus-visible, header:focus-visible, section:focus-visible,
*[tabindex="-1"]:focus, *[tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

label {
    user-select: none;
}

/* ── DARKSKIN-1 (2026-07-27) ──────────────────────────────────────────────────
   Operator: "the dark theme need to be update user hard to see" /
             "many is still white backcolor, then some black on black".

   OTA / status pills get their colours from OtaPalette as INLINE styles
   (style="background:#FFF1F2;color:#9F1239"). An inline style beats every
   Tailwind dark: class, so those pills stayed pale in dark mode and their dark
   text ended up on a dark surface. Class-level dark: work cannot fix it.

   Fix: the markup now supplies FOUR custom properties instead of hard-set
   background/color, and CSS decides which pair applies for the active theme.
   Custom properties are inherited values, not declarations on background/color,
   so these rules win normally — no !important needed.

   Usage:
     <span class="ota-skin"
           style="--ota-bg:#FFF1F2;   --ota-text:#9F1239;
                  --ota-bg-dark:#2A1720; --ota-text-dark:#FDB9C6;
                  --ota-accent:#FB7185"> … </span>
   ------------------------------------------------------------------------- */
.ota-skin {
    background: var(--ota-bg);
    color: var(--ota-text);
}

html.dark .ota-skin {
    background: var(--ota-bg-dark, var(--ota-bg));
    color: var(--ota-text-dark, var(--ota-text));
}

/* Left brand accent used by the spanning MultiCalendar pill. */
.ota-skin-accent {
    border-left: 3px solid var(--ota-accent);
}

/* ── DARKNET-1 (2026-07-27) ───────────────────────────────────────────────────
   Operator: "many page still like this how to sweep all the column the dropdown
   the text box the color all".

   A scan found 1428 dark-mode gaps across 278 .razor files: a light Tailwind
   token (bg-white, text-slate-900, border-slate-200 ...) with NO dark: variant
   in the same class attribute. Hand-editing 278 files is slow and risks
   regressing pages that are already correct, so this is a SAFETY NET instead.

   How it stays surgical: every rule is guarded with :not([class*="dark:..."]),
   which reads the element's own class attribute. If someone already wrote a
   dark: variant, the guard excludes the element and their styling wins. So this
   only ever paints the gaps -- it can never fight correct code.

   Specificity: html.dark + .class + :not([attr]) beats a bare Tailwind utility,
   and Tailwind escapes variant classes (hover\:bg-white), so `.bg-white` here
   matches ONLY the literal base utility -- hover/focus variants are untouched.

   Fix these properly in the .razor over time; deleting a rule below is safe once
   its pages carry real dark: classes.
   ------------------------------------------------------------------------- */

/* 1. Native form controls -- the "dropdown" and "text box".
      One declaration hands <select>, <input>, <textarea>, date pickers,
      scrollbars and spinners over to the browser's dark chrome. This is the
      single highest-value line here: those controls carry NO Tailwind classes,
      so no amount of dark: work in the markup would have fixed them. */
html.dark { color-scheme: dark; }

/* 2. Light SURFACES with no dark counterpart. */
html.dark .bg-white:not([class*="dark:bg-"]),
html.dark .bg-slate-50:not([class*="dark:bg-"]),
html.dark .bg-gray-50:not([class*="dark:bg-"])   { background-color:#151920; }
html.dark .bg-slate-100:not([class*="dark:bg-"]),
html.dark .bg-gray-100:not([class*="dark:bg-"])  { background-color:#1C2129; }

/* 3. Dark TEXT with no dark counterpart -- the "black on black" case. */
html.dark .text-slate-900:not([class*="dark:text-"]),
html.dark .text-gray-900:not([class*="dark:text-"]),
html.dark .text-slate-800:not([class*="dark:text-"]),
html.dark .text-gray-800:not([class*="dark:text-"]) { color:#E7EAEF; }
html.dark .text-slate-700:not([class*="dark:text-"]),
html.dark .text-gray-700:not([class*="dark:text-"]) { color:#C6CCD6; }
html.dark .text-slate-600:not([class*="dark:text-"]),
html.dark .text-gray-600:not([class*="dark:text-"]) { color:#A8B0BC; }

/* 4. Hairline BORDERS with no dark counterpart -- the "column" lines in tables. */
html.dark .border-slate-100:not([class*="dark:border-"]),
html.dark .border-gray-100:not([class*="dark:border-"]),
html.dark .border-slate-200:not([class*="dark:border-"]),
html.dark .border-gray-200:not([class*="dark:border-"]),
html.dark .border-slate-300:not([class*="dark:border-"]),
html.dark .border-gray-300:not([class*="dark:border-"]) { border-color:#2A313B; }
html.dark .divide-slate-100:not([class*="dark:divide-"]) > * + *,
html.dark .divide-slate-200:not([class*="dark:divide-"]) > * + * { border-color:#2A313B; }

/* 5. Bare tables that never got Tailwind colours at all (e.g. the rate grid). */
html.dark table:not([class*="dark:"]) > thead:not([class*="dark:bg-"]) { background-color:#1C2129; }
html.dark table:not([class*="dark:"]) th:not([class*="dark:"]),
html.dark table:not([class*="dark:"]) td:not([class*="dark:"]) { border-color:#2A313B; }

/* 6. Placeholders stay legible on the recoloured inputs. */
html.dark ::placeholder { color:#7C8593; opacity:1; }