/* ============================================================
   BASE — CSS Reset, Typography, Form Defaults, Utilities
   ============================================================
   Source: css/styles.css lines 1-2, 43-44, 72-77, 92
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (min-width: 1100px) { html:not(.split-view-active) { zoom: 1.25; } }

/* ---------- Typography ---------- */
html { font-size: 15px; }
body { font-family: 'Inter', sans-serif; background: var(--navy); color: var(--champagne); min-height: 100vh; line-height: 1.5; overscroll-behavior: none; }
html { overscroll-behavior: none; }
h2.section-heading { font-family: 'Cinzel', serif; font-weight: 600; font-size: 1.5rem; color: var(--gold); margin-bottom: 1rem; }
h3.sub-heading { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; color: var(--champagne); margin-bottom: 0.5rem; }
.section-divider { border: none; border-top: 1px solid var(--navy-lighter); margin: 1.5rem 0; }

/* ---------- Form Element Defaults ---------- */
input, select, textarea { font-family: 'Inter', sans-serif; font-size: 0.85rem; background: var(--navy); border: 1px solid var(--navy-lighter); color: var(--champagne); padding: 0.5rem 0.75rem; border-radius: var(--radius); width: 100%; transition: border-color 0.2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 8px rgba(212,175,55,0.15); }
label { font-size: 0.78rem; color: var(--gray-300); margin-bottom: 0.25rem; display: block; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }

/* ---------- Form Layout ---------- */
.form-group { margin-bottom: 0.75rem; }
.form-row { display: flex; gap: 0.75rem; }
.form-row > * { flex: 1; }

/* ---------- Utility Classes ---------- */
.flex-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--gray-500); font-size: 0.9rem; text-align: center; }
.empty-state .empty-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.4; }

/* ---------- Prevent iOS text size adjustment (source: line 1315) ---------- */
@supports (-webkit-touch-callout: none) {
  .sidebar-nav { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .customer-sidebar { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .notif-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .activity-feed { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .modal { overscroll-behavior: contain; }
  .modal-fullscreen { overscroll-behavior: contain; }
  .fp-scroll-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .inv-detail-modal { overscroll-behavior: contain; }
  .split-pane-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .dbg-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}

/* Fix dropdown menu items with onmouseover/onmouseout for touch devices (source: lines 1514-1520) */
#inv-actions-menu > div,
#ni-actions-menu > div { transition: background 0.15s; }
@media (hover: none) {
  #inv-actions-menu > div:active,
  #ni-actions-menu > div:active { background: var(--navy-lighter) !important; }
}