/* FactoryOne-inspired Table2Tally visual system.
   Presentation-only overrides: no API, workflow, or domain behavior changes. */
:root{
  --accent:#16756f!important;
  --accent-dark:#0d5b56!important;
  --accent-soft:#dcefed!important;
  --surface:#fff!important;
  --panel:#f5f7f8!important;
  --canvas:#e9edef!important;
  --text:#20252a!important;
  --muted:#66707a!important;
  --line:#d4d9de!important;
  --danger:#a63737!important;
  --good:#176b45!important;
  --warn:#8a5910!important;
  --blue:#16756f!important;
  --blue2:#16756f!important;
  --ink:#20252a!important;
  --bg:#e9edef!important;
  --green:#176b45!important;
  --amber:#8a5910!important;
  --red:#a63737!important;
}
html,body{font-family:"Segoe UI",Inter,system-ui,sans-serif!important;color:var(--text)!important;background:var(--canvas)!important}
button,input,select,textarea{font:inherit}
button{border-radius:4px!important;box-shadow:none!important}
input,select,textarea{border-radius:4px!important}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Login */
.login-shell{background:var(--canvas)!important}
.login-card{border:1px solid var(--line)!important;border-radius:6px!important;box-shadow:0 14px 38px rgba(20,30,35,.13)!important}
.logo,.brandmark,.side-brand .mark{background:var(--accent)!important;border-radius:4px!important}
.login-card button{background:var(--accent)!important;border-radius:4px!important}
.login-card button:hover{background:var(--accent-dark)!important}

/* Admin shell */
#app.app{background:var(--surface)}
#app .sidebar{background:var(--panel)!important;color:var(--text)!important;border-right:1px solid var(--line)!important}
#app .side-brand{height:54px!important;padding:0 13px!important;border-bottom:1px solid var(--line)!important}
#app .side-brand .mark{width:28px!important;height:28px!important;color:#fff!important;font-size:10px!important}
#app .side-brand strong{font-size:14px!important}
#app .side-brand small{color:var(--muted)!important;opacity:1!important;font-size:10px!important}
#app .sidebar nav{padding:8px 7px!important}
#app .sidebar nav button{min-height:35px!important;margin:1px 0!important;padding:5px 9px!important;color:var(--text)!important;background:transparent!important;border-radius:4px!important}
#app .sidebar nav button:hover{background:#e6eaed!important}
#app .sidebar nav button.active{color:#0b514d!important;background:var(--accent-soft)!important;box-shadow:inset 3px 0 var(--accent)!important}
#app .side-foot{padding:9px!important;color:var(--muted)!important;opacity:1!important;border-top:1px solid var(--line)!important}
#app .topbar{height:54px!important;padding:0 12px!important;background:var(--panel)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
#app .topbar h1{font-size:16px!important}
#app .topbar small{font-size:10px!important}
#app .top-actions{gap:7px!important}
#app .top-actions button,#app .pos-link{height:30px!important;padding:5px 9px!important;border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--text)!important;border-radius:4px!important}
#app .pos-link{color:var(--accent-dark)!important;font-weight:600!important}
#app main{background:var(--surface)!important;padding:16px 18px 20px!important}
#app .page-head{margin-bottom:14px!important}
#app .page-head h2{font-size:21px!important;font-weight:600!important}
#app .primary,#app .link-button{min-height:32px!important;padding:5px 11px!important;background:var(--accent)!important;border:1px solid var(--accent)!important;border-radius:4px!important}
#app .primary:hover,#app .link-button:hover{background:var(--accent-dark)!important}
#app .metrics{gap:10px!important}
#app .metrics article{padding:13px!important;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:5px!important;box-shadow:none!important}
#app .metrics article:nth-child(n){background:var(--surface)!important}
#app .metrics strong{font-size:22px!important}
#app .dashboard-grid{gap:10px!important}
#app .card{border:1px solid var(--line)!important;border-radius:5px!important;box-shadow:none!important;padding:14px!important}
#app .toolbar input,#app .toolbar select{height:33px!important;padding:0 8px!important;border-radius:4px!important}
#app .table-card{border-radius:5px!important}
#app .table-card th{height:33px!important;padding:0 10px!important;background:var(--panel)!important;color:var(--muted)!important;font-size:11px!important}
#app .table-card td{height:42px!important;padding:5px 10px!important}
#app .table-card tbody tr:hover{background:#e7f2f1!important}
#app .badge,#app .status{border-radius:10px!important}
#app .table-tile,#app .user-card,#app .system-card,#app .diagnostic-card,#app .kitchen-col,#app .kot-card,#app .setting-row{border-radius:4px!important;box-shadow:none!important}
#app .table-tile{background:var(--surface)!important}
#app .table-tile.free{background:#f2faf7!important}
#app .table-tile.occupied{background:#fff5f4!important}
#app .table-tile.bill{background:#fff9ef!important}
#app .empty-state,#app .about-card{border-radius:6px!important;box-shadow:none!important}

/* Desktop/POS shell */
body>.app{background:var(--surface)!important}
body>.app>.topbar{height:48px!important;padding:0 10px 0 13px!important;background:var(--panel)!important;color:var(--text)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;gap:14px!important}
body>.app>.topbar .brand{min-width:190px!important;gap:9px!important}
body>.app>.topbar .brandmark{width:26px!important;height:26px!important;color:#fff!important;font-size:14px!important}
body>.app>.topbar .brand strong{font-size:15px!important}
body>.app>.topbar .brand small{color:var(--muted)!important;opacity:1!important;font-size:10px!important}
body>.app>.topbar nav{height:100%!important;gap:1px!important}
body>.app>.topbar nav button{padding:0 10px!important;color:var(--text)!important;background:transparent!important;border:0!important;border-radius:0!important}
body>.app>.topbar nav button:hover{background:#e6eaed!important}
body>.app>.topbar nav button.active{color:var(--accent-dark)!important;background:var(--accent-soft)!important;border-bottom:2px solid var(--accent)!important}
body>.app>.topbar .userbox button{height:30px!important;padding:5px 9px!important;background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:4px!important}
.dashboard-view,.order-entry-view,.kitchen-view,.users-view,.reports-view,.settings-view{background:var(--surface)!important}
.dashboard-header,.order-page-head,.kitchen-head,.users-head,.settings-head,.reports-head{background:var(--surface)!important;border-bottom:1px solid var(--line)!important}
.dashboard-header h1,.order-page-head h1,.kitchen-head h2,.users-head h2,.settings-head h2,.reports-head h2{font-weight:600!important}
.table-toolbar{background:var(--panel)!important;border-bottom:1px solid var(--line)!important}
.filters button,.categories button{border-radius:4px!important}
.filters button.active,.categories button.active{background:var(--accent-soft)!important;color:var(--accent-dark)!important;border-color:var(--accent)!important}
.table,.menu-card,.panel,.settings-card,.report-card,.kcol,.kot,.user-card{border:1px solid var(--line)!important;border-radius:5px!important;box-shadow:none!important}
.table:hover,.menu-card:hover{background:#e7f2f1!important}
.table.selected{border-color:var(--accent)!important;box-shadow:inset 3px 0 var(--accent)!important}
.menu-card.veg{background:#f2faf7!important;border-color:#c8dfd8!important}
.order-workspace{gap:10px!important}
.panel{background:var(--surface)!important}
.order-grid-head,.payment-grid-head,.tx-head{background:var(--panel)!important}
.cart-row:hover,.tx-row:hover{background:#e7f2f1!important}
.summary .grand{background:var(--accent-soft)!important;border-radius:4px!important}
.summary .grand strong{color:var(--accent-dark)!important}
.primary{background:var(--accent)!important}
.primary:hover{background:var(--accent-dark)!important}
.secondary{background:var(--surface)!important;color:var(--accent-dark)!important;border:1px solid var(--line)!important}
.warning{background:#9a6915!important}
.statusbar{background:var(--panel)!important;border-top:1px solid var(--line)!important}

/* Responsive consistency */
@media(max-width:1100px){
  #app.app{grid-template-columns:58px minmax(0,1fr)!important}
  #app .sidebar nav button{justify-content:center!important}
}