/* os-26 · Button system + ease pass (KarobarOS finishing package)
   Loaded LAST: one consistent button language across the whole app.
   Palette stays orange / white / black (+ grays); red only for danger. */

/* ── os-30: khaali list ki rehnumai (parcels empty states) ────────── */
.kos-empty{padding:34px 22px;text-align:center}
.kos-empty h3{font-size:16px;margin:0 0 8px}
.kos-empty p{max-width:520px;margin:6px auto}
.kos-empty .inline-actions{justify-content:center;margin-top:14px}

/* ── Touch targets: 44px mobile / 40px desktop ────────────────────── */
#app button,#modal button,main>header button,.heading button{min-height:40px}
@media(pointer:coarse){
  #app button,#modal button,main>header button,.heading button{min-height:44px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px}
}
#app button.link,#modal button.link{min-height:0;padding:9px 5px}
#app .line-top button,#modal .line-top button{min-height:0}
#modal .attached button{min-height:34px}
#modal .modal-dismiss,#modal .page-close{min-height:40px}

/* ── The three button kinds, everywhere the same ──────────────────── */
button.primary,.btn.primary{
  background:var(--orange,#ed612d);border-color:var(--orange,#ed612d);color:#fff;
  font-weight:700;box-shadow:0 4px 14px #ed612d2b;
}
button.primary:hover,.btn.primary:hover{filter:brightness(1.05)}
button:not(.primary):not(.red):not(.green):not(.link),.btn:not(.primary):not(.red):not(.green):not(.link){
  font-weight:600;
}
@media(hover:hover){
  button:not(:disabled):hover,.btn:not(:disabled):hover{border-color:#c3c9c2}
  button.primary:hover,.btn.primary:hover{border-color:var(--orange,#ed612d)}
}
button.red,.btn.red{background:#c62828;border-color:#c62828;color:#fff;font-weight:700}
button.link,.btn.link{color:#d64e1c;font-weight:650;text-decoration:none}
button.link:hover,.btn.link:hover{text-decoration:underline;text-underline-offset:3px}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* ── Focus: always visible, always orange ─────────────────────────── */
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2.5px solid #f4511e;outline-offset:2px;border-radius:6px}
input:focus,select:focus,textarea:focus{border-color:#f4511e!important;outline:none;box-shadow:0 0 0 3px #f4511e24}

/* ── Empty states: calm, centred, with room to breathe ────────────── */
td.empty{padding:40px 22px!important;font-size:13.5px;line-height:1.7;white-space:normal}
td.empty::before{display:block;content:'▱';font-size:27px;color:#cfd4cd;margin-bottom:9px}

/* ── Explainer note (Backup / Recycle Bin) ────────────────────────── */
.kos-note{display:flex;gap:13px;background:#fff7f2;border:1px solid #f6d9c8;border-radius:12px;padding:16px 18px;margin:0 0 18px;font-size:13.5px;line-height:1.65}
.kos-note b{color:#b23c17}
.kos-note .kos-note-ico{font-size:20px;line-height:1.3}
.kos-note p{margin:0;color:#5b463c}

/* ── Settings · About card ────────────────────────────────────────── */
.kos-about{display:flex;gap:18px;align-items:flex-start;margin-top:20px;max-width:680px}
.kos-about img{width:56px;height:56px;border-radius:22%;flex:none}
.kos-about h3{margin:2px 0 4px;font-size:17px}
.kos-about p{margin:2px 0}
.kos-about .kos-version{font-size:13px}
.kos-about small{color:var(--muted);line-height:1.6;display:block;margin-top:6px}

/* ── Business chooser rows: full-width, easy to tap ───────────────── */
button.business-choice{width:100%;text-align:left;cursor:pointer;background:transparent;border:0;border-bottom:1px solid var(--line);padding:15px 4px}
button.business-choice:hover{background:#fff7f2}

/* ── Invoice modal: professional type hierarchy ───────────────────── */
.invoice-head{border-bottom:2.5px solid var(--ink);padding-bottom:16px}
.invoice-head h2{font-size:25px;letter-spacing:-.4px}
.invoice-contact{color:var(--muted);font-size:12.5px;line-height:1.65;margin-top:3px}
#modalbody .totals{border:1px solid var(--line);background:#fafbF8}
#modalbody .totals .detail{padding:10px 0}
#modalbody .totals .detail:last-child{font-size:16.5px;border-top:2px solid var(--ink);margin-top:6px;padding-top:13px}
#modalbody .totals .detail:last-child strong{font-size:19px}
.invoice-thanks{margin:20px 0 6px;font-size:14px;color:var(--ink)}
.invoice-thanks small{display:block;color:var(--muted);margin-top:3px;font-size:12px}

/* ── Overflow guard: name + button rows never clip at the card edge ──
   (Cloud panel ke business rows, Backup cards, ledger details — lamba
   business naam button ko card se bahar nahi dhakel sakta; button
   agli line par aa jayega, katega nahi.) */
.detail{flex-wrap:wrap;gap:6px 14px}
.detail>*{min-width:0}
.detail b,.detail strong{overflow-wrap:anywhere}
.detail button,.detail .btn{flex:none;margin-left:auto}
#app .two>.card,#modalbody .card{min-width:0}
#app .two .card button,#app .two .card .btn{max-width:100%;white-space:normal}
#modalbody .detail button{white-space:nowrap}

/* ── Print: app chrome never reaches paper ────────────────────────── */
@media print{
  #toast,#savedTick,#faqChatButton,#calcShortcut,.mobile-app-nav,#pageAddDock{display:none!important}
  .invoice-thanks{color:#000}
}