/**
 * CCM Maintenance — app layer on top of frikwork (https://frikwork.com).
 *
 * frikwork owns components, tokens, and theming. This file holds only what
 * the framework deliberately doesn't ship: a few layout utilities, brand
 * logo sizing, tone helpers for PHP-emitted status classes, and page quirks
 * (Google Sign-In iframe, AI summary typography, chart containers).
 * Everything app-specific is `app-` prefixed; never restyle `fw-` classes
 * beyond the small element resets below.
 */

/* ---------- Layout utilities (frikwork has no utility layer) ---------- */
.app-main { padding-block: var(--fw-space-lg); width: 100%; }
.app-row { display: flex; flex-wrap: wrap; gap: var(--fw-space-sm); align-items: center; }
.app-between { justify-content: space-between; }
.app-center { text-align: center; }
.app-page-head {
    display: flex; flex-wrap: wrap; gap: var(--fw-space-md);
    align-items: flex-start; justify-content: space-between;
    margin-bottom: var(--fw-space-lg);
}
.app-page-head h1, .app-page-head h2 { margin: 0; }
.app-section-title {
    border-bottom: 1px solid var(--fw-border);
    padding-bottom: var(--fw-space-sm);
    margin: var(--fw-space-lg) 0 var(--fw-space-md);
}
.app-note {
    background: var(--fw-bg-2);
    border: 1px solid var(--fw-border);
    border-radius: var(--fw-radius-md);
    padding: var(--fw-space-md);
}
.app-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--fw-space-xs) var(--fw-space-md); margin: 0; }
.app-dl dt { color: var(--fw-text-muted); font-weight: 500; }
.app-dl dd { margin: 0; }

/* ---------- Tone helpers (compose with get_*_color_class() tones) ---------- */
.app-t-success { color: var(--fw-success) !important; }
.app-t-warning { color: var(--fw-warning) !important; }
.app-t-danger  { color: var(--fw-danger) !important; }
.app-t-info    { color: var(--fw-info) !important; }
.app-bad { color: var(--fw-danger); font-weight: 600; }
/* Input edge tinting (TTFB / required-notes highlighting) */
.app-b-success { border-color: var(--fw-success) !important; }
.app-b-warning { border-color: var(--fw-warning) !important; }
.app-b-danger  { border-color: var(--fw-danger) !important; }
/* Info-tinted meter fill (frikwork ships default/warn/critical only) */
.fw-meter__fill.app-meter-info { background: var(--fw-info); }

/* ---------- Header brand + nav-as-form resets ---------- */
.app-brand { display: inline-flex; align-items: center; }
.app-brand img { height: 32px; display: block; }
button.fw-navlink, button.fw-menu__link {
    background: none; border: 0; cursor: pointer;
    font: inherit; color: inherit; text-align: left; width: auto;
}
button.fw-menu__link { width: 100%; }

/* ---------- Login ---------- */
.app-login { max-width: 420px; margin: 8vh auto 0; }
.app-or {
    display: flex; align-items: center; gap: var(--fw-space-md);
    color: var(--fw-text-muted); margin: var(--fw-space-lg) 0 var(--fw-space-md);
}
.app-or::before, .app-or::after { content: ''; flex: 1; height: 1px; background: var(--fw-border); }
.g_id_signin { margin: 0 auto; }
[data-fw-theme="dark"] .g_id_signin iframe {
    filter: invert(0.85) hue-rotate(180deg) !important;
    border-radius: var(--fw-radius-md) !important;
}

/* ---------- Tables (table.js toolbar / footer chrome) ---------- */
.app-table-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--fw-space-sm);
    align-items: center; justify-content: space-between;
    margin-bottom: var(--fw-space-sm);
}
.app-table-toolbar .fw-select { width: auto; }
.app-table-toolbar .fw-input { max-width: 16rem; }
.app-table-foot {
    display: flex; flex-wrap: wrap; gap: var(--fw-space-sm);
    align-items: center; justify-content: space-between;
    margin-top: var(--fw-space-sm);
}
.app-actions { display: inline-flex; gap: var(--fw-space-xs); }

/* ---------- Dashboard gauge (FA tachometer animation) ---------- */
#dashboard-gauge { transition: color 0.5s ease; }
.gauge-danger  { color: var(--fw-danger) !important; }
.gauge-warning { color: var(--fw-warning) !important; }
.gauge-success { color: var(--fw-success) !important; }

/* ---------- Charts (history page) ---------- */
.chart-container { position: relative; height: 300px; width: 100%; margin-bottom: var(--fw-space-xl); }

/* ---------- AI summaries (view + report pages) ---------- */
.ai-summary h2, .ai-summary h3, .ai-summary h4, .ai-summary h5 { margin-top: .75rem; }
.ai-summary h2 { font-size: 1.3rem; }
.ai-summary h3 { font-size: 1.15rem; }
.ai-summary h4 { font-size: 1rem; }
.ai-summary ul, .ai-summary ol { padding-left: 1.25rem; }
.ai-summary p:last-child { margin-bottom: 0; }

/* ---------- Wide modal (client report) ---------- */
.fw-modal__content.app-modal-xl { max-width: min(960px, calc(100vw - 2rem)); }

/* ---------- Dashboard coverage ---------- */
/* "25/30" — the denominator sits quieter than the headline figure. */
.app-stat-denom {
    color: var(--fw-text-muted);
    font-size: 0.6em;
    font-weight: 500;
    margin-left: 0.15em;
}
/* Customers that have never been maintained. Tinted rather than badge-only so
   they're findable at a glance in a 30-row table; the left rule survives the
   theme flip because it uses frikwork's own danger token. */
.app-never-done > td { background: color-mix(in srgb, var(--fw-danger) 7%, transparent); }
.app-never-done > td:first-child { box-shadow: inset 3px 0 0 var(--fw-danger); }