/* DrumBeat Dashboard styles (ported from Viking-Db-Dashboard-Web).
   Page-level styles only — the site chrome (header/nav/footer) comes from
   VikingWeb's shared layout, so the body/topbar/bottombar rules are dropped.

   This stylesheet is loaded ONLY on the dashboard page, so it's safe to widen
   the shared Bootstrap .container here and use fluid (clamp) typography.

   NOTE on the clamp() ranges: the stat values are long, unbreakable currency
   strings (e.g. $11,443,290.79), so the vw term is kept SMALL on purpose.
   Big vw scaling makes those numbers overflow/clip their tiles. */
:root {
    --vk-blue: #1d6fb8;
    --vk-dark: #15324a;
    --vk-green: #007A65;
    --ok: #1e7e34;
    --danger: #c62828;
    --bg: #eef2f6;
    --panel: #ffffff;
    --border: #d3dbe3;
}

/* Break the dashboard out of Bootstrap's fixed-width .container so it uses the
   full width of widescreen monitors. Loaded only on this page, so other pages
   keep their centred container. */
.container:has(.dash) {
    max-width: none;
    width: 100%;
    padding-inline: clamp(0.75rem, 3vw, 4rem);
}
main:has(.dash) { overflow-x: visible; }

.dash { padding: 1rem 0; }

.status-row { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.status-badge {
    font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.95rem);
    font-weight: 600;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    color: #fff;
}
.status-badge.connected { background: var(--ok); }
.status-badge.disconnected { background: var(--danger); }

/* Stat tiles — auto-fit spreads the 7 tiles across the full row on a
   widescreen; 1fr tracks stretch them to fill it. min-width:0 stops a long
   number from forcing a track wider than its share and blowing out the grid. */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(0.5rem, 0.8vw, 1rem);
    margin-bottom: 1rem;
}
.tile {
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: clamp(0.6rem, 0.45rem + 0.4vw, 1rem) clamp(0.6rem, 0.5rem + 0.4vw, 1rem);
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.tile-label {
    font-size: clamp(0.68rem, 0.62rem + 0.18vw, 0.92rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5b6b7b;
}
.tile-value {
    font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.8rem);
    font-weight: 700;
    margin-top: 0.25rem;
    line-height: 1.15;
}
.tile-ok .tile-value { color: var(--ok); }
.tile-danger { background: #fdecea; border-color: #f3b6b1; }
.tile-danger .tile-value { color: var(--danger); }

/* Text panels */
.panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(0.5rem, 0.8vw, 1rem);
    margin-bottom: 1rem;
    align-items: start;
}
.panel {
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem) clamp(0.9rem, 0.8rem + 0.5vw, 1.4rem);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.panel h1 {
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.55rem);
    color: var(--vk-dark);
    margin: 0 0 0.4rem;
}
.panel h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.3rem);
    color: var(--vk-blue);
}
.panel ul { margin: 0; padding-left: 1.1rem; }
.panel li {
    margin-bottom: 0.2rem;
    font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1.1rem);
}
.muted { color: #8a97a4; }

/* Culture / Daily Reminder — near their original size, but click-to-enlarge. */
.panel-feature {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.panel-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.panel-feature h2 {
    color: var(--vk-dark);
    overflow-wrap: anywhere;
}

/* Enlarged pop-up view for a feature box. */
.box-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1050;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.box-modal.open { display: flex; }
.box-modal-content {
    position: relative;
    background: var(--panel);
    border-radius: 16px;
    padding: clamp(2rem, 1rem + 3vw, 4.5rem);
    width: min(1400px, 96%);
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.4);
}
.box-modal-content h1 {
    color: var(--vk-green);
    font-size: clamp(2.1rem, 1.4rem + 2vw, 3.8rem);
    margin: 0 0 1.5rem;
}
#boxModalBody {
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 4.4rem);
    font-weight: 600;
    color: var(--vk-dark);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.box-modal-close {
    position: absolute;
    top: 10px;
    right: 18px;
    background: none;
    border: none;
    font-size: 2.2rem;
    line-height: 1;
    color: #5b6b7b;
    cursor: pointer;
}
.box-modal-close:hover { color: #000; }

/* Training button */
.training-btn {
    align-self: center;
    background: var(--vk-green);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: clamp(0.7rem, 0.55rem + 0.4vw, 1.1rem) clamp(1rem, 0.8rem + 0.6vw, 1.8rem);
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.4rem);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.training-btn:hover { background: #00614f; }

/* Chart + calendar row */
.wide {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(0.5rem, 0.8vw, 1rem);
}
@media (max-width: 900px) { .wide { grid-template-columns: 1fr; } }

.calendar-header { display: flex; align-items: center; justify-content: space-between; }
.calendar-header h2 { margin: 0; }
.cal-nav {
    text-decoration: none;
    color: var(--vk-blue);
    font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.7rem);
    padding: 0 0.5rem;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-top: 0.6rem;
}
.cal-dow {
    text-align: center;
    font-weight: 600;
    font-size: clamp(0.7rem, 0.64rem + 0.2vw, 0.95rem);
    color: #5b6b7b;
    padding-bottom: 0.2rem;
}
.cal-cell {
    min-width: 0;
    min-height: clamp(64px, 5vw, 100px);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 4px;
    background: #fafcfe;
    font-size: clamp(0.74rem, 0.68rem + 0.2vw, 1rem);
    overflow-wrap: anywhere;
}
.cal-cell.empty { background: transparent; border: none; }
.cal-cell.today { background: lightblue; border-color: #7bb7d6; }
.cal-day { font-weight: 700; }
.cal-event {
    display: block;
    margin-top: 2px;
    color: var(--vk-dark);
    font-size: clamp(0.66rem, 0.6rem + 0.18vw, 0.9rem);
}