:root {  --black: #0e0a06;  --charcoal: #1b1917;  --grey: #282828;  --muted: #716f6d;  --line: #e8e5e2;  --canvas: #f6f5f3;  --white: #fff;  --red: #ee3b27;  --red-dark: #c92a19;  --red-soft: #fff0ed;  --green: #188454;  --green-soft: #eaf7f0;  --amber: #a96500;  --amber-soft: #fff4dd;  --blue: #2768c7;  --blue-soft: #ecf3ff;  --shadow: 0 12px 28px rgba(14, 10, 6, .07);}[hidden] { display:none !important; }* { box-sizing: border-box; }body { margin: 0; font-family: Montserrat, sans-serif; color: var(--black); background: var(--canvas); font-size: 14px; }.auth-screen{min-height:100vh;display:grid;grid-template-columns:minmax(360px,.9fr) minmax(480px,1.1fr);background:#fff}.auth-brand-panel{display:grid;place-items:center;padding:70px;background:radial-gradient(circle at 20% 15%,#3b1710 0,#170d09 35%,#0e0a06 76%);color:#fff;position:relative;overflow:hidden}.auth-brand-panel:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(238,59,39,.24);border-radius:50%;right:-210px;bottom:-180px;box-shadow:0 0 0 75px rgba(238,59,39,.04),0 0 0 150px rgba(238,59,39,.025)}.auth-brand-content{max-width:520px;position:relative;z-index:1}.auth-logo{display:grid;width:62px;height:62px;place-items:center;font-size:32px;margin-bottom:32px}.auth-brand-content h1{font-size:52px;line-height:1.02;margin:12px 0 22px}.auth-brand-content>p{color:#c8bbb5;line-height:1.8;max-width:460px}.auth-feature-list{display:grid;gap:14px;margin-top:38px;color:#f5eae6;font-weight:600}.auth-feature-list span{display:flex;gap:10px;align-items:center}.auth-form-panel{display:grid;place-items:center;padding:48px}.auth-card{width:min(430px,100%);display:grid;gap:19px}.auth-card h2{font-size:32px;margin:6px 0}.auth-card>div>p{color:var(--muted);line-height:1.6}.auth-card label:not(.checkbox-line){display:grid;gap:8px;font-size:12px;color:var(--muted);font-weight:600}.auth-card input{height:48px;border:1px solid var(--line);border-radius:10px;padding:0 13px;font:inherit;color:var(--black)}.auth-card input:focus{outline:3px solid rgba(238,59,39,.12);border-color:var(--red)}.auth-submit{height:49px;font-size:14px}.form-error{min-height:18px;color:var(--red);font-size:12px;margin:0}.signed-in-user{min-width:0;flex:1}.logout-button{border:0;background:transparent;color:#c6b9b2;font-size:20px;cursor:pointer;padding:7px}.logout-button:hover{color:#fff}button, input, select, textarea { font: inherit; }button { cursor: pointer; }h1, h2, h3, p { margin: 0; }h1, h2, h3, .brand { font-family: Urbanist, sans-serif; }h1 { font-size: 26px; font-weight: 700; }h2 { font-size: 18px; font-weight: 700; }h3 { font-size: 15px; }p { color: var(--muted); margin-top: 3px; font-size: 12px; }.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }.sidebar { background: var(--black); color: var(--white); padding: 22px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 20; }.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 26px; letter-spacing: .08em; }.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; background: var(--red); border-radius: 10px; font-size: 23px; font-weight: 700; }.brand strong, .brand small, .sidebar-footer strong, .sidebar-footer small { display: block; }.brand small, .sidebar-footer small { color: #aaa5a0; font: 400 10px Montserrat, sans-serif; margin-top: 2px; letter-spacing: normal; }nav { display: grid; gap: 5px; overflow-y: auto; }.nav-item { border: 0; background: transparent; color: #c9c5c1; border-radius: 9px; padding: 11px 12px; display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; text-align: left; align-items: center; }.nav-item:hover { background: #211d19; color: var(--white); }.nav-item.active { background: var(--red); color: var(--white); }.nav-item b { background: rgba(255,255,255,.16); border-radius: 20px; padding: 2px 7px; font-size: 10px; }.nav-group { display: grid; gap: 3px; }.nav-group-toggle { width: 100%; border: 0; background: transparent; color: #c9c5c1; border-radius: 9px; padding: 11px 12px; display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; text-align: left; align-items: center; }.nav-group-toggle:hover, .nav-group.open > .nav-group-toggle, .nav-group.has-active > .nav-group-toggle { background: #211d19; color: var(--white); }.nav-group-toggle i { font-style: normal; transition: transform .18s ease; }.nav-group.open > .nav-group-toggle i { transform: rotate(180deg); }.nav-submenu { display: none; gap: 3px; padding: 2px 0 5px 35px; }.nav-group.open > .nav-submenu { display: grid; }.nav-subitem { width: 100%; border: 0; border-left: 2px solid #3b3530; background: transparent; color: #aaa5a0; padding: 8px 10px; text-align: left; display: flex; justify-content: space-between; gap: 8px; }.nav-subitem:hover { color: var(--white); border-left-color: #8d8781; }.nav-subitem.active { color: var(--white); border-left-color: var(--red); background: rgba(238,59,39,.12); }.nav-subitem b { background: var(--red); color: var(--white); border-radius: 20px; padding: 2px 7px; font-size: 9px; }.sidebar-footer { margin-top: auto; border-top: 1px solid #332e29; padding: 18px 8px 0; display: flex; gap: 10px; align-items: center; }.user-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grey); font-weight: 600; }.main { min-width: 0; }.topbar { min-height: 88px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 16px 28px; position: sticky; top: 0; z-index: 15; }.top-actions, .section-toolbar, .panel-head, .modal-head, .modal-actions { display: flex; align-items: center; gap: 10px; justify-content: space-between; }.branch-select,.company-select { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }.branch-select select,.company-select select, .search-input { border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 9px 10px; }.company-select select{min-width:190px;font-weight:600;color:var(--ink)}.menu-button { display: none; border: 0; background: transparent; font-size: 22px; }.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--muted); position: relative; }.notification-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--red); top: 7px; right: 7px; }.primary-button, .secondary-button { border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 600; }.primary-button { background: var(--red); color: var(--white); }.primary-button:hover { background: var(--red-dark); }.secondary-button { background: var(--white); color: var(--black); border: 1px solid var(--line); }.primary-button:disabled { opacity: .45; cursor: not-allowed; }.text-button { border: 0; background: transparent; color: var(--red); font-weight: 600; font-size: 12px; }.document-link { border: 0; background: transparent; color: var(--red); padding: 0; font-weight: 700; text-align: left; }.table-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }.mini-button { border: 1px solid var(--line); background: var(--white); border-radius: 7px; padding: 6px 8px; white-space: nowrap; font-size: 10px; font-weight: 600; }.mini-button:hover { border-color: var(--red); color: var(--red); }.mini-button.primary { background: var(--red-soft); border-color: #ffd0ca; color: var(--red-dark); }.mini-select { border: 1px solid var(--line); border-radius: 7px; background: var(--white); padding: 6px 7px; font-size: 10px; }.content { padding: 24px 28px 40px; max-width: 1680px; margin: 0 auto; }.page { display: none; }.page.active { display: block; }.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }.metric-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }.metric-card, .panel { background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }.metric-card { padding: 17px; position: relative; overflow: hidden; }.metric-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }.metric-card .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }.metric-card strong { display: block; font: 700 25px Urbanist, sans-serif; margin: 6px 0 2px; }.metric-card small { color: var(--muted); font-size: 10px; }.panel { padding: 18px; }.panel-head { margin-bottom: 14px; }.document-view { max-width: 1050px; }.document-sheet { background: var(--white); color: var(--black); padding: 28px; }.document-brand { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; border-bottom: 3px solid var(--black); }.document-brand > div:first-child { display: flex; align-items: center; gap: 10px; font: 700 18px Urbanist,sans-serif; letter-spacing: .08em; }.document-brand .brand-mark { color: var(--white); }.document-title { text-align: right; }.document-title span,.document-title strong { display: block; }.document-title span { color: var(--red); font: 700 22px Urbanist,sans-serif; }.document-title strong { margin-top: 4px; }.document-parties { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 24px; padding: 24px 0; }.document-parties small,.document-summary small { display: block; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; margin-bottom: 7px; }.document-parties strong { display: block; margin-bottom: 5px; }.document-parties p { line-height: 1.7; }.document-lines { width: 100%; border-collapse: collapse; }.document-lines th { background: var(--black); color: var(--white); text-align: left; padding: 11px; font-size: 10px; }.document-lines td { padding: 12px 11px; border-bottom: 1px solid var(--line); }.document-lines .number { text-align: right; }.document-summary { display: grid; grid-template-columns: 1fr 310px; gap: 32px; margin-top: 24px; }.document-summary > div:last-child p { display: flex; justify-content: space-between; padding: 7px 0; }.document-summary .grand-total { border-top: 2px solid var(--black); font-size: 17px; color: var(--black); margin-top: 4px; }.document-footer { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 12px; color: var(--muted); font-size: 9px; text-align: center; }.receipt-total { margin: 40px auto 10px; padding: 24px; max-width: 420px; border: 2px solid var(--black); border-radius: 12px; text-align: center; color: var(--red); font: 700 34px Urbanist,sans-serif; }.print-page { background: var(--white); padding: 20px; }.module-hub { display: none; }.module-hub.active { display: block; }.module-hero { background: linear-gradient(125deg,var(--black),var(--grey)); color: var(--white); border-radius: 13px; padding: 23px; margin-bottom: 18px; display: flex; justify-content: space-between; gap: 18px; align-items: center; box-shadow: var(--shadow); }.module-hero h2 { font-size: 25px; margin: 3px 0 5px; }.module-hero p { color: #c8c3be; max-width: 650px; }.module-kicker { color: #ff8a7c; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 600; }.module-band { margin-top: 18px; }.module-band-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }.module-band-title span { font: 700 18px Urbanist,sans-serif; }.module-band-title p { margin: 0; }.module-action-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }.module-action { min-height: 122px; border: 1px solid var(--line); background: var(--white); border-radius: 11px; padding: 14px; text-align: left; cursor: pointer; box-shadow: 0 5px 14px rgba(14,10,6,.04); transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }.module-action:hover { transform: translateY(-2px); border-color: #d0cbc6; box-shadow: var(--shadow); }.module-action-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--red-soft); color: var(--red); margin-bottom: 13px; transition: color .16s ease,background .16s ease,transform .16s ease; }.module-action-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.module-action:hover .module-action-icon { color: var(--white); background: var(--red); transform: scale(1.05); }.module-action:focus-visible { outline: 3px solid rgba(204,45,32,.2); outline-offset: 2px; }.module-action strong,.module-action small { display: block; }.module-action strong { font: 700 15px Urbanist,sans-serif; }.module-action small { color: var(--muted); margin-top: 4px; font-size: 10px; }.masterfiles-band { border-top: 1px solid var(--line); padding-top: 18px; }.masterfiles-band .module-action-icon { background: var(--blue-soft); color: var(--blue); }.masterfiles-band .module-action:hover .module-action-icon { background: var(--blue); color: var(--white); }.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; }.stack-list { display: grid; }.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }.list-row:last-child { border-bottom: 0; }.list-row strong { font-size: 12px; }.list-row small { display: block; color: var(--muted); margin-top: 3px; }.badge { display: inline-block; border-radius: 30px; padding: 5px 8px; font-size: 10px; font-weight: 600; background: var(--blue-soft); color: var(--blue); white-space: nowrap; }.badge.red { background: var(--red-soft); color: var(--red-dark); }.badge.green { background: var(--green-soft); color: var(--green); }.badge.amber { background: var(--amber-soft); color: var(--amber); }.pipeline-chart { display: grid; gap: 13px; }.bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; align-items: center; gap: 10px; }.bar-track { height: 10px; background: var(--canvas); border-radius: 8px; overflow: hidden; }.bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--red),#ff725f); }.bar-row strong { text-align: right; font-size: 11px; }.section-toolbar { margin-bottom: 16px; }.segmented { display: flex; gap: 3px; background: #eae7e4; padding: 3px; border-radius: 9px; overflow-x: auto; }.segmented button { border: 0; background: transparent; color: var(--muted); padding: 8px 11px; border-radius: 7px; white-space: nowrap; }.segmented button.active { background: var(--white); color: var(--black); box-shadow: 0 2px 8px rgba(0,0,0,.06); }.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 10px; }.kanban-column { background: #ebe8e5; border-radius: 11px; padding: 11px; min-height: 420px; }.kanban-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 600; }.kanban-head span { background: rgba(0,0,0,.07); border-radius: 20px; padding: 3px 8px; font-size: 10px; }.lead-card { background: var(--white); border: 1px solid var(--line); border-radius: 9px; padding: 13px; margin-bottom: 9px; box-shadow: 0 5px 14px rgba(14,10,6,.05); }.lead-card h3 { margin-bottom: 4px; }.lead-card p { min-height: 30px; }.lead-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 10px; color: var(--muted); }.lead-card .value { color: var(--black); font-weight: 600; }.inbox-layout { display: grid; grid-template-columns: 260px minmax(320px, 1fr) 260px; gap: 12px; min-height: 660px; }.conversation-list, .conversation, .contact-panel { padding: 0; overflow: hidden; }.conversation-list .panel-head, .conversation-head, .contact-panel .panel-head { padding: 16px; border-bottom: 1px solid var(--line); margin: 0; }.conversation-item { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: var(--white); padding: 13px; text-align: left; }.conversation-item:hover, .conversation-item.active { background: var(--red-soft); }.conversation-item strong { display: flex; justify-content: space-between; gap: 6px; }.conversation-item small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; }.unread-dot { width: 7px; height: 7px; background: var(--red); display: inline-block; border-radius: 50%; }.conversation { display: grid; grid-template-rows: auto 1fr auto; }.messages { padding: 18px; background: #f0eeeb; display: flex; flex-direction: column; gap: 9px; min-height: 450px; }.message { max-width: 78%; padding: 10px 12px; border-radius: 10px; background: var(--white); box-shadow: 0 3px 8px rgba(0,0,0,.04); }.message.outbound { align-self: flex-end; background: var(--green-soft); }.message small { display: block; color: var(--muted); margin-bottom: 4px; }.message-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }.message-form input { border: 1px solid var(--line); border-radius: 8px; padding: 11px; }.contact-content { padding: 16px; }.contact-content .customer-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: grid; place-items: center; font: 700 18px Urbanist; margin-bottom: 12px; }.detail-row { padding: 10px 0; border-bottom: 1px solid var(--line); }.detail-row span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }.empty-state { color: var(--muted); text-align: center; padding: 60px 20px; }.table-panel { padding: 0; overflow: hidden; }.table-panel .panel-head { padding: 18px; margin: 0; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th, td { text-align: left; padding: 12px 15px; border-top: 1px solid var(--line); white-space: nowrap; font-size: 12px; }td small { display: block; color: var(--muted); margin-top: 3px; font-size: 9px; }.logistics-tracking-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.delivery-dashboard-grid { margin-bottom: 18px; }.delivery-register { margin-top: 18px; }.delivery-report-filters { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }.delivery-report-filters select { border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 9px; max-width: 180px; }.trip-progress { width: 120px; height: 7px; border-radius: 8px; overflow: hidden; background: #e8e5e2; }.trip-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--red),#ff725f); }.pod-upload-control { display: flex; align-items: center; gap: 10px; padding: 16px; margin-bottom: 12px; border: 1px dashed #c9c3be; border-radius: 10px; background: var(--canvas); }.pod-upload-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.pod-upload-control span { color: var(--muted); font-size: 11px; }.completion-result { padding: 15px; margin-top: 14px; border: 1px solid #c9ead8; border-radius: 10px; background: var(--green-soft); color: var(--green); }.completion-result p { color: var(--green); margin-top: 5px; }.issue-entry-grid { display: grid; grid-template-columns: 180px 1fr 120px 2fr auto; gap: 8px; margin-bottom: 14px; }.issue-entry-grid input,.issue-entry-grid select { border: 1px solid var(--line); border-radius: 8px; padding: 9px; min-width: 0; }th { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 9px; background: #fbfaf9; }td.number, th.number { text-align: right; }.product-name strong { display: block; }.product-name small { color: var(--muted); }.search-input { min-width: 210px; }.approval-list { display: grid; }.approval-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }.approval-row:last-child { border-bottom: 0; }.approval-row .amount { font: 700 17px Urbanist; }.row-actions { display: flex; gap: 7px; }.approve-button, .reject-button { border-radius: 7px; padding: 8px 10px; font-weight: 600; }.approve-button { background: var(--green-soft); color: var(--green); border: 1px solid #c9ead8; }.reject-button { background: var(--red-soft); color: var(--red); border: 1px solid #f5cec7; }.approval-row.resolved { opacity: .55; }.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }.settings-nav { padding: 8px; display: grid; gap: 3px; align-content: start; }.settings-nav button { border: 0; background: transparent; text-align: left; padding: 10px; border-radius: 7px; color: var(--muted); }.settings-nav button.active { background: var(--red-soft); color: var(--red); font-weight: 600; }.supplier-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.supplier-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 17px; }.supplier-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 14px; }.supplier-card .supplier-code { color: var(--red); font-weight: 600; font-size: 10px; margin-bottom: 4px; }.supplier-card .detail-row { display: grid; grid-template-columns: 100px 1fr; gap: 8px; font-size: 11px; }.supplier-card .detail-row span { margin: 0; }.receive-button { border: 1px solid #c9ead8; background: var(--green-soft); color: var(--green); padding: 7px 9px; border-radius: 7px; font-weight: 600; }.purchase-line-preview { margin-top: 14px; padding: 12px; border: 1px solid var(--line); background: var(--canvas); border-radius: 9px; }.purchase-line-preview:empty { display: none; }.modal-wide { width: min(760px,100%); }.journal-check { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); font-size: 11px; }.journal-check.balanced { background: var(--green-soft); color: var(--green); }tfoot td { font-weight: 700; background: #fbfaf9; }.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(14,10,6,.55); display: grid; place-items: center; padding: 20px; }.modal-backdrop[hidden] { display: none; }.modal { width: min(620px,100%); background: var(--white); border-radius: 13px; box-shadow: 0 25px 70px rgba(0,0,0,.25); padding: 20px; }.modal.modal-wide { width: min(1000px,100%); max-height: calc(100vh - 40px); overflow: auto; }.modal.modal-workspace { width: min(1450px,100%); max-height: calc(100vh - 24px); overflow: auto; padding: 0; }.document-toolbar { position: sticky; top: 0; z-index: 2; background: var(--white); padding: 18px 22px; border-bottom: 1px solid var(--line); }.sales-entry-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; padding: 18px 22px 0; }.entry-card { border: 1px solid var(--line); border-radius: 11px; padding: 16px; background: #fff; }.entry-card > h3 { margin-bottom: 14px; }.customer-credit-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; border-radius: 9px; background: var(--canvas); padding: 10px; }.customer-credit-strip span { color: var(--muted); font-size: 9px; }.customer-credit-strip strong { display: block; color: var(--black); margin-top: 3px; font-size: 11px; }.checkbox-label { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; align-self: end; padding-bottom: 10px; }.checkbox-label input { width: auto !important; }.sales-lines-card { margin: 14px 22px 0; padding: 0; overflow: hidden; }.sales-lines-card .panel-head { padding: 15px 16px; margin: 0; }.sales-line-editor { display: grid; grid-template-columns: 2fr .55fr .65fr .8fr .7fr .55fr auto; gap: 8px; padding: 12px 16px; background: var(--canvas); align-items: end; }.sales-line-editor label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }.sales-line-editor input,.sales-line-editor select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--white); padding: 8px; }.sales-entry-footer { display: grid; grid-template-columns: 1fr 340px; gap: 16px; padding: 14px 22px 22px; }.sales-entry-footer > label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }.sales-entry-footer textarea { min-height: 100px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; resize: vertical; }.sales-total-card { border-radius: 10px; background: var(--black); color: var(--white); padding: 13px 16px; }.sales-total-card p { display: flex; justify-content: space-between; color: #c9c5c1; padding: 5px 0; }.sales-total-card p strong { color: var(--white); }.sales-total-card .grand-total { border-top: 1px solid #4a4540; margin-top: 5px; padding-top: 10px; font-size: 16px; }.modal-head { margin-bottom: 18px; }.close-button { border: 0; background: transparent; font-size: 25px; color: var(--muted); }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.form-grid label { color: var(--muted); font-size: 11px; display: grid; gap: 6px; }.form-grid .full { grid-column: 1/-1; }.form-grid input, .form-grid select, .form-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--white); color: var(--black); }.form-grid textarea { min-height: 80px; resize: vertical; }.modal-actions { margin-top: 18px; justify-content: flex-end; }.toast { position: fixed; right: 22px; bottom: 22px; background: var(--black); color: var(--white); padding: 12px 16px; border-radius: 9px; box-shadow: var(--shadow); transform: translateY(90px); opacity: 0; transition: .25s; z-index: 120; }.toast.show { transform: translateY(0); opacity: 1; }.workspace-tabs { display:flex; gap:4px; padding:14px 22px 0; border-bottom:1px solid var(--line); background:#faf9f8; position:sticky; top:75px; z-index:1; }.workspace-tabs button { border:0; background:transparent; padding:11px 16px; color:var(--muted); font-weight:700; border-bottom:3px solid transparent; cursor:pointer; }.workspace-tabs button.active { color:var(--red); border-bottom-color:var(--red); background:#fff; }.workspace-tab-panel { display:none; padding:20px 22px 6px; }.workspace-tab-panel.active { display:block; }.masterfile-row-list { display:grid; gap:9px; margin-top:12px; }.masterfile-edit-row { display:grid; gap:8px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--canvas); }.masterfile-edit-row.address-row { grid-template-columns:repeat(4,minmax(0,1fr)); }.masterfile-edit-row.contact-row { grid-template-columns:repeat(4,minmax(0,1fr)); }.masterfile-edit-row.subcategory-row { grid-template-columns:.7fr 1fr 1.5fr .65fr auto; }.masterfile-edit-row input,.masterfile-edit-row select { min-width:0; border:1px solid var(--line); border-radius:7px; padding:9px; background:#fff; }.masterfile-edit-row legend { padding:0 6px; color:var(--red); font-size:10px; font-weight:800; }.masterfile-edit-row label { display:grid; gap:5px; color:var(--muted); font-size:9px; }.masterfile-edit-row .remove-row-button { align-self:end; justify-self:start; color:#b42318; border-color:#f0b7b1; }.access-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; }.access-grid label { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:9px; padding:11px; }.access-grid small { display:block; color:var(--muted); margin-top:2px; }.attachment-control input { padding:7px !important; }.attachment-list,.document-attachments { display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }.attachment-list a,.attachment-list span,.document-attachments a { color:var(--black); background:var(--canvas); border:1px solid var(--line); border-radius:7px; padding:7px 9px; text-decoration:none; }.document-attachments { margin:0 22px 12px; align-items:center; }.attachment-indicator { display:inline-block; margin-left:7px; color:var(--red); font-size:10px; font-weight:700; }.register-filters { display:flex; gap:7px; margin-left:auto; }.register-filters input,.register-filters select { border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; min-width:145px; }.filterable-heading { position:relative; padding-right:28px !important; }.column-filter-button { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--muted); cursor:pointer; font-size:12px; line-height:1; }.column-filter-button.active { background:var(--red); border-color:var(--red); color:#fff; }.column-filter-menu { position:absolute; z-index:20; top:calc(100% + 3px); right:4px; width:220px; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:var(--shadow); text-align:left; text-transform:none; }.column-filter-menu strong { display:block; margin-bottom:7px; color:var(--black); }.column-filter-menu select { width:100%; border:1px solid var(--line); border-radius:7px; padding:8px; margin-bottom:7px; background:#fff; }.document-history { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 22px 12px; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--canvas); }#sales-product-search { margin-bottom:5px; }#sales-product { height:90px; }.stock-picker-button { width:100%; min-height:58px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:left; cursor:pointer; }.stock-picker-button span { display:block; color:var(--black); font-weight:700; }.stock-picker-button small { display:block; margin-top:4px; color:var(--muted); font-size:8px; }.stock-picker-filters { display:grid; grid-template-columns:2fr 1fr 1fr; gap:9px; margin-bottom:14px; }.stock-picker-filters input,.stock-picker-filters select { border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; }.stock-picker-table { max-height:58vh; overflow:auto; }.stock-picker-table thead { position:sticky; top:0; z-index:1; }.ar-stat-action { min-height:180px; display:grid; grid-template-columns:66px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:15px; align-items:start; }.ar-stat-action .module-action-icon { grid-row:1/3; width:60px; height:60px; border-radius:14px; margin:0; }.ar-stat-action .module-action-icon svg { width:32px; height:32px; }.ar-stat-action > strong { grid-column:2; font-size:18px; margin-top:4px; }.ar-stat-action small { grid-column:2; display:grid; gap:3px; width:100%; margin-top:8px; }.ar-stat-action small span { display:flex; justify-content:space-between; gap:12px; padding:3px 0; border-bottom:1px dashed var(--line); }.ar-stat-action small em { font-style:normal; color:var(--muted); }.ar-stat-action small b { color:var(--red); font-size:12px; text-align:right; }[data-page-panel="receivable-hub"] .module-band:not(.masterfiles-band) .module-action-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }[data-page-panel="payable-hub"] .module-band:not(.masterfiles-band) .module-action-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.document-bottom-actions { display:flex; justify-content:flex-end; padding:4px 22px 24px; }.document-bottom-actions .secondary-button { border-color:var(--red); color:var(--red); }.document-stock-selector { padding:14px 0; max-width:640px; }.document-stock-selector .stock-picker-button { min-height:68px; }.document-line-input { width:120px; min-height:42px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-weight:700; text-align:right; background:#fff; }.document-line-input:focus { outline:2px solid color-mix(in srgb,var(--red) 25%,transparent); border-color:var(--red); }.document-tax-select { min-width:190px; min-height:42px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit; font-weight:700; }.source-document-banner { display:flex; align-items:center; gap:9px; border:1px solid #f1b8b1; border-radius:9px; padding:10px; background:var(--red-soft); }.source-document-banner span { color:var(--muted); font-size:9px; text-transform:uppercase; font-weight:800; }.source-document-banner small { margin-left:auto; color:var(--muted); }.receipt-allocation-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px; border-radius:9px; background:var(--canvas); }.receipt-allocation-summary span { color:var(--muted); font-size:9px; }.receipt-allocation-summary strong { display:block; color:var(--black); margin-top:4px; font-size:11px; }.stock-check { display:flex; align-items:center; gap:6px; white-space:nowrap; }.compact-progress { display:grid; gap:2px; min-width:110px; font-size:9px; color:var(--muted); }.compact-progress span { display:flex; justify-content:space-between; gap:7px; }.compact-progress b { color:var(--black); }.lifecycle-progress { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:0 22px 12px; }.lifecycle-progress > div { border:1px solid var(--line); border-radius:9px; padding:10px; background:var(--canvas); }.lifecycle-progress span { display:block; color:var(--muted); font-size:9px; }.lifecycle-progress strong { display:block; margin-top:4px; font-size:14px; }.order-document-chain { margin:0 22px 12px; border:1px solid var(--line); border-radius:9px; padding:11px; }.order-document-chain > strong { display:block; margin-bottom:7px; }.order-document-chain > div { display:grid; grid-template-columns:120px 110px 20px 120px 110px; align-items:center; gap:7px; padding:7px 0; border-top:1px solid var(--line); }.order-document-chain span,.order-document-chain em { color:var(--muted); font-size:9px; font-style:normal; }@media (max-width: 1180px) {  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }  .inbox-layout { grid-template-columns: 230px 1fr; }  .contact-panel { display: none; }  .supplier-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }  .module-action-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }}@media (max-width: 850px) {  .auth-screen{grid-template-columns:1fr}.auth-brand-panel{display:none}.auth-form-panel{padding:28px;min-height:100vh}  .app-shell { grid-template-columns: 1fr; }  .sidebar { position: fixed; left: -250px; width: 240px; transition: .2s; }  .sidebar.open { left: 0; box-shadow: 12px 0 30px rgba(0,0,0,.22); }  .menu-button { display: block; }  .topbar { padding: 14px 18px; }  .content { padding: 18px; }  .dashboard-grid, .settings-grid { grid-template-columns: 1fr; }  .branch-select,.company-select { display: none; }  .module-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }  [data-page-panel="receivable-hub"] .module-band:not(.masterfiles-band) .module-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }  [data-page-panel="payable-hub"] .module-band:not(.masterfiles-band) .module-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }  .sales-entry-grid,.sales-entry-footer { grid-template-columns: 1fr; }  .sales-line-editor { grid-template-columns: repeat(3,minmax(0,1fr)); }  .customer-credit-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }  .masterfile-edit-row.address-row,.masterfile-edit-row.contact-row,.masterfile-edit-row.subcategory-row { grid-template-columns:repeat(2,minmax(0,1fr)); }  .access-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }}@media (max-width: 620px) {  h1 { font-size: 21px; }  .top-actions .icon-button { display: none; }  .top-actions .primary-button { padding: 9px 10px; font-size: 11px; }  .metric-grid, .metric-grid.compact { grid-template-columns: 1fr; }  .section-toolbar { align-items: stretch; flex-direction: column; }  .inbox-layout { grid-template-columns: 1fr; }  .conversation-list { max-height: 280px; }  .form-grid { grid-template-columns: 1fr; }  .form-grid .full { grid-column: auto; }  .approval-row { grid-template-columns: 1fr; gap: 8px; }  .supplier-grid { grid-template-columns: 1fr; }  .module-hero { align-items: flex-start; flex-direction: column; }  .module-action-grid { grid-template-columns: 1fr; }  [data-page-panel="receivable-hub"] .module-band:not(.masterfiles-band) .module-action-grid { grid-template-columns:1fr; }  [data-page-panel="payable-hub"] .module-band:not(.masterfiles-band) .module-action-grid { grid-template-columns:1fr; }  .module-band-title { align-items: flex-start; flex-direction: column; }  .document-parties,.document-summary { grid-template-columns: 1fr; }  .sales-line-editor { grid-template-columns: 1fr 1fr; }  .workspace-tabs { overflow-x:auto; }  .access-grid,.masterfile-edit-row.address-row,.masterfile-edit-row.contact-row,.masterfile-edit-row.subcategory-row { grid-template-columns:1fr; }  .register-filters { width:100%; margin-top:9px; }  .register-filters input,.register-filters select { min-width:0; flex:1; }}@media print {  @page { size: A4; margin: 12mm; }  .no-print { display: none !important; }  .print-page,.document-sheet { padding: 0; }  .document-brand .brand-mark,.document-lines th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }}.cost-summary-strip { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:12px; margin-bottom:18px; }.cost-summary-strip div { background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:14px; }.cost-summary-strip span { display:block; color:var(--muted); font-size:12px; margin-bottom:5px; }.cost-summary-strip strong { font-size:16px; }.picture-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }.picture-card { border:1px solid var(--line); border-radius:12px; padding:12px; display:grid; gap:9px; background:#fff; }.picture-card img,.picture-placeholder { width:100%; height:140px; object-fit:contain; border-radius:8px; background:var(--soft); }.picture-placeholder { display:grid; place-items:center; color:var(--muted); }.product-name { min-width:220px; max-width:360px; }.product-name small,td small { display:block; color:var(--muted); margin-top:4px; }.product-name small { max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.inventory-process-guidance { margin:0 0 18px; padding:13px 16px; border-left:4px solid var(--red); border-radius:0 10px 10px 0; background:#fff5f3; color:#4e3a36; }.inventory-process[data-process="branch-transfer"] .document-toolbar { border-bottom:3px solid #e4572e; }.inventory-process[data-process="internal-requisition"] .document-toolbar { border-bottom:3px solid #2868c7; }.inventory-process[data-process="stock-count"] .document-toolbar { border-bottom:3px solid #2c8a68; }.inventory-process[data-process="inventory-adjustment"] .document-toolbar { border-bottom:3px solid #a863d8; }.inventory-process[data-process="pricelist-updater"] .document-toolbar { border-bottom:3px solid #d49a16; }.enquiry-grid { display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); border:1px solid var(--line); border-radius:12px; overflow:hidden; }.enquiry-grid div { display:grid; grid-template-columns:1fr 1.4fr; padding:11px 14px; border-bottom:1px solid var(--line); }.enquiry-grid span { color:var(--muted); }.count-filter-row { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px; }.count-filter-row select { min-width:180px; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fff; }[data-finance-panel]{display:none}[data-finance-panel].active{display:block}[data-banking-panel]{display:none}[data-banking-panel].active{display:block}[data-finance-transaction-panel]{display:none}[data-finance-transaction-panel].active{display:block}#bank-batch-lines input,#bank-batch-lines select{width:100%;min-width:105px;height:42px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 10px;font:inherit;color:var(--ink)}#bank-batch-lines input:focus,#bank-batch-lines select:focus{outline:2px solid rgba(238,59,39,.18);border-color:var(--accent)}#bank-batch-lines td{vertical-align:middle;min-width:118px}#bank-batch-lines td:nth-child(4){min-width:245px}#bank-batch-lines td:nth-child(12){min-width:130px}.pricing-input{width:140px!important;text-align:right;font-variant-numeric:tabular-nums}#item-price-rows td:nth-child(4),#item-price-rows td:nth-child(5){text-align:right}#item-price-rows tr{height:58px}.auth-links{display:flex;justify-content:space-between;gap:16px;align-items:center}.company-logo-editor{display:flex;gap:18px;align-items:center;padding:18px;margin-bottom:18px;border:1px solid var(--line);border-radius:14px;background:#faf9f7}.company-logo-preview{width:92px;height:92px;border-radius:16px;background:#fff;border:1px dashed #c9c3bc;display:grid;place-items:center;font-weight:800;color:#777;overflow:hidden}.company-logo-preview img{width:100%;height:100%;object-fit:contain}.company-logo-editor label{display:grid;gap:8px}.company-logo-editor small{color:var(--muted)}#role-permission-table input[type="checkbox"]{width:18px;height:18px}#document-numbering-table input,#document-numbering-table select,#approval-rules-table input{min-width:90px;max-width:150px;padding:9px;border:1px solid var(--line);border-radius:8px}.report-catalog{display:grid;gap:22px}.report-group{background:#fff;border:1px solid #ebe7e3;border-radius:14px;padding:20px}.report-group h3{margin:0 0 14px}.report-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}.report-item{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #eee8e4;background:#fff;border-radius:10px;padding:13px;cursor:pointer}.report-item:hover{border-color:#ee3b27;background:#fff8f6}.report-item-icon{display:grid;place-items:center;width:38px;height:44px;border-radius:7px;background:#f5f2ef;color:#ee3b27;font-size:20px}.report-item strong,.report-item small{display:block}.report-item small{color:#777;margin-top:3px}.report-viewer{padding:0;overflow:hidden}.report-filter-bar{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(155px,.8fr)) auto auto;gap:12px;align-items:end;padding:18px 22px;background:#faf8f6;border-block:1px solid #eee8e4}.report-filter-bar label{display:grid;gap:6px;color:#6f6965;font-size:12px}.report-filter-bar select,.report-filter-bar input{min-height:42px;border:1px solid #ded9d5;border-radius:9px;background:#fff;padding:0 11px}.report-viewer>.metric-grid{padding:18px 22px}.report-result-wrap{max-height:58vh}.report-result-wrap thead{position:sticky;top:0;z-index:2}.report-result-wrap tfoot{position:sticky;bottom:0;background:#111;color:#fff}.report-result-wrap tfoot td{font-weight:700}@media(max-width:900px){.report-filter-bar{grid-template-columns:1fr 1fr}.report-filter-bar label:first-child{grid-column:1/-1}}