/* SOCAnalytic - mobile-first styles on top of Bootstrap 5 */

:root {
    --app-navy: #14233a;
    --app-navy-2: #1e3a5f;
    --app-accent: #c8102e;
    --app-bg: #f4f6f9;
    --navbar-h: 56px;
}

body {
    background: var(--app-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main { flex: 1 0 auto; }

/* Modals: reserve the scrollbar gutter ourselves instead of trusting Bootstrap's
   measured scrollbar width, which some browser extensions skew (e.g. 1297px). */
html { scrollbar-gutter: stable; }
body.modal-open,
body.modal-open .fixed-top,
.modal { padding-right: 0 !important; padding-left: 0 !important; }
body.modal-open .sticky-top { margin-right: 0 !important; }

/* Fixed-top navbar: keep content clear of it */
body.has-navbar { padding-top: var(--navbar-h); }

.bg-navy { background: var(--app-navy) !important; }

.navbar-brand { font-weight: 600; letter-spacing: .01em; font-size: 1rem; }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--app-accent);
    font-weight: 800;
    font-size: .95rem;
    border: 2px solid var(--app-accent);
}

.brand-mark-lg { width: 56px; height: 56px; font-size: 1.6rem; }

.min-w-0 { min-width: 0; }

/* Auth pages */
.auth-page { background: linear-gradient(160deg, var(--app-navy) 0%, var(--app-navy-2) 55%, var(--app-bg) 55%); }
.auth-wrapper { min-height: calc(100vh - 80px); padding-top: 2rem; padding-bottom: 2rem; }
.auth-card { max-width: 440px; border-radius: 1rem; }

/* Password policy checklist */
.password-policy li { position: relative; padding-left: 1.4rem; color: var(--bs-secondary-color); }
.password-policy li::before { content: "\2022"; position: absolute; left: .35rem; }
.password-policy li.is-met { color: var(--bs-success-text-emphasis); }
.password-policy li.is-met::before { content: "\2713"; left: .15rem; }

/* Upload */
.dropzone {
    border: 2px dashed #b8c2d1;
    border-radius: .9rem;
    background: #fafbfd;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover,
.dropzone.is-dragover { border-color: var(--bs-primary); background: #eef4ff; }
.dropzone.has-file { border-style: solid; border-color: var(--bs-success); background: #f0faf3; }

.check-list li { padding-left: 1.6rem; position: relative; margin-bottom: .9rem; }
.check-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--bs-success);
    font-weight: 700;
}

/* Stat cards */
.stat-card { border-left: 4px solid var(--app-navy-2) !important; color: inherit; }
.stat-card:hover { transform: translateY(-1px); }
.stat-card.stat-ok { border-left-color: var(--bs-success) !important; }
.stat-card.stat-warn { border-left-color: var(--bs-warning) !important; }
.stat-card.stat-bad { border-left-color: var(--bs-danger) !important; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--bs-secondary-color); }

/* Findings */
.issue-card { border-left: 4px solid var(--bs-secondary) !important; }
.issue-card.issue-danger { border-left-color: var(--bs-danger) !important; }
.issue-card.issue-warning { border-left-color: var(--bs-warning) !important; }
.issue-card.issue-info { border-left-color: var(--bs-info) !important; }
.issue-dl dt { color: var(--bs-secondary-color); font-weight: 600; }
.issue-dl dd { margin-bottom: .5rem; }

mark { background: #ffe8a3; padding: 0 .15em; border-radius: .2em; }
mark.mark-fix { background: #c9f0d4; }

.delivery-option { background: #fbfcfe; }

/* Admin */
/* Inactive dictionary rows: fade the content cells only, never the actions menu */
.is-inactive td:not(.cell-actions) { color: var(--bs-secondary-color); opacity: .65; }
.cell-actions { width: 1%; white-space: nowrap; }
.btn-actions { line-height: 1; padding: .375rem .5rem; }

/* Touch screens (phones, tablets): finger-sized targets */
@media (pointer: coarse) {
    .btn-actions { min-width: 44px; min-height: 44px; }
    .dropdown-menu .dropdown-item { padding-top: .65rem; padding-bottom: .65rem; }
}
.event-json {
    max-width: 420px;
    max-height: 280px;
    overflow: auto;
    font-size: .75rem;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bs-tertiary-bg);
    padding: .5rem;
    border-radius: .35rem;
}
.events-table td { vertical-align: top; }
.sticky-offset { top: calc(var(--navbar-h) + 1rem); }

.app-footer { flex-shrink: 0; }

/* Tablet and up */
@media (min-width: 768px) {
    .stat-value { font-size: 2rem; }
    .navbar-brand { font-size: 1.1rem; }
}

/* Collapsed mobile menu: let it scroll if very long */
@media (max-width: 991.98px) {
    .navbar-collapse { max-height: calc(100vh - var(--navbar-h)); overflow-y: auto; padding-bottom: .75rem; }
}