/* v8 look: warm-dark theme + small animations. SCREEN ONLY.
   - File is linked with media="screen" and wrapped in @media screen, so printing never sees it.
   - Every rule is scoped to #app / #modal / #toast. Bills, PDF/PNG export and WhatsApp bill images
     are drawn from #billExport / #printArea (outside #app) and are not touched. */
@media screen{
#app,#modal{--ink:#2B211A;--mut:#6B5B4E;--bd:#E6D9C8}
#app{background:#FAF5EE;min-height:100vh}
#app .topbar{background:#3B2A20;color:#FFF7EC;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#app .topbar b{font-family:Georgia,'Times New Roman',serif;letter-spacing:.3px}
#app .tabs{background:#FFFDFA;border-bottom-color:#E6D9C8}
#app .tabs button{background:#FAF5EE;color:#2B211A}
#app .tabs button.on{background:#BF4400;color:#ffffff}
#app .subtabs button{background:#FFFDFA;color:#2B211A;border-color:#D8C8B0}
#app .subtabs button.on{background:#BF4400;border-color:#BF4400;color:#ffffff}
#app .panel,#app .login,#modal .modal-c{background:#FFFDFA;border-color:#E6D9C8}
#app .login{box-shadow:0 8px 24px rgba(59,42,32,.18)}
#app .scroll{background:#FFFDFA;border-color:#E6D9C8}
#app .form-control,#modal .form-control,#app .form-select{background-color:#FFFDFA;border-color:#D8C8B0;color:#2B211A}
#app .form-control:focus,#modal .form-control:focus{border-color:#C9962E;box-shadow:0 0 0 .2rem rgba(201,150,46,.35)}
#app .dropdown-menu{background:#FFFDFA;border-color:#E6D9C8;box-shadow:0 8px 20px rgba(59,42,32,.2)}
#app .dropdown-item{color:#2B211A}#app .dropdown-item:hover{background:#FAF5EE}
#app .chip{background:#F0E4D2}#app .chip-warn{background:#FFF1CC;color:#7A5200}
#app .bl-h{background:#FAF5EE}#app .brow{border-bottom-color:#F0E4D2}
/* sheets */
#app table.stmt th,#app table.chk th{background:#3B2A20;color:#ffffff;border-color:#5a4434}
#app table.stmt td,#app table.chk td{border-color:#E6D9C8}
#app .calc{background:#FBF3E6}#app .stk1{background:#FFFDFA}
#app .grand td{background:#F0E4D2}
#app table.ledger{background:#FFFDFA}
#app .ledger th,#app .ledger td{border-color:#CDBBA2}
#app .ledger th,#app .ledger .bf td,#app .ledger .tot td,#app .ledger .close td{background:#F0E4D2}
#app .bill-prev{background:#F0E4D2}
/* main action buttons: terracotta */
#app .btn-danger,#modal .btn-danger{--bs-btn-color:#ffffff;--bs-btn-bg:#BF4400;--bs-btn-border-color:#BF4400;--bs-btn-hover-color:#ffffff;--bs-btn-hover-bg:#A33A00;--bs-btn-hover-border-color:#A33A00;--bs-btn-active-color:#ffffff;--bs-btn-active-bg:#8C3000;--bs-btn-active-border-color:#8C3000;--bs-btn-disabled-color:#ffffff;--bs-btn-disabled-bg:#BF4400;--bs-btn-disabled-border-color:#BF4400;--bs-btn-focus-shadow-rgb:191,68,0}
#app .btn-outline-danger:not([data-act=layDel]):not([data-act=delDelivery]):not([data-act=delRow]):not([data-act=phDel]):not([data-act=migrateExp]),#modal .btn-outline-danger:not([data-act=phDel]){--bs-btn-color:#BF4400;--bs-btn-border-color:#BF4400;--bs-btn-hover-color:#ffffff;--bs-btn-hover-bg:#BF4400;--bs-btn-hover-border-color:#BF4400;--bs-btn-active-color:#ffffff;--bs-btn-active-bg:#A33A00;--bs-btn-active-border-color:#A33A00;--bs-btn-focus-shadow-rgb:191,68,0}
/* secondary buttons: espresso outline; WhatsApp/share green */
#app .btn-outline-secondary,#app .btn-outline-primary,#modal .btn-outline-secondary,#modal .btn-outline-primary{--bs-btn-color:#3B2A20;--bs-btn-border-color:#C9B8A0;--bs-btn-hover-color:#ffffff;--bs-btn-hover-bg:#3B2A20;--bs-btn-hover-border-color:#3B2A20;--bs-btn-active-color:#ffffff;--bs-btn-active-bg:#2B1E16;--bs-btn-active-border-color:#2B1E16;--bs-btn-focus-shadow-rgb:59,42,32}
#app .btn-success,#modal .btn-success{--bs-btn-bg:#2E7D32;--bs-btn-border-color:#2E7D32;--bs-btn-hover-bg:#256628;--bs-btn-hover-border-color:#256628;--bs-btn-active-bg:#1F5622;--bs-btn-active-border-color:#1F5622;--bs-btn-disabled-bg:#2E7D32;--bs-btn-disabled-border-color:#2E7D32}
/* small animations */
@keyframes mmFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mmPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mmBg{from{opacity:0}to{opacity:1}}
@keyframes mmDrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#view.mm-fade>*{animation:mmFade .34s cubic-bezier(.2,.7,.2,1) backwards}
#app .btn,#modal .btn,#app .tabs button,#app .subtabs button{transition:transform .12s ease,color .15s,background-color .15s,border-color .15s,box-shadow .15s}
#app .btn:active,#modal .btn:active,#app .tabs button:active,#app .subtabs button:active{transform:scale(.97)}
#modal .modal-bg{animation:mmBg .18s ease-out}
#modal .modal-c{animation:mmPop .22s ease-out}
#app .dropdown-menu.show{animation:mmDrop .15s ease-out}
#toast{animation:mmPop .2s ease-out;box-shadow:0 6px 18px rgba(0,0,0,.25)}
@keyframes mmOpa{from{opacity:0}to{opacity:1}}
/* layout: desktop = left sidebar, phone = bottom bar (same buttons, same order) */
#app h5,#modal h5{font-family:Georgia,'Times New Roman',serif;font-weight:700}
#app .panel{border-radius:14px;box-shadow:0 1px 3px rgba(59,42,32,.10)}
#app .chips .chip{background:#FFFDFA;border:1px solid #E6D9C8;border-radius:12px;padding:8px 16px;font-size:.82rem;color:#6B5B4E;text-transform:uppercase;letter-spacing:.04em}
#app .chips .chip b{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;font-weight:800;font-variant-numeric:lining-nums tabular-nums;font-size:1.25rem;color:#2B211A;text-transform:none;letter-spacing:0;margin-left:4px}
#app .chips .chip-warn,#app .chips .chip-info{text-transform:none;letter-spacing:0;font-size:.85rem}
@media (min-width:768px){
#app .tabs{position:fixed;top:50px;left:0;bottom:0;width:208px;flex-direction:column;gap:6px;padding:16px 12px;background:#3B2A20;border:0;overflow-y:auto;z-index:40}
#app .tabs button{background:transparent;color:#F3E7D6;justify-content:flex-start;font-size:1rem;padding:12px 14px}
#app .tabs button:hover{background:rgba(255,255,255,.08)}
#app .tabs button.on{background:#BF4400;color:#ffffff}
#app main{margin-left:208px;padding:18px 24px}
}
@media (max-width:767px){
#app .tabs{position:fixed;top:auto;bottom:0;left:0;right:0;background:#FFFDFA;border-top:1px solid #E6D9C8;border-bottom:0;padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px));z-index:60;box-shadow:0 -4px 14px rgba(59,42,32,.12)}
#app .tabs button{background:transparent;color:#6B5B4E}
#app .tabs button.on{background:#FBE3D3;color:#8A3300}
#app main{padding-bottom:92px}
#app table.stmt tr{background:#FFFDFA;border-color:#E6D9C8}
#toast{bottom:90px!important}
}
@media (prefers-reduced-motion:reduce){
#view.mm-fade>*{animation:mmOpa .3s ease-out backwards}
#modal .modal-c,#app .dropdown-menu.show,#toast{animation:mmOpa .2s ease-out}
#app .btn:active,#modal .btn:active,#app .tabs button:active,#app .subtabs button:active{transform:none}
}

/* ===== v10 ===== */
/* Windows: Bills = customer list on the left, preview on the right (preview shrunk on screen only) */
@media (min-width:1000px){
#app #view:has(>.bill-prev):not(:has(input[name=billPick])){display:grid;grid-template-columns:minmax(360px,44%) 1fr;gap:12px;align-items:start}
#app #view:has(>.bill-prev):not(:has(input[name=billPick])) #billList{max-height:56vh!important}
#app #view:has(>.bill-prev):not(:has(input[name=billPick])) .bill-prev{position:sticky;top:12px;max-height:calc(100vh - 90px)}
#app #view:has(>.bill-prev):not(:has(input[name=billPick])) .bill-prev>div{zoom:.48!important}
}
@media (min-width:1100px){#app #view:has(>.bill-prev):not(:has(input[name=billPick])) .bill-prev>div{zoom:.55!important}}
@media (min-width:1280px){#app #view:has(>.bill-prev):not(:has(input[name=billPick])) .bill-prev>div{zoom:.66!important}}
@media (min-width:1366px){#app #view:has(>.bill-prev):not(:has(input[name=billPick])) .bill-prev>div{zoom:.72!important}}
@media (min-width:1536px){#app #view:has(>.bill-prev):not(:has(input[name=billPick])) .bill-prev>div{zoom:.84!important}}
@media (min-width:1800px){#app #view:has(>.bill-prev):not(:has(input[name=billPick])) .bill-prev>div{zoom:.95!important}}
/* Chicken / Expenses sheets: short headings on screen only (set by theme.js) */
#app #chkTable th{font-size:.78rem;letter-spacing:0;font-weight:800}
#app #chkTable th.mm-s{font-size:0}
#app #chkTable th.mm-s::after{content:attr(data-s);font-size:.78rem;font-weight:800;letter-spacing:0}
body.editmode #app #chkTable th.mm-s{font-size:.78rem}
body.editmode #app #chkTable th.mm-s::after{display:none}
/* Android: Statement as cards (same fields, all still editable) */
@media (max-width:767px){
#app table.stmt tr{display:grid;grid-template-columns:repeat(12,1fr);gap:4px 8px;padding:12px 14px;background:#FFFDFA;border:1px solid #EADFCB;border-radius:14px;box-shadow:0 1px 3px rgba(59,42,32,.10);margin:10px 0}
#app table.stmt td{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;border:0;padding:0;grid-column:span 4;order:10;font-variant-numeric:lining-nums tabular-nums}
#app table.stmt td::before{flex:none;padding:0;margin-bottom:2px;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#6B5B4E}
#app table.stmt td[data-label="Customer"]{grid-column:1/9;grid-row:1;order:0}
#app table.stmt td[data-label="Balance"]{grid-column:9/13;grid-row:1;order:0;align-items:flex-end;justify-content:center}
#app table.stmt td[data-label="Customer"]::before,#app table.stmt td[data-label="Balance"]::before{display:none}
#app table.stmt td[data-label="Weight (kg)"]{order:1}
#app table.stmt td[data-label="Rate"]{order:2}
#app table.stmt td[data-label="Amount"]{order:3}
#app table.stmt td[data-label="Prev. Balance"]{order:4;grid-column:span 3}
#app table.stmt td[data-label="Cash"]{order:5;grid-column:span 3}
#app table.stmt td[data-label="Online"]{order:6;grid-column:span 3}
#app table.stmt td[data-label="Discount"]{order:7;grid-column:span 3}
#app table.stmt td[data-label="Rate +/-"]{order:8}
#app table.stmt td[data-label="Notes"]{order:9;grid-column:span 8}
#app table.stmt td.c-idx{display:none}
#app table.stmt td[data-label="Prev. Balance"]::before{content:"Prev. Bal"}
#app table.stmt td{align-self:end}
#app table.stmt td.calc{align-items:flex-start;text-align:left}
#app .scroll:has(table.stmt){border:0;background:transparent}
#app table.stmt td.c-del{grid-column:1/-1;order:99;align-items:flex-end}
#app table.stmt td.c-del::before{display:none}
#app table.stmt .cell{width:100%;text-align:left;font-size:1rem;font-weight:700;color:#2B211A;background:#FFFDFA;border:1px solid #EADFCB;border-radius:8px;min-height:38px;padding:0 8px}
#app table.stmt td[data-label="Customer"] .cell{font-family:Georgia,'Times New Roman',serif;font-size:1.15rem;font-weight:800;background:transparent;border:0;padding:0;min-height:34px}
#app table.stmt td[data-label="Balance"]{font-size:1.2rem;font-weight:800;color:#B71C1C;text-align:right}
#app table.stmt td.calc{background:transparent;font-size:1rem;font-weight:700;padding:6px 0 4px}
#app table.stmt td.calc[data-label="Balance"]{font-size:1.2rem;padding:0;align-items:flex-end;text-align:right}
/* Android: Chicken / Expenses stay tables, but scroll inside their own box with Date + Name pinned */
#app main{overflow-x:hidden}
#app .chkwrap{overflow:auto;max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
#app .chkwrap::before{content:"\2194  Swipe sideways for more columns";display:block;position:sticky;left:0;padding:6px 10px;font-size:.75rem;font-weight:600;color:#6B5B4E;background:#FFFDFA}
#app #chkTable th:nth-child(1){left:0;z-index:6}
#app #chkTable th:nth-child(2),#app #chkTable td:nth-child(2){position:sticky;left:var(--mm-dw,96px);z-index:2;background:#FFFDFA;box-shadow:2px 0 4px -2px rgba(59,42,32,.35)}
#app #chkTable th:nth-child(2){z-index:5;background:#F0E4D2}
#app #chkTable.chk-exp th:nth-child(2),#app #chkTable.chk-exp td:nth-child(2){position:static;box-shadow:none}
#app #chkTable .stk1{font-size:.8rem}
}
/* v11: Ledger on screen scrolls sideways inside its own box (phone) */
#app #lgOut{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#app #lgOut table.ledger{min-width:max-content}
/* v13: typed numbers in Cash/Online (Statement) and C.PAYMENT/TFR (Chicken) show in red on screen only (never printed) */
#app table.stmt input.cell[data-f="cash"],#app table.stmt input.cell[data-f="online"],#app table.chk input.cell[data-f="cpay"],#app table.chk input.cell[data-f="tfr"]{color:#B71C1C}
}