/* ============================================================================
   DZASS Portal — custom overrides on top of the Silicon UI Kit (Bootstrap 5).
   Kept intentionally small; Silicon provides the bulk of the styling.
   Later phases append chart-host / sentinel rules here.
   ============================================================================ */

/* --- Base font: Google Sans (applies globally via Bootstrap variable) ------ */
:root {
    --bs-body-font-family: "Google Sans", sans-serif;
}
body {
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "GRAD" 0;
}

/* --- Authentication background (subtle) ----------------------------------- */
.authentication-bg {
    background-color: #f6f8fb;
    background-image: linear-gradient(135deg, #f6f8fb 0%, #eef2f7 100%);
}

/* Login card sits comfortably centered with a little breathing room. */
.authentication-bg .card {
    border: 0;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
}

/* Left-aligned icon inside the auth inputs. */
.input-custom-icon .form-control {
    padding-left: 2.4rem;
}
.input-custom-icon .bx {
    font-size: 1.15rem;
    color: #9aa6b2;
}

/* --- Spinner utility ------------------------------------------------------ */
.spinner-portal {
    width: 3rem;
    height: 3rem;
}

/* ============================================================================
   Dashboard (Phase 6)
   ============================================================================ */

/* Card status tinting — subtle left border + background wash. */
.card-online {
    border-left: 3px solid var(--bs-success, #18c45f) !important;
    background-color: rgba(25, 135, 84, 0.03);
}
.card-offline {
    border-left: 3px solid #adb5bd !important;
    background-color: rgba(108, 117, 125, 0.04);
    opacity: 0.92;
}

/* Device-card title: truncate long SNs / device names to one line. */
.device-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Device-card SN: medium tier — larger than stats (fs-xs), smaller than title (h6). */
.device-card-sn {
    font-size: 0.9375rem;       /* 15px — between h6 (1rem) and fs-xs (0.75rem) */
    line-height: 1.4;
    color: var(--bs-body-color); /* same color as the card title */
}

/* Infinite-scroll sentinel spinner sizing. */
#scroll-sentinel .spinner-border {
    width: 2.25rem;
    height: 2.25rem;
}

/* Filter pill count badges sit neatly to the right of the label. */
.nav-pills .nav-link .badge {
    vertical-align: middle;
}

/* Ensure stretched-link cards stay clickable + heights align across a row. */
#device-grid .card {
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}
#device-grid .card:hover {
    transform: translateY(-2px);
}

/* ============================================================================
   Device detail (Phase 7)
   ============================================================================ */

/* Spacing between the tab bar and its panes. */
.tab-content {
    padding-top: 1.25rem;
}

/* Detail header metadata row: keep the small MAC/Router/FRP chips on one line
   on wider screens, wrapping gracefully on mobile. */
.detail-meta {
    row-gap: 0.25rem;
}

/* --- Shiki JSON code block (Overview) + live log (Raw) --------------------- */

.raw-code-wrap { max-height: 28rem; overflow: auto; }
/* Hosts are transparent containers; Shiki's <pre> provides the theme background. */
.raw-code-host, .raw-log-code {
    background: transparent; font-size: 0.8rem; line-height: 1.45;
}
.raw-code-host { padding: 0.6rem; }
.raw-log-code { padding: 0.6rem; }
/* Shiki output owns the theme background + token colors; let it fill the host. */
.raw-code-host > pre.shiki,
.raw-log-code > pre.shiki {
    margin: 0; padding: 0.9rem; border-radius: 0.4rem;
    font-size: 0.8rem; line-height: 1.45; overflow: auto;
}
.raw-code-host > pre.shiki code,
.raw-log-code > pre.shiki code { background: transparent; }
/* Plain-text fallback when the Shiki ESM CDN is blocked. */
.shiki-fallback {
    margin: 0; padding: 0.9rem; border-radius: 0.4rem; background: #f6f8fa;
    font-size: 0.8rem; line-height: 1.45; white-space: pre;
    font-family: var(--bs-font-monospace, monospace);
}
.raw-log-wrap { max-height: 34rem; overflow: auto; border: 1px solid #e9ecef; border-radius: 0.4rem; }
.raw-log { padding: 0.5rem; }
.raw-log-line { border-bottom: 1px solid #eef0f2; padding: 0.4rem 0; }
.raw-log-line:last-child { border-bottom: 0; }
.raw-log-ts {
    font-size: 0.72rem; color: #6c757d; margin-bottom: 0.25rem;
    font-family: var(--bs-font-monospace, monospace);
}

/* --- Chart cards (ECharts hosts) ------------------------------------------- */
/* Time-series chart hosts use inline height:320px (see device.js createChart). */

/* ============================================================================
   Admin UI (Phase 8) — users + audit pages
   ============================================================================ */

/* Audit "Content" cell: long JSON should wrap rather than stretch the table. */
#audit-tbody code {
    word-break: break-all;
    white-space: normal;
}

/* Users table action column: keep the icon buttons on one row. */
#users-tbody .text-nowrap {
    column-gap: 0.15rem;
}

/* --- Camera indicator dots on dashboard device cards ------------------------- */
.camera-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.camera-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ============================================================================
   Alert System (Phase 6)
   ============================================================================ */

/* Alert status badges */
.badge-active { background-color: #dc3545 !important; color: #fff !important; }
.badge-dismissed-cleared { background-color: #198754 !important; color: #fff !important; }
.badge-dismissed-manual { background-color: #6c757d !important; color: #fff !important; }
.badge-dismissed-rule { background-color: #ffc107 !important; color: #212529 !important; }

/* Condition display (e.g., "≥ 80.0 °C") */
.condition-display { font-weight: 600; white-space: nowrap; }

/* ============================================================================
   Proxy Status Banner (Variant 1 — above navbar)
   ============================================================================ */

.proxy-status-banner {
    background-color: #dc3545;
    color: #fff;
    width: 100%;
    position: relative;
    z-index: 1030;
    font-size: 0.875rem;
}

.proxy-status-banner i {
    color: #fff;
}

.proxy-banner-methods {
    opacity: 0.85;
}

.proxy-banner-link {
    color: #fff;
    text-decoration: underline;
    font-weight: 500;
    white-space: nowrap;
}

.proxy-banner-link:hover {
    color: #fff;
    opacity: 0.85;
}

/* Push the navbar down when the banner is visible */
body.has-proxy-banner header.navbar {
    margin-top: 0;
}