/* ============================================================================
   mobile.css — phone-first refinements for Chamanke Workspace.

   100% ADDITIVE and REVERSIBLE: every rule is inside a phone media query, so
   desktop/tablet layout is untouched. To roll back, delete this file and its
   <link> in index.html. Loaded LAST so it wins the cascade.

   Breakpoint 768px matches the app's existing mobile switch (sidebar goes
   off-canvas + hamburger appears at this width).
   ============================================================================ */

/* ==========================================================================
   1. iOS zoom-on-focus killer.
   Mobile Safari force-zooms the page whenever you focus an <input>/<select>/
   <textarea> whose font-size is < 16px — then you have to pinch back out. The
   whole app used ~12px controls, so EVERY field tap zoomed. 16px stops it dead.
   (16px here is the *rendered* control text on phones only; desktop is unchanged.)
   ========================================================================== */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .fin-filter-select {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   2. Touch targets — nothing tappable below ~44px.
   The hamburger was 16×25px; row edit/delete icons 26×26; selects 30px tall.
   ========================================================================== */
@media (max-width: 768px) {
  /* Primary nav toggle: real 44×44 hit area */
  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.55rem;
    margin-inline-start: -8px;   /* keep the glyph visually where it was */
    border-radius: 10px;
  }

  /* Buttons / selects reach a comfortable minimum */
  .btn-primary,
  .btn-secondary,
  .fin-subnav-btn,
  .fin-back-btn,
  #appPeriodCtrl select,
  .fin-filter-select {
    min-height: 42px;
  }

  /* Square icon buttons (toolbar ⚙️/📤/📥/🖨️ etc.) */
  .btn-icon-square {
    min-width: 42px;
    min-height: 42px;
  }

  /* In-row action icons (✏️ / 🗑️ / view) inside any data table — give them a
     real finger-sized hit area and a little breathing room between them. */
  td button,
  td a.btn,
  td .icon-btn,
  table button {
    min-width: 40px;
    min-height: 40px;
    font-size: 1.05rem;
  }
  td button + button,
  td a + a,
  td .icon-btn + .icon-btn {
    margin-inline-start: 4px;
  }

  /* Collapse toggles (▼ KPIs / ▼ Analytics / Finance KPI toggle) */
  .fin-kpi-toggle,
  .kpi-toggle,
  [class*="collapse-toggle"] {
    min-height: 40px;
  }
}

/* ==========================================================================
   3. Slim the sticky top bar + float "+ New Contract".
   On Contracts the pinned header ballooned to 194px (~24% of the screen)
   because the New-Contract button + period pickers + icon row all WRAP inside
   .header-right. Moving the big button to a floating action button (FAB)
   reclaims that space and matches the familiar mobile "compose" pattern.
   ========================================================================== */
@media (max-width: 768px) {
  .main-header {
    padding-block: 8px;
    row-gap: 6px;
    column-gap: 8px;
  }
  .header-left { gap: 8px; min-width: 0; }
  .header-left h1,
  .header-left h2,
  .header-left .page-title {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-right { gap: 8px; row-gap: 6px; }

  /* Keep the title row on ONE line and the period pickers compact + single-row
     (they were wrapping to a second row and doubling the header height). */
  .header-left { flex-wrap: nowrap; }
  #appPeriodCtrl { flex-wrap: nowrap !important; gap: 6px; }
  #appPeriodCtrl select,
  #appPeriodCtrl .fin-filter-select {
    min-height: 40px;
    max-width: 40vw;
    padding-inline: 8px;
  }

  /* "+ New Contract" -> floating action button, out of the header flow */
  #btnAddContract {
    position: fixed;
    inset-inline-end: 16px;
    inset-block-end: 18px;
    width: auto;
    min-height: 52px;
    margin: 0;
    padding-inline: 20px;
    border-radius: 26px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
    z-index: 120;
  }
  /* keep the FAB clear of a bottom sheet/keyboard by riding the safe area */
  @supports (padding: max(0px)) {
    #btnAddContract { inset-block-end: max(18px, env(safe-area-inset-bottom)); }
  }
}

/* ==========================================================================
   4. KPI cards — 2-up on phones (Contracts was 1-per-row and ~100px tall each,
   which meant scrolling through six full-width cards). Finance already did this.
   ========================================================================== */
@media (max-width: 768px) {
  .kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .kpi-card {
    padding: 12px 12px;
  }
  .kpi-card .kpi-icon,
  .kpi-card [class*="icon"] {
    /* smaller icon chip so two fit comfortably side-by-side */
    transform: scale(0.9);
  }
}

/* ==========================================================================
   5. Tables — smooth momentum scrolling + a subtle "more →" affordance, and a
   sticky first column so you keep context while scrolling wide tables sideways.
   (Wrappers already have overflow-x:auto; this just makes them feel native.)
   ========================================================================== */
@media (max-width: 768px) {
  .active-dash-table-wrap,
  .table-wrap,
  [class*="-table-wrap"],
  .fin-table-scroll,
  .table-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  /* Keep the first cell (name/label) visible while scrolling the rest */
  .active-dash-table th:first-child,
  .active-dash-table td:first-child {
    position: sticky;
    inset-inline-start: 0;
    background: var(--bg-card, #131a24);
    z-index: 1;
  }
  /* A hair more row height so rows are tappable and text isn't cramped */
  table td, table th { padding-block: 9px; }
}

/* ==========================================================================
   6. Legibility floor — nudge the very smallest utility text up on phones so
   captions/labels aren't sub-11px. Conservative (kept relative) to avoid
   reflowing dense desktop tables.
   ========================================================================== */
@media (max-width: 768px) {
  .fin-info-lbl,
  .kpi-card .kpi-label,
  figcaption,
  .caption,
  small {
    font-size: 0.8rem;
  }
  table td, table th { font-size: 0.82rem; }
}

/* ==========================================================================
   7. Nav drawer polish — dim the page behind the open drawer and give it a
   clear edge, so it reads as a modal surface rather than floating over live UI.
   ========================================================================== */
@media (max-width: 768px) {
  body.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;              /* under the sidebar (z-index:95), over content */
    animation: mobScrimIn 0.2s ease;
  }
  @keyframes mobScrimIn { from { opacity: 0; } to { opacity: 1; } }
  .sidebar { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4); }
}