/* ===== Phase 6 POS cleanup: darker text, white button text, stronger DBS orange ===== */
:root{--bg:#f6efe4;--panel:#fff;--ink:#081b33;--muted:#40516c;--line:#e2c9aa;--nav:#1f2633;--accent:#f28c1b;--accent-dark:#d97706;--accent-soft:#fff0dc;--danger:#c9342c;--success:#0d7f56;}
body,.app-body{color:var(--ink)!important;background:var(--bg)!important;font-weight:500} h1,h2,h3,strong,label span,.panel-head a,.list-row strong{color:#06182d!important;font-weight:800!important}.muted,.list-row span,.topbar p,.note-box{color:#40516c!important}.sidebar{background:linear-gradient(180deg,#1d2633 0%,#2b3545 100%)!important}.brand-box strong,.brand-box p,.nav-link,.sidebar-footer,.sidebar-footer p,.sidebar-footer strong{color:#fff!important}.nav-link{font-weight:700!important}.nav-link.active,.nav-link:hover{background:var(--accent)!important;color:#fff!important}.button,button,input[type=submit],input[type=button],a.button,.menu-toggle{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;font-weight:800!important;text-shadow:none!important;box-shadow:none!important}.button *,.button:before,.button:after,button *,a.button *{color:#fff!important;fill:#fff!important;stroke:currentColor!important}.button:hover,button:hover,a.button:hover,.button:focus,button:focus{background:var(--accent-dark)!important;border-color:var(--accent-dark)!important;color:#fff!important}.button.danger,.danger button{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.button.big{font-size:18px;padding:16px 22px;border-radius:14px}.sidebar-footer .button.ghost{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}.card,.panel,.stat-card,.card-lite{border-color:var(--line)!important}.chip.brand{background:var(--accent-soft)!important;color:var(--accent-dark)!important;font-weight:800}.status.pending,.status.deposit,.status.inactive{background:var(--accent-soft)!important;color:#9a5600!important;font-weight:800}.status.active,.status.ready,.status.paid{background:#e8f6ef!important;color:#0d6c47!important;font-weight:800}.status.unpaid{background:#fde8e6!important;color:#b3261e!important;font-weight:800}.brand-logo,.login-logo{background:rgba(255,255,255,.08)!important;border-radius:14px;padding:6px;object-fit:contain}.app-footer{color:#40516c!important;font-weight:700}.timeclock-hero{display:flex;gap:16px;align-items:center;justify-content:space-between;background:#fffaf2!important}.timeclock-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.sales-filter-shell{margin-bottom:18px}.sales-toolbar-grid{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}.sales-date-field{width:160px}.sales-tab-block{display:flex;flex-direction:column;gap:8px;min-width:280px;flex:1}.sales-tab-label{font-size:13px;font-weight:800;color:var(--muted)}.report-tabs,.category-tabs{display:flex;flex-wrap:wrap;gap:8px}.tab-chip{border:1px solid var(--line)!important;background:#fff!important;color:#06182d!important;border-radius:999px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;text-decoration:none}.tab-chip.active,.tab-chip:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}.quick-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.quick-item{border:1px solid var(--line);background:#fffaf3;color:#081b33!important;border-radius:12px;padding:12px;font-weight:800;cursor:pointer}.quick-item:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}.quick-item span{display:block;font-size:12px;color:inherit!important}.product-button-grid{margin-top:10px}.permission-table td,.permission-table th{text-align:center}.permission-table td:first-child,.permission-table th:first-child{text-align:left}.form-actions{display:flex;gap:10px;flex-wrap:wrap}.row-actions{gap:8px}.list-row{position:relative}.fill-link{position:absolute;inset:0;z-index:0}.row-actions,.list-row>div{position:relative;z-index:1}@media(max-width:1024px){.timeclock-hero{align-items:stretch;flex-direction:column}.timeclock-buttons{justify-content:flex-start}.sales-date-field,.sales-tab-block{width:100%;min-width:0}.app-shell.sidebar-open .sidebar{transform:translateX(0)}}

/* ===== Phase 6.1 hotfix: uniform typography, category page, order/product buttons ===== */
html, body, input, select, textarea, button, .button, .nav-link, .list-row, .card, .panel { font-size: 16px; }
body, input, select, textarea { color: #07182d !important; font-weight: 600 !important; }
h1 { font-size: 34px !important; line-height: 1.12 !important; }
h2 { font-size: 26px !important; line-height: 1.2 !important; }
h3 { font-size: 21px !important; line-height: 1.25 !important; }
.topbar p, .page-subtitle, .list-row span, .note-box, label span { color: #314866 !important; font-weight: 700 !important; }
.button, button, a.button, input[type=submit], input[type=button] { color: #fff !important; font-weight: 900 !important; }
.button *, button *, a.button * { color: #fff !important; }
.login-note { display: none !important; }
.login-card h1 { font-size: 32px !important; }
.login-card .button { width: 100%; }

.category-tabs, .report-tabs, .products-tab-list { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; margin: 8px 0 12px !important; }
.tab-chip { min-height: 44px !important; padding: 11px 18px !important; border-radius: 999px !important; font-size: 16px !important; font-weight: 900 !important; white-space: nowrap !important; }
.tab-chip.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

.quick-pick-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important; gap: 10px !important; align-items: stretch !important; }
.quick-item { min-height: 62px !important; padding: 12px 14px !important; border-radius: 12px !important; font-size: 16px !important; line-height: 1.2 !important; font-weight: 900 !important; background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.quick-item span { color: #fff !important; font-size: 13px !important; font-weight: 900 !important; }
.nested-panel { overflow: visible !important; }
.line-item-grid { display: grid !important; grid-template-columns: minmax(120px,1fr) minmax(120px,1fr) minmax(90px,.5fr) minmax(140px,1fr) !important; gap: 10px !important; align-items: center !important; }
.product-item-grid { grid-template-columns: minmax(220px,1fr) 100px auto !important; }
.row-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; justify-content: flex-end !important; }

.sales-filter-shell h1, .sales-filter-shell h2, .sales-filter-shell h3 { font-size: inherit !important; }
.sales-toolbar-grid { align-items: end !important; }
.sales-date-field { width: 170px !important; }
.sales-tab-block { min-width: 260px !important; }
.stat-card strong { font-size: 30px !important; }

@media (max-width: 1100px) {
  .line-item-grid, .product-item-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 700px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  .line-item-grid, .product-item-grid { grid-template-columns: 1fr !important; }
}


/* Phase 6.2 login clock modal */
.login-clock-open { width: 100%; margin-top: 10px; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 18, 30, .58);
}
.modal-backdrop[hidden] { display: none !important; }
.modal-card {
  width: min(460px, 96vw);
  background: #fffaf3;
  border: 1px solid #e6b679;
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  padding: 22px;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.modal-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  color: #071b37;
  font-weight: 900;
}
.modal-head p {
  margin: 6px 0 0;
  color: #263a59;
  font-weight: 700;
}
.modal-close {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #e6b679;
  background: #f58215;
  color: #fff !important;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
}
.clock-modal-form label span {
  color: #071b37;
  font-weight: 900;
}
.clock-modal-form select,
.clock-modal-form input {
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
}
.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal-actions .button {
  min-height: 48px;
}
@media (max-width: 520px) {
  .modal-actions { grid-template-columns: 1fr; }
}