/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification 
for details on configuring this project to bundle and minify static web assets. */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background: #f4f7f6;
    color: #17251f;
    font-family: "Segoe UI", Arial, sans-serif;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

.warehouse-nav { background:#123a2d; border:0; box-shadow:0 6px 24px rgba(18,58,45,.16); }
.warehouse-nav .navbar-brand,.warehouse-nav .navbar-nav>li>a { color:#fff; }
.warehouse-nav .navbar-brand { font-weight:800; letter-spacing:-.4px; }
.warehouse-nav .navbar-nav>li>a:hover { color:#95e3bd; background:rgba(255,255,255,.06); }
.body-content { max-width:1240px; padding-top:38px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:14px 0 24px; }
.page-head h1 { font-size:36px; margin:5px 0; font-weight:800; letter-spacing:-1px; }
.page-head p { color:#6b7c74; margin:0; }
.eyebrow { color:#168657; font-size:11px; font-weight:800; letter-spacing:1.5px; }
.station-picker { background:#fff; padding:10px 14px; border:1px solid #dde7e2; border-radius:14px; min-width:240px; }
.station-picker label { display:block; color:#738179; font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.station-picker select { width:100%; border:0; background:transparent; font-weight:700; outline:0; }
.status-pill { display:inline-block; background:#e5f7ee; color:#16734e; border-radius:999px; padding:7px 12px; font-size:12px; margin-bottom:14px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.metric { background:#fff; border:1px solid #e2e9e5; border-radius:18px; padding:22px; box-shadow:0 7px 25px rgba(30,66,51,.05); }
.metric span,.metric small { display:block; color:#74837c; }
.metric strong { display:block; font-size:28px; margin:9px 0 3px; letter-spacing:-.7px; }
.metric.accent { background:linear-gradient(135deg,#123a2d,#176044); color:#fff; border:0; }
.metric.accent span,.metric.accent small { color:#b8ddcb; }
.metric.warning strong { color:#d87c1c; }
.panel { background:#fff; border:1px solid #e2e9e5; border-radius:18px; padding:20px; margin-bottom:20px; box-shadow:0 7px 25px rgba(30,66,51,.04); }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.panel-title h2 { font-size:19px; font-weight:800; margin:3px 0 0; }
.panel-title>a { color:#168657; font-weight:700; }
.station-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.station-card { display:flex; gap:11px; color:#1b2a23; padding:14px; border:1px solid #e3ebe7; border-radius:14px; min-width:0; }
.station-card:hover,.station-card.active { color:#123a2d; text-decoration:none; border-color:#3aa978; background:#eefaf4; }
.station-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; background:#dff4e9; color:#16734e; border-radius:10px; font-weight:800; }
.station-card strong,.station-card span,.station-card small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.station-card span,.station-card small { color:#718078; font-size:11px; margin-top:3px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.stock-row,.activity-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid #edf1ef; }
.product-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#edf5f1; color:#176044; font-weight:800; }
.grow { flex:1; min-width:0; }
.grow strong,.grow span { display:block; }
.grow span { color:#75837c; font-size:12px; margin-top:2px; }
.qty { font-weight:800; color:#168657; }.qty.low { color:#c25a42; }
.movement { font-size:10px; font-weight:800; padding:6px; border-radius:7px; }.movement.in { color:#14754e; background:#e4f7ed; }.movement.out { color:#b64936; background:#fff0ec; }
.table-panel { padding:0; overflow:hidden; }.table-panel .panel-title { padding:20px 20px 4px; }
.responsive-table { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { background:#f7f9f8; color:#6e7c75; font-size:11px; text-transform:uppercase; letter-spacing:.7px; }
th,td { padding:14px 20px; text-align:left; border-top:1px solid #e8eeeb; white-space:nowrap; }
td small { display:block; color:#7a8881; margin-top:3px; }
.badge { display:inline-block; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; }
.badge.success { color:#14754e; background:#e4f7ed; }.badge.danger { color:#b64936; background:#fff0ec; }
.search { border:1px solid #dce6e1; border-radius:10px; padding:9px 12px; outline:0; }
footer { color:#77847e; font-size:12px; padding:14px 0; }
.login-shell{min-height:calc(100vh - 145px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px;max-width:980px;margin:0 auto}
.login-brand{padding:40px}.login-brand h1{font-size:52px;line-height:1.02;font-weight:850;letter-spacing:-2px;margin:12px 0 20px}.login-brand>p{font-size:17px;color:#6e7d75;max-width:510px;margin-bottom:30px}
.login-feature{display:flex;align-items:center;gap:14px;margin:13px 0}.login-feature strong{width:48px;height:48px;display:grid;place-items:center;background:#dff4e9;color:#176044;border-radius:14px}.login-feature span{color:#53645b}
.login-card{background:#fff;padding:38px;border:1px solid #dce7e1;border-radius:24px;box-shadow:0 24px 70px rgba(18,58,45,.12)}.login-card h2{font-size:28px;font-weight:800;margin:14px 0 5px}.login-card>p{color:#75837c;margin-bottom:24px}.login-icon{width:50px;height:50px;display:grid;place-items:center;background:#123a2d;color:#fff;border-radius:15px;font-size:22px}
.field{margin-bottom:17px}.field label{display:block;font-size:12px;font-weight:800;color:#506159;margin-bottom:7px}.field input,.field select{width:100%;height:48px;border:1px solid #cfddd6;border-radius:11px;padding:0 13px;background:#fff;outline:0}.field input:focus,.field select:focus{border-color:#239463;box-shadow:0 0 0 3px rgba(35,148,99,.12)}
.primary-btn{width:100%;height:49px;border:0;border-radius:11px;background:#176044;color:#fff;font-weight:800}.primary-btn:hover{background:#123a2d}.form-error{padding:11px 13px;background:#fff0ec;color:#ad4534;border-radius:10px;margin-bottom:16px}.demo-login{margin-top:22px;padding:13px;background:#f2f7f4;border-radius:11px}.demo-login strong,.demo-login span{display:block}.demo-login span{font-size:12px;color:#66766e;margin-top:3px}
.locked-station{background:#e6f5ed;color:#176044;padding:10px 14px;border-radius:999px;font-weight:800}.sale-message{background:#e3f5eb;color:#176044;border:1px solid #bfe5d0;padding:13px 16px;border-radius:12px;margin-bottom:18px}.pos-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.payment-card{background:#123a2d;color:#fff}.payment-card .eyebrow{color:#84d9b0}.payment-card .panel-title h2{color:#fff}.payment-total{padding:20px 0 25px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:20px}.payment-total span,.payment-total strong{display:block}.payment-total span{color:#acd4c1;font-size:12px}.payment-total strong{font-size:38px;margin-top:5px}.payment-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.payment-options label{margin:0}.payment-options input{position:absolute;opacity:0}.payment-options span{display:block;padding:13px;border:1px solid rgba(255,255,255,.25);border-radius:10px;text-align:center}.payment-options input:checked+span{background:#fff;color:#123a2d;border-color:#fff;font-weight:800}.payment-card .field label{color:#c1ddcf}.checkout{background:#68d49f;color:#0d3829;margin-top:7px}.checkout:hover{background:#86e2b5}.secure-note{display:block;text-align:center;color:#acd4c1;margin-top:12px}.stock-available{background:#edf7f2;padding:12px;border-radius:10px;color:#547066}
.transfer-only{padding:13px;text-align:center;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.08);font-weight:800;margin-bottom:18px}.receipt-link{float:right;color:#176044;font-weight:800;text-decoration:underline}.receipt{max-width:850px;margin:30px auto;background:#fff;padding:42px;border:1px solid #dbe6e0;border-radius:20px}.receipt-head{display:flex;justify-content:space-between;border-bottom:2px solid #123a2d;padding-bottom:20px}.receipt-head h1{font-weight:850;margin:4px 0}.invoice-no{text-align:right;color:#687970}.invoice-no strong{font-size:24px;color:#123a2d}.receipt-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px 0}.receipt-meta span,.receipt-meta strong{display:block}.receipt-meta span{font-size:11px;color:#77857e;text-transform:uppercase}.receipt-total{text-align:right;padding:24px 0}.receipt-total span,.receipt-total strong{display:block}.receipt-total strong{font-size:30px}.receipt-actions{display:flex;align-items:center;gap:20px}.receipt-actions .primary-btn{max-width:220px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.purchase-form{max-width:860px}.filter-bar{display:flex;align-items:end;gap:12px;background:#fff;padding:16px;border:1px solid #e2e9e5;border-radius:14px;margin-bottom:15px}.filter-bar .field{margin:0;min-width:180px}.filter-bar .primary-btn{width:auto;padding:0 24px}.badge.info{color:#825d14;background:#fff1cd}
.empty-state{text-align:center;background:#fff;border:1px solid #dce7e1;border-radius:18px;padding:55px 20px}.empty-state h2{font-weight:850}.empty-state p{color:#728079;margin-bottom:22px}.empty-state .primary-btn{display:inline-block;width:auto;padding:15px 24px}.verified-amount{background:#e6f5ed;border-radius:12px;padding:18px}.verified-amount span,.verified-amount strong{display:block}.verified-amount span{font-size:11px;text-transform:uppercase;color:#5e7369}.verified-amount strong{font-size:28px;color:#176044}.sale-check{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.sale-check>div{background:#f1f6f3;padding:14px;border-radius:11px}.sale-check span,.sale-check strong{display:block}.sale-check span{font-size:11px;color:#6c7c74}.sale-check strong{font-size:20px;margin-top:4px}.sale-check .over{color:#c44836}.primary-btn:disabled{opacity:.45;cursor:not-allowed}.secure-note.dark{color:#65756d}.invoice-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid #e8eeeb}.invoice-row strong,.invoice-row span{display:block}.invoice-row>div>span{font-size:12px;color:#73817a}.badge.pending{color:#825d14;background:#fff1cd}.approve-btn{border:0;background:#176044;color:#fff;border-radius:8px;padding:9px 13px;font-weight:800}
@media(max-width:991px){.metric-grid{grid-template-columns:1fr 1fr}.station-grid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}}
@media(max-width:600px){
  .body-content{padding-top:20px}.page-head{display:block}.page-head h1{font-size:28px}.station-picker{margin-top:16px;width:100%}
  .metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:16px}.metric strong{font-size:21px}
  .station-grid{grid-template-columns:1fr}.panel{border-radius:14px;padding:15px}
  .table-panel{padding:0;margin-left:-15px;margin-right:-15px;border-radius:0;border-left:0;border-right:0}
  th,td{padding:12px}.navbar-toggle{border-color:rgba(255,255,255,.3)}.navbar-toggle .icon-bar{background:#fff}
  .login-shell{display:block;min-height:auto}.login-brand{padding:20px 4px 28px}.login-brand h1{font-size:38px}.login-feature{display:none}.login-card{padding:24px;border-radius:18px}
  .pos-grid{grid-template-columns:1fr}.payment-total strong{font-size:30px}.locked-station{display:inline-block;margin-top:14px}
  .form-grid,.receipt-meta{grid-template-columns:1fr}.receipt{padding:20px;margin:10px 0}.filter-bar{display:block}.filter-bar .field{margin-bottom:10px}.filter-bar .primary-btn{width:100%;margin-bottom:10px}
}
@media print{.warehouse-nav,footer,.receipt-actions{display:none!important}.body-content{padding-top:0}.receipt{border:0;box-shadow:none;margin:0;max-width:none}}

/* StockFlow visual refresh */
:root {
    --ink: #10241c;
    --muted: #65776e;
    --brand-950: #102a56;
    --brand-900: #123c78;
    --brand-800: #1554aa;
    --brand-700: #1266d8;
    --brand-600: #2184f5;
    --brand-100: #ddecff;
    --brand-50: #f0f7ff;
    --surface: #ffffff;
    --canvas: #f3f7f5;
    --line: #dce7e1;
    --warning: #d97706;
    --danger: #bd4735;
    --shadow-sm: 0 8px 22px rgba(14, 55, 40, .06);
    --shadow-md: 0 18px 46px rgba(14, 55, 40, .10);
}

html { min-height: 100%; scroll-behavior: smooth; }
body {
    min-height: 100vh;
    padding-top: 70px;
    padding-bottom: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 100% 0, rgba(33, 132, 245, .14), transparent 30rem),
        radial-gradient(circle at 0 35%, rgba(18, 102, 216, .07), transparent 32rem),
        var(--canvas);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a, button, input, select { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, transform .18s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(31, 138, 94, .24); outline-offset: 2px; }

.warehouse-nav {
    min-height: 70px;
    margin: 0;
    background: linear-gradient(105deg, rgba(16,42,86,.98), rgba(18,102,216,.97));
    border: 0;
    box-shadow: 0 10px 30px rgba(7, 43, 33, .18);
    backdrop-filter: blur(14px);
}
.nav-shell { display: flex; align-items: center; min-height: 70px; }
.navbar-header { flex: 0 0 auto; }
.warehouse-nav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 70px;
    padding: 12px 18px 12px 15px;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.5px;
}
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 11px;
    color: #dff8eb;
    background: linear-gradient(145deg, #57adff, #1266d8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    font-size: 11px;
    letter-spacing: .5px;
}
.warehouse-nav .navbar-collapse { flex: 1; }
.warehouse-nav .navbar-nav { float: right; display: flex; align-items: center; margin: 0; }
.warehouse-nav .navbar-nav > li > a {
    margin: 13px 2px;
    padding: 12px 15px;
    border-radius: 10px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 650;
}
.warehouse-nav .navbar-nav > li > a:hover,
.warehouse-nav .navbar-nav > li > a:focus { color: #fff; background: rgba(255,255,255,.09); }
.warehouse-nav .navbar-form { margin: 13px 0 13px 8px; padding: 0; }
.warehouse-nav .navbar-btn {
    margin: 0;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    color: #bde8d3;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}
.warehouse-nav .navbar-btn:hover { color: #fff; background: rgba(255,255,255,.10); }

.body-content { max-width: 1240px; min-height: calc(100vh - 70px); padding-top: 42px; }
.page-head { align-items: center; margin: 6px 0 28px; }
.page-head h1 { max-width: 780px; margin: 4px 0 5px; font-size: clamp(30px, 4vw, 42px); line-height: 1.08; letter-spacing: -1.5px; }
.page-head p { max-width: 680px; font-size: 15px; }
.eyebrow { color: var(--brand-600); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; }
.locked-station, .status-pill { color: #1554aa; border: 1px solid #c7ddfb; background: #eaf3ff; box-shadow: 0 5px 14px rgba(18, 102, 216, .07); }

.panel, .metric, .station-picker, .filter-bar, .empty-state, .login-card, .receipt {
    border-color: rgba(16, 81, 60, .12);
    box-shadow: var(--shadow-sm);
}
.panel { padding: 24px; border-radius: 20px; }
.panel:hover { box-shadow: 0 12px 32px rgba(14, 55, 40, .075); }
.panel-title { margin-bottom: 19px; }
.panel-title h2 { font-size: 20px; letter-spacing: -.35px; }
.metric { position: relative; overflow: hidden; min-height: 138px; padding: 24px; border-radius: 20px; }
.metric::after { content: ""; position: absolute; right: -28px; bottom: -34px; width: 96px; height: 96px; border-radius: 50%; background: rgba(31, 138, 94, .055); }
.metric strong { position: relative; z-index: 1; font-size: 30px; }
.metric.accent { background: linear-gradient(145deg, var(--brand-950), var(--brand-700)); box-shadow: 0 15px 32px rgba(11, 59, 46, .20); }
.metric.accent span, .metric.accent small { color: #cfe4ff; }

.field label { color: #425a4f; letter-spacing: .1px; }
.field input, .field select, .search {
    border: 1px solid #cbdcd3;
    border-radius: 12px;
    color: var(--ink);
    background: #fbfdfc;
}
.field select,
.station-picker,
#ProductPicker {
    width: 100%;
    max-width: 520px;
}
.station-picker select { max-width: 100%; }
.field input:hover, .field select:hover, .search:hover { border-color: #9ebdaf; }
.field input:focus, .field select:focus, .search:focus { border-color: var(--brand-600); background: #fff; box-shadow: 0 0 0 4px rgba(31,138,94,.11); }
.field input[readonly] { color: #40564c; background: #eef5f1; }

.primary-btn, .approve-btn {
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-800));
    box-shadow: 0 8px 18px rgba(16, 81, 60, .17);
    letter-spacing: .1px;
}
.primary-btn:hover, .primary-btn:focus, .approve-btn:hover, .approve-btn:focus { color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); transform: translateY(-1px); box-shadow: 0 11px 24px rgba(16,81,60,.22); }
.primary-btn:active, .approve-btn:active { transform: translateY(0); }
.primary-btn:disabled { transform: none; box-shadow: none; }
button[onclick="addProduct()"] { width: auto; min-width: 150px; padding: 0 22px; margin-bottom: 20px; }

.table-panel { border-radius: 20px; }
th { padding-top: 13px; padding-bottom: 13px; color: #587066; background: #f1f6f3; }
td { color: #253a31; background: rgba(255,255,255,.64); }
tbody tr:hover td { background: #f7fbf9; }
.badge { padding: 6px 10px; border: 1px solid transparent; }
.badge.success { border-color: #c2e8d4; }
.badge.danger { border-color: #f0d0c9; }
.badge.pending, .badge.info { border-color: #f0dda9; }

.station-card { padding: 15px; background: rgba(255,255,255,.66); }
.station-card:hover, .station-card.active { color: var(--brand-950); border-color: #75b5f4; background: #edf6ff; transform: translateY(-2px); box-shadow: 0 9px 20px rgba(18,102,216,.10); }
.station-icon, .product-mark, .login-feature strong { color: var(--brand-700); background: #e4f1ff; }
.qty, .panel-title > a, .receipt-link { color: var(--brand-700); }
.stock-row, .activity-row, .invoice-row { border-color: #e7efeb; }
.stock-row:hover, .activity-row:hover, .invoice-row:hover { background: #f8fbf9; }
.stock-row, .activity-row { margin: 0 -10px; padding: 14px 10px; border-radius: 10px; }
.invoice-row { margin: 0 -8px; padding: 14px 8px; }

.sale-message { border-left: 4px solid var(--brand-600); background: #eaf8f0; }
.form-error { border: 1px solid #f1d2cb; border-left: 4px solid var(--danger); }
.sale-message { color: #124c91; border-color: #83bcf5; background: #eaf4ff; }
.verified-amount { border: 1px solid #c8def8; background: linear-gradient(135deg, #f2f8ff, #e5f1ff); }
.verified-amount strong { color: var(--brand-700); }
.stock-available, .demo-login { color: #315f94; background: #edf6ff; }
.payment-card { color: #fff; background: linear-gradient(155deg, var(--brand-950), var(--brand-700)); box-shadow: 0 18px 38px rgba(18, 72, 145, .20); }
.payment-card .eyebrow { color: #9ed0ff; }
.payment-card .field label, .payment-total span, .secure-note { color: #c6e1ff; }
.checkout { color: #0d315c; background: #9fd5ff; }
.checkout:hover { color: #092845; background: #c2e6ff; }
#SelectedProducts { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
#SelectedProducts th:first-child, #SelectedProducts td:first-child { padding-left: 16px; }
#SelectedProducts input { min-width: 88px; padding: 8px 10px; border: 1px solid #cbdcd3; border-radius: 9px; }

.login-shell { max-width: 1080px; gap: 80px; }
.login-brand { position: relative; }
.login-brand::before { content: ""; position: absolute; z-index: -1; left: -80px; top: -90px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(53,175,115,.13), transparent 68%); }
.login-brand h1 { color: var(--brand-950); font-size: clamp(44px, 5vw, 58px); }
.login-card { padding: 40px; border-radius: 26px; box-shadow: var(--shadow-md); }
.login-icon { background: linear-gradient(145deg, var(--brand-700), var(--brand-950)); box-shadow: 0 10px 22px rgba(11,59,46,.20); }

.receipt { border-radius: 24px; box-shadow: var(--shadow-md); }
.receipt-head { border-color: var(--brand-900); }
.receipt-meta > div { padding: 12px; border-radius: 10px; background: #f4f8f6; }
.receipt-total { border-top: 1px dashed #cbdcd3; }

.app-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding: 22px 2px 26px; border-top: 1px solid rgba(16,81,60,.10); }
.app-footer p { margin: 0; }
.app-footer strong { color: #385047; }
.transaction-row { cursor: pointer; }
.transaction-row:focus { outline: 0; }
.transaction-row:focus td { background: #eaf4ff; }
.transaction-row:hover td:first-child { box-shadow: inset 4px 0 0 var(--brand-600); }
.detail-back { display: inline-block; text-decoration: none; }
.detail-back:hover { color: #fff; text-decoration: none; }
.transaction-detail-summary { padding-top: 8px; padding-bottom: 8px; }
.detail-list > div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-top: 1px solid #e5edf5; }
.detail-list > div:first-child { border-top: 0; }
.detail-list span { color: var(--muted); }
.detail-list strong { max-width: 65%; text-align: right; }
.detail-list .detail-highlight { margin: 5px -12px; padding: 16px 12px; border: 1px solid #c6defb; border-radius: 12px; background: #edf6ff; }
.detail-list .detail-highlight strong { color: var(--brand-700); font-size: 20px; }
.transaction-filter-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.transaction-filter-actions .primary-btn { width: auto; min-width: 74px; padding: 0 18px; }
.transaction-metrics { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767px) {
    body { padding-top: 60px; }
    .warehouse-nav, .nav-shell { min-height: 60px; }
    .nav-shell { display: block; padding: 0; }
    .warehouse-nav .navbar-brand { height: 60px; padding: 10px 15px; }
    .brand-mark { width: 34px; height: 34px; }
    .navbar-toggle { margin-top: 13px; margin-right: 15px; border-radius: 9px; }
    .warehouse-nav .navbar-collapse { max-height: calc(100vh - 60px); padding: 8px 15px 16px; border: 0; background: var(--brand-950); box-shadow: 0 15px 26px rgba(7,43,33,.20); }
    .warehouse-nav .navbar-nav { float: none; display: block; }
    .warehouse-nav .navbar-nav > li > a { margin: 3px 0; padding: 11px 13px; }
    .warehouse-nav .navbar-form { margin: 8px 0 0; }
    .warehouse-nav .navbar-btn { width: 100%; text-align: left; }
    .body-content { padding-top: 26px; }
    .page-head { align-items: flex-start; }
    .page-head h1 { font-size: 30px; }
    .panel { padding: 18px; }
    .login-shell { padding-bottom: 25px; }
    .app-footer { display: block; text-align: center; }
    .app-footer span { display: block; margin-top: 3px; }
    .field select, .station-picker, #ProductPicker { max-width: 100%; }
    .detail-list > div { display: block; }
    .detail-list strong { display: block; max-width: none; margin-top: 4px; text-align: left; }
    .transaction-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .metric-grid { grid-template-columns: 1fr; }
    .metric { min-height: auto; }
    .payment-options { grid-template-columns: 1fr; }
    .receipt-head { display: block; }
    .invoice-no { margin-top: 16px; text-align: left; }
    .receipt-actions { align-items: stretch; flex-direction: column; }
    .receipt-actions .primary-btn { max-width: none; }
    button[onclick="addProduct()"] { width: 100%; }
}

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

@media print {
    body { background: #fff; color: #000; }
    .receipt { padding: 0; }
    .receipt-meta > div { background: transparent; padding-left: 0; }
}