/* KTG CONSTRUCTION MANAGEMENT — OPERATIONAL MODULE POLISH
 * Upgrades legacy operational modules to the same visual generation as
 * Dashboard / Site Control without touching workflow or business logic.
 * Targets pages whose primary header is the old flex header pattern.
 */

/* --------------------------------------------------------------------------
   Legacy module detection
   -------------------------------------------------------------------------- */
.triton-page:has(> section:first-of-type.flex),
.triton-page:has(> nav + section.flex) {
    --ktg-op-navy: #17365f;
    --ktg-op-blue: #315d91;
    --ktg-op-gold: #eba93b;
    --ktg-op-border: #dbe4ef;
    --ktg-op-soft: #f7f9fc;
}

/* --------------------------------------------------------------------------
   Premium page header
   -------------------------------------------------------------------------- */
.triton-page > section:first-of-type.flex,
.triton-page > nav + section.flex {
    position: relative;
    overflow: hidden;
    align-items: center !important;
    border: 1px solid var(--ktg-op-border, #dbe4ef);
    border-radius: 22px;
    background: linear-gradient(145deg, #ffffff 0%, #fbfcfe 72%, #f5f8fc 100%);
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .035);
}

.triton-page > section:first-of-type.flex::before,
.triton-page > nav + section.flex::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #17365f 0%, #315d91 32%, #eba93b 52%, #315d91 72%, #17365f 100%);
}

.triton-page > section:first-of-type.flex h1,
.triton-page > nav + section.flex h1 {
    margin-top: 10px !important;
    font-size: clamp(1.75rem, 2vw, 2.125rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    color: var(--ktg-op-navy, #17365f) !important;
}

.triton-page > section:first-of-type.flex p,
.triton-page > nav + section.flex p {
    max-width: 880px;
    line-height: 1.65;
}

/* Breadcrumb becomes compact enterprise navigation. */
.triton-page > nav:first-child {
    margin-bottom: -4px;
    padding: 0 2px;
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   KPI cards — same hierarchy as current operational dashboards
   -------------------------------------------------------------------------- */
.triton-page:has(> section:first-of-type.flex) > section.grid .triton-card,
.triton-page:has(> nav + section.flex) > section.grid .triton-card {
    position: relative;
    overflow: hidden;
    min-height: 108px;
    border-color: #dce5ef;
    border-radius: 17px;
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.triton-page:has(> section:first-of-type.flex) > section.grid .triton-card::before,
.triton-page:has(> nav + section.flex) > section.grid .triton-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, #315d91, #91a9c5);
    opacity: .78;
}

.triton-page:has(> section:first-of-type.flex) > section.grid .triton-card > p:nth-child(2),
.triton-page:has(> nav + section.flex) > section.grid .triton-card > p:nth-child(2) {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Register / list cards
   -------------------------------------------------------------------------- */
.triton-page:has(> section:first-of-type.flex) > .triton-card,
.triton-page:has(> nav + section.flex) > .triton-card {
    border-radius: 20px;
    border-color: #dce5ef;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 10px 28px rgba(15, 23, 42, .025);
}

.triton-page:has(> section:first-of-type.flex) > .triton-card > div:first-child[class*="border-b"],
.triton-page:has(> nav + section.flex) > .triton-card > div:first-child[class*="border-b"] {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.triton-page:has(> section:first-of-type.flex) table thead tr,
.triton-page:has(> nav + section.flex) table thead tr {
    background: #f4f7fb !important;
}

.triton-page:has(> section:first-of-type.flex) table thead th,
.triton-page:has(> nav + section.flex) table thead th {
    color: #718199 !important;
    letter-spacing: .055em;
}

.triton-page:has(> section:first-of-type.flex) table tbody tr,
.triton-page:has(> nav + section.flex) table tbody tr {
    transition: background-color .14s ease, box-shadow .14s ease;
}

.triton-page:has(> section:first-of-type.flex) table tbody tr:hover,
.triton-page:has(> nav + section.flex) table tbody tr:hover {
    background: #f7faff !important;
    box-shadow: inset 3px 0 0 rgba(49, 93, 145, .35);
}

/* Status chips become slightly more executive / consistent. */
.triton-page:has(> section:first-of-type.flex) span[class*="rounded-full"],
.triton-page:has(> nav + section.flex) span[class*="rounded-full"] {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Modal polish
   -------------------------------------------------------------------------- */
.triton-page:has(> section:first-of-type.flex) + dialog,
.triton-page:has(> nav + section.flex) + dialog,
body:has(.triton-page > section:first-of-type.flex) dialog,
body:has(.triton-page > nav + section.flex) dialog {
    border: 1px solid rgba(148, 163, 184, .28) !important;
    border-radius: 20px !important;
}

body:has(.triton-page > section:first-of-type.flex) dialog > form > div:first-of-type,
body:has(.triton-page > nav + section.flex) dialog > form > div:first-of-type {
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
}

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */
html.dark .triton-page:has(> section:first-of-type.flex),
html.dark .triton-page:has(> nav + section.flex) {
    --ktg-op-border: #2d415a;
    --ktg-op-soft: #142238;
}

html.dark .triton-page > section:first-of-type.flex,
html.dark .triton-page > nav + section.flex {
    border-color: #2d415a !important;
    background: linear-gradient(145deg, #111f32 0%, #0f1b2c 74%, #142238 100%) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.12) !important;
}

html.dark .triton-page > section:first-of-type.flex h1,
html.dark .triton-page > nav + section.flex h1 {
    color: #f4f7fb !important;
}

html.dark .triton-page:has(> section:first-of-type.flex) > section.grid .triton-card,
html.dark .triton-page:has(> nav + section.flex) > section.grid .triton-card {
    border-color: #2d415a !important;
    background: linear-gradient(180deg, #111f32 0%, #0f1c2d 100%) !important;
}

html.dark .triton-page:has(> section:first-of-type.flex) > .triton-card,
html.dark .triton-page:has(> nav + section.flex) > .triton-card {
    border-color: #2d415a !important;
    background: #0f1b2c !important;
}

html.dark .triton-page:has(> section:first-of-type.flex) > .triton-card > div:first-child[class*="border-b"],
html.dark .triton-page:has(> nav + section.flex) > .triton-card > div:first-child[class*="border-b"] {
    background: linear-gradient(180deg, #132238 0%, #101d2f 100%) !important;
}

html.dark .triton-page:has(> section:first-of-type.flex) table thead tr,
html.dark .triton-page:has(> nav + section.flex) table thead tr {
    background: #18283d !important;
}

html.dark .triton-page:has(> section:first-of-type.flex) table tbody tr:hover,
html.dark .triton-page:has(> nav + section.flex) table tbody tr:hover {
    background: #16283e !important;
    box-shadow: inset 3px 0 0 rgba(159, 200, 247, .38);
}

html.dark body:has(.triton-page > section:first-of-type.flex) dialog > form > div:first-of-type,
html.dark body:has(.triton-page > nav + section.flex) dialog > form > div:first-of-type {
    background: linear-gradient(180deg, #132238 0%, #101d2f 100%) !important;
}

/* --------------------------------------------------------------------------
   Mobile field usability
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .triton-page > section:first-of-type.flex,
    .triton-page > nav + section.flex {
        padding: 17px 16px;
        border-radius: 18px;
    }

    .triton-page > section:first-of-type.flex h1,
    .triton-page > nav + section.flex h1 {
        font-size: 1.65rem !important;
        line-height: 1.12 !important;
    }

    .triton-page:has(> section:first-of-type.flex) > section.grid .triton-card,
    .triton-page:has(> nav + section.flex) > section.grid .triton-card {
        min-height: 96px;
    }
}