:root {
    --gh-navy: #062657;
    --gh-navy-deep: #041b3e;
    --gh-blue: #1769dc;
    --gh-bg: #f4f7fb;
    --gh-text: #0d2142;
    --gh-muted: #6f7d95;
    --gh-border: #e0e7f0;
}

html, body { min-height: 100%; }
body { color: var(--gh-text); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.login-body { background: radial-gradient(circle at 20% 10%, #fff 0, #f5f8fc 46%, #edf2f8 100%); }
.login-card { max-width: 1280px; min-height: 760px; border-radius: 20px; box-shadow: 0 22px 60px rgba(7, 31, 66, .15); }
.login-visual { color: #fff; background: radial-gradient(circle at 70% 38%, #0b4388, transparent 28%), linear-gradient(145deg, #041b3e, #073470 68%, #092756); }
.login-form-wrap { max-width: 520px; }
.warehouse-art { font-size: 12rem; line-height: 1; color: rgba(79, 168, 255, .22); text-shadow: 0 0 70px rgba(32, 139, 255, .35); }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; font-size: 1.35rem; font-weight: 700; }
.brand strong { color: #36a0ff; }
.brand-large { font-size: 2rem; }
.brand-mark { width: 2.6rem; height: 2.6rem; border-radius: 13px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0d5ec7, #2fc4ef); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.form-control, .input-group .btn { border-color: #d8e0eb; }
.form-control:focus { border-color: #5d9bea; box-shadow: 0 0 0 .2rem rgba(23,105,220,.12); }
.btn-primary { background: linear-gradient(135deg, #1769dc, #276fd0); border: 0; }
.app-body { background: var(--gh-bg); }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 258px; position: fixed; inset: 0 auto 0 0; z-index: 10; padding: 1.5rem 1rem; color: #fff; background: linear-gradient(180deg, var(--gh-navy-deep), var(--gh-navy)); display: flex; flex-direction: column; }
.sidebar .brand { margin: .25rem .5rem 2rem; }
.sidebar .nav-link { color: rgba(255,255,255,.86); border-radius: .55rem; padding: .8rem 1rem; display: flex; gap: .85rem; }
.sidebar .nav-link.active { color: #fff; background: linear-gradient(135deg, #1457bd, #216fde); }
.sidebar .nav-link.disabled { color: rgba(255,255,255,.62); opacity: 1; }
.sidebar-footer { margin-top: auto; padding: 1rem; color: rgba(255,255,255,.45); border-top: 1px solid rgba(255,255,255,.15); }
.main-content { min-width: 0; flex: 1; margin-left: 258px; }
.topbar { min-height: 76px; padding: .8rem 2rem; background: #fff; border-bottom: 1px solid var(--gh-border); }
.page-content { padding: 2rem; }
.metric-card, .content-card { background: #fff; border: 1px solid var(--gh-border); border-radius: .8rem; box-shadow: 0 3px 12px rgba(15, 38, 77, .04); }
.metric-card { min-height: 118px; padding: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.metric-card.compact { min-height: 104px; padding: 1rem; }
.metric-card.compact strong { font-size: 1.4rem; }
.metric-card small { display: block; color: var(--gh-muted); margin-bottom: .15rem; }
.metric-card strong { display: block; font-size: 1.65rem; }
.metric-icon { width: 3.2rem; height: 3.2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .7rem; font-size: 1.35rem; }
.metric-icon.blue { color: #1769dc; background: #e8f1ff; }
.metric-icon.green { color: #16a66a; background: #e7f8ef; }
.metric-icon.purple { color: #8157d9; background: #f0eaff; }
.metric-icon.orange { color: #e87b17; background: #fff0df; }
.content-card { padding: 1.1rem 1.25rem; }
.card-heading { padding: .35rem 0 1rem; border-bottom: 1px solid var(--gh-border); }
.table > :not(caption) > * > * { padding: .9rem .65rem; border-bottom-color: var(--gh-border); }
.empty-state { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--gh-muted); text-align: center; }
.empty-state > span { color: #a9bad2; font-size: 2.5rem; }
.filter-grid { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(160px, .8fr) auto; align-items: end; gap: 1rem; }
.filter-grid.inventory-filters { grid-template-columns: minmax(280px, 2fr) minmax(200px, 1fr) auto; }
.filter-actions { display: flex; gap: .5rem; }
.data-table thead th { white-space: nowrap; color: #52617a; font-size: .78rem; text-transform: uppercase; letter-spacing: .025em; background: #f8fafd; }
.description-cell { min-width: 340px; max-width: 620px; }
.route-badge, .status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: .28rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.route-badge.yes, .status-pill.active { color: #087a4d; background: #e3f7ed; }
.route-badge.no, .status-pill.inactive { color: #7b8799; background: #edf1f5; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.hub-tabs { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .2rem; }
.hub-tab { min-width: 220px; display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; color: var(--gh-text); background: #fff; border: 1px solid var(--gh-border); border-radius: .65rem; text-decoration: none; }
.hub-tab:hover { border-color: #8ab6f0; }
.hub-tab.active { color: #fff; border-color: var(--gh-blue); background: linear-gradient(135deg, #1457bd, #216fde); }
.movement-pill, .order-status { display: inline-flex; align-items: center; padding: .3rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.movement-pill.shipment { color: #0c63ce; background: #e7f1ff; }
.movement-pill.receipt { color: #7050c5; background: #efeaff; }
.movement-pill.internal_transfer { color: #c46508; background: #fff0df; }
.movement-pill.return { color: #bb3544; background: #ffe8eb; }
.order-status.draft { color: #a45d05; background: #fff0d6; }
.order-status.finalized { color: #6f42c1; background: #f0e8ff; }
.order-status.delivered { color: #087a4d; background: #e3f7ed; }
.order-status.cancelled { color: #b42332; background: #ffe8eb; }
.order-status.preparing, .order-status.partially_shipped, .order-status.shipped { color: #0c63ce; background: #e7f1ff; }
.order-item-row { display: grid; grid-template-columns: minmax(260px, 1fr) 140px auto; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--gh-border); }
.order-item-row:first-child { padding-top: 0; }
.order-item-row:last-child { border-bottom: 0; padding-bottom: 0; }
.allocation-preview-result { grid-column: 1 / -1; background: #f5f8ff; border-left: 3px solid #7b9ed9; border-radius: .35rem; padding: .55rem .75rem; }
.sticky-summary { position: sticky; top: 1rem; }
.order-draft-summary { border-color: #bcd5f5; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.detail-grid > div { min-width: 0; }
.detail-grid small { display: block; color: var(--gh-muted); margin-bottom: .3rem; }
.detail-grid strong { display: block; overflow-wrap: anywhere; }
.detail-list > div { padding: .65rem 0; border-bottom: 1px solid var(--gh-border); }
.detail-list > div:first-child { padding-top: 0; }
.detail-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.detail-list dt { color: var(--gh-muted); font-size: .78rem; font-weight: 500; margin-bottom: .2rem; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.text-prewrap { white-space: pre-wrap; }
.order-timeline { display: grid; gap: 0; }
.timeline-entry { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: .7rem; padding-bottom: 1.15rem; }
.timeline-entry:last-child { padding-bottom: 0; }
.timeline-entry::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 0; width: 2px; background: var(--gh-border); }
.timeline-entry:last-child::before { display: none; }
.timeline-entry > span { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: .25rem; border: 3px solid #bad5f8; border-radius: 50%; background: var(--gh-blue); }
.timeline-entry strong, .timeline-entry small { display: block; }
.timeline-entry small { color: var(--gh-muted); margin-top: .15rem; }
.timeline-entry p { margin: .35rem 0 0; font-size: .85rem; }
.availability-card.ready { border-color: #a9dfc7; }
.availability-card.blocked { border-color: #f0b9c0; }
.availability-state { display: inline-flex; padding: .35rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.availability-state.ready { color: #087a4d; background: #e3f7ed; }
.availability-state.blocked { color: #b42332; background: #ffe8eb; }
.import-status { display: inline-flex; align-items: center; padding: .3rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.import-status.confirmed { color: #a45d05; background: #fff0d6; }
.import-status.completed { color: #087a4d; background: #e3f7ed; }
.import-status.awaiting_approval { color: #8a5200; background: #fff0d6; }
.import-status.pending, .import-status.processing { color: #1557a0; background: #e6f0ff; }
.import-status.sent { color: #087a4d; background: #e3f7ed; }
.import-status.failed, .import-status.cancelled { color: #b42332; background: #ffe8eb; }
.actual-quantity-input { width: 130px; text-align: right; }
.shipment-quantity-input { width: 115px; text-align: right; }
.shipment-status { display: inline-flex; align-items: center; padding: .3rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.shipment-status.in_transit, .shipment-status.loading { color: #0c63ce; background: #e7f1ff; }
.shipment-status.loaded, .shipment-status.delivered { color: #087a4d; background: #e3f7ed; }
.shipment-status.scheduled { color: #a45d05; background: #fff0d6; }
.shipment-status.cancelled { color: #b42332; background: #ffe8eb; }
.delivery-quantity-input { width: 125px; text-align: right; }

@media (max-width: 991.98px) {
    .login-card { min-height: auto; max-width: 620px; }
    .sidebar { width: 78px; padding-inline: .6rem; }
    .sidebar .brand span:last-child, .sidebar .nav-link span, .sidebar-footer { display: none; }
    .sidebar .brand { margin-inline: auto; }
    .sidebar .nav-link { justify-content: center; }
    .main-content { margin-left: 78px; }
    .filter-grid, .filter-grid.inventory-filters { grid-template-columns: 1fr 1fr; }
    .filter-search { grid-column: 1 / -1; }
    .sticky-summary { position: static; }
}

@media (max-width: 575.98px) {
    .sidebar { display: none; }
    .main-content { margin-left: 0; }
    .topbar, .page-content { padding-inline: 1rem; }
    .filter-grid, .filter-grid.inventory-filters { grid-template-columns: 1fr; }
    .filter-search { grid-column: auto; }
    .filter-actions > * { flex: 1; }
    .order-item-row { grid-template-columns: 1fr; }
    .order-item-row .btn { width: 100%; }
    .detail-grid { grid-template-columns: 1fr; }
}