/* HN Hotels Ops — Tile Protocol styles
 * 11 tile-type layouts. Each type has a locked visual signature so the UI
 * never gets spoiled when new tiles are added. Tiles MUST use these classes
 * to qualify for the Protocol.
 *
 * Types:
 *   1. live_counter   — hero KPI, segments, sparkline
 *   2. report         — filter bar, chart, table
 *   3. workflow_board — kanban columns
 *   4. ledger         — filter bar, rows, drawer
 *   5. form_entry     — step wizard
 *   6. command_center — split data / action
 *   7. ranking        — leaderboard
 *   8. forecast       — scenario inputs, projection
 *   9. audit          — discrepancy list, drill
 *  10. roster         — date picker, employee grid
 *  11. cockpit_home   — tile summary grid
 *
 * All tiles inherit the shared header/footer from app.css.
 */

/* ─── Shared Tile chrome ─── */
.tile-header {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.tile-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
  flex-shrink: 0;
}
.tile-header-body { flex: 1; min-width: 0; }
.tile-header-title {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  line-height: 1.2;
  margin-bottom: 2px;
}
.tile-header-meta {
  font-size: var(--fs-xs); color: var(--text-dim);
  display: flex; gap: var(--s-2); align-items: center;
}

/* ─── 1. LIVE COUNTER ─── */
.tt-live-counter .hero {
  text-align: center;
  padding: var(--s-6) var(--s-3);
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-4);
}
.tt-live-counter .hero-value {
  font-size: var(--fs-hero); font-weight: var(--fw-black);
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.tt-live-counter .hero-label {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: var(--s-2);
}
.tt-live-counter .hero-delta {
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  margin-top: var(--s-2);
}
.tt-live-counter .segments {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.tt-live-counter .seg {
  padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.tt-live-counter .seg-label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.tt-live-counter .seg-value { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tt-live-counter .spark {
  height: 60px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-2);
}

/* ─── 2. REPORT ─── */
.tt-report .filter-bar {
  display: flex; gap: var(--s-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: var(--s-4); padding-bottom: var(--s-1);
}
.tt-report .filter-bar::-webkit-scrollbar { display: none; }
.tt-report .filter {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  color: var(--text-dim);
  cursor: pointer; white-space: nowrap;
}
.tt-report .filter.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }
.tt-report .chart { height: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--s-4); padding: var(--s-3); }
.tt-report .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tt-report .data-table th { text-align: left; font-weight: var(--fw-semi); color: var(--text-dim); padding: var(--s-2); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.tt-report .data-table td { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--divider); font-variant-numeric: tabular-nums; }

/* ─── 3. WORKFLOW BOARD ─── */
.tt-workflow { display: flex; gap: var(--s-3); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s-3); margin: 0 calc(-1 * var(--s-4)); padding-left: var(--s-4); padding-right: var(--s-4); }
.tt-workflow::-webkit-scrollbar { display: none; }
.tt-workflow .col { flex: 0 0 280px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3); }
.tt-workflow .col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.tt-workflow .col-count { padding: 2px 8px; border-radius: var(--r-pill); background: var(--bg-elev-2); color: var(--text); font-variant-numeric: tabular-nums; }
.tt-workflow .wf-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-3); margin-bottom: var(--s-2); cursor: pointer; }
.tt-workflow .wf-card-title { font-weight: var(--fw-semi); font-size: var(--fs-sm); margin-bottom: 2px; }
.tt-workflow .wf-card-meta { font-size: var(--fs-xs); color: var(--text-dim); }

/* ─── 4. LEDGER ─── */
.tt-ledger .filter-bar { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.tt-ledger .row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); padding: var(--s-3); border-bottom: 1px solid var(--divider); cursor: pointer; transition: background var(--fast) var(--ease); }
.tt-ledger .row:active { background: var(--bg-elev-2); }
.tt-ledger .row-title { font-weight: var(--fw-semi); font-size: var(--fs-sm); margin-bottom: 2px; }
.tt-ledger .row-meta  { font-size: var(--fs-xs); color: var(--text-dim); }
.tt-ledger .row-value { font-weight: var(--fw-bold); font-size: var(--fs-md); font-variant-numeric: tabular-nums; text-align: right; }

/* ─── 5. FORM ENTRY ─── */
.tt-form .steps { display: flex; gap: var(--s-1); margin-bottom: var(--s-5); }
.tt-form .step { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--bg-elev-2); }
.tt-form .step.active { background: var(--accent); }
.tt-form .step.done { background: var(--success); }
.tt-form .field { margin-bottom: var(--s-4); }
.tt-form .field-label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-dim); margin-bottom: var(--s-2); }
.tt-form .field-input { width: 100%; padding: var(--s-3); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-md); min-height: 48px; }
.tt-form .field-input:focus { outline: 0; border-color: var(--accent); }
.tt-form .btn-primary { width: 100%; padding: var(--s-4); background: var(--accent); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-md); border: 0; border-radius: var(--r-md); cursor: pointer; margin-top: var(--s-5); min-height: 52px; }

/* ─── 6. COMMAND CENTER ─── */
.tt-cmd { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.tt-cmd .data-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); }
.tt-cmd .action-panel { background: var(--bg-elev-2); border: 1px solid var(--accent-ring); border-radius: var(--r-md); padding: var(--s-4); }
.tt-cmd .action-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: var(--fw-bold); margin-bottom: var(--s-3); }
.tt-cmd .action-btn { width: 100%; padding: var(--s-3); background: var(--accent); color: #fff; border: 0; border-radius: var(--r-sm); font-weight: var(--fw-semi); cursor: pointer; margin-bottom: var(--s-2); min-height: 44px; }
.tt-cmd .action-btn.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent-ring); }
.tt-cmd .action-btn.danger { background: var(--danger); }

/* ─── 7. RANKING ─── */
.tt-ranking .leader { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); margin-bottom: var(--s-2); }
.tt-ranking .rank { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); background: var(--bg-elev-2); flex-shrink: 0; }
.tt-ranking .leader.gold .rank   { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000; }
.tt-ranking .leader.silver .rank { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #000; }
.tt-ranking .leader.bronze .rank { background: linear-gradient(135deg, #fb923c, #b45309); color: #000; }
.tt-ranking .leader-name { flex: 1; font-weight: var(--fw-semi); }
.tt-ranking .leader-metric { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--accent); }

/* ─── 8. FORECAST ─── */
.tt-forecast .scenario { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-3); }
.tt-forecast .projection { height: 240px; background: var(--bg-elev-2); border-radius: var(--r-md); padding: var(--s-3); margin-bottom: var(--s-3); }
.tt-forecast .plan-table { width: 100%; border-collapse: collapse; }
.tt-forecast .plan-table th, .tt-forecast .plan-table td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--divider); font-size: var(--fs-sm); }

/* ─── 9. AUDIT ─── */
.tt-audit .banner { padding: var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-3); }
.tt-audit .banner.ok     { background: var(--success-soft); color: var(--success); border: 1px solid rgba(16,185,129,0.3); }
.tt-audit .banner.warn   { background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(245,158,11,0.3); }
.tt-audit .banner.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
.tt-audit .banner .big { font-size: var(--fs-h2); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.tt-audit .discrepancy { padding: var(--s-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: var(--s-2); display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); }

/* ─── 10. ROSTER ─── */
.tt-roster .date-picker { display: flex; gap: var(--s-2); overflow-x: auto; margin-bottom: var(--s-4); }
.tt-roster .date-picker::-webkit-scrollbar { display: none; }
.tt-roster .date { flex-shrink: 0; padding: var(--s-2) var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi); cursor: pointer; }
.tt-roster .date.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tt-roster .emp-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-3); padding: var(--s-3); border-bottom: 1px solid var(--divider); align-items: center; }
.tt-roster .emp-name { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.tt-roster .emp-meta { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 2px; }
.tt-roster .emp-time { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-family: ui-monospace, monospace; }
.tt-roster .emp-status { padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.tt-roster .emp-status.in { background: var(--success-soft); color: var(--success); }
.tt-roster .emp-status.out { background: var(--bg-elev-2); color: var(--text-dim); }

/* ─── 11. COCKPIT HOME ─── */
.tt-cockpit .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.tt-cockpit .tile-summary {
  padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  min-height: 100px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tt-cockpit .ts-label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.tt-cockpit .ts-value { font-size: var(--fs-xl); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; margin-top: var(--s-2); }
.tt-cockpit .ts-hint  { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 2px; }