/* KTG CONSTRUCTION MANAGEMENT — VIP PRO DARK DESIGN SYSTEM
 * Presentation only. No workflow/business logic changes.
 * This compatibility layer normalizes legacy light-only utility classes
 * across dashboard, QA/QC, technical, QS/commercial, settings and dialogs.
 */

html.dark {
    color-scheme: dark;
    --ktg-dark-canvas: #08111f;
    --ktg-dark-canvas-soft: #0b1524;
    --ktg-dark-surface: #101c2d;
    --ktg-dark-surface-2: #162438;
    --ktg-dark-surface-3: #1b2b41;
    --ktg-dark-border: #2b3d55;
    --ktg-dark-border-soft: #223249;
    --ktg-dark-text: #f3f6fb;
    --ktg-dark-text-2: #c6d2e1;
    --ktg-dark-text-3: #9fb0c5;
    --ktg-dark-text-4: #8295ad;
    --ktg-dark-gold: #f2b84b;
    --ktg-dark-blue: #9fc7f5;
    --ktg-dark-shadow: 0 16px 42px rgba(0, 0, 0, .18);

    /* Flux/Tailwind accent should remain corporate, not turn white. */
    --color-accent: #315d91;
    --color-accent-content: #dbeafe;
    --color-accent-foreground: #ffffff;
}

/* --------------------------------------------------------------------------
   Canvas and primary surfaces
   -------------------------------------------------------------------------- */
html.dark body {
    background:
        radial-gradient(circle at 86% -5%, rgba(49, 93, 145, .13), transparent 30rem),
        radial-gradient(circle at 12% 105%, rgba(235, 169, 59, .035), transparent 28rem),
        var(--ktg-dark-canvas) !important;
    color: var(--ktg-dark-text-2) !important;
}

html.dark body main,
html.dark body [data-flux-main] {
    color: var(--ktg-dark-text-2);
}

html.dark body main .triton-card,
html.dark body main [class~="bg-white"],
html.dark body main [class*="bg-white/"] {
    background-color: var(--ktg-dark-surface) !important;
    border-color: var(--ktg-dark-border) !important;
    color: var(--ktg-dark-text-2);
}

html.dark body main [class~="bg-slate-50"],
html.dark body main [class*="bg-slate-50/"],
html.dark body main [class~="bg-slate-100"],
html.dark body main [class*="bg-slate-100/"] {
    background-color: var(--ktg-dark-surface-2) !important;
}

html.dark body main [class~="bg-slate-200"],
html.dark body main [class*="bg-slate-200/"] {
    background-color: var(--ktg-dark-surface-3) !important;
}

/* Premium separation: surfaces are distinguished by border/tone, not white blocks. */
html.dark body main .shadow-sm,
html.dark body main .shadow-md,
html.dark body main .shadow-lg,
html.dark body main .shadow-xl,
html.dark body main .shadow-2xl {
    --tw-shadow-color: rgba(0, 0, 0, .22) !important;
}

/* --------------------------------------------------------------------------
   Typography — highest priority accessibility fix
   -------------------------------------------------------------------------- */
html.dark body main h1,
html.dark body main h2,
html.dark body main h3,
html.dark body main h4,
html.dark body main h5,
html.dark body main h6 {
    color: var(--ktg-dark-text) !important;
}

html.dark body main [class~="text-slate-900"],
html.dark body main [class~="text-slate-800"] {
    color: var(--ktg-dark-text) !important;
}

html.dark body main [class~="text-slate-700"] {
    color: #d7e0eb !important;
}

html.dark body main [class~="text-slate-600"] {
    color: #becbda !important;
}

html.dark body main [class~="text-slate-500"] {
    color: var(--ktg-dark-text-3) !important;
}

html.dark body main [class~="text-slate-400"] {
    color: var(--ktg-dark-text-4) !important;
}

html.dark body main [class~="text-slate-300"] {
    color: #aebdd0 !important;
}

/* Legacy corporate navy text becomes a readable cool blue/white in dark mode. */
html.dark body main [class*="text-[#1D3C6A]"],
html.dark body main [class*="text-[#173A66]"],
html.dark body main [class*="text-[#244D82]"] {
    color: #dce9f8 !important;
}

html.dark body main a[class*="text-[#1D3C6A]"],
html.dark body main a[class*="text-[#173A66]"] {
    color: var(--ktg-dark-blue) !important;
}

html.dark body main a[class*="text-[#1D3C6A]"]:hover,
html.dark body main a[class*="text-[#173A66]"]:hover {
    color: #c9e2ff !important;
}

html.dark body main [class*="text-[#EBA93B]"],
html.dark body main [class*="text-[#F2B84B]"] {
    color: var(--ktg-dark-gold) !important;
}

/* --------------------------------------------------------------------------
   Borders and dividers
   -------------------------------------------------------------------------- */
html.dark body main [class~="border-slate-100"],
html.dark body main [class~="border-slate-200"],
html.dark body main [class~="border-slate-300"],
html.dark body main [class*="border-slate-100/"],
html.dark body main [class*="border-slate-200/"] {
    border-color: var(--ktg-dark-border) !important;
}

html.dark body main [class~="divide-slate-100"] > :not([hidden]) ~ :not([hidden]),
html.dark body main [class~="divide-slate-200"] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ktg-dark-border-soft) !important;
}

/* --------------------------------------------------------------------------
   Tables — dark executive register, no white header bands
   -------------------------------------------------------------------------- */
html.dark body main table {
    color: var(--ktg-dark-text-2) !important;
}

html.dark body main table thead,
html.dark body main table thead tr,
html.dark body main table thead [class~="bg-slate-50"],
html.dark body main table thead [class*="bg-slate-50/"] {
    background: #18283d !important;
    color: #b8c7d9 !important;
}

html.dark body main table thead th {
    color: #aebed1 !important;
    border-color: var(--ktg-dark-border) !important;
}

html.dark body main table tbody tr,
html.dark body main table tbody td {
    border-color: var(--ktg-dark-border-soft) !important;
}

html.dark body main table tbody tr:hover,
html.dark body main tr[class*="hover:bg-slate-50"]:hover,
html.dark body main tr[class*="dark:hover:bg-slate-800"]:hover {
    background-color: #15253a !important;
}

/* --------------------------------------------------------------------------
   Forms and Flux controls
   -------------------------------------------------------------------------- */
html.dark body main input:not([type="checkbox"]):not([type="radio"]),
html.dark body main textarea,
html.dark body main select,
html.dark body main .triton-field,
html.dark body [data-flux-control] {
    background-color: #0d1828 !important;
    border-color: #354a65 !important;
    color: #eef4fb !important;
}

html.dark body main input::placeholder,
html.dark body main textarea::placeholder {
    color: #71869f !important;
    opacity: 1 !important;
}

html.dark body main input:not([type="checkbox"]):not([type="radio"]):hover,
html.dark body main textarea:hover,
html.dark body main select:hover,
html.dark body main .triton-field:hover {
    border-color: #4b6687 !important;
}

html.dark body main input:focus,
html.dark body main textarea:focus,
html.dark body main select:focus,
html.dark body main .triton-field:focus {
    border-color: #6f97c5 !important;
    box-shadow: 0 0 0 3px rgba(84, 132, 187, .18) !important;
}

html.dark body main select option {
    background: #101c2d;
    color: #edf3fa;
}

html.dark body [data-flux-label] {
    color: #d5dfeb !important;
}

/* Secondary buttons should look like dark glass, not white rectangles. */
html.dark body main .triton-btn-secondary,
html.dark body main button[class*="bg-white"],
html.dark body main a[class*="bg-white"]:not([class*="rounded-full"]) {
    background-color: #142238 !important;
    border-color: #354a65 !important;
    color: #eef4fb !important;
}

html.dark body main .triton-btn-secondary:hover {
    background-color: #1a2d46 !important;
    border-color: #496582 !important;
}

/* --------------------------------------------------------------------------
   Soft semantic backgrounds — retain meaning without bright white/light slabs
   -------------------------------------------------------------------------- */
html.dark body main [class~="bg-blue-50"],
html.dark body main [class*="bg-blue-50/"] {
    background-color: rgba(37, 83, 135, .22) !important;
}
html.dark body main [class~="text-blue-700"],
html.dark body main [class~="text-blue-600"] { color: #8fc3ff !important; }
html.dark body main [class~="border-blue-100"],
html.dark body main [class~="border-blue-200"] { border-color: #31557d !important; }

html.dark body main [class~="bg-emerald-50"],
html.dark body main [class*="bg-emerald-50/"] {
    background-color: rgba(5, 150, 105, .14) !important;
}
html.dark body main [class~="text-emerald-700"],
html.dark body main [class~="text-emerald-600"] { color: #5ee0ae !important; }
html.dark body main [class~="border-emerald-100"],
html.dark body main [class~="border-emerald-200"] { border-color: rgba(16, 185, 129, .34) !important; }

html.dark body main [class~="bg-amber-50"],
html.dark body main [class*="bg-amber-50/"] {
    background-color: rgba(217, 119, 6, .15) !important;
}
html.dark body main [class~="text-amber-700"],
html.dark body main [class~="text-amber-600"] { color: #fbbf5a !important; }
html.dark body main [class~="border-amber-100"],
html.dark body main [class~="border-amber-200"] { border-color: rgba(245, 158, 11, .34) !important; }

html.dark body main [class~="bg-red-50"],
html.dark body main [class*="bg-red-50/"] {
    background-color: rgba(190, 30, 45, .14) !important;
}
html.dark body main [class~="text-red-700"],
html.dark body main [class~="text-red-600"] { color: #ff8e99 !important; }
html.dark body main [class~="border-red-100"],
html.dark body main [class~="border-red-200"] { border-color: rgba(239, 68, 68, .34) !important; }

html.dark body main [class~="bg-violet-50"],
html.dark body main [class*="bg-violet-50/"] {
    background-color: rgba(124, 58, 237, .15) !important;
}
html.dark body main [class~="text-violet-700"] { color: #c4a7ff !important; }

/* Neutral status pills may stay light for strong scanning, but are softened. */
html.dark body main [class~="bg-slate-100"][class*="rounded-full"] {
    background-color: #dce5ef !important;
    color: #33475f !important;
}

/* --------------------------------------------------------------------------
   Dashboard / KPI strips / empty states
   -------------------------------------------------------------------------- */
html.dark body main #resource-summary .grid.gap-px,
html.dark body main #quality-summary .grid.gap-px {
    background-color: var(--ktg-dark-border) !important;
}

html.dark body main #resource-summary .grid.gap-px > [class~="bg-white"],
html.dark body main #quality-summary .grid.gap-px > [class~="bg-white"] {
    background: #17263a !important;
}

html.dark body main #resource-summary h2,
html.dark body main #resource-summary h3,
html.dark body main #quality-summary h2,
html.dark body main #quality-summary h3 {
    color: var(--ktg-dark-text) !important;
}

html.dark body main #resource-summary [class*="bg-slate-50/70"] {
    background: #17263a !important;
}

/* --------------------------------------------------------------------------
   Commercial / QS registers
   -------------------------------------------------------------------------- */
html.dark body main .triton-page > nav[class*="bg-white"],
html.dark body main .triton-page > div > nav[class*="bg-white"],
html.dark body main nav[class*="rounded"][class*="bg-white"] {
    background: #111e30 !important;
    border-color: var(--ktg-dark-border) !important;
}

html.dark body main .triton-page > nav a,
html.dark body main nav[class*="rounded"] a {
    color: #b8c7d9;
}

html.dark body main .triton-page > nav a[class*="bg-[#1D3C6A]"],
html.dark body main nav[class*="rounded"] a[class*="bg-[#1D3C6A]"] {
    background: #315d91 !important;
    color: #ffffff !important;
}

/* Payment/contract split KPI cards that used white containers. */
html.dark body main .triton-page section.grid > div[class*="grid-cols-2"][class*="bg-white"] {
    background: #111c2d !important;
    border-color: var(--ktg-dark-border) !important;
}

html.dark body main .triton-page section.grid > div[class*="grid-cols-2"][class*="bg-white"] > * {
    border-color: var(--ktg-dark-border) !important;
}

/* Claim/record rows: preserve warning tint, remove white/light hover. */
html.dark body main a[class*="hover:bg-slate-50"]:hover,
html.dark body main a[class*="hover:bg-red-50"]:hover,
html.dark body main a[class*="hover:bg-amber-50"]:hover {
    background-color: #17273b !important;
}

/* --------------------------------------------------------------------------
   Dialogs, dropdowns and floating panels
   -------------------------------------------------------------------------- */
html.dark body dialog,
html.dark body dialog[class*="bg-white"],
html.dark body [role="dialog"],
html.dark body [data-flux-modal] {
    background-color: #101c2d !important;
    border-color: var(--ktg-dark-border) !important;
    color: var(--ktg-dark-text-2) !important;
}

html.dark body dialog [class~="bg-slate-50"],
html.dark body dialog [class*="bg-slate-50/"] {
    background: #142338 !important;
}

html.dark body [data-flux-menu],
html.dark body [role="menu"],
html.dark body [data-flux-dropdown] [class*="bg-white"] {
    background-color: #111e30 !important;
    border-color: var(--ktg-dark-border) !important;
    color: var(--ktg-dark-text-2) !important;
}

/* Project selector is inside the navy sidebar but its popup was legacy white. */
html.dark body .triton-app-sidebar details > div[class*="absolute"][class*="bg-white"] {
    background: #101c2d !important;
    border-color: #344861 !important;
    color: #d9e3ef !important;
}
html.dark body .triton-app-sidebar details > div[class*="absolute"][class*="bg-white"] [class*="text-slate-700"] {
    color: #d9e3ef !important;
}
html.dark body .triton-app-sidebar details > div[class*="absolute"][class*="bg-white"] [class*="text-slate-400"] {
    color: #8498b1 !important;
}
html.dark body .triton-app-sidebar details > div[class*="absolute"][class*="bg-white"] a:hover {
    background: #17283e !important;
}

/* --------------------------------------------------------------------------
   Settings shell
   -------------------------------------------------------------------------- */
html.dark body main [class*="rounded-2xl"][class*="bg-white"] {
    background-color: var(--ktg-dark-surface) !important;
}
html.dark body main [class*="rounded-xl"][class*="bg-slate-50"] {
    background-color: var(--ktg-dark-surface-2) !important;
}

/* --------------------------------------------------------------------------
   Scrollbars and selection
   -------------------------------------------------------------------------- */
html.dark {
    scrollbar-color: #40536b #08111f;
}
html.dark ::-webkit-scrollbar-track { background: #08111f; }
html.dark ::-webkit-scrollbar-thumb {
    background: #40536b;
    border-radius: 999px;
}
html.dark ::-webkit-scrollbar-thumb:hover { background: #526a86; }
html.dark ::selection {
    background: rgba(242, 184, 75, .28);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Focus visibility — professional and accessible
   -------------------------------------------------------------------------- */
html.dark body :focus-visible {
    outline-color: #78a8dc;
}

/* Avoid making authentication hero dark-mode overrides interfere with its own art direction. */
html.dark body main section[class*="bg-[#12355E]"] {
    color: inherit;
}