:root {
  --forest: #173f3b;
  --forest-2: #24554f;
  --mint: #bdebdc;
  --mint-2: #e5f7f0;
  --cream: #f4f2eb;
  --paper: #fffefa;
  --ink: #182623;
  --muted: #70807c;
  --line: #e3e7e1;
  --gold: #d99b46;
  --blue: #5d86c9;
  --red: #b85850;
  --shadow: 0 14px 40px rgba(22, 48, 43, .08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; }
.login-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 75% 20%, rgba(189,235,220,.16), transparent 28%), var(--forest); transition: .25s ease; }
.login-screen.hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.login-card { width: min(430px, 94vw); padding: 30px; border-radius: 20px; background: var(--paper); box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 32px; }.login-brand > div > strong { display: block; font: 800 15px Manrope; letter-spacing: .08em; }.login-brand small { color: var(--muted); font-size: 10px; }
.login-copy h1 { margin: 0; font: 800 27px Manrope; letter-spacing: -.04em; }.login-copy > p:last-child { margin: 8px 0 22px; color: var(--muted); font-size: 11px; line-height: 1.6; }
#loginForm { display: grid; gap: 14px; } #loginForm.hidden { display: none; } #loginForm label, .admin-reset-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; } #loginForm input, .admin-reset-form input { height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); outline: none; } #loginForm input:focus, .admin-reset-form input:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(36,85,79,.1); } #loginForm .button { width: 100%; margin-top: 2px; }
.login-reset-link { justify-self: center; padding: 2px 5px; border: 0; background: transparent; color: var(--forest-2); font-size: 10px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.admin-reset-form { display: grid; gap: 12px; }.admin-reset-form.hidden { display: none; }.admin-reset-form .button { width: 100%; }.reset-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }.reset-heading h2 { margin: 1px 0 0; font: 800 20px Manrope; letter-spacing: -.03em; }.reset-close { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; }.reset-help { margin: -3px 0 2px; color: var(--muted); font-size: 10px; line-height: 1.5; }.password-rule { margin-top: -5px; color: var(--muted); font-size: 9px; }
.login-error { min-height: 14px; margin: -4px 0 0; color: var(--red); font-size: 10px; }
.login-error.success { color: #377261; }
.login-accounts { margin-top: 22px; padding: 12px 14px; display: grid; gap: 4px; border-radius: 10px; background: #f5f7f3; color: var(--muted); font-size: 9px; }.login-accounts strong { color: var(--ink); margin-bottom: 2px; }.login-accounts b { color: var(--forest-2); }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 236px; padding: 26px 18px 20px; display: flex; flex-direction: column; color: #e8f2ef; background: var(--forest); z-index: 30; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; padding: 0 8px 28px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--mint); color: var(--forest); font: 800 20px Manrope; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.brand strong { display: block; font: 800 16px Manrope; letter-spacing: .13em; }
.brand small { color: #a9c1bb; font-size: 11px; }
.year-switcher { margin: -10px 8px 18px; display: flex; flex-direction: column; gap: 6px; color: #8eaca5; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.year-switcher select { width: 100%; height: 38px; padding: 0 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; outline: none; background: rgba(255,255,255,.08); color: #f2f8f6; font-weight: 800; cursor: pointer; }
.year-switcher option { background: var(--forest); color: white; }
.nav { display: flex; flex-direction: column; gap: 5px; }
.nav-label { padding: 0 12px; margin: 6px 0 7px; color: #84a49d; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-item { width: 100%; border: 0; border-radius: 10px; padding: 11px 12px; display: flex; gap: 11px; align-items: center; background: transparent; color: #c8d8d4; cursor: pointer; text-align: left; transition: .2s ease; }
.nav-item:hover { background: rgba(255,255,255,.06); color: white; }
.nav-item.active { background: var(--mint); color: var(--forest); font-weight: 700; }
.nav-icon { width: 18px; text-align: center; font-size: 18px; line-height: 1; }
.nav-count { margin-left: auto; padding: 2px 7px; border-radius: 20px; background: rgba(255,255,255,.12); font-size: 10px; }
.nav-item.active .nav-count { background: rgba(23,63,59,.12); }
.sidebar-source { margin-top: auto; padding: 12px; border-radius: 12px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.source-icon { grid-row: 1 / 4; width: 34px; height: 34px; display: grid; place-items: center; background: #318067; border-radius: 8px; font-weight: 800; }
.sidebar-source span, .sidebar-source small { display: block; color: #9bb5af; font-size: 9px; }
.sidebar-source strong { display: block; margin: 2px 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot { margin-top: auto; padding: 14px 7px 0; color: #73968e; font-size: 10px; }

.main { min-height: 100vh; margin-left: 236px; }
.topbar { position: sticky; top: 0; z-index: 20; height: 72px; padding: 0 34px; display: flex; align-items: center; gap: 20px; background: rgba(244,242,235,.91); border-bottom: 1px solid rgba(215,219,212,.8); backdrop-filter: blur(12px); }
.global-search { position: relative; width: min(520px, 55vw); height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 9px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.global-search input { flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; }
.global-search input::placeholder { color: #9aa5a1; }
kbd { padding: 3px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); background: #f7f7f3; font-size: 9px; }
.global-search-results { position: absolute; top: calc(100% + 9px); left: 0; right: 0; max-height: min(520px, 70vh); overflow-y: auto; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 18px 50px rgba(22,48,43,.17); z-index: 80; }
.global-search-results[hidden] { display: none; }
.search-result-label { padding: 7px 9px 5px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.search-result { width: 100%; padding: 9px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.search-result:hover { background: #f3f6f2; }.search-result > i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: var(--mint-2); color: var(--forest); font-style: normal; font-size: 9px; font-weight: 800; }.search-result strong, .search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.search-result strong { font-size: 10px; }.search-result small { margin-top: 2px; color: var(--muted); font-size: 8px; }.search-result > span:last-child { color: var(--muted); font-size: 9px; }
.search-empty { padding: 22px 12px; color: var(--muted); font-size: 10px; text-align: center; }
.top-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.erp-status { height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--muted); font-size: 9px; }
.erp-status span { width: 7px; height: 7px; border-radius: 50%; background: #d99b46; box-shadow: 0 0 0 3px rgba(217,155,70,.13); }
.erp-status.online { color: #377261; }.erp-status.online span { background: #42aa78; box-shadow: 0 0 0 3px rgba(66,170,120,.13); }
.erp-status.offline { color: #aa5850; }.erp-status.offline span { background: #b85850; box-shadow: 0 0 0 3px rgba(184,88,80,.13); }
.google-sync-status { cursor: pointer; font-family: inherit; }
.google-sync-status.syncing span { background: #d99b46; animation: pulse 1s infinite alternate; }
.google-sync-status.connected { color: #377261; }.google-sync-status.connected span { background: #42aa78; box-shadow: 0 0 0 3px rgba(66,170,120,.13); }
.google-sync-status.error, .google-sync-status.needs_conversion { color: #aa5850; }.google-sync-status.error span, .google-sync-status.needs_conversion span { background: #b85850; box-shadow: 0 0 0 3px rgba(184,88,80,.13); }
.google-sync-status:disabled { cursor: default; opacity: .78; }
@keyframes pulse { to { opacity: .35; } }
.icon-button, .menu-button { border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.icon-button { width: 38px; height: 38px; border-radius: 10px; }
.menu-button { display: none; width: 38px; height: 38px; border-radius: 9px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--forest); color: white; font-size: 10px; font-weight: 700; }
.user-chip { padding: 2px 9px 2px 2px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); cursor: pointer; text-align: left; }.user-chip strong { display: block; font-size: 9px; }.user-chip small { display: block; color: var(--muted); font-size: 8px; }
.notification-wrap { position: relative; }
.notification-button { position: relative; color: var(--forest); font-size: 19px; }
.notification-button span { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border: 2px solid var(--cream); border-radius: 10px; background: var(--red); color: white; font-size: 8px; font-weight: 800; }
.notification-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(390px, 88vw); max-height: min(620px, 76vh); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 20px 55px rgba(17,42,37,.2); z-index: 90; }
.notification-panel[hidden] { display: none; }.notification-head { padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.notification-head strong, .notification-head small { display: block; }.notification-head strong { font: 800 13px Manrope; }.notification-head small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.notification-list { max-height: 520px; overflow-y: auto; padding: 7px; }.notification-item { width: 100%; padding: 11px; display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }.notification-item:hover { background: #f3f6f2; }.notification-item i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--mint-2); color: var(--forest-2); font-style: normal; font-weight: 800; }.notification-item.warning i { background: #fbf0df; color: #a76c1b; }.notification-item.error i { background: #f9e9e7; color: var(--red); }.notification-item strong, .notification-item small { display: block; }.notification-item strong { font-size: 10px; }.notification-item small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }.notification-item time { color: var(--muted); font-size: 8px; white-space: nowrap; }.notification-empty { padding: 35px 15px; color: var(--muted); font-size: 10px; text-align: center; }

.view { display: none; padding: 34px; max-width: 1540px; margin: 0 auto; }
.view.active { display: block; animation: fade .22s ease; }
@keyframes fade { from { opacity: .5; transform: translateY(3px); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.page-heading.compact { align-items: center; }
.eyebrow { margin: 0 0 5px !important; color: #4d7d73 !important; font-size: 10px !important; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.page-heading h1 { margin: 0; font: 800 clamp(25px, 3vw, 34px)/1.18 Manrope; letter-spacing: -.035em; }
.page-heading p { margin: 7px 0 0; color: var(--muted); }
.heading-actions { display: flex; gap: 10px; }
.button { min-height: 40px; padding: 0 15px; border-radius: 9px; border: 1px solid transparent; font-weight: 700; font-size: 12px; cursor: pointer; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button.primary { background: var(--forest); color: white; box-shadow: 0 5px 14px rgba(23,63,59,.16); }
.button.secondary { background: var(--paper); border-color: var(--line); }
.button.ghost { background: transparent; color: var(--muted); }
.text-button { border: 0; background: none; color: var(--forest-2); font-weight: 700; cursor: pointer; }

.scope-bar { min-height: 50px; margin-bottom: 18px; padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #dfe5de; border-radius: 12px; background: rgba(255,254,250,.58); }
.scope-bar > div { display: flex; align-items: center; gap: 7px; }
.scope-bar small { color: var(--muted); margin-left: 3px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #42aa78; box-shadow: 0 0 0 4px rgba(66,170,120,.12); }
.scope-bar label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.scope-bar select { border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 700; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px; }
.kpi-card { min-height: 160px; padding: 20px; position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 14px rgba(24,38,35,.025); }
.kpi-card.ink { background: var(--forest); border-color: var(--forest); color: white; }
.kpi-card.ink:after { content: ""; position: absolute; width: 130px; height: 130px; right: -70px; top: -65px; border: 22px solid rgba(189,235,220,.08); border-radius: 50%; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 600; }
.ink .kpi-top { color: #b8ccc7; }
.kpi-top i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: var(--mint-2); color: var(--forest); font-style: normal; font-size: 11px; font-weight: 800; }
.kpi-top i.mint { background: var(--mint-2); }.kpi-top i.gold { background: #fbf0df; color: #a76c1b; }.kpi-top i.blue { background: #e7eefb; color: #3f69a7; }
.ink .kpi-top i { background: rgba(255,255,255,.1); color: var(--mint); }
.kpi-card > strong { display: block; margin-top: 16px; font: 800 29px Manrope; letter-spacing: -.04em; }
.kpi-card > small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.kpi-card.ink > small { color: #a9c2bc; }
.progress { height: 4px; margin-top: 15px; border-radius: 5px; overflow: hidden; background: #edf0eb; }
.progress span { display: block; height: 100%; background: #52aa8f; border-radius: inherit; }
.goldbar span { background: var(--gold); }.bluebar span { background: var(--blue); }
.sparkline { height: 30px; margin-top: 10px; display: flex; align-items: flex-end; gap: 4px; }
.sparkline i { flex: 1; min-width: 4px; background: rgba(189,235,220,.35); border-radius: 3px 3px 0 0; }
.sparkline i:last-child { background: var(--mint); }

.analytics-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 15px; margin-bottom: 15px; }
.operations-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 15px; }
.insights-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 15px; margin-bottom: 15px; }
.aging-panel, .vendor-month-panel { overflow: hidden; }
.aging-panel .table-scroll { max-height: 430px; overflow: auto; }.aging-panel thead { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.aging-summary { padding: 3px 16px 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.aging-bucket { min-height: 72px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8; }
.aging-bucket span, .aging-bucket small { display: block; color: var(--muted); font-size: 8px; }.aging-bucket strong { display: block; margin: 5px 0 2px; font: 800 19px Manrope; }.aging-bucket.warn { border-color: #efd9b9; background: #fff9ef; }.aging-bucket.critical { border-color: #efd0cc; background: #fff5f3; }.aging-bucket.critical strong { color: var(--red); }
.age-days { color: var(--red); font-weight: 800; white-space: nowrap; }
.count-badge.neutral { color: var(--forest-2); background: var(--mint-2); }
.panel-tools { display: flex; align-items: center; gap: 8px; }
.compact-select { height: 34px; max-width: 180px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: 700 9px Inter, sans-serif; outline: none; }
.compact-select:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(36,85,79,.1); }
.vendor-aging-table th, .vendor-aging-table td { text-align: right; white-space: nowrap; }.vendor-aging-table th:first-child, .vendor-aging-table td:first-child { min-width: 180px; text-align: left; }.vendor-aging-table td:first-child strong, .vendor-aging-table td:first-child small { display: block; }.vendor-aging-table td:first-child small { margin-top: 3px; color: var(--muted); font-size: 8px; }.aging-value { color: var(--muted); }.aging-value.has-value { color: var(--ink); font-weight: 700; }.aging-total-value { color: var(--forest-2); font-weight: 800; }
.expense-matrix th, .expense-matrix td { text-align: right; white-space: nowrap; }.expense-matrix th:first-child, .expense-matrix td:first-child { position: sticky; left: 0; z-index: 1; min-width: 150px; text-align: left; background: var(--paper); }.expense-matrix td:first-child strong, .expense-matrix td:first-child small { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }.expense-matrix td:first-child small { margin-top: 2px; color: var(--muted); font-size: 8px; }.expense-matrix .month-value { color: var(--muted); }.expense-matrix .month-value.has-value { color: var(--ink); font-weight: 700; }.expense-matrix .total-value { color: var(--forest-2); font-weight: 800; }
.expiry-panel { margin-top: 15px; overflow: hidden; }
.expiry-panel .record-cell { min-width: 250px; }
.expiry-filter-bar { padding: 4px 16px 14px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--line); }.expiry-filter-bar label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }.expiry-filter-bar input, .expiry-filter-bar select { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); outline: none; }.expiry-filter-bar input:focus, .expiry-filter-bar select:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(36,85,79,.1); }.renewal-date-table { max-height: 620px; overflow: auto; }.renewal-date-table thead { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.expiry-state { display: inline-flex; padding: 5px 8px; border-radius: 20px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.expiry-state.active { color: #377261; background: #e8f4ef; }
.expiry-state.soon { color: #a87026; background: #fbf1df; }
.expiry-state.expired { color: #aa5850; background: #f9e9e7; }
.expiry-state.missing { color: #70807c; background: #edf0ec; }
.remaining { color: var(--muted); font-size: 10px; white-space: nowrap; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 14px rgba(24,38,35,.025); }
.panel-head { padding: 20px 20px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-head h2 { margin: 0; font: 800 15px Manrope; letter-spacing: -.02em; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 7px; height: 7px; border-radius: 2px; }.legend-pr { background: var(--forest); }.legend-invoice { background: var(--mint); }
.chart { height: 230px; padding: 12px 22px 20px; display: flex; gap: 16px; align-items: stretch; }
.chart-y { width: 24px; display: flex; flex-direction: column; justify-content: space-between; color: #9aa5a1; font-size: 9px; text-align: right; padding-bottom: 22px; }
.chart-bars { flex: 1; display: flex; justify-content: space-around; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, #fffefa 0, #fffefa 42px, #edf0ec 43px); }
.month-group { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 0; }
.month-group span { width: min(24px, 35%); min-height: 2px; border-radius: 5px 5px 0 0; transition: .3s ease; }
.month-group .pr-bar { background: var(--forest); }.month-group .invoice-bar { background: var(--mint); }
.month-group label { position: absolute; bottom: -20px; width: 100%; color: var(--muted); font-size: 9px; text-align: center; }
.donut-wrap { min-height: 230px; padding: 4px 22px 20px; display: flex; align-items: center; justify-content: center; gap: 26px; }
.donut { flex: 0 0 138px; width: 138px; height: 138px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--forest) 0 25%, var(--mint) 25% 50%, var(--gold) 50% 75%, #8aa4d0 75%); }
.donut:before { content: ""; grid-area: 1/1; width: 91px; height: 91px; border-radius: 50%; background: var(--paper); }
.donut > div { grid-area: 1/1; z-index: 1; text-align: center; }
.donut strong { display: block; font: 800 23px Manrope; }.donut span { color: var(--muted); font-size: 9px; }
.stage-list { flex: 1; min-width: 140px; }
.stage-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; font-size: 10px; }
.stage-row i { width: 7px; height: 7px; border-radius: 2px; }.stage-row span { color: var(--muted); }.stage-row strong { font-size: 11px; }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 16px; color: #87938f; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--line); }
td { padding: 12px 16px; border-bottom: 1px solid #edf0ec; vertical-align: middle; font-size: 11px; }
tbody tr { cursor: pointer; transition: .15s ease; } tbody tr:hover { background: #f8faf7; } tbody tr:last-child td { border-bottom: 0; }
.record-cell { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.type-mark { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--mint-2); color: var(--forest); font-size: 9px; font-weight: 800; }
.type-mark.invoice { background: #fbf0df; color: #9c661c; }
.record-cell strong, .description-cell strong { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-cell small, .description-cell small { display: block; color: var(--muted); margin-top: 3px; }
.product-cell { min-width: 180px; max-width: 260px; }.product-cell strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-cell small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.money { font-weight: 700; white-space: nowrap; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 20px; background: #edf4f1; color: #377261; font-size: 9px; font-weight: 700; white-space: nowrap; }
.status-pill:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.po { background: #e9effa; color: #5578b0; }.status-pill.invoice { background: #fbf1df; color: #a87026; }.status-pill.renewal { background: #f3eafb; color: #825ca1; }.status-pill.attention { background: #f9e9e7; color: #aa5850; }
.queue-panel { padding-bottom: 9px; }
.count-badge { min-width: 29px; height: 29px; padding: 0 8px; display: grid; place-items: center; background: #f6e7e4; color: var(--red); border-radius: 9px; font-weight: 800; font-size: 11px; }
.queue-list { padding: 0 14px; }
.queue-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 11px 6px; border-top: 1px solid #edf0ec; }
.queue-item:first-child { border-top: 0; }
.queue-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #f9ebe8; color: var(--red); font-weight: 800; }
.queue-item strong { display: block; font-size: 11px; }.queue-item small { color: var(--muted); font-size: 9px; }.queue-item > b { font: 800 14px Manrope; }

.register-panel { overflow: hidden; }
.filter-row { padding: 16px; display: flex; gap: 9px; border-bottom: 1px solid var(--line); }
.filter-row select, .filter-search { min-height: 39px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.filter-row select { padding: 0 28px 0 10px; color: #50615d; font-size: 11px; outline: 0; }
.filter-search { min-width: 230px; flex: 1; display: flex; gap: 8px; align-items: center; padding: 0 11px; }
.filter-search input { width: 100%; border: 0; outline: 0; }
.register-summary { padding: 13px 16px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; background: #fafbf8; }
.register-summary strong { color: var(--ink); }
.register-table { min-height: 500px; }
.register-table td { padding-top: 13px; padding-bottom: 13px; }
.register-table .description-cell { min-width: 240px; max-width: 330px; }
.row-menu { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 7px; background: white; cursor: pointer; }
.pagination { padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.pagination button { width: 30px; height: 30px; border: 1px solid var(--line); background: white; cursor: pointer; }.pagination button:first-child { border-radius: 7px 0 0 7px; }.pagination button:last-child { border-radius: 0 7px 7px 0; }
.pagination button:disabled { opacity: .35; cursor: default; }

.vendor-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 15px; }
.renewal-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px; }
.renewal-table-panel { overflow: hidden; }
.renewal-toolbar { padding: 15px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.renewal-toolbar .filter-search { max-width: 460px; }
.renewal-toolbar select { height: 39px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: #50615d; font-size: 11px; outline: 0; }
.segmented-control { flex: 0 0 auto; display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f2f4ef; }
.segmented-control button { min-height: 31px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 800; cursor: pointer; }
.segmented-control button.active { background: var(--paper); color: var(--forest); box-shadow: 0 2px 7px rgba(24,38,35,.08); }
.renewal-table { min-height: 410px; }
.renewal-table .record-cell { min-width: 270px; }
.renewal-year { font: 800 16px Manrope; color: var(--forest-2); }
.product-renewal-row { cursor: pointer; }.product-renewal-row:hover { background: var(--mint-2); }.product-group-name { min-width: 250px; display: flex; align-items: center; gap: 10px; }.product-group-name > span { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--mint-2); color: var(--forest); font-size: 16px; font-weight: 800; }.product-group-name strong { display: block; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-group-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.empty-table { padding: 48px !important; text-align: center; color: var(--muted); }
.pagination.hidden { display: none; }
.summary-tile { padding: 18px; display: flex; justify-content: space-between; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.summary-tile span { color: var(--muted); font-size: 10px; }.summary-tile strong { display: block; margin-top: 5px; font: 800 22px Manrope; }.summary-tile i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--mint-2); color: var(--forest); font-style: normal; font-weight: 800; }
.vendor-table-panel { overflow: hidden; }
.vendor-toolbar { padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.vendor-toolbar .filter-search { max-width: 430px; }
.vendor-toolbar > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.vendor-cell { min-width: 220px; display: flex; gap: 10px; align-items: center; }
.vendor-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--forest); color: white; font: 800 13px Manrope; }
.vendor-cell strong { display: block; font-size: 11px; }.vendor-cell small { display: block; max-width: 230px; margin-top: 3px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-cell strong { display: block; font-size: 10px; }.contact-cell small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.vendor-email { color: var(--forest-2); font-size: 10px; font-weight: 700; text-decoration: none; word-break: break-word; }.vendor-email:hover { text-decoration: underline; }.missing-email { color: var(--muted); font-size: 10px; font-style: italic; }
.edit-vendor { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--forest-2); font-size: 9px; font-weight: 800; cursor: pointer; }
.records-link { min-width: 34px; padding: 5px 9px; border: 0; border-radius: 8px; background: var(--mint-2); color: var(--forest); font-weight: 800; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(23,63,59,.28); text-underline-offset: 2px; }

.quality-layout { display: grid; grid-template-columns: 320px 1fr; gap: 15px; margin-bottom: 15px; }
.score-card { padding: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.quality-ring { width: 170px; height: 170px; display: grid; place-items: center; align-content: center; border-radius: 50%; background: conic-gradient(var(--forest) 0 90%, #e8ebe6 90%); position: relative; }
.quality-ring:before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--paper); }
.quality-ring strong, .quality-ring span { position: relative; z-index: 1; }.quality-ring strong { font: 800 32px Manrope; }.quality-ring span { color: var(--muted); font-size: 9px; }
.score-card p { max-width: 230px; margin: 18px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.coverage-list { padding: 0 20px 17px; }
.coverage-row { display: grid; grid-template-columns: 135px 1fr 40px; gap: 12px; align-items: center; padding: 8px 0; }
.coverage-row span { color: var(--muted); font-size: 10px; }.coverage-row b { text-align: right; font-size: 10px; }.coverage-bar { height: 7px; border-radius: 10px; background: #edf0ec; overflow: hidden; }.coverage-bar i { display: block; height: 100%; background: var(--forest-2); border-radius: inherit; }
.issue-panel { padding-bottom: 18px; }.issue-grid { padding: 0 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.issue-card { padding: 14px; border-radius: 11px; background: #faf9f4; border: 1px solid #ecebe5; }.issue-card strong { font: 800 22px Manrope; }.issue-card h3 { margin: 8px 0 3px; font-size: 11px; }.issue-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }

.drawer-backdrop, .modal-backdrop { position: fixed; inset: 0; background: rgba(9,25,22,.38); opacity: 0; pointer-events: none; transition: .2s ease; z-index: 50; backdrop-filter: blur(2px); }
.drawer-backdrop.open, .modal-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(520px, 94vw); display: flex; flex-direction: column; background: var(--paper); box-shadow: -20px 0 50px rgba(12,30,27,.16); transform: translateX(105%); transition: .28s ease; z-index: 60; }
.drawer.open { transform: translateX(0); }
.drawer-head, .modal-head { padding: 21px 23px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); }
.drawer-head h2, .modal-head h2 { margin: 3px 0 0; font: 800 20px Manrope; }
.record-id { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.close-button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; font-size: 20px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 23px; }
.detail-section { margin-bottom: 22px; }.detail-section h3 { margin: 0 0 10px; color: #54716a; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.detail-field { padding: 10px 11px; border-radius: 9px; background: #f6f7f3; }.detail-field.wide { grid-column: 1 / -1; }.detail-field span { display: block; color: var(--muted); font-size: 9px; }.detail-field strong { display: block; margin-top: 4px; font-size: 11px; overflow-wrap: anywhere; }.detail-field strong.empty { color: #9da6a3; font-weight: 500; font-style: italic; }
.control-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.control-editor label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }.control-editor input, .control-editor select, .control-editor textarea { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); outline: none; }.control-editor .wide { grid-column: 1 / -1; }.control-editor textarea { resize: vertical; }.po-stage-callout { grid-column: 1 / -1; padding: 10px 11px; border-radius: 9px; background: #fbf3e6; color: #8a642c; font-size: 9px; }
.document-grid { display: grid; gap: 10px; }.document-card { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8; }.document-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }.document-card-head strong { font-size: 10px; }.document-upload { margin-top: 9px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }.document-upload input[type="file"] { min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); font-size: 9px; }.upload-document { padding: 0 11px; border: 0; border-radius: 7px; background: var(--forest); color: white; font-size: 9px; font-weight: 800; cursor: pointer; }.attachment-list { margin-top: 8px; display: grid; gap: 5px; }.attachment-item { padding: 7px 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 7px; background: var(--paper); font-size: 9px; }.attachment-item a { color: var(--forest-2); font-weight: 700; text-decoration: none; }.attachment-item small { color: var(--muted); }.view-only-note { padding: 9px 11px; margin-bottom: 10px; border-radius: 8px; background: #e9effa; color: #5578b0; font-size: 9px; }
.drawer-edit { padding: 16px 23px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; border-top: 1px solid var(--line); background: #fafbf8; }
.drawer-edit label, .form-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 600; }
.drawer-edit select, .drawer-edit textarea, .form-grid input, .form-grid select { width: 100%; border: 1px solid #dce2dc; border-radius: 8px; padding: 9px 10px; outline: none; color: var(--ink); background: white; }
.drawer-edit textarea { resize: vertical; min-height: 70px; }
.drawer-foot { padding: 15px 23px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); }

.modal { position: fixed; top: 50%; left: 50%; width: min(660px, 94vw); max-height: 92vh; overflow-y: auto; background: var(--paper); border-radius: 18px; box-shadow: 0 28px 80px rgba(11,29,25,.24); opacity: 0; pointer-events: none; transform: translate(-50%, -47%) scale(.98); transition: .2s ease; z-index: 70; }
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.wide-modal { width: min(1120px, 96vw); overflow: hidden; }
.sync-admin-modal { width: min(1050px, 96vw); }.sync-admin-body { max-height: 68vh; overflow-y: auto; padding: 20px 22px; }.sync-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.sync-summary-card { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8; }.sync-summary-card span, .sync-summary-card small { display: block; color: var(--muted); font-size: 8px; }.sync-summary-card strong { display: block; margin: 6px 0 3px; font: 800 14px Manrope; overflow-wrap: anywhere; }.sync-summary-card.good strong { color: #377261; }.sync-summary-card.bad strong { color: var(--red); }.sync-actions { padding: 14px 0 18px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }.sync-actions span { margin-left: auto; color: var(--muted); font-size: 9px; }.admin-section { padding-top: 19px; }.admin-section + .admin-section { margin-top: 5px; border-top: 1px solid var(--line); }.admin-section-head { margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; }.admin-section-head h3 { margin: 0; font: 800 13px Manrope; }.admin-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }.conflict-list { display: grid; gap: 10px; }.conflict-card { padding: 13px; border: 1px solid #efd9b9; border-radius: 11px; background: #fffaf1; }.conflict-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.conflict-card-head strong, .conflict-card-head small { display: block; }.conflict-card-head strong { font-size: 11px; }.conflict-card-head small { margin-top: 3px; color: var(--muted); font-size: 8px; }.conflict-actions { display: flex; gap: 7px; }.conflict-actions button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); cursor: pointer; font-size: 8px; font-weight: 800; }.conflict-differences { margin-top: 10px; display: grid; gap: 4px; }.conflict-field { padding: 7px 9px; display: grid; grid-template-columns: 120px 1fr 1fr; gap: 10px; border-radius: 7px; background: rgba(255,255,255,.7); font-size: 8px; }.conflict-field b { color: var(--muted); }.sync-history { max-height: 270px; }.sync-history td { vertical-align: top; }.sync-result { padding: 4px 7px; border-radius: 15px; background: #e8f4ef; color: #377261; font-size: 8px; font-weight: 800; }.sync-result.error, .sync-result.needs_conversion { background: #f9e9e7; color: var(--red); }.sync-change { color: var(--muted); font-size: 8px; white-space: nowrap; }
.modal-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.vendor-record-summary { padding: 14px 22px; display: flex; gap: 10px; border-bottom: 1px solid var(--line); background: #fafbf8; }
.vendor-record-summary span { min-width: 130px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--muted); font-size: 9px; }
.vendor-record-summary strong { display: block; margin-top: 3px; color: var(--ink); font: 800 14px Manrope; }
.vendor-record-table { max-height: 58vh; overflow: auto; }
.vendor-record-table .description-cell { min-width: 270px; max-width: 390px; }
.upload-body { padding: 22px; display: grid; gap: 16px; }
.upload-body > label:first-child { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.upload-body select { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); outline: none; }
.file-drop { min-height: 170px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1.5px dashed #b9c8c3; border-radius: 13px; background: #f7faf7; cursor: pointer; text-align: center; transition: .2s ease; }
.file-drop:hover, .file-drop.has-file { border-color: #4e9a83; background: var(--mint-2); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #318067; color: white; font-weight: 900; }
.file-drop strong { font-size: 12px; }.file-drop small { color: var(--muted); font-size: 10px; }
.import-note { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; border-radius: 10px; background: #fbf3e6; color: #8a642c; }
.import-note strong { font-size: 10px; }.import-note span { font-size: 9px; }
.form-grid { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid .span-2 { grid-column: 1 / -1; }.modal-foot { padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); background: #fafbf8; }.modal-foot > span { color: var(--muted); font-size: 10px; }.modal-foot > div { display: flex; gap: 8px; }
.renewal-form-note { padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; border-radius: 9px; background: var(--mint-2); color: var(--forest-2); font-size: 9px; }.renewal-form-note strong { font-size: 10px; }.renewal-form-note span { color: var(--muted); }
.inventory-kpis { margin-bottom: 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.inventory-kpi { min-height: 118px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }.inventory-kpi.ink { background: var(--forest); border-color: var(--forest); color: white; }.inventory-kpi.alert { background: #fff8ee; border-color: #efd9b9; }.inventory-kpi span, .inventory-kpi small { display: block; color: var(--muted); font-size: 9px; }.inventory-kpi.ink span, .inventory-kpi.ink small { color: #b8ccc7; }.inventory-kpi strong { display: block; margin: 9px 0 3px; font: 800 27px Manrope; }.inventory-kpi.alert strong { color: #a76c1b; }
.inventory-team-grid { margin-bottom: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.inventory-team-card { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }.inventory-team-head { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }.inventory-team-head h2 { margin: 0; font: 800 15px Manrope; }.inventory-team-head span { padding: 4px 8px; border-radius: 15px; background: var(--mint-2); color: var(--forest-2); font-size: 8px; font-weight: 800; }.inventory-category-list { display: grid; gap: 6px; }.inventory-category { padding: 9px 10px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; border-radius: 8px; background: #f7f8f4; }.inventory-category strong { font-size: 9px; }.inventory-category b { font: 800 13px Manrope; }.inventory-category small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }.inventory-category.low { background: #fff5e8; }.inventory-category.low b { color: #a76c1b; }
.inventory-register { overflow: hidden; }.inventory-toolbar { padding: 4px 20px 15px; display: flex; gap: 10px; border-bottom: 1px solid var(--line); }.inventory-toolbar .filter-search { flex: 1; max-width: none; }.inventory-toolbar select { min-width: 145px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 9px; }.inventory-table { max-height: 580px; }.inventory-table td { vertical-align: middle; }.inventory-name strong, .inventory-name small, .inventory-group strong, .inventory-group small { display: block; }.inventory-name strong, .inventory-group strong { font-size: 10px; }.inventory-name small, .inventory-group small { margin-top: 3px; color: var(--muted); font-size: 8px; }.stock-number { font: 800 13px Manrope; text-align: center; }.stock-status { display: inline-flex; padding: 5px 8px; border-radius: 16px; background: #e8f4ef; color: #377261; font-size: 8px; font-weight: 800; white-space: nowrap; }.stock-status.low { background: #fbf1df; color: #a87026; }.stock-status.out { background: #f9e9e7; color: var(--red); }.edit-inventory { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--forest-2); cursor: pointer; font-size: 8px; font-weight: 800; }
.toast { position: fixed; left: 50%; bottom: 28px; padding: 11px 16px; border-radius: 9px; background: var(--forest); color: white; box-shadow: var(--shadow); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .2s ease; z-index: 100; font-size: 11px; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1120px) { .inventory-kpis { grid-template-columns: repeat(2, 1fr); }.inventory-team-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .inventory-toolbar { flex-wrap: wrap; }.inventory-toolbar .filter-search { flex-basis: 100%; }.inventory-toolbar select { flex: 1; }.sync-summary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 590px) { .inventory-kpis, .sync-summary { grid-template-columns: 1fr; }.inventory-toolbar select { width: 100%; }.conflict-field { grid-template-columns: 1fr; } }
body.dark { --cream: #111a18; --paper: #182320; --ink: #eaf2ef; --muted: #94a8a2; --line: #2b3a36; }
body.dark .compact-select { background: #16211e; color: var(--ink); border-color: var(--line); }
body.dark .topbar { background: rgba(17,26,24,.9); } body.dark .global-search, body.dark .global-search-results, body.dark .button.secondary, body.dark .filter-row select, body.dark .filter-search, body.dark .row-menu, body.dark .pagination button, body.dark .close-button { background: #1a2723; } body.dark .scope-bar, body.dark .register-summary, body.dark .drawer-edit, body.dark .modal-foot, body.dark .vendor-record-summary { background: rgba(24,35,32,.7); } body.dark .chart-bars { background: repeating-linear-gradient(to bottom, var(--paper) 0, var(--paper) 42px, #2b3734 43px); } body.dark tbody tr:hover, body.dark .detail-field, body.dark .issue-card, body.dark .search-result:hover { background: #1d2a26; } body.dark .drawer-edit select, body.dark .drawer-edit textarea, body.dark .form-grid input, body.dark .form-grid select, body.dark .expiry-filter-bar input, body.dark .expiry-filter-bar select { background: #16211e; color: var(--ink); border-color: var(--line); } body.dark .aging-bucket { background: #1a2723; } body.dark .expense-matrix th:first-child, body.dark .expense-matrix td:first-child { background: var(--paper); }

@media (max-width: 1120px) { .kpi-grid, .renewal-summary { grid-template-columns: repeat(2, 1fr); }.analytics-grid, .operations-grid, .insights-grid { grid-template-columns: 1fr; }.issue-grid { grid-template-columns: repeat(2, 1fr); }.renewal-toolbar { flex-wrap: wrap; }.renewal-toolbar .filter-search { max-width: none; } }
@media (max-width: 820px) { .sidebar { transform: translateX(-105%); transition: .25s ease; box-shadow: 12px 0 40px rgba(0,0,0,.18); }.sidebar.open { transform: translateX(0); }.main { margin-left: 0; }.menu-button { display: block; }.topbar { padding: 0 18px; }.view { padding: 24px 18px; }.quality-layout { grid-template-columns: 1fr; }.filter-row, .expiry-filter-bar { flex-wrap: wrap; }.filter-search { flex-basis: 100%; }.vendor-summary { grid-template-columns: 1fr; } }
@media (max-width: 590px) { .global-search { width: auto; flex: 1; }.global-search kbd { display: none; }.page-heading { align-items: flex-start; flex-direction: column; }.heading-actions { width: 100%; }.heading-actions .button { flex: 1; }.kpi-grid, .renewal-summary { grid-template-columns: 1fr; }.aging-summary { grid-template-columns: repeat(2, 1fr); }.chart { gap: 5px; padding-left: 10px; padding-right: 12px; }.donut-wrap { align-items: flex-start; flex-direction: column; }.donut { margin: auto; }.stage-list { width: 100%; }.issue-grid { grid-template-columns: 1fr; }.scope-bar { align-items: flex-start; flex-direction: column; gap: 8px; }.scope-bar > div { flex-wrap: wrap; }.form-grid, .drawer-edit { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: auto; }.modal-foot { align-items: flex-start; flex-direction: column; gap: 10px; }.modal-foot > div { width: 100%; }.modal-foot .button { flex: 1; }.vendor-toolbar, .renewal-toolbar { align-items: stretch; flex-direction: column; }.vendor-toolbar .filter-search { max-width: none; }.segmented-control button { flex: 1; } }

/* PRISM ERP 2.0 — enterprise interface */
:root {
  --forest: #0f2747; --forest-2: #174a7c; --mint: #d7e8f8; --mint-2: #edf5fc;
  --cream: #f2f4f7; --paper: #fff; --ink: #172033; --muted: #657186;
  --line: #d9dee7; --gold: #bf7a17; --blue: #2167a9; --red: #bc3d46;
  --shadow: 0 1px 2px rgba(16,31,54,.05), 0 8px 24px rgba(16,31,54,.06); --radius: 8px;
}
body { background: var(--cream); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; }
.sidebar { width: 248px; padding: 0 14px 18px; background: #0b1f38; border-right: 1px solid #263d59; box-shadow: none; }
.main { margin-left: 248px; }
.brand { min-height: 76px; margin: 0 -14px 18px; padding: 0 20px; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 36px; height: 36px; border-radius: 4px; background: #2374b9; color: #fff; box-shadow: none; font-size: 18px; }
.brand strong { font-size: 16px; letter-spacing: .1em; }
.brand small { margin-top: 3px; color: #9badc3; font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.year-switcher { margin: 0 6px 18px; gap: 7px; color: #8397af; font-size: 9px; letter-spacing: .09em; }
.year-switcher select { height: 38px; padding: 0 12px; border-color: #40546d; border-radius: 4px; background: #152e4c; font-size: 11px; }
.year-switcher option { background: #0b1f38; }
.nav { gap: 2px; }.nav-label { margin: 7px 0 8px; padding: 0 11px; color: #7388a1; font-size: 9px; letter-spacing: .16em; }
.nav-item { min-height: 42px; padding: 0 11px; border-radius: 4px; color: #bdcad8; font-size: 12px; }
.nav-item:hover { background: #152e4c; }.nav-item.active { background: #1c5f98; color: #fff; box-shadow: inset 3px 0 0 #70b7eb; }
.nav-icon { width: 20px; font-size: 15px; }.nav-count, .nav-item.active .nav-count { padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,.11); color: inherit; font-size: 9px; }
.nav-group { display: grid; gap: 2px; }.nav-parent { font-weight: 700; }.nav-chevron { margin-left: auto; color: #7f96af; font-size: 11px; transition: transform .18s ease; }.nav-group.open .nav-chevron { transform: rotate(180deg); }.nav-parent.active .nav-chevron, .nav-parent.section-active .nav-chevron { color: #d6e7f5; }
.nav-parent.section-active { background: #132d4b; color: #fff; box-shadow: inset 3px 0 0 #397fb6; }
.nav-submenu { margin: 1px 0 5px 20px; padding-left: 10px; display: grid; gap: 1px; border-left: 1px solid #34506d; }.purchase-nav-group:not(.open) .nav-submenu, .stock-nav-group:not(.open) .nav-submenu { display: none; }
.stock-scope-menu { display: grid; gap: 1px; }.stock-scope-parent, .stock-report-parent { position: relative; }.stock-scope-chevron { margin-left: auto; color: #7f96af; font-size: 10px; transition: transform .18s ease; }.stock-scope-menu.open .stock-scope-chevron { transform: rotate(180deg); }
.stock-category-submenu { margin: 0 0 3px 16px; padding-left: 9px; display: grid; gap: 1px; border-left: 1px dashed #42617f; }.stock-scope-menu:not(.open) .stock-category-submenu { display: none; }.stock-category-submenu .nav-subitem { min-height: 31px; font-size: 9px; }.stock-scope-item.active, .stock-report-item.active { background: #173b60; color: #fff; }.stock-scope-item.active .nav-branch, .stock-report-item.active .nav-branch { border-color: #7cc2ee; background: #7cc2ee; }
.nav-subitem { min-height: 35px; padding: 0 8px; color: #9fb1c4; font-size: 10px; }.nav-subitem:hover { background: #122c49; }.nav-subitem.active { background: #173b60; box-shadow: none; color: #fff; }
.nav-branch { width: 5px; height: 5px; border: 1px solid #718ba5; border-radius: 50%; }.nav-subitem.active .nav-branch { border-color: #7cc2ee; background: #7cc2ee; }
.sidebar-foot { margin-top: auto; padding: 14px 10px 2px; display: grid; gap: 3px; border-top: 1px solid rgba(255,255,255,.09); color: #8196ad; }
.sidebar-foot strong { color: #c7d3e0; font-size: 10px; letter-spacing: .05em; }.sidebar-foot span, .sidebar-foot small { font-size: 8px; }
.topbar { height: 64px; padding: 0 28px; gap: 16px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); box-shadow: 0 1px 3px rgba(16,31,54,.04); }
.global-search { width: min(600px,52vw); height: 38px; border-radius: 5px; background: #f8f9fb; }
.global-search:focus-within { border-color: #4b89bd; box-shadow: 0 0 0 3px rgba(33,103,169,.1); background: #fff; }
.dashboard-switcher { height: 38px; min-width: 190px; padding: 4px 8px 4px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.dashboard-switcher span { color: #738096; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-switcher select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #1f3854; font-size: 10px; font-weight: 700; cursor: pointer; }
.notification-panel { width: min(440px,92vw); border-radius: 6px; box-shadow: 0 18px 42px rgba(13,31,53,.22); }
.notification-head { min-height: 61px; padding: 13px 15px; background: #f7f9fb; }
.notification-tabs { padding: 9px 12px; display: flex; gap: 5px; border-bottom: 1px solid var(--line); background: #fff; }
.notification-tabs button { min-height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #67758a; font-size: 8px; font-weight: 700; cursor: pointer; }
.notification-tabs button:hover { background: #f0f4f8; }.notification-tabs button.active { border-color: #bed2e5; background: #e9f2fa; color: #185f98; }
.notification-list { max-height: min(480px,70vh); padding: 5px 8px 8px; }
.notification-item { min-height: 58px; padding: 9px 8px; grid-template-columns: 30px minmax(0,1fr) 48px; gap: 9px; border-radius: 4px; border-bottom: 1px solid #edf0f4; }
.notification-item:last-child { border-bottom: 0; }.notification-item:hover { background: #f7f9fb; }
.notification-item i { width: 30px; height: 30px; border-radius: 4px; }
.notification-item strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.notification-item small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 8px; line-height: 1.35; }
.notification-item time { padding-top: 2px; text-align: right; font-size: 7px; text-transform: uppercase; letter-spacing: .04em; }
kbd { border-radius: 3px; background: #fff; }.top-actions { gap: 8px; }.erp-status { height: 32px; border-radius: 4px; background: #fff; font-size: 8px; }
.icon-button, .menu-button, .user-chip { border-radius: 5px; background: #fff; }.avatar { border-radius: 4px; background: #174a7c; }
.view { max-width: 1680px; padding: 26px 28px 40px; }.page-heading { min-height: 72px; margin-bottom: 18px; align-items: center; }
.eyebrow { margin-bottom: 4px !important; color: #2167a9 !important; font-size: 9px !important; letter-spacing: .12em; }
.page-heading h1 { font: 700 clamp(23px,2.4vw,30px)/1.2 Manrope; letter-spacing: -.025em; }.page-heading p { margin-top: 5px; font-size: 11px; }
.button { min-height: 38px; border-radius: 4px; font-size: 10px; box-shadow: none; }.button:hover { transform: none; filter: brightness(.97); }
.button.primary { background: #1769a8; box-shadow: none; }.button.secondary { background: #fff; }
.inventory-group-switch { min-width: 174px; height: 38px; padding: 4px 8px 4px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.inventory-group-switch span { color: #718096; font-size: 7px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.inventory-group-switch select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #1f3854; font-size: 10px; font-weight: 700; cursor: pointer; }
.panel, .scope-bar, .kpi-card, .summary-tile, .vendor-summary > div { border-radius: 6px; box-shadow: none; }.panel { border-color: var(--line); }
.panel-head { min-height: 64px; padding: 16px 18px; border-bottom: 1px solid #e4e8ee; }.panel-head h2 { font-size: 13px; }.panel-head p { margin-top: 3px; font-size: 9px; }

#inventoryView { padding-top: 22px; } #inventoryView .page-heading { padding: 0 2px; border-bottom: 1px solid var(--line); }
.inventory-kpis { gap: 10px; margin-bottom: 12px; }
.inventory-kpi { min-height: 102px; padding: 15px 17px; position: relative; border-radius: 6px; border-color: #d7dde7; box-shadow: 0 1px 2px rgba(16,31,54,.04); }
.inventory-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #7c8ba1; }
.inventory-kpi.ink { background: #fff; border-color: #d7dde7; color: var(--ink); }.inventory-kpi.ink::before { background: #2167a9; }
.inventory-kpi:nth-child(2)::before { background: #6b58a3; }.inventory-kpi:nth-child(3)::before { background: #238567; }
.inventory-kpi.alert { background: #fff; border-color: #e5d8c6; }.inventory-kpi.alert::before { background: #c27b19; }
.inventory-kpi span, .inventory-kpi.ink span { color: #56647a; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.inventory-kpi small, .inventory-kpi.ink small { color: #7d899b; font-size: 9px; }.inventory-kpi strong { margin: 7px 0 2px; color: #172033; font: 700 25px Manrope; }
.inventory-team-grid { gap: 10px; margin-bottom: 12px; grid-template-columns: 1fr 1.5fr 1fr; }
.inventory-team-card { padding: 0; overflow: hidden; border-radius: 6px; border-color: #d7dde7; box-shadow: 0 1px 2px rgba(16,31,54,.04); }
.inventory-team-head { min-height: 49px; margin: 0; padding: 0 14px; border-bottom: 1px solid #e1e6ed; background: #f7f9fb; }
.inventory-team-head h2 { margin: 0; color: #163c63; font-size: 12px; letter-spacing: .04em; }.inventory-team-head div > small { display: block; margin-top: 2px; color: #8090a3; font-size: 7px; }.inventory-team-head > span { padding: 3px 7px; border-radius: 3px; background: #e2ecf5; color: #29577f; font-size: 8px; }
.inventory-category-list { gap: 0; }.inventory-category { width: 100%; min-height: 56px; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; border: 0; border-radius: 0; border-bottom: 1px solid #edf0f4; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.inventory-category:last-child { border-bottom: 0; }.inventory-category:hover { background: #f8fafc; }.inventory-category strong { font-size: 9px; font-weight: 700; }
.inventory-category strong { display: flex; align-items: center; gap: 8px; }.inventory-category strong i { width: 22px; height: 20px; display: grid; place-items: center; border-radius: 3px; background: #eaf1f7; color: #376489; font-style: normal; font-size: 7px; }.inventory-category b { color: #26364c; font: 700 12px Manrope; }.inventory-category small { color: #8190a2; font-size: 8px; }.inventory-category em { align-self: center; color: #286b9f; font-size: 7px; font-style: normal; font-weight: 700; opacity: 0; transition: opacity .15s ease; }.inventory-category:hover em { opacity: 1; }.inventory-category.low { background: #fffaf2; }
.inventory-register { border-radius: 6px; }.inventory-register .panel-head { background: #fff; }
.inventory-report-panel { margin-bottom: 12px; overflow: hidden; }.inventory-report-toolbar { padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); background: #f8f9fb; }.inventory-report-table { max-height: 430px; }.inventory-report-table thead { position: sticky; top: 0; z-index: 2; background: #f1f4f7; }.inventory-report-table th { white-space: nowrap; }.inventory-report-table td { vertical-align: middle; }.report-primary { min-width: 190px; color: #20364e; font-weight: 700; }
.inventory-toolbar { padding: 12px 16px; gap: 8px; background: #f8f9fb; }.inventory-toolbar .filter-search, .inventory-toolbar select { height: 36px; border-radius: 4px; background: #fff; font-size: 9px; }
.inventory-toolbar select { min-width: 154px; }.inventory-table { max-height: 520px; }.inventory-table table { min-width: 1020px; }.inventory-table thead { position: sticky; top: 0; z-index: 3; background: #f1f4f7; }
.employee-register-panel { overflow: hidden; }.employee-table { max-height: 560px; }.employee-table table { min-width: 1060px; }.employee-table thead { position: sticky; top: 0; z-index: 3; background: #f1f4f7; }.employee-table td:first-child strong, .employee-table td:first-child small { display: block; }.employee-table td:first-child small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.infrastructure-tree-panel { overflow: hidden; }.infrastructure-tree { padding: 16px; display: grid; gap: 14px; background: #f8fafc; }.infrastructure-building { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }.infrastructure-building-head { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); background: #f2f6fa; }.infrastructure-building-head span, .infrastructure-floor span { display: block; color: #61758e; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.infrastructure-building-head h3 { margin: 3px 0; color: #193a5f; font: 700 15px Manrope; }.infrastructure-building-head small, .infrastructure-floor small { color: var(--muted); font-size: 8px; }.infrastructure-building-head b { padding: 5px 8px; border-radius: 4px; background: #e0edf8; color: #246297; font-size: 9px; white-space: nowrap; }.infrastructure-floors { padding: 12px 16px; display: grid; gap: 10px; }.infrastructure-floor { padding: 11px 12px; display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 2fr); gap: 14px; align-items: start; border: 1px solid #e2e8ef; border-radius: 5px; }.infrastructure-floor strong { display: block; margin: 3px 0; color: #263b54; font-size: 11px; }.infrastructure-rooms { display: flex; flex-wrap: wrap; gap: 7px; }.infrastructure-rooms > span { min-width: 86px; padding: 7px 8px; border: 1px solid #d9e5ee; border-radius: 4px; background: #fff; }.infrastructure-rooms b, .infrastructure-rooms small { display: block; }.infrastructure-rooms b { color: #245f91; font-size: 9px; }.infrastructure-rooms small { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }.infrastructure-rooms em, .infrastructure-empty { color: var(--muted); font-size: 9px; font-style: normal; }.infrastructure-empty { padding: 16px; }
.infrastructure-batch { padding: 13px; border: 1px solid #d9e4ef; border-radius: 6px; background: #f7fafc; }.infrastructure-batch-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }.infrastructure-batch-head strong, .infrastructure-batch-head small { display: block; }.infrastructure-batch-head strong { color: #173f6b; font-size: 11px; }.infrastructure-batch-head small, .infrastructure-batch-empty { margin-top: 3px; color: var(--muted); font-size: 9px; }.infrastructure-batch-head label { width: 142px; margin: 0; }.infrastructure-room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }.infrastructure-room-grid label { margin: 0; font-size: 9px; }.infrastructure-room-grid input { margin-top: 5px; }
.inventory-table th { height: 38px; color: #56647a; font-size: 8px; letter-spacing: .06em; }.inventory-table td { height: 49px; border-bottom-color: #e7ebf0; }
.inventory-name strong, .inventory-group strong { color: #1a2d43; font-size: 10px; }.inventory-name small, .inventory-group small { color: #7c8999; }.stock-number { color: #24364d; font-size: 12px; }
.previous-employee { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #526176; font-size: 8px; }
.employee-cell { min-width: 190px; max-width: 240px; }.employee-cell strong, .employee-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.employee-cell strong { color: #26384d; font-size: 9px; }.employee-cell small { margin-top: 3px; color: #758397; font-size: 7px; }
.stock-status { padding: 4px 7px; border-radius: 3px; background: #e9f5ef; color: #267054; }.stock-status.low { background: #fff3df; color: #985f11; }.stock-status.out { background: #fbe9eb; color: #a62f39; }
.stock-status.assigned { background: #eceafb; color: #5b4c98; }
.stock-status.available { background: #e9f5ef; color: #267054; }
.stock-status.not-working { background: #fbe9eb; color: #a62f39; }
.edit-inventory { border-radius: 4px; color: #1c5f98; }.count-badge { border-radius: 3px; }
.modal, .drawer { border-radius: 7px; }.modal-head, .drawer-head { background: #f7f9fb; border-bottom: 1px solid var(--line); }
.form-grid input, .form-grid select, .control-editor input, .control-editor select, .control-editor textarea { border-radius: 4px; }
body.dark { --cream: #111827; --paper: #172033; --ink: #edf2f7; --muted: #9aa8ba; --line: #344157; }
body.dark .sidebar { background: #081728; } body.dark .topbar { background: rgba(23,32,51,.97); }
body.dark .dashboard-switcher { background: #1a2723; } body.dark .dashboard-switcher select { color: var(--ink); }
body.dark .inventory-group-switch { background: var(--paper); } body.dark .inventory-group-switch select { color: var(--ink); }
body.dark .inventory-kpi, body.dark .inventory-kpi.ink, body.dark .inventory-team-card, body.dark .inventory-category, body.dark .inventory-register .panel-head { background: var(--paper); border-color: var(--line); }
body.dark .inventory-kpi strong, body.dark .inventory-category b, body.dark .inventory-name strong, body.dark .inventory-group strong { color: var(--ink); }
body.dark .inventory-team-head, body.dark .inventory-toolbar, body.dark .inventory-table thead { background: #1d2940; } body.dark .inventory-category:hover { background: #1c2940; }
@media (max-width: 1220px) { .inventory-team-grid { grid-template-columns: 1fr; } }
@media (max-width: 1080px) { .dashboard-switcher { min-width: 160px; }.dashboard-switcher span { display: none; } }
@media (max-width: 820px) { .sidebar { width: 248px; }.main { margin-left: 0; }.view { padding: 20px 16px 32px; }.topbar { padding: 0 16px; }.dashboard-switcher { min-width: 145px; } }
@media (max-width: 590px) { .dashboard-switcher { min-width: 0; width: 118px; }.top-actions .erp-status { display: none; } }
@media (max-width: 590px) { .inventory-group-switch { width: 100%; }.inventory-group-switch + .button { width: 100%; } }

/* Keep the inventory workspace contained on tablets and narrow ERP windows. */
html, body { max-width: 100%; overflow-x: hidden; }
.main, .view, #inventoryView, .panel, .inventory-team-card { min-width: 0; }
.view { width: 100%; }
.inventory-report-table { width: 100%; overflow-x: auto; }
.laptop-issues[hidden], .laptop-health-summary[hidden], .laptop-aging-panel[hidden], .inventory-team-grid[hidden] { display: none !important; }
.health-reconciliation { margin: 0 16px 12px; padding: 9px 11px; border: 1px solid #d7e6f2; border-radius: 4px; background: #f4f9fd; color: #47627c; font-size: 9px; line-height: 1.45; }
.laptop-aging-panel { margin-bottom: 12px; overflow: hidden; }.laptop-aging-summary { padding: 12px 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid var(--line); background: #f8fafc; }.laptop-aging-tile { min-height: 62px; padding: 10px; border: 1px solid #dbe3ec; border-radius: 4px; background: #fff; }.laptop-aging-tile strong, .laptop-aging-tile span { display: block; }.laptop-aging-tile strong { color: #193a5f; font: 700 20px Manrope; }.laptop-aging-tile span { margin-top: 3px; color: #68788c; font-size: 8px; font-weight: 700; }.laptop-aging-tile.over-5-years { border-color: #edd0d2; background: #fff7f7; }.laptop-aging-tile.purchase-date-missing { border-color: #ecd8b9; background: #fffbf4; }.laptop-aging-table { max-height: 430px; }.aging-bucket-tag { display: inline-flex; padding: 4px 7px; border-radius: 3px; background: #eaf2fa; color: #255b8f; font-size: 8px; font-weight: 700; white-space: nowrap; }.aging-bucket-tag.over-5-years { background: #fbe8e9; color: #a0353e; }.aging-bucket-tag.purchase-date-missing { background: #fff2df; color: #9c6516; }
@media (max-width: 820px) { .laptop-aging-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.login-retry { width: 100%; min-height: 34px; margin: 2px 0 8px; border: 1px solid #bfd3e5; border-radius: 5px; background: #edf5fc; color: #1769a8; font: 700 10px "DM Sans", sans-serif; cursor: pointer; }.login-retry:hover { background: #e3f0fa; }
.laptop-insights-grid { margin-bottom: 15px; }.laptop-aging-panel, .laptop-configuration-panel { overflow: hidden; }.laptop-aging-chart, .laptop-configuration-chart { min-height: 276px; padding: 18px; display: grid; align-content: center; gap: 14px; }.laptop-bar-row { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(120px, 2.2fr) 42px; align-items: center; gap: 10px; }.laptop-bar-row > span { overflow: hidden; color: #4f6075; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.laptop-bar-row > div { height: 15px; overflow: hidden; border-radius: 3px; background: #edf2f6; }.laptop-bar-row i { min-width: 3px; height: 100%; display: block; border-radius: inherit; background: #2773ad; }.laptop-aging-chart .over-5-years i { background: #c45258; }.laptop-aging-chart .purchase-date-missing i { background: #c78a31; }.laptop-bar-row strong { color: #1d3854; font: 700 11px Manrope; text-align: right; }.compact-report-select { min-width: 148px; padding: 4px 8px 4px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }.compact-report-select span { color: #718096; font-size: 7px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.compact-report-select select { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #1f3854; font-size: 9px; font-weight: 700; cursor: pointer; }.chart-empty { padding: 35px 0; color: var(--muted); font-size: 10px; text-align: center; }
body.dark .compact-report-select { border-color: var(--line); background: var(--paper); }.body.dark .compact-report-select select { color: var(--ink); } body.dark .laptop-bar-row > div { background: #2a3950; } body.dark .laptop-bar-row > span, body.dark .laptop-bar-row strong { color: var(--ink); }
@media (max-width: 590px) { .compact-report-select { width: 100%; }.laptop-bar-row { grid-template-columns: minmax(80px, 1fr) minmax(90px, 1.6fr) 34px; gap: 7px; } }

/* Shared ERP navigation, context and table interaction layer. */
.sidebar-collapse { position: absolute; top: 24px; right: -13px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #35506f; border-radius: 50%; background: #174a7c; color: #fff; cursor: pointer; font-size: 18px; line-height: 1; z-index: 2; }
.sidebar-collapse:hover { background: #2167a9; }
.workspace-context { min-height: 52px; padding: 8px 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: #f8f9fb; }
.workspace-context div { display: grid; gap: 2px; }.workspace-context span { color: #6c7b90; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.workspace-context strong { color: #1e3957; font: 700 13px Manrope; }.workspace-year { padding: 6px 8px; border: 1px solid #dce3eb; border-radius: 4px; background: #fff; white-space: nowrap; }.workspace-year b { margin-left: 5px; color: #1769a8; font-size: 10px; }
.table-scroll { position: relative; }.table-scroll thead { position: sticky; top: 0; z-index: 2; background: #f4f7fa; }.table-scroll th { height: 38px; white-space: nowrap; color: #56647a; font-size: 8px; }.table-scroll tbody tr:hover { background: #f8fbfe; }
.table-scroll th.sortable { cursor: pointer; user-select: none; }.table-scroll th.sortable::after { content: "↕"; margin-left: 5px; color: #9aa8b9; font-size: 9px; }.table-scroll th.sortable:hover { color: #1769a8; }
.table-action { min-height: 25px; padding: 0 7px; border: 1px solid #cfd9e5; border-radius: 3px; background: #fff; color: #1d629d; font: 700 8px "DM Sans", sans-serif; cursor: pointer; white-space: nowrap; }.table-action:hover { border-color: #6ea3cd; background: #eaf3fa; }
.inventory-actions { min-width: 170px; display: flex; flex-wrap: wrap; gap: 4px; }.inventory-pagination { background: #fff; }
.inventory-heading-filters { flex-wrap: wrap; justify-content: flex-end; }.inventory-heading-filters .inventory-group-switch { min-width: 150px; }
.dashboard-drill { cursor: pointer; }.dashboard-drill:hover, .dashboard-drill:focus-visible { border-color: #70a4ce; outline: 2px solid rgba(33,103,169,.18); outline-offset: 2px; }
body.sidebar-collapsed .sidebar { width: 72px; padding-left: 10px; padding-right: 10px; } body.sidebar-collapsed .main { margin-left: 72px; } body.sidebar-collapsed .brand { justify-content: center; margin-left: -10px; margin-right: -10px; padding: 0; } body.sidebar-collapsed .brand > span:last-child, body.sidebar-collapsed .year-switcher, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .sidebar-foot, body.sidebar-collapsed .nav-item > span:not(.nav-icon) { display: none; } body.sidebar-collapsed .nav-item { justify-content: center; padding: 0; } body.sidebar-collapsed .nav-icon { width: auto; } body.sidebar-collapsed .nav-submenu { display: none; } body.sidebar-collapsed .sidebar-collapse { transform: rotate(180deg); }
body.dark .workspace-context, body.dark .table-scroll thead, body.dark .inventory-pagination { background: #1b2940; } body.dark .workspace-context strong { color: var(--ink); } body.dark .workspace-year, body.dark .table-action { border-color: var(--line); background: var(--paper); color: #78b5e6; } body.dark .table-scroll tbody tr:hover { background: #1c2940; }
@media (max-width: 820px) { .sidebar-collapse { display: none; }.workspace-context { padding: 8px 16px; }.workspace-year { font-size: 0; }.workspace-year b { margin-left: 0; font-size: 10px; } body.sidebar-collapsed .sidebar { width: 248px; padding: 0 14px 18px; } body.sidebar-collapsed .main { margin-left: 0; } body.sidebar-collapsed .brand { justify-content: flex-start; margin: 0 -14px 18px; padding: 0 20px; } body.sidebar-collapsed .brand > span:last-child, body.sidebar-collapsed .year-switcher, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .sidebar-foot, body.sidebar-collapsed .nav-item > span:not(.nav-icon) { display: initial; } body.sidebar-collapsed .nav-item { justify-content: flex-start; padding: 0 11px; } body.sidebar-collapsed .nav-submenu { display: grid; } .inventory-actions { min-width: 225px; }.table-action { min-height: 32px; padding: 0 10px; font-size: 9px; } }

@media (max-width: 980px) {
  #inventoryView .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  #inventoryView .heading-actions { width: 100%; flex-wrap: wrap; }
  #inventoryView .inventory-group-switch { flex: 1 1 190px; }
  #inventoryView .heading-actions .button { flex: 0 0 auto; }
  .inventory-report-panel .panel-head { align-items: flex-start; gap: 12px; }
  .inventory-report-panel .panel-tools { flex-wrap: wrap; justify-content: flex-end; }
  .inventory-report-toolbar { overflow-x: auto; }
  .inventory-report-toolbar .segmented-control { min-width: max-content; }
}

@media (max-width: 820px) {
  .topbar { min-width: 0; gap: 8px; }
  .global-search { min-width: 0; width: auto; flex: 1 1 auto; }
  .dashboard-switcher { flex: 0 1 145px; }
  .top-actions { flex: 0 0 auto; }
  .sidebar.open { box-shadow: 12px 0 40px rgba(0,0,0,.25); }
  .inventory-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-team-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 590px) {
  .topbar .global-search { display: none; }
  .inventory-kpis { grid-template-columns: minmax(0, 1fr); }
  .inventory-report-panel .panel-head { flex-direction: column; }
  .inventory-report-panel .panel-tools { width: 100%; justify-content: space-between; }
  #inventoryView .inventory-group-switch,
  #inventoryView .heading-actions .button { width: 100%; flex-basis: 100%; }
}

/* Asset Operations Centre */
#operationsView { padding-top: 22px; }
.operations-heading { padding: 0 2px; border-bottom: 1px solid var(--line); }
.operations-kpis { margin-bottom: 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.operations-kpis article { min-width: 0; padding: 15px 16px; border: 1px solid #d7dde7; border-radius: 6px; background: var(--paper); box-shadow: 0 1px 2px rgba(16,31,54,.04); }
.operations-kpis strong, .operations-kpis span, .operations-kpis small { display: block; }
.operations-kpis strong { color: #172033; font: 700 22px Manrope; }
.operations-kpis span { margin-top: 5px; color: #34455c; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.operations-kpis small { margin-top: 3px; overflow: hidden; color: #7b8798; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.operations-tabs { margin-bottom: 12px; padding: 4px; display: flex; gap: 2px; overflow-x: auto; border: 1px solid #d7dde7; border-radius: 6px; background: #e9edf2; scrollbar-width: thin; }
.operations-tabs button { min-height: 34px; padding: 0 13px; flex: 0 0 auto; border: 0; border-radius: 4px; background: transparent; color: #59677a; cursor: pointer; font-size: 9px; font-weight: 700; }
.operations-tabs button:hover { color: #174a7c; background: rgba(255,255,255,.55); }
.operations-tabs button.active { color: #fff; background: #174a7c; box-shadow: 0 1px 2px rgba(15,39,71,.18); }
.operations-tab { display: none; }
.operations-tab.active { display: block; animation: fade .18s ease; }
.operations-tab > .panel, .operations-grid { margin-bottom: 12px; }
.operations-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.operations-grid.two-one { grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); }
.operations-grid.form-and-table { grid-template-columns: minmax(300px, .63fr) minmax(0, 1.37fr); }
.operations-grid > .panel { min-width: 0; overflow: hidden; }
.operations-form { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.operations-form label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #5d6a7c; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.operations-form .span-2 { grid-column: 1 / -1; }
.operations-form input, .operations-form select, .operations-form textarea { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid #d5dce6; border-radius: 4px; outline: 0; background: #fff; color: #172033; font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: normal; }
.operations-form textarea { resize: vertical; }
.operations-form input:focus, .operations-form select:focus, .operations-form textarea:focus { border-color: #4f8aba; box-shadow: 0 0 0 3px rgba(33,103,169,.09); }
.operations-form button { justify-self: end; }
.operations-list { max-height: 470px; overflow-y: auto; }
.operations-list.compact-list { max-height: 310px; }
.operation-row { min-height: 58px; padding: 10px 14px; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #e9edf2; }
.operation-row:last-child { border-bottom: 0; }
.operation-row:hover { background: #f8fafc; }
.operation-row > div { min-width: 0; }
.operation-row strong, .operation-row small { display: block; }
.operation-row strong { overflow: hidden; color: #21334a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.operation-row small { margin-top: 3px; overflow: hidden; color: #768396; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.operation-row time, .operation-row code { color: #768396; font-size: 8px; white-space: nowrap; }
.operation-row a { color: #1769a8; text-decoration: none; }
.severity { width: 9px; height: 9px; display: block; border-radius: 50%; background: #e3aa42; box-shadow: 0 0 0 4px #fff4df; }
.severity.critical, .severity.error { background: #c94750; box-shadow: 0 0 0 4px #fdebed; }
.severity.warning { background: #d18a21; box-shadow: 0 0 0 4px #fff2de; }
.quality-summary { padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #f7f9fb; border-bottom: 1px solid var(--line); }
.quality-summary div { padding: 9px 10px; border: 1px solid #e0e5eb; border-radius: 4px; background: #fff; }
.quality-summary strong, .quality-summary span { display: block; }.quality-summary strong { color: #25384f; font: 700 18px Manrope; }.quality-summary span { color: #7b8798; font-size: 8px; }
.operations-empty, .empty-table { padding: 35px 18px !important; color: #7b8798; font-size: 9px; text-align: center; }
.operations-table { max-height: 610px; }.operations-table table { min-width: 800px; }
.operations-table td strong, .operations-table td small, #assetAuditTable td strong, #assetAuditTable td small { display: block; }.operations-table td small, #assetAuditTable td small { margin-top: 2px; color: #7d8998; font-size: 7px; }
.operation-tag { padding: 3px 6px; display: inline-flex; border-radius: 3px; background: #e8eef5; color: #315b82; font-size: 7px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.operation-tag.allocation, .operation-tag.reissue, .operation-tag.approved, .operation-tag.matched { background: #e6f3ec; color: #246c50; }.operation-tag.return, .operation-tag.transfer { background: #eef0fa; color: #5a5491; }.operation-tag.disposal, .operation-tag.rejected, .operation-tag.missing, .operation-tag.damaged { background: #fbe8ea; color: #a33740; }
.employee-profile-grid { padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-height: 720px; overflow-y: auto; }
.employee-profile { min-width: 0; padding: 13px; border: 1px solid #dfe4eb; border-radius: 5px; background: #fff; }
.employee-profile-head { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.employee-profile-head > span, .role-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; background: #e4eef7; color: #1d5f96; font-size: 9px; font-weight: 800; }
.employee-profile h3 { margin: 0; overflow: hidden; color: #20344b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.employee-profile-head small { color: #7b8798; font-size: 7px; }.employee-profile-head b { color: #1d5f96; font-size: 8px; white-space: nowrap; }
.employee-meta { margin: 10px 0; padding: 7px 0; display: flex; gap: 8px; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; }.employee-meta span { flex: 1; overflow: hidden; color: #68768a; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.employee-assets { display: grid; gap: 5px; }.employee-assets div { padding: 6px 7px; border-radius: 3px; background: #f7f9fb; }.employee-assets strong, .employee-assets small { display: block; }.employee-assets strong { font-size: 8px; }.employee-assets small { margin-top: 2px; color: #7a8798; font-size: 7px; }
.operations-search { max-width: 330px; min-width: 250px; height: 36px; }
.approval-board { max-height: 620px; overflow-y: auto; }
.approval-card { padding: 14px 16px; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e6eaf0; }
.approval-card:last-child { border-bottom: 0; }.approval-card h3 { margin: 5px 0; color: #22364e; font-size: 10px; }.approval-card span, .approval-card small { color: #748196; font-size: 8px; }.approval-card.pending { border-left: 3px solid #d48a1e; }.approval-card.approved { border-left: 3px solid #2b8b68; }.approval-card.rejected { border-left: 3px solid #c54d55; }
.approval-actions { max-width: 210px; display: flex; align-content: flex-start; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }.approval-actions button, .tiny-button { min-height: 25px; padding: 0 7px; border: 1px solid #ccd5df; border-radius: 3px; background: #fff; color: #245b88; cursor: pointer; font-size: 7px; font-weight: 800; }.approval-actions button.danger { color: #a63840; }
.positive { color: #267257; font-weight: 700; }.negative { color: #b13d47; font-weight: 700; }.progress-cell { width: 75px; height: 5px; overflow: hidden; display: inline-block; border-radius: 5px; background: #e9edf2; vertical-align: middle; }.progress-cell span { height: 100%; display: block; background: #2b78b6; }.rating { color: #b5781c; font-weight: 800; white-space: nowrap; }
.document-row > i { color: #286b9f; font-style: normal; }.role-row { grid-template-columns: 32px minmax(0,1fr) 135px; }.role-row select { height: 31px; padding: 0 7px; border: 1px solid #d5dce6; border-radius: 3px; background: #fff; color: #263a51; font-size: 8px; }
.schedule-dot { width: 8px; height: 8px; border-radius: 50%; background: #a6b0bd; }.schedule-dot.active { background: #29a476; box-shadow: 0 0 0 4px #e5f4ee; }
.mail-status { padding: 8px 12px; border-bottom: 1px solid #e2e8ef; background: #edf7f2; color: #267054; font-size: 8px; font-weight: 700; }.mail-status.needs-config { background: #fff5e6; color: #976019; }
.backup-panel { padding: 17px 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }.backup-panel h2 { margin: 0; font-size: 13px; }.backup-panel p { margin: 4px 0 0; color: #6f7c8e; font-size: 9px; }
.backup-panel > div { min-width: 0; flex: 1; }.backup-history { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }.backup-history > span { padding: 6px 8px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #dce2e9; border-radius: 3px; background: #f8fafc; font-size: 7px; }.backup-history a { max-width: 220px; overflow: hidden; color: #1769a8; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }.backup-history small { color: #7c8999; white-space: nowrap; }.backup-history button { padding: 0; border: 0; background: transparent; color: #a53d46; cursor: pointer; font-size: 7px; font-weight: 800; }

body.dark .operations-kpis article, body.dark .operations-form input, body.dark .operations-form select, body.dark .operations-form textarea, body.dark .employee-profile, body.dark .role-row select { background: var(--paper); color: var(--ink); border-color: var(--line); }
body.dark .operations-kpis strong, body.dark .operation-row strong, body.dark .employee-profile h3, body.dark .approval-card h3 { color: var(--ink); }
body.dark .operations-tabs { background: #121d2f; border-color: var(--line); }
body.dark .operation-row:hover, body.dark .employee-assets div, body.dark .quality-summary { background: #1d2940; }

@media (max-width: 1320px) { .operations-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }.employee-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .operations-grid, .operations-grid.two-one, .operations-grid.form-and-table { grid-template-columns: minmax(0, 1fr); }.operations-form-card { max-width: none; } }
@media (max-width: 820px) { .operations-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.operations-heading { align-items: flex-start; flex-direction: column; }.operations-heading .heading-actions { width: 100%; flex-wrap: wrap; }.employee-profile-grid { grid-template-columns: minmax(0, 1fr); }.operations-search { min-width: 0; width: 100%; }.approval-card { flex-direction: column; }.approval-actions { max-width: none; justify-content: flex-start; } }
@media (max-width: 590px) { .operations-kpis { grid-template-columns: minmax(0, 1fr); }.operations-form { grid-template-columns: minmax(0, 1fr); }.operations-form .span-2 { grid-column: auto; }.operations-form button { width: 100%; }.operations-heading .heading-actions .button { width: 100%; flex-basis: 100%; }.panel-head { align-items: flex-start; flex-direction: column; }.backup-panel { align-items: stretch; flex-direction: column; }.role-row { grid-template-columns: 32px minmax(0,1fr); }.role-row select { grid-column: 1 / -1; width: 100%; } }

/* Simplified operations workspace: progressive disclosure keeps controls calm. */
.operations-tabs { min-height: 56px; padding: 9px 12px; align-items: center; overflow: visible; border-color: #d7dde7; background: var(--paper); }
.operations-tabs > button { display: none; }
.operations-module-select { min-width: 285px; height: 36px; padding: 3px 8px 3px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid #cfd7e1; border-radius: 4px; background: #fff; }
.operations-module-select span { color: #718096; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.operations-module-select select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #203b57; font-size: 10px; font-weight: 700; cursor: pointer; }
#operationsModuleHint { color: #788598; font-size: 9px; }
.operations-detail .operations-kpis { display: none; }
.operations-detail .operations-heading { min-height: 58px; margin-bottom: 12px; }
.operations-detail .operations-heading > div:first-child > p:last-child { display: none; }
.operations-grid.form-and-table { grid-template-columns: minmax(0, 1fr); }
.operations-form-card { transition: border-color .15s ease; }
.operations-form-card.form-collapsed { border-color: #dce2e9; }
.operations-form-card.form-collapsed .operations-form { display: none; }
.operations-form-card.form-collapsed .panel-head { border-bottom: 0; }
.operations-form-toggle { margin-left: auto; min-height: 30px; padding: 0 10px; }
.operations-tab > .operations-grid.form-and-table > .panel:not(.operations-form-card) { min-height: 260px; }
body.dark .operations-module-select { background: var(--paper); border-color: var(--line); }
body.dark .operations-module-select select { color: var(--ink); }
@media (max-width: 820px) { .operations-tabs { align-items: stretch; flex-direction: column; }.operations-module-select { width: 100%; min-width: 0; } #operationsModuleHint { padding: 0 2px; }.operations-form-toggle { width: auto !important; margin-left: 0; } }

/* Shared Purchase and Inventory dashboard language */
#inventoryView { padding-top: 26px; }
#inventoryView .page-heading { min-height: 72px; padding: 0; border-bottom: 0; }
.inventory-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 15px; }
.inventory-kpis .inventory-kpi { min-height: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: none; color: var(--ink); }
.inventory-kpis .inventory-kpi::before { display: none; }
.inventory-kpis .inventory-kpi.ink { background: var(--forest); border-color: var(--forest); color: #fff; }
.inventory-kpis .inventory-kpi.alert { border-color: var(--line); background: var(--paper); }
.inventory-kpis .inventory-kpi strong { margin: 13px 0 5px; color: inherit; font: 800 28px Manrope; }
.inventory-kpis .inventory-kpi .kpi-top span { color: #617085; font-size: 9px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.inventory-kpis .inventory-kpi.ink .kpi-top span, .inventory-kpis .inventory-kpi.ink small { color: #b8ccc7; }
.inventory-kpis .inventory-kpi small { min-height: 14px; color: var(--muted); font-size: 9px; }
.inventory-kpis .inventory-kpi .progress { margin-top: 13px; }
.inventory-analytics-grid { margin-bottom: 15px; }
.inventory-chart .chart-bars { min-width: 500px; }
.inventory-bar-group { min-width: 48px; }
.inventory-bar-group label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-reorder-note { margin-top: 12px; padding-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 7px; border-top: 1px solid var(--line); }
.inventory-reorder-note strong { color: var(--gold); font-size: 12px; }.inventory-reorder-note span { color: var(--muted); font-size: 8px; line-height: 1.3; }
.inventory-team-grid { margin-bottom: 15px; }
.inventory-team-card, .inventory-register, .inventory-report-panel { border-color: var(--line); box-shadow: none; }
.inventory-team-head, .inventory-toolbar, .inventory-report-toolbar { background: #f8fafc; }
.inventory-category { background: var(--paper); }.inventory-category:hover { background: #f8fafc; }
body.dark .inventory-kpis .inventory-kpi, body.dark .inventory-kpis .inventory-kpi.alert { background: var(--paper); border-color: var(--line); }.body.dark .inventory-kpis .inventory-kpi.ink { background: var(--forest); }
@media (max-width: 1120px) { .inventory-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.inventory-analytics-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 590px) { .inventory-kpis { grid-template-columns: minmax(0, 1fr); }.inventory-chart { overflow-x: auto; }.inventory-chart .chart-y { position: sticky; left: 0; z-index: 2; background: var(--paper); } }

/* Laptop health reporting */
.laptop-health-panel { margin-bottom: 15px; overflow: hidden; }
.laptop-health-summary { padding: 0 18px 15px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-bottom: 1px solid var(--line); }
.laptop-health-tile { padding: 12px 13px; border: 1px solid #dbe3ea; border-radius: 5px; background: #f8fafc; }
.laptop-health-tile strong, .laptop-health-tile span, .laptop-health-tile small { display: block; }.laptop-health-tile strong { color: #1e3650; font: 800 22px Manrope; }.laptop-health-tile span { margin-top: 3px; color: #42556d; font-size: 9px; font-weight: 800; }.laptop-health-tile small { margin-top: 2px; color: #7c8999; font-size: 8px; }
.laptop-health-tile.working { border-left: 3px solid #2f9a73; }.laptop-health-tile.not-working { border-left: 3px solid #c34d56; background: #fff7f7; }.laptop-health-tile.not-working strong { color: #b13e47; }.laptop-health-tile.unrecorded { border-left: 3px solid #d99b46; background: #fffbf4; }
.laptop-issues { padding: 13px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; background: #fbfcfd; border-bottom: 1px solid var(--line); }
.laptop-issue-title { grid-column: 1 / -1; color: #637388; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.laptop-issue-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }.laptop-issue-row span { overflow: hidden; color: #495b71; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.laptop-issue-row strong { min-width: 22px; padding: 3px 6px; border-radius: 3px; background: #f9e5e7; color: #ad3d46; font-size: 8px; text-align: center; }.laptop-no-issues { grid-column: 1 / -1; color: #2b8060; font-size: 9px; }
.laptop-health-table { max-height: 410px; }.laptop-health-table thead { position: sticky; top: 0; z-index: 2; background: #f1f4f7; }.laptop-health-table td strong, .laptop-health-table td small { display: block; }.laptop-health-table td small { margin-top: 3px; color: #778598; font-size: 7px; }.laptop-remark { min-width: 230px; max-width: 420px; color: #536275; font-size: 9px; }.laptop-health-status { padding: 4px 7px; display: inline-flex; border-radius: 3px; background: #edf0f4; color: #647287; font-size: 8px; font-weight: 800; white-space: nowrap; }.laptop-health-status.not-working { background: #fbe8e9; color: #a9343d; }
body.dark .laptop-health-tile, body.dark .laptop-issues { background: #1b273a; border-color: var(--line); }.body.dark .laptop-health-table thead { background: #1d2940; }
@media (max-width: 820px) { .laptop-health-summary { grid-template-columns: 1fr; }.laptop-issues { grid-template-columns: 1fr; } }