/*
 * scale.css — Selective +25% UI scaling for Komercia V4
 * =========================================================
 * Loaded LAST in v4/base.html (after redesign.css, before extra_css).
 *
 * Strategy: a single tunable knob. Bump only touch/readability-critical
 * selectors — NOT layout dimensions, column widths, or anything that
 * could trigger body{overflow-x:hidden} clipping.
 *
 * To dial back: change --kx-scale (try 1.20 or 1.15).
 * To disable: remove the <link> in v4/base.html.
 *
 * DO NOT SCALE:
 *   - --footer-h / --navbar-h (layout offsets, desyncs main-content margin)
 *   - .pos-grid columns/max-width/height (fluid, already reflows correctly)
 *   - any fixed px widths approaching viewport width (overflow-x:hidden clips silently)
 *   - modal panel max-width/width (position:fixed, safe only with existing caps)
 *   - h1-h4 display headings, borders, shadows, radii, decorative chrome
 */

:root {
    --kx-scale: 1.25;
}


/* =============================================================
   PHASE 1 — SHARED FOUNDATION
   Affects every V4 view via base.html / shared components.
   redesign.css uses !important everywhere, so we match it.
   ============================================================= */

/* 1a. Base body text (redesign.css:158 → font-size:14px) */
body {
    font-size: calc(14px * var(--kx-scale)) !important; /* ~17.5px */
}

/* 1b. Form controls — inherit body scale so inputs/selects feel consistent */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea,
button {
    font-size: calc(14px * var(--kx-scale)) !important; /* ~17.5px */
}

/* 1c. Footer nav — grow text + icons, keep --footer-h:76px intact
   (redesign.css:332-430, all !important) */

.footer-btn span {
    font-size: calc(11px * var(--kx-scale)) !important; /* ~14px */
}

.footer-btn i,
.footer-btn svg {
    width:  calc(22px * var(--kx-scale)) !important; /* ~27.5px */
    height: calc(22px * var(--kx-scale)) !important;
}

/* POS center circle — overflow:visible so growing it doesn't affect footer height */
.footer-btn--pos .footer-pos-circle {
    width:  calc(52px * var(--kx-scale)) !important; /* ~65px */
    height: calc(52px * var(--kx-scale)) !important;
}

.footer-btn--pos .footer-pos-circle i,
.footer-btn--pos .footer-pos-circle svg {
    width:  calc(24px * var(--kx-scale)) !important; /* ~30px */
    height: calc(24px * var(--kx-scale)) !important;
}

/* Notification badge on footer icons (layout.css:529) */
.footer-badge {
    font-size: calc(10px * var(--kx-scale)) !important; /* ~12.5px */
    height: calc(17px * var(--kx-scale)) !important;
    line-height: calc(17px * var(--kx-scale)) !important;
    min-width: calc(17px * var(--kx-scale)) !important;
}

/* 1d. Shared page header — .kx-page-header* (components.css:816-865)
   No !important in origin, scale.css loads after so wins by document order.
   Using !important for robustness. */

.kx-page-header__back {
    width:  calc(38px * var(--kx-scale)) !important; /* ~47.5px — larger tap target */
    height: calc(38px * var(--kx-scale)) !important;
}

.kx-page-header__back i,
.kx-page-header__back svg {
    width:  calc(18px * var(--kx-scale)) !important; /* ~22.5px */
    height: calc(18px * var(--kx-scale)) !important;
}

.kx-page-header__title {
    font-size: calc(24px * var(--kx-scale)) !important; /* ~30px */
}

.kx-page-header__subtitle {
    font-size: calc(13px * var(--kx-scale)) !important; /* ~16px */
}

/* Responsive overrides in components.css (768px and 480px) — keep scaled */
@media (max-width: 768px) {
    .kx-page-header__title {
        font-size: calc(20px * var(--kx-scale)) !important; /* ~25px */
    }
}
@media (max-width: 480px) {
    .kx-page-header__title {
        font-size: calc(18px * var(--kx-scale)) !important; /* ~22.5px */
    }
}


/* =============================================================
   PHASE 2 — POS TOUCH & READABLE ELEMENTS
   pos.css loads inside {% block extra_css %}, AFTER scale.css,
   so all POS overrides need !important to win.
   ============================================================= */

/* Ticket rows — taller padding = easier tap */
.scanned-item {
    padding: calc(16px * var(--kx-scale)) calc(20px * var(--kx-scale)) !important; /* ~20px 25px */
}

/* Item number (row index) */
.scanned-item-number {
    font-size: calc(14px * var(--kx-scale)) !important; /* ~17.5px */
}

/* Product name */
.scanned-item-name {
    font-size: calc(15px * var(--kx-scale)) !important; /* ~18.75px */
}

/* SKU badge */
.scanned-item-sku {
    font-size: calc(11px * var(--kx-scale)) !important; /* ~13.75px */
}

/* Unit price */
.scanned-item-meta {
    font-size: calc(13px * var(--kx-scale)) !important; /* ~16px */
}

/* Qty display number */
.qty-display {
    font-size: calc(15px * var(--kx-scale)) !important; /* ~18.75px */
}

/* Qty +/- buttons — bigger tap targets */
.qty-btn {
    width:  calc(32px * var(--kx-scale)) !important; /* ~40px */
    height: calc(32px * var(--kx-scale)) !important;
}

/* Row subtotal */
.scanned-item-subtotal {
    font-size: calc(17px * var(--kx-scale)) !important; /* ~21px */
}

/* Delete button */
.scanned-item-remove {
    width:  calc(36px * var(--kx-scale)) !important; /* ~45px */
    height: calc(36px * var(--kx-scale)) !important;
}

/* Right panel — cart summary text */
.sale-label-compact {
    font-size: calc(14px * var(--kx-scale)) !important; /* ~17.5px */
}

.sale-number-compact {
    font-size: calc(16px * var(--kx-scale)) !important; /* ~20px */
}

.total-row-compact.subtotal,
.total-row-compact.tax {
    font-size: calc(14px * var(--kx-scale)) !important; /* ~17.5px */
}

.total-row-compact.total-final span:first-child {
    font-size: calc(16px * var(--kx-scale)) !important; /* ~20px */
}

/* Grand total amount — the big number */
.total-amount-compact {
    font-size: calc(36px * var(--kx-scale)) !important; /* ~45px */
}

/* PAGAR button — highest value tap target */
.btn-pagar-compact {
    height: calc(60px * var(--kx-scale)) !important; /* ~75px */
    font-size: calc(18px * var(--kx-scale)) !important; /* ~22.5px */
}

/* Cancelar button */
.btn-cancelar-compact {
    height: calc(48px * var(--kx-scale)) !important; /* ~60px */
    font-size: calc(14px * var(--kx-scale)) !important; /* ~17.5px */
}


/* =============================================================
   PHASE 3 — PER-VIEW DATA EMPHASIS
   "Numbers that matter" — use rem-calc where origin is rem,
   px-calc where origin is px. No !important needed here since
   origin files have no !important on these properties.
   ============================================================= */

/* --- Dashboard KPI cards (components.css:594-628) --- */
.kx-kpi-card__value {
    font-size: calc(1.75rem * var(--kx-scale)); /* ~2.19rem ≈ 35px */
}

.kx-kpi-card__label {
    font-size: calc(0.8125rem * var(--kx-scale)); /* ~1.02rem ≈ 16px */
}

.kx-kpi-card__delta {
    font-size: calc(0.8125rem * var(--kx-scale)); /* ~1.02rem ≈ 16px */
}

/* --- Inventory: list-view rows (inventory.css:358, 368, 382) --- */
.row-product-name {
    font-size: calc(15px * var(--kx-scale)); /* ~18.75px */
}

.row-product-sku {
    font-size: calc(12px * var(--kx-scale)); /* ~15px */
}

.row-stock-value {
    font-size: calc(15px * var(--kx-scale)); /* ~18.75px */
}

/* --- Inventory: card-view tiles (inventory.css:579, 587, 594) --- */
.card-product-name {
    font-size: calc(15px * var(--kx-scale)); /* ~18.75px */
}

.card-product-sku {
    font-size: calc(11px * var(--kx-scale)); /* ~13.75px */
}

.card-price {
    font-size: calc(16px * var(--kx-scale)); /* ~20px */
}