/* central.css - Shared styles for Falcon POS app */

/* THEME_VARIABLES_START */
/* Colour vars are set at runtime by central.js from localStorage before first paint.
   Only structural/non-colour vars live here as safe CSS fallbacks. */
:root {
    /* ── Structural / sizing ── */
    --app-shadow: 0 14px 32px rgba(31, 41, 55, 0.08);
    --app-radius: 20px;
    --app-logo-width: 150px;
    --app-logo-height: 150px;

    /* ── Status colours — fixed, not user-configurable ── */
    --app-ok:   #166534;
    --app-warn: #92400e;
    --app-bad:  #b42318;

    /* ── Mobile sizing fallbacks ── */
    --app-hero-title-size-tablet: 24px;
    --app-hero-title-size-mobile: 20px;
    --app-hero-subtitle-size-mobile: 13px;
    --app-hero-padding-y-mobile: 10px;
    --app-hero-padding-x-mobile: 12px;
    --app-touch-min: 44px;
    --app-mobile-font-scale: 0.95;
    --app-logo-hide-mobile: block;

    /* Hero logout button defaults */
    --app-logout-bg: #8b1e1e;
    --app-logout-text: #ffffff;
    --app-logout-size: 14px;

    /* Danger / Remove / Delete button defaults */
    --app-danger-bg:     #dc2626;
    --app-danger-text:   #ffffff;
    --app-danger-size:   14px;
    --app-danger-border: #b91c1c;
    --app-danger-hover:  #b91c1c;
    --app-danger-active: #991b1b;

    /* Form element border — visible fallback before theme loads */
    --app-line: #cccccc;

    /* Global layout consistency controls */
    --app-ui-scale: 1;
    --app-page-max-width: 1680px;
    --app-page-side-gap: 24px;
    --app-page-inner-pad: 18px;
}
/* THEME_VARIABLES_END */

html {
    font-size: calc(16px * var(--app-ui-scale));
}

body {
    font-family: var(--app-font-family);
    margin: 0;
    padding: 0;
    background-color: var(--app-bg);
    color: var(--app-text);
}

/* Unified page shell across all screens */
body > .container,
main.container,
.container,
.page-wrap,
.page {
    width: min(calc(100% - (var(--app-page-side-gap) * 2)), var(--app-page-max-width)) !important;
    max-width: var(--app-page-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--app-page-inner-pad) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep primary sections visually aligned with the same horizontal rhythm */
.hero-bar,
.controls,
.status-bar,
.filters-section,
.summary-grid,
.table-wrap,
.table-wrapper,
.audit-table-container,
.count-table-wrap,
.summary-table {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Normalize table presentation so pages don't randomly appear too narrow/wide */
.table-wrap,
.table-wrapper,
.audit-table-container,
.count-table-wrap,
.summary-table {
    border-radius: var(--app-radius);
    overflow-x: auto;
}

table,
.audit-table,
.count-table,
.summary-table {
    width: 100%;
}

.global-copywrite {
    display: block;
    width: 100%;
    text-align: center !important;
    padding: 14px 12px 20px;
    color: #6b7280;
    font-weight: 700;
    font-size: 0.88rem;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin: 0 0 0.5em 0;
}

button {
    background-color: var(--app-button-bg);
    color: var(--app-button-text);
    border: none;
    border-radius: 4px;
    padding: 0.5em 1em;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.2s;
}

button:hover {
    filter: brightness(0.92);
}

input, select, textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5em;
    font-size: 1em;
    margin-bottom: 1em;
}

table {
    background-color: var(--app-table-bg);
    color: var(--app-table-text);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.hero-bar {
    background: linear-gradient(135deg, var(--app-hero-bg), var(--app-hero-bg-alt)) !important;
    color: var(--app-hero-text) !important;
    padding: var(--app-hero-padding-y) var(--app-hero-padding-x) !important;
    border-radius: var(--app-hero-radius) !important;
    margin-bottom: 16px !important;
    font-family: var(--app-hero-font-family) !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    column-gap: 12px !important;
    position: relative !important;
}

/* Brand block — logo + system name, anchored to the left */
.hero-brand-left {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    overflow: hidden;
}
.hero-brand-left img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    object-fit: contain;
    flex-shrink: 0;
}
.hero-brand-left span {
    font-weight: 700;
    font-size: var(--app-hero-title-size) !important;
    letter-spacing: 0.02em;
    opacity: 0.92;
    white-space: nowrap;
}

/* Complex hero rows (Falcon-POS, Dashboard) span the full grid width */
.hero-bar > .hero-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-bar h1 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--app-hero-title-size) !important;
    color: var(--app-hero-text) !important;
    font-family: var(--app-hero-font-family) !important;
    text-align: center !important;
    justify-self: center;
}

/* Hide the CSS pseudo-logo on h1 when a real logo is shown in hero-brand-left */
.hero-brand-left ~ h1::before {
    display: none !important;
}

.hero-bar h1::before {
    content: '';
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15) url('logo.png') center/18px 18px no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.28);
    flex: 0 0 24px;
}

.hero-bar p,
.hero-bar .subtitle,
.hero-bar .hero-subtitle {
    margin: 6px 0 0 0;
    font-size: var(--app-hero-subtitle-size) !important;
    color: var(--app-hero-text) !important;
    font-family: var(--app-hero-font-family) !important;
    text-align: center !important;
}

.hero-bar.auto-logout-enabled {
    position: relative;
}

.hero-bar .hero-logout-btn,
.hero-bar .logout-btn,
.hero-bar #logoutBtn,
.hero-bar .auth-actions.logout {
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-logout-bg) 90%, #ffffff 10%), var(--app-logout-bg));
    color: var(--app-logout-text);
    border: 1px solid color-mix(in srgb, var(--app-logout-bg) 72%, #000000 28%);
    border-radius: 999px;
    font-size: var(--app-logout-size);
    font-weight: 700;
    line-height: 1.2;
    padding: 0.5em 1em;
    min-height: calc(var(--app-logout-size) * 2.2);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.hero-bar.auto-logout-enabled .hero-logout-btn {
    justify-self: end;
    position: static;
}

.hero-bar .hero-logout-btn:hover,
.hero-bar .logout-btn:hover,
.hero-bar #logoutBtn:hover,
.hero-bar .auth-actions.logout:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
}

.hero-bar .hero-logout-btn:active,
.hero-bar .logout-btn:active,
.hero-bar #logoutBtn:active,
.hero-bar .auth-actions.logout:active {
    transform: translateY(0);
}

/* Shared floating logo style for pages that include the image tag */
.global-falcon-logo {
    position: fixed;
    top: 10px;
    right: 10px;
    width: var(--app-logo-width) !important;
    height: var(--app-logo-height) !important;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 6px;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE & TABLET RESPONSIVE SYSTEM
   Breakpoints:  tablet  ≤ 900px   |   phone  ≤ 600px   |   small phone  ≤ 400px
   ──────────────────────────────────────────────────────────────────────────── */

/* Mobile-scale CSS variables — override via theme-settings */
:root {
    --app-hero-title-size-tablet: 24px;
    --app-hero-title-size-mobile: 20px;
    --app-hero-subtitle-size-mobile: 13px;
    --app-hero-padding-y-mobile: 10px;
    --app-hero-padding-x-mobile: 12px;
    --app-touch-min: 44px;         /* minimum tap-target height */
    --app-mobile-font-scale: 0.95; /* body font scale on phones */
    --app-logo-hide-mobile: block; /* set to 'none' via JS/theme to hide logo on mobile */
}

/* ── Touch-target utilities ─────────────────────────────────────────────── */
.touch-target {
    min-height: var(--app-touch-min);
    min-width:  var(--app-touch-min);
}

/* ── Responsive helper classes ──────────────────────────────────────────── */
.hide-mobile  { }     /* visible by default, hidden in mobile MQ below */
.show-mobile  { display: none; }  /* hidden by default, shown in mobile MQ */
.hide-tablet  { }
.show-tablet  { display: none; }

/* ── Scrollable table wrapper ───────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* ── Responsive grid helpers ────────────────────────────────────────────── */
.resp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.resp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* ════════════════════════════════════════════════════════════════════════════
   TABLET  (≤ 900px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Hero bar */
    .hero-bar h1 {
        font-size: var(--app-hero-title-size-tablet) !important;
    }

    /* Container */
    .container {
        padding: 8px !important;
    }

    /* Floating logo — smaller on tablet */
    .global-falcon-logo {
        width: 80px !important;
        height: 80px !important;
        top: 6px;
        right: 6px;
    }

    /* Responsive helpers */
    .hide-tablet  { display: none !important; }
    .show-tablet  { display: block !important; }

    /* Grid helpers collapse */
    .resp-grid-3 { grid-template-columns: 1fr 1fr; }

    /* Buttons — ensure touch targets */
    button, .btn, input[type="submit"], input[type="button"] {
        min-height: var(--app-touch-min);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   PHONE  (≤ 600px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* Body font scale */
    body {
        font-size: calc(1em * var(--app-mobile-font-scale));
    }

    /* Hero bar */
    .hero-bar {
        padding: var(--app-hero-padding-y-mobile) var(--app-hero-padding-x-mobile) !important;
        border-radius: 10px !important;
    }
    .hero-bar h1 {
        font-size: var(--app-hero-title-size-mobile) !important;
        gap: 8px !important;
    }

    .hero-bar.auto-logout-enabled {
        /* no extra padding — logout is in grid column */
    }

    .hero-bar.auto-logout-enabled .hero-logout-btn {
        justify-self: end;
        position: static;
    }
    /* Hide brand label text on small screens — keep logo only */
    .hero-brand-left span {
        display: none;
    }
    .hero-bar h1::before {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }
    .hero-bar p,
    .hero-bar .subtitle,
    .hero-bar .hero-subtitle {
        font-size: var(--app-hero-subtitle-size-mobile) !important;
        margin-top: 4px !important;
    }

    /* Container */
    .container {
        padding: 6px !important;
    }

    /* Floating logo — hidden on phone by default; controlled via --app-logo-hide-mobile */
    .global-falcon-logo {
        display: var(--app-logo-hide-mobile) !important;
        width: 52px !important;
        height: 52px !important;
        top: 4px;
        right: 4px;
        padding: 4px;
    }

    /* Inputs & selects — full width with comfortable touch height */
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
        min-height: var(--app-touch-min);
        font-size: 16px; /* prevent iOS auto-zoom */
    }

    /* Buttons — full-width stacking, touch-friendly */
    .btn-group {
        flex-direction: column;
    }
    .btn-group button,
    .btn-group .btn {
        width: 100%;
    }

    /* Responsive helpers */
    .hide-mobile  { display: none !important; }
    .show-mobile  { display: block !important; }

    /* Grid helpers collapse to single column */
    .resp-grid-2 { grid-template-columns: 1fr; }
    .resp-grid-3 { grid-template-columns: 1fr; }

    /* Tables — horizontal scroll on phone */
    .table-wrap {
        border-radius: 8px;
    }
    table {
        min-width: 480px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SMALL PHONE  (≤ 400px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .hero-bar h1 {
        font-size: 17px !important;
    }
    .container {
        padding: 4px !important;
    }
    .global-falcon-logo {
        display: none !important;
    }
}

/* ── Page-logo (fixed img used on some pages) ───────────────────────────── */
@media (max-width: 600px) {
    .page-logo {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DANGER / REMOVE / DELETE BUTTONS  — applied globally across all pages
   Use any of: .btn-danger  |  .btn-remove  |  .btn-delete  |  [data-remove]
   ════════════════════════════════════════════════════════════════════════════ */
.btn-danger,
.btn-remove,
.btn-delete,
button.danger,
button[data-remove],
button[data-delete] {
    background: var(--app-danger-bg) !important;
    color:      var(--app-danger-text) !important;
    border:     1px solid var(--app-danger-border) !important;
    border-radius: var(--app-radius, 14px);
    font-size:  var(--app-danger-size);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-danger:hover,
.btn-remove:hover,
.btn-delete:hover,
button.danger:hover,
button[data-remove]:hover,
button[data-delete]:hover {
    background: var(--app-danger-hover) !important;
    border-color: var(--app-danger-hover) !important;
}

.btn-danger:active,
.btn-remove:active,
.btn-delete:active,
button.danger:active,
button[data-remove]:active,
button[data-delete]:active {
    background: var(--app-danger-active) !important;
}