/* ============================================================================
   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)
   ============================================================================ */

/* Device-card title: truncate long device names to one line (Alt post preview h4 pattern). */
#device-grid .card .h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 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%;
}

/* 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;
}

/* ============================================================================
   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;
}

/* IMEI table: clickable name/SN links should look natural inside the table. */
#imei-tbody a {
    color: inherit;
    text-decoration: none;
}
#imei-tbody a:hover {
    color: var(--bs-primary, #4482ff);
    text-decoration: underline;
}
#imei-tbody code a {
    color: inherit;
    text-decoration: none;
}
#imei-tbody code a:hover {
    color: var(--bs-primary, #4482ff);
    text-decoration: underline;
}


/* ============================================================================
   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;
}

/* ============================================================================
   Mobile navigation drawer (offcanvas) — layout glue only.
   Makes the offcanvas a full-height flex column so the profile footer anchors
   to the bottom. The footer is a direct child of .offcanvas (outside the
   scrollable .offcanvas-body), so it is always pinned and does not need
   margin-top: auto. No colors/fonts/shadows are added here.
   ============================================================================ */
.offcanvas.offcanvas-end.dzass-drawer {
    display: flex;
    flex-direction: column;
}
.dzass-drawer .offcanvas-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.dzass-drawer .dzass-drawer-footer {
    flex-shrink: 0;
}