/* ============================================================
   TactiPrint3D — Identity Layer (v58 · professional overhaul)
   Loads AFTER styles.css. Typography identity, elevation rules,
   focus system, dashboard hierarchy, finances band, FTUE,
   settings structure, mobile table cards, modal sheets,
   printer feed states, motion discipline.
   No JS changes. All existing element IDs and behavior preserved.
   ============================================================ */

/* ---- Typography identity ---- */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.10), 0 6px 20px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.28);
    --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme="light"] {
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05);
    --shadow-modal: 0 24px 64px rgba(16, 24, 40, 0.22), 0 4px 12px rgba(16, 24, 40, 0.10);
    --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ---- Base typography ---- */
body { letter-spacing: -0.006em; }
.page-title { font-weight: 700; }
.brand-text { font-weight: 750; }

/* Numerals: money aligns in columns */
.big-stat, .dash-hero-value, .dash-hero-subitem span, .hero-mini strong,
.data-table td, .status-item strong, .spool-info strong, .alert-item strong,
.fin-hero-cell .big-stat { font-variant-numeric: tabular-nums; }
.big-stat { letter-spacing: -0.02em; }
.big-stat { font-size: clamp(2rem, 4vw, 2.35rem); }

/* ---- Focus system (accessibility) ---- */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
.btn:focus-visible, .btn-icon:focus-visible, .select-input:focus-visible, .search-input:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

/* ---- Selection ---- */
::selection { background: var(--accent-ring); }

/* ---- Elevation: quiet, purposeful ----
   Static cards do NOT lift or glow on hover. Motion is reserved for
   genuinely interactive elements (tiles, steps, buttons, rows). */
.card, .form-card, .status-card, .active-spools-section, .spool-card, .table-container {
    box-shadow: var(--shadow-card), var(--inset-highlight);
}

/* ---- Buttons: quiet vertical light + press ---- */
.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.2); }
.btn:active:not(:disabled) { transition-duration: 0.06s; }

/* ---- Inputs: soft inner field ---- */
.select-input, .search-input { background-color: var(--bg-input); }

/* ---- Navbar ---- */
.navbar {
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-bottom-color: var(--border-color);
}

/* ---- Modals: frosted premium surface ---- */
.modal-content {
    background-color: rgba(28, 28, 30, 0.94);
    backdrop-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
    box-shadow: var(--shadow-modal);
}
:root[data-theme="light"] .modal-content { background-color: rgba(255, 255, 255, 0.96); }

/* ---- Page subtitles ---- */
.page-sub { color: var(--text-secondary); font-size: 0.9rem; margin: -14px 0 22px; }

/* ============================================================
   Dashboard
   ============================================================ */

/* Hero: the answer to "how is my business doing?" */
.dash-hero {
    display: flex; justify-content: space-between; align-items: stretch; gap: 32px;
    padding: 22px 24px; margin-bottom: 6px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--accent-text) 7%, var(--bg-secondary)) 130%);
}
.dash-hero:hover { transform: none; }
.dash-hero-label { font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-tertiary); margin-bottom: 4px; }
.dash-hero-value { font-size: clamp(2.2rem, 4.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.dash-hero-value.negative { color: var(--danger); }
.dash-hero-sub { display: flex; gap: 28px; margin-top: 14px; }
.dash-hero-subitem span { display: block; font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; }
.dash-hero-subitem small { color: var(--text-tertiary); font-size: 0.73rem; }
.dash-hero-side { display: flex; gap: 32px; align-items: center; padding-left: 32px; border-left: 1px solid var(--border-color); }
.hero-mini strong {
    display: block; font-size: 1.1rem; font-weight: 650; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 150px;
    overflow: hidden; text-overflow: ellipsis;
}
.hero-mini span { font-size: 0.73rem; color: var(--text-tertiary); }

/* Dashboard sections */
.dash-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin: 26px 0 10px; }
.dash-ops-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.dash-ops-grid .card { padding: 18px 20px; }
.dash-duo { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: stretch; }
.card-header-note { font-size: 0.72rem; color: var(--text-tertiary); font-weight: 500; }

/* Quick actions: confident tile grid */
.quick-actions-card .action-buttons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-actions-card .action-buttons .btn {
    flex-direction: column; gap: 7px;
    padding: 14px 10px; min-height: 68px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem; font-weight: 600; color: var(--text-primary);
    transition: transform 0.18s var(--ease-out-soft), border-color 0.18s ease, background-color 0.18s ease;
}
.quick-actions-card .action-buttons .btn:hover { border-color: var(--accent-text); transform: translateY(-1px); }
.quick-actions-card .action-buttons .btn:active { transform: scale(0.97); }
.quick-actions-card .action-buttons .btn .ic { width: 20px; height: 20px; color: var(--accent-text); }

/* Getting started (FTUE) */
.gs-card {
    margin-top: 18px; margin-bottom: 4px; padding: 20px 22px;
    border-color: var(--accent-ring);
    background: linear-gradient(135deg, var(--accent-tint), color-mix(in srgb, var(--accent-text) 3%, var(--bg-secondary)) 65%, var(--bg-secondary));
}
.gs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.gs-head h3 { font-size: 1rem; font-weight: 650; }
.gs-head p { color: var(--text-secondary); font-size: 0.825rem; margin-top: 2px; }
.gs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gs-step {
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 13px 14px; min-height: 64px;
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    cursor: pointer; font-family: inherit; color: var(--text-primary); font-size: inherit;
    transition: transform 0.18s var(--ease-out-soft), border-color 0.18s ease;
}
.gs-step:hover { border-color: var(--accent-text); transform: translateY(-1px); }
.gs-step:active { transform: scale(0.98); }
.gs-num {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    background: var(--accent-primary); color: #fff;
    font-weight: 700; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
}
.gs-body strong { display: block; font-size: 0.875rem; font-weight: 600; }
.gs-body small { color: var(--text-tertiary); font-size: 0.73rem; line-height: 1.35; display: block; margin-top: 2px; }

/* Chart empty states */
.chart-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: 260px; color: var(--text-tertiary); text-align: center;
}
.chart-empty svg { width: 26px; height: 26px; opacity: 0.65; margin-bottom: 4px; }
.chart-empty p { font-size: 0.9rem; color: var(--text-secondary); font-weight: 550; }
.chart-empty small { font-size: 0.78rem; max-width: 260px; line-height: 1.45; }

/* ============================================================
   Finances
   ============================================================ */

/* Stat band: one anchored surface instead of three floating cards */
.fin-hero { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0; gap: 0; }
.fin-hero-cell { padding: 20px 22px; min-width: 0; }
.fin-hero-cell + .fin-hero-cell { border-left: 1px solid var(--border-color); }
.fin-hero-cell h3 { font-size: 0.72rem; color: var(--text-tertiary); font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; }
.fin-hero-cell .stat-label { margin-top: 2px; }

/* ============================================================
   Settings
   ============================================================ */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.settings-grid > * { min-width: 0; }
/* Desktop: pair cards into balanced rows (mobile keeps DOM order) */
@media (min-width: 769px) {
    .settings-grid .form-card:nth-child(1) { order: 1; }
    .settings-grid .form-card:nth-child(6) { order: 2; }
    .settings-grid .form-card:nth-child(2) { order: 3; }
    .settings-grid .form-card:nth-child(5) { order: 4; }
    .settings-grid .form-card:nth-child(3) { order: 5; }
    .settings-grid .form-card:nth-child(4) { order: 6; }
    .settings-grid .form-card:nth-child(7) { order: 7; }
}
/* The compact theme card centers its control when stretched beside a taller card */
.settings-grid .form-card:has(.theme-toggle-container) .form-group { margin-top: auto; margin-bottom: auto; }
.settings-h { font-size: 0.95rem; font-weight: 650; margin-bottom: 14px; letter-spacing: -0.01em; }
.form-card--wide { grid-column: 1 / -1; }
.settings-note { font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.55; margin-top: 14px; display: flex; gap: 8px; align-items: flex-start; }
.settings-note .ic { margin-top: 2px; color: var(--warning); }
.about-text { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; }
.about-text strong { color: var(--text-primary); }
.settings-pro-note { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 12px; }
.settings-pro-note strong { color: var(--text-primary); }

/* Pro active panel */
.pro-active-panel {
    background: rgba(48, 209, 88, 0.08);
    border: 1px solid rgba(48, 209, 88, 0.28);
    border-radius: var(--radius-sm);
    padding: 14px 16px; margin-bottom: 14px;
}
.pro-active-head { display: flex; align-items: center; gap: 8px; color: var(--success); font-weight: 650; font-size: 0.9rem; }
.pro-active-head .ic { color: var(--success); }
.pro-active-panel p { font-size: 0.825rem; color: var(--text-secondary); margin-top: 6px; }

/* ============================================================
   Forms: grouped sections (modals)
   ============================================================ */
.form-section { padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--border-color); }
.form-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.form-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: 12px; }

/* PRO field labels in modals */
.pro-label-tag {
    display: inline-flex; align-items: center;
    margin-left: 6px; padding: 1px 6px;
    border-radius: 5px;
    background: var(--accent-tint); color: var(--accent-text);
    border: 1px solid var(--accent-ring);
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
    vertical-align: 1px;
}

/* Status rows: profit deserves emphasis */
.status-item.status-item-emph strong { color: var(--success); }
.status-item.status-item-emph { font-weight: 500; }

/* Tables: status pills inside cells stay intact */
.data-table .status-badge { white-space: nowrap; }

/* ============================================================
   Printer
   ============================================================ */
.printer-container { position: relative; }
.printer-iframe.hidden { display: none !important; }
.feed-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; overflow-y: auto; }
.feed-state.hidden { display: none !important; }
.feed-state-inner { max-width: 440px; }
.feed-state .spinner { width: 30px; height: 30px; margin: 0 auto 14px; }
.fs-icon { display: flex; justify-content: center; margin-bottom: 12px; }
.fs-icon svg { width: 36px; height: 36px; color: var(--text-tertiary); }
.fs-title { font-size: 0.975rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.fs-text { font-size: 0.825rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 6px; }
.fs-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.feed-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
    color: var(--success); background: rgba(48, 209, 88, 0.1);
    border: 1px solid rgba(48, 209, 88, 0.3);
    border-radius: var(--radius-pill); padding: 3px 10px;
}
.feed-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: feedPulse 1.6s ease-in-out infinite; }
@keyframes feedPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ============================================================
   Motion discipline
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Mobile
   ============================================================ */

/* Mobile zoom lock: viewport meta + touch-action, no JS hacks */
html, body { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Mobile-first: tables become cards */
@media (max-width: 640px) {
    .table-container { border: none; background: transparent; overflow: visible; box-shadow: none; border-radius: 0; }
    .data-table { display: block; }
    .data-table thead { display: none; }
    .data-table tbody { display: flex; flex-direction: column; gap: 10px; }
    .data-table tr {
        display: flex; flex-direction: column;
        background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
        padding: 14px 16px; box-shadow: var(--shadow-card);
    }
    .data-table td {
        display: flex; justify-content: space-between; align-items: center; gap: 16px;
        white-space: normal; border-bottom: none; padding: 5px 0;
        font-size: 0.9rem; text-align: right !important;
    }
    .data-table td::before {
        content: attr(data-label);
        color: var(--text-tertiary); font-size: 0.7rem; font-weight: 650;
        text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0;
        text-align: left;
    }
    .data-table td[colspan] { display: block; padding: 0; }
    .data-table td[colspan]::before { content: none; }
    .data-table td.td-actions::before { content: none; }
    .data-table td.td-actions { justify-content: flex-end; padding-top: 8px; }
    .row-actions { justify-content: flex-end; }
    .data-table tr:hover td { background: transparent; }
    .warning-text { justify-content: flex-end !important; }
}

/* Mobile-first: modals become bottom sheets */
@media (max-width: 560px) {
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-content {
        max-width: 100%; border-radius: 20px 20px 0 0; border-bottom: none;
        max-height: 92dvh; margin: 0;
        animation: sheetIn 0.32s var(--ease-out-soft);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .modal-content[style*="380px"] { max-width: 100%; }
    .modal-header, .modal-footer { padding: 14px 18px; }
    .modal-body { padding: 16px 18px; }
}
@keyframes sheetIn { from { transform: translateY(48px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Mobile: dashboard hero + grids */
@media (max-width: 768px) {
    .dash-hero { flex-direction: column; gap: 18px; padding: 20px; }
    .dash-hero-side {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
        border-left: none; padding-left: 0;
        border-top: 1px solid var(--border-color); padding-top: 14px;
    }
    .hero-mini { text-align: center; }
    .hero-mini strong { max-width: none; margin: 0 auto 2px; font-size: 1rem; }
    .hero-mini span { display: block; line-height: 1.3; }
    .dash-ops-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dash-ops-grid .card { padding: 16px; }
    .dash-duo { grid-template-columns: 1fr; }
    .gs-steps { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
    .page-sub { margin: -10px 0 18px; font-size: 0.875rem; }
    .fin-hero { grid-template-columns: 1fr; }
    .fin-hero-cell + .fin-hero-cell { border-left: none; border-top: 1px solid var(--border-color); }
    .quick-actions-card .action-buttons { gap: 8px; }
    .quick-actions-card .action-buttons .btn { min-height: 72px; }
}
@media (max-width: 380px) {
    .dash-ops-grid { grid-template-columns: 1fr; }
}

/* v63: this-month band (4 cells) + product insights */
.fin-hero.four { grid-template-columns: repeat(4, 1fr); }
.fin-hero.four .fin-hero-cell + .fin-hero-cell { border-left: 1px solid var(--border-color); }
@media (max-width: 1024px) {
    .fin-hero.four { grid-template-columns: 1fr 1fr; }
    .fin-hero.four .fin-hero-cell:nth-child(3) { border-left: none; border-top: 1px solid var(--border-color); }
    .fin-hero.four .fin-hero-cell:nth-child(4) { border-top: 1px solid var(--border-color); }
}
@media (max-width: 768px) {
    .fin-hero.four { grid-template-columns: 1fr; }
    .fin-hero.four .fin-hero-cell + .fin-hero-cell { border-left: none; border-top: 1px solid var(--border-color); }
}
.insight-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 0.875rem; }
.insight-row:last-child { border-bottom: none; }
.insight-row .insight-label { color: var(--text-tertiary); font-size: 0.68rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; flex-shrink: 0; }
.insight-row .insight-name { color: var(--text-primary); font-weight: 600; text-align: left; }
.insight-row .insight-name small { color: var(--text-tertiary); font-weight: 500; margin-left: 6px; }
.insight-row .insight-value { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.card > .insight-hint { padding: 0 20px; margin: -4px 0 12px; }
.card-body > .insight-hint { margin: -4px 0 10px; }
.insight-hint { color: var(--text-tertiary); font-size: 0.75rem; line-height: 1.5; }
.insight-hint strong { color: var(--text-secondary); font-weight: 600; }
.insight-row .insight-ic { width: 14px; height: 14px; color: var(--accent-text); margin-right: 2px; vertical-align: -2px; }
.alert-item[data-goto] { cursor: pointer; border-radius: var(--radius-xs); }
@media (max-width: 420px) {
    .insight-row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 0; }
}
.alert-item[data-goto]:hover { background-color: var(--bg-tertiary); }

/* v65: pricing calculator, sales summary, stock badges, print suggestion */
/* v67: what-if calculator presentation refined to the TactiPrint3D design system */
.price-calc { margin: 2px 0 16px; padding: 14px; background: var(--bg-tertiary); border-radius: var(--radius-md); }
.price-calc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.price-calc-head h4 { font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.price-calc-head .card-header-note { font-size: 0.72rem; }
.price-calc-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.price-calc-row .select-input { flex: 2 1 200px; min-width: 0; min-height: 42px; font-size: 0.875rem; }
.price-calc-price { position: relative; flex: 1 1 120px; min-width: 0; }
.price-calc-dollar { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: 0.875rem; pointer-events: none; }
.price-calc-price .select-input { padding-left: 24px; font-size: 0.875rem; min-height: 42px; }
.price-calc-results { display: flex; gap: 8px; margin-bottom: 10px; }
.price-calc-stat { flex: 1 1 0; min-width: 0; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-xs); }
.price-calc-stat span { display: block; font-size: 0.65rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-calc-stat strong { display: block; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; color: var(--text-primary); white-space: nowrap; }
.price-calc-target { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-secondary); }
.price-calc-target label { display: inline-flex; align-items: center; gap: 6px; }
.price-calc-target input { width: 52px; min-height: 34px; padding: 4px 8px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-xs); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; }
.price-calc-target input:focus { border-color: var(--accent-text); outline: none; }
.price-calc-target strong { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
@media (max-width: 480px) {
    .price-calc { padding: 12px; }
    .price-calc-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .price-calc-price { flex: 1 1 auto; }
    .price-calc-results { flex-wrap: nowrap; }
}
.stock-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 650; white-space: nowrap; }
.stock-badge.out { background: rgba(255, 69, 58, 0.14); color: var(--danger); }
.stock-badge.low { background: rgba(255, 159, 10, 0.15); color: var(--warning); }
.stock-badge.ok { background: rgba(48, 209, 88, 0.13); color: var(--success); }
.sales-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 20px; margin-bottom: 20px; }
.sales-summary-stat { min-width: 0; }
.sales-summary-num { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sales-summary-label { display: block; font-size: 0.72rem; color: var(--text-tertiary); margin-top: 2px; }
@media (max-width: 768px) { .sales-summary { grid-template-columns: 1fr 1fr; padding: 14px 16px; } .sales-summary-num { font-size: 1.15rem; } }
.print-suggest { margin-bottom: 20px; }
.print-suggest .suggest-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-color); font-size: 0.875rem; }
.print-suggest .suggest-row:last-child { border-bottom: none; }
.print-suggest .suggest-reason { color: var(--text-tertiary); font-size: 0.72rem; }
.print-suggest .suggest-profit { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* v66: filament intelligence, print warnings, FTUE completion, low-margin alerts */
.spool-est { margin: 6px 0 0; font-size: 0.72rem; color: var(--text-tertiary); }
.print-fil-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; background: rgba(255, 159, 10, 0.12); border: 1px solid rgba(255, 159, 10, 0.35); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.8rem; line-height: 1.5; }
.print-fil-warning .ic { color: var(--warning); margin-top: 1px; flex-shrink: 0; }
.print-fil-warning.hidden { display: none; }
.gs-step.done .gs-num { background: var(--success); }
.gs-step.done { border-color: var(--success); }

/* v67: mobile-first quality pass */
/* Prevent iOS auto-zoom: inputs at 16px+ on phones */
@media (max-width: 768px) {
    .select-input, .search-input { font-size: 16px; }
    .price-calc-price .select-input { font-size: 16px; }
    .btn-icon { min-width: 44px; min-height: 44px; }
    .modal-close-btn { width: 40px; height: 40px; }
    .nav-actions .btn-icon { min-width: 44px; min-height: 44px; }
    .alert-item { padding: 11px 0; }
    .status-item { padding: 13px 0; }
}
/* Drawer keyboard/focus support */
.menu-link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
/* Modal title contrast in both themes (already tokenized; explicit for consistency) */
.modal-header h3 { color: var(--text-primary); }
/* Print warning keeps readable contrast in light mode */
:root[data-theme="light"] .print-fil-warning { background: rgba(255, 159, 10, 0.1); }

/* ===== v68 Reports: mobile range controls ===== */
@media (max-width: 480px) {
    #page-reports .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    #reportRanges { flex-wrap: wrap; }
    #reportRanges .btn { flex: 1 1 42%; }
}