/* ── SHARED ─────────────────────────────────────────────────── */
:root{
  --font-body:'Inter','Helvetica Neue',sans-serif;
  --text-xs:clamp(0.65rem,0.6rem + 0.2vw,0.75rem);
  --text-sm:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-base:clamp(0.875rem,0.8rem + 0.3vw,1rem);
  --radius-sm:0.25rem;--radius-md:0.375rem;
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;}
body{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  background:#e8e8e8;
  color:#1a1a1a;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:0.75rem;
}
input,button{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
table{border-collapse:collapse;width:100%;}

/* ── TABS ────────────────────────────────────────────────────── */
.tabs{display:flex;gap:0;width:100%;max-width:900px;margin-bottom:-2px;position:relative;z-index:2;}
.tab-btn{padding:0.35rem 1.25rem;font-size:var(--text-xs);font-weight:700;border:2px solid #222;border-bottom:none;background:#d0d0d0;color:#555;border-radius:0.4rem 0.4rem 0 0;cursor:pointer;letter-spacing:0.04em;transition:background 120ms;}
.tab-btn.active{background:#fdff32;color:#111;border-bottom:2px solid #fdff32;}
.tab-btn:not(.active):hover{background:#c4c4c4;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ── COUNT CARD ──────────────────────────────────────────────── */
.cc-card{background:#fff;border:2px solid #222;border-radius:0 0.5rem 0.5rem 0.5rem;width:100%;max-width:900px;box-shadow:0 4px 16px rgba(0,0,0,0.18);overflow:hidden;}
.svc-tot-row input#f-svc-tot {
  background: #fdff32 !important;
  border-color: #d4d400 !important;
  font-weight: 700;
}
.dark .svc-tot-row input#f-svc-tot {
  background: #b8bb00 !important;
  border-color: #999900 !important;
  color: #111 !important;
}
.svc-banner{background:#fdff32;border-bottom:2px solid #222;display:flex;align-items:center;padding:0.3rem 0.5rem;gap:0.4rem;}
.svc-corner{width:18px;height:18px;border:2px solid #222;background:#fdff32;flex-shrink:0;border-radius:2px;}
.svc-input{flex:1;background:transparent;border:none;outline:none;font-weight:700;font-size:var(--text-base);text-align:center;letter-spacing:0.08em;text-transform:uppercase;color:#111;}
.svc-input::placeholder{color:#888;font-weight:400;text-transform:none;letter-spacing:0;}
.svc-input:focus{outline:2px dashed #555;outline-offset:1px;}
.weeks-section{border-bottom:2px solid #222;padding:0.3rem 0.4rem;}
.sec-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:0.2rem;color:#333;}
.weeks-table th,.weeks-table td{text-align:center;padding:2px 3px;font-size:var(--text-xs);border:1px solid #ccc;}
.weeks-table th{background:#f5f5f5;font-weight:600;}
.weeks-table td:first-child{background:#f5f5f5;font-weight:700;width:30px;}
.weeks-table input{width:100%;border:none;outline:none;text-align:center;font-size:var(--text-xs);background:transparent;padding:1px;color:#111;}
.weeks-table input:focus{background:#fffbe6;}
.card-body{display:grid;grid-template-columns:1fr 1fr;border-bottom:2px solid #222;}
.col-left{border-right:2px solid #222;padding:0.35rem 0.4rem;}
.col-right{padding:0.35rem 0.4rem;}
.frow{display:flex;align-items:center;gap:0.3rem;margin-bottom:0.25rem;}
.frow label{font-size:var(--text-xs);font-weight:600;white-space:nowrap;min-width:74px;color:#333;}
.fi{flex:1;border:1px solid #aaa;border-radius:var(--radius-sm);padding:2px 5px;font-size:var(--text-xs);background:#fafafa;color:#111;transition:border-color var(--transition);}
.fi:focus{outline:none;border-color:#555;background:#fffbe6;}
.fi.autofill{background:#e8f4e8;border-color:#8aba8a;font-weight:700;text-align:center;cursor:default;}
.fi[readonly]{cursor:default;}
.block{margin-bottom:0.3rem;}
.mini-divider{border:none;border-top:1px solid #ddd;margin:0.25rem 0;}
.kids-table th,.kids-table td{padding:2px 4px;font-size:var(--text-xs);border:1px solid #ccc;}
.kids-table th{background:#f5f5f5;font-weight:600;text-align:center;}
.kids-table th:first-child{text-align:left;}
.kids-table td:first-child{font-weight:500;color:#333;}
.kids-table td:not(:first-child){text-align:center;}
.kids-table input{width:100%;border:none;outline:none;text-align:center;font-size:var(--text-xs);background:transparent;color:#111;padding:1px;}
.kids-table input:focus{background:#fffbe6;}
.kids-table tr.tr-total td{border-top:2px solid #888;background:#f5f5f5;font-weight:700;}
.kids-table tr.tr-total input{font-weight:700;background:transparent;}
.fi.highlight{background:#fffbe6;border-color:#bbb;font-weight:700;text-align:center;}
.svc-tot-row{display:flex;align-items:center;gap:0.3rem;margin:0.25rem 0;border:1px solid #aaa;border-radius:var(--radius-sm);background:#fffbe6;padding:3px 5px;}
.svc-tot-row label{font-size:var(--text-xs);font-weight:600;flex:1;color:#333;}
.svc-tot-row input{border:1px solid #aaa;border-radius:var(--radius-sm);padding:2px 4px;font-size:var(--text-xs);font-weight:700;text-align:center;width:60px;background:#fff;cursor:default;}
.hu-row{display:flex;align-items:center;gap:0.3rem;margin-bottom:0.2rem;}
.hu-row label{font-size:var(--text-xs);font-weight:600;min-width:74px;color:#333;}
.hu-row input{flex:1;border:none;border-bottom:1px solid #888;outline:none;font-size:var(--text-xs);background:transparent;padding:1px 3px;color:#111;}
.hu-row input:focus{border-bottom-color:#333;background:#fffbe6;}
.prev-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem;margin-top:0.3rem;}
.prev-table th,.prev-table td{padding:2px 3px;font-size:var(--text-xs);border:1px solid #ccc;}
.prev-table th{background:#f5f5f5;font-weight:600;text-align:center;}
.prev-table th:first-child{text-align:left;}
.prev-table td:first-child{font-weight:500;color:#333;}
.prev-table input{width:100%;border:none;outline:none;text-align:center;font-size:var(--text-xs);background:transparent;color:#111;padding:1px;}
.prev-table input:focus{background:#fffbe6;}
.action-bar{display:flex;gap:0.5rem;justify-content:flex-end;padding:0.4rem 0.5rem;background:#f7f7f7;border-top:1px solid #ddd;}
.btn{display:inline-flex;align-items:center;gap:0.25rem;padding:0.25rem 0.75rem;border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:600;border:1px solid transparent;cursor:pointer;}
.btn-primary{background:#222;color:#fff;border-color:#222;}
.btn-primary:hover{background:#444;}
.btn-ghost{color:#555;border-color:#ccc;background:#fff;}
.btn-ghost:hover{background:#eee;}

/* ── CARD DARK MODE (dark) ─────────────────────────────────────── */
.cc-card.dark {
  --dk-bg:       #151515;
  --dk-border:   #2b2b2b;
  --dk-text:     #e8e8e8;
  --dk-muted:    #8e8e8e;
  --dk-input-bg: #121212;
  --dk-row-bg:   #1e1e1e;

  background:    var(--dk-bg);
  color:         var(--dk-text);
  border-color:  var(--dk-border);
}
.cc-card.dark .svc-banner      { background:#b8bb00; border-color:var(--dk-border); }
.cc-card.dark .svc-input       { color:#111; }
.cc-card.dark .weeks-section,
.cc-card.dark .card-body,
.cc-card.dark .col-left        { border-color:var(--dk-border); }
.cc-card.dark .sec-label       { color:var(--dk-muted); }
.cc-card.dark .frow label,
.cc-card.dark .hu-row label    { color:var(--dk-muted); }
.cc-card.dark .fi              { background:var(--dk-input-bg);border-color:#333;color:var(--dk-text); }
.cc-card.dark .fi.autofill     { background:#1a2e1a;border-color:#3a5a3a; }
.cc-card.dark .weeks-table th,
.cc-card.dark .weeks-table td:first-child { background:var(--dk-row-bg); }
.cc-card.dark .weeks-table input          { color:var(--dk-text); }
.cc-card.dark .kids-table th,
.cc-card.dark .kids-table tr.tr-total td  { background:var(--dk-row-bg); }
.cc-card.dark .kids-table input           { color:var(--dk-text); }
.cc-card.dark .svc-tot-row     { background:var(--dk-row-bg);border-color:#333; }
.cc-card.dark .svc-tot-row input { background:var(--dk-input-bg);color:var(--dk-text); }
.cc-card.dark .action-bar      { background:#111;border-color:var(--dk-border); }
.cc-card.dark .btn-ghost       { background:#1e1e1e;color:#ccc;border-color:#333; }
.cc-card.dark .prev-table th   { background:var(--dk-row-bg); }
.cc-card.dark .prev-table input { color:var(--dk-text); }
.cc-card.dark .hu-row input    { border-color:#444;color:var(--dk-text); }

body.dark {
  background: #0a0a0b;
}

body.dark .tab-btn {
  background: #1e1e1e;
  color: #aaa;
  border-color: #333;
}

body.dark .tab-btn.active {
  background: #b8bb00;
  color: #111;
  border-color: #b8bb00;
}

body.dark .tab-btn:not(.active):hover {
  background: #2a2a2a;
}

@media (max-width: 600px) {
  .card-body { grid-template-columns: 1fr; }
  .col-left { border-right: none; border-bottom: 2px solid #222; }
  .prev-wrap { grid-template-columns: 1fr; }
  .fd-grid-3, .fd-grid-2, .fd-total-row { grid-template-columns: 1fr; }

  /* History tab mobile */
  .history-container {
    flex-direction: column;
    height: auto;
  }
  .history-list-panel {
    width: 100%;
    max-height: 250px;
  }

  /* ✅ Reorder Main Floor on mobile: sections first, pies second */
  #tab-floor-detail .fd-grid-3.main-floor {
    display: flex;
    flex-direction: column;
  }
  #tab-floor-detail .fd-grid-3.main-floor .col-left,
  #tab-floor-detail .fd-grid-3.main-floor .col-right {
    display: contents;
  }
  #tab-floor-detail .fd-order-1 { order: 1; }
  #tab-floor-detail .fd-order-2 { order: 2; }
  #tab-floor-detail .fd-order-3 { order: 3; }
  #tab-floor-detail .fd-order-4 { order: 4; }
  #tab-floor-detail .fd-order-5 { order: 5; }
  #tab-floor-detail .fd-order-6 { order: 6; }
}

@media print {
  body { background: #fff; padding: 0; }
  .tabs, .action-bar, .fd-action { display: none !important; }
  .cc-card { box-shadow: none; border: 1px solid #222; border-radius: 0; }
}


/* ── AM/PM Period label ──────────────────────────────────────── */
.period-label{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  border:2px solid transparent;
  font-size:var(--text-xs);
  font-weight:700;
  cursor:pointer;
  color:#555;
  transition:all 120ms;
  user-select:none;
}
.period-label.active{
  border-color:#111;
  color:#111;
}
.period-label:hover{color:#111;}

@media print{
  .period-label.active{
    border-color:#111 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .wt-cell.highlighted{
    background:#fdff32 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .svc-banner {
    background: #fdff32 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .svc-input {
    background: transparent !important;
  }
  #f-svc-tot {
    background: #fdff32 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.wt-cell.highlighted { background: #fdff32 !important; }

/* ── History Tab ─────────────────────────────────────────── */
.history-container {
  display: flex;
  gap: 16px;
  padding: 16px;
  height: calc(100vh - 120px);
  box-sizing: border-box;
}

.history-list-panel {
  width: 280px;
  flex-shrink: 0;
  border: 1px solid var(--border, #ccc);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.history-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--header-bg, #f0f0f0);
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--border, #ccc);
}

#history-list-body {
  overflow-y: auto;
  flex: 1;
}

.history-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #eee);
  font-size: 13px;
  transition: background 0.15s;
}

.history-list-row:hover   { background: var(--hover-bg, #e8f0fe); }
.history-list-row.selected { background: var(--accent, #1a73e8); color: #fff; }
.history-list-row.selected .hl-period { background: rgba(255,255,255,0.25); color: #fff; }

.hl-date   { font-weight: 600; min-width: 90px; }
.hl-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-total  { font-weight: 700; min-width: 36px; text-align: right; }
.hl-period {
  font-size: 11px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; min-width: 28px; text-align: center;
}
.hl-am { background: #d4edda; color: #155724; }
.hl-pm { background: #cce5ff; color: #004085; }

.history-card-panel {
  flex: 1;
  border: 1px solid var(--border, #ccc);
  border-radius: 10px;
  overflow-y: auto;
  padding: 16px;
}

.history-empty {
  color: var(--muted, #888);
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
}

.history-svc-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #eee);
  margin-bottom: 12px;
  font-size: 13px;
}

.history-sections { display: flex; flex-direction: column; gap: 14px; }

.history-section {
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  padding: 10px 14px;
}

.history-section-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.history-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.hf { display: flex; flex-direction: column; font-size: 12px; }
.hf label { color: var(--muted, #888); font-size: 11px; margin-bottom: 2px; }
.hf span  { font-weight: 600; font-size: 14px; }

.history-kids-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.history-kids-table th,
.history-kids-table td { padding: 5px 10px; border: 1px solid var(--border, #ddd); text-align: center; }
.history-kids-table thead th { background: var(--header-bg, #f0f0f0); font-weight: 700; }

.history-svc-total { font-size: 20px !important; font-weight: 800 !important; color: var(--accent, #1a73e8); }


/* Dark mode support */
.dark .history-list-panel,
.dark .history-card-panel  { border-color: #444; }
.dark .history-list-header { background: #2a2a2a; }
.dark .history-list-row    { border-color: #333; }
.dark .history-list-row:hover { background: #2c2c2c; }
.dark .history-section     { border-color: #444; }
.dark .history-kids-table th,
.dark .history-kids-table td { border-color: #444; }
.dark .history-kids-table thead th { background: #2a2a2a; }
.dark .hf label            { color: #aaa; }

/* ── Dark Mode – Input Legibility ─────────────────────────── */
.dark input,
.dark textarea {
  color: #f0f0f0 !important;
  background-color: #2c2c2c !important;
  border-color: #555 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #777 !important;
}

/* Read-only computed fields */
.dark input[readonly] {
  background-color: #1a1a1a !important;
  color: #ccc !important;
}

/* Keep green tint on Floor Total / Roam */
.dark #f-floor,
.dark #f-roam {
  background-color: #1a3d1a !important;
  color: #90ee90 !important;
}

/* Labels and section text */
.dark .cc-card label,
.dark .cc-card td,
.dark .cc-card th {
  color: #ccc !important;
}

.dark .history-list-row {
  color: #ccc !important;
}

.dark .hv-svc-tot {
  background: #b8bb00 !important;
  color: #111 !important;
  border-color: #999900 !important;
}

/* ── History card view span fields ──────────────────────────── */
.hv-val {
  display: inline-block;
  min-height: 1.4em;
}
span.fi {
  display: block;
  min-height: 24px;
  line-height: 1.6;
}
.hv-svc-tot {
  border: 1px solid #aaa;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  width: 60px;
  background: #fff;
}
.history-card-panel {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
}

/* ── Auth / Login ────────────────────────────────────────────── */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: #e8e8e8;
}
.auth-card {
  background: #fff;
  border: 2px solid #222;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  overflow: hidden;
}
.auth-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.auth-field label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #333;
}
.auth-submit {
  margin-top: 0.5rem;
  padding: 0.4rem;
  width: 100%;
  justify-content: center;
  font-size: var(--text-sm);
}
.auth-error {
  background: #fde8e8;
  color: #c0392b;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 8px 14px;
  border-bottom: 1px solid #f5c6c6;
}

.svc-tot-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.svc-tot-breakdown {
  font-size: 10px;
  color: #888;
  font-style: italic;
  white-space: nowrap;
}
.dark .svc-tot-breakdown {
  color: #aaa;
}

.kids-table td.hv-val {
  display: table-cell;
  text-align: center;
  white-space: nowrap;
}

.svc-tot-row input.autofill {
  background: #e8f4e8 !important;
  border-color: #8aba8a !important;
}

.fd-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.fd-grid-2 { grid-template-columns: 1fr 1fr; }

@media(max-width: 600px) {
  .fd-grid-3,
  .fd-grid-2 {
    grid-template-columns: 1fr !important;
  }
   /* Make each field row stack label on top of input */
  #tab-floor-detail .frow {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  #tab-floor-detail .frow label,
  #tab-floor-detail .frow .frow-label {
    min-width: unset;
    font-weight: 700;
  }

  #tab-floor-detail .frow .fi {
    width: 100%;
  }

  /* Remove side borders between columns when stacked */
  #tab-floor-detail .col-left {
    border-right: none !important;
    border-bottom: 1px solid #ddd;
  }
}

/* ── Override Button ─────────────────────────────────────────── */
.override-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms, border-color 120ms;
  -webkit-tap-highlight-color: transparent;
}

.override-btn.override-active {
  background: #fffbe6;
  border-color: #999;
}

.override-btn:active {
  background: #e8e8e8;
}

.cc-card.dark .override-btn {
  background: #2a2a2a;
  border-color: #444;
  color: #ccc;
}

.cc-card.dark .override-btn.override-active {
  background: #2a2600;
  border-color: #667;
}

@media (max-width: 600px) {
  .override-btn {
    position: relative;
  }

  .override-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }
}

/* ── Previous Totals – fully non-interactive ─────────────────── */
#ps-tbody input {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  color: #888;
  background: transparent;
}

#ps-tbody input:focus {
  background: transparent !important;
  outline: none;
}

.cc-card.dark #ps-tbody input {
  color: #667;
  background: transparent;
}

/* ── Conf Toggle Bar ─────────────────────────────────────────── */
.conf-toggle-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #111;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.conf-toggle-label input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: #222;
}

@media print {
  .no-print { display: none !important; }
}

/* ── Report Menu ─────────────────────────────────────────────── */
.rpt-menu {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid #222;
  flex-wrap: wrap;
}

.rpt-menu-btn {
  padding: 0.3rem 0.85rem;
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid #ccc;
  border-radius: var(--radius-md);
  background: #f0f0f0;
  color: #555;
  cursor: pointer;
  transition: background 120ms;
}

.rpt-menu-btn.active {
  background: #fdff32;
  border-color: #bbb;
  color: #111;
}

.rpt-menu-btn:not(.active):hover {
  background: #e0e0e0;
}

.rpt-panel {
  display: none;
}

.rpt-panel.active {
  display: block;
}

.cc-card.dark .rpt-menu {
  border-color: #2b2b2b;
}

.cc-card.dark .rpt-menu-btn {
  background: #1e1e1e;
  border-color: #333;
  color: #aaa;
}

.cc-card.dark .rpt-menu-btn.active {
  background: #b8bb00;
  color: #111;
}

.rpt-diff {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  min-width: 80px;
  text-align: center;
}
.rpt-diff.up   { color: #1565c0; }
.rpt-diff.down { color: #c0392b; }
.rpt-diff.even { color: #888; }

/* ── Range Total Report ──────────────────────────────────────── */
.rpt-range-total {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1565c0;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}
.rpt-range-meta {
  font-size: var(--text-xs);
  color: #888;
}
.cc-card.dark .rpt-range-total {
  color: #5591c7;
}
.cc-card.dark .rpt-range-meta {
  color: #777;
}