/* ═══════════════════════════════════════════════════════
   KIOSK — Single-screen layout for all devices
   50"/55" TV @ 1080p or 4K — NO scroll ever
   All sizes use clamp(min, viewport-unit, max)
   ═══════════════════════════════════════════════════════ */

/* ── Colour tokens ─────────────────────────────────── */
:root {
    --k-bg:      #f0f2f5;
    --k-surface: #ffffff;
    --k-surf2:   #eef0f4;
    --k-border:  #dee2e6;
    --k-text:    #1a1a2e;
    --k-muted:   #6c757d;
    --k-accent:  #1d4ed8;
    --c-on:      #15e38a;
    --c-off:     #2563eb;
    --c-fault:   #ff5757;
    --c-alarm:   #f59e0b;
    --c-gray:    #cbd5e1;
}

/* ── Lock page to viewport ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    background: var(--k-bg);
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* ── Header ────────────────────────────────────────── */
.kiosk-header {
    background: #fff;
    border-bottom: 2px solid var(--k-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    padding: clamp(3px,.5vh,7px) clamp(8px,1.2vw,20px);
    /* Grid: logo | legend | date — each col gets exactly 1/3 of width */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(6px,.8vw,16px);
}
.kiosk-header .logo        { height: clamp(22px,3.8vh,44px); width: auto; justify-self: start; }
.kiosk-header .hdr-legend  { justify-self: center; display:flex; align-items:center; gap:clamp(8px,1vw,18px); flex-wrap:nowrap; }
.kiosk-header .hdr-clock   { justify-self: end; text-align: right; white-space: nowrap; }
#kt  { font-size: clamp(9px,1.1vh,14px); font-weight: 700; display: block; white-space: nowrap; }
#kd  { font-size: clamp(7px,.8vh,10px);  color: var(--k-muted); display: block; white-space: nowrap; }
.legend-text { font-size: clamp(7px,.85vh,11px); font-weight: 700; color: var(--k-muted); white-space: nowrap; }

/* ── Content (fills 1fr) ───────────────────────────── */
.kiosk-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(3px,.4vh,6px) clamp(6px,.9vw,14px);
    gap: clamp(3px,.5vh,7px);
    min-height: 0;
}

/* ── Sections ──────────────────────────────────────── */
/* Fixed vh heights — no section can push into another */
.ks-fw  { flex: 0 0 clamp(180px,34vh,38vh); display:flex; flex-direction:column; gap:clamp(2px,.3vh,4px); min-height:0; overflow:hidden; }
.ks-gen { flex: 0 0 clamp(80px, 15vh,18vh); display:flex; flex-direction:column; gap:clamp(2px,.3vh,4px); min-height:0; overflow:hidden; }
.ks-lft { flex: 0 0 clamp(110px,22vh,25vh); display:flex; flex-direction:column; gap:clamp(2px,.3vh,4px); min-height:0; overflow:hidden; }
.ks-ast { flex: 1 1 0;                       display:flex; flex-direction:column; gap:clamp(2px,.3vh,4px); min-height:0; overflow:hidden; }

.section-label {
    font-size: clamp(8px,1vh,13px);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--k-accent);
    border-left: 3px solid var(--k-accent);
    padding-left: 6px;
    line-height: 1;
    flex-shrink: 0;
}

/* Section inner rows fill remaining height */
.ks-fw  > .row,
.ks-gen > .row,
.ks-lft > .row,
.ks-ast > .row { flex: 1; min-height: 0; margin: 0; }

/* Every Bootstrap col inside a section is a flex column */
.ks-fw  > .row > [class*="col-"],
.ks-gen > .row > [class*="col-"],
.ks-lft > .row > [class*="col-"],
.ks-ast > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-left: clamp(3px,.4vw,6px);
    padding-right: clamp(3px,.4vw,6px);
}
/* Cards fill their column */
.ks-fw  > .row > [class*="col-"] > .k-card,
.ks-gen > .row > [class*="col-"] > .k-card,
.ks-lft > .row > [class*="col-"] > .k-card,
.ks-ast > .row > [class*="col-"] > .k-card { flex: 1; min-height: 0; }

/* Sub-columns (Fire section stacked cards) */
.sub-col {
    display: flex;
    flex-direction: column;
    gap: clamp(3px,.45vh,6px);
    min-height: 0;
}
.sub-col .k-card { flex: 1; min-height: 0; }

/* ── Card ──────────────────────────────────────────── */
.k-card {
    border: 1px solid var(--k-border);
    border-radius: clamp(5px,.7vh,10px);
    background: var(--k-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.k-card-title {
    background: #e9ecf3;
    font-size: clamp(7px,.85vh,11px);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--k-text);
    padding: clamp(3px,.4vh,6px) 8px;
    text-align: center;
    border-bottom: 1px solid var(--k-border);
    flex-shrink: 0;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    transition: background .3s;
}
.k-card-inner {
    flex: 1;               /* fill card height */
    display: flex;
    flex-direction: column;
    padding: clamp(3px,.45vh,7px) clamp(3px,.4vw,6px);
    gap: clamp(3px,.4vh,6px);
    min-height: 0;
    overflow: hidden;
}
.k-row {
    display: flex;
    gap: clamp(3px,.4vw,6px);
    flex: 1;               /* each row fills equal share of card-inner height */
    min-height: 0;
    align-items: stretch;  /* k-sub items stretch to row height */
}
/* k-sub inside a k-row always fills full row height */
.k-row > .k-sub {
    align-self: stretch;
}

/* ── Sub-panel ─────────────────────────────────────── */
.k-sub {
    background: var(--k-surf2);
    border: 1px solid var(--k-border);
    border-radius: clamp(4px,.5vh,7px);
    padding: clamp(4px,.55vh,8px) clamp(3px,.4vw,5px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex: 1;
    min-width: 0;
    min-height: 0;
}
.k-sub-title {
    font-size: clamp(8px,1vh,13px);
    font-weight: 700;
    color: var(--k-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: normal;
    word-break: break-word;
    line-height: 1.1;
    flex-shrink: 0;
    padding-bottom: clamp(4px,.6vh,8px);
    width: 100%;
}
/* Center dot+label in remaining space after title */
.k-sub-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2px,.3vh,4px);
    min-height: 0;
}

/* ── Dot ───────────────────────────────────────────── */
.dot {
    width:  clamp(16px,2.6vh,38px);
    height: clamp(16px,2.6vh,38px);
    border-radius: 50%;
    background: var(--c-gray);
    display: block;
    flex-shrink: 0;
    transition: background .3s, box-shadow .3s;
}
.dot.on    { background: var(--c-on);    box-shadow: 0 0 8px rgba(21,227,138,.5); }
.dot.off   { background: var(--c-off);   box-shadow: 0 0 8px rgba(37,99,235,.5);  }
.dot.fault { background: var(--c-fault); box-shadow: 0 0 8px rgba(255,87,87,.5);  }
.dot.alarm { background: var(--c-alarm); box-shadow: 0 0 8px rgba(245,158,11,.5); }
.dot.gray  { background: var(--c-gray);  box-shadow: none; }

@keyframes kiosk-gong-live-border-blink {
    0%, 100% {
        border-color: var(--k-border);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        background: var(--k-surf2);
    }
    50% {
        border-color: #ff5757;
        box-shadow: 0 0 0 3px rgba(255, 87, 87, 0.28), 0 0 16px rgba(255, 87, 87, 0.42);
        background: rgba(254, 202, 202, 0.5);
    }
}
.k-sub.gong-live-alarm-border-blink {
    animation: kiosk-gong-live-border-blink 1s ease-in-out infinite !important;
}

.dlbl {
    font-size: clamp(6px,1vh,10px);
    font-weight: 700;
    color: var(--k-text);
    line-height: 1;
    white-space: nowrap;
}

/* ── Tank value ────────────────────────────────────── */
.tank-val {
    font-size: clamp(11px,1.5vh,20px);
    font-weight: 800;
    color: var(--k-text);
    line-height: 1;
}

/* ── Footer ────────────────────────────────────────── */
.kiosk-footer {
    background: #fff;
    border-top: 1px solid var(--k-border);
    padding: clamp(3px,.4vh,6px) clamp(8px,1.2vw,20px);
}
.kiosk-footer img { height: clamp(16px,2.4vh,28px); width: auto; }
.footer-label {
    font-size: clamp(6px,.72vh,9px);
    font-weight: 700;
    color: var(--k-muted);
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* ── Legend dot ────────────────────────────────────── */
.legend-dot {
    width:  clamp(7px,.95vh,12px);
    height: clamp(7px,.95vh,12px);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.legend-dot.on    { background: var(--c-on); }
.legend-dot.off   { background: var(--c-off); }
.legend-dot.fault { background: var(--c-fault); }
.legend-dot.alarm { background: var(--c-alarm); }

/* ── Blink animations ──────────────────────────────── */
/* SCADA fault: title strip — inset fill + text glow (same idea as dashboard header-bar-fill-pulse) */
@keyframes kiosk-fault-title-inset {
    0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
    50% { box-shadow: inset 0 0 0 100vmax rgba(255, 87, 87, 0.92); }
}
@keyframes kiosk-fault-title-text {
    0%, 100% { text-shadow: none; }
    50% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.95),
            0 0 12px rgba(255, 255, 255, 0.8);
    }
}
.k-card-title.fault-blink {
    overflow: hidden;
    animation:
        kiosk-fault-title-inset 1s ease-in-out infinite,
        kiosk-fault-title-text 1s ease-in-out infinite !important;
}

@keyframes card-border-blink {
    0%,100% { border-color: var(--k-border); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
    50%      { border-color: #ff5757;         box-shadow: 0 0 0 3px rgba(255,87,87,.25); }
}
.k-card.card-border-blink { animation: card-border-blink 1s ease-in-out infinite !important; }

@keyframes blink-low {
    0%,100% { background: var(--k-surf2); border-color: var(--k-border); }
    50%      { background: #ff8080;        border-color: #ff5757; }
}
@keyframes blink-high {
    0%,100% { background: var(--k-surf2); border-color: var(--k-border); }
    50%      { background: #ff8080;        border-color: #ff5757; }
}
.k-sub.blink-low  { animation: blink-low  1s ease-in-out infinite !important; }
.k-sub.blink-high { animation: blink-high 1s ease-in-out infinite !important; }

/* ── Asset threshold blink (live = red, simulation = amber) — same API as dashboard ─ */
@keyframes kiosk-asset-blink-card {
    0%, 100% {
        border-color: var(--k-border);
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
        background-color: var(--k-surface);
    }
    50% {
        border-color: #dc2626;
        box-shadow: 0 0 16px rgba(220, 38, 38, 0.42);
        background-color: rgba(254, 226, 226, 0.88);
    }
}
@keyframes kiosk-asset-blink-sub {
    0%, 100% {
        border-color: var(--k-border);
        box-shadow: none;
        background: var(--k-surf2);
    }
    50% {
        border-color: #dc2626;
        box-shadow: 0 0 12px rgba(220, 38, 38, 0.32);
        background: rgba(254, 202, 202, 0.72);
    }
}
@keyframes kiosk-asset-blink-inner {
    0%, 100% { box-shadow: none; background: transparent; }
    50% {
        box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.45);
        background: rgba(254, 226, 226, 0.35);
    }
}
@keyframes kiosk-text-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.k-card.blink-red { animation: kiosk-asset-blink-card 1s ease-in-out infinite !important; }
.k-sub.blink-red { animation: kiosk-asset-blink-sub 1s ease-in-out infinite !important; }
.k-card-inner.blink-red {
    border-radius: clamp(4px,.5vh,8px);
    animation: kiosk-asset-blink-inner 1s ease-in-out infinite !important;
}
.k-card.blink-red .k-sub,
.k-card-inner.blink-red .k-sub {
    animation: kiosk-asset-blink-sub 1s ease-in-out infinite !important;
}
.blink-red .dlbl,
.blink-red .k-sub-title,
.blink-red .tank-val {
    color: #b91c1c !important;
    font-weight: 800 !important;
    animation: kiosk-text-pulse 1s ease-in-out infinite !important;
}
@keyframes kiosk-asset-blink-card-sim {
    0%, 100% {
        border-color: var(--k-border);
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
        background-color: var(--k-surface);
    }
    50% {
        border-color: #d97706;
        box-shadow: 0 0 14px rgba(217, 119, 6, 0.38);
        background-color: rgba(254, 243, 199, 0.92);
    }
}
@keyframes kiosk-asset-blink-sub-sim {
    0%, 100% {
        border-color: var(--k-border);
        box-shadow: none;
        background: var(--k-surf2);
    }
    50% {
        border-color: #d97706;
        box-shadow: 0 0 10px rgba(217, 119, 6, 0.28);
        background: rgba(253, 230, 138, 0.75);
    }
}
@keyframes kiosk-asset-blink-inner-sim {
    0%, 100% { box-shadow: none; background: transparent; }
    50% {
        box-shadow: inset 0 0 0 2px rgba(217, 119, 6, 0.4);
        background: rgba(254, 243, 199, 0.4);
    }
}
.k-card.blink-red--sim { animation: kiosk-asset-blink-card-sim 1s ease-in-out infinite !important; }
.k-sub.blink-red--sim { animation: kiosk-asset-blink-sub-sim 1s ease-in-out infinite !important; }
.k-card-inner.blink-red--sim {
    border-radius: clamp(4px,.5vh,8px);
    animation: kiosk-asset-blink-inner-sim 1s ease-in-out infinite !important;
}
.k-card.blink-red--sim .k-sub,
.k-card-inner.blink-red--sim .k-sub {
    animation: kiosk-asset-blink-sub-sim 1s ease-in-out infinite !important;
}
.blink-red--sim .dlbl,
.blink-red--sim .k-sub-title,
.blink-red--sim .tank-val {
    color: #b45309 !important;
    font-weight: 800 !important;
    animation: kiosk-text-pulse 1s ease-in-out infinite !important;
}

/* Parent k-card + title when any in-card tile is in asset threshold breach (match dashboard.php) */
@keyframes kiosk-threshold-title-inset-live {
    0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
    50% { box-shadow: inset 0 0 0 100vmax rgba(197, 48, 48, 0.94); }
}
@keyframes kiosk-threshold-title-text-live {
    0%, 100% { text-shadow: none; }
    50% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.95),
            0 0 12px rgba(255, 255, 255, 0.85);
    }
}
@keyframes kiosk-threshold-title-inset-sim {
    0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
    50% { box-shadow: inset 0 0 0 100vmax rgba(180, 83, 9, 0.94); }
}
@keyframes kiosk-threshold-title-text-sim {
    0%, 100% { text-shadow: none; }
    50% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.95),
            0 0 12px rgba(255, 248, 220, 0.9);
    }
}
.k-card.asset-card-threshold-blink {
    animation: kiosk-asset-blink-card 1s ease-in-out infinite !important;
}
.k-card.asset-card-threshold-blink > .k-card-title {
    overflow: hidden;
    animation:
        kiosk-threshold-title-inset-live 1s ease-in-out infinite,
        kiosk-threshold-title-text-live 1s ease-in-out infinite !important;
}
.k-card.asset-card-threshold-blink--sim {
    animation: kiosk-asset-blink-card-sim 1s ease-in-out infinite !important;
}
.k-card.asset-card-threshold-blink--sim > .k-card-title {
    overflow: hidden;
    animation:
        kiosk-threshold-title-inset-sim 1s ease-in-out infinite,
        kiosk-threshold-title-text-sim 1s ease-in-out infinite !important;
}

/* ── FAP sub-panels: fixed fluid height, stays compact ─ */
.fap-sub {
    flex: 1 1 0 !important;   /* grow equally to fill card height */
    min-height: 0;
    max-height: clamp(60px, 9vh, 100px);
}
/* ── Bootstrap row gap override ────────────────────── */
.row { --bs-gutter-x: clamp(4px,.5vw,8px); --bs-gutter-y: clamp(4px,.5vh,8px); }