/* ── Variables ─────────────────────────────────────── */
:root {
    --sidebar-bg:              #0f172a;
    --sidebar-width:           240px;
    --sidebar-collapsed-width: 68px;
    --nav-active-bg:           #2563eb;
    --content-bg:              #f1f5f9;
    --card-border:             #e2e8f0;
    --text-muted:              #64748b;
    --radius:                  10px;
}

/* ── Alpine cloak ──────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Layout ────────────────────────────────────────── */
/* This is a fixed-shell SPA — the app div is sized to the viewport (see
   index.html's --vh) and everything scrollable does so internally
   (.main-content). html/body intentionally do NOT get overflow:hidden here:
   that was a workaround for a since-fixed bug (stale vh/dvh on a
   cold-launched Android standalone PWA making the shell taller than the
   screen) and it had the side effect of disabling the browser's native
   pull-to-refresh gesture, which needs the document itself to be a
   recognised scroll context even when there's nothing to scroll. */
html, body {
    height: 100%;
    margin: 0;
}

body { background: var(--content-bg); }

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    padding: 10px;
    /* 100% of the app shell (which already accounts for the safe-area insets
       below), not 100vh — a hardcoded 100vh would re-claim the full screen
       and ignore that padding once .sidebar goes position:fixed on mobile. */
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    transition: width .22s ease, min-width .22s ease, padding .22s ease;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
    padding-left: 6px;
    padding-right: 6px;
}

/* ── Sidebar toggle button (brand area) ────────────── */
.sidebar-toggle-btn {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    margin-bottom: 16px;
    cursor: pointer;
    width: 100%;
    border-radius: 7px;
    transition: background .15s;
    text-align: left;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover { background: rgba(255,255,255,.08); }

.sidebar.collapsed .sidebar-toggle-btn {
    justify-content: center;
    padding: 4px 0;
}

.sidebar.collapsed .sidebar-brand-text { display: none; }

/* ── Nav links collapsed ───────────────────────────── */
.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 9px 0;
}

.sidebar.collapsed .nav-link span { display: none; }

/* ── User footer collapsed ─────────────────────────── */
.sidebar.collapsed .sidebar-user { justify-content: center; }
.sidebar.collapsed .sidebar-user-info { display: none; }
.sidebar.collapsed .sidebar-user-logout { display: none; }

.sidebar-inner {
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 16px 10px;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%; /* see .sidebar comment above */
    max-height: 100%;
    /* The single scroll container for this column — .topbar is pinned via
       position:sticky below, and .page-content is no longer its own nested
       scroll area. Relying on flexbox to bound .page-content's height so
       *it* could scroll internally turned out to be unreliable in the
       Android standalone-PWA WebView (its available height wasn't computed
       correctly, so overflowing content was simply clipped instead of
       scrollable). Scrolling the whole column and pinning the header is far
       less sensitive to that kind of viewport-height miscalculation. */
    overflow-y: auto;
}

/* ── Sidebar nav ───────────────────────────────────── */
.sidebar .nav-link {
    color: rgba(255,255,255,.5);
    border-radius: 7px;
    padding: 9px 12px;
    font-size: .875rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.sidebar .nav-link:hover {
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.06);
}

.sidebar .nav-link.active {
    background: var(--nav-active-bg);
    color: #fff !important;
}

.sidebar .nav-link i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Topbar ────────────────────────────────────────── */
.topbar {
    border-bottom: 1px solid var(--card-border);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    /* Pinned to the top of .main-content's own scroll (see there) — stays
       visible regardless of how tall .page-content's content turns out to
       be, instead of depending on exact flexbox height math. */
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar h5 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: #0f172a;
}

/* ── Page content ──────────────────────────────────── */
.page-content {
    /* No longer its own scroll container — .main-content scrolls as a
       whole now (see there). flex:1 just gives it room to grow so short
       views still fill the available height instead of collapsing. */
    flex: 1;
    background: #f8fafc;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Cards ─────────────────────────────────────────── */
.app-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.app-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

.app-card-header h6 {
    font-size: .9rem;
    font-weight: 600;
    margin: 0;
    color: #0f172a;
}

.app-card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--card-border);
    background: #fff;
    display: flex;
    justify-content: flex-end;
}

/* ── Tables ────────────────────────────────────────── */
.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.app-table th {
    padding: 9px 12px;
    background: #f8fafc;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}

.app-table td {
    padding: 2px 4px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #1e293b;
}

.app-table tbody tr:last-child td { border-bottom: none; }

.app-table tbody tr:hover { background: #f8fafc; }

.app-table .col-num {
    width: 44px;
    text-align: center;
    color: var(--text-muted);
    font-size: .75rem;
    padding: 8px 4px;
}

.app-table .col-action { width: 44px; text-align: center; }

/* ── Editable table inputs ─────────────────────────── */
.cell-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    padding: 7px 8px;
    font-size: .8rem;
    color: #1e293b;
    border-radius: 5px;
}

.cell-input::placeholder { color: #cbd5e1; }

.cell-input:focus {
    background: #eff6ff;
    box-shadow: 0 0 0 2px #bfdbfe;
}

.cell-select {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #fff;
    outline: none;
    padding: 6px 8px;
    font-size: .8rem;
    color: #1e293b;
    border-radius: 5px;
    cursor: pointer;
    appearance: auto;
}

.cell-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px #bfdbfe;
    outline: none;
}

/* ── Filter bar ────────────────────────────────────── */
.filter-bar {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.filter-divider {
    width: 1px;
    height: 20px;
    background: var(--card-border);
    flex-shrink: 0;
}

/* ── Check row cards ───────────────────────────────── */
.check-row {
    background: #f5f5f5;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
}

.check-row-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .12s;
}

.check-row-header:hover { background: #f8fafc; }

.check-row-body {
    border-top: 1px solid var(--card-border);
    padding: 16px;
    background: #fafafa;
}

/* ── Status badge ──────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    background: #f1f5f9;
    color: #64748b;
}

.status-badge.status-pinging { background: #dcfce7; color: #15803d; }
.status-badge.status-ok      { background: #dbeafe; color: #1d4ed8; }
.status-badge.status-error   { background: #fee2e2; color: #b91c1c; }

/* ── Check row detail fields ───────────────────────── */
.detail-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.detail-value {
    font-size: .82rem;
    color: #1e293b;
}

.detail-content {
    font-size: .8rem;
    background: #f8fafc;
    border-radius: 6px;
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #334155;
    line-height: 1.6;
}

/* ── Check row index cell ──────────────────────────── */
.check-row-idx {
    width: 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* ── Report card ───────────────────────────────────── */
.report-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.report-card-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

/* ── Buttons ───────────────────────────────────────── */
.btn-icon {
    background: none;
    border: none;
    padding: 5px 7px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .12s, color .12s;
    line-height: 1;
}

.btn-icon:hover { background: #fee2e2; color: #ef4444; }

/* ── User footer in sidebar ────────────────────────── */
.sidebar-user {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 12px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 4px;
    padding-right: 4px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Empty / loading states ────────────────────────── */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state i { font-size: 2.5rem; color: #cbd5e1; display: block; margin-bottom: 12px; }

/* ── Global search page ────────────────────────────── */
.search-hero {
    margin-bottom: 28px;
}

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid var(--card-border);
    border-radius: 12px;
    padding: 0 14px;
    transition: border-color .15s, box-shadow .15s;
    margin-bottom: 10px;
}

.search-input-wrap:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px #bfdbfe;
}

.search-input-icon {
    color: #94a3b8;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-right: 10px;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: #1e293b;
    padding: 14px 0;
}

.search-input::placeholder { color: #94a3b8; }

.search-input-spinner {
    flex-shrink: 0;
    margin-left: 10px;
}

.search-clear-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
    font-size: .8rem;
    flex-shrink: 0;
    transition: color .12s, background .12s;
    margin-left: 6px;
}

.search-clear-btn:hover { color: #ef4444; background: #fee2e2; }

.search-hint {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0;
}

.search-group {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.search-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--card-border);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.search-group-count {
    background: #e2e8f0;
    color: #475569;
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 100px;
    margin-left: auto;
}

.search-result-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background .1s;
}

.search-result-card:last-child { border-bottom: none; }

.search-result-card:hover { background: #f0f9ff; }

.search-result-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.search-result-title {
    font-size: .88rem;
    font-weight: 600;
    color: #1e293b;
}

.search-result-sub {
    font-size: .78rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 560px;
}

.search-result-meta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-align: right;
}

/* Highlighted match term */
.search-copy-btn {
    padding: 2px 6px;
    font-size: .75rem;
    color: #94a3b8;
    opacity: 0;
    transition: opacity .15s;
}

.search-result-card:hover .search-copy-btn { opacity: 1; }

.search-mark {
    background: #fef08a;
    color: #713f12;
    border-radius: 2px;
    padding: 0 1px;
    font-style: normal;
}

/* ── Numbers dashboard summary bar ────────────────── */
.numbers-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.summary-stat {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    flex: 1;
}

.summary-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.summary-stat-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
}

.summary-stat-working .summary-stat-value { color: #15803d; }
.summary-stat-working .summary-stat-label { color: #15803d; }
.summary-stat-working { background: #f0fdf4; border-color: #bbf7d0; }

.summary-stat-broken .summary-stat-value { color: #b91c1c; }
.summary-stat-broken .summary-stat-label { color: #b91c1c; }
.summary-stat-broken { background: #fef2f2; border-color: #fecaca; }

.summary-stat-stale .summary-stat-value { color: #92400e; }
.summary-stat-stale .summary-stat-label { color: #92400e; }
.summary-stat-stale { background: #fffbeb; border-color: #fde68a; }

/* ── Status flip timeline ──────────────────────────── */
.status-timeline {
    display: flex;
    flex-direction: column;
    max-width: 560px;
}

.timeline-entry {
    display: flex;
    gap: 16px;
    position: relative;
}

.timeline-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
}

.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid;
    flex-shrink: 0;
    margin-top: 3px;
    z-index: 1;
}

.timeline-dot-working {
    background: #dcfce7;
    border-color: #16a34a;
}

.timeline-dot-broken {
    background: #fee2e2;
    border-color: #dc2626;
}

.timeline-line {
    width: 2px;
    flex: 1;
    background: #e2e8f0;
    margin: 4px 0;
    min-height: 24px;
}

.timeline-content {
    padding-bottom: 24px;
    flex: 1;
    min-width: 0;
}

.timeline-date {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.timeline-duration {
    font-size: .78rem;
    color: #64748b;
    margin-top: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: inline-block;
    padding: 3px 10px;
}

.timeline-ongoing-badge {
    font-size: .68rem;
    font-weight: 600;
    color: #16a34a;
    background: #dcfce7;
    border-radius: 100px;
    padding: 2px 8px;
    letter-spacing: .03em;
}

/* ── Note cards ────────────────────────────────────── */
.note-card {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 14px;
}

.note-card-body {
    font-size: .85rem;
    color: #1e293b;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.55;
    margin-bottom: 10px;
}

.note-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .75rem;
}

.btn-icon-sm {
    padding: 2px 5px;
}

/* ── Phone number suggestion dropdown ──────────────── */
.phone-suggest-dropdown {
    position: fixed;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.13);
    z-index: 9999;
    overflow: hidden;
}

.phone-suggest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: .8rem;
    transition: background .1s;
    border-bottom: 1px solid #f1f5f9;
}

.phone-suggest-item:last-child { border-bottom: none; }

.phone-suggest-item:hover { background: #eff6ff; }

.phone-suggest-icon {
    color: #94a3b8;
    font-size: .85rem;
    flex-shrink: 0;
}

.phone-suggest-number {
    font-weight: 600;
    color: #1e293b;
    font-family: ui-monospace, monospace;
    letter-spacing: .02em;
}

.phone-suggest-client {
    color: var(--text-muted);
    font-size: .75rem;
    margin-left: auto;
    padding-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

/* ── Mobile nav shell (hamburger, backdrop, off-canvas sidebar) ────── */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: #334155;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background .12s;
}

.mobile-menu-btn:hover { background: #f1f5f9; }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 1035;
}

.sidebar-mobile-close {
    display: none;
    position: absolute;
    /* .sidebar becomes position:fixed on mobile (see below) with its own
       safe-area padding-top — this absolutely positioned button ignores
       that padding (it's measured from the padding box's own edge), so it
       needs the same inset added explicitly to stay aligned with the rest
       of the sidebar's content once it's pushed down below the status bar. */
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    z-index: 5;
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    font-size: 1.1rem;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}

.sidebar-mobile-close:hover { background: rgba(255,255,255,.08); color: #fff; }

@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; }
    .sidebar-backdrop { display: block; }
    .sidebar-mobile-close { display: block; }

    .topbar { padding: 10px 12px; }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1040;
        width: 80vw;
        max-width: 280px;
        min-width: 0;
        /* position:fixed means the inherited height:100% (from .sidebar's
           base rule) resolves against the viewport, same caveat as the app
           shell above — needs its own vh/dvh/--vh chain. */
        height: 100vh;
        height: 100dvh;
        height: var(--vh, 100dvh);
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
        /* Anchored to the true viewport edges (position:fixed), so it no
           longer benefits from the app shell's own safe-area padding —
           needs its own, on top of the existing cosmetic 10px. */
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .sidebar.mobile-open { transform: translateX(0); }

    /* The desktop "collapsed" icon-rail state has no meaning for an
       off-canvas panel — always show full labels while open on mobile. */
    .sidebar.collapsed {
        width: 80vw;
        max-width: 280px;
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
    .sidebar.collapsed .sidebar-toggle-btn { justify-content: flex-start; padding: 4px 6px; }
    .sidebar.collapsed .sidebar-brand-text { display: block; }
    .sidebar.collapsed .nav-link { justify-content: flex-start; padding: 9px 12px; }
    .sidebar.collapsed .nav-link span { display: inline; }
    .sidebar.collapsed .sidebar-user { justify-content: space-between; }
    .sidebar.collapsed .sidebar-user-info { display: block; }
    .sidebar.collapsed .sidebar-user-logout { display: inline-flex; }

    /* ── Touch targets: icon-only buttons are sized for a mouse pointer
       (~24px) — bump to the ~40px minimum recommended for touch. ────── */
    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }

    /* ── Guides ───────────────────────────────────────────────────────── */
    .guide-upload-btn { width: 100%; }
    .guide-action-btn { min-width: 40px; min-height: 40px; }
}

/* ── Admin views (Users/Instances/Audit): mobile card layout ─────────
   Rendered only inside a `d-md-none` wrapper, so no media query needed
   on the class itself — it simply never appears on desktop. ────────── */
.admin-card {
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
}
.admin-card:last-child { margin-bottom: 0; }
.admin-card-danger { background: #fef2f2; border-color: #fecaca; }

@media (max-width: 480px) {
    .topbar-date { display: none; }
}