/* Responsive layout and bidi fixes. Loaded after the original design system. */
html{scroll-padding-top:84px}
body{overflow-wrap:break-word}
.app-shell,.main,.content,.card,.card-body,.card-head,.page-head>div,.topbar-leading,.grid-two>*,.inbox-layout>*,.review-grid>*{min-inline-size:0}
.topbar-leading{display:flex;align-items:center;gap:10px}
.top-actions{flex-shrink:0}
.breadcrumb{min-width:0;overflow-wrap:anywhere}
.nav-item,.submission{text-align:start}
.nav-count{margin-left:0;margin-inline-start:auto;flex:none}
.nav-icon,.stat-icon,.photo-thumb{flex:none}
.brand{white-space:nowrap}
.page-head h1{outline:none}
.card-head{flex-wrap:wrap}
.card-head h2{overflow-wrap:anywhere}
.card-head>a{flex-shrink:0;min-height:44px;display:inline-flex;align-items:center}
.btn{min-height:44px;white-space:normal;text-align:center;line-height:1.5;max-inline-size:100%}
.btn.sm{min-height:40px}
button:focus-visible,a:focus-visible,summary:focus-visible,.upload-zone:focus-within{outline:3px solid #bc863d;outline-offset:3px}
.quantity{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:3px 7px;max-inline-size:100%;vertical-align:baseline}
.quantity>.val{display:inline;direction:ltr;unicode-bidi:isolate;font-family:Manrope,"DM Sans",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;max-inline-size:100%}
.quantity>.curr,.amount .quantity>.curr,[lang=ur] .amount .quantity>.curr{display:inline;font-size:.75em;margin:0;color:inherit;font-weight:500;white-space:nowrap}
.stat strong{overflow:visible;text-overflow:clip;white-space:normal;letter-spacing:0;font-size:clamp(22px,2.2vw,30px);line-height:1.4}
.stat strong>.quantity{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.stat strong>.quantity>.curr{font-size:14px;color:#52665c}
.stat strong>.quantity>.val{width:100%}
.stat small{display:block;color:#52665c;line-height:1.6}
.stat-top{gap:12px;align-items:flex-start}
.amount{white-space:normal}
.phone{direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-variant-numeric:tabular-nums}
.small-list li{gap:12px;align-items:flex-start;flex-wrap:wrap}
.small-list li>strong{flex:1 1 200px;min-width:0}
.small-list li>span{flex:0 1 auto}
.record-details dd{min-inline-size:0;unicode-bidi:plaintext}
.source-meta,.submission-main small{unicode-bidi:plaintext}
.help-line,.notice,.review-fields p{overflow-wrap:anywhere}
.mobile-cell-label{display:none}
.cell-value{min-width:0;overflow-wrap:anywhere}
.cell-value>strong,.cell-value>.sub{unicode-bidi:plaintext}
.filter-panel{margin-top:12px}
.filter-panel summary{padding:12px 0;min-height:44px;font-weight:700;cursor:pointer;color:var(--green)}
.filter-panel[open] summary{margin-bottom:12px}
.menu-close,.nav-scrim{display:none}
.upload-zone{position:relative}
.upload-zone input{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
[lang=ur] .transcribe-box h3{font-family:Manrope,"Noto Naskh Arabic",sans-serif!important;line-height:1.7!important}
[lang=ur] .transcribe-box p{font-size:16px!important;line-height:1.8}
[lang=ur] .filter-panel summary{font-size:17px}
.submission-main strong{white-space:normal;overflow:visible;overflow-wrap:anywhere}
.submission{flex-wrap:wrap;gap:10px}
.submission-main{flex-basis:140px}
.submission .badge{max-inline-size:100%;white-space:normal}
.progress-track li{min-width:0}
.progress-track b{flex:none}
.slip-toolbar{gap:12px}
.slip-toolbar [data-action="close-slip"]{min-width:44px}
@media(min-width:761px){
  .responsive-table .quantity{flex-wrap:nowrap}
  .responsive-table .quantity>.val{white-space:nowrap;overflow-wrap:normal}
  .responsive-table th{white-space:nowrap}
  .responsive-table .cell-value:has(>.quantity){min-width:max-content}
}
@media(min-width:761px) and (max-width:1400px){.grid-two{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1100px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .app-shell{display:block;max-width:100%}
  .content{padding:22px 16px max(36px,env(safe-area-inset-bottom));width:100%}
  .topbar{position:sticky;top:0;z-index:10;min-height:66px;height:auto;padding:10px 16px;gap:8px}
  .topbar-leading{flex:1;gap:6px}
  .top-actions{gap:8px}
  .breadcrumb{line-height:1.45;font-size:14px}
  .breadcrumb>span{display:none}
  .breadcrumb{font-size:0!important}
  .breadcrumb strong{font-size:15px}
  .mobile-head{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;font-size:24px;border:1px solid var(--line);border-radius:10px}
  .lang-switch{min-height:44px;padding:8px 12px;font-size:14px}
  .avatar{width:30px;height:30px;font-size:12px;flex:none}
  .sidebar,[lang=ur] .sidebar{position:fixed;inset-block:0;inset-inline-start:0;inset-inline-end:auto;width:min(310px,calc(100vw - 52px));height:100dvh;max-height:100dvh;z-index:31;transform:none;visibility:hidden;pointer-events:none;transition:visibility .15s;overscroll-behavior:contain;padding:18px 16px max(22px,env(safe-area-inset-bottom))}
  .sidebar.open,[lang=ur] .sidebar.open{transform:none;visibility:visible;pointer-events:auto}
  .sidebar .brand{padding:10px 0 20px;font-size:23px;gap:8px;margin-inline-end:42px}
  [lang=ur] .sidebar .brand{font-size:24px}
  .menu-close{display:grid;place-items:center;position:absolute;inset-inline-end:12px;top:20px;width:40px;height:40px;border:1px solid #ffffff38;border-radius:10px;color:white;background:transparent;font-size:28px}
  .nav-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:30;border:0;background:#071c16a6;backdrop-filter:blur(2px)}
  body.menu-open{overflow:hidden}
  .sidebar .nav-item{min-height:48px;padding:10px 14px;line-height:1.6}
  .sidebar .nav-label{margin-top:12px}
  .workspace-name,.workspace-role{overflow-wrap:anywhere;unicode-bidi:plaintext}
  .page-head{gap:16px}
  .page-head h1{font-size:28px;line-height:1.45}
  .page-head p{line-height:1.75}
  .head-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .head-actions .btn:only-child{grid-column:1/-1}
  .card-head,.card-body{padding:16px}
  .card-head{gap:4px 12px;align-items:baseline}
  .card-head h2{font-size:17px}
  [lang=ur] .card-head h2{font-size:20px;line-height:1.7}
  .card-head>span{line-height:1.6}
  .card-head>a{margin-inline-start:auto;font-size:14px}
  .table-wrap{overflow:visible}
  .responsive-table{display:block;min-width:0!important;width:100%;border-collapse:separate}
  .responsive-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .responsive-table tbody{display:block;padding:0 16px 16px}
  .responsive-table tbody tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
  .responsive-table tbody tr:last-child{border-bottom:0;padding-bottom:0}
  .responsive-table td,.ledger-table td{display:grid;grid-template-columns:minmax(72px,.85fr) minmax(0,1.65fr);gap:6px 14px;align-items:start;padding:7px 0;border:0;font-size:14px;text-align:start}
  .mobile-cell-label{display:block;color:#52665c;font-size:12px;font-weight:500;line-height:1.6}
  [lang=ur] .mobile-cell-label{font-size:15px;line-height:1.8}
  .cell-value{line-height:1.6}
  [lang=ur] .cell-value{font-size:16px;line-height:1.8}
  .responsive-table td:first-child{display:block;padding-bottom:12px}
  .responsive-table td:first-child .mobile-cell-label{margin-bottom:3px}
  .responsive-table td:first-child .cell-value>strong{font-size:17px;line-height:1.75}
  .responsive-table td.amount{grid-template-columns:minmax(0,1fr);padding-block:10px}
  .responsive-table td.amount .quantity{font-size:20px;font-weight:800}
  .responsive-table td.amount .mobile-cell-label{font-size:14px}
  [lang=ur] .responsive-table td.amount .mobile-cell-label{font-size:15px}
  .cell-value .btn{width:100%;margin-block:3px}
  .cell-value>div[style]{flex-wrap:wrap}
  .cell-value .sub{font-size:13px;line-height:1.8;max-width:none}
  .type-pill,.badge{white-space:normal;display:inline-block;line-height:1.6}
  .field-grid,.field-grid.three,.ledger-filters{grid-template-columns:1fr;gap:16px}
  .input,.field input,.field select,.field textarea{font-size:16px;min-height:48px;max-width:100%;min-width:0;padding:11px 12px}
  .field label{font-size:14px}
  .field select{overflow:hidden;text-overflow:ellipsis}
  .filter-bar{flex-wrap:wrap}
  .filter-bar input,.filter-bar select{max-width:none;width:100%}
  .form-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .form-actions .btn{width:100%;flex:auto}
  .entry-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .entry-tabs .btn{padding:10px 8px;font-size:13px}
  [lang=ur] .entry-tabs .btn{font-size:15px}
  .entry-row{padding:14px}
  .entry-row-title{gap:12px;font-size:15px}
  .entry-row-title button{min-height:44px;padding:10px}
  .progress-track{flex-direction:column;gap:12px}
  .progress-track li{min-width:0;flex:initial;font-size:14px}
  .inbox-layout{grid-template-columns:minmax(0,1fr)}
  .image-frame{min-height:180px;max-height:440px}
  .image-frame img{width:100%;height:auto;max-height:440px;object-fit:contain}
  .upload-zone{padding:20px 12px}
  .upload-zone strong{font-size:16px;line-height:1.8}
  .upload-zone span{font-size:14px;line-height:1.7}
  .transcribe-box{padding:18px 14px!important}
  .transcribe-box .btn{width:100%;padding:12px!important}
  .section-top{gap:12px;flex-wrap:wrap}
  .section-top .btn{width:100%}
  .record-details{grid-template-columns:1fr;gap:4px;margin-block:18px}
  .record-details dt{margin-top:10px;font-size:14px}
  .record-details dd{font-size:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .record-details .quantity{font-size:20px}
  .slip-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:16px}
  .slip-actions{flex-direction:column}
  .slip-toolbar{align-items:flex-start}
  .slip-toolbar .btn{flex-shrink:0}
  .toast,[lang=ur] .toast{inset-inline:12px;bottom:max(16px,env(safe-area-inset-bottom));max-width:none;font-size:15px}
  .auth-hero{padding:20px 24px;min-height:0;gap:16px}
  .auth-hero p,.auth-hero .eyebrow{display:none}
  .auth-hero h1{font-size:25px;line-height:1.45}
  .auth-hero h1 br{display:none}
  .auth-panel{padding:24px 16px}
  .auth-card{width:100%}
  .auth-card h2,[lang=ur] .auth-card h2{font-size:26px}
  .auth-lang,[lang=ur] .auth-lang{margin-bottom:18px}
}
@media(max-width:600px){
  .stats,[lang=ur] .stats{grid-template-columns:minmax(0,1fr)!important;gap:12px}
  .stat{padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .stat-top,[lang=ur] .stat-top{font-size:15px;align-items:center}
  .stat strong,[lang=ur] .stat strong{font-size:28px;margin:0;line-height:1.45}
  .stat strong>.quantity{flex-direction:row;align-items:baseline;gap:8px}
  .stat strong>.quantity>.val{width:auto}
  .stat small,[lang=ur] .stat small{font-size:14px}
}
@media(max-width:359px){
  .content{padding-inline:12px}
  .topbar{padding-inline:12px}
  .avatar{display:none}
  .head-actions,.entry-tabs{grid-template-columns:1fr}
  .responsive-table td{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.spinner{animation-duration:2s}}
@media print{.mobile-cell-label,.menu-close,.nav-scrim{display:none!important}.record-details{grid-template-columns:minmax(120px,1fr) minmax(0,2fr)}.quantity{display:inline-flex}}
.ledger-pagination{padding:16px;text-align:center;border-top:1px solid var(--line)}.ledger-pagination p{color:var(--muted);font-size:14px;margin:0 0 12px}[lang=ur] .ledger-pagination p{font-size:16px}.ledger-pagination .btn{min-width:180px}