/* =========================================================
   MAROON THEME
   Base color: #8e2739 - all blue accents converted to maroon
   ========================================================= */

/* =========================================================
   AICA HSEQ EMERGENCY RESPONSE TV BOARD
   FINAL TV RESPONSIVE CSS
   =========================================================

   TARGET:
   1280 x 720
   1920 x 1080
   2560 x 1440
   3840 x 2160

   PRINSIP:
   - Tidak menggunakan breakpoint resolusi
   - Typography mengikuti tinggi viewport
   - Layout mengikuti viewport
   - Cocok untuk TV 16:9
   - Tidak menggunakan scroll
   ========================================================= */

/* =========================================================
   ROOT SCALE
   ========================================================= */

:root {
    /*
     * Semua ukuran utama mengikuti tinggi TV.
     *
     * 720p  -> 1vh = 7.2px
     * 1080p -> 1vh = 10.8px
     * 1440p -> 1vh = 14.4px
     * 2160p -> 1vh = 21.6px
     */

    --screen-padding: clamp(5px, 0.55vh, 16px);

    --screen-gap: clamp(5px, 0.65vh, 15px);

    /* =====================================================
       HEADER
       ===================================================== */

    --header-height: clamp(85px, 15vh, 325px);

    --header-title-size: clamp(22px, 4.15vh, 90px);

    --header-plant-size: clamp(11px, 1.65vh, 36px);

    /* --header-valid-size: clamp(8px, 1.15vh, 25px); */
    --header-valid-size: clamp(12px, 1.50vh, 25px);

    /* =====================================================
       EMERGENCY TABLE
       ===================================================== */

    --table-head-height: clamp(42px, 6.5vh, 140px);

    --table-row-height: clamp(25px, 4.35vh, 94px);

    --table-head-size: clamp(9px, 1.65vh, 36px);

    --table-body-size: clamp(10px, 1.75vh, 38px);

    --table-shift-size: clamp(11px, 2vh, 43px);

    --table-section-size: clamp(10px, 1.75vh, 38px);

    /* =====================================================
   PERFORMANCE TYPOGRAPHY
   ===================================================== */

    --performance-heading-size: clamp(25px, 2.30vh, 40px);

    --performance-main-size: clamp(20px, 2.30vh, 46px);

    --performance-sub-size: clamp(15px, 1.85vh, 29px);

    --performance-value-size: clamp(18px, 3.6vh, 78px);

    --performance-icon-size: clamp(15px, 2.2vh, 48px);

    /* =====================================================
       FOOTER
       ===================================================== */

    --footer-height: clamp(52px, 9vh, 195px);

    --footer-message-size: clamp(10px, 1.85vh, 40px);

    --footer-label-size: clamp(7px, 0.95vh, 21px);

    --footer-value-size: clamp(10px, 1.7vh, 37px);
}

/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden !important;

    background: #f4f7fb;

    color: #10213f;

    font-family: "Public Sans", Arial, Helvetica, sans-serif;
}

body {
    position: relative;
}

/* =========================================================
   MAIN TV BOARD
   ========================================================= */

.tv-board {
    position: relative;

    width: 100vw;
    height: 100vh;

    min-width: 100vw;
    min-height: 100vh;

    padding: var(--screen-padding);

    overflow: hidden;

    background: linear-gradient(135deg, #ffffff 0%, #f5f8fc 60%, #eef3f9 100%);
}

/* =========================================================
   SLIDE
   ========================================================= */

.board-slide {
    position: absolute;

    inset: var(--screen-padding);

    display: flex;

    flex-direction: column;

    gap: var(--screen-gap);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.35s ease;
}

.board-slide.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.tv-header {
    position: relative;

    flex: 0 0 var(--header-height);

    min-height: 0;

    display: grid;

    grid-template-columns:
        21% 58% 21%;

    align-items: center;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(6, 38, 95, 0.08);

    border-radius: clamp(5px, 0.6vh, 14px);

    box-shadow: 0 3px 12px rgba(5, 35, 85, 0.1);
}

/* =========================================================
   HEADER DECORATION
   ========================================================= */

.tv-header::after {
    content: "";

    position: absolute;

    right: -5%;

    top: -70%;

    width: 30%;

    height: 240%;

    transform: rotate(40deg);

    pointer-events: none;

    background: linear-gradient(90deg,
            transparent,
            rgba(142, 39, 57, 0.045),
            transparent);
}

/* =========================================================
   LOGO AREA
   ========================================================= */

.brand-area,
.fox-area {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}

.brand-area {
    justify-content: flex-start;

    padding-left: clamp(10px, 1.6vw, 40px);
}

.brand-area img {
    width: auto;

    height: clamp(40px, 8vh, 175px);

    max-width: 90%;

    object-fit: contain;
}

.fox-area {
    padding-right: clamp(10px, 1.5vw, 36px);
}

.fox-area img {
    width: auto;

    height: clamp(50px, 10vh, 150px);

    max-width: 100%;

    object-fit: contain;
}

/* =========================================================
   HEADER CENTER
   ========================================================= */

.header-center {
    position: relative;

    z-index: 3;

    min-width: 0;

    text-align: center;
}

.header-title {
    margin: 0;

    color: #8e2739;

    font-size: var(--header-title-size);

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -0.025em;

    text-transform: uppercase;

    white-space: nowrap;
}

.header-title .title-line {
    display: block;
}

.header-plant {
    margin-top: clamp(3px, 0.7vh, 15px);

    color: #5f1726;

    font-size: var(--header-plant-size);

    font-weight: 850;

    line-height: 1;
}

.header-valid {
    margin-top: clamp(3px, 0.45vh, 10px);

    color: #536078;

    font-size: var(--header-valid-size);

    line-height: 1;
}

/* =========================================================
   EMERGENCY CARD
   ========================================================= */

.emergency-card {
    flex: 1 1 auto;

    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: clamp(3px, 0.45vh, 10px);

    background: #ffffff;

    border: 1px solid rgba(6, 38, 95, 0.08);

    border-radius: clamp(5px, 0.6vh, 14px);

    box-shadow: 0 3px 12px rgba(5, 35, 85, 0.08);
}

.table-wrap {
    flex: 1 1 auto;

    min-height: 0;

    overflow: hidden;

    border: 2px solid #8e2739;

    border-radius: clamp(7px, 0.8vh, 18px);
}

/* =========================================================
   EMERGENCY TABLE
   ========================================================= */

.emergency-table {
    width: 100%;

    height: 100%;

    margin: 0;

    border-collapse: separate;

    border-spacing: 0;

    table-layout: fixed;

    font-size: var(--table-body-size);
}

.emergency-table th,
.emergency-table td {
    padding: 0 clamp(3px, 0.55vw, 14px);

    text-align: center;

    vertical-align: middle;

    border-right: 1px solid #d6dfe9;

    border-bottom: 1px solid #d6dfe9;
}

.emergency-table thead th {
    height: var(--table-head-height);

    color: #ffffff;

    background: linear-gradient(135deg, #a84258, #8e2739, #5f1726);

    font-size: var(--table-head-size);

    font-weight: 900;

    line-height: 1.05;

    text-transform: uppercase;
}

.emergency-table tbody tr {
    height: var(--table-row-height);
}

.emergency-table tbody td {
    height: var(--table-row-height);

    color: #10213f;

    background: #ffffff;

    font-size: var(--table-body-size);

    font-weight: 700;

    line-height: 1.05;
}

.emergency-table .shift-cell {
    color: #ffffff !important;

    background: linear-gradient(180deg, #a84258, #5f1726) !important;

    font-size: var(--table-shift-size);

    font-weight: 900;

    text-transform: uppercase;
}

.emergency-table .bagian-cell {
    background: #f4f7fb;

    font-size: var(--table-section-size);

    font-weight: 850;
}

.emergency-table .petugas-name {
    display: block;

    color: #8e2739;
    /* color: #000; */

    font-size: var(--table-body-size);

    font-weight: 800;

    line-height: 1.05;

    overflow-wrap: anywhere;
}

.emergency-table .empty-person {
    color: #526078;

    font-weight: 500;
}

/* =========================================================
   TABLE ICON
   ========================================================= */

.table-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: clamp(18px, 3vh, 64px);

    height: clamp(18px, 3vh, 64px);

    margin-right: 0.15em;

    border-radius: clamp(4px, 0.5vh, 10px);

    font-size: clamp(10px, 1.6vh, 34px);

    vertical-align: middle;
}

.icon-evakuasi {
    color: #ffffff;

    /* background: #0b8c59; */
}

.icon-p3k {
    color: #ffffff;

    /* background: #ef202d; */
}

/* =========================================================
   PERFORMANCE CARD
   ========================================================= */

.performance-card {
    flex: 1 1 auto;

    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    position: relative;

    background: linear-gradient(135deg, #ffffff, #f7faff);

    border: 1px solid rgba(6, 38, 95, 0.08);

    border-radius: clamp(5px, 0.6vh, 14px);

    box-shadow: 0 3px 12px rgba(5, 35, 85, 0.08);
}

/* =========================================================
   PERFORMANCE HEADER
   ========================================================= */

.performance-section-heading {
    flex: 0 0 clamp(34px, 5vh, 108px);

    width: min(48%, 900px);

    margin: clamp(4px, 0.7vh, 14px) 0 clamp(3px, 0.4vh, 8px) clamp(8px, 1vw, 28px);

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #ffffff;

    background: linear-gradient(135deg, #a84258, #8e2739, #5f1726);

    border-radius: 0 clamp(5px, 0.6vh, 14px) clamp(5px, 0.6vh, 14px) 0;
}

.performance-heading-icon {
    flex: 0 0 clamp(34px, 4.5vh, 98px);

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #8e2739;

    background: #ffffff;

    font-size: clamp(12px, 2vh, 43px);
}

.performance-heading-text {
    padding: 0 clamp(8px, 1vw, 22px);

    font-size: var(--performance-heading-size);

    font-weight: 900;

    white-space: nowrap;

    text-transform: uppercase;
}

/* =========================================================
   PERFORMANCE CONTENT
   ========================================================= */

.performance-content {
    flex: 1 1 auto;

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(100px, 15%) minmax(0, 1fr);

    gap: clamp(6px, 0.8vw, 18px);

    padding: 0 clamp(8px, 1vw, 25px) clamp(6px, 0.8vh, 14px);
}

/* =========================================================
   YEAR / KPIQ PERFORMANCE PANEL
   Reference design:
   - clean white card
   - centered typography
   - large year
   - thin blue divider
   - KPIQ PERFORMANCE label
   ========================================================= */

.performance-year-panel {
    min-height: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    /*
     * Keep the content visually centered horizontally while
     * preserving enough top space for the TV layout.
     */
    padding:
        clamp(24px, 6vh, 130px) clamp(8px, 1vw, 22px) clamp(12px, 2vh, 35px);

    text-align: center;

    background:
        #ffffff;

    border:
        1px solid #d6e0ec;

    border-radius:
        clamp(5px, .5vh, 12px);

    overflow: hidden;
}


/* ---------------------------------------------------------
   TAHUN
   --------------------------------------------------------- */

.performance-year-panel .year-caption {

    margin: 0;

    color:
        #3f4c63;

    font-size:
        clamp(14px, 2.15vh, 46px);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .01em;

    text-transform:
        uppercase;
}


/* ---------------------------------------------------------
   YEAR VALUE
   --------------------------------------------------------- */

.performance-year-panel .performance-year-value {

    display: block;

    width: 100%;

    margin:
        clamp(8px, 1.1vh, 24px) 0 0;

    color:
        #8e2739;

    font-size:
        clamp(40px, 6.6vh, 142px);

    font-weight:
        900;

    line-height:
        .88;

    letter-spacing:
        -.035em;

    font-variant-numeric:
        tabular-nums;
}


/* ---------------------------------------------------------
   DIVIDER
   --------------------------------------------------------- */

.performance-year-panel .year-line {

    width:
        clamp(80px, 9vh, 195px);

    height:
        clamp(1px, .18vh, 3px);

    margin:
        clamp(20px, 4vh, 85px) auto 0;

    background:
        #b76a79;

    border-radius:
        99px;
}


/* ---------------------------------------------------------
   KPIQ PERFORMANCE
   --------------------------------------------------------- */

.performance-year-panel .year-caption-small {

    margin:
        clamp(14px, 2.1vh, 45px) 0 0;

    color:
        #4e5d77;

    font-size:
        clamp(10px, 1.55vh, 33px);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .015em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


/* ---------------------------------------------------------
   1280 x 720 safety adjustment
   --------------------------------------------------------- */

@media (max-height: 800px) {

    .performance-year-panel {
        padding-top:
            clamp(18px, 4vh, 32px);
    }

    .performance-year-panel .year-caption {
        font-size:
            clamp(12px, 1.9vh, 18px);
    }

    .performance-year-panel .performance-year-value {
        margin-top:
            7px;

        font-size:
            clamp(34px, 5.5vh, 50px);
    }

    .performance-year-panel .year-line {
        width:
            clamp(70px, 10vh, 110px);

        margin-top:
            clamp(14px, 2.8vh, 24px);
    }

    .performance-year-panel .year-caption-small {
        margin-top:
            clamp(10px, 1.6vh, 15px);

        font-size:
            clamp(12px, 1.2vh, 12px);
    }
}

/* Ensure the reference year panel remains visually isolated. */
.performance-year-panel .year_value {
    text-align: center;
}

/* =========================================================
   PERFORMANCE LIST
   ========================================================= */

.performance-list {
    min-width: 0;

    min-height: 0;

    display: grid;

    grid-template-rows: repeat(4, minmax(0, 1fr));

    gap: clamp(5px, 0.8vh, 15px);
}

/* =========================================================
   PERFORMANCE ITEM
   ========================================================= */

.performance-item {
    min-width: 0;

    min-height: 0;

    display: grid;

    grid-template-columns:
        clamp(35px, 5vh, 100px) minmax(0, 1fr) clamp(65px, 20vh, 320px);

    align-items: center;

    gap: clamp(6px, 0.8vw, 18px);

    padding: clamp(4px, 0.7vh, 15px) clamp(6px, 0.8vw, 18px);

    background: #ffffff;

    border: 1px solid #d6e0ec;

    border-radius: clamp(5px, 0.5vh, 12px);
}

/* =========================================================
   PERFORMANCE ICON
   ========================================================= */

.performance-icon {
    width: clamp(30px, 4.5vh, 95px);

    height: clamp(30px, 4.5vh, 95px);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #8e2739;

    background: #e8f1ff;

    border-radius: clamp(5px, 0.6vh, 12px);

    font-size: var(--performance-icon-size);
}

/* =========================================================
   PERFORMANCE TEXT
   ========================================================= */

.performance-label {
    min-width: 0;
}

.performance-label .main {
    color: #5f1726;

    font-size: var(--performance-main-size);

    font-weight: 850;

    line-height: 1.08;

    text-transform: uppercase;
}

.performance-label .sub {
    margin-top: clamp(2px, 0.4vh, 8px);

    color: #59677b;

    font-size: var(--performance-sub-size);

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: 0.01em;
}

/* =========================================================
   PERFORMANCE VALUE
   ========================================================= */

.performance-value {
    min-width: 0;

    min-height: clamp(30px, 5vh, 108px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 clamp(7px, 1vw, 20px);

    color: #ffffff;

    background: linear-gradient(135deg, #a84258, #8e2739, #5f1726);

    border-radius: clamp(5px, 0.5vh, 12px);

    font-size: var(--performance-value-size);

    font-weight: 900;

    line-height: 1;

    font-variant-numeric: tabular-nums;
}

/* =========================================================
   FOOTER
   ========================================================= */

.tv-footer {
    flex: 0 0 var(--footer-height);

    min-height: 0;

    display: grid;

    grid-template-columns:
        8% minmax(0, 1fr) 21% 17% 8%;

    align-items: center;

    overflow: hidden;

    padding: 0 clamp(5px, 0.7vw, 18px);

    color: #ffffff;

    background: linear-gradient(135deg, #4f1422, #751f31, #5f1726);

    border: 2px solid #8e2739;

    border-radius: clamp(6px, 0.6vh, 14px);

    box-shadow: 0 3px 12px rgba(5, 35, 85, 0.14);
}

/* =========================================================
   FOOTER K3
   ========================================================= */

.footer-k3 {
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}

.footer-k3 img {
    width: auto;

    height: clamp(28px, 6vh, 130px);

    max-width: 70%;

    object-fit: contain;
}

/* =========================================================
   FOOTER MESSAGE
   ========================================================= */

.footer-message {
    min-width: 0;

    max-width: 100%;

    padding: 0 clamp(5px, 0.8vw, 20px);

    overflow: hidden;

    color: #ffffff;

    font-size: var(--footer-message-size);

    font-weight: 850;

    line-height: 1.05;

    text-transform: uppercase;
}

.footer-message .information_footer_board {
    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}

.footer-message .safe {
    color: #55d947;
}

/* =========================================================
   FOOTER DATE / CLOCK
   ========================================================= */

.footer-date,
.footer-clock {
    min-width: 0;

    height: 65%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: clamp(6px, 0.8vw, 20px);

    border-left: 1px solid rgba(255, 255, 255, 0.25);

    overflow: hidden;
}

.footer-label {
    color: #e0a7b2;

    font-size: var(--footer-label-size);

    font-weight: 800;

    line-height: 1;

    text-transform: uppercase;
}

.footer-value {
    margin-top: 0.2em;

    color: #ffffff;

    font-size: var(--footer-value-size);

    font-weight: 900;

    line-height: 1.05;

    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}

/* =========================================================
   VERY WIDE TV
   ========================================================= */

@media (min-aspect-ratio: 21/9) {
    .tv-header {
        grid-template-columns:
            18% 64% 18%;
    }

    .tv-footer {
        grid-template-columns:
            7% minmax(0, 1fr) 20% 16% 7%;
    }
}

/* =========================================================
   PORTRAIT SAFETY
   ========================================================= */

@media (orientation: portrait) {
    .tv-board {
        min-width: 100vw;

        overflow: hidden;
    }
}

/* =========================================================
   IMPORTANT:
   NO RESOLUTION MEDIA QUERY BELOW THIS LINE.
   =======================================================