/* ============================================================
   PWD Dashboard — base styles + primitives
   ============================================================ */

@import url('theme.css');

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Prevent any single rogue element (wide table, inline-styled card, etc.)
       from making the document wider than the viewport. When the doc is wider
       than the viewport, iOS treats the wider width as "the real width" and the
       page looks zoomed-in / horizontally scrollable — especially in PWA
       standalone mode where you can't pinch-to-zoom back out easily. */
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

p { line-height: 1.6; }
small { color: var(--text-muted); font-size: 0.875rem; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; }
kbd {
    display: inline-block;
    padding: 0.1em 0.4em;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
    white-space: nowrap;
    user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--brand);
    color: var(--text-inverse);
    border-color: var(--brand);
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); }

.btn-danger {
    background: var(--danger);
    color: var(--text-inverse);
    border-color: var(--danger);
}
.btn-danger:hover { filter: brightness(0.92); }

.btn-ghost {
    background: transparent;
    color: var(--text);
}
.btn-ghost:hover { background: var(--bg-hover); }

.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.875rem; }
.btn-lg { padding: 0.7rem 1.25rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ── Forms ─────────────────────────────────────────────────── */
.field { margin-bottom: 1rem; }
.field label,
label.field-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}
.field-help {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.field-error {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--danger);
}

.input,
.textarea,
.select {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 120ms, box-shadow 120ms;
    -webkit-appearance: none;
    appearance: none;
}
.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.textarea { min-height: 6em; resize: vertical; font-family: inherit; }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
    cursor: pointer;
}
.checkbox-row input { width: 18px; height: 18px; cursor: pointer; }

/* ── Collapsible card — uses <details><summary>. Styled to read like a
   task-item bar. Selectors chain `.card.collapse-card` so they out-
   specificity the plain .card rule regardless of source order. ─── */
.card.collapse-card {
    padding: 0;
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
}
.card.collapse-card > summary { list-style: none; cursor: pointer; }
.card.collapse-card > summary::-webkit-details-marker { display: none; }

.card.collapse-card .collapse-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    user-select: none;
    transition: background 80ms;
}
.card.collapse-card .collapse-summary:hover { background: var(--bg-hover); }

.card.collapse-card .collapse-label {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
}

.card.collapse-card .collapse-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-subtle);
}
.card.collapse-card .collapse-chevron {
    transition: transform 200ms;
    display: inline-block;
    font-size: 0.9rem;
    color: var(--text-subtle);
}
.card.collapse-card[open] .collapse-chevron     { transform: rotate(180deg); }
.card.collapse-card[open] .collapse-summary     { border-bottom: 1px solid var(--border); }
.card.collapse-card:not([open]) .hint-when-open { display: none; }
.card.collapse-card[open] .hint-when-closed     { display: none; }

.card.collapse-card .collapse-body { padding: 1rem 0.85rem; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.card-pad-lg { padding: 1.75rem; }
.card-flush { padding: 0; }
.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.card-body { padding: 1.25rem; }

/* ── KPI tiles (home page agency snapshot) ─────────────────── */
.kpi-row {
    display: grid;
    /* min(160px, 100%) is the canonical fix for "grid won't shrink below its
       minmax basis." Without min(), a 160px minimum prevents 2 columns from
       collapsing to 1 when the container is < 320px + gap, and Safari renders
       them anyway → page overflows by ~50px. The min() lets the basis fall
       back to 100% of the container when it can't honor 160px. */
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 0.875rem;
}
.kpi-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1rem;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: border-color 120ms ease, transform 120ms ease;
}
.kpi-card:hover,
.kpi-card:focus,
.kpi-card:active {
    border-color: var(--brand);
    transform: translateY(-1px);
    text-decoration: none;     /* anchor default underline on hover */
    color: inherit;
}
.kpi-label {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-subtle);
    font-weight: 600;
}
.kpi-value {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-value .kpi-unit {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.1em;
}
.kpi-foot {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: 1rem;
}
/* Alert tokens come from theme.css so they auto-flip with theme. */
.alert-info    { background: var(--alert-info-bg);    color: var(--alert-info-text);    border-color: var(--alert-info-border);    }
.alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); border-color: var(--alert-success-border); }
.alert-warning { background: var(--alert-warning-bg); color: var(--alert-warning-text); border-color: var(--alert-warning-border); }
.alert-danger  { background: var(--alert-danger-bg);  color: var(--alert-danger-text);  border-color: var(--alert-danger-border);  }

/* ── Badges ────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-sunken);
    color: var(--text);
}
.badge-status[data-status="sales"]       { background: color-mix(in srgb, var(--status-sales)       18%, transparent); color: var(--status-sales); }
.badge-status[data-status="active"]      { background: color-mix(in srgb, var(--status-active)      18%, transparent); color: var(--status-active); }
.badge-status[data-status="maintenance"] { background: color-mix(in srgb, var(--status-maintenance) 18%, transparent); color: var(--status-maintenance); }
.badge-status[data-status="sunsetting"]  { background: color-mix(in srgb, var(--status-sunsetting)  18%, transparent); color: var(--status-sunsetting); }
.badge-status[data-status="archived"]    { background: color-mix(in srgb, var(--status-archived)    18%, transparent); color: var(--status-archived); }

/* ── Utility ───────────────────────────────────────────────── */
.stack > * + * { margin-top: var(--gap, 1rem); }
.row { display: flex; gap: var(--gap, 0.75rem); flex-wrap: wrap; align-items: center; }
.row-tight { gap: 0.5rem; }
.spacer { flex: 1; }

.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-danger { color: var(--danger); }
.text-success{ color: var(--success); }
.text-sm     { font-size: 0.875rem; }
.text-xs     { font-size: 0.75rem; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.hidden { display: none !important; }

@media (max-width: 700px) { .hide-mobile { display: none !important; } }
@media (min-width: 701px) { .show-mobile { display: none !important; } }