:root {
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    color: #17364a;
    background: #f5f8fa;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    --navy: #123b50;
    --blue: #176f9b;
    --cyan: #3caec2;
    --muted: #788c99;
    --border: #e5edf1;
    --green: #238567;
    --shadow: 0 12px 35px rgba(27, 70, 91, .055);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f5f8fa; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; display: flex; flex-direction: column; overflow-y: auto; padding: 27px 19px 18px; background: #fff; border-right: 1px solid var(--border); z-index: 3; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; color: var(--navy); }
.brand-mark { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #1d83a4, #33b2bb); font: 800 13px 'Manrope', sans-serif; letter-spacing: -.5px; box-shadow: 0 6px 12px rgba(42, 159, 174, .18); }
.brand-logo { flex: 0 0 54px; width: 54px; height: 54px; padding: 2px; border: 1px solid var(--border); background: #fff; object-fit: contain; }
.brand strong, .user-summary strong { display: block; font: 800 15px 'Manrope', sans-serif; }
.brand small, .user-summary small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.main-nav { display: flex; flex-direction: column; gap: 5px; margin-top: 22px; }
.main-nav [hidden] { display: none !important; }
.main-nav a, .nav-module-toggle { position: relative; display: flex; align-items: center; min-height: 42px; padding: 0 12px; border: 0; border-radius: 9px; color: #718693; background: transparent; font-size: 12px; font-weight: 600; text-align: left; transition: .15s ease; }
.main-nav > .nav-link { gap: 11px; }
.main-nav a:hover, .nav-module-toggle:hover { color: var(--navy); background: #f3f8fa; }
.main-nav a.active { color: #116f89; background: #eaf6f7; }
.main-nav a.active::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 3px; background: #39a9b5; content: ''; }
.nav-module { display: flex; flex-direction: column; gap: 3px; }
.nav-module-toggle { width: 100%; gap: 11px; color: #536d7a; font-weight: 700; cursor: pointer; }
.nav-module-toggle.is-current { color: #116f89; background: #edf7f8; }
.nav-module-toggle > span { flex: 1; }
.nav-module-icon, .nav-chevron, .nav-link svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.nav-chevron { width: 15px; height: 15px; flex-basis: 15px; transition: transform .15s ease; }
.nav-module.is-open .nav-chevron { transform: rotate(90deg); }
.nav-submenu { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px 13px; padding-left: 12px; border-left: 1px solid #e5edf1; }
.nav-submenu .nav-link { min-height: 37px; gap: 10px; padding: 0 10px; font-size: 11px; }
.nav-submenu .nav-link svg { width: 16px; height: 16px; flex-basis: 16px; }
.nav-submenu .nav-link.active::before { top: 9px; bottom: 9px; }
.sidebar-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 13px 10px 0; color: #82939d; border-top: 1px solid var(--border); font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #37ad84; box-shadow: 0 0 0 3px #e6f5ee; }
.sidebar-toggle { width: 30px; height: 30px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 8px; color: #718693; background: #fff; }
.sidebar-toggle:hover { color: var(--navy); background: #f3f8fa; }
.sidebar-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .18s ease; }
.main-area { min-height: 100vh; margin-left: 252px; }
.topbar { position: sticky; top: 0; z-index: 2; height: 76px; display: flex; align-items: center; gap: 17px; padding: 0 42px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); }
.topbar-spacer { flex: 1; }
.user-summary { display: flex; align-items: center; gap: 10px; margin-right: 2px; }
.user-summary strong { font-size: 12px; }
.user-summary small { font-size: 10px; }
.avatar { width: 35px; height: 35px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; color: #177d91; background: #e4f4f4; font-weight: 700; font-size: 13px; }
.mobile-brand { display: none; }
.page-content { max-width: 1440px; margin: 0 auto; padding: 35px 42px 52px; }
.page-content > .panel { width: 100%; max-width: none; margin-right: 0; margin-left: 0; }
.page-content > .cash-transaction-entry-form { width: 100%; max-width: none; margin-right: 0; margin-left: 0; }
.page-content > .sales-order-form, .page-content > .delivery-order-form { max-width: none; margin-right: 0; margin-left: 0; }
html.sidebar-collapsed .sidebar { width: 78px; padding-right: 10px; padding-left: 10px; }
html.sidebar-collapsed .main-area { margin-left: 78px; }
html.sidebar-collapsed .brand { justify-content: center; padding: 0; }
html.sidebar-collapsed .brand > span:not(.brand-mark) { display: none; }
html.sidebar-collapsed .brand-logo { flex-basis: 44px; width: 44px; height: 44px; }
html.sidebar-collapsed .main-nav a, html.sidebar-collapsed .nav-module-toggle { justify-content: center; gap: 0; padding-right: 0; padding-left: 0; }
html.sidebar-collapsed .main-nav a > span, html.sidebar-collapsed .nav-module-toggle > span, html.sidebar-collapsed .nav-chevron { display: none; }
html.sidebar-collapsed .nav-submenu { display: none !important; }
html.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.purchase-heading-content { display: flex; align-items: center; gap: 18px; }
.purchase-heading-content .company-document-brand { min-width: 190px; }
.heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.page-heading h1, .login-card h1 { margin: 4px 0 7px; color: #16384d; font: 800 26px 'Manrope', sans-serif; letter-spacing: -.8px; }
.page-heading .muted { margin: 0; }
.eyebrow { margin: 0; color: #43a3ad; font-size: 9px; font-weight: 800; letter-spacing: 1.25px; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.65; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 700; transition: .15s ease; }
.button-primary { color: #fff; background: #167a92; box-shadow: 0 4px 10px rgba(22,122,146,.12); }
.button-primary:hover { background: #116980; transform: translateY(-1px); }
.button-primary:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.button-quiet { color: #617b89; background: #fff; border-color: var(--border); }
.button-quiet:hover { color: var(--navy); background: #f6fafb; }
.button-quiet .print-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.button-small { min-height: 33px; padding: 0 12px; font-size: 11px; }
.button-wide { width: 100%; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { min-height: 150px; padding: 19px 19px 17px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.stat-card-highlight { background: linear-gradient(145deg, #fff, #f3fbf9); }
.stat-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; border-radius: 10px; font-size: 10px; font-weight: 800; }
.icon-blue { color: #287baa; background: #eaf4fb; }
.icon-cyan { color: #2398a7; background: #e6f7f7; }
.icon-amber { color: #ae7b27; background: #fff5df; }
.icon-green { color: #258469; background: #e7f6ef; }
.stat-label { display: block; margin-bottom: 5px; color: #7d8f99; font-size: 11px; font-weight: 600; }
.stat-value { display: block; color: #1c3e51; font: 800 25px 'Manrope', sans-serif; letter-spacing: -.5px; }
.stat-currency { font-size: 19px; }
.stat-note { display: block; margin-top: 4px; color: #a1adb4; font-size: 10px; }
.panel { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 21px 23px 17px; }
.panel-heading h2, .info-card h2 { margin: 0 0 5px; color: #1a3b4e; font: 700 15px 'Manrope', sans-serif; }
.panel-heading .muted { margin: 0; font-size: 11px; }
.text-link { color: #208397; font-size: 11px; font-weight: 700; }
.text-link:hover { color: #115c71; }
.table-actions { display: flex; align-items: center; gap: 6px; }
.table-actions form { display: inline-flex; margin: 0; }
.icon-action { width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #e3ebee; border-radius: 7px; color: #357387; background: #fff; cursor: pointer; }
.icon-action:hover { color: #115c71; background: #f0f8f9; }
.icon-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.icon-action-danger { color: #b35353; }
.icon-action-danger:hover { color: #983d3d; background: #fff3f2; }
.invoice-detail-meta { padding: 13px 17px; color: #82949e; font-size: 10px; }
.invoice-paper { max-width: 1000px; margin: 0 auto; padding: 42px 48px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.invoice-paper-heading { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 16px; }
.invoice-paper-heading h2 { margin: 0; color: #17364a; font: 800 24px 'Manrope', sans-serif; letter-spacing: 1.5px; text-align: center; }
.invoice-brand { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.invoice-brand strong, .invoice-brand small { display: block; }
.invoice-brand small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.invoice-paper-rule { grid-column: 1 / -1; height: 2px; margin-top: 18px; background: #17364a; }
.invoice-parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .75fr); gap: 40px; padding: 28px 0; }
.invoice-section-label { color: #82949e; font-size: 9px; font-weight: 800; letter-spacing: .9px; }
.invoice-parties h3 { margin: 9px 0; color: #274c5e; font: 800 16px 'Manrope', sans-serif; }
.invoice-parties p { margin: 4px 0; color: #607884; font-size: 11px; line-height: 1.5; }
.invoice-meta { margin: 0; }
.invoice-meta > div { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 6px 0; }
.invoice-meta dt { color: #82949e; font-size: 10px; }
.invoice-meta dd { margin: 0; color: #274c5e; font-size: 10px; font-weight: 700; text-align: right; }
.invoice-lines table { white-space: normal; }
.invoice-lines th, .invoice-lines td { padding: 13px 12px; }
.invoice-lines tbody td { color: #516c7a; }
.invoice-total { width: min(100%, 340px); display: flex; justify-content: space-between; gap: 16px; margin: 22px 0 0 auto; padding: 16px; border-radius: 8px; color: #fff; background: #173f53; }
.invoice-total span { font-size: 12px; }
.invoice-total strong { font: 800 16px 'Manrope', sans-serif; white-space: nowrap; }
.invoice-paper-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 14px; border-top: 1px solid #e7eef0; color: #82949e; font-size: 10px; }
.delivery-order-form { display: block; width: 100%; max-width: 1000px; margin-right: auto; margin-left: auto; box-sizing: border-box; }
.delivery-order-form .invoice-paper-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.delivery-order-form .invoice-parties { grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr); align-items: start; }
.delivery-order-form .delivery-order-meta { display: grid; grid-template-rows: repeat(2, minmax(56px, auto)); gap: 0; margin-top: 9px; }
.delivery-order-form .delivery-order-meta > div { grid-template-columns: minmax(68px, .7fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; }
.delivery-order-form .delivery-order-meta dt { padding-top: 0; }
.delivery-order-form .delivery-order-meta dd { min-width: 0; text-align: left; }
.delivery-order-form .delivery-order-meta dd input { text-align: left; }
.delivery-customer-contact { display: block; margin-top: 4px; color: #607884; font-size: 10px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.delivery-order-form .invoice-parties > div, .delivery-order-form .delivery-schedule-fields > label { min-width: 0; }
.delivery-order-form .invoice-parties h3, .delivery-order-form .invoice-parties p { overflow-wrap: anywhere; }
.delivery-order-selection { margin: 20px 0 0; padding-bottom: 20px; border-bottom: 1px solid #e7eef0; }
.delivery-order-selection label { max-width: 100%; }
.delivery-order-meta { margin-top: 12px; }
.delivery-order-meta dd input { text-align: left; }
.delivery-order-form .invoice-lines { margin-bottom: 28px; }
.delivery-order-form .invoice-lines th, .delivery-order-form .invoice-lines td { vertical-align: top; }
.delivery-quantity-field { min-width: 190px; }
.delivery-quantity-field .field-hint { display: block; max-width: 280px; margin-top: 3px; }
.delivery-schedule-footer { padding-top: 23px; border-top: 1px solid #e7eef0; }
.delivery-schedule-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.delivery-pickup-field { grid-column: 1 / -1; }
.delivery-order-footer { align-items: center; margin-top: 25px; }
.delivery-order-footer .form-actions { padding-top: 0; border-top: 0; }
.sales-order-form { display: block; width: 100%; max-width: 1000px; margin-right: auto; margin-left: auto; box-sizing: border-box; }
.sales-order-form .invoice-paper-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.sales-order-parties { grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr); align-items: start; }
.sales-order-parties > div { min-width: 0; }
.sales-order-parties h3, .sales-order-parties p { overflow-wrap: anywhere; }
.sales-order-meta { display: grid; grid-template-rows: repeat(2, minmax(56px, auto)); gap: 0; margin-top: 9px; }
.sales-order-meta > div { grid-template-columns: minmax(85px, .7fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; }
.sales-order-meta dd { min-width: 0; text-align: left; overflow-wrap: anywhere; }
.sales-order-meta dd input { text-align: left; }
.sales-order-input { min-width: 135px; }
.sales-order-form .invoice-lines th, .sales-order-form .invoice-lines td { vertical-align: middle; }
.sales-order-form-footer { padding-top: 23px; border-top: 1px solid #e7eef0; }
.sales-order-form-footer textarea { min-height: 84px; }
.sales-order-footer { align-items: center; margin-top: 25px; }
.sales-order-footer .form-actions { padding-top: 0; border-top: 0; }
.numeric-heading, .numeric-cell { text-align: right !important; }
.numeric-input, .numeric-input input { text-align: right !important; }
.numeric-detail { text-align: right; }
.journey-expense-list .numeric-detail { margin-left: auto; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { padding: 11px 16px; color: #91a0a9; background: #f8fafb; border-top: 1px solid #edf1f3; border-bottom: 1px solid #edf1f3; font-size: 9px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; }
td { padding: 13px 16px; color: #516c7a; border-bottom: 1px solid #f0f3f5; font-size: 11px; }
tr:last-child td { border-bottom: 0; }
td strong { color: #28485a; font-weight: 700; }
.cell-sub { display: block; margin-top: 4px; color: #9aa8af; font-size: 10px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; }
.badge-success { color: #21775e; background: #e9f6ef; }
.badge-warning { color: #a87920; background: #fff5df; }
.badge-info { color: #287d9b; background: #e9f5fa; }
.badge-neutral { color: #7b8b94; background: #eff2f4; }
.empty-state { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; color: #56707e; text-align: center; }
.empty-state strong { margin-top: 10px; color: #34566a; font-size: 12px; }
.empty-state p { margin: 6px 0 0; color: #90a0a8; font-size: 11px; }
.empty-mark { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #278c9d; background: #e8f6f7; font-size: 13px; font-weight: 800; }
.compact-empty { min-height: 150px; box-shadow: none; }
.pagination-wrap { padding: 13px 17px; border-top: 1px solid #f0f3f5; }
.pagination-wrap nav > div:first-child { color: #84949c; font-size: 10px; }
.pagination-wrap nav > div:last-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pagination-wrap nav span, .pagination-wrap nav a { min-width: 27px; display: inline-flex; justify-content: center; align-items: center; padding: 5px 8px; border: 1px solid #e8eef1; border-radius: 5px; color: #527282; font-size: 10px; }
.pagination-wrap nav span[aria-current="page"] span { color: #fff; background: #167a92; border-color: #167a92; }
.pagination-wrap nav svg { width: 13px; height: 13px; }
.dashboard-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 18px; }
.dashboard-aging-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.dashboard-aging-card { min-width: 0; }
.aging-list { margin: 14px 0; }
.aging-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf1f3; font-size: 11px; }
.aging-list dt { color: #718693; }
.aging-list dd { margin: 0; color: #274c5e; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.aging-list .aging-total { border-bottom: 0; border-top: 1px solid #dfe8eb; font-weight: 800; }
.aging-detail-title { display: block; margin: 15px 0 7px; color: #516c7a; font-size: 11px; }
.aging-detail-list { margin: 0 0 13px; padding: 0; list-style: none; }
.aging-detail-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: #718693; border-bottom: 1px solid #edf1f3; font-size: 10px; }
.aging-detail-list li strong { color: #274c5e; font-variant-numeric: tabular-nums; text-align: right; }
.info-card { padding: 21px 23px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.info-card-soft { background: linear-gradient(145deg, #f0faf8, #fff); }
.info-kicker { display: block; margin-bottom: 12px; color: #52a0a6; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.info-card h2 { font-size: 16px; }
.info-card p { margin: 8px 0 14px; color: #83939b; font-size: 11px; line-height: 1.7; }
.workflow { display: flex; align-items: center; gap: 9px; margin-top: 19px; color: #286d7d; font-size: 10px; font-weight: 700; }
.workflow span { padding: 7px 9px; border-radius: 6px; background: #eff8f8; }
.workflow b { color: #a2b3b8; }
.alert { margin-bottom: 18px; padding: 12px 15px; border: 1px solid transparent; border-radius: 8px; font-size: 11px; line-height: 1.6; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert-success { color: #246d56; background: #ecf8f1; border-color: #d7eee1; }
.alert-error { color: #995454; background: #fff1ef; border-color: #f5ddda; }
.alert-info { color: #34748a; background: #edf8fa; border-color: #d9edf1; }
.form-panel { padding: 24px; }
.form-stack { display: flex; flex-direction: column; gap: 17px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
label { display: flex; flex-direction: column; gap: 7px; color: #526d7a; font-size: 11px; font-weight: 700; }
input:not([type="checkbox"]), select, textarea { width: 100%; min-height: 41px; padding: 10px 12px; outline: none; border: 1px solid #dfe8ec; border-radius: 7px; color: #294a5c; background: #fff; font-size: 11px; font-weight: 400; transition: .15s ease; }
textarea { min-height: auto; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #58aebb; box-shadow: 0 0 0 3px rgba(74, 171, 183, .12); }
input::placeholder, textarea::placeholder { color: #abb7bd; }
.form-span-2 { grid-column: span 2; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 16px; border-top: 1px solid #edf1f3; }
.field-hint { color: #96a4aa; font-size: 10px; font-weight: 400; line-height: 1.5; }
.availability-panel { margin-bottom: 16px; }
.edit-order-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 22px; padding: 14px 15px; border: 1px solid #e2eff1; border-radius: 8px; background: #f3f9fa; }
.edit-summary-label { color: #64838e; font-size: 10px; }
.edit-order-summary strong { color: #176f86; font-size: 11px; }
.edit-order-summary > span:last-child { color: #80929b; font-size: 10px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 17px; }
.detail-panel { padding: 0 22px 22px; }
.detail-panel .panel-heading { padding-right: 0; padding-left: 0; }
.detail-list { margin: 0; }
.detail-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #f0f3f5; }
.detail-list dt { color: #84949b; font-size: 10px; }
.detail-list dd { margin: 0; color: #315265; font-size: 11px; font-weight: 700; text-align: right; }
.receipt-summary { padding: 2px 0 12px; color: #496574; font-size: 11px; }
.receipt-summary p { margin: 14px 0 5px; }
.signature-wrap { overflow: hidden; border: 1px solid #dfe8ec; border-radius: 8px; background: repeating-linear-gradient(0deg,#fff,#fff 31px,#f2f6f7 32px); }
#signature-canvas { width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; }
.signature-image { display: block; width: min(100%, 400px); height: auto; margin: 10px 0 0; border: 1px solid #e8eef0; border-radius: 7px; background: #fff; }
.signature-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.selection-count { padding: 7px 10px; border-radius: 20px; color: #27849a; background: #eaf7f8; font-size: 10px; font-weight: 700; white-space: nowrap; }
.check-cell { width: 42px; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: #17859a; vertical-align: middle; }
.selection-total { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 17px 22px; border-top: 1px solid #edf1f3; color: #768a94; font-size: 11px; }
.selection-total strong { color: #24485b; font-size: 12px; }
.selection-total strong span { margin-left: 7px; color: #167b91; font: 800 16px 'Manrope', sans-serif; }
.selection-panel { margin-bottom: 16px; }
.invoice-chip { display: inline-block; margin: 2px 3px 2px 0; padding: 5px 7px; border-radius: 5px; color: #4a7180; background: #f0f7f8; font-size: 9px; }
.master-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.master-panel { padding: 0 20px 19px; }
.master-panel .panel-heading { padding-right: 0; padding-left: 0; }
.compact-form { gap: 12px; padding-bottom: 19px; border-bottom: 1px solid #edf1f3; }
.compact-form .form-grid { gap: 11px; }
.compact-form .button { align-self: flex-start; }
.master-list { display: flex; flex-direction: column; gap: 0; padding-top: 9px; }
.master-row { min-height: 55px; display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1f4f5; }
.master-row:last-child { border-bottom: 0; }
.master-row > span:nth-child(2) { min-width: 0; flex: 1; }
.master-row strong { display: block; overflow: hidden; color: #35566a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.master-row small { display: block; margin-top: 4px; color: #96a4aa; font-size: 9px; }
.master-photo-wrap { width: 42px; height: 42px; display: inline-flex; flex: 0 0 42px; align-items: center; justify-content: center; overflow: hidden; border-radius: 9px; background: #f0f6f7; }
.master-photo { width: 100%; height: 100%; object-fit: cover; }
.avatar-soft, .truck-mark { width: 30px; height: 30px; }
.truck-mark { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 9px; color: #2784a0; background: #eaf5fa; font-size: 9px; font-weight: 800; }
.master-panel nav { margin-top: 10px; }
.master-users { grid-column: 1 / -1; }
.user-list .master-row { max-width: 700px; }
.sales-order-stats { margin-bottom: 16px; }
.sales-order-detail-panel { margin-bottom: 16px; padding-bottom: 10px; }
.sales-order-info-list { padding: 0 23px; }
.sales-order-deliveries-panel { margin-bottom: 12px; }
.tracking-panel { margin-bottom: 16px; }
.tracking-heading { padding: 22px 26px 18px; border-bottom: 1px solid #edf1f3; }
.delivery-timeline { display: flex; flex-direction: row; overflow: hidden; margin: 0; padding: 12px 30px 24px; list-style: none; }
.tracking-step { position: relative; display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; min-height: 99px; padding: 18px 4px 16px; transition: transform 180ms ease; }
.tracking-step.is-selected { z-index: 2; transform: scale(1.04); }
.tracking-step:not(:last-child)::after { position: absolute; top: 64px; right: calc(-50% + 36px); left: calc(50% + 36px); height: 2px; background: #e6edf0; content: ''; }
.tracking-step.is-done:not(:last-child)::after { background: #b6e4d1; }
.tracking-details { min-width: 0; flex: 1; }
.tracking-trigger { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 5px; min-height: 63px; cursor: pointer; list-style: none; }
.tracking-trigger::-webkit-details-marker { display: none; }
.tracking-step.is-selected .tracking-trigger .tracking-label { color: #18829a; }
.tracking-marker { position: relative; z-index: 1; width: 34px; height: 34px; display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; border: 1px solid #e4ebee; border-radius: 50%; color: #8d9da5; background: #f5f8f9; font-size: 11px; font-weight: 800; }
.tracking-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.tracking-marker { transition: transform 180ms ease; }
.tracking-step.is-selected .tracking-marker { transform: scale(1.2); }
.tracking-step.is-selected .tracking-icon { transform: scale(1.2); }
.tracking-step.is-done .tracking-marker { color: #fff; background: #36a882; border-color: #36a882; }
.tracking-step.is-current .tracking-marker { color: #fff; background: #18829a; border-color: #18829a; box-shadow: 0 0 0 5px #e8f5f6; }
.tracking-content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 0 3px 4px; }
.tracking-label { min-height: 24px; color: #82949e; font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; }
.tracking-step.is-current .tracking-label { color: #218198; }
.tracking-trigger:hover .tracking-label, .tracking-trigger:focus-visible .tracking-label { color: #18829a; }
.tracking-content > strong { color: #274c5e; font: 800 15px 'Manrope', sans-serif; }
.tracking-content > strong.tracking-emphasis { font-size: 12px; }
.tracking-meta, .tracking-time { color: #82949e; font-size: 10px; line-height: 1.6; }
.tracking-time { color: #9aa8ae; font-size: 9px; }
.tracking-step.is-pending .tracking-trigger, .tracking-step.is-pending .tracking-content { opacity: .68; }
.tracking-action { margin-top: 7px; }
.tracking-action .button { min-height: 36px; }
.journey-location-card { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; padding: 11px; border: 1px solid #e3ebee; border-radius: 8px; background: #f8fbfc; }
.journey-map-link { align-self: flex-start; margin-top: 4px; }
.tracking-journey-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); align-items: start; gap: 20px; }
.tracking-journey-info, .tracking-map-panel { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.journey-expenses { width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e7eef0; }
.journey-expenses-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.journey-expenses-heading > strong, .journey-expense-list li > strong { color: #274c5e; font-size: 11px; }
.journey-expense-list { margin: 8px 0 0; padding: 0; list-style: none; }
.journey-expense-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf1f3; }
.journey-expense-list li > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.journey-expense-list li > span > strong { color: #516c7a; font-size: 10px; }
.journey-expense-list small { color: #91a0a9; font-size: 9px; }
.journey-expense-form { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.journey-expense-form label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #728893; font-size: 10px; font-weight: 600; }
.journey-expense-form input, .journey-expense-form select { width: 100%; min-width: 0; min-height: 36px; padding: 7px 9px; border: 1px solid #dfe8eb; border-radius: 6px; background: #fff; font-size: 11px; }
.journey-expense-form button { align-self: end; justify-self: start; }
.journey-map-frame, .journey-map-placeholder { width: 100%; }
.journey-map-placeholder { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; border: 1px solid #e3ebee; border-radius: 9px; background: #f0f6f7; text-align: center; }
.journey-map-iframe { width: 100%; height: 260px; border: 1px solid #e3ebee; border-radius: 9px; background: #f0f6f7; }
.journey-map-iframe:not([hidden]) { display: block; }
.journey-location-status { margin: 0; }
.tracking-detail-card { margin: 0 30px 24px; padding: 20px 24px; border: 1px solid #e7eef0; border-radius: 12px; background: #f9fbfc; }
.tracking-detail-heading { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e7eef0; }
.tracking-detail-heading .eyebrow { margin: 0 0 4px; }
.tracking-detail-heading h3 { margin: 0; color: #274c5e; font: 800 15px 'Manrope', sans-serif; }
.tracking-detail-body > .tracking-content { padding: 0; }
.tracking-detail-body > .muted { margin: 0; }
.tracking-pickup-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); align-items: stretch; gap: 20px; }
.tracking-pickup-entities { grid-column: 1; }
.tracking-pickup-location { grid-column: 1; }
.tracking-pickup-map { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.tracking-pickup-map .journey-map-frame, .tracking-pickup-map .journey-map-placeholder { height: 260px; min-height: 260px; }
.arrival-details-grid { width: 100%; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 18px; }
.arrival-information, .arrival-attachment { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.arrival-attachments { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.attachment-thumbnail, .attachment-thumbnail-placeholder { width: 100%; max-width: 220px; height: 145px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e3ebee; border-radius: 9px; background: #f0f6f7; }
.attachment-thumbnail { padding: 0; cursor: zoom-in; }
.attachment-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.attachment-thumbnail-placeholder { padding: 12px; color: #82949e; font-size: 10px; text-align: center; }
.tracking-pickup-entities { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tracking-pickup-entity { min-width: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 12px; }
.tracking-entity-details { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.tracking-master-photo, .tracking-photo-placeholder { width: 90px; height: 90px; }
.tracking-master-photo { display: block; margin: 0; border: 1px solid #e3ebee; border-radius: 9px; object-fit: cover; background: #fff; }
.tracking-photo-placeholder { display: flex; align-items: center; justify-content: center; border: 1px dashed #d5e2e6; border-radius: 9px; color: #2784a0; background: #f0f6f7; font-size: 24px; font-weight: 800; }
.delivery-summary-panel { padding-bottom: 12px; }
.delivery-summary-list { padding: 0 26px; }
.receipt-form { width: min(100%, 520px); margin-top: 10px; }
.receipt-form > label { width: 100%; }
.receipt-form > button { margin-top: 4px; }
.receipt-proof { width: min(100%, 400px); margin-top: 9px; }
.receipt-proof-label { display: block; color: #728893; font-size: 10px; font-weight: 700; }
.attachment-open { margin-top: 6px; padding: 0; border: 0; color: #18829a; background: transparent; font: inherit; font-size: 11px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.attachment-dialog { width: min(90vw, 560px); height: min(85vh, 760px); max-width: 560px; max-height: 85vh; padding: 18px; border: 1px solid #dfe8eb; border-radius: 12px; background: #fff; box-shadow: 0 24px 80px rgba(20, 45, 56, .28); }
.attachment-dialog::backdrop { background: rgba(15, 35, 44, .68); }
.attachment-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.attachment-dialog-heading p { margin: 0; color: #274c5e; font-weight: 800; }
.attachment-dialog > img { display: block; width: 100%; height: calc(100% - 48px); margin: 0 auto; object-fit: contain; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 18% 18%, #e3f6f5 0, transparent 37%), radial-gradient(ellipse at 88% 84%, #e6f0fa 0, transparent 36%), #f5f8fa; }
.login-card { width: min(100%, 410px); padding: 34px; border: 1px solid rgba(224,235,239,.9); border-radius: 16px; background: #fff; box-shadow: 0 25px 70px rgba(35, 73, 91, .11); }
.login-brand { padding: 0 0 29px; }
.login-brand .brand-logo { flex-basis: 60px; width: 60px; height: 60px; }
.login-card h1 { margin-top: 8px; font-size: 25px; }
.login-card > .muted { margin: 0 0 22px; }
.login-card .form-stack { gap: 14px; }
.checkbox-label { flex-direction: row; align-items: center; gap: 8px; color: #718791; font-weight: 500; }
.login-foot { margin: 22px 0 0; color: #a0acb2; font-size: 10px; text-align: center; }

@media (max-width: 1100px) {
    .sidebar { width: 218px; }
    .main-area { margin-left: 218px; }
    .page-content { padding-right: 26px; padding-left: 26px; }
    .topbar { padding-right: 26px; padding-left: 26px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .purchase-heading-content { align-items: flex-start; gap: 10px; }
    .purchase-heading-content .company-document-brand { min-width: 0; }
    .sidebar { position: static; width: 100%; height: auto; padding: 12px 15px 8px; border-right: 0; border-bottom: 1px solid var(--border); }
    html.sidebar-collapsed .sidebar { width: 100%; padding: 12px 15px 8px; }
    .sidebar > .brand, .sidebar-foot { display: none; }
    .sidebar-toggle { display: none; }
    .main-nav { gap: 4px; margin-top: 0; }
    .main-nav a, .nav-module-toggle { min-height: 39px; }
    .app-shell { display: flex; flex-direction: column; }
    .main-area { margin-left: 0; }
    html.sidebar-collapsed .main-area { margin-left: 0; }
    .topbar { height: 59px; padding: 0 16px; }
    .mobile-brand { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 12px; }
    .mobile-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; }
    .mobile-brand .brand-logo { flex-basis: 40px; width: 40px; height: 40px; padding: 1px; }
    .user-summary { gap: 7px; }
    .user-summary .avatar { width: 29px; height: 29px; }
    .user-summary strong { max-width: 90px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .user-summary small { font-size: 9px; }
    .topbar form .button { min-height: 30px; padding: 0 8px; font-size: 9px; }
    .page-content { padding: 24px 15px 34px; }
    .page-heading { align-items: flex-start; margin-bottom: 18px; }
    .heading-actions { justify-content: flex-end; gap: 6px; }
    .page-heading h1 { font-size: 21px; }
    .page-heading > .button { min-height: 35px; padding: 0 10px; font-size: 10px; white-space: nowrap; }
    .stats-grid { gap: 10px; }
    .stat-card { min-height: 130px; padding: 14px; }
    .stat-icon { width: 30px; height: 30px; margin-bottom: 10px; }
    .stat-value { font-size: 21px; }
    .stat-currency { font-size: 16px; }
    .panel-heading { padding: 17px 15px 14px; }
    .tracking-heading { align-items: flex-start; padding: 17px 15px 14px; }
    .delivery-timeline { padding: 7px 10px 18px; }
    .tracking-step { min-height: 88px; padding: 15px 2px; }
    .tracking-step:not(:last-child)::after { top: 59px; right: calc(-50% + 35px); left: calc(50% + 35px); }
    .tracking-marker { width: 30px; height: 30px; flex-basis: 30px; }
    .tracking-label { font-size: 9px; }
    .tracking-pickup-grid { grid-template-columns: 1fr; gap: 18px; }
    .tracking-pickup-entities, .tracking-pickup-location, .tracking-pickup-map { grid-column: 1; }
    .tracking-pickup-map { grid-row: auto; }
    .tracking-journey-grid { grid-template-columns: 1fr; gap: 18px; }
    .journey-expense-form { grid-template-columns: 1fr; }
    .arrival-details-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; }
    .arrival-attachments { grid-template-columns: 1fr; gap: 12px; }
    .invoice-paper { padding: 24px 18px; }
    .invoice-parties { grid-template-columns: 1fr 1fr; gap: 18px; }
    .delivery-order-form .invoice-paper-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .delivery-order-form .invoice-paper-heading > span:not(.brand-mark), .delivery-order-form .invoice-paper-heading .invoice-paper-rule { grid-column: 1 / -1; }
    .delivery-order-form .invoice-paper-heading h2 { grid-column: 1 / -1; grid-row: 2; }
    .delivery-order-form .invoice-parties { grid-template-columns: 1fr; gap: 22px; }
    .sales-order-parties { grid-template-columns: 1fr; gap: 22px; }
    .delivery-schedule-fields { grid-template-columns: 1fr; gap: 13px; }
    .delivery-pickup-field { grid-column: auto; }
    .delivery-order-footer { align-items: stretch; flex-direction: column; }
    .delivery-order-footer .form-actions { justify-content: flex-start; flex-wrap: wrap; }
    .sales-order-footer { align-items: stretch; flex-direction: column; }
    .sales-order-footer .form-actions { justify-content: flex-start; flex-wrap: wrap; }
    .invoice-meta > div { grid-template-columns: 1fr; gap: 3px; }
    .delivery-order-form .delivery-order-meta > div { grid-template-columns: minmax(68px, .7fr) minmax(0, 1fr); gap: 8px; }
    .invoice-meta dd { text-align: left; }
    .invoice-paper-footer { margin-top: 28px; }
    .journey-map-iframe { height: 230px; }
    .tracking-pickup-map .journey-map-frame, .tracking-pickup-map .journey-map-placeholder { height: 230px; min-height: 230px; }
    .tracking-detail-card { margin: 0 15px 18px; padding: 16px; }
    .delivery-summary-list { padding: 0 15px; }
    td { padding: 11px 12px; }
    .dashboard-bottom, .dashboard-aging-grid, .detail-grid, .master-grid { grid-template-columns: 1fr; }
    .sales-order-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sales-order-info-list { padding: 0 15px; }
    .master-users { grid-column: auto; }
    .workflow { flex-wrap: wrap; gap: 6px; }
    .workflow span { padding: 6px 7px; font-size: 9px; }
    .form-panel { padding: 17px 15px; }
    .form-grid { gap: 12px; }
}
@media (max-width: 760px) {
    .sidebar { overflow: visible; }
}
@media print {
    @page { size: A4; margin: 14mm; }
    .invoice-view { background: #fff; }
    .invoice-view .sidebar, .invoice-view .topbar, .invoice-view .page-heading, .invoice-view .alert { display: none !important; }
    .invoice-view .main-area { margin: 0; }
    .invoice-view .page-content { max-width: none; padding: 0; }
    .invoice-paper { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .invoice-paper, .invoice-paper * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .invoice-parties, .invoice-lines tr, .invoice-total, .invoice-paper-footer { break-inside: avoid; }
}
@media (max-width: 460px) {
    .user-summary > span:last-child { display: none; }
    .page-heading { flex-wrap: wrap; }
    .page-heading > .button, .heading-actions { margin-left: auto; }
    .heading-actions { flex-wrap: nowrap; }
    .form-grid { grid-template-columns: 1fr; }
    .form-span-2 { grid-column: auto; }
    .delivery-order-form { padding: 20px 14px; }
    .sales-order-form { padding: 20px 14px; }
    .delivery-order-form .invoice-paper-heading { grid-template-columns: 1fr; justify-items: center; }
    .sales-order-form .invoice-paper-heading { grid-template-columns: 1fr; justify-items: center; }
    .delivery-order-form .invoice-paper-heading .invoice-brand { justify-self: start; }
    .sales-order-form .invoice-paper-heading .invoice-brand { justify-self: start; }
    .delivery-order-form .invoice-paper-heading h2 { grid-column: auto; grid-row: auto; }
    .sales-order-form .invoice-paper-heading h2 { grid-column: auto; grid-row: auto; }
    .delivery-order-form .invoice-paper-heading > span:not(.brand-mark) { display: none; }
    .sales-order-form .invoice-paper-heading > span:not(.brand-mark) { display: none; }
    .delivery-order-footer .form-actions .button { flex: 1 1 auto; }
    .sales-order-footer .form-actions .button { flex: 1 1 auto; }
    .selection-total { align-items: flex-start; flex-direction: column; gap: 7px; }
    .signature-actions { align-items: flex-start; flex-direction: column; }
    .login-card { padding: 27px 22px; }
}
.page-content, .page-content * { font-size: 11px !important; }
.report-filters { padding: 18px 22px; border-bottom: 1px solid var(--border); background: #fbfdfe; }
.report-filter-fields { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 12px; }
.report-filter-fields label { display: grid; gap: 6px; color: #647d89; font-weight: 700; }
.report-filter-fields input, .report-filter-fields select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #dce6ea; border-radius: 7px; color: #294858; background: #fff; }
.report-filter-fields input:focus, .report-filter-fields select:focus { outline: 2px solid #ccebef; border-color: #3caec2; }
.report-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.report-filter-actions .button { min-height: 34px; padding: 0 11px; }
.report-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 28px; padding: 15px 22px; border-top: 1px solid var(--border); background: #fbfdfe; }
.report-summary > div { display: grid; gap: 4px; text-align: right; }
.report-summary span { color: var(--muted); }
.report-summary strong { color: var(--navy); font-size: 12px !important; }
@media (max-width: 760px) {
    .report-filters { padding: 15px; }
    .report-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-summary { justify-content: space-between; gap: 14px; padding: 14px 15px; }
}
@media (max-width: 460px) {
    .report-filter-fields { grid-template-columns: 1fr; }
    .report-filter-actions .button { flex: 1 1 calc(50% - 8px); }
}
.ledger-filters .report-filter-fields { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.ledger-filters .report-filter-actions { justify-content: flex-end; gap: 9px; }
.report-export-button { width: 38px; min-width: 38px; height: 38px; padding: 0; }
.report-export-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.report-export-button:hover { color: #115c71; }
.ledger-opening { display: flex; justify-content: space-between; gap: 12px; padding: 13px 17px; color: #607986; background: #f8fbfc; border-bottom: 1px solid var(--border); }
.ledger-opening strong { color: #173f53; }
.ledger-table { min-width: 900px; }
.ledger-table .numeric-heading { text-align: right; }
@media (max-width: 760px) {
    .ledger-filters .report-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .ledger-filters .report-filter-fields { grid-template-columns: 1fr; }
    .ledger-filters .report-filter-actions .button { flex: 1; }
}
.accounting-section, .accounting-setup { margin-bottom: 20px; }
.accounting-cash-flow-table { min-width: 760px; }
.cash-flow-section th { padding-top: 13px; color: #176f81; background: #f0f8f9; text-align: left; }
.cash-flow-subtotal th, .cash-flow-subtotal td { color: #24485a; background: #f8fbfc; font-weight: 700; }
.coa-class-row th { padding-top: 13px; padding-bottom: 9px; color: #24485a; background: #f4f7f8; font-size: 10px; font-weight: 800; text-align: left; text-transform: none; }
.coa-subclass-row th { padding-left: 30px; color: #365b6b; background: #fbfcfc; font-size: 10px; font-weight: 700; text-align: left; text-transform: none; }
.coa-account-row td:first-child { padding-left: 48px; }
.coa-account-row td:nth-child(2):not(.numeric-cell) { padding-left: 30px; }
.coa-subtotal-row th, .coa-subtotal-row td { color: #456473; background: #fbfcfc; font-weight: 700; }
.coa-subtotal-row th:first-child { padding-left: 30px; text-align: left; text-transform: none; }
.coa-class-subtotal-row th, .coa-class-subtotal-row td { color: #24485a; background: #f4f7f8; border-top: 1px solid #dfe8eb; font-weight: 800; }
.coa-class-subtotal-row th:first-child { text-align: left; text-transform: none; }
.balance-sheet-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.balance-sheet-side { min-width: 0; border: 1px solid var(--border); border-radius: 8px; }
.balance-sheet-side-title { color: #fff; background: #24485a; font-size: 11px; text-align: center; }
.balance-sheet-grand-total th { color: #173f53; background: #eaf2f4; border-top: 2px solid #cbdadd; font-weight: 800; }
.balance-sheet-grand-total th:first-child { text-align: left; text-transform: none; }
.report-module-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
.report-module-links a { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 9px; color: #1b5367; background: #fff; font-weight: 700; }
.report-module-links a:hover { border-color: #b7dce2; background: #f5fbfc; }
.report-module-links span { color: var(--muted); font-weight: 400; }
.accounting-form { display: grid; gap: 16px; padding: 0 22px 22px; }
.accounting-start-date, .accounting-journal-head label, .accounting-form label, .accounting-account-form label, .opening-layer-row label, .accounting-purchase-payment label { display: grid; gap: 6px; color: #647d89; font-weight: 700; }
.accounting-start-date { max-width: 360px; }
.accounting-start-date small { color: var(--muted); font-weight: 400; line-height: 1.5; }
.accounting-form input, .accounting-form select, .accounting-account-form input, .accounting-account-form select, .opening-layer-row input, .accounting-purchase-payment input, .accounting-purchase-payment select { width: 100%; min-height: 37px; padding: 0 9px; border: 1px solid #dce6ea; border-radius: 7px; color: #294858; background: #fff; }
.accounting-number { text-align: right; }
.accounting-notice { margin: 0; padding: 12px 14px; border-radius: 8px; color: #76602e; background: #fff8e7; line-height: 1.55; }
.accounting-opening-stock { border: 1px solid var(--border); border-radius: 9px; }
.accounting-opening-stock .panel-heading { padding: 15px; }
.opening-layer-list { display: grid; gap: 10px; padding: 0 15px 15px; }
.opening-layer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.accounting-account-form { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr 1.2fr auto; align-items: end; gap: 12px; padding: 17px 22px; border-top: 1px solid var(--border); }
.accounting-account-form > strong { grid-column: 1 / -1; color: #24485a; }
.accounting-journal-head { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(250px, 1.3fr); gap: 12px; }
.accounting-form-actions { display: flex; justify-content: flex-end; gap: 9px; }
.accounting-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.accounting-status { color: var(--green); }
.accounting-report-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.accounting-report-value { font-size: 19px !important; }
.bank-balance { font-size: 19px !important; }
.accounting-date { font-size: 20px !important; }
.inventory-value { font-size: 19px !important; }
.inventory-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.accounting-purchase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.accounting-purchase-grid .form-panel { padding: 20px; }
.accounting-purchase-grid .form-panel h2 { margin: 0 0 16px; color: #1a3b4e; font: 700 15px 'Manrope', sans-serif; }
.purchase-page-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
.purchase-page-nav a { padding: 9px 13px; border: 1px solid #dce6ea; border-radius: 8px; color: #54717f; background: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }
.purchase-page-nav a.active { border-color: #b7d9d4; color: #176f68; background: #edf8f6; }
.purchase-entry-panel { margin-bottom: 20px; padding: 20px; }
.purchase-entry-panel .panel-heading { padding: 0 0 14px; }
.company-settings-panel { max-width: 900px; padding: 22px; }
.company-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.company-settings-form > label { display: grid; gap: 7px; color: #647d89; font-weight: 700; }
.company-settings-form input:not([type="checkbox"]), .company-settings-form textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #dce6ea; border-radius: 7px; color: #294858; background: #fff; font: inherit; }
.company-settings-form input[type="file"] { padding: 8px; }
.company-settings-form small { color: #82949e; font-weight: 400; }
.company-settings-wide, .company-settings-actions { grid-column: 1 / -1; }
.company-logo-preview { display: flex; align-items: center; gap: 14px; }
.company-logo-preview img { width: 110px; height: 80px; padding: 5px; border: 1px solid #e3ebee; border-radius: 7px; object-fit: contain; }
.company-logo-remove { display: flex; align-items: center; gap: 7px; color: #647d89; font-size: 12px; }
.company-document-logo { width: 52px; height: 52px; object-fit: contain; }
.cash-transaction-form { display: grid; gap: 12px; }
.cash-transaction-form fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.cash-transaction-form fieldset:disabled { opacity: .58; }
.cash-transaction-form label { display: grid; gap: 6px; color: #647d89; font-weight: 700; }
.cash-transaction-form input, .cash-transaction-form select { width: 100%; min-height: 37px; padding: 0 9px; border: 1px solid #dce6ea; border-radius: 7px; color: #294858; background: #fff; }
.cash-transaction-form .field-error { color: #995454; font-weight: 400; }
.cash-transaction-entry-form { max-width: 1180px; }
.cash-transaction-entry-form .cash-transaction-header { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 20px; overflow: visible; }
.cash-transaction-entry-form .cash-transaction-description { grid-column: 1 / -1; }
.cash-transaction-entry-form .cash-transaction-items, .cash-transaction-entry-form .cash-transaction-attachments { padding: 20px; overflow: visible; }
.cash-transaction-entry-form .cash-transaction-items-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cash-transaction-entry-form .cash-transaction-items-heading h2, .cash-transaction-entry-form .cash-transaction-attachments h2 { margin: 0; color: #1a3b4e; font: 700 15px 'Manrope', sans-serif; }
.cash-transaction-entry-form .cash-transaction-items table { min-width: 760px; }
.cash-transaction-entry-form .cash-transaction-items td { vertical-align: top; }
.cash-transaction-entry-form .cash-transaction-items td:first-child { min-width: 230px; }
.cash-transaction-entry-form .cash-transaction-items td:nth-child(2), .cash-transaction-entry-form .cash-transaction-items td:nth-child(4) { min-width: 170px; }
.cash-transaction-entry-form .cash-transaction-items td:nth-child(3) { min-width: 155px; }
.cash-transaction-entry-form .cash-transaction-items td:last-child { width: 42px; }
.cash-transaction-entry-form .numeric-heading { text-align: right; }
.cash-transaction-entry-form .cash-item-amount { text-align: right; }
.cash-transaction-entry-form .cash-transaction-hint { margin: 10px 0 0; }
.cash-transaction-entry-form .cash-transaction-total { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #edf1f3; color: #4b6877; font-weight: 700; }
.cash-transaction-entry-form .cash-transaction-total strong { color: #17364a; }
.cash-transaction-entry-form .cash-transaction-attachments input[type="file"] { margin-top: 14px; padding: 9px; height: auto; }
.cash-transaction-entry-form .cash-transaction-attachments .field-hint { display: block; margin-top: 8px; }
.cash-transaction-entry-form .cash-transaction-attachment-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cash-transaction-entry-form .cash-transaction-attachment-chip { padding: 6px 9px; border: 1px solid #e5edf1; border-radius: 7px; color: #617b89; background: #f8fafb; font-size: 10px; }
.cash-transaction-entry-form .cash-transaction-submit { display: flex; justify-content: flex-end; gap: 9px; }
.cash-transaction-page { max-width: 760px; }
.cash-transaction-page .cash-transaction-form fieldset, .accounting-form fieldset { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; }
.accounting-form fieldset:disabled { opacity: .58; }
.salary-payment-panel { max-width: 760px; margin-bottom: 20px; }
.salary-payment-panel .panel-heading { padding: 0 0 16px; }
.purchase-invoice-form, .purchase-payment-form { display: grid; gap: 16px; padding: 0 22px 20px; }
.purchase-invoice-form .form-grid, .purchase-payment-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.purchase-payment-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.purchase-invoice-form label, .purchase-payment-details label { display: grid; gap: 6px; color: #647d89; font-weight: 700; }
.purchase-invoice-form input:not([type="checkbox"]), .purchase-payment-details input, .purchase-payment-details select, .purchase-payment-form td input[type="number"] { width: 100%; min-height: 37px; padding: 0 9px; border: 1px solid #dce6ea; border-radius: 7px; color: #294858; background: #fff; }
.purchase-invoice-form input[type="checkbox"], .purchase-payment-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); }
.purchase-payment-form td input[type="number"] { min-width: 125px; text-align: right; }
.purchase-invoice-form .form-actions, .purchase-payment-form .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.accounting-purchase-payment { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(130px, 1fr)) auto; align-items: end; gap: 12px; padding: 0 22px 20px; }
.accounting-section .panel-heading { align-items: flex-start; }
.accounting-section tfoot th { padding-top: 12px; border-top: 2px solid var(--border); text-align: right; }
@media (max-width: 900px) {
    .accounting-purchase-grid { grid-template-columns: 1fr; }
    .accounting-purchase-payment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .purchase-payment-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .balance-sheet-columns { grid-template-columns: 1fr; }
    .cash-transaction-entry-form .cash-transaction-header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .accounting-account-form, .accounting-journal-head, .opening-layer-row, .accounting-report-stats, .accounting-stat-grid { grid-template-columns: 1fr; }
    .company-settings-form { grid-template-columns: 1fr; }
    .company-settings-wide, .company-settings-actions { grid-column: auto; }
    .inventory-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .accounting-form { padding: 0 15px 15px; }
    .accounting-account-form { padding: 15px; }
    .accounting-purchase-payment { grid-template-columns: 1fr; padding: 0 15px 16px; }
    .purchase-invoice-form, .purchase-payment-form { padding: 0 15px 16px; }
    .purchase-invoice-form .form-grid, .purchase-payment-details { grid-template-columns: 1fr; }
    .purchase-invoice-form .form-actions, .purchase-payment-form .form-actions { align-items: flex-start; flex-direction: column; }
    .accounting-purchase-grid .form-panel { padding: 15px; }
    .cash-transaction-entry-form .cash-transaction-header { grid-template-columns: 1fr; padding: 15px; }
    .cash-transaction-entry-form .cash-transaction-description { grid-column: auto; }
    .cash-transaction-entry-form .cash-transaction-items, .cash-transaction-entry-form .cash-transaction-attachments { padding: 15px; }
}