/* /var/www/shared/assets/ohiomade.css */
/* OhioMade Shared UI (v1.9) — header + chips restored, NO safe-area padding + UNIVERSAL TABLES */

/* Base reset */
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
:root{ -webkit-text-size-adjust:100%; }

/* iOS-only: prevent input focus zoom (Cabinet pattern) */
@supports (-webkit-touch-callout:none){
  input, select, textarea, button { font-size:16px !important; }
}

/* Tap feel */
html, body{ touch-action: manipulation; }
a, button, .btn, .om-btn, .menu-tile, .om-tile{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Theme */
:root{
  --bg:#050814;
  --panel:#020617;
  --card:#020617;

  --accent:#38bdf8;
  --text:#e2e8f0;
  --muted:#94a3b8;

  --tag:#1e293b;
  --line:rgba(255,255,255,.08);

  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;

  --radius:14px;
  --max:900px;
}

/* Page */
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

/* Standard container (NO env(safe-area) padding) */
main,.container,.om-container{
  max-width:var(--max);
  margin:0 auto;
  padding:16px;
}

/* Links */
a{ color:#bfdbfe; }

/* Typography */
h1{ color:var(--accent); margin:0 0 6px 0; font-size:26px; line-height:1.15; }
h2{ color:var(--accent); font-size:16px; margin:0 0 10px 0; }
.small{ font-size:13px; color:var(--muted); }
p.small{ margin:0; }

/* Cards */
.card,.om-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:12px;
  border:1px solid #111827;
}

/* Buttons */
.btn,.om-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  min-height:40px;
}
.btn{ padding:10px 16px; font-weight:800; }
.btn-primary{ background:var(--accent); color:#0b1020; border-color:transparent; }

/* Icons */
.om-ico{ width:18px; height:18px; display:inline-block; vertical-align:-3px; opacity:.95; }
.om-ico.sm{ width:16px; height:16px; vertical-align:-2px; }
.om-ico.lg{ width:22px; height:22px; vertical-align:-4px; }
.om-ico-wrap{
  width:28px; height:28px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

/* ============================================================
   HEADER (dashboard_header.php expects these)
   ============================================================ */
.om-shared-head{ margin-bottom:12px; }
.om-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}
.om-title{
  font-size: clamp(26px, 7vw, 44px);
  margin:0 0 6px 0;
  letter-spacing:.2px;
  line-height:1.05;
}
.om-small{
  color:var(--muted);
  line-height:1.25;
  font-size:14px;
}
.om-warn{ color:#fca5a5; margin-top:8px; }
.om-upcoming{ color:#facc15; margin-top:8px; }

/* Chips */
.om-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 10px;
}
.om-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  color:var(--text);
  font-size:14px;
  white-space:nowrap;
}
.om-chip.ok{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.30); }
.om-chip.warn{ background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.30); }
.om-chip.bad{ background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.30); }
.om-chip.neutral{ background:rgba(148,163,184,.12); border-color:rgba(148,163,184,.20); }

/* Grid */
.menu-grid,.grid,.om-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width:720px){
  .menu-grid,.grid,.om-grid{ grid-template-columns:1fr; }
}
.menu-grid.cols2-mobile,.om-grid.cols2-mobile{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:420px){
  .menu-grid.cols2-mobile,.om-grid.cols2-mobile{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Tiles */
.menu-tile,.om-tile{
  display:block;
  text-decoration:none;
  background:var(--panel);
  border-radius:12px;
  padding:12px;
  color:var(--text);
  font-size:14px;
  border:1px solid #1f2937;
}
.menu-row{ display:flex; gap:12px; align-items:flex-start; }
.menu-label{ font-weight:800; margin-bottom:3px; }
.menu-desc{ font-size:12px; color:var(--muted); line-height:1.25; }
.menu-tile.compact{ padding:10px; }
.menu-tile.compact .menu-desc{ font-size:11px; }

/* ============================================================
   TABLES (Universal) — ONE style for every page
   ============================================================ */

/* scroll wrapper */
.om-table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
}

/* table */
table.om-table-grid{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
  min-width:760px; /* keeps iPhone columns readable */
}

/* cells */
table.om-table-grid th,
table.om-table-grid td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
  white-space:nowrap;
}

/* header */
table.om-table-grid th{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(255,255,255,.04);
  color:var(--accent);
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* last row */
table.om-table-grid tr:last-child td{ border-bottom:none; }

/* numeric */
.om-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* actions cell */
.om-actions{
  text-align:right;
}
.om-actions .btn,
.om-actions .om-btn{
  padding:10px 14px;
  min-height:40px;
  white-space:nowrap;
}

/* Pills */
.om-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  font-weight:950;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.om-pill.ok{ background:rgba(34,197,94,.16); border-color:rgba(34,197,94,.26); }
.om-pill.warn{ background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.26); }
.om-pill.bad{ background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.26); }

@media (max-width:640px){
  table.om-table-grid th,
  table.om-table-grid td{ padding:10px 10px; }
}

/* Footer */
footer,.om-footer{
  margin-top:18px;
  font-size:11px;
  text-align:center;
  color:var(--muted);
  padding-bottom:8px;
}