:root {
  --ink: #172424;
  --muted: #667876;
  --line: #dfe7e4;
  --surface: #fff;
  --canvas: #f4f7f5;
  --sidebar: #102a2c;
  --sidebar-deep: #0b2224;
  --teal: #1d766f;
  --teal-dark: #155e59;
  --teal-soft: #e6f2ef;
  --amber: #b87619;
  --amber-soft: #fff2d9;
  --blue: #34758d;
  --blue-soft: #e8f3f7;
  --rose: #a84d55;
  --rose-soft: #faeaeb;
  --sidebar-width: 264px;
  --topbar-height: 72px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(18, 52, 49, .06);
  --bs-primary: #1d766f;
  --bs-primary-rgb: 29, 118, 111;
  --bs-link-color: #1d766f;
  --bs-link-color-rgb: 29, 118, 111;
  --bs-link-hover-color: #155e59;
  --bs-link-hover-color-rgb: 21, 94, 89;
}

* { box-sizing: border-box; }
html { min-height: 100%; font-size: 15px; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn { min-height: 40px; padding: .55rem .95rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9px; font-size: .875rem; font-weight: 650; }
.btn svg { width: 17px; height: 17px; }
.btn-primary { --bs-btn-bg: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-hover-bg: var(--teal-dark); --bs-btn-hover-border-color: var(--teal-dark); --bs-btn-active-bg: var(--teal-dark); --bs-btn-active-border-color: var(--teal-dark); --bs-btn-disabled-bg: var(--teal); --bs-btn-disabled-border-color: var(--teal); --bs-btn-focus-shadow-rgb: 29,118,111; box-shadow: 0 5px 14px rgba(29,118,111,.18); }
.btn-outline-primary { --bs-btn-color: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-hover-bg: var(--teal); --bs-btn-hover-border-color: var(--teal); --bs-btn-active-bg: var(--teal-dark); --bs-btn-active-border-color: var(--teal-dark); --bs-btn-disabled-color: var(--teal); --bs-btn-disabled-border-color: var(--teal); --bs-btn-focus-shadow-rgb: 29,118,111; }
.progress { --bs-progress-bar-bg: var(--teal); }
.pagination { --bs-pagination-color: var(--teal); --bs-pagination-hover-color: var(--teal-dark); --bs-pagination-focus-color: var(--teal-dark); --bs-pagination-active-bg: var(--teal); --bs-pagination-active-border-color: var(--teal); }
.btn-soft { color: #275956; border: 1px solid #cfe0dc; background: #fff; }
.btn-soft:hover { color: var(--teal-dark); border-color: #aac9c3; background: var(--teal-soft); }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #75aaa4; box-shadow: 0 0 0 .22rem rgba(29,118,111,.14); }
.dropdown-menu { padding: .45rem; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 14px 40px rgba(15,43,42,.12); }
.dropdown-item { padding: .6rem .75rem; color: #314240; border-radius: 7px; font-size: .875rem; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--teal-dark); background: var(--teal-soft); }

/* Application shell */
.app-shell { min-height: 100vh; }
.app-sidebar { --bs-offcanvas-width: var(--sidebar-width); width: var(--sidebar-width) !important; max-width: calc(100vw - 32px); display: flex; flex-direction: column; color: #dce9e6; background: linear-gradient(180deg,var(--sidebar),var(--sidebar-deep)); border: 0 !important; }
.sidebar-brand-wrap { min-height: var(--topbar-height); padding: 0 22px; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-brand-wrap .btn-close { flex: 0 0 auto; width: 28px; height: 28px; padding: 8px; }
.brand { min-width: 0; display: flex; align-items: center; gap: 11px; color: #fff; }
.brand:hover { color: #fff; }
.brand-mark { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; color: #d9f4ec; background: linear-gradient(145deg,#2b8e83,#1b6964); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.brand-mark svg { width: 23px; height: 23px; }
.brand > span:last-child { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.brand strong { color: inherit; font-size: 1.18rem; letter-spacing: -.02em; }
.brand small { max-width: 170px; margin-top: 4px; overflow: hidden; color: #8eaaa6; font-size: .65rem; white-space: nowrap; text-overflow: ellipsis; }
.brand-dark, .brand-dark:hover { color: var(--ink); }
.brand-dark small { color: var(--muted); }
.app-sidebar .sidebar-body { min-height: 0; padding: 18px 14px 14px !important; display: flex !important; flex: 1 1 auto; flex-direction: column; overflow-y: auto; }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-label { margin: 22px 12px 7px; color: #688b87; font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .11em; }
.sidebar-label:first-of-type { margin-top: 24px; }
.sidebar-link { position: relative; min-height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 12px; color: #b7cbc7; border-radius: 9px; font-size: .88rem; font-weight: 540; transition: color .16s, background .16s; }
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.055); }
.sidebar-link.active { color: #fff; background: rgba(57,146,135,.23); box-shadow: inset 3px 0 #62b7ac; }
.sidebar-link .nav-icon { flex: 0 0 auto; width: 19px; height: 19px; color: #8eb1ac; }
.sidebar-link.active .nav-icon { color: #8ed3c8; }
.sidebar-footer { margin-top: auto; padding: 18px 12px 5px; display: flex; align-items: center; gap: 8px; color: #668783; border-top: 1px solid rgba(255,255,255,.06); font-size: .68rem; }
.sidebar-footer-dot { width: 6px; height: 6px; border-radius: 50%; background: #5fb99e; box-shadow: 0 0 0 4px rgba(95,185,158,.1); }

.app-main { min-width: 0; min-height: 100vh; }
.app-topbar { position: sticky; z-index: 1020; top: 0; height: var(--topbar-height); padding: 0 clamp(16px,2.5vw,34px); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.topbar-start, .topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar-start { min-width: 0; flex: 1 1 auto; }
.topbar-actions { flex: 0 0 auto; }
.sidebar-trigger { width: 40px; padding: 0; color: var(--ink); border: 1px solid var(--line); background: #fff; }
.sidebar-trigger svg { width: 20px; height: 20px; }
.topbar-title { min-width: 0; display: flex; flex-direction: column; }
.topbar-title small { color: #84918f; font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.topbar-title strong { max-width: 100%; overflow: hidden; color: var(--ink); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.language-switcher { height: 32px; padding: 3px; display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9f8; }
.language-switcher > span { width: 1px; height: 14px; background: #d6dfdd; }
.language-option { min-width: 28px; height: 24px; padding: 0 5px; color: #8a9896; border: 0; border-radius: 5px; background: transparent; font-size: .7rem; font-weight: 750; }
.language-option:hover { color: var(--teal); }
.language-option:focus-visible, .user-menu:focus-visible, .sidebar-link:focus-visible { outline: 2px solid #75aaa4; outline-offset: 3px; }
.language-option.active { color: var(--teal-dark); background: #fff; box-shadow: 0 1px 4px rgba(13,55,51,.1); }
.user-menu { padding: 0; display: flex; align-items: center; gap: 9px; color: var(--ink); border: 0; background: transparent; text-align: left; }
.user-avatar { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: #c88736; border-radius: 10px; font-size: .8rem; font-weight: 750; }
.user-copy { flex-direction: column; line-height: 1.2; }
.user-copy strong { max-width: 130px; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.user-copy small { color: #8b9997; font-size: .65rem; }
.user-menu > svg { width: 14px; height: 14px; color: #8b9997; }
.user-dropdown { min-width: 205px; }
.user-dropdown .dropdown-header { display: flex; flex-direction: column; color: var(--ink); }
.user-dropdown .dropdown-header strong { font-size: .85rem; }
.user-dropdown .dropdown-header small { color: var(--muted); font-size: .7rem; }
.user-dropdown .dropdown-item { width: 100%; display: flex; align-items: center; gap: 9px; }
.user-dropdown .dropdown-item svg { width: 17px; height: 17px; }
.app-content { width: 100%; min-width: 0; max-width: 1600px; margin: 0 auto; padding: 30px clamp(16px,2.5vw,34px) 46px; }
.app-content > *, .app-content .row > *, .app-content .d-flex > * { min-width: 0; }
.app-alert { min-height: 48px; display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; }
.app-alert.alert-success { --bs-alert-color: #195b52; --bs-alert-bg: #e6f4ef; --bs-alert-border-color: #c6e5db; }
.app-alert > svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; }
.app-alert > span { overflow-wrap: anywhere; }

/* Shared app surfaces */
.page-heading, .page-header { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-heading h1, .page-header h1 { margin: 2px 0 5px; color: var(--ink); font-size: clamp(1.55rem,2vw,2rem); font-weight: 720; letter-spacing: -.035em; overflow-wrap: anywhere; }
.page-heading p, .page-header p { max-width: 720px; margin: 0; color: var(--muted); font-size: .9rem; }
.page-eyebrow, .eyebrow { color: var(--teal); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.page-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.panel, .card, .content-card { min-width: 0; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { min-width: 0; overflow: hidden; }
.content-card { padding: 20px; }
.panel-header, .panel-heading, .card-header { min-height: 70px; padding: 17px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border-bottom: 1px solid #e7ecea; }
.panel-header h2, .panel-heading h2, .section-heading h2 { margin: 1px 0 0; font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.panel-body { padding: 20px; }
.section-heading { margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-heading p { margin: 7px 0 0; color: var(--muted); font-size: .875rem; }
.form-actions { padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); }
.form-actions .btn { min-width: 90px; }
.panel-kicker { display: block; color: var(--teal); font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.panel-kicker.danger { color: var(--rose); }
.panel-link { flex: 0 0 auto; color: #54706d; font-size: .75rem; font-weight: 650; }
.panel-link:hover { color: var(--teal); }
.form-control, .form-select { min-width: 0; min-height: 42px; color: var(--ink); border-color: #d6e0de; border-radius: 8px; font-size: .875rem; }
.form-label { margin-bottom: .4rem; color: #3e504e; font-size: .75rem; font-weight: 650; }
.form-control::placeholder { color: #a4afad; }
.form-check-input:checked { background-color: var(--teal); border-color: var(--teal); }
.text-danger, .field-validation-error { color: #a83f47 !important; font-size: .73rem; }
.validation-summary-valid, .field-validation-valid, .alert:empty { display: none; }
.validation-summary-errors { display: block; margin-bottom: 20px; padding: 12px 15px; color: #913b42; background: var(--rose-soft); border: 1px solid #efcfd2; border-radius: 9px; font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.validation-summary-errors ul { margin-bottom: 0; }
.input-validation-error { border-color: var(--rose); }
.select-filter { width: 100%; min-width: 0; margin-bottom: 6px; }
.select-filter .form-control { min-height: 36px; font-size: .8rem; }
.select-filter-status { margin-top: 4px; color: #8a5620; font-size: .75rem; }
.select-filter-status:empty { display: none; }
.table-responsive { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.app-content .table { --bs-table-border-color: #e5ece9; --bs-table-hover-bg: #f4f9f7; font-size: .875rem; }
.app-content .table > :not(caption) > * > * { padding: 12px 16px; }
.app-content .table > thead > tr > th { color: #526764; background: #f8faf9; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.app-content .table td { vertical-align: middle; }
.app-content .table-responsive > .table-hover, .app-table { min-width: 820px; }
.app-content .table-hover > tbody > tr > td:first-child:not([colspan]),
.app-content .table .font-monospace, .document-link,
.app-content .table a[href*="/SalesOrders/Details/"],
.app-content .table a[href*="/Inquiries/Details/"] { white-space: nowrap; }
.app-content .card:has(#supplier-search, #customer-search) > .table-responsive > .table > :is(thead, tbody) > tr > :nth-child(2) { min-width: 180px; }
.app-content .table .btn, .app-content .table .badge { white-space: nowrap; }
.app-content .table .form-control { min-width: 100px; }
.app-content .table .form-select { min-width: 200px; max-width: 370px; }
.app-content .table .input-group { min-width: 190px; flex-wrap: nowrap; }
.app-content .table .input-group .form-control { flex: 1 1 100px; }
.app-content .table .select-filter { min-width: 200px; max-width: 370px; }
.app-content .table textarea { min-width: 220px; }

.app-table { --bs-table-bg: transparent; font-size: .8rem; }
.app-table > thead > tr > th { padding: 11px 16px; color: #7a8a87; background: #f8faf9; border-bottom-color: #dfe7e4; font-size: .64rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.app-table > tbody > tr > td { padding: 14px 16px; color: #465653; border-bottom-color: #e9eeec; vertical-align: middle; }
.app-table > tbody > tr:last-child > td { border-bottom: 0; }
.app-table > tbody > tr:hover { background: #fbfcfc; }
.app-table td small { display: block; margin-top: 3px; color: #899693; font-size: .68rem; }
.table-primary-text { color: #2b3b39; font-weight: 620; }
.document-link { color: #176d67; font-weight: 700; }
.table-arrow { width: 30px; height: 30px; display: grid; place-items: center; color: #79918e; border: 1px solid #dce5e3; border-radius: 7px; }
.table-arrow:hover { color: #fff; border-color: var(--teal); background: var(--teal); }
.status-badge { width: max-content; padding: 5px 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.status-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-success { color: #216f5d; background: #e4f3ed; }
.status-danger { color: #9b4149; background: #f9e8ea; }
.status-neutral { color: #657370; background: #edf1f0; }
.status-info { color: #2b6b83; background: #e6f1f5; }
.status-warning { color: #9a661a; background: #fff0d3; }
.empty-state { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #96a4a1; }
.empty-state span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px dashed #c8d3d0; border-radius: 50%; }
.empty-state p { margin: 10px 0 0; font-size: .8rem; }
.empty-state.compact { min-height: 150px; }

/* Dashboard */
.dashboard-heading { align-items: center; }
.metric-grid { margin-bottom: 22px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.metric-card { position: relative; min-width: 0; min-height: 150px; padding: 18px 19px 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 7px 24px rgba(24,56,53,.045); }
.metric-topline { display: flex; align-items: center; justify-content: space-between; }
.metric-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; }
.metric-icon svg { width: 19px; height: 19px; }
.metric-topline > a { width: 26px; height: 26px; display: grid; place-items: center; color: #91a09e; border-radius: 6px; }
.metric-topline > a:hover { color: var(--teal); background: var(--teal-soft); }
.metric-topline > a svg { width: 16px; height: 16px; }
.metric-kicker { color: #8a9895; font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.metric-value { margin-top: 13px; color: #1d2d2c; font-size: clamp(1.55rem,2vw,1.95rem); font-weight: 730; line-height: 1; letter-spacing: -.04em; }
.metric-label { margin-top: 7px; color: #73827f; font-size: .75rem; }
.metric-accent { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; opacity: .85; }
.metric-teal .metric-icon { color: var(--teal); background: var(--teal-soft); }
.metric-teal .metric-accent { background: var(--teal); }
.metric-amber .metric-icon { color: var(--amber); background: var(--amber-soft); }
.metric-amber .metric-accent { background: var(--amber); }
.metric-blue .metric-icon { color: var(--blue); background: var(--blue-soft); }
.metric-blue .metric-accent { background: var(--blue); }
.metric-rose .metric-icon { color: var(--rose); background: var(--rose-soft); }
.metric-rose .metric-accent { background: var(--rose); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(320px,.85fr); gap: 18px; align-items: start; }
.shipment-panel { grid-column: 1 / -1; }
.overdue-list { padding: 5px 17px 8px; }
.overdue-item { padding: 13px 2px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; color: var(--ink); border-bottom: 1px solid #edf1f0; }
.overdue-item:last-child { border-bottom: 0; }
.overdue-item:hover { color: var(--ink); }
.overdue-item:hover .overdue-copy strong { color: var(--teal); }
.company-avatar { width: 36px; height: 36px; display: grid; place-items: center; color: #7b4b25; background: #f4e8dc; border-radius: 10px; font-size: .74rem; font-weight: 750; }
.overdue-copy, .overdue-amount { min-width: 0; display: flex; flex-direction: column; }
.overdue-copy strong { overflow: hidden; color: #354643; font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; transition: color .15s; }
.overdue-copy small, .overdue-amount small { margin-top: 3px; color: #8b9896; font-size: .63rem; }
.overdue-amount { align-items: flex-end; text-align: right; }
.overdue-amount strong { color: var(--rose); font-size: .72rem; }
.shipment-list { padding: 5px 17px 8px; }
.shipment-row { min-height: 67px; padding: 9px 2px; display: grid; grid-template-columns: 45px minmax(220px,1fr) minmax(120px,.55fr) auto 30px; align-items: center; gap: 14px; color: var(--ink); border-bottom: 1px solid #edf1f0; }
.shipment-row:last-child { border-bottom: 0; }
.shipment-row:hover { color: var(--ink); }
.shipment-date { width: 42px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f0f5f3; border-radius: 9px; line-height: 1; }
.shipment-date strong { font-size: 1rem; }
.shipment-date small { margin-top: 4px; color: #70817e; font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.shipment-route, .shipment-meta { min-width: 0; display: flex; flex-direction: column; }
.shipment-route strong { overflow: hidden; color: #31413f; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.shipment-route strong i { margin: 0 4px; color: #90a19e; font-style: normal; }
.shipment-route small, .shipment-meta small { margin-top: 4px; overflow: hidden; color: #84928f; font-size: .66rem; white-space: nowrap; text-overflow: ellipsis; }
.shipment-meta strong { color: #50625f; font-size: .72rem; }

/* Sign-in */
.password-change-body { background: #e4eae8; }
.password-change-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.password-change-dialog { width: min(100%, 460px); padding: clamp(24px, 5vw, 32px); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 64px rgba(16, 42, 44, .16); }
.password-change-header { margin-bottom: 26px; }
.password-change-header h1 { margin: 0 0 10px; font-size: 1.5rem; font-weight: 700; }
.password-change-header p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.password-change-dialog .form-control { min-height: 44px; }
.password-change-submit { width: 100%; min-height: 46px; justify-content: center; margin-top: 5px; }
.auth-body { background: #f7f9f8; }
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; }
.auth-topbar { position: absolute; z-index: 10; top: 0; right: 0; left: 0; height: 76px; padding: 0 clamp(20px,4vw,58px); display: flex; align-items: center; justify-content: space-between; }
.auth-content { flex: 1; display: flex; }
.login-layout { width: 100%; min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(430px,.92fr); }
.login-story { position: relative; min-height: 650px; padding: 130px clamp(48px,8vw,130px) 58px; display: flex; align-items: center; overflow: hidden; color: #fff; background: #102b2d; }
.story-grid { position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom right,#000,transparent 85%); }
.story-glow { position: absolute; border-radius: 50%; filter: blur(2px); }
.story-glow-one { width: 460px; height: 460px; bottom: -190px; left: -180px; background: radial-gradient(circle,rgba(37,147,135,.27),transparent 70%); }
.story-glow-two { width: 420px; height: 420px; top: 80px; right: -180px; background: radial-gradient(circle,rgba(188,133,53,.13),transparent 70%); }
.story-content { position: relative; z-index: 2; max-width: 650px; }
.story-kicker { color: #75c2b5; font-size: .68rem; font-weight: 750; letter-spacing: .15em; }
.story-content h1 { max-width: 630px; margin: 20px 0; font-size: clamp(2.55rem,4.2vw,4.5rem); font-weight: 680; line-height: 1.08; letter-spacing: -.052em; white-space: pre-line; }
.story-content > p { max-width: 500px; margin: 0; color: #9db7b3; font-size: 1rem; line-height: 1.75; }
.story-flow { margin-top: 54px; display: flex; align-items: center; }
.flow-node { min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #8ea6a2; font-size: .65rem; white-space: nowrap; }
.flow-node i { width: 33px; height: 33px; display: grid; place-items: center; color: #91aca7; border: 1px solid #42605d; border-radius: 50%; font-size: .6rem; font-style: normal; }
.flow-node.active { color: #d6ebe7; }
.flow-node.active i { color: #0f3532; border-color: #6dc2b4; background: #80cbbc; }
.flow-line { flex: 1; height: 1px; margin: 0 7px 20px; background: #3b5754; }
.story-foot { position: absolute; z-index: 2; bottom: 35px; left: clamp(48px,8vw,130px); color: #54716d; font-size: .58rem; font-weight: 700; letter-spacing: .13em; }
.login-form-side { padding: 112px 46px 54px; display: grid; place-items: center; background: #f8faf9; }
.login-card { width: min(100%,430px); }
.login-intro { margin-bottom: 31px; display: flex; align-items: flex-start; gap: 15px; }
.login-mark { width: 44px; height: 44px; flex: 0 0 auto; display: none; place-items: center; color: #fff; background: var(--teal); border-radius: 11px; }
.login-mark svg { width: 25px; height: 25px; }
.login-intro h2 { margin: 4px 0 7px; font-size: 2rem; font-weight: 720; letter-spacing: -.04em; }
.login-intro p { margin: 0; color: var(--muted); font-size: .88rem; }
.login-error { margin-bottom: 20px; padding: 11px 13px; display: flex; align-items: center; gap: 9px; color: #913b42; background: var(--rose-soft); border: 1px solid #efcfd2; border-radius: 9px; font-size: .78rem; }
.login-error svg { width: 18px; height: 18px; flex: 0 0 auto; }
.login-form { display: flex; flex-direction: column; gap: 19px; }
.form-group { min-width: 0; }
.input-with-icon { position: relative; }
.input-with-icon > svg { position: absolute; z-index: 2; top: 50%; left: 13px; width: 18px; height: 18px; color: #82918e; transform: translateY(-50%); pointer-events: none; }
.input-with-icon .form-control { height: 48px; padding-left: 42px; background: #fff; }
.input-with-icon.has-action .form-control { padding-right: 44px; }
.password-toggle { position: absolute; top: 50%; right: 7px; width: 34px; height: 34px; display: grid; place-items: center; color: #80908d; border: 0; border-radius: 7px; background: transparent; transform: translateY(-50%); }
.password-toggle:hover { color: var(--teal); background: var(--teal-soft); }
.password-toggle svg { width: 18px; height: 18px; }
.login-options { margin-top: -4px; display: flex; justify-content: space-between; }
.login-options .form-check { display: flex; align-items: center; gap: 7px; }
.login-options .form-check-input { margin-top: 0; }
.login-options .form-check-label { color: #5f716e; font-size: .76rem; }
.login-submit { width: 100%; height: 49px; padding-right: 15px; padding-left: 18px; justify-content: space-between; }
.login-submit svg { width: 19px; height: 19px; }
.demo-account { margin-top: 27px; padding: 13px 14px; display: flex; align-items: center; gap: 11px; background: #edf3f1; border: 1px solid #dce7e4; border-radius: 9px; }
.demo-account > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--teal); background: #fff; border-radius: 8px; }
.demo-account svg { width: 17px; height: 17px; }
.demo-account strong { color: #435754; font-size: .7rem; }
.demo-account p { margin: 2px 0 0; color: #71827f; font-size: .68rem; }

@media (min-width: 992px) {
  .auth-shell-login .auth-topbar .brand, .auth-shell-login .auth-topbar .brand:hover { color: #fff; }
  .auth-shell-login .auth-topbar .brand small { color: #b7cfcb; }
  .app-sidebar { position: fixed !important; z-index: 1030; inset: 0 auto 0 0; visibility: visible !important; transform: none !important; }
  .app-main { margin-left: var(--sidebar-width); }
}

@media (max-width: 1199.98px) {
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: minmax(0,1.45fr) minmax(300px,.8fr); }
  .login-story { padding-right: 58px; padding-left: 58px; }
  .story-foot { left: 58px; }
}

@media (max-width: 991.98px) {
  .sidebar-brand-wrap { min-height: 72px; padding-right: 12px; padding-left: 16px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .shipment-panel { grid-column: auto; order: 2; }
  .recent-orders-panel { order: 1; }
  .overdue-panel { order: 3; }
  .login-layout { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .login-form-side { min-height: 100vh; padding: 110px 24px 50px; }
  .login-mark { display: grid; }
  .auth-topbar { background: rgba(248,250,249,.92); backdrop-filter: blur(8px); }
}

@media (max-width: 767.98px) {
  :root { --topbar-height: 64px; }
  .app-content { padding-top: 22px; }
  .topbar-title small { display: none; }
  .topbar-title strong { max-width: 100%; }
  .page-heading, .page-header { align-items: flex-start; flex-direction: column; gap: 16px; }
  .app-content > .d-flex, .app-content form.d-flex, .app-content .btn-group { flex-wrap: wrap; }
  .app-content form.d-flex > .form-select { flex: 1 1 140px; }
  .app-content .btn-group { max-width: 100%; }
  .app-content .btn { min-height: 44px; }
  .panel-body, .content-card { padding: 16px; }
  .form-actions .btn { flex: 1 1 120px; }
  .page-actions { width: 100%; }
  .page-actions .btn, .page-actions .dropdown { flex: 1; }
  .page-actions .dropdown .btn { width: 100%; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .metric-card { min-height: 140px; padding: 15px; }
  .metric-label { min-height: 30px; }
  .shipment-row { grid-template-columns: 43px minmax(0,1fr) auto 30px; gap: 10px; }
  .shipment-row .status-badge { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 479.98px) {
  html { font-size: 14px; }
  .app-topbar { padding: 0 12px; }
  .topbar-actions { gap: 8px; }
  .topbar-start { gap: 8px; }
  .language-switcher { display: flex; height: 50px; padding: 2px; }
  .language-option { min-width: 44px; height: 44px; }
  .sidebar-trigger { flex: 0 0 44px; min-height: 44px; }
  .user-menu { min-width: 44px; min-height: 44px; justify-content: center; }
  .user-menu > svg { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-value { font-size: 1.55rem; }
  .metric-card { min-height: 135px; }
  .overdue-item { grid-template-columns: 36px minmax(0,1fr); }
  .overdue-amount { grid-column: 2; align-items: flex-start; text-align: left; }
  .shipment-row { grid-template-columns: 42px minmax(0,1fr) 28px; }
  .shipment-row .status-badge { display: none; }
  .auth-topbar { padding: 0 18px; }
  .auth-topbar .brand small { display: none; }
  .auth-topbar .language-switcher { display: flex; }
  .login-form-side { padding-right: 18px; padding-left: 18px; }
}

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