/* ==========================================================================
   Brics OPS Portal - Tax Mobile-First Stylesheet (Fase 2)
   --------------------------------------------------------------------------
   Loaded AFTER style.css so it can override via CSS cascade without !important.
   All rules are scoped under #taxTabContent (or #depTabWrap, the Depreciation
   sub-container) so they NEVER leak into other views (properties, tickets,
   messages, etc).

   Design intent (per Brics Real Estate brand direction):
   - Off-white / pure white base (#FAFAFA / #FFFFFF), less gold dominance
   - Dark accent only where needed (#1A1A1A)
   - Bronze used sparingly as a 1-2px hairline, never as fill
   - Luxury Brics look: airy spacing, serif headers, restrained type
   - No heavy animations (only short fade/opacity transitions)
   ========================================================================== */

/* ---------- Local design tokens (scoped, do not pollute :root) ---------- */
#taxTabContent,
#depTabWrap {
  --tx-bg:        #FAFAFA;
  --tx-surface:   #FFFFFF;
  --tx-border:    #ECECEC;
  --tx-border-2:  #E2E2E2;
  --tx-ink:       #1A1A1A;
  --tx-ink-2:     #4A4A4A;
  --tx-ink-3:     #8A8A8A;
  --tx-bronze:    #B8924A;
  --tx-ok:        #2A6644;
  --tx-warn:      #8A5A00;
  --tx-err:       #8A2020;
  --tx-radius:    2px;
  --tx-shadow:    0 1px 2px rgba(0,0,0,.03), 0 4px 10px rgba(0,0,0,.03);
}

/* ---------- Base surface: lighter, calmer background ---------- */
#taxTabContent {
  background: var(--tx-bg);
}
#taxTabContent .pw {
  background: var(--tx-surface);
  box-shadow: var(--tx-shadow);
}

/* ---------- Headline area ---------- */
#taxTabContent .ph-title {
  color: var(--tx-ink);
  font-weight: 300;
  letter-spacing: .2px;
}
#taxTabContent .pt {
  color: var(--tx-ink);
  font-weight: 400;
}

/* ---------- Subtle bronze hairline accents (never fills) ---------- */
#taxTabContent .pw {
  border-top: 1px solid var(--tx-border);
}
#taxTabContent .stats {
  background: var(--tx-border);
}
#taxTabContent .kpi {
  background: var(--tx-surface);
}

/* ---------- Buttons: calmer ghost, sharper dark CTA ---------- */
#taxTabContent .btn-ghost {
  background: var(--tx-surface);
  color: var(--tx-ink);
  border: 1px solid var(--tx-border-2);
}
#taxTabContent .btn-ghost:hover {
  border-color: var(--tx-ink);
  background: var(--tx-bg);
}
#taxTabContent .btn-dark {
  background: var(--tx-ink);
  color: #fff;
}
#taxTabContent .btn-dark:hover {
  background: #000;
}

/* ---------- Chips: cleaner ---------- */
#taxTabContent .chip {
  background: var(--tx-bg);
  color: var(--tx-ink-2);
  border: 1px solid var(--tx-border);
}

/* ---------- Tables ---------- */
#taxTabContent .tbl-wrap {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#taxTabContent .tbl {
  background: var(--tx-surface);
}
#taxTabContent .tbl th {
  background: var(--tx-bg);
  color: var(--tx-ink-3);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tx-border-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
#taxTabContent .tbl td {
  border-bottom: 1px solid var(--tx-border);
}
#taxTabContent .tbl tr:hover td {
  background: var(--tx-bg);
}

/* ==========================================================================
   MOBILE-FIRST LAYER 1 -- tablet & smaller (max-width: 900px)
   Improves the existing 768px rules in style.css with Tax-specific overrides.
   ========================================================================== */
@media (max-width: 900px) {

  /* Action buttons row (Expense / Income / Lock Period) becomes scrollable */
  #taxTabContent .ph-acts {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
    margin: 0 -14px 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
  }
  #taxTabContent .ph-acts::-webkit-scrollbar {
    display: none;
  }
  #taxTabContent .ph-acts .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* KPI grid: 4 columns -> 2 columns on tablet */
  #taxTabContent .stats.s4 {
    grid-template-columns: 1fr 1fr;
  }
  #taxTabContent .kpi {
    padding: 14px 16px;
  }

  /* Form inputs: bigger tap target */
  #taxTabContent .fi2 {
    font-size: 16px; /* prevents iOS zoom-on-focus */
    padding: 11px 12px;
  }
  #taxTabContent .fg2 {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   MOBILE-FIRST LAYER 2 -- phone (max-width: 600px)
   ========================================================================== */
@media (max-width: 600px) {

  /* Page wrapper padding */
  #taxTabContent .pw {
    padding: 16px 14px;
    margin-left: -2px;
    margin-right: -2px;
  }

  /* Headline */
  #taxTabContent .ph-title {
    font-size: 22px;
    line-height: 1.15;
  }
  #taxTabContent .pt {
    font-size: 15px;
  }

  /* KPI grid: 2 columns on phone, tighter */
  #taxTabContent .stats.s4 {
    grid-template-columns: 1fr 1fr;
  }
  #taxTabContent .kpi {
    padding: 12px 12px;
  }
  #taxTabContent .sc-val,
  #taxTabContent .kv {
    font-size: 18px;
  }
  #taxTabContent .sc-lbl,
  #taxTabContent .kl {
    font-size: 9px;
  }

  /* Sub-tab strip: horizontal scroll, no wrap */
  #taxTabContent .pw > div[onclick],
  #taxTabContent .pw > div > button[onclick*="switchTaxTab"] {
    flex: 0 0 auto;
  }
  /* Generic container that holds the sub-tab buttons (taxTab2 output) */
  #taxTabContent .pw > div:has(> [onclick*="switchTaxTab"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }

  /* Tables: smaller font, but keep readable */
  #taxTabContent .tbl {
    font-size: 11.5px;
  }
  #taxTabContent .tbl th,
  #taxTabContent .tbl td {
    padding: 8px 6px;
  }

  /* Buttons: full-width inside forms (Submit / Cancel) */
  #taxTabContent .btn.bsm {
    padding: 10px 14px;
    font-size: 10px;
  }

  /* Total row sticky to bottom when scrolling vertically inside .tbl-wrap */
  #taxTabContent .tbl tfoot td,
  #taxTabContent .tot td,
  #taxTabContent .tbl tr.tot td {
    background: var(--tx-bg);
    font-weight: 700;
    border-top: 2px solid var(--tx-ink);
  }
}

/* ==========================================================================
   MOBILE-FIRST LAYER 3 -- small phone (max-width: 420px)
   Card-fallback for the transaction table (the most cramped one).
   We DO NOT change DOM, only convert the visual table into cards via CSS.
   This is opt-in via class .tbl-cards which JS could later add; for now
   we apply it to the tax transactions table only on <=420px.
   ========================================================================== */
@media (max-width: 420px) {

  #taxTabContent .ph-title {
    font-size: 20px;
  }

  /* KPI grid stays 2 cols but compact */
  #taxTabContent .kpi {
    padding: 10px 10px;
  }
  #taxTabContent .sc-val,
  #taxTabContent .kv {
    font-size: 16px;
  }

  /* Single column form fields */
  #taxTabContent .g2,
  #taxTabContent .cg {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   STICKY TAX ACTION BAR
   On phones, the primary actions (Expense, Income, Bank Import, Receipt
   Upload, Export, Lock Period) are critical. The .ph-acts row is already
   horizontally scrollable; we additionally make it sticky to the TOP of
   the tax view so it stays accessible while scrolling the long table.
   ========================================================================== */
@media (max-width: 900px) {
  #taxTabContent .ph {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--tx-bg);
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tx-border);
  }
}

/* ==========================================================================
   SAFE-AREA INSETS (iOS notch / Android gesture bar)
   ========================================================================== */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    #taxTabContent {
      padding-left: max(0px, env(safe-area-inset-left));
      padding-right: max(0px, env(safe-area-inset-right));
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
  }
}

/* ==========================================================================
   ACCESSIBILITY -- reduce motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #taxTabContent *,
  #taxTabContent *::before,
  #taxTabContent *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ==========================================================================
   PRINT -- clean export view for Tax PDF (when user prints quarter overview)
   ========================================================================== */
@media print {
  #taxTabContent {
    background: #fff;
  }
  #taxTabContent .ph-acts,
  #taxTabContent .btn,
  #taxTabContent .pnav,
  #taxTabContent .sb {
    display: none !important;
  }
  #taxTabContent .pw {
    box-shadow: none;
    border: 1px solid #DDD;
    page-break-inside: avoid;
  }
}

/* End of tax-mobile.css */