/* KarobarOS — DigiKhata-style mobile UI (os-13)
   Structure & density borrowed from DigiKhata's mobile app: white
   bottom bar with a pill highlight behind the active icon, soft white
   cards, two-line list rows, roomy sheets. COLORS stay KarobarOS
   orange — this sheet only reshapes the mobile layout.
   Everything lives inside max-width:899px: desktop is untouched.
   Loaded LAST in index.html so these rules win on mobile. */

@media (max-width:899px){

  /* ── Page rhythm: 16px sides, 20px/700 titles ─────────────── */
  main{padding:0 16px calc(96px + env(safe-area-inset-bottom))}
  main>header{margin:0 -16px 14px; padding:6px 16px; flex-wrap:nowrap; gap:6px}
  .heading{margin:16px 0 14px}
  .heading h1, .simple-home h1{font-size:20px !important; font-weight:700; letter-spacing:-.3px}
  .heading p{font-size:12.5px}

  /* ── Header fit at 360px: business name truncates instead of
        squeezing out My Plan / Login; pills a touch smaller ──── */
  main>header #crumb{flex:1 1 auto; min-width:0}
  .header-business-picker{max-width:100%; min-width:0}
  .header-business-picker span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .header-parcel-pro{font-size:11px; padding:6px 9px}
  #cloudButton{font-size:12px; padding:6px 10px; min-height:38px; border-radius:19px}

  /* ── Bottom navigation: white bar, soft top shadow, icon over
        label, light-orange pill behind the ACTIVE icon ──────── */
  .mobile-app-nav{
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(23,37,51,.07);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    gap:6px;
  }
  .mobile-app-nav a, .mobile-app-nav button{
    min-height:54px; padding:4px 2px; gap:3px;
    font-size:11px; font-weight:600; color:#7c858c; border-radius:12px;
  }
  .mobile-app-nav svg{width:21px; height:21px}
  .mobile-app-nav .active{color:var(--orange); background:transparent}
  .mobile-app-nav .active svg{
    width:44px; height:30px; padding:5px 12px;
    background:#ffe7d9; border-radius:999px;
  }

  /* ── Cards: white, 16–18px radius, very soft shadow ───────── */
  .card{
    background:#fff; border:1px solid #edf0ea; border-radius:17px;
    padding:16px; box-shadow:0 2px 10px rgba(23,37,51,.05);
  }
  .panel{border-radius:17px; box-shadow:0 2px 10px rgba(23,37,51,.05)}
  /* Home Cash Book card stays brand orange, same radius language */
  .home-cash-card{border-radius:18px; padding:18px 16px}

  /* ── Home module tiles: icon in a light-orange circular chip,
        13px medium label below ──────────────────────────────── */
  .essential-tools{gap:10px}
  .essential-tools a{
    border-radius:16px; padding:14px 4px 12px; gap:8px;
    min-height:92px; font-size:13px; font-weight:500;
  }
  .essential-tools a>svg{
    width:46px; height:46px; padding:11px;
    background:#fff1e8; border-radius:50%; color:var(--orange);
  }

  /* ── List rows: two lines, ~60px tall, name 15px/600,
        sub-line 12.5px gray, amount bold on the right ───────── */
  #records td, .own-ledger td{padding-top:11px; padding-bottom:11px}
  #records td .link, .own-ledger .ledger-detail-link{font-size:15px; font-weight:600}
  #records td small, .own-ledger td small{font-size:12.5px}
  #records .balance-amount strong{font-size:16px; font-weight:700}
  .detail{padding-top:12px; padding-bottom:12px}
  .detail strong{font-size:15px}
  /* Party picker rows already have an avatar chip — round it and
     bring the type up to the same rhythm */
  .party-pick-row{min-height:60px; padding:10px 14px}
  .party-avatar{width:44px; height:44px; border-radius:50%; background:#fff1e8; color:var(--orange)}
  .party-pick-name b{font-size:15px; font-weight:600}
  .party-pick-name small{font-size:12.5px}

  /* ── Sheets / forms: 20px radius, primary button full-width
        and ~48px tall (DigiKhata's big bottom CTA) ──────────── */
  dialog#modal[open]{border-radius:20px}
  #modalbody button.primary{min-height:48px; border-radius:12px}
  #modalbody form:not(#aiForm)>button.primary,
  #modalbody>button.primary{width:100%}
  #modalbody .inline-actions>button.primary{flex:1 1 auto}

  /* ── Tap targets ≥44px ────────────────────────────────────── */
  .tabs button{min-height:44px}
}

/* ── Type scale — aam apps jaisi chhoti, saaf fonts (MiR, os-14) ── */
@media (max-width: 899px){
  .heading h1{font-size:18px}
  .simple-home h1{font-size:19px}
  .heading p{font-size:12px}
  h2{font-size:15px}
  .stat strong{font-size:17px}
  .stat small{font-size:11px}
  .home-cash-card strong{font-size:19px}
  .home-cash-card span{font-size:12.5px}
  .essential-tools a span{font-size:12px}
  .mobile-app-nav a{font-size:10.5px}
  .tabs button{font-size:13.5px}
  .tablewrap table{font-size:13px}
  .card{font-size:13.5px}
  button,.btn{font-size:14px}
  .header-business-picker span{font-size:14.5px}
  input,select,textarea{font-size:16px}
}

/* ── os-16 polish pass (audit fixes B, C-bar, D, G) ─────────── */
@media (max-width:899px){
  /* B: empty-state row hamesha poori parhi jaye — nowrap table mein
     akeli empty row kat jati thi. Data wali tables wrapper ke andar
     horizontal scroll hoti hain (jaise pehle thi). */
  .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
  td.empty{white-space:normal; line-height:1.55}
  table:has(td.empty){white-space:normal; table-layout:fixed; width:100%}
  /* workspace-polish ki "#records table{min-width:480px!important;
     table-layout:auto}" wali rule khaali table ko bhi 480px chaura
     kar deti thi — empty state par use khatam kiya. */
  #records table:has(td.empty), #parcelData table:has(td.empty){table-layout:fixed; width:100%; min-width:0 !important}
  table:has(td.empty) th, table:has(td.empty) td{padding-left:8px; padding-right:8px}

  /* C: POS ki bottom bar mobile bottom-nav ke upar uthe — pehle
     72px par nav se takrati thi; ab saans ki jagah ke saath 88px. */
  .pos-bottom{bottom:calc(88px + env(safe-area-inset-bottom))}
  .pos-workspace{padding-bottom:180px}

  /* D: list pages ka aakhri row floating add-dock aur chat circle
     ke neeche na chhupe — scroll area ke andar hi jagah pakki. */
  body[data-list-workspace="true"] .workspace-scroll{padding-bottom:calc(150px + env(safe-area-inset-bottom))}

  /* G: Cash/Party filter row — "Date range" label do lines par
     toot-ta tha; ab har button ka label ek hi line mein. */
  .report-action-row>button{white-space:nowrap; flex:0 1 auto; font-size:12.5px; padding:8px 10px}
  .report-action-row>button:first-child{flex:0 1 auto}
}

/* os-30 — Mobile par list tables screen se bahar na jayein:
   workspace-polish.css ki baad mein aane wali "#records table{
   min-width:480px!important; table-layout:auto}" rule os-16 ki
   "≤650px par min-width:0" wali durustgi ko daba deti thi, jis se
   Bills / Staff / Expenses / Stock ki tables mobile par 480px chauri
   reh kar andar hi andar side-scroll hoti theen. Ye sheet sab se
   aakhir load hoti hai, is liye yahan ki rule jeet-ti hai: ≤650px par
   har list table screen ki chaudai mein fit hogi. */
@media (max-width:650px){
  #records table, #parcelData table{min-width:0!important; width:100%; table-layout:fixed}
  /* Base table{white-space:nowrap} ki wajah se actions cell ke
     "Share · Delete" links cell se bahar nikal kar panel ke kinare
     ke peeche kat jate thay — cells ab apni chaudai mein wrap honge
     (lambi values ke liye overflow-wrap:anywhere pehle se maujood). */
  #records td, #parcelData td{white-space:normal}
}