@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --u-bg: #f5f7fb;
    --u-surface: #ffffff;
    --u-surface-2: #f9fafc;
    --u-border: #e6e9f0;
    --u-text: #1f2330;
    --u-text-muted: #6b7280;
    --u-primary: #4f46e5;
    --u-primary-hover: #4338ca;
    --u-success: #10b981;
    --u-danger: #ef4444;
    --u-warning: #f59e0b;
    --u-info: #3b82f6;
    --u-radius: 14px;
    --u-radius-sm: 10px;
    --u-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 4px rgba(15, 23, 42, 0.04);
    --u-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    --u-sidebar-bg: #ffffff;
    --u-sidebar-fg: #1f2330;
    --u-sidebar-muted: #6b7280;
    --u-brand-heartbeat: #1a2937;
    --u-brand-robot:     #12c688;
    --u-logo-bg:         transparent;
    --u-logo-filter:     none;
    --u-topbar-bg:       #ffffff;
    --u-footer-fg:       #6b7280;
}

[data-bs-theme="dark"] {
    --u-bg: #0f1420;
    --u-surface: #1a2233;
    --u-surface-2: #232c40;
    --u-border: #2c364c;
    --u-text: #e6e9f2;
    --u-text-muted: #94a3b8;
    --u-primary: #818cf8;
    --u-primary-hover: #a5b4fc;
    --u-success: #34d399;
    --u-danger: #f87171;
    --u-warning: #fbbf24;
    --u-info: #60a5fa;
    --u-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.20);
    --u-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    --u-sidebar-bg: #131a29;
    --u-sidebar-fg: #e6e9f2;
    --u-sidebar-muted: #8a96ad;
    --u-brand-heartbeat: #e6e9f2;
    --u-brand-robot:     #34d399;
    --u-logo-bg:         #e6e9f2;
    --u-logo-filter:     none;
    --u-topbar-bg:       #131a29;
    --u-footer-fg:       #8a96ad;
    color-scheme: dark;
}

.brand-name {
    font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
}
.brand-name .heartbeat { color: var(--u-brand-heartbeat); }
.brand-name .robot     { color: var(--u-brand-robot); }

html, body { height: 100%; }
body.app-body, body.login-body {
    margin: 0;
    background: var(--u-bg);
    color: var(--u-text);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--u-primary); text-decoration: none; }
a:hover { color: var(--u-primary-hover); }

/* ---------------------- Login ---------------------- */
.login-body {
    background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.login-card-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    background: #fff;
    border-radius: 18px;
    padding: 40px 36px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 420px;
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.login-tagline { color: var(--u-text-muted); margin-bottom: 24px; }
.login-footer { color: var(--u-text-muted); font-size: 12px; text-align: center; margin: 24px 0 0; }
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    transform: translateY(-4px);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------------------- Shell ---------------------- */
.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}
.app-sidebar {
    background: var(--u-sidebar-bg);
    color: var(--u-sidebar-fg);
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--u-border);
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 22px;
    border-bottom: 1px solid var(--u-border);
    color: inherit;
    text-decoration: none;
}
.sidebar-brand:hover { color: inherit; text-decoration: none; }
.sidebar-brand .brand-name { font-size: 18px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; flex: 1; }
.sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--u-sidebar-muted);
    font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar-link i { width: 18px; text-align: center; }
.sidebar-link:hover { background: var(--u-surface-2); color: var(--u-text); }
.sidebar-link.active { background: rgba(79, 70, 229, 0.1); color: var(--u-primary); }
.sidebar-summary {
    border-top: 1px solid var(--u-border);
    padding-top: 16px;
    display: flex; flex-direction: column; gap: 8px;
    font-size: 13px;
}
.summary-row { display: flex; justify-content: space-between; color: var(--u-sidebar-muted); }
.summary-row strong { color: var(--u-text); font-weight: 600; }

/* ---------------------- Main ---------------------- */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 28px;
    background: var(--u-surface);
    border-bottom: 1px solid var(--u-border);
}
.topbar-title { display: flex; flex-direction: column; gap: 2px; }
.topbar-clock { color: var(--u-text-muted); font-size: 12px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.app-content { padding: 24px 28px 64px; flex: 1; }

@media (max-width: 991px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
    }
    .app-sidebar { border-right: none; border-bottom: 1px solid var(--u-border); }
    .sidebar-brand { border-bottom: none; padding: 0; }
    .sidebar-nav { flex-direction: row; padding: 0; gap: 4px; flex: 1; }
    .sidebar-link span { display: none; }
    .sidebar-summary { display: none; }
    .app-content { padding: 16px; }
}

/* ---------------------- Cards ---------------------- */
.panel {
    background: var(--u-surface);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-sm);
}
.panel .card-header {
    background: transparent;
    border-bottom: 1px solid var(--u-border);
    padding: 14px 18px;
}
.panel .card-body { padding: 18px; }
.panel .card-footer {
    background: var(--u-surface-2);
    border-top: 1px solid var(--u-border);
    padding: 14px 18px;
}

.stat-card {
    background: var(--u-surface);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius);
    padding: 18px 20px;
    box-shadow: var(--u-shadow-sm);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--u-primary);
    opacity: .85;
}
.stat-card-success::before { background: var(--u-success); }
.stat-card-danger::before  { background: var(--u-danger); }
.stat-card-info::before    { background: var(--u-info); }
.stat-card-label { color: var(--u-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.stat-card-value { font-size: 28px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.stat-card-value small { font-size: 14px; font-weight: 500; color: var(--u-text-muted); margin-left: 2px; }
.stat-card-sub { color: var(--u-text-muted); font-size: 12px; margin-top: 6px; }

/* ---------------------- Status ---------------------- */
.status-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}
.status-up      { background: var(--u-success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.status-down    { background: var(--u-danger);  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); animation: pulse 1.6s infinite; }
.status-warning { background: var(--u-warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.status-paused  { background: #94a3b8; }
.status-pending { background: #94a3b8; }
.status-open    { background: var(--u-danger); animation: pulse 1.6s infinite; }
.status-resolved{ background: var(--u-success); }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.10); }
}

/* ---------------------- Monitor cards ---------------------- */
.monitor-card {
    display: block;
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius);
    padding: 16px;
    background: var(--u-surface);
    color: var(--u-text);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-shadow: var(--u-shadow-sm);
    height: 100%;
}
.monitor-card:hover { transform: translateY(-1px); box-shadow: var(--u-shadow); border-color: #cdd5e3; }
.monitor-card-head { display: flex; align-items: flex-start; gap: 8px; }
.monitor-card-title { flex: 1; min-width: 0; }
.monitor-name { font-weight: 600; }
.monitor-target { color: var(--u-text-muted); font-size: 12px; word-break: break-all; text-transform: lowercase; }
.monitor-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.monitor-card-stats .stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--u-text-muted); }
.monitor-card-stats .stat-val { display: block; font-weight: 600; }
.monitor-card-spark {
    margin-top: 12px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.monitor-card-spark canvas { width: 100% !important; height: 40px !important; }
.monitor-card-spark-empty {
    color: var(--u-text-muted);
    font-size: 11px;
    font-style: italic;
}
.monitor-card-ssl { margin-top: 10px; font-size: 12px; color: var(--u-text-muted); }
.monitor-card-danger  { border-color: rgba(239, 68, 68, .35); }
.monitor-card-warning { border-color: rgba(245, 158, 11, .35); }
.monitor-card-success { border-color: rgba(16, 185, 129, .25); }

.monitor-card-flash {
    animation: monitor-card-flash 0.8s ease-out;
}
@keyframes monitor-card-flash {
    0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.55); }
    100% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); }
}

/* ---------------------- 90-day uptime strip ---------------------- */
.uptime-strip-list { display: flex; flex-direction: column; gap: 22px; }
.uptime-strip-row + .uptime-strip-row { border-top: 1px solid var(--u-border); padding-top: 22px; }
.uptime-strip-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px;
}
.uptime-strip-name { font-weight: 600; color: var(--u-text); min-width: 0; }
.uptime-strip-name:hover { color: var(--u-primary); }
.uptime-strip-pct { font-weight: 600; font-size: 13px; color: var(--u-text-muted); white-space: nowrap; }
.uptime-bars {
    display: flex;
    gap: 2px;
    align-items: stretch;
    height: 34px;
}
.uptime-bar {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 2px;
    background: #cbd5e1;
    transition: transform .1s ease, filter .1s ease;
}
.uptime-bar:hover { transform: scaleY(1.08); filter: brightness(1.05); cursor: default; }
.uptime-bar-up      { background: var(--u-success); }
.uptime-bar-warning { background: var(--u-warning); }
.uptime-bar-down    { background: var(--u-danger); }
.uptime-bar-empty   { background: #cbd5e1; }
.uptime-strip-foot {
    display: flex; justify-content: space-between;
    margin-top: 6px;
    font-size: 11px; color: var(--u-text-muted);
}
[data-bs-theme="dark"] .uptime-bar-empty { background: #3c4a66; }

/* Custom cursor tooltip for the uptime bars. Replaces per-bar Bootstrap
 * tooltips, which could get left behind ("stuck") when sweeping across the
 * 90 thin bars. One element, fully controlled by mouse events. */
.uptime-tooltip {
    position: fixed;
    z-index: 1080;
    background: #0f172a;
    color: #fff;
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
    opacity: 0;
    transition: opacity .08s ease;
}
.uptime-tooltip.is-visible { opacity: 1; }

/* ---------------------- Dashboard widget grid ---------------------- */
.dash-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dash-toolbar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.dash-grid {
    display: grid;
    gap: 16px;
    align-items: stretch;
}
.dash-widget { position: relative; min-width: 0; display: flex; }
.dash-widget-body { flex: 1; min-width: 0; display: flex; }
.dash-widget-body > * { flex: 1; min-width: 0; }
.dash-widget.is-disabled { display: none; }
.dash-widget-frame { display: none; }

/* Customize mode: bodies collapse to uniform draggable tiles. */
.dash-grid.is-customizing .dash-widget {
    border: 1.5px dashed var(--u-border);
    border-radius: var(--u-radius);
    background: var(--u-surface);
    min-height: 84px;
    cursor: grab;
    box-shadow: var(--u-shadow-sm);
}
.dash-grid.is-customizing .dash-widget:hover { border-color: var(--u-primary); }
.dash-grid.is-customizing .dash-widget.is-disabled { display: flex; opacity: .5; }
.dash-grid.is-customizing .dash-widget-body { display: none; }
.dash-grid.is-customizing .dash-widget-frame { display: flex; flex: 1; align-items: center; padding: 12px 14px; }
.dash-grid.is-customizing .dash-widget.dragging { opacity: .35; cursor: grabbing; }
.dash-grid.is-customizing .dash-widget.drop-target { border-color: var(--u-primary); border-style: solid; }

.dash-widget-controls { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.dash-widget-grip { color: var(--u-text-muted); cursor: grab; flex-shrink: 0; }
.dash-widget-title {
    font-weight: 600; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-widget.is-disabled .dash-widget-title { color: var(--u-text-muted); }
.dash-widget-width {
    display: inline-flex; align-items: center;
    border: 1px solid var(--u-border); border-radius: 8px;
    overflow: hidden; flex-shrink: 0;
}
.dash-width-btn {
    border: 0; background: var(--u-surface-2); color: var(--u-text);
    width: 26px; height: 26px; line-height: 1; cursor: pointer; font-size: 14px;
}
.dash-width-btn:hover:not(:disabled) { background: var(--u-border); }
.dash-width-btn:disabled { opacity: .4; cursor: not-allowed; }
.dash-width-val { min-width: 22px; text-align: center; font-size: 13px; font-weight: 600; }
.dash-widget-switch { flex-shrink: 0; }

/* On narrow screens everything stacks to a single column regardless of the
 * saved column count, matching the rest of the responsive shell. */
@media (max-width: 767px) {
    .dash-grid { grid-template-columns: 1fr !important; }
    .dash-widget { grid-column: 1 / -1 !important; }
}

/* ---------------------- Tables ---------------------- */
.monitor-table thead th {
    background: var(--u-surface-2);
    color: var(--u-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border-bottom: 1px solid var(--u-border);
}

/* ---------------------- Incidents ---------------------- */
.incident-list { max-height: 360px; overflow: auto; }
.incident-item {
    display: flex; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--u-border);
}
.incident-item:last-child { border-bottom: none; }
.incident-body { flex: 1; min-width: 0; }
.incident-title { display: block; font-weight: 600; color: var(--u-text); }
.incident-meta  { color: var(--u-text-muted); font-size: 12px; margin-top: 2px; }
.incident-error { color: var(--u-danger); font-size: 12px; margin-top: 4px; word-break: break-word; }

/* ---------------------- Buttons / forms ---------------------- */
.btn-primary { background: var(--u-primary); border-color: var(--u-primary); }
.btn-primary:hover { background: var(--u-primary-hover); border-color: var(--u-primary-hover); }
.empty-state { color: var(--u-text-muted); }
.form-label { font-weight: 600; font-size: 13px; }

.guide-card { transition: transform .15s, box-shadow .15s, border-color .15s; }
.guide-card:hover { transform: translateY(-1px); box-shadow: var(--u-shadow); border-color: #cdd5e3; }
.guide-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4A154B, #6E2168);
    color: #fff;
    font-size: 20px;
}
.guide-icon-telegram { background: linear-gradient(135deg, #0088cc, #229ED9); }

.device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--u-surface-2);
    color: var(--u-text-muted);
    font-size: 16px;
    flex-shrink: 0;
}

/* ---------------------- Footer ---------------------- */
.app-footer {
    background: #1a2937;
    color: #cbd5e1;
    padding: 18px 28px;
    font-size: 13px;
    text-align: center;
}
.app-footer a { color: #12c688; text-decoration: none; }
.app-footer a:hover { color: #fff; text-decoration: underline; }
.app-footer-sep { margin: 0 10px; color: #475569; }

/* ====================================================================
 * Dark mode
 * Tokens come from the [data-bs-theme="dark"] block at the top of this
 * file. The rules below patch a handful of components that have hardcoded
 * colors or that benefit from a darker accent (logo backdrop, hover state).
 * ==================================================================== */
[data-bs-theme="dark"] body.app-body,
[data-bs-theme="dark"] body.login-body { background: var(--u-bg); color: var(--u-text); }

[data-bs-theme="dark"] .app-topbar      { background: var(--u-topbar-bg); }
[data-bs-theme="dark"] .app-sidebar     { border-right-color: var(--u-border); }
[data-bs-theme="dark"] .sidebar-brand   { border-bottom-color: var(--u-border); }
[data-bs-theme="dark"] .sidebar-link    { color: var(--u-sidebar-muted); }
[data-bs-theme="dark"] .sidebar-link:hover { background: var(--u-surface-2); color: var(--u-text); }
[data-bs-theme="dark"] .sidebar-link.active { background: rgba(129, 140, 248, 0.18); color: #c7d2fe; }

[data-bs-theme="dark"] .monitor-card:hover { border-color: #3c4a66; }
[data-bs-theme="dark"] .guide-card:hover   { border-color: #3c4a66; }

/* The logo PNG has a dark blue outline that disappears on a dark sidebar.
 * Give the mark a light circular backdrop so it stays visible. Replace the
 * source with a real dark-mode logo and remove this rule to drop the badge. */
[data-bs-theme="dark"] .brand-mark {
    background: var(--u-logo-bg);
    border-radius: 50%;
    padding: 3px;
    box-sizing: border-box;
}
[data-bs-theme="dark"] .brand-mark img { filter: var(--u-logo-filter); }

/* Bootstrap-light buttons & badges in the topbar/cards stay readable. */
[data-bs-theme="dark"] .btn-light {
    background: var(--u-surface-2);
    color: var(--u-text);
    border-color: var(--u-border);
}
[data-bs-theme="dark"] .btn-light:hover { background: var(--u-border); color: var(--u-text); }
[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--u-text);
    border-color: var(--u-border);
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary.active {
    background: var(--u-surface-2);
    color: var(--u-text);
    border-color: var(--u-border);
}
[data-bs-theme="dark"] .badge.text-bg-light {
    background: var(--u-surface-2) !important;
    color: var(--u-text) !important;
}

/* Charts: re-render uses these so axes/labels stay legible in dark. */
[data-bs-theme="dark"] canvas { color: var(--u-text-muted); }

/* Tables and dropdowns inherit Bootstrap dark, but the alert variants
 * default to washed-out backgrounds; pin them to readable values. */
[data-bs-theme="dark"] .alert-success { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.25); }
[data-bs-theme="dark"] .alert-danger  { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border-color: rgba(248, 113, 113, 0.25); }
[data-bs-theme="dark"] .alert-warning { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.25); }
[data-bs-theme="dark"] .text-muted    { color: var(--u-text-muted) !important; }

[data-bs-theme="dark"] .app-footer    { background: #0a0f1a; color: var(--u-footer-fg); }
[data-bs-theme="dark"] .app-footer-sep { color: #2c364c; }

/* Primary buttons: the dark-mode --u-primary is a pastel indigo that reads
 * fine for links and the sidebar accent but looks washed out on filled
 * buttons. Pin the button surfaces to a richer indigo with white text. */
[data-bs-theme="dark"] .btn-primary {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}
[data-bs-theme="dark"] .btn-outline-primary {
    color: #a5b4fc;
    border-color: #4f46e5;
    background: transparent;
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}