/* v3.20 — iPhone page-level polish. Visual-only layer. */
:root{--page-gap:12px;--card-radius:16px;--hairline:rgba(60,60,67,.14)}
.main{max-width:760px;margin:0 auto}
.card,.metric,.workflow-card,.list-item{border-radius:var(--card-radius)}
.card{margin-bottom:var(--page-gap)}
.section-title{margin:18px 2px 9px;font-size:13px;letter-spacing:.01em}
.item-title{line-height:1.28}
.item-meta,.hint,.field-help{line-height:1.38}
.value{font-variant-numeric:tabular-nums}

/* Home: priority = open sale / inventory / loan, secondary actions visually quieter. */
body[data-mocui-page="dashboard"] .main>.grid-2:first-of-type{gap:8px}
body[data-mocui-page="dashboard"] .metric{padding:13px}
body[data-mocui-page="dashboard"] .workflow-grid{gap:9px}
body[data-mocui-page="dashboard"] .workflow-card{padding:13px 12px}
body[data-mocui-page="dashboard"] .workflow-card .item-meta{font-size:11px}

/* Products: denser rows, larger image, controls remain thumb-friendly. */
body[data-mocui-page="products"] .list-item{padding:9px 10px;gap:10px}
body[data-mocui-page="products"] .thumb{width:58px;height:58px;flex:0 0 58px;border-radius:13px}
body[data-mocui-page="products"] .toolbar{position:sticky;top:calc(56px + var(--ios-top));z-index:20;padding:8px 0;background:var(--bg,#fff)}
body[data-mocui-page="products"] .item-main{min-width:0}
body[data-mocui-page="products"] .item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sales/new-sale: money and action hierarchy. */
body[data-mocui-page="sale-new"] .card{padding:13px}
body[data-mocui-page="sale-new"] .form-group{margin-bottom:13px}
body[data-mocui-page="sale-new"] .sale-item-row{padding:10px 0}
body[data-mocui-page="sale-new"] .sticky-actions .btn:not(.secondary){font-weight:700}
body[data-mocui-page="sales"] .list-item{padding:10px}
body[data-mocui-page="sales"] .item-main{min-width:0}

/* Loans: outstanding rows readable at a glance. */
body[data-mocui-page="loans"] .list-item{padding:10px}
body[data-mocui-page="loans"] .badge{white-space:nowrap}
body[data-mocui-page="loans"] .toolbar{position:sticky;top:calc(56px + var(--ios-top));z-index:20;padding:8px 0;background:var(--bg,#fff)}

/* Reports: compact KPI cards and horizontally scrollable tables. */
body[data-mocui-page="reports"] .grid-2,body[data-mocui-page="reports"] .grid-3{gap:8px}
body[data-mocui-page="reports"] .metric{padding:11px}
body[data-mocui-page="reports"] .metric .value{font-size:clamp(18px,5vw,25px)}
body[data-mocui-page="reports"] .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
body[data-mocui-page="reports"] .table{min-width:520px}
body[data-mocui-page="reports"] #v316range{position:sticky;top:calc(56px + var(--ios-top));z-index:20;background:var(--bg,#fff);padding:7px 0}

/* More/settings: one-screen scanability; diagnostics remains secondary. */
body[data-mocui-page="more"] .workflow-grid,body[data-mocui-page="settings"] .workflow-grid{gap:8px}
body[data-mocui-page="more"] .workflow-card,body[data-mocui-page="settings"] .workflow-card{min-height:72px;padding:11px}
body[data-mocui-page="more"] #mocuiDiagnostics,body[data-mocui-page="settings"] #mocuiDiagnostics{margin-top:10px!important}

/* Keep long text/actions from pushing layouts sideways. */
.item-main,.card,.metric{min-width:0}
.btn{white-space:normal}
.form-row>*{min-width:0}

@media(max-width:390px){
 body[data-mocui-page="dashboard"] .metric .value{font-size:20px}
 body[data-mocui-page="reports"] .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body[data-mocui-page="sale-new"] .form-row{grid-template-columns:1fr!important}
 body[data-mocui-page="sale-new"] .form-row>.btn{width:100%}
}