:root {
    --sidebar-width: 260px;
    --content-gutter: 28px;
    --navy: #0b2438;
    --navy-2: #12344d;
    --brand: #00897b;
    --brand-dark: #00695c;
    --brand-pale: #e6f6f3;
    --blue: #1976d2;
    --amber: #f59e0b;
    --red: #d32f2f;
    --green: #138a5b;
    --ink: #102a43;
    --muted: #627d98;
    --line: #dfe7ef;
    --canvas: #f4f7fa;
    --white: #ffffff;
    --shadow: 0 12px 30px rgba(16, 42, 67, .08);
    --radius: 14px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font: 14px/1.5 Inter, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: var(--brand-dark); }
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    color: #d8e6ee;
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 137, 123, .25), transparent 32%),
        linear-gradient(180deg, var(--navy), #081d2d);
    box-shadow: 10px 0 35px rgba(11, 36, 56, .12);
    transition: transform .25s ease;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 15px 22px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: white;
    background: linear-gradient(145deg, #10b7a6, var(--brand));
    box-shadow: 0 9px 20px rgba(0,137,123,.35);
    font-size: 27px;
    font-weight: 800;
}
.sidebar-brand strong { display: block; font-size: 20px; letter-spacing: -.4px; }
.sidebar-brand small, .sidebar-user small { display: block; color: #93b1c3; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px 18px; }
.nav-label {
    margin: 18px 12px 7px;
    color: #7393a8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: 9px;
    color: #c5d6e1;
    font-weight: 600;
    text-decoration: none;
    transition: .18s ease;
}
.nav-link:hover { color: white; background: rgba(255,255,255,.07); }
.nav-link.active { color: white; background: linear-gradient(100deg, rgba(0,137,123,.9), rgba(0,137,123,.52)); box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.nav-icon { display: grid; width: 23px; height: 23px; place-items: center; font-size: 16px; }
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
}
.sidebar-user strong { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; }
.avatar { display: grid; width: 37px; height: 37px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: var(--brand); font-weight: 800; }
.main-shell { display: flex; min-height: 100vh; width: calc(100% - var(--sidebar-width)); margin-left: var(--sidebar-width); flex-direction: column; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 28px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(12px);
}
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar h1 { margin: 1px 0 0; font-size: 22px; letter-spacing: -.35px; }
.breadcrumb { margin: 0; color: var(--muted); font-size: 11px; font-weight: 650; }
.today { color: var(--muted); font-size: 13px; }
.icon-button {
    display: grid;
    min-width: 37px;
    height: 37px;
    place-items: center;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    background: white;
    cursor: pointer;
}
.sidebar-toggle { display: none; }
.content { width: 100%; max-width: 1700px; margin: 0 auto; padding: 26px var(--content-gutter) 38px; flex: 1; }
.app-footer { display: flex; justify-content: space-between; padding: 17px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; background: white; }
.sidebar-overlay { display: none; }

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 64px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.card-header h2, .card-header h3 { margin: 0; font-size: 17px; }
.card-header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.card-body { padding: 20px; }
.card-body.flush { padding: 0; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--line); background: #fbfcfd; border-radius: 0 0 var(--radius) var(--radius); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; }
.page-grid.wide-form { grid-template-columns: minmax(0, 1fr) 480px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stack { display: grid; gap: 20px; }
.section-gap { margin-top: 20px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 20px; }
.metric-card {
    position: relative;
    overflow: hidden;
    min-height: 124px;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: var(--shadow);
}
.metric-card:after { content:""; position:absolute; right:-30px; bottom:-40px; width:105px; height:105px; border-radius:50%; background:var(--metric-pale,#e6f6f3); }
.metric-card .metric-icon { position:relative; z-index:1; display:grid; width:37px; height:37px; place-items:center; margin-bottom:12px; border-radius:10px; color:var(--metric,#00897b); background:var(--metric-pale,#e6f6f3); font-size:18px; font-weight:800; }
.metric-card p { position:relative; z-index:1; margin:0 0 3px; color:var(--muted); font-size:12px; font-weight:650; }
.metric-card strong { position:relative; z-index:1; display:block; font-size:22px; letter-spacing:-.5px; }
.metric-card.blue { --metric:#1976d2; --metric-pale:#e8f2fd; }
.metric-card.amber { --metric:#c77c00; --metric-pale:#fff4da; }
.metric-card.red { --metric:#d32f2f; --metric-pale:#ffebee; }
.metric-card.violet { --metric:#6d4cbe; --metric-pale:#f0eafd; }

.btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; background: linear-gradient(135deg, #06998a, var(--brand-dark)); box-shadow: 0 7px 16px rgba(0,105,92,.2); }
.btn-secondary { color: var(--ink); border-color: var(--line); background: white; }
.btn-danger { color: white; background: var(--red); }
.btn-soft { color: var(--brand-dark); background: var(--brand-pale); }
.btn-sm { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.btn-block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

label { display: block; margin: 0 0 6px; color: #334e68; font-size: 12px; font-weight: 750; }
.required:after { content:" *"; color: var(--red); }
input, select, textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #bcccdc;
    border-radius: 8px;
    color: var(--ink);
    background: white;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(0,137,123,.13); border-color: var(--brand); }
input[readonly], input:disabled, select:disabled { color:#829ab1; background:#f1f5f8; cursor:not-allowed; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-span-2 { grid-column: span 2; }
.field-span-full { grid-column: 1 / -1; }
.form-help { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.check-field { display: flex; min-height: 40px; align-items: center; gap: 8px; }
.check-field input { width: 17px; min-height: 17px; }
.check-field label { margin: 0; }
.stack-form { display: grid; gap: 8px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.inline-form > div { min-width: 150px; flex: 1; }
.input-with-button { display: flex; gap: 7px; }
.input-with-button .btn { flex: 0 0 auto; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 13px; border-bottom: 1px solid #e8eef3; text-align: left; vertical-align: middle; white-space: nowrap; }
th { color: #486581; background: #f8fafc; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:hover { background: #fbfdfd; }
tbody tr:last-child td { border-bottom: 0; }
td.wrap, th.wrap { white-space: normal; }
.table-title { display: block; color: var(--ink); font-weight: 750; }
.table-subtitle { display: block; color: var(--muted); font-size: 11px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-danger { color: var(--red); }
.text-success { color: var(--green); }
.font-strong { font-weight: 750; }
.mono { font-family: "SFMono-Regular",Consolas,monospace; }
.empty-row { padding: 30px; color: var(--muted); text-align: center; }
.table-actions { display: flex; gap: 6px; justify-content: flex-end; }
.table-input { min-width: 90px; }
.table-select { min-width: 190px; }

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #486581;
    background: #eaf0f5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
}
.badge-paid, .badge-completed, .badge-received, .badge-active, .badge-saleable { color:#087f5b; background:#e6f6ee; }
.badge-due, .badge-expired, .badge-returned, .badge-cancelled { color:#b42318; background:#ffebee; }
.badge-partial, .badge-partially_returned, .badge-near_expiry { color:#a66300; background:#fff4d6; }
.badge-approved { color:#175cd3; background:#eaf2ff; }
.badge-controlled { color:#6d28d9; background:#f1eafe; }

.alert { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; padding:12px 14px; border:1px solid; border-radius:10px; font-weight:600; }
.alert button { border:0; color:inherit; background:transparent; cursor:pointer; font-size:19px; }
.alert-success { color:#066447; border-color:#a7dfcb; background:#eafaf3; }
.alert-danger { color:#9b1c1c; border-color:#ffc9c9; background:#fff0f0; }
.alert-warning { color:#8b5e00; border-color:#ffe39b; background:#fff8e3; }
.alert-info { color:#1554ad; border-color:#bdd5fb; background:#eef5ff; }
.callout { padding:14px 16px; border-left:4px solid var(--brand); border-radius:8px; color:#31576c; background:var(--brand-pale); }
.callout.warning { border-color:var(--amber); background:#fff8e4; }

.toolbar { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px; margin-bottom:17px; }
.toolbar form { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }
.toolbar input, .toolbar select { min-width:155px; }
.pill-tabs { display:flex; flex-wrap:wrap; gap:7px; }
.pill-tabs a { padding:7px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:white; text-decoration:none; font-size:12px; font-weight:700; }
.pill-tabs a.active { color:white; border-color:var(--brand); background:var(--brand); }
.data-points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.data-point { padding:12px; border:1px solid var(--line); border-radius:10px; background:#fbfcfd; }
.data-point small { display:block; color:var(--muted); }
.data-point strong { display:block; margin-top:2px; font-size:17px; }

.chart-bars { display:flex; min-height:205px; align-items:end; gap:10px; padding:20px 6px 4px; }
.chart-bar-col { display:flex; min-width:35px; flex:1; height:185px; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.chart-bar { width:min(42px,70%); min-height:3px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,#13ad9d,var(--brand-dark)); box-shadow:0 6px 14px rgba(0,137,123,.16); }
.chart-bar-col small { color:var(--muted); font-size:10px; }
.chart-value { font-size:10px; font-weight:750; }
.progress { height:8px; overflow:hidden; border-radius:99px; background:#edf2f7; }
.progress > span { display:block; height:100%; border-radius:99px; background:var(--brand); }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.pos-command-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-bottom:18px;
    padding:18px 20px;
    overflow:hidden;
    border:1px solid #cde7e3;
    border-radius:16px;
    background:linear-gradient(110deg,#f8fffd 0%,#eef9f7 55%,#f5f9ff 100%);
    box-shadow:0 10px 26px rgba(18,52,77,.06);
}
.pos-command-main { display:flex; align-items:center; gap:14px; }
.pos-command-main h2 { margin:1px 0 2px; font-size:19px; letter-spacing:-.3px; }
.pos-command-main p:not(.eyebrow) { margin:0; color:var(--muted); font-size:12px; }
.pos-command-icon { display:grid; width:46px; height:46px; flex:0 0 auto; place-items:center; border-radius:13px; color:white; background:linear-gradient(145deg,#13ad9d,var(--brand-dark)); box-shadow:0 9px 20px rgba(0,137,123,.24); font-size:25px; }
.pos-command-shortcuts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 14px; color:#486581; font-size:11px; font-weight:700; }
.pos-command-shortcuts span { white-space:nowrap; }
kbd { display:inline-grid; min-width:23px; height:22px; place-items:center; padding:0 5px; border:1px solid #c8d6e2; border-bottom-width:2px; border-radius:5px; color:#334e68; background:white; box-shadow:0 1px 2px rgba(16,42,67,.08); font:700 10px/1 Inter,"Segoe UI",sans-serif; }

.pos-layout { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:20px; align-items:start; }
.pos-cart-card { overflow:hidden; }
.pos-cart-header { background:linear-gradient(180deg,#fff,#fbfdfd); }
.status-dot { width:7px; height:7px; border-radius:50%; background:#16a66d; box-shadow:0 0 0 3px rgba(22,166,109,.13); }
.pos-search-panel { padding-bottom:17px; background:linear-gradient(180deg,#fbfefd,#f6fbfa); }
.pos-search { display:grid; grid-template-columns:1fr auto; gap:10px; }
.pos-search-input { position:relative; }
.pos-search-input > span { position:absolute; top:50%; left:14px; z-index:1; transform:translateY(-50%); color:#7794a7; font-size:22px; pointer-events:none; }
.pos-search-input input { min-height:48px; padding-left:43px; border-color:#a9c8c3; border-radius:11px; background:white; box-shadow:0 5px 14px rgba(16,42,67,.04); }
.pos-search .btn { min-height:48px; padding-inline:20px; }
.pos-search-help { display:flex; align-items:center; gap:6px; margin-top:8px; }
.pos-cart-table table { min-width:760px; }
.pos-cart-table th { background:#f7fafc; }
.pos-cart-table td { padding-top:14px; padding-bottom:14px; vertical-align:middle; }
.pos-cart-table .table-title { font-size:13px; }
.pos-cart-table .table-input { min-width:76px; max-width:100px; }
.pos-line-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:5px; }
.rx-flag { display:inline-grid; width:25px; height:25px; place-items:center; margin-right:4px; border-radius:7px; color:#6d28d9; background:#f1eafe; font-size:10px; font-weight:900; vertical-align:middle; }
.stock-chip,.expiry-chip { display:inline-flex; align-items:center; min-height:21px; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:750; }
.stock-chip { color:#087f5b; background:#eaf8f1; }
.expiry-chip { color:#8a5a00; background:#fff5dc; }
.line-remove { width:31px; height:31px; border:0; border-radius:8px; color:#b42318; background:#ffebee; cursor:pointer; transition:.15s ease; }
.line-remove:hover { color:white; background:#d92d20; transform:scale(1.04); }
.empty-row span,.empty-row strong,.empty-row small { display:block; }
.empty-row strong { margin-top:6px; color:#486581; font-size:14px; }
.empty-row small { margin-top:2px; }
.empty-cart-icon { display:grid!important; width:38px; height:38px; margin:0 auto; place-items:center; border-radius:11px; color:var(--brand-dark); background:var(--brand-pale); font-size:23px; }
.pos-cart-footer { padding:16px 20px 19px; border-top:1px solid var(--line); background:#fbfcfd; }
.pos-cart-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pos-cart-metrics div { padding:10px 12px; border:1px solid #e2eaf0; border-radius:10px; background:white; }
.pos-cart-metrics span { display:block; color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.pos-cart-metrics strong { display:block; margin-top:1px; font-size:16px; }
.pos-notes { margin-top:12px; border:1px solid var(--line); border-radius:10px; background:white; }
.pos-notes summary { padding:10px 12px; color:#486581; cursor:pointer; font-size:12px; font-weight:750; }
.pos-notes textarea { margin:0 12px 12px; width:calc(100% - 24px); min-height:68px; }
.pos-checkout-column { position:sticky; top:96px; }
.card-step { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; color:var(--brand-dark); background:var(--brand-pale); font-size:10px; font-weight:850; }
.pos-customer-card .stack-form,.pos-payment-card .stack-form { gap:13px; }
.rx-safety-note { display:flex; align-items:flex-start; gap:8px; margin:0; padding:9px 10px; border-radius:9px; color:#65508e; background:#f6f1fd; }
.rx-safety-note > span { display:grid; width:24px; height:24px; flex:0 0 auto; place-items:center; border-radius:6px; color:#fff; background:#7c4dba; font-size:9px; font-weight:900; }
.pos-total-box { position:relative; overflow:hidden; padding:20px; border:1px solid rgba(255,255,255,.08); border-radius:15px; color:white; background:linear-gradient(145deg,#163e59 0%,#0b2438 64%,#071c2b 100%); box-shadow:0 14px 30px rgba(11,36,56,.18); }
.pos-total-box:after { content:""; position:absolute; right:-45px; top:-55px; width:150px; height:150px; border-radius:50%; background:rgba(17,181,165,.13); }
.pos-summary-label { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; color:white; font-weight:800; }
.pos-summary-label small { color:#9fc1d0; font-weight:650; }
.pos-total-line { position:relative; z-index:1; display:flex; justify-content:space-between; gap:20px; padding:6px 0; color:#c9dae4; }
.pos-total-line strong { color:#f5fbff; }
.pos-total-line.grand { margin-top:8px; padding-top:15px; border-top:1px solid rgba(255,255,255,.2); color:white; font-size:21px; font-weight:800; }
.quick-tender { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:7px; }
.quick-tender button { min-height:31px; padding:5px; border:1px solid #cddbe5; border-radius:7px; color:#486581; background:#f8fafc; cursor:pointer; font-size:11px; font-weight:750; }
.quick-tender button:hover { color:var(--brand-dark); border-color:#8fc9bf; background:var(--brand-pale); }
.quick-tender button:disabled { color:#9aabb8; border-color:#e0e7ec; background:#f1f4f6; cursor:not-allowed; }
.pos-balance-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px solid #dde6ed; border-radius:11px; background:#f7fafc; }
.pos-balance-card span { color:var(--muted); font-size:11px; font-weight:750; }
.pos-balance-card strong { font-size:18px; }
.pos-balance-card.is-due { border-color:#f2c3bd; background:#fff4f2; }
.pos-balance-card.is-due strong { color:#b42318; }
.pos-balance-card.is-change { border-color:#aedbc9; background:#edf9f4; }
.pos-balance-card.is-change strong { color:#087f5b; }
.pos-balance-card.is-settled strong { color:#175cd3; }
.pos-checkout-footer { display:grid; gap:8px; padding:15px 20px 17px; }
.pos-checkout-footer .btn { min-height:48px; }
.pos-checkout-footer small { color:var(--muted); font-size:10px; text-align:center; }
.input-pulse { animation:inputPulse .35s ease; }
@keyframes inputPulse { 50% { border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,137,123,.15); } }

.settings-layout { align-items:start; }
.receipt-roll-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; color:var(--brand-dark); background:var(--brand-pale); font-size:20px; }
.switch-field { display:flex; min-height:65px; align-items:flex-start; gap:10px; margin:0; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fbfcfd; cursor:pointer; }
.switch-field input[type="hidden"] { display:none; }
.switch-field input[type="checkbox"] { width:19px; height:19px; min-height:19px; flex:0 0 auto; margin:2px 0 0; padding:0; accent-color:var(--brand); }
.switch-field span { display:block; }
.switch-field strong { display:block; color:#334e68; font-size:12px; }
.switch-field small { display:block; margin-top:2px; color:var(--muted); font-size:10px; font-weight:500; }
.settings-savebar { position:sticky; bottom:14px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 16px; border:1px solid #c7dfda; border-radius:13px; background:rgba(250,255,254,.95); box-shadow:0 12px 30px rgba(16,42,67,.12); backdrop-filter:blur(10px); }
.settings-savebar strong,.settings-savebar span { display:block; }
.settings-savebar span { color:var(--muted); font-size:11px; }
.clean-steps { display:grid; gap:11px; margin:0; padding-left:22px; }
.clean-steps li { padding-left:4px; color:#486581; }

.receipt-station { display:grid; grid-template-columns:310px minmax(0,1fr); gap:22px; align-items:start; }
.receipt-controls { position:sticky; top:96px; overflow:hidden; }
.receipt-controls-head { display:flex; align-items:center; gap:12px; padding:18px; border-bottom:1px solid var(--line); background:linear-gradient(145deg,#f8fffd,#f4f8fc); }
.receipt-controls-head h2 { margin:1px 0 0; font-size:18px; }
.receipt-controls-head p:not(.eyebrow) { margin:2px 0 0; color:var(--muted); font-size:11px; }
.receipt-controls-icon { display:grid; width:43px; height:43px; flex:0 0 auto; place-items:center; border-radius:12px; color:white; background:linear-gradient(145deg,#12aa9a,var(--brand-dark)); box-shadow:0 8px 18px rgba(0,137,123,.22); font-size:23px; }
.receipt-controls-body { padding:18px; }
.receipt-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
.receipt-specs div { min-width:0; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fbfcfd; }
.receipt-specs span,.receipt-specs strong { display:block; overflow:hidden; text-overflow:ellipsis; }
.receipt-specs span { color:var(--muted); font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.05em; }
.receipt-specs strong { margin-top:2px; font-size:12px; white-space:nowrap; }
.receipt-print-button { min-height:47px; }
.receipt-secondary-actions { display:grid; grid-template-columns:1fr 1fr; margin-top:8px; }
.printer-hint { display:block; margin-top:14px; padding:11px; border-radius:9px; color:#6f5600; background:#fff8df; }
.printer-hint strong,.printer-hint span { display:block; }
.printer-hint strong { font-size:11px; }
.printer-hint span { margin-top:3px; font-size:10px; line-height:1.45; }
.receipt-preview { min-height:720px; overflow:auto; padding:36px; border:1px solid #d9e3eb; border-radius:17px; background-color:#e9eef2; background-image:radial-gradient(#cbd6df 1px,transparent 1px); background-size:18px 18px; box-shadow:inset 0 1px 4px rgba(16,42,67,.04); }
.thermal-receipt { width:80mm; min-height:150mm; margin:0 auto; padding:4.5mm 4.5mm 6mm; color:#111; background:#fff; box-shadow:0 18px 45px rgba(16,42,67,.19); font:10px/1.35 "Nirmala UI","Noto Sans Bengali","Segoe UI",Arial,sans-serif; transition:width .2s ease,padding .2s ease; }
.thermal-receipt.receipt-paper-58 { width:58mm; min-height:120mm; padding:3.2mm 3mm 5mm; font-size:8.4px; }
.thermal-header { text-align:center; }
.thermal-header h1 { margin:4px 0 1px; font-size:18px; line-height:1.15; letter-spacing:-.25px; }
.thermal-receipt.receipt-paper-58 .thermal-header h1 { font-size:14px; }
.thermal-header p { margin:1px 0; line-height:1.35; }
.thermal-branch { font-weight:700; }
.thermal-brand-mark { display:grid; width:26px; height:26px; margin:0 auto; place-items:center; border:1.5px solid #111; border-radius:50%; font-size:19px; font-weight:900; line-height:1; }
.thermal-divider { margin:3mm 0; border-top:1px dashed #222; }
.thermal-divider-strong { border-top:2px solid #111; }
.thermal-title { text-align:center; font-size:9px; font-weight:800; letter-spacing:.16em; }
.thermal-document-number { margin-top:1mm; text-align:center; font-size:13px; font-weight:800; overflow-wrap:anywhere; }
.thermal-receipt.receipt-paper-58 .thermal-document-number { font-size:10px; }
.thermal-meta { display:grid; gap:1.2mm; margin:3mm 0 0; }
.thermal-meta div { display:grid; grid-template-columns:28% 1fr; gap:2mm; }
.thermal-meta dt { color:#444; }
.thermal-meta dd { margin:0; font-weight:700; text-align:right; overflow-wrap:anywhere; }
.thermal-items { width:100%; border-collapse:collapse; table-layout:fixed; font-size:inherit; }
.thermal-items th { padding:0 0 1.5mm; border:0; color:#111; background:transparent; font-size:.88em; }
.thermal-items th:first-child { width:44%; text-align:left; }
.thermal-items th:nth-child(2) { width:12%; }
.thermal-items th:nth-child(3) { width:20%; }
.thermal-items th:nth-child(4) { width:24%; }
.thermal-items td { padding:2mm 0; border-top:1px dotted #888; vertical-align:top; overflow-wrap:anywhere; }
.thermal-items tbody tr:first-child td { border-top:1px solid #333; }
.thermal-items td:not(:first-child) { padding-left:1mm; white-space:nowrap; }
.thermal-items small { display:block; margin-top:.5mm; color:#444; font-size:.83em; line-height:1.3; white-space:normal; }
.thermal-item-name strong { display:block; line-height:1.25; }
.thermal-item-count { margin-top:1.8mm; color:#333; font-size:.86em; text-align:right; }
.thermal-totals { display:grid; gap:1.2mm; margin-left:27%; }
.thermal-totals > div,.thermal-payment > div { display:flex; justify-content:space-between; gap:2mm; }
.thermal-totals strong,.thermal-payment strong { text-align:right; overflow-wrap:anywhere; }
.thermal-grand-total { margin-top:1mm; padding:2mm 0; border-top:1.5px solid #111; border-bottom:1.5px solid #111; font-size:1.35em; font-weight:900; }
.thermal-due { font-weight:800; }
.thermal-payment { display:grid; gap:1mm; margin-top:3mm; padding:2.2mm; border:1px solid #777; border-radius:1.5mm; }
.thermal-payment span { color:#333; }
.thermal-note { margin-top:3mm; padding:2mm; border-left:2px solid #222; background:#f3f3f3; }
.thermal-note p { margin:1mm 0 0; }
.thermal-footer { margin-top:3mm; text-align:center; }
.thermal-footer > strong { display:block; font-size:1.05em; }
.thermal-footer p { margin:1.5mm 0 0; }
.thermal-system-mark { margin-top:3mm!important; color:#555; font-size:.78em; letter-spacing:.03em; }
.print-only { display:none; }

.empty-state { padding:55px 25px; text-align:center; }
.empty-state .empty-icon { display:grid; width:60px; height:60px; place-items:center; margin:0 auto 15px; border-radius:50%; color:var(--red); background:#ffebee; font-size:28px; font-weight:850; }
.empty-state h2 { margin:0 0 8px; }
.empty-state p { margin:0 auto 18px; max-width:500px; color:var(--muted); }

.login-page { display:grid; min-height:100vh; place-items:center; padding:28px; background:#eaf1f5; }
.login-shell { display:grid; width:100%; max-width:1010px; min-height:610px; grid-template-columns:1.15fr .85fr; overflow:hidden; border-radius:24px; background:white; box-shadow:0 30px 90px rgba(11,36,56,.18); }
.login-visual {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:45px;
    color:white;
    background:
        radial-gradient(circle at 85% 18%,rgba(19,173,157,.35),transparent 28%),
        radial-gradient(circle at 12% 88%,rgba(25,118,210,.22),transparent 27%),
        linear-gradient(145deg,#0b2a3f,#071c2b);
}
.login-brand { display:flex; align-items:center; gap:11px; font-size:22px; font-weight:800; }
.login-brand span,.mobile-login-logo { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; color:white; background:var(--brand); font-size:27px; }
.login-visual h1 { max-width:520px; margin:10px 0 18px; font-size:42px; line-height:1.12; letter-spacing:-1.4px; }
.login-visual p { max-width:540px; color:#b9cedb; font-size:16px; }
.eyebrow { margin:0; color:#12b7a6 !important; font-size:11px !important; font-weight:850; letter-spacing:.17em; }
.login-flow { display:flex; align-items:center; gap:9px; color:#9db6c5; }
.login-flow span { padding:7px 10px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.04); font-size:11px; font-weight:700; }
.login-card { display:flex; flex-direction:column; justify-content:center; padding:45px; }
.login-card h2 { margin:7px 0 6px; font-size:27px; }
.login-card-head > p:not(.eyebrow) { margin:0 0 24px; color:var(--muted); }
.login-card label { margin-top:7px; }
.login-card input { min-height:46px; }
.login-card .btn { min-height:47px; margin-top:15px; }
.login-foot { margin:25px 0 0; color:var(--muted); font-size:11px; text-align:center; }
.mobile-login-logo { display:none; }

@media (max-width: 1250px) {
    .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .page-grid,.page-grid.wide-form,.pos-layout { grid-template-columns:1fr; }
    .pos-checkout-column { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
    .pos-checkout-column .pos-total-box { grid-column:1/-1; }
}
@media (max-width: 900px) {
    .sidebar { transform:translateX(-101%); }
    body.sidebar-open .sidebar { transform:translateX(0); }
    .main-shell { width:100%; margin-left:0; }
    .sidebar-toggle { display:grid; }
    body.sidebar-open .sidebar-overlay { position:fixed; inset:0; z-index:40; display:block; background:rgba(7,28,43,.45); }
    .content { padding:20px 16px 30px; }
    .topbar { padding:10px 16px; }
    .today { display:none; }
    .login-shell { grid-template-columns:1fr; max-width:480px; min-height:auto; }
    .login-visual { display:none; }
    .mobile-login-logo { display:grid; margin-bottom:18px; }
    .receipt-station { grid-template-columns:1fr; }
    .receipt-controls { position:static; }
    .receipt-controls-body { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; }
    .receipt-controls-body > label,.receipt-controls-body > select,.receipt-specs,.printer-hint { grid-column:1/-1; }
    .receipt-controls-body > label { margin-bottom:-7px; }
    .receipt-secondary-actions { margin:0; }
}
@media (max-width: 650px) {
    .metrics-grid,.grid-2,.grid-3,.form-grid,.form-grid.cols-3,.form-grid.cols-4 { grid-template-columns:1fr; }
    .field-span-2 { grid-column:span 1; }
    .topbar h1 { font-size:17px; }
    .topbar .btn { display:none; }
    .content { padding-inline:11px; }
    .card-header,.card-body { padding:15px; }
    .app-footer { display:block; padding:14px 16px; text-align:center; }
    .app-footer span { display:block; }
    .login-page { padding:12px; }
    .login-card { padding:28px 23px; }
    .pos-command-card,.pos-command-main { align-items:flex-start; }
    .pos-command-card { flex-direction:column; padding:15px; }
    .pos-command-shortcuts { justify-content:flex-start; }
    .pos-search { grid-template-columns:1fr; }
    .pos-checkout-column { grid-template-columns:1fr; }
    .pos-checkout-column .pos-total-box { grid-column:auto; }
    .pos-cart-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pos-cart-metrics div:last-child { grid-column:1/-1; }
    .settings-savebar { align-items:stretch; flex-direction:column; }
    .receipt-controls-body { display:block; }
    .receipt-controls-body > select { margin-bottom:12px; }
    .receipt-secondary-actions { margin-top:8px; }
    .receipt-preview { min-height:0; padding:18px 8px; }
    .thermal-receipt.receipt-paper-80 { width:80mm; max-width:100%; padding-inline:3.5mm; }
}
@media print {
    html,body { min-height:0; margin:0!important; padding:0!important; color:#000; background:white!important; }
    .sidebar,.topbar,.app-footer,.no-print,.sidebar-overlay { display:none !important; }
    .app-shell,.main-shell,.content,.receipt-station,.receipt-preview { display:block!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; background:white!important; box-shadow:none!important; }
    .main-shell,.content,.receipt-station,.receipt-preview { width:100%!important; max-width:none!important; }
    .card { border:0; box-shadow:none; }
    .thermal-receipt { min-height:0; margin:0!important; color:#000!important; box-shadow:none!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .thermal-items tr,.thermal-payment,.thermal-note,.thermal-totals { break-inside:avoid; page-break-inside:avoid; }
    .print-only { display:block; }
}

/* PharmaFlow v1.2 — pilot counter productivity */
.shift-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;text-decoration:none;border:1px solid var(--line)}
.shift-pill.is-open{color:#087f5b;background:#effcf6;border-color:#a7e8d2}.shift-pill.is-closed{color:#9a6700;background:#fff8e1;border-color:#ffe08a}
.badge-warning,.badge-pending{color:#9a6700;background:#fff4d1}.badge-danger,.badge-rejected{color:#b42318;background:#ffebee}
.counter-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;margin-bottom:20px;border-radius:18px;color:#fff;background:linear-gradient(125deg,#073b4c,#087f6b);box-shadow:0 16px 38px rgba(7,59,76,.2)}
.counter-hero h2{margin:2px 0 5px;font-size:25px}.counter-hero p{margin:0;max-width:760px;color:rgba(255,255,255,.78)}.counter-hero .eyebrow{color:#8ff1da}.counter-hero .badge{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.2)}
.hero-number{text-align:right}.hero-number small,.hero-number span{display:block;color:rgba(255,255,255,.72)}.hero-number strong{display:block;font-size:27px;margin:2px 0}
.compact-form-card{max-width:760px}.two-one-grid{grid-template-columns:minmax(0,2fr) minmax(290px,1fr)}.shift-metrics{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:20px}.shift-metrics .metric-card>span,.shift-metrics .metric-card>small{position:relative;z-index:1;display:block;color:var(--muted)}.shift-metrics .metric-card>small{margin-top:5px;font-size:11px}.danger-zone{border-color:#ffd4d4}.text-danger{color:#b42318!important}.text-warning{color:#9a6700!important}
.held-sale-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:12px 14px;border:1px solid #c7e9e4;border-radius:14px;background:#f2fbfa}.held-sale-strip>div:first-child span{display:block;color:var(--muted);font-size:12px}.held-sale-list{display:flex;gap:8px;overflow:auto}.held-sale-list article{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;background:#fff;white-space:nowrap}.held-sale-list a{padding:8px 10px;color:var(--ink);text-decoration:none}.held-sale-list a span{display:block;color:var(--muted);font-size:11px}.held-sale-list form,.held-sale-list button{margin:0}.held-sale-list button{height:100%;border:0;border-left:1px solid var(--line);background:transparent;color:#b42318;cursor:pointer;padding:0 9px}
.split-payment-head{display:flex;align-items:center;justify-content:space-between}.split-payment-head span{font-size:12px;color:var(--muted)}.split-payment-lines{display:grid;gap:8px}.split-payment-row{display:grid;grid-template-columns:1.15fr .75fr 1fr auto;gap:7px;align-items:center}.split-payment-row select,.split-payment-row input{min-width:0}.split-payment-row .line-remove{padding:8px}
.label-layout{grid-template-columns:340px minmax(0,1fr)}.label-preview-card{overflow:hidden}.label-sheet{display:flex;flex-wrap:wrap;gap:8px;padding:18px;background:#eef2f5}.medicine-label{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:2.2mm;border:1px dashed #9aa8b3;background:#fff;color:#000;font-family:Arial,sans-serif;line-height:1.08;text-align:center}.label-size-40x25 .medicine-label{width:40mm;height:25mm}.label-size-50x30 .medicine-label{width:50mm;height:30mm}.label-size-60x40 .medicine-label{width:60mm;height:40mm}.medicine-label>strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.medicine-label>small{font-size:8px}.barcode-svg{display:block;width:94%;height:10mm;margin:1mm 0 .3mm;fill:#000}.barcode-text{font:7px monospace;letter-spacing:.8px}.label-meta{display:flex;justify-content:space-between;width:100%;font-size:8px;margin-top:.5mm}.label-meta b{font-size:10px}
.inline-action-form{display:grid;gap:6px;min-width:260px;padding:10px;margin-top:6px;border:1px solid var(--line);border-radius:10px;background:#fff}.action-decision{margin-top:6px}.expiry-hero{background:linear-gradient(125deg,#5b3a00,#ad6800)}
.audit-filters{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:9px}.audit-filters input,.audit-filters select{min-width:0}.truncate-agent{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-wrap pre{max-width:420px;max-height:220px;overflow:auto;padding:9px;border-radius:8px;background:#f6f8fa;font-size:11px;white-space:pre-wrap}
.health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.health-card{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}.health-card>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:900}.health-card strong,.health-card small{display:block}.health-card small{margin-top:2px;color:var(--muted)}.health-pass>span{color:#087f5b;background:#e9fbf3}.health-warn>span{color:#9a6700;background:#fff4d1}.system-hero{background:linear-gradient(125deg,#1d3557,#3f618f)}
@media(max-width:1100px){.health-grid,.shift-metrics{grid-template-columns:repeat(2,1fr)}.audit-filters{grid-template-columns:repeat(2,1fr)}.split-payment-row{grid-template-columns:1fr 1fr}.split-payment-row input[name="split_reference[]"]{grid-column:1/-1}.two-one-grid,.label-layout{grid-template-columns:1fr}}
@media(max-width:700px){.counter-hero,.held-sale-strip{align-items:flex-start;flex-direction:column}.hero-number{text-align:left}.health-grid,.audit-filters,.shift-metrics{grid-template-columns:1fr}.split-payment-row{grid-template-columns:1fr}.split-payment-row input[name="split_reference[]"]{grid-column:auto}.label-sheet{padding:6px}.shift-pill{display:none}}

/* PharmaFlow v1.3 — smart data tools, imports, exports and branding */
.brand-mark-logo{overflow:hidden;padding:3px;background:#fff}.brand-mark-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:7px}
.medicine-data-tools{margin-bottom:18px;border-color:#c8e5df}.import-export-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:18px}.import-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(180px,.8fr) auto;gap:12px;align-items:end}.import-panel .btn{min-height:42px}.export-panel{padding:14px;border:1px solid var(--line);border-radius:12px;background:#f8fbfc}.export-panel>.button-row{margin-top:10px}.export-panel .inline-action-form,.record-actions .inline-action-form,.toolbar .inline-action-form{display:inline-block;min-width:0;padding:0;margin:0;border:0;border-radius:0;background:transparent}.import-history{display:grid;gap:5px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}.import-history>span{display:block;color:var(--muted);font-size:11px}.import-history b{color:var(--ink);font-weight:700}
.record-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:7px;margin:-4px 0 12px}.record-actions>span{margin-right:3px;color:var(--muted);font-size:12px;font-weight:700}
.smart-pagination{display:grid;grid-template-columns:minmax(165px,1fr) auto minmax(165px,1fr);align-items:center;gap:12px;padding:12px 15px;border-top:1px solid var(--line);background:#fbfcfd}.pagination-summary{display:flex;align-items:baseline;gap:5px;color:var(--muted);font-size:12px}.pagination-summary strong{color:var(--ink);font-size:13px}.pagination-pages{display:flex;align-items:center;justify-content:center;gap:5px}.page-button{display:grid;min-width:32px;height:32px;padding:0 8px;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff;text-decoration:none;font-size:12px;font-weight:750}.page-button:hover{border-color:#88cfc4;background:#f2fbf9}.page-button.active{border-color:var(--brand);color:#fff;background:var(--brand)}.page-button.disabled{pointer-events:none;opacity:.38}.page-ellipsis{display:grid;width:25px;height:32px;place-items:center;color:var(--muted)}.pagination-size{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:var(--muted);font-size:11px}.page-size-link{padding:5px 6px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:700}.page-size-link.active{color:var(--brand);background:#eaf8f5}
.report-brand-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 17px;padding:13px 16px;border:1px solid var(--line);border-radius:13px;background:#fff}.report-brand-identity{display:flex;align-items:center;gap:12px;min-width:0}.report-brand-logo{display:block;max-width:125px;max-height:50px;object-fit:contain}.report-brand-fallback{display:grid;width:42px;height:42px;place-items:center;border-radius:11px;color:#fff;background:var(--brand);font-size:25px;font-weight:900}.report-brand-identity strong,.report-brand-identity span{display:block}.report-brand-identity span,.report-brand-identity small,.report-brand-contact{color:var(--muted);font-size:11px}.report-brand-contact{text-align:right;line-height:1.55}
.company-logo-setting{padding-top:3px}.logo-upload-row{display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:13px}.company-logo-preview{display:grid;width:105px;height:70px;place-items:center;overflow:hidden;border:1px dashed #a9bec9;border-radius:12px;background:#f8fbfc;color:var(--brand);font-size:30px;font-weight:900}.company-logo-preview img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}.compact-check{margin-top:8px}.thermal-brand-logo{display:block;max-width:32mm;max-height:13mm;margin:0 auto 1.5mm;object-fit:contain}
@media(max-width:1100px){.import-export-grid{grid-template-columns:1fr}.import-panel{grid-template-columns:1fr 1fr}.import-panel .btn{grid-column:1/-1}.smart-pagination{grid-template-columns:1fr}.pagination-summary,.pagination-size{justify-content:center}}
@media(max-width:650px){.import-panel{grid-template-columns:1fr}.import-panel .btn{grid-column:auto}.record-actions{justify-content:flex-start}.report-brand-strip{align-items:flex-start;flex-direction:column}.report-brand-contact{text-align:left}.pagination-pages{max-width:100%;overflow-x:auto;justify-content:flex-start}.logo-upload-row{grid-template-columns:1fr}.company-logo-preview{width:100%;max-width:180px}}
@media print{.report-brand-strip{border:0;border-bottom:1px solid #bbb;border-radius:0;padding:0 0 10px;margin:0 0 12px}.report-brand-identity span,.report-brand-contact{color:#333!important}.report-brand-logo{max-height:42px}}

/* PharmaFlow v1.3.1 — comprehensive responsive application layer */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
.main-shell,.content,.card,.card-header,.card-body,.card-footer,
.page-grid>*,.grid-2>*,.grid-3>*,.metrics-grid>*,.form-grid>*,
.import-export-grid>*,.pos-layout>*,.receipt-station>*,.two-one-grid>* { min-width: 0; }
img,svg,video,canvas { max-width: 100%; }
.table-wrap {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #b8c8d4 transparent;
}
.table-wrap.is-scrollable-table { position: relative; }
.table-wrap.is-scrollable-table:focus { outline: 3px solid rgba(0,137,123,.12); outline-offset: -3px; }
.table-wrap.is-scrollable-table::-webkit-scrollbar { height: 8px; }
.table-wrap.is-scrollable-table::-webkit-scrollbar-thumb { border-radius: 99px; background: #b8c8d4; }
.table-wrap.is-scrollable-table::-webkit-scrollbar-track { background: transparent; }
.topbar-left>div,.sidebar-brand>span:last-child,.report-brand-identity>div { min-width: 0; }
.topbar h1,.breadcrumb,.sidebar-brand strong,.report-brand-identity strong,.report-brand-identity span { overflow-wrap: anywhere; }
.toolbar>* { min-width: 0; }
.toolbar form { max-width: 100%; }
.inline-form>* { min-width: 0; }
.input-with-button { min-width: 0; }
.alert>span { min-width: 0; overflow-wrap: anywhere; }
.card-header>div { min-width: 0; }
.chart-bars { max-width: 100%; overflow-x: auto; }
.app-footer { gap: 18px; }
.thermal-receipt { max-width: 100%; }
.inline-action-form { max-width: 100%; }

@media screen and (max-width: 1250px) {
    .page-grid,.page-grid.wide-form,.pos-layout { gap: 16px; }
    .pos-checkout-column { gap: 16px; }
    .content { padding-inline: clamp(18px,2.2vw,28px); }
}

@media screen and (max-width: 1000px) {
    .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .form-grid.cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .field-span-2 { grid-column: span 2; }
    .topbar-actions { gap: 9px; }
    .app-footer { flex-wrap: wrap; }
}

@media screen and (max-width: 900px) {
    body.sidebar-open { overflow: hidden; touch-action: none; }
    .sidebar { width: min(86vw,320px); max-width: 100%; }
    .sidebar-brand { min-height: 70px; padding: 12px 17px; }
    .sidebar-nav { padding-inline: 10px; }
    .topbar { min-height: 70px; gap: 10px; }
    .topbar-left { min-width: 0; flex: 1 1 auto; gap: 10px; }
    .topbar-actions { flex: 0 0 auto; }
    .topbar h1 { max-width: min(52vw,480px); line-height: 1.2; }
    .breadcrumb { max-width: min(52vw,480px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .content { padding: 18px 14px 28px; }
    .card-header { min-height: 58px; }
    .toolbar { align-items: stretch; }
    .toolbar form { flex: 1 1 100%; }
    .toolbar input,.toolbar select { min-width: 0; }
    .receipt-preview { max-width: 100%; }
}

@media screen and (max-width: 760px) {
    .topbar { align-items: flex-start; padding: 9px 12px; }
    .topbar-left { align-items: flex-start; }
    .topbar h1 { max-width: none; font-size: 18px; }
    .breadcrumb { max-width: 58vw; }
    .topbar-actions { padding-top: 1px; }
    .shift-pill { display: none; }
    .metrics-grid,.grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .page-grid,.grid-2,.two-one-grid,.label-layout,.import-export-grid { gap: 14px; }
    .card-header { align-items: flex-start; flex-wrap: wrap; }
    .card-header>.button-row,.card-header>form,.card-header>.inline-form { width: 100%; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar form,.inline-form { width: 100%; }
    .toolbar form>* { flex: 1 1 170px; }
    .record-actions { margin-top: 0; }
    .pos-command-shortcuts { display: none; }
    .pos-checkout-column { display: grid; grid-template-columns: 1fr; }
    .pos-checkout-column .pos-total-box { grid-column: auto; }
    .receipt-controls-body { grid-template-columns: 1fr; }
    .receipt-controls-body>* { grid-column: auto!important; }
    .settings-savebar { bottom: 8px; }
    .report-brand-strip { gap: 10px; }
}

@media screen and (max-width: 700px) {
    /* Read-only/register tables become touch-friendly cards. Entry tables keep horizontal scrolling. */
    .table-wrap.is-card-table { overflow: visible; }
    .responsive-card-table,
    .responsive-card-table tbody,
    .responsive-card-table tr,
    .responsive-card-table td { display: block; width: 100%; }
    .responsive-card-table thead { display: none; }
    .responsive-card-table tbody { padding: 10px; }
    .responsive-card-table tbody tr {
        margin: 0 0 10px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 5px 14px rgba(16,42,67,.045);
    }
    .responsive-card-table tbody tr:last-child { margin-bottom: 0; }
    .responsive-card-table tbody tr:hover { background: #fff; }
    .responsive-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(88px,.75fr) minmax(0,1.45fr);
        gap: 10px;
        align-items: start;
        min-height: 42px;
        padding: 9px 11px;
        border-bottom: 1px solid #edf2f6;
        text-align: left!important;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .responsive-card-table tbody td:last-child { border-bottom: 0; }
    .responsive-card-table tbody td::before {
        content: attr(data-label);
        color: #627d98;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .045em;
        line-height: 1.45;
        text-transform: uppercase;
    }
    .responsive-card-table .table-actions { justify-content: flex-start; flex-wrap: wrap; }
    .responsive-card-table .table-actions .btn { min-width: 76px; }
    .responsive-card-table .table-title,.responsive-card-table .table-subtitle { white-space: normal; overflow-wrap: anywhere; }
    .responsive-card-table tr.responsive-empty-row { border: 0; box-shadow: none; }
    .responsive-card-table tr.responsive-empty-row td { display: block; padding: 24px 14px; border: 0; text-align: center!important; }
    .responsive-card-table tr.responsive-empty-row td::before { display: none; }
    .responsive-scroll-table { width: max-content; min-width: 100%; }
    .responsive-scroll-table th,.responsive-scroll-table td { padding: 10px 11px; }
    .table-wrap.is-scrollable-table { border-radius: 0 0 var(--radius) var(--radius); }
    .table-wrap.is-scrollable-table::after {
        content: "Swipe table →";
        position: sticky;
        left: 10px;
        bottom: 4px;
        display: inline-block;
        margin: 4px 0 7px 10px;
        padding: 3px 7px;
        border-radius: 99px;
        color: #627d98;
        background: rgba(244,247,250,.94);
        font-size: 9px;
        font-weight: 750;
        pointer-events: none;
    }
    .smart-pagination { padding: 11px 10px; }
    .pagination-pages { width: 100%; padding-bottom: 2px; }
    .pagination-size { flex-wrap: wrap; }
    .report-brand-identity { width: 100%; }
    .report-brand-contact { max-width: 100%; overflow-wrap: anywhere; }
}

@media screen and (max-width: 650px) {
    .content { padding: 14px 9px 24px; }
    .topbar { min-height: 62px; }
    .topbar .btn { display: none; }
    .topbar h1 { font-size: 17px; }
    .breadcrumb { max-width: 62vw; font-size: 10px; }
    .card { border-radius: 12px; }
    .card-header,.card-body { padding: 13px; }
    .card-footer { padding: 12px 13px; }
    .card-header h2,.card-header h3 { font-size: 16px; }
    .metrics-grid,.grid-2,.grid-3,.form-grid,.form-grid.cols-3,.form-grid.cols-4 { grid-template-columns: 1fr; }
    .field-span-2,.field-span-full { grid-column: auto; }
    .metric-card { min-height: 106px; padding: 15px; }
    .metric-card strong { font-size: 20px; }
    .inline-form,.toolbar form { display: grid; grid-template-columns: 1fr; align-items: stretch; }
    .inline-form>div,.toolbar form>* { width: 100%; min-width: 0; }
    .input-with-button { display: grid; grid-template-columns: minmax(0,1fr) auto; }
    .import-panel { gap: 10px; }
    .button-row { width: 100%; }
    .button-row>.btn,.button-row>form { flex: 1 1 auto; }
    .record-actions { align-items: stretch; }
    .record-actions>span { flex-basis: 100%; }
    .pos-command-card { margin-bottom: 14px; }
    .pos-search .btn { width: 100%; }
    .pos-cart-footer { padding: 13px; }
    .quick-tender { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .split-payment-row { grid-template-columns: 1fr; }
    .split-payment-row .line-remove { width: 100%; }
    .held-sale-list { width: 100%; max-width: 100%; }
    .receipt-preview { padding: 12px 4px; }
    .app-footer { padding: 13px 10px; line-height: 1.6; }
    .logo-upload-row { grid-template-columns: 1fr; }
    .company-logo-preview { width: min(180px,100%); }
}

@media screen and (max-width: 480px) {
    body { font-size: 13px; }
    .sidebar { width: min(91vw,310px); }
    .sidebar-brand strong { font-size: 18px; }
    .brand-mark { width: 38px; height: 38px; }
    .topbar { gap: 7px; }
    .topbar-left { gap: 7px; }
    .topbar-actions { gap: 5px; }
    .icon-button { min-width: 34px; height: 34px; padding-inline: 7px; }
    .breadcrumb { max-width: 56vw; }
    .topbar h1 { font-size: 16px; }
    .content { padding-inline: 7px; }
    .metrics-grid,.data-points,.health-grid,.shift-metrics { grid-template-columns: 1fr; }
    .metric-card { min-height: 96px; }
    .card-header { min-height: 54px; gap: 9px; }
    .btn { min-height: 42px; }
    .button-row { display: grid; grid-template-columns: 1fr; }
    .button-row>.btn,.button-row>form,.button-row>form .btn { width: 100%; }
    .input-with-button { grid-template-columns: 1fr; }
    .input-with-button .btn { width: 100%; }
    .responsive-card-table tbody { padding: 7px; }
    .responsive-card-table tbody td { grid-template-columns: 82px minmax(0,1fr); gap: 8px; padding: 8px 9px; }
    .responsive-card-table .table-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .responsive-card-table .table-actions>* { min-width: 0; }
    .responsive-card-table .table-actions .btn { width: 100%; min-width: 0; }
    .pagination-summary { justify-content: center; flex-wrap: wrap; text-align: center; }
    .pagination-size { justify-content: center; }
    .page-button { min-width: 31px; }
    .pos-command-icon { width: 40px; height: 40px; }
    .pos-command-main h2 { font-size: 17px; }
    .pos-cart-metrics { grid-template-columns: 1fr; }
    .pos-cart-metrics div:last-child { grid-column: auto; }
    .quick-tender { grid-template-columns: 1fr; }
    .pos-total-line.grand { font-size: 18px; }
    .report-brand-identity { align-items: flex-start; }
    .report-brand-logo { max-width: 95px; }
    .login-page { padding: 8px; }
    .login-shell { border-radius: 16px; }
    .login-card { padding: 24px 17px; }
    .login-card h2 { font-size: 23px; }
    .receipt-specs { grid-template-columns: 1fr; }
    .label-sheet { justify-content: center; }
}

@media screen and (max-width: 360px) {
    .sidebar { width: 94vw; }
    .breadcrumb { display: none; }
    .topbar h1 { max-width: 58vw; }
    .content { padding-inline: 5px; }
    .card-header,.card-body,.card-footer { padding-inline: 11px; }
    .responsive-card-table tbody td { grid-template-columns: 1fr; gap: 3px; }
    .responsive-card-table tbody td::before { margin-bottom: 1px; }
    .responsive-card-table .table-actions { grid-template-columns: 1fr; }
    .smart-pagination { padding-inline: 7px; }
    .page-size-link { padding-inline: 5px; }
    .thermal-receipt { transform-origin: top center; }
}

@media screen and (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
    .sidebar-brand { min-height: 58px; padding-block: 8px; }
    .sidebar-nav { padding-top: 7px; }
    .nav-label { margin-top: 10px; }
    .nav-link { padding-block: 7px; }
    .sidebar-user { margin-block: 7px; padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; }
}


/* PharmaFlow v1.3.1 — GRN fit-to-screen layout
   Keeps every receiving field visible without a horizontal scrollbar. */
.grn-entry-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
}
.grn-entry-table {
    width: 100%;
    table-layout: fixed;
}
.grn-entry-table th,
.grn-entry-table td {
    min-width: 0;
    padding: 8px 5px;
}
.grn-entry-table th {
    white-space: normal;
    line-height: 1.15;
    letter-spacing: .035em;
    overflow-wrap: anywhere;
}
.grn-entry-table td {
    white-space: normal;
}
.grn-entry-table .table-input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 6px 5px;
    border-radius: 7px;
    font-size: 12px;
}
.grn-entry-table input[type="date"].table-input {
    padding-inline: 4px;
    font-size: 11px;
}
.grn-entry-table th:nth-child(1) { width: 14%; }
.grn-entry-table th:nth-child(2) { width: 7%; }
.grn-entry-table th:nth-child(3) { width: 8%; }
.grn-entry-table th:nth-child(4) { width: 8%; }
.grn-entry-table th:nth-child(5),
.grn-entry-table th:nth-child(6) { width: 12%; }
.grn-entry-table th:nth-child(n+7) { width: 7.8%; }
.grn-entry-table .table-title,
.grn-entry-table .table-subtitle {
    white-space: normal;
    overflow-wrap: anywhere;
}
.grn-entry-table .table-title { line-height: 1.2; }

/* The GRN receive workspace needs more horizontal room than the generic
   page + sidebar layout. Keep Open POs below the form on ordinary screens. */
@media screen and (max-width: 1550px) {
    .grn-page-grid { grid-template-columns: minmax(0,1fr); }
}

/* On narrower screens use a two-row field grid for each medicine instead of
   introducing a horizontal scroller. */
@media screen and (max-width: 1080px) {
    .grn-entry-wrap { overflow: visible !important; }
    .grn-entry-table,
    .grn-entry-table tbody { display: block; width: 100%; }
    .grn-entry-table thead { display: none; }
    .grn-entry-table tbody {
        display: grid;
        gap: 10px;
        padding: 0;
    }
    .grn-entry-table tbody tr {
        display: grid;
        grid-template-columns: repeat(6,minmax(0,1fr));
        width: 100%;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: #fff;
    }
    .grn-entry-table tbody tr:hover { background: #fff; }
    .grn-entry-table tbody td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 8px;
        border-right: 1px solid #edf2f5;
        border-bottom: 1px solid #edf2f5;
    }
    .grn-entry-table tbody td:nth-child(1) { grid-column: span 2; }
    .grn-entry-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin: 0 0 5px;
        color: #486581;
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .055em;
        line-height: 1.15;
        text-transform: uppercase;
    }
    .grn-entry-table tbody td:nth-child(6),
    .grn-entry-table tbody td:last-child { border-right: 0; }
    .grn-entry-table .table-input {
        min-height: 38px;
        font-size: 12px;
    }
    .grn-entry-table input[type="date"].table-input { font-size: 11px; }
}

@media screen and (max-width: 760px) {
    .grn-entry-table tbody tr { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .grn-entry-table tbody td:nth-child(1) { grid-column: 1 / -1; }
    .grn-entry-table tbody td { border-right: 1px solid #edf2f5; }
    .grn-entry-table tbody td:nth-child(3n+1) { border-right: 0; }
    .grn-entry-table tbody td:nth-child(1) { border-right: 0; }
}

@media screen and (max-width: 480px) {
    .grn-entry-table tbody tr { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .grn-entry-table tbody td:nth-child(1) { grid-column: 1 / -1; }
    .grn-entry-table tbody td { border-right: 1px solid #edf2f5; }
    .grn-entry-table tbody td:nth-child(odd):not(:first-child) { border-right: 0; }
    .grn-entry-table tbody td::before { font-size: 8.5px; }
    .grn-entry-table .table-input { min-height: 40px; }
}

@media screen and (max-width: 340px) {
    .grn-entry-table tbody tr { grid-template-columns: 1fr; }
    .grn-entry-table tbody td,
    .grn-entry-table tbody td:nth-child(1) { grid-column: 1; border-right: 0; }
}
.grn-entry-wrap.is-scrollable-table::after { display: none !important; content: none !important; }

/* v1.3.1 remote lookup controls */
.remote-lookup-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: center;
}
.remote-medicine-cell { min-width: 150px; }
.remote-medicine-cell input { width: 100%; }
.selection-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}
.selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 9px;
    border: 1px solid #cfe6df;
    border-radius: 999px;
    background: #eef9f5;
    color: #163b35;
    font-size: 12px;
    font-weight: 700;
}
.selection-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.selection-chip button {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #a51d2d;
    cursor: pointer;
    font-weight: 900;
    line-height: 1;
}
@media screen and (max-width: 520px) {
    .remote-lookup-row { grid-template-columns: 1fr; }
    .remote-lookup-row .btn { width: 100%; }
    .selection-chip { width: 100%; justify-content: space-between; border-radius: 10px; }
}

/* v1.3.1 shift-control usability + admin correction */
.shift-hero { margin-bottom: 12px; }
.shift-guide {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin: 0 0 18px;
}
.shift-guide-step {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #d8e8e4;
    border-radius: 12px;
    background: linear-gradient(180deg,#fff,#f8fcfb);
}
.shift-guide-step > span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--brand);
    font-size: 12px;
    font-weight: 850;
}
.shift-guide-step strong,.shift-guide-step small { display:block; }
.shift-guide-step strong { font-size: 13px; }
.shift-guide-step small { margin-top:1px; color:var(--muted); font-size:11px; line-height:1.35; }
.shift-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -5px 0 18px;
    padding: 11px 14px;
    border: 1px solid #ffd7d2;
    border-left: 4px solid var(--red);
    border-radius: 10px;
    color: #7c261f;
    background: #fff7f6;
}
.shift-warning strong { white-space:nowrap; }
.shift-warning span { color:#8c4039; font-size:12px; }
.shift-workspace { align-items:start; }
.shift-ledger-card { overflow:hidden; }
.shift-ledger-header { align-items:flex-start; }
.shift-ledger-key,.reorder-legend {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}
.dot { display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:50%; background:#94a3b8; }
.dot.automatic { background:#4f78a5; }
.dot.manual { background:#0f9d8b; }
.dot.danger { background:var(--red); }
.dot.warning { background:var(--amber); }
.shift-ledger-table td { vertical-align:middle; }
.shift-ledger-table .drawer-row-manual { background:#fbfffd; }
.shift-ledger-table .drawer-row-manual:hover { background:#f4fbf8; }
.drawer-source-badge,.protected-chip {
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:3px 8px;
    border:1px solid #d7e3ec;
    border-radius:999px;
    color:#526b7e;
    background:#f8fafc;
    font-size:10px;
    font-weight:800;
    line-height:1.1;
}
.drawer-source-badge.manual { color:#087463; border-color:#c6e8df; background:#edf9f5; }
.drawer-source-badge.automatic { color:#42698f; border-color:#d8e5f1; background:#f1f6fb; }
.protected-chip { color:#687b8e; background:#f5f7f9; }
.btn-danger-outline {
    color:#b42318;
    border-color:#f1b8b3;
    background:#fff;
}
.btn-danger-outline:hover { color:#fff; border-color:#c9332b; background:#c9332b; }
.shift-ledger-footer {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding-block:11px;
}
.shift-ledger-footer > span {
    flex:0 0 auto;
    padding:3px 7px;
    border-radius:999px;
    color:#7a5a00;
    background:#fff2c7;
    font-size:10px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.shift-ledger-footer p { margin:1px 0 0; color:var(--muted); font-size:11px; }
.form-eyebrow { color:#0e8d7c !important; letter-spacing:.12em; }
.danger-eyebrow { color:#b42318 !important; letter-spacing:.12em; }
.shift-action-card .card-header { align-items:flex-start; }
.shift-action-card .stack-form { gap:13px; }
.shift-control-stack textarea { min-height:88px; }

.approval-dialog {
    width:min(560px,calc(100vw - 28px));
    max-height:calc(100vh - 28px);
    padding:0;
    border:0;
    border-radius:16px;
    background:transparent;
    box-shadow:0 28px 80px rgba(11,36,56,.32);
}
.approval-dialog::backdrop { background:rgba(5,22,34,.58); backdrop-filter:blur(3px); }
.approval-dialog-card { overflow:hidden; border:1px solid #e2e8ef; border-radius:16px; background:#fff; }
.approval-dialog-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    padding:18px 20px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#fff,#fff9f8);
}
.approval-dialog-header > div { display:flex; align-items:center; gap:12px; }
.approval-dialog-header h2 { margin:1px 0 0; font-size:19px; }
.approval-lock { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:#a62921; background:#ffe9e7; font-size:19px; font-weight:900; }
.dialog-close { width:34px; height:34px; border:0; border-radius:9px; color:#526b7e; background:#f2f5f7; cursor:pointer; font-size:22px; line-height:1; }
.approval-dialog-body { display:grid; gap:14px; padding:18px 20px; }
.approval-target { padding:10px 12px; border:1px solid #dbe7ef; border-radius:10px; color:#173f5c; background:#f7fafc; font-weight:800; }
.warning-callout { border-left:4px solid var(--amber); background:#fff8e7; }
.warning-callout strong { display:block; margin-bottom:2px; color:#7a5700; }
.approval-dialog-footer { display:flex; justify-content:flex-end; gap:9px; padding:14px 20px; border-top:1px solid var(--line); background:#fbfcfd; }

/* v1.3.1 professional reorder centre */
.reorder-centre { overflow:hidden; margin-bottom:20px; border-color:#d4e7e2; }
.reorder-header { align-items:flex-start; background:linear-gradient(120deg,#fbfffe,#f1faf7); }
.reorder-header > div { max-width:850px; }
.reorder-eyebrow { color:#078a78 !important; }
.reorder-count-badge {
    flex:0 0 auto;
    padding:7px 11px;
    border:1px solid #bfe1d8;
    border-radius:999px;
    color:#087463;
    background:#eaf8f4;
    font-size:11px;
    font-weight:850;
}
.reorder-body { display:grid; gap:14px; }
.reorder-kpis {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}
.reorder-kpi {
    display:block;
    min-width:0;
    padding:13px 14px;
    border:1px solid #dbe7e4;
    border-radius:12px;
    color:inherit;
    background:#fbfefd;
    text-decoration:none;
    transition:.15s ease;
}
a.reorder-kpi:hover { transform:translateY(-1px); border-color:#8bcfc2; box-shadow:0 8px 18px rgba(16,42,67,.06); }
.reorder-kpi.active { border-color:#5ec1b2; box-shadow:inset 0 0 0 1px #5ec1b2; background:#f2fbf8; }
.reorder-kpi.danger { border-left:4px solid var(--red); }
.reorder-kpi.warning { border-left:4px solid var(--amber); }
.reorder-kpi.muted { border-left:4px solid #94a3b8; background:#f8fafc; }
.reorder-kpi span,.reorder-kpi small { display:block; }
.reorder-kpi span { color:var(--muted); font-size:11px; font-weight:750; }
.reorder-kpi strong { display:block; margin:2px 0 1px; font-size:21px; letter-spacing:-.35px; }
.reorder-kpi small { color:#7b8fa2; font-size:10px; line-height:1.35; }
.reorder-guidance {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:11px 13px;
    border:1px solid #eadfb9;
    border-radius:10px;
    color:#65511b;
    background:#fffaf0;
    font-size:11px;
}
.reorder-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:2px;
}
.reorder-search-form { display:flex; flex:1; align-items:center; gap:8px; min-width:0; }
.reorder-search-box { position:relative; min-width:260px; max-width:520px; flex:1; }
.reorder-search-box > span { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:#7790a4; pointer-events:none; }
.reorder-search-box input { padding-left:31px; }
.reorder-table-wrap { overflow-x:hidden; }
.reorder-table { table-layout:fixed; }
.reorder-table th:nth-child(1){width:27%}.reorder-table th:nth-child(2){width:19%}.reorder-table th:nth-child(3){width:22%}.reorder-table th:nth-child(4){width:16%}.reorder-table th:nth-child(5){width:16%}
.reorder-table td { white-space:normal; }
.reorder-health-line { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.reorder-health-line strong { font-size:15px; }
.reorder-health-line span { color:var(--muted); font-size:10px; font-weight:750; }
.reorder-progress { height:6px; margin-top:7px; overflow:hidden; border-radius:999px; background:#edf2f6; }
.reorder-progress > span { display:block; height:100%; min-width:3px; border-radius:inherit; background:var(--brand); }
.reorder-progress > span.danger { background:var(--red); }
.reorder-progress > span.warning { background:var(--amber); }
.reorder-actions { flex-wrap:wrap; }
.reorder-footer {
    display:grid;
    grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr);
    align-items:center;
    gap:12px;
    padding:11px 15px;
    border-top:1px solid var(--line);
    background:#fbfcfd;
}
.reorder-page-controls { display:flex; align-items:center; justify-content:center; gap:7px; }
.reorder-page-label { min-width:92px; color:var(--muted); text-align:center; font-size:11px; font-weight:700; }

@media screen and (max-width: 1200px) {
    .reorder-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .reorder-table th:nth-child(1){width:25%}.reorder-table th:nth-child(2){width:18%}.reorder-table th:nth-child(3){width:22%}.reorder-table th:nth-child(4){width:17%}.reorder-table th:nth-child(5){width:18%}
}
@media screen and (max-width: 900px) {
    .shift-guide { grid-template-columns:1fr; }
    .shift-guide-step { padding-block:10px; }
    .shift-warning { align-items:flex-start; flex-direction:column; gap:3px; }
    .shift-warning strong { white-space:normal; }
    .shift-ledger-key { display:none; }
    .reorder-toolbar,.reorder-guidance { align-items:stretch; flex-direction:column; }
    .reorder-search-form { width:100%; }
    .reorder-search-box { max-width:none; }
    .reorder-legend { align-self:flex-start; }
    .reorder-footer { grid-template-columns:1fr; }
    .reorder-footer .pagination-summary,.reorder-footer .pagination-size { justify-content:center; }
}
@media screen and (max-width: 700px) {
    .shift-ledger-footer { flex-direction:column; }
    .approval-dialog-header,.approval-dialog-body,.approval-dialog-footer { padding-left:15px; padding-right:15px; }
    .approval-dialog-footer { flex-direction:column-reverse; }
    .approval-dialog-footer .btn { width:100%; }
    .reorder-kpis { grid-template-columns:1fr 1fr; }
    .reorder-search-form { flex-wrap:wrap; }
    .reorder-search-box { flex-basis:100%; min-width:0; }
    .reorder-search-form .btn { flex:1; }
    .reorder-table-wrap { overflow:visible; }
    .reorder-table.responsive-card-table tbody tr { margin:0 10px 10px; border:1px solid var(--line); border-radius:11px; box-shadow:none; }
    .reorder-actions { justify-content:flex-start; }
}
@media screen and (max-width: 480px) {
    .reorder-kpis { grid-template-columns:1fr; }
    .reorder-header { align-items:flex-start; flex-direction:column; }
    .reorder-count-badge { align-self:flex-start; }
    .shift-guide-step small { font-size:10px; }
}
.drawer-protected-actions { align-items:center; flex-wrap:wrap; }
.source-review-link { color:#42698f; font-size:10px; font-weight:750; text-decoration:none; }
.source-review-link:hover { text-decoration:underline; }

/* v1.3.1 Fresh Start + Medicine Master fit + SweetAlert-style warnings */
.products-page-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(420px, 520px);
}
.product-catalogue-card { min-width:0; overflow:hidden; }
.product-catalogue-header { align-items:flex-end; }
.product-search-form { flex:0 1 520px; justify-content:flex-end; }
.product-search-form input { min-width:250px; }
.product-catalogue-wrap { overflow:hidden; }
.product-catalogue-table { width:100%; table-layout:fixed; }
.product-catalogue-table th:nth-child(1) { width:37%; }
.product-catalogue-table th:nth-child(2) { width:20%; }
.product-catalogue-table th:nth-child(3) { width:18%; }
.product-catalogue-table th:nth-child(4) { width:25%; }
.product-catalogue-table th,
.product-catalogue-table td { white-space:normal; }
.product-name-cell,.product-code-cell,.product-rule-cell { overflow-wrap:anywhere; }
.product-manufacturer { margin-top:4px; color:#526b7e; }
.product-stock-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.product-stock-grid > span {
    min-width:0;
    padding:7px 8px;
    border:1px solid #e5edf3;
    border-radius:9px;
    background:#f9fbfc;
    text-align:right;
}
.product-stock-grid small { display:block; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.product-stock-grid strong { display:block; margin-top:2px; font-size:13px; }
.product-rule-cell { vertical-align:top; }
.product-badges { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; margin-bottom:8px; }
.product-row-actions { flex-wrap:wrap; }
.product-row-actions form { margin:0; }
.product-row-actions .btn { min-width:64px; }
.products-editor { min-width:0; }

.fresh-start-zone {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
    padding:14px 16px;
    border-color:#f0c4bf;
    background:linear-gradient(115deg,#fff,#fff8f7);
    box-shadow:none;
}
.fresh-start-copy { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.product-reset-copy > div { min-width:0; }
.fresh-start-copy strong { display:block; color:#7f2a23; font-size:13px; }
.fresh-start-copy p { max-width:980px; margin:3px 0 0; color:#7b6670; font-size:11px; line-height:1.5; }
.reset-shield {
    display:grid;
    flex:0 0 34px;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:10px;
    color:#a62921;
    background:#ffe8e5;
    font-weight:900;
}
.fresh-start-dialog { width:min(700px,calc(100vw - 28px)); }
.reset-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.reset-summary-grid > div { padding:12px; border:1px solid #dfe7ee; border-radius:11px; background:#fafcfd; }
.reset-summary-grid > div:first-child { border-color:#f2c9c5; background:#fff8f7; }
.reset-summary-grid span,.reset-summary-grid strong,.reset-summary-grid small { display:block; }
.reset-summary-grid span { color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.reset-summary-grid strong { margin:3px 0; font-size:13px; }
.reset-summary-grid small { color:#687d8f; line-height:1.45; }
.reset-backup-note { display:grid; gap:2px; padding:11px 12px; border-radius:10px; }
.reset-backup-note span { color:#715d24; font-size:11px; line-height:1.45; }
.reset-ack { display:flex; align-items:flex-start; gap:9px; margin:0; padding:11px 12px; border:1px solid #efc9c5; border-radius:10px; color:#6f342f; background:#fff8f7; }
.reset-ack input { flex:0 0 auto; width:17px; min-height:17px; margin-top:1px; }
.reset-ack span { font-size:11px; line-height:1.45; }

/* SweetAlert-style, locally rendered confirmations (no blocking browser popup). */
.pf-swal-dialog {
    width:min(470px,calc(100vw - 28px));
    padding:0;
    border:0;
    border-radius:18px;
    background:transparent;
    box-shadow:0 24px 80px rgba(7,29,46,.32);
}
.pf-swal-dialog::backdrop { background:rgba(4,22,35,.52); backdrop-filter:blur(2px); }
.pf-swal-card { padding:26px 26px 20px; border:1px solid #e0e8ef; border-radius:18px; background:#fff; text-align:center; }
.pf-swal-icon {
    display:grid;
    width:62px;
    height:62px;
    place-items:center;
    margin:0 auto 13px;
    border:4px solid #f3bf66;
    border-radius:50%;
    color:#b67813;
    font-size:32px;
    font-weight:600;
    line-height:1;
}
.pf-swal-dialog[data-tone="danger"] .pf-swal-icon { color:#c9372c; border-color:#f2a7a0; }
.pf-swal-card h2 { margin:0; color:#15324a; font-size:21px; }
.pf-swal-card p { margin:8px auto 20px; color:#61788b; font-size:13px; line-height:1.55; }
.pf-swal-actions { display:flex; justify-content:center; gap:9px; }
.pf-swal-actions .btn { min-width:116px; }

.pf-toast-host {
    position:fixed;
    z-index:1800;
    top:16px;
    right:18px;
    display:grid;
    gap:10px;
    width:min(520px,calc(100vw - 36px));
    max-width:calc(100vw - 36px);
    pointer-events:none;
}
.pf-swal-toast {
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 30px;
    align-items:start;
    column-gap:11px;
    width:100%;
    min-width:0;
    padding:13px 14px;
    border:1px solid #dce7ee;
    border-radius:14px;
    background:#fff;
    box-shadow:0 16px 42px rgba(8,35,52,.18);
    animation:pfToastIn .2s ease-out;
    pointer-events:auto;
}
.pf-swal-toast.is-leaving { opacity:0; transform:translateY(-6px); transition:.2s ease; }
.pf-swal-toast .pf-toast-icon {
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:50%;
    color:#42698f;
    background:#edf4fa;
    font-weight:900;
    line-height:1;
}
.pf-toast-copy {
    display:block;
    min-width:0;
    width:100%;
    padding-top:1px;
}
.pf-toast-copy strong,.pf-toast-copy span { display:block; width:100%; }
.pf-toast-copy strong { margin:0 0 2px; color:#18364d; font-size:12px; line-height:1.35; }
.pf-toast-copy span {
    color:#526d82;
    font-size:13px;
    line-height:1.45;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
    hyphens:none;
}
.pf-swal-toast > button {
    display:grid;
    width:30px;
    height:30px;
    place-items:center;
    align-self:start;
    padding:0;
    border:0;
    border-radius:8px;
    color:#7890a4;
    background:transparent;
    cursor:pointer;
    font-size:20px;
    line-height:1;
}
.pf-swal-toast > button:hover { color:#18364d; background:#f1f5f8; }
.pf-swal-toast-success { border-left:4px solid #18a777; }
.pf-swal-toast-warning { border-left:4px solid #e3a008; }
.pf-swal-toast-danger { border-left:4px solid #d64545; }
.pf-swal-toast-success .pf-toast-icon { color:#087f5b; background:#e8f7f0; }
.pf-swal-toast-warning .pf-toast-icon { color:#9a6700; background:#fff2cc; }
.pf-swal-toast-danger .pf-toast-icon { color:#b42318; background:#ffebe9; }
@keyframes pfToastIn { from { opacity:0; transform:translateY(-8px) scale(.985); } to { opacity:1; transform:none; } }

@media screen and (max-width: 1700px) {
    .products-page-grid { grid-template-columns:1fr; }
    .products-editor { width:100%; }
}
@media screen and (max-width: 900px) {
    .product-catalogue-header { align-items:stretch; flex-direction:column; }
    .product-search-form { width:100%; flex:1 1 auto; justify-content:stretch; }
    .product-search-form input { min-width:0; flex:1; }
    .fresh-start-zone { align-items:flex-start; flex-direction:column; }
    .fresh-start-zone > .btn { width:100%; }
    .reset-summary-grid { grid-template-columns:1fr; }
}
@media screen and (max-width: 700px) {
    .product-catalogue-wrap { overflow:visible; }
    .product-catalogue-table.responsive-card-table .product-stock-grid { grid-template-columns:1fr 1fr; }
    .product-badges,.product-row-actions { justify-content:flex-start; }
    .pf-toast-host { top:10px; right:10px; width:calc(100vw - 20px); max-width:calc(100vw - 20px); }
    .pf-swal-card { padding:22px 16px 16px; }
    .pf-swal-actions { flex-direction:column-reverse; }
    .pf-swal-actions .btn { width:100%; }
}
@media screen and (max-width: 420px) {
    .product-stock-grid { grid-template-columns:1fr; }
    .product-search-form { display:grid; grid-template-columns:1fr 1fr; }
    .product-search-form input { grid-column:1/-1; }
}


/* Health & Recovery action guidance and protected fresh-start placement */
.health-guidance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:14px 0 18px; }
.health-guidance-card { display:grid; grid-template-columns:42px minmax(0,1fr); gap:13px; align-items:start; padding:17px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(12,45,66,.05); }
.health-guidance-card h3 { margin:1px 0 7px; color:var(--ink); font-size:16px; }
.health-guidance-card p { margin:0 0 9px; color:var(--muted); line-height:1.55; }
.health-guidance-card .eyebrow { margin-bottom:3px; font-size:10px; }
.health-guidance-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; font-weight:900; }
.health-guidance-warning { border-color:#f0d9a0; background:linear-gradient(135deg,#fffdf7,#fff); }
.health-guidance-warning .health-guidance-icon { color:#9a6700; background:#fff0c2; }
.health-guidance-info { border-color:#c7dff3; background:linear-gradient(135deg,#f7fbff,#fff); }
.health-guidance-info .health-guidance-icon { color:#245b8f; background:#e5f2fb; }
.fresh-start-zone { margin-top:18px; border-color:#f0b7b2; background:linear-gradient(135deg,#fff9f8,#fff); }
.fresh-start-copy { display:flex; gap:13px; align-items:flex-start; }
.fresh-start-copy .reset-shield { flex:0 0 auto; }
.fresh-start-copy strong { display:block; margin:1px 0 5px; font-size:15px; color:#7f1d1d; }
.fresh-start-copy p { margin:0; color:#785d5a; line-height:1.55; }
@media screen and (max-width: 900px) { .health-guidance-grid { grid-template-columns:1fr; } }

/* v1.3.2 final production polish — calm motion, scalable expiry/payment workflows */
@keyframes pfPageRise {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes pfLookupPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(14,145,132,.08); }
    50% { box-shadow:0 0 0 4px rgba(14,145,132,.12); }
}
.content > section,
.content > article,
.content > .grid-2,
.content > .grid-3,
.content > .dashboard-grid,
.content > .products-page-grid {
    animation:pfPageRise .34s cubic-bezier(.2,.7,.2,1) both;
}
.content > :nth-child(2) { animation-delay:.035s; }
.content > :nth-child(3) { animation-delay:.07s; }
.content > :nth-child(4) { animation-delay:.105s; }
.metric-card,.reorder-kpi,.health-check,.card { transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.metric-card:hover,.reorder-kpi:hover { transform:translateY(-2px); }
.btn { transition:transform .12s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease; }
.btn:not(:disabled):active { transform:translateY(1px) scale(.99); }
.lookup-loading { animation:pfLookupPulse .8s ease-in-out infinite; cursor:progress; }
.expiry-queue-header { align-items:flex-end; }
.expiry-toolbar { padding:12px 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fbfcfd; }
.expiry-filter-form { display:grid; grid-template-columns:minmax(240px,1fr) minmax(170px,230px) auto auto; gap:8px; align-items:center; }
.field-help { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.45; }
@media screen and (max-width:760px) {
    .expiry-filter-form { grid-template-columns:1fr 1fr; }
    .expiry-filter-form input { grid-column:1 / -1; }
}
@media screen and (max-width:480px) {
    .expiry-filter-form { grid-template-columns:1fr; }
    .expiry-filter-form input { grid-column:auto; }
    .expiry-filter-form .btn { width:100%; }
}
@media print {
    .content > section,.content > article,.content > .grid-2,.content > .grid-3,.content > .dashboard-grid,.content > .products-page-grid { animation:none!important; }
}

/* PharmaFlow strong responsive production build — 14-inch laptop through mobile.
   The breakpoints below account for the fixed navigation width, not only the raw viewport. */
@media screen and (min-width:1121px) and (max-width:1560px) {
    :root { --sidebar-width:220px; --content-gutter:16px; }
    body { font-size:13px; }
    .sidebar-brand { min-height:68px; gap:9px; padding:11px 14px; }
    .sidebar-brand strong { font-size:17px; letter-spacing:-.2px; }
    .sidebar-brand small,.sidebar-user small { font-size:9px; }
    .brand-mark { width:38px; height:38px; border-radius:10px; font-size:23px; }
    .sidebar-nav { padding:9px 8px 12px; scrollbar-width:thin; }
    .nav-label { margin:12px 9px 5px; font-size:9px; }
    .nav-link { gap:8px; padding:7px 9px; border-radius:8px; font-size:12px; }
    .nav-icon { width:20px; height:20px; font-size:14px; }
    .sidebar-user { gap:8px; margin:8px; padding:9px; }
    .sidebar-user strong { max-width:132px; font-size:12px; }
    .avatar { width:32px; height:32px; }

    .topbar { min-height:66px; gap:10px; padding:9px 16px; }
    .topbar-left,.topbar-actions { gap:9px; }
    .topbar h1 { font-size:19px; line-height:1.2; }
    .breadcrumb { font-size:10px; }
    .today { font-size:11px; }
    .icon-button { min-width:34px; height:34px; }
    .shift-pill { padding:6px 8px; font-size:10px; }
    .topbar .btn-sm { min-height:34px; padding:7px 10px; font-size:11px; }

    .content { max-width:none; padding-top:16px; padding-bottom:28px; }
    .app-footer { padding:13px 16px; font-size:10px; }
    .card { border-radius:12px; }
    .card-header { min-height:56px; gap:10px; padding:12px 14px; }
    .card-header h2,.card-header h3 { font-size:15px; }
    .card-header p { font-size:10px; }
    .card-body { padding:14px; }
    .card-footer { padding:11px 14px; }
    .section-gap,.stack { gap:14px; }
    .section-gap { margin-top:14px; }
    .page-grid { grid-template-columns:minmax(0,1fr) minmax(300px,340px); gap:14px; }
    .page-grid.wide-form { grid-template-columns:minmax(0,1fr) minmax(350px,390px); gap:14px; }
    .grid-2,.grid-3 { gap:14px; }
    .metrics-grid { gap:10px; margin-bottom:14px; }
    .metric-card { min-height:105px; padding:14px; }
    .metric-card .metric-icon { width:32px; height:32px; margin-bottom:8px; font-size:15px; }
    .metric-card strong { font-size:18px; }

    th,td { padding:9px 10px; }
    th { font-size:9px; }
    .table-title { font-size:12px; }
    .table-subtitle { font-size:10px; }
    .toolbar { gap:7px; }
    .toolbar input,.toolbar select { min-width:120px; }
    .btn { min-height:36px; padding:8px 11px; }
    .btn-sm { min-height:31px; padding:6px 9px; font-size:11px; }
    input,select,textarea { min-height:37px; padding:8px 9px; }
    .form-grid { gap:10px; }

    /* Keep POS operational on common 1366x768 / 1440x900 workstations. */
    .pos-layout { grid-template-columns:minmax(0,1fr) minmax(310px,340px); gap:14px; }
    .pos-command-card { margin-bottom:13px; padding:12px 14px; }
    .pos-command-icon { width:39px; height:39px; }
    .pos-command-main h2 { font-size:17px; }
    .pos-command-main p:not(.eyebrow) { font-size:10px; }
    .pos-command-shortcuts { gap:6px 9px; font-size:9px; }
    kbd { min-width:20px; height:19px; font-size:9px; }
    .pos-search-panel { padding-bottom:12px; }
    .pos-search-input input,.pos-search .btn { min-height:43px; }
    .pos-cart-table table { min-width:680px; }
    .pos-cart-table td { padding-top:10px; padding-bottom:10px; }
    .pos-cart-table .table-input { min-width:64px; max-width:86px; }
    .pos-cart-footer { padding:11px 13px 13px; }
    .pos-cart-metrics div { padding:8px 9px; }
    .pos-cart-metrics strong { font-size:14px; }
    .pos-checkout-column {
        top:78px;
        gap:12px;
        max-height:calc(100vh - 92px);
        overflow-y:auto;
        overflow-x:hidden;
        padding-right:4px;
        overscroll-behavior:contain;
        scrollbar-width:thin;
        scrollbar-color:#aac0cd transparent;
    }
    .pos-checkout-column::-webkit-scrollbar { width:7px; }
    .pos-checkout-column::-webkit-scrollbar-thumb { border-radius:99px; background:#aac0cd; }
    .pos-customer-quick-grid { grid-template-columns:1fr; }
    .pos-total-box { padding:15px; }
    .pos-total-line { padding:4px 0; }
    .pos-total-line.grand { padding-top:11px; font-size:18px; }
    .split-payment-row { grid-template-columns:minmax(0,1fr) 86px auto; }
    .split-payment-row input[name="split_reference[]"] { grid-column:1 / -1; }
    .quick-tender { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .pos-checkout-footer { padding:11px 14px 13px; }
    .pos-checkout-footer .btn { min-height:43px; }

    .counter-hero { padding:18px 20px; margin-bottom:14px; }
    .counter-hero h2 { font-size:21px; }
    .health-grid { gap:9px; }
    .health-card { padding:11px; }
    .report-brand-strip { padding:10px 12px; }
    .smart-pagination { padding:9px 11px; }
}

/* Very narrow laptop / large tablet: reclaim the entire viewport from the fixed sidebar. */
@media screen and (max-width:1120px) {
    :root { --sidebar-width:0px; --content-gutter:14px; }
    .sidebar { width:min(86vw,320px); transform:translateX(-101%); }
    body.sidebar-open .sidebar { transform:translateX(0); }
    .main-shell { width:100%; margin-left:0; }
    .sidebar-toggle { display:grid; }
    body.sidebar-open { overflow:hidden; touch-action:none; }
    body.sidebar-open .sidebar-overlay { position:fixed; inset:0; z-index:40; display:block; background:rgba(7,28,43,.45); }
    .topbar { padding-inline:14px; }
    .content { max-width:none; padding-inline:var(--content-gutter); }
    .today { display:none; }
    .page-grid,.page-grid.wide-form,.pos-layout { grid-template-columns:1fr; }
    .pos-checkout-column { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; overflow:visible; padding-right:0; }
    .pos-checkout-column .pos-total-box { grid-column:1 / -1; }
    .pos-cart-table table { min-width:700px; }
    .receipt-station { grid-template-columns:1fr; }
    .receipt-controls { position:static; }
}

@media screen and (max-width:900px) {
    :root { --content-gutter:12px; }
    .topbar { padding-inline:12px; }
    .content { padding-top:14px; padding-bottom:24px; }
    .grid-3,.metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .form-grid.cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .field-span-2 { grid-column:span 2; }
    .pos-cart-table table { min-width:660px; }
}

@media screen and (max-width:760px) {
    :root { --content-gutter:10px; }
    .grid-2,.grid-3,.page-grid,.page-grid.wide-form,.two-one-grid,.label-layout,.metrics-grid { grid-template-columns:1fr; }
    .form-grid,.form-grid.cols-3,.form-grid.cols-4 { grid-template-columns:1fr; }
    .field-span-2 { grid-column:span 1; }
    .pos-checkout-column { grid-template-columns:1fr; }
    .pos-checkout-column .pos-total-box { grid-column:auto; }
    .pos-cart-table { scrollbar-gutter:stable both-edges; }
    .pos-cart-table table { min-width:620px; }
    .held-sale-list { max-width:100%; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
    .chart-bars { scrollbar-gutter:stable; }
}

@media screen and (max-width:560px) {
    :root { --content-gutter:7px; }
    .topbar { min-height:60px; padding:7px 8px; }
    .topbar h1 { font-size:16px; }
    .card-header,.card-body,.card-footer { padding-inline:11px; }
    .pos-cart-table table { min-width:570px; }
    .pos-search-input input { padding-left:38px; }
    .smart-pagination { gap:8px; }
}

/* Short laptop screens need denser vertical rhythm and dedicated scrolling surfaces. */
@media screen and (min-width:1121px) and (max-height:820px) {
    .sidebar-brand { min-height:60px; padding-block:8px; }
    .sidebar-nav { padding-top:5px; }
    .nav-label { margin-top:9px; }
    .nav-link { padding-top:6px; padding-bottom:6px; }
    .sidebar-user { margin-top:6px; margin-bottom:6px; padding-top:7px; padding-bottom:7px; }
    .topbar { min-height:60px; padding-top:7px; padding-bottom:7px; }
    .content { padding-top:12px; padding-bottom:20px; }
    .pos-command-card { padding-top:9px; padding-bottom:9px; }
    .pos-checkout-column { top:70px; max-height:calc(100vh - 78px); }
}

/* Horizontal data-entry surfaces: make scrolling visible and intentional instead of clipping data. */
.table-wrap.is-scrollable-table {
    scrollbar-gutter:stable;
    border-radius:inherit;
}
.table-wrap.is-scrollable-table::-webkit-scrollbar { height:10px; }
.table-wrap.is-scrollable-table::-webkit-scrollbar-track { background:#eef3f6; border-radius:99px; }
.table-wrap.is-scrollable-table::-webkit-scrollbar-thumb { background:#9fb4c2; border:2px solid #eef3f6; border-radius:99px; }
.table-wrap.is-scrollable-table.can-scroll-left { box-shadow:inset 12px 0 12px -14px rgba(11,36,56,.55); }
.table-wrap.is-scrollable-table.can-scroll-right { box-shadow:inset -12px 0 12px -14px rgba(11,36,56,.55); }
.table-wrap.is-scrollable-table.can-scroll-left.can-scroll-right { box-shadow:inset 12px 0 12px -14px rgba(11,36,56,.55), inset -12px 0 12px -14px rgba(11,36,56,.55); }

/* Avoid accidental horizontal clipping from long identifiers and action rows. */
.mono,.table-title,.table-subtitle,.health-card strong,.health-card small { overflow-wrap:anywhere; }
.card-header .button-row,.record-actions,.toolbar { max-width:100%; }
@media screen and (max-width:1120px) {
    .record-actions { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:thin; }
    .record-actions > * { flex:0 0 auto; }
}

@media print {
    .pos-checkout-column { max-height:none!important; overflow:visible!important; }
    .table-wrap.is-scrollable-table { overflow:visible!important; box-shadow:none!important; }
}

/* Mid-width laptops: keep the navigation compact but stack working panels so forms never feel squeezed. */
@media screen and (min-width:1121px) and (max-width:1280px) {
    .page-grid,.page-grid.wide-form,.pos-layout { grid-template-columns:1fr; }
    .pos-checkout-column {
        position:static;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:none;
        overflow:visible;
        padding-right:0;
    }
    .pos-checkout-column .pos-total-box { grid-column:1 / -1; }
    .pos-customer-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pos-cart-table table { min-width:720px; }
}

@media screen and (min-width:1121px) and (max-width:1560px) {
    .card-header { flex-wrap:wrap; }
    .card-header > .button-row,.card-header > form,.card-header > .inline-form { max-width:100%; }
    .receipt-station { grid-template-columns:280px minmax(0,1fr); gap:14px; }
    .receipt-controls { top:78px; }
    .receipt-controls-head,.receipt-controls-body { padding:14px; }
    .receipt-preview { min-height:620px; padding:22px 14px; }
}
@media screen and (min-width:1121px) and (max-width:1280px) {
    .today { display:none; }
    .receipt-station { grid-template-columns:1fr; }
    .receipt-controls { position:static; }
}

/* Long read-only registers become bounded work areas on desktop/laptop, keeping filters and pagination nearby. */
.table-wrap.is-long-table {
    max-height:min(62vh,620px);
    overflow:auto;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#9fb4c2 #eef3f6;
}
.table-wrap.is-long-table thead th {
    position:sticky;
    top:0;
    z-index:3;
    box-shadow:0 1px 0 #dfe7ef;
}
.table-wrap.is-long-table::-webkit-scrollbar { width:9px; height:9px; }
.table-wrap.is-long-table::-webkit-scrollbar-track { background:#eef3f6; }
.table-wrap.is-long-table::-webkit-scrollbar-thumb { border:2px solid #eef3f6; border-radius:99px; background:#9fb4c2; }
.grn-page-grid > aside .card-body > .stack {
    max-height:min(55vh,520px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:4px;
    scrollbar-width:thin;
}
@media screen and (max-width:760px) {
    .table-wrap.is-long-table.is-card-table { max-height:none; overflow:visible; scrollbar-gutter:auto; }
    .table-wrap.is-long-table.is-card-table thead th { position:static; }
    .grn-page-grid > aside .card-body > .stack { max-height:420px; }
}

.table-wrap.has-horizontal-overflow {
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#8fa8b8 #edf2f5;
}
.table-wrap.has-horizontal-overflow::-webkit-scrollbar { height:10px; }
.table-wrap.has-horizontal-overflow::-webkit-scrollbar-track { background:#edf2f5; border-radius:99px; }
.table-wrap.has-horizontal-overflow::-webkit-scrollbar-thumb { border:2px solid #edf2f5; border-radius:99px; background:#8fa8b8; }

/* Account security and password recovery */
.auth-shell { max-width: 1040px; }
.password-field { position: relative; display: flex; align-items: stretch; min-width: 0; }
.password-field input { width: 100%; min-width: 0; padding-right: 76px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    min-width: 52px;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    color: var(--brand-dark);
    background: var(--brand-pale);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}
.password-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.auth-links { margin: 15px 0 0; text-align: center; font-size: 13px; }
.auth-links a { color: var(--brand-dark); font-weight: 750; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-note { margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.password-strength { display: grid; gap: 6px; margin-top: -2px; }
.password-strength-track { height: 5px; overflow: hidden; border-radius: 99px; background: var(--line); }
.password-strength-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand); transition: width .18s ease, background-color .18s ease; }
.password-strength-track span[data-level="weak"] { background: var(--red); }
.password-strength-track span[data-level="fair"] { background: #c47c16; }
.password-strength-track span[data-level="strong"],
.password-strength-track span[data-level="very-strong"] { background: var(--brand); }
.password-strength small { color: var(--muted); font-size: 11px; }
.sidebar-user-link { color: inherit; text-decoration: none; transition: background .16s ease, border-color .16s ease; }
.sidebar-user-link:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.account-page-grid { align-items: start; }
.account-profile-heading { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.account-profile-avatar { display: grid; width: 54px; height: 54px; flex: 0 0 auto; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, var(--brand), var(--brand-dark)); font-size: 22px; font-weight: 850; }
.account-profile-heading h3 { margin: 0 0 4px; font-size: 18px; }
.account-profile-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.account-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; margin: 22px 0 0; }
.account-detail-grid div { min-width: 0; }
.account-detail-grid dt { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.account-detail-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; font-weight: 650; }
.account-security-note { padding-top: 14px; border-top: 1px solid var(--line); }
.security-lock { font-size: 19px; }
@media (max-width: 650px) {
    .login-page { padding: 12px; }
    .login-card { padding: 26px 22px; }
    .account-detail-grid { grid-template-columns: 1fr; gap: 15px; }
}

/* Product-specific base-unit conversion editor */
.product-conversion-editor { min-width: 0; }
.product-conversion-editor .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; }
.product-conversion-editor .section-heading h3 { margin: 0 0 .25rem; font-size: 1rem; }
.product-conversion-editor .section-heading p { margin: 0; color: var(--muted, #64748b); font-size: .875rem; }
.conversion-table { min-width: 760px; }
.conversion-table th, .conversion-table td { vertical-align: middle; }
.conversion-table .table-input, .conversion-table input, .conversion-table select { min-width: 105px; width: 100%; }
.product-conversion-editor .empty-row { text-align: center; }
.badge-warning { color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; }
.callout.info { border-left: 3px solid var(--primary, #2563eb); background: var(--surface-soft, #eff6ff); }
@media (max-width: 760px) {
  .product-conversion-editor .section-heading { flex-direction: column; align-items: stretch; }
  .product-conversion-editor .section-heading .btn { width: 100%; }
}