html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

:root {
    --bg-top: #24567d;
    --bg-bottom: #0a1b2b;
    --panel: #e9eff5;
    --panel-2: #dce6f0;
    --text-dark: #0e1b25;
    --text-light: #eff6ff;
    --line: rgba(255, 255, 255, 0.14);
    --good: #15803d;
    --bad: #be123c;
    --progress-fill: #16a34a;
    --progress-track: #d1d9e0;
    --progress-over: #be123c;
    --gap: 0.45vmin;
}

* {
    box-sizing: border-box;
}

html,
body,
.productionboard {
    margin: 0;
    height: 100vh;
    width: 100vw;
}

.productionboard {
    font-family: "Bahnschrift", "Segoe UI Black", "Trebuchet MS", Arial, sans-serif;
    color: var(--text-light);
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
    padding: var(--gap);
}

.board-grid {
    display: grid;
    height: 100%;
    width: 100%;
    gap: var(--gap);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.1fr 4.8fr 1.5fr;
    grid-template-areas:
        "dept pace"
        "pie stats"
        "clock clock";
}

.board-card {
    border-radius: 1.2vmin;
    background: rgba(7, 18, 29, 0.46);
    box-shadow: inset 0 0 0 1px var(--line), 0 0.8vmin 1.6vmin rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.dept-card {
    grid-area: dept;
    display: grid;
    grid-template-rows: auto 1fr;
}

.pace-card {
    grid-area: pace;
    display: grid;
    grid-template-rows: auto 1fr;
}

.pie-card {
    grid-area: pie;
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
}

.stats-card {
    grid-area: stats;
    padding: 0.2vmin;
}

.clock-card {
    grid-area: clock;
    display: grid;
    align-items: center;
    padding: 0.2vmin 0.4vmin;
}

.label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 800;
    color: #e4edf7;
    background: linear-gradient(180deg, #1a4769 0%, #12334b 100%);
    font-size: clamp(26px, 4vh, 74px);
    line-height: 1;
    padding: 0.2em 0.3em;
}

.dept-value,
.pace-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    padding: 0.05em 0.12em;
    color: var(--text-dark);
    background: linear-gradient(180deg, #f8fbff 0%, var(--panel) 100%);
    font-weight: 900;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

.dept-value {
    font-size: clamp(72px, 8vh, 220px);
}

.pace-value {
    font-size: 10vw;
}

    .pace-value.is-behind {
        color: var(--bad);
    }

    .pace-value.is-ahead {
        color: var(--good);
    }

.progress-panel {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: center;
    gap: 2vmin;
    padding: 1.4vmin 1.8vmin;
    background: linear-gradient(180deg, #f8fbff 0%, var(--panel) 100%);
    min-height: 0;
    overflow: hidden;
}

.progress-track {
    width: 100%;
    height: clamp(56px, 10.5vh, 150px);
    border-radius: 999px;
    background: var(--progress-track);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(180deg, #2bc061 0%, var(--progress-fill) 100%);
    border-radius: 999px;
}

    .progress-fill.is-over {
        background: linear-gradient(180deg, #e04568 0%, var(--progress-over) 100%);
    }

.progress-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 0.01em;
    color: var(--text-dark);
    width: 100%;
    overflow: hidden;
}

.progress-percent,
.progress-meta,
.progress-over {
    width: 100%;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
}

.progress-percent {
    font-size: clamp(100px, 14vh, 250px);
    font-weight: 900;
}

.progress-meta {
    font-size: clamp(100px, 10vh, 160px);
    font-weight: 900;
}

.progress-over {
    color: var(--progress-over);
    font-size: clamp(34px, 5.2vh, 92px);
    font-weight: 900;
}

.stats-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--gap);
}

.stat-box {
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 1vmin;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--line);
    min-height: 0;
    min-width: 0;
}

.stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 0.95;
    padding: 0.03em 0.1em;
    color: var(--text-dark);
    background: linear-gradient(180deg, #f8fbff 0%, var(--panel-2) 100%);
    font-size: 14vw;
    font-weight: 900;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

#clock {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.72fr;
    gap: 0.35vmin;
}

.unit {
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8vmin;
    background: linear-gradient(180deg, #12354d 0%, #0a202d 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    color: #f8fbff;
    font-size: clamp(70px, 11vh, 186px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.01em;
}

#ampm {
    font-size: clamp(54px, 8.1vh, 136px);
}

@media (max-aspect-ratio: 10/16) {
    .board-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 3.1fr 2fr 1.2fr;
        grid-template-areas:
            "dept pace"
            "pie pie"
            "stats stats"
            "clock clock";
    }

    .dept-value {
        font-size: clamp(80px, 8vh, 170px);
    }

    .pace-value {
        font-size: 14vw;
    }

    .progress-panel {
        gap: 1.8vmin;
        padding: 1.2vmin 1.4vmin;
    }

    .progress-track {
        height: clamp(52px, 8vh, 120px);
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    .stat-value {
        font-size: 15vw;
    }

    #clock {
        grid-template-columns: 1fr 1fr 1fr 0.8fr;
    }

    .unit {
        font-size: clamp(80px, 9.5vh, 155px);
    }

    #ampm {
        font-size: clamp(60px, 7.2vh, 120px);
    }
}