:root {
  --navy: #112240;
  --navy-2: #1b325f;
  --sky: #a6caec;
  --sky-soft: #eaf3fb;
  --green: #138a4b;
  --green-soft: #e8f6ee;
  --red: #c73737;
  --red-soft: #fdecec;
  --yellow: #d99712;
  --yellow-soft: #fff5da;
  --purple: #7052c7;
  --purple-soft: #f0ebff;
  --ink: #172033;
  --muted: #657085;
  --line: #dfe5ee;
  --surface: #ffffff;
  --canvas: #f3f6fa;
  --shadow: 0 10px 30px rgba(17, 34, 64, .08);
  --radius: 10px;
  --sidebar-width: 278px;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-width: 320px; background: var(--canvas); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.eyebrow { margin: 0 0 10px; font-size: 11px; letter-spacing: .16em; font-weight: 800; opacity: .76; }
.eyebrow.blue { color: #2f5e91; opacity: 1; }
.muted { color: var(--muted); }
.button { min-height: 42px; padding: 9px 16px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; transition: .16s ease; }
.button.primary { color: #fff; background: var(--navy); }
.button.primary:hover { background: var(--navy-2); transform: translateY(-1px); }
.button.secondary { color: var(--navy); background: #fff; border-color: var(--line); }
.button.secondary:hover { border-color: #aab9cc; background: #f9fbfd; }
.button.danger { color: var(--red); background: var(--red-soft); border-color: #f5caca; }
.button.small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none !important; }
.icon-button { border: 0; color: var(--muted); background: transparent; min-width: 32px; min-height: 32px; border-radius: 6px; }
.icon-button:hover { background: #edf2f8; color: var(--navy); }
.icon-button.large { font-size: 26px; }

.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(420px, .85fr); background: #fff; }
.login-brand-panel { position: relative; display: flex; align-items: center; padding: clamp(50px, 8vw, 120px); overflow: hidden; color: #fff; background: var(--navy); }
.login-brand-panel::before { content: ""; position: absolute; width: 620px; height: 620px; right: -310px; top: -220px; border: 90px solid rgba(166,202,236,.07); border-radius: 50%; }
.login-brand-panel::after { content: ""; position: absolute; width: 360px; height: 360px; left: -220px; bottom: -240px; border: 70px solid rgba(19,138,75,.12); border-radius: 50%; }
.login-brand-content { position: relative; z-index: 1; max-width: 720px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup img { width: 50px; height: 50px; object-fit: contain; border-radius: 10px; background: #fff; }
.brand-lockup strong { display: block; font-size: 24px; letter-spacing: -.03em; }
.brand-lockup span { display: block; margin-top: 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .7; }
.brand-lockup-light { margin-bottom: clamp(65px, 11vh, 120px); }
.login-brand-content h1 { max-width: 650px; margin: 0 0 20px; font-size: clamp(38px, 5vw, 66px); line-height: 1.03; letter-spacing: -.05em; }
.login-brand-content > p:not(.eyebrow) { max-width: 620px; margin: 0; color: #dbe6f5; font-size: 17px; line-height: 1.7; }
.login-modules { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 42px; }
.login-modules span { padding: 9px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.07); font-weight: 700; }
.login-modules .future { color: #d6f2df; border-color: rgba(86,192,122,.4); }
.login-brand-footer { position: absolute; left: clamp(50px, 8vw, 120px); bottom: 32px; z-index: 1; font-size: 12px; color: #9eabc1; }
.login-form-panel { display: grid; place-items: center; padding: 40px; background: #fff; }
.login-card { width: min(420px, 100%); }
.login-card h2 { margin: 0 0 8px; font-size: 31px; letter-spacing: -.035em; color: var(--navy); }
.login-card > label { display: block; margin: 23px 0 8px; font-size: 12px; color: #41506a; font-weight: 800; }
.input-shell { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 1px solid #cfd8e5; border-radius: 9px; background: #fff; }
.input-shell:focus-within { border-color: #4c78a9; box-shadow: 0 0 0 3px rgba(76,120,169,.12); }
.input-shell > span { color: #8ca0b8; font-size: 9px; }
.input-shell input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; }
.login-submit { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 28px; padding: 12px 18px; }
.login-security { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.login-security span { color: var(--green); font-weight: 900; }
.form-error { margin-top: 14px; padding: 10px 12px; color: #8d2525; border: 1px solid #f3c5c5; border-radius: 8px; background: var(--red-soft); }
.mobile-brand { display: none; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar-width); display: flex; flex-direction: column; color: #fff; background: var(--navy); transition: width .2s ease, transform .2s ease; }
.sidebar-brand { min-height: 76px; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand img { width: 44px; height: 44px; flex: 0 0 auto; padding: 3px; object-fit: contain; border-radius: 9px; background: #fff; }
.sidebar-brand strong { display: block; font-size: 19px; }
.sidebar-brand span { display: block; margin-top: 2px; color: #b8c4d5; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.sidebar-collapse { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 6px; color: #c8d3e3; background: rgba(255,255,255,.07); font-size: 22px; }
.tenant-card { display: flex; align-items: center; gap: 10px; margin: 12px; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.05); }
.tenant-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; color: var(--navy); border-radius: 7px; background: var(--sky); font-size: 11px; font-weight: 900; }
.tenant-card strong, .tenant-card small { display: block; }
.tenant-card strong { font-size: 12px; }
.tenant-card small { margin-top: 3px; color: #aebbd0; font-size: 10px; }
.main-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #405476 transparent; padding: 4px 8px 16px; }
.nav-group { margin-top: 10px; }
.nav-group-title { display: block; padding: 8px 10px 5px; color: #c2cad8; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.nav-link { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 37px; padding: 7px 10px; margin: 2px 0; border: 0; border-radius: 7px; color: #fff; background: transparent; text-align: left; font-size: 12.5px; }
.nav-link:hover { background: var(--navy-2); }
.nav-link.active { color: var(--navy); background: var(--sky); font-weight: 800; }
.nav-link .nav-icon { width: 23px; flex: 0 0 auto; text-align: center; font-size: 15px; }
.nav-link .nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-link .nav-badge { min-width: 20px; padding: 2px 5px; border-radius: 999px; color: #fff; background: var(--red); text-align: center; font-size: 9px; }
.nav-link.future { opacity: .6; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); padding: 10px 12px; color: #b9c5d7; font-size: 11px; }
.sidebar-footer > a, .sidebar-footer > div { min-height: 34px; display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.sidebar-footer small { margin-left: auto; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4bd37b; box-shadow: 0 0 0 3px rgba(75,211,123,.12); }

.workspace { min-width: 0; grid-column: 2; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: #8994a5; font-size: 12px; }
.breadcrumb strong { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.global-search { min-width: 260px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; }
.global-search kbd { padding: 2px 5px; color: #77859a; border: 1px solid #d3dbe6; border-radius: 4px; background: #fff; font-size: 9px; white-space: nowrap; }
.topbar-button { position: relative; min-width: 38px; height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: #526078; background: #fff; font-weight: 800; }
.topbar-button:hover { color: var(--navy); background: #f5f8fb; }
.notification-button span { position: absolute; right: -4px; top: -5px; min-width: 17px; padding: 2px 4px; color: #fff; border: 2px solid #fff; border-radius: 10px; background: var(--red); font-size: 8px; }
.user-button { display: flex; align-items: center; gap: 8px; height: 44px; margin-left: 4px; padding: 4px 7px; border: 0; border-left: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.user-button > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; border-radius: 8px; background: var(--navy); font-size: 10px; font-weight: 900; }
.user-button strong, .user-button small { display: block; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-button strong { font-size: 11px; }
.user-button small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.mobile-menu { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

.view-container { padding: 22px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.page-title h1 { margin: 0; color: var(--navy); font-size: 25px; letter-spacing: -.03em; }
.page-title p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.freshness { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.freshness span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 0 rgba(17,34,64,.02); }
.metric-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.metric-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--navy); border-radius: 8px; background: var(--sky-soft); font-size: 16px; }
.metric-trend { padding: 3px 6px; color: var(--green); border-radius: 999px; background: var(--green-soft); font-size: 9px; font-weight: 800; }
.metric-card strong { display: block; margin: 12px 0 3px; color: var(--navy); font-size: 25px; letter-spacing: -.04em; }
.metric-card > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.metric-card small { display: block; margin-top: 9px; color: #8a95a7; font-size: 10px; }

.graphic-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.graphic-card { min-width: 0; min-height: 286px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 4px 18px rgba(17,34,64,.045); }
.graphic-card > header { min-height: 62px; display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding: 14px 15px 10px; border-bottom: 1px solid #edf0f4; }
.graphic-card > header h3 { margin: 0; color: var(--navy); font-size: 13px; }
.graphic-card > header p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.graphic-live { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--green); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.graphic-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.donut-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(112px,.9fr) minmax(0,1.1fr); gap: 13px; align-items: center; padding: 15px; }
.donut-ring { width: min(132px,100%); aspect-ratio: 1; display: grid; place-items: center; justify-self: center; border-radius: 50%; }
.donut-ring > div { width: 62%; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #edf0f4; }
.donut-ring strong, .donut-ring span { display: block; }
.donut-ring strong { color: var(--navy); font-size: 19px; letter-spacing: -.04em; }
.donut-ring span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.chart-legend { min-width: 0; display: grid; gap: 8px; }
.chart-legend > div { min-width: 0; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 6px; align-items: center; font-size: 9px; }
.chart-legend i { width: 7px; height: 7px; border-radius: 2px; }
.chart-legend span { min-width: 0; overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.chart-legend b { color: var(--navy); font-size: 9px; }
.chart-legend p, .chart-empty { color: var(--muted); font-size: 10px; text-align: center; }
.horizontal-chart { min-height: 0; flex: 1; display: grid; align-content: center; gap: 13px; padding: 15px; }
.horizontal-row > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 9px; }
.horizontal-row span { min-width: 0; overflow: hidden; color: #526078; white-space: nowrap; text-overflow: ellipsis; }
.horizontal-row b { color: var(--navy); }
.horizontal-track { height: 9px; overflow: hidden; border-radius: 999px; background: #edf1f6; }
.horizontal-track i { display: block; height: 100%; border-radius: inherit; transition: width .25s ease; }
.column-chart { min-height: 0; flex: 1; display: flex; align-items: stretch; justify-content: center; gap: 8px; padding: 17px 13px 13px; }
.column-item { min-width: 0; flex: 1; display: grid; grid-template-rows: 20px minmax(100px,1fr) 31px; gap: 5px; align-items: end; text-align: center; }
.column-item > b { color: var(--navy); font-size: 9px; }
.column-item > div { height: 100%; display: flex; align-items: end; justify-content: center; border-bottom: 1px solid #ccd7e4; background: repeating-linear-gradient(to top,#fff 0,#fff 24%,#eff3f7 25%); }
.column-item i { display: block; width: min(34px,70%); min-height: 6px; border-radius: 5px 5px 0 0; box-shadow: inset 0 -8px 14px rgba(17,34,64,.08); }
.column-item > span { min-width: 0; align-self: start; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.35; text-overflow: ellipsis; }
.wms-graphic-grid { margin-bottom: 5px; }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 24px 0 10px; }
.section-title h2 { margin: 0; color: var(--navy); font-size: 16px; }
.section-title p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.module-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.module-card { display: flex; align-items: center; gap: 11px; min-height: 82px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: left; transition: .15s; }
.module-card:hover { border-color: #a8bed7; box-shadow: var(--shadow); transform: translateY(-2px); }
.module-card .module-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px; color: var(--navy); background: var(--sky-soft); font-weight: 900; }
.module-card strong { display: block; color: var(--navy); font-size: 12px; }
.module-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.module-card.future { background: #f7f8fa; opacity: .7; }

.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr); gap: 12px; margin-top: 12px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.panel-header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.panel-header h3 { margin: 0; color: var(--navy); font-size: 13px; }
.panel-header p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.panel-body { padding: 15px; }
.domain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.domain-summary { padding: 13px; border: 1px solid #e5eaf1; border-radius: 9px; background: #fbfcfe; }
.domain-summary header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.domain-summary header strong { color: var(--navy); }
.domain-summary header span { font-size: 10px; color: var(--muted); }
.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-kpis div { padding: 8px; border-radius: 7px; background: #fff; }
.mini-kpis strong { display: block; font-size: 17px; }
.mini-kpis span { color: var(--muted); font-size: 9px; }
.feed-list { display: grid; gap: 9px; }
.feed-item { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding-bottom: 9px; border-bottom: 1px solid #edf0f4; }
.feed-item:last-child { border-bottom: 0; padding-bottom: 0; }
.feed-mark { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--green); }
.feed-mark.danger { background: var(--red); }
.feed-item strong { display: block; font-size: 11px; }
.feed-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.feed-item time { color: #929dad; font-size: 9px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: #fff; }
.toolbar .search-box { min-width: 240px; flex: 1; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; }
.toolbar .search-box input { width: 100%; min-width: 0; border: 0; outline: 0; }
.toolbar select { height: 38px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; }
.table-panel { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: #fff; overflow: hidden; }
.table-scroll { max-height: calc(100vh - 286px); min-height: 360px; overflow: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; white-space: nowrap; }
.data-table th { position: sticky; top: 0; z-index: 2; height: 43px; padding: 10px 12px; color: #56657c; border-bottom: 1px solid var(--line); background: #f7f9fc; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.data-table td { height: 48px; padding: 9px 12px; border-bottom: 1px solid #edf0f4; font-size: 12px; }
.data-table tr:hover td { background: #fafcff; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .primary-cell { color: var(--navy); font-weight: 750; }
.data-table .muted-cell { color: var(--muted); }
.data-table .number-cell { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .label-select-column { width: 46px; min-width: 46px; padding-right: 6px; text-align: center; }
.label-select-column input { width: 18px; height: 18px; margin: 0; accent-color: #6d55dd; cursor: pointer; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 150px; padding: 4px 7px; border-radius: 999px; color: var(--navy); background: #edf2f8; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.status-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #718096; }
.status-badge.success { color: #0c6b39; background: var(--green-soft); }
.status-badge.success::before { background: var(--green); }
.status-badge.danger { color: #a62626; background: var(--red-soft); }
.status-badge.danger::before { background: var(--red); }
.status-badge.warning { color: #94630a; background: var(--yellow-soft); }
.status-badge.warning::before { background: var(--yellow); }
.status-badge.processing { color: #5536af; background: var(--purple-soft); }
.status-badge.processing::before { background: var(--purple); }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.table-footer { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.pagination { display: flex; gap: 4px; }
.pagination button { min-width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; }
.pagination button.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.empty-state { min-height: 330px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.empty-state span { display: block; margin-bottom: 10px; font-size: 34px; color: #a9b7c8; }
.loading-state { min-height: 330px; display: grid; place-items: center; color: var(--muted); }
.spinner { width: 28px; height: 28px; margin: 0 auto 10px; border: 3px solid #dbe5f0; border-top-color: var(--navy); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ai-workspace { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 12px; }
.ai-question-card, .ai-answer-card { min-height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.ai-question-card { padding: 18px; }
.ai-question-card h3 { margin: 0; color: var(--navy); }
.ai-question-card textarea { width: 100%; min-height: 180px; margin: 16px 0 12px; padding: 12px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; outline: 0; line-height: 1.6; }
.ai-question-card textarea:focus { border-color: #6f94bd; box-shadow: 0 0 0 3px rgba(111,148,189,.12); }
.ai-question-card select { width: 100%; height: 42px; margin-bottom: 12px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.suggestion-list { display: grid; gap: 7px; margin-top: 18px; }
.suggestion-list button { padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #f9fbfd; text-align: left; font-size: 11px; }
.ai-answer-card header { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.ai-answer-content { padding: 18px; color: #344056; line-height: 1.75; white-space: pre-wrap; }
.source-list { display: grid; gap: 8px; margin-top: 20px; }
.source-card { padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #f9fbfd; }
.source-card strong { display: block; color: var(--navy); font-size: 11px; }
.source-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }

.workspace-tabs { display: flex; gap: 6px; margin-bottom: 14px; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.workspace-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 0; border-radius: 7px; color: #4a5b72; background: transparent; font-size: 11px; font-weight: 800; white-space: nowrap; }
.workspace-tab span { display: grid; place-items: center; min-width: 18px; color: #1d5c92; }
.workspace-tab:hover { color: var(--navy); background: #f1f6fb; }
.workspace-tab.active { color: var(--navy); background: #acd1ee; box-shadow: inset 0 -2px 0 #2f6fa7; }
.ai-command-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; padding: 24px 26px; overflow: hidden; border-radius: 14px; color: #fff; background: linear-gradient(120deg,#102a50 0%,#174b77 62%,#08776d 100%); box-shadow: 0 14px 34px rgba(16,42,80,.16); }
.ai-command-hero h2 { margin: 5px 0 8px; font-size: clamp(22px,3vw,34px); }
.ai-command-hero p { max-width: 820px; margin: 0; color: #d8e7f5; line-height: 1.65; }
.ai-command-hero .eyebrow { color: #9bd8d0; }
.ai-command-hero .button.light { flex: 0 0 auto; color: var(--navy); background: #fff; border-color: #fff; }
.sme-command-hero { background: linear-gradient(120deg,#102a50 0%,#155d75 58%,#0b806d 100%); }
.sme-graphic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 12px 0; }
.ai-metric-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.ai-operating-flow { margin-top: 14px; padding: 17px; }
.ai-flow-line { display: grid; grid-template-columns: minmax(128px,1fr) 18px minmax(128px,1fr) 18px minmax(128px,1fr) 18px minmax(128px,1fr) 18px minmax(128px,1fr) 18px minmax(128px,1fr); align-items: stretch; gap: 7px; margin-top: 16px; overflow-x: auto; }
.ai-flow-line > button { min-width: 128px; padding: 13px; border: 1px solid #d6e2ed; border-radius: 10px; color: var(--navy); background: #f8fbfe; text-align: left; }
.ai-flow-line > button:hover { border-color: #77a6cc; background: #eef7fd; transform: translateY(-1px); }
.ai-flow-line b, .ai-flow-line span, .ai-flow-line small { display: block; }
.ai-flow-line b { margin-bottom: 10px; color: #2b70a8; font-size: 10px; }
.ai-flow-line span { font-weight: 850; }
.ai-flow-line small { margin-top: 4px; color: var(--muted); }
.ai-flow-line > i { align-self: center; color: #8ca3bb; font-style: normal; }
.ai-overview-graphics { margin-top: 14px; }
.ai-helper-text { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ai-filter-label { display: grid; gap: 6px; color: #4c5b72; font-size: 10px; font-weight: 800; }
.ai-submit-zone { display: grid; gap: 7px; }
.ai-submit-zone .button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; letter-spacing: .025em; background: linear-gradient(110deg,#133a68,#08786d); box-shadow: 0 10px 22px rgba(20,66,104,.18); }
.ai-submit-zone .button > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: rgba(255,255,255,.14); font-size: 17px; }
.ai-submit-zone .button > b { margin-left: auto; font-size: 18px; }
.ai-submit-zone > small { color: #68788d; text-align: center; }
.spinner.mini { width: 19px; height: 19px; margin: 0; border-width: 2px; border-color: rgba(255,255,255,.35); border-top-color: #fff; background: transparent !important; }
.ai-answer-card { overflow: hidden; }
.ai-answer-card header { display: flex; align-items: center; min-height: 62px; background: #fbfdff; }
.ai-answer-card header strong, .ai-answer-card header span { display: block; }
.ai-answer-card header strong { color: var(--navy); }
.ai-answer-card header span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.ai-answer-content { max-height: 680px; overflow-y: auto; background: #f6f9fc; }
.ai-empty-answer { min-height: 420px; display: grid; place-content: center; justify-items: center; text-align: center; white-space: normal; }
.ai-empty-answer > span { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#245b8f,#15947a); font-size: 24px; box-shadow: 0 10px 24px rgba(36,91,143,.2); }
.ai-empty-answer strong { color: var(--navy); font-size: 18px; }
.ai-empty-answer p { max-width: 430px; margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
.ai-result-shell { display: grid; gap: 14px; color: #2d3a4e; white-space: normal; }
.ai-result-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-result-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ai-grounded-chip { padding: 4px 8px; border-radius: 999px; color: #176c55; background: #e4f5ef; font-size: 9px; font-weight: 800; }
.ai-summary-box { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; padding: 16px; border: 1px solid #cfe0ef; border-left: 4px solid #2473aa; border-radius: 10px; background: #fff; }
.ai-summary-box > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: #245b8f; }
.ai-summary-box small, .ai-block-title small { color: #31709f; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.ai-summary-box p { margin: 4px 0 0; color: var(--navy); font-size: 13px; font-weight: 680; line-height: 1.7; }
.ai-result-sections { display: grid; gap: 10px; }
.ai-result-section { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ai-section-index { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #245b8f; background: #e8f3fb; font-size: 10px; font-weight: 900; }
.ai-result-section h4 { margin: 0 0 8px; color: var(--navy); font-size: 14px; }
.ai-result-section h4 span { display: inline-flex; margin-left: 6px; padding: 2px 6px; border-radius: 999px; color: #266c9e; background: #e9f4fb; font-size: 9px; }
.ai-result-section p { margin: 0 0 7px; line-height: 1.7; }
.ai-result-section ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 18px; }
.ai-result-section li::marker { color: #1a8c72; }
.ai-sources-block { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ai-block-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ai-block-title h4 { margin: 2px 0 0; color: var(--navy); }
.ai-block-title > span { color: var(--muted); font-size: 10px; }
.ai-source-card { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; }
.ai-source-card > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: #245b8f; font-size: 9px; }
.ai-source-card strong { font-size: 11px; }
.ai-feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px dashed #cbd9e6; border-radius: 10px; background: #fff; }
.ai-feedback > span { color: var(--navy); font-size: 11px; font-weight: 800; }
.ai-feedback > div { display: flex; gap: 6px; }
.ai-feedback button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: #40536a; background: #fff; font-size: 10px; }
.ai-feedback button:hover { border-color: #79a5c8; background: #eef7fd; }
.ai-history-card { width: min(980px,calc(100vw - 32px)); }
.ai-history-answer { margin-top: 14px; padding: 18px; }
.ai-history-answer h3 { margin: 0 0 12px; color: var(--navy); }
.ai-history-answer p { margin: 0; color: #33445a; line-height: 1.75; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(9,20,40,.55); backdrop-filter: blur(3px); }
.modal { width: min(760px, 100%); max-height: min(840px, calc(100vh - 40px)); overflow: auto; border-radius: 12px; background: #fff; box-shadow: 0 30px 80px rgba(4,12,27,.28); }
.modal > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.modal h3 { margin: 0; color: var(--navy); font-size: 20px; }
.modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; }
.form-field { min-width: 0; }
.form-field.wide { grid-column: 1 / -1; }
.form-field label { display: block; margin-bottom: 6px; color: #4c5b72; font-size: 11px; font-weight: 800; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid #ccd6e3; border-radius: 7px; outline: 0; background: #fff; }
.form-field textarea { min-height: 90px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #648eb9; box-shadow: 0 0 0 3px rgba(100,142,185,.11); }
.form-help { display: block; margin-top: 4px; color: #8a95a5; font-size: 9px; }
.modal-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line); background: #fff; }

.workflow-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: rgba(9,20,40,.58); backdrop-filter: blur(4px); }
.document-workspace, .realtime-workspace, .import-result-card { width: min(1380px, 100%); max-height: calc(100vh - 36px); overflow: auto; border-radius: 14px; background: #f5f7fa; box-shadow: 0 34px 90px rgba(4,12,27,.32); }
.realtime-workspace { width: min(1180px, 100%); }
.import-result-card { width: min(880px, 100%); }
.workflow-header { position: sticky; top: 0; z-index: 8; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98); backdrop-filter: blur(10px); }
.workflow-header h2 { margin: 0; color: var(--navy); font-size: 23px; letter-spacing: -.035em; }
.workflow-header > div > span { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.workflow-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.workflow-header-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.workflow-body { display: grid; gap: 14px; padding: 16px; }
.workflow-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.workflow-metric { position: relative; min-height: 90px; padding: 15px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.workflow-metric::before { content: ""; position: absolute; left: 0; inset-block: 0; width: 4px; background: var(--navy); }
.workflow-metric.green::before { background: var(--green); }
.workflow-metric.blue::before { background: #3477b9; }
.workflow-metric.red::before { background: var(--red); }
.workflow-metric.orange::before { background: var(--yellow); }
.workflow-metric span { color: var(--muted); font-size: 11px; }
.workflow-metric strong { display: block; margin-top: 11px; color: var(--navy); font-size: 27px; letter-spacing: -.04em; }
.document-entry-grid, .realtime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.workflow-panel { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.workflow-panel > h3, .panel-title-row h3 { margin: 0; color: var(--navy); font-size: 14px; }
.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.panel-title-row p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.panel-title-row > span { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.inline-entry-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 9px; align-items: end; }
.inline-entry-form label, .scan-config label { display: grid; gap: 5px; color: #4c5b72; font-size: 10px; font-weight: 800; }
.inline-entry-form input, .inline-entry-form select, .attachment-entry input, .attachment-entry select, .scan-config input, .scan-config select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid #ccd6e3; border-radius: 7px; color: var(--ink); background: #fff; outline: 0; }
.inline-entry-form input:focus, .inline-entry-form select:focus, .attachment-entry input:focus, .scan-config input:focus, .scan-config select:focus { border-color: #648eb9; box-shadow: 0 0 0 3px rgba(100,142,185,.11); }
.template-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0f4; }
.attachment-entry { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 9px; align-items: center; }
.attachment-entry .check-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.attachment-entry .check-label input { width: 16px; height: 16px; }
.attachment-list { display: grid; gap: 8px; }
.attachment-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid #e5eaf1; border-radius: 8px; background: #fbfcfe; }
.attachment-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--navy); border-radius: 7px; background: var(--sky-soft); }
.attachment-row strong, .attachment-row span { display: block; }
.attachment-row strong { color: var(--navy); font-size: 11px; }
.attachment-row div span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.workflow-table-scroll { max-width: 100%; overflow: auto; border: 1px solid #e5eaf1; border-radius: 8px; }
.workflow-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.workflow-table th { padding: 9px 10px; color: #526078; border-bottom: 1px solid var(--line); background: #f5f8fb; text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.workflow-table td { padding: 9px 10px; border-bottom: 1px solid #edf0f4; font-size: 11px; vertical-align: middle; }
.workflow-table tr:last-child td { border-bottom: 0; }
.workflow-table td > strong, .workflow-table td > span { display: block; }
.workflow-table td > span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.workflow-table tr.line-match td:first-child { box-shadow: inset 3px 0 var(--green); }
.workflow-table tr.line-short td:first-child { box-shadow: inset 3px 0 var(--red); }
.workflow-table tr.line-over td:first-child { box-shadow: inset 3px 0 var(--yellow); }
.line-quantity-input { width: 90px; height: 32px; padding: 0 7px; border: 1px solid #ccd6e3; border-radius: 6px; }
.workflow-empty { min-height: 150px; display: grid; place-items: center; padding: 20px; color: var(--muted); border: 1px dashed #cad5e3; border-radius: 8px; background: #fbfcfe; text-align: center; font-size: 11px; }
.workflow-empty.compact { min-height: 86px; }
.workflow-alert { padding: 11px 12px; color: #72510a; border: 1px solid #ecd9a4; border-left: 4px solid var(--yellow); border-radius: 8px; background: var(--yellow-soft); font-size: 10px; line-height: 1.55; }
.workflow-alert.success { color: #0c6b39; border-color: #bfe2cd; border-left-color: var(--green); background: var(--green-soft); }
.workflow-alert.danger { color: #922727; border-color: #efc2c2; border-left-color: var(--red); background: var(--red-soft); }
.realtime-indicator { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--green); font-size: 10px; }
.realtime-indicator i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(19,138,75,.1); }
.realtime-indicator.offline { color: var(--red); }
.realtime-indicator.offline i { background: var(--red); box-shadow: 0 0 0 4px rgba(199,55,55,.1); }
.scan-panel { display: grid; align-content: start; gap: 13px; }
.scan-config { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.capture-box { padding: 12px; border: 1px dashed #9db3cd; border-radius: 9px; background: #f7faff; }
.capture-box > input { width: 100%; height: 48px; padding: 0 12px; border: 1px solid #9eb7d2; border-radius: 8px; color: var(--navy); background: #fff; outline: 0; font-size: 14px; font-weight: 700; }
.capture-box > input:focus { border-color: #3a70a7; box-shadow: 0 0 0 4px rgba(58,112,167,.12); }
.capture-box > div { display: flex; gap: 8px; margin-top: 10px; }
.capture-box.disabled { opacity: .65; }
.realtime-list { max-height: 310px; }
.event-list { max-height: 260px; }
.code-value { color: var(--navy); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.toast-stack { position: fixed; right: 20px; top: 82px; z-index: 200; display: grid; gap: 8px; width: min(360px, calc(100vw - 40px)); }
.toast { display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: start; padding: 12px; border: 1px solid #cfe0ef; border-radius: 9px; background: #fff; box-shadow: var(--shadow); animation: toast-in .18s ease both; }
.toast.success { border-color: #bfe2cd; }
.toast.error { border-color: #efc2c2; }
.toast strong { display: block; font-size: 11px; }
.toast span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.toast button { border: 0; background: transparent; color: var(--muted); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
.profile-popover { position: fixed; right: 18px; top: 60px; z-index: 90; width: 220px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.profile-popover strong, .profile-popover span { display: block; }
.profile-popover strong { color: var(--navy); font-size: 12px; }
.profile-popover span { margin: 4px 0 12px; color: var(--muted); font-size: 10px; }
.profile-popover button { width: 100%; padding: 8px; color: var(--red); border: 1px solid #f1caca; border-radius: 7px; background: var(--red-soft); font-weight: 700; }
.profile-popover .profile-action { margin-bottom: 8px; color: var(--navy); border-color: #c8d8e8; background: #f4f8fc; }

.password-dialog { width: min(520px, calc(100vw - 32px)); }
.password-fields { display: grid; gap: 13px; padding: 20px; }
.password-fields label { display: grid; gap: 6px; color: #48566a; font-size: 10px; font-weight: 800; }
.password-fields input { width: 100%; height: 42px; padding: 0 11px; color: var(--navy); border: 1px solid var(--line); border-radius: 7px; background: #fff; outline: 0; }
.password-fields input:focus { border-color: #6d9dca; box-shadow: 0 0 0 3px rgba(75,127,178,.12); }
.password-fields small { color: var(--muted); font-size: 9px; font-weight: 500; }

.site-scope-field,
.permission-selector-field { grid-column: 1 / -1; }
.site-scope-field > textarea,
.permission-selector-field > textarea { display: none; }
.selector-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.site-checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 230px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #f7f9fc; }
.permission-check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px !important; min-height: 52px; padding: 9px; border: 1px solid #dbe4ee; border-radius: 8px; background: #fff; cursor: pointer; }
.permission-check input { width: 16px !important; height: 16px !important; margin-top: 2px; accent-color: var(--blue); }
.permission-check span { min-width: 0; }
.permission-check b,
.permission-check small { display: block; }
.permission-check b { color: var(--navy); font-size: 10px; }
.permission-check small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }
.site-scope-field .workflow-alert { margin-top: 8px; }

.permission-selector { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fc; }
.permission-selector-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); background: #eef4fb; }
.permission-selector-head > input { height: 38px; padding: 0 10px; border: 1px solid #c9d8e7; border-radius: 7px; background: #fff; }
.full-access-toggle { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; cursor: pointer; }
.full-access-toggle input { width: 18px !important; height: 18px !important; accent-color: var(--green); }
.full-access-toggle b,
.full-access-toggle small { display: block; }
.full-access-toggle b { color: var(--navy); font-size: 11px; }
.full-access-toggle small { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 500; }
.permission-groups { display: grid; gap: 10px; max-height: 430px; overflow: auto; padding: 10px; }
.permission-group { overflow: hidden; border: 1px solid #d9e2ec; border-radius: 9px; background: #fff; }
.permission-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #e5ebf2; background: #f9fbfd; }
.permission-group > header strong,
.permission-group > header small { display: block; }
.permission-group > header strong { color: var(--navy); font-size: 11px; }
.permission-group > header small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.permission-resource-list { display: grid; }
.permission-resource { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(320px, 2fr); gap: 12px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #edf1f5; }
.permission-resource:last-child { border-bottom: 0; }
.permission-resource > div:first-child strong,
.permission-resource > div:first-child small { display: block; }
.permission-resource > div:first-child strong { color: #213754; font-size: 10px; }
.permission-resource > div:first-child small { margin-top: 2px; color: #7b8797; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; }
.permission-action-list { display: flex; flex-wrap: wrap; gap: 6px; }
.permission-action-list label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; padding: 5px 7px; color: #40516a; border: 1px solid #d9e3ed; border-radius: 6px; background: #fff; cursor: pointer; font-size: 9px; font-weight: 700; }
.permission-action-list input { width: 14px !important; height: 14px !important; accent-color: var(--blue); }
.permission-action-list label:has(input:checked) { color: #0d5b36; border-color: #a9d5bd; background: #eef9f3; }
.permission-action-list label:has(input:disabled) { opacity: .6; }

.license-readonly-card { margin-top: 16px; }
.license-viewer-hero { align-items: center; }
.license-viewer-hero > div:last-child { min-width: 120px; text-align: right; }
.tenant-site-create-card { margin-top: 14px; overflow: hidden; border: 1px solid #cbd8e7; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(17,34,64,.06); }
.tenant-site-toggle { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; color: #fff; border: 0; background: var(--navy); text-align: left; }
.tenant-site-toggle:hover { background: #1a385f; }
.tenant-site-toggle span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 850; }
.tenant-site-toggle span b { width: 15px; text-align: center; }
.tenant-site-toggle small { color: #c8d9ed; font-size: 9px; font-weight: 700; }
.tenant-site-toggle:disabled { color: #6c7788; background: #e8edf3; cursor: not-allowed; }
.tenant-site-toggle:disabled small { color: #8a95a4; }
.tenant-site-panel { border-top: 1px solid #dce4ed; }
.tenant-site-intro { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px 0; }
.tenant-site-intro strong,.tenant-site-intro small { display: block; }
.tenant-site-intro strong { color: var(--navy); font-size: 12px; }
.tenant-site-intro small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.tenant-site-form { padding-top: 12px; }
.tenant-site-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 3px; }
.tenant-site-actions > small { color: var(--muted); font-size: 9px; }
.tenant-site-actions .button { min-width: 220px; margin: 0; }

@media (max-width: 900px) {
  .permission-selector-head { grid-template-columns: 1fr; }
  .permission-resource { grid-template-columns: 1fr; }
  .site-checkbox-grid { grid-template-columns: 1fr; }
  .tenant-site-toggle,.tenant-site-intro,.tenant-site-actions { align-items: stretch; flex-direction: column; }
  .tenant-site-toggle small { padding-left: 20px; }
  .tenant-site-actions .button { width: 100%; min-width: 0; }
}

.wms-subnav { display: flex; gap: 6px; margin-bottom: 16px; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 4px 16px rgba(17,34,64,.04); scrollbar-width: thin; }
.wms-subnav button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 7px 13px; color: #536176; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 11px; font-weight: 800; }
.wms-subnav button:hover { color: var(--navy); background: #f4f7fb; }
.wms-subnav button.active { color: var(--navy); border-color: #8eb9dd; background: var(--sky); }
.wms-subnav button span { font-size: 15px; }
.wms-metric-grid { margin-bottom: 16px; }
.wms-workspace-panel { overflow: hidden; }
.wms-workspace-panel > .panel-header { flex-wrap: wrap; gap: 12px; }
.wms-workspace-panel > .panel-body { min-width: 0; }
.wms-operation { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-weight: 800; }
.wms-limited-table { max-height: 480px; }
.wms-limited-table thead, .wms-live-scroll thead { position: sticky; top: 0; z-index: 2; }
.wms-tab-content { min-height: 300px; }
.sync-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; color: #32506d; border: 1px solid #c9ddef; border-radius: 9px; background: #f5faff; }
.sync-strip .sync-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--navy); border-radius: 8px; background: var(--sky); font-size: 18px; font-weight: 900; }
.sync-strip > div { min-width: 0; flex: 1; }
.sync-strip b, .sync-strip small { display: block; }
.sync-strip b { color: var(--navy); font-size: 12px; }
.sync-strip small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.wms-trace-box { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; padding: 14px; border: 1px dashed #a8bdd4; border-radius: 9px; background: #f7faff; }
.wms-trace-box input { min-height: 46px; padding: 0 13px; color: var(--navy); border: 1px solid #9db4cd; border-radius: 8px; background: #fff; outline: 0; font-weight: 700; }
.wms-trace-box input:focus { border-color: #3a70a7; box-shadow: 0 0 0 4px rgba(58,112,167,.12); }
.wms-trace-grid { display: grid; grid-template-columns: minmax(260px,.8fr) repeat(2,minmax(320px,1fr)); gap: 14px; margin-top: 14px; }
.trace-data { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 7px 10px; margin: 18px 0 0; font-size: 11px; }
.trace-data dt { color: var(--muted); }
.trace-data dd { margin: 0; overflow-wrap: anywhere; color: var(--navy); font-weight: 700; }
.wms-trace-scroll { max-height: 330px; }
.asset-route-strip { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); gap: 12px; align-items: stretch; margin-bottom: 14px; padding: 12px; border: 1px solid #c9ddef; border-radius: 10px; background: #f7fbff; }
.asset-route-strip > div { min-width: 0; padding: 10px 12px; border: 1px solid #d7e3ef; border-radius: 8px; background: #fff; }
.asset-route-strip > b { display: grid; place-items: center; color: #2774ac; font-size: 22px; }
.asset-route-strip small, .asset-route-strip strong, .asset-route-strip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-route-strip small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.asset-route-strip strong { margin-top: 5px; color: var(--navy); font-size: 12px; }
.asset-route-strip span { margin-top: 3px; color: #607087; font-size: 10px; }
.asset-route-strip .route-missing { border-color: #efb2b8; background: #fff7f7; }
.asset-route-strip .route-missing strong { color: #bf2f3e; }
.wms-device-grid { display: grid; grid-template-columns: repeat(3,minmax(280px,1fr)); gap: 12px; }
.wms-device-card { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; }
.wms-device-card header { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.wms-device-card header > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; color: var(--navy); border-radius: 8px; background: var(--sky-soft); font-size: 18px; }
.wms-device-card header strong, .wms-device-card header small { display: block; }
.wms-device-card header strong { color: var(--navy); font-size: 12px; }
.wms-device-card header small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.wms-device-card dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 9px; margin: 13px 0; font-size: 10px; }
.wms-device-card dt { color: var(--muted); }
.wms-device-card dd { margin: 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.wms-live-scroll { max-height: 560px; }
.wms-info-grid, .wms-report-grid { display: grid; grid-template-columns: repeat(4,minmax(220px,1fr)); gap: 14px; }
.wms-info-grid code { display: block; margin: 15px 0; padding: 10px; overflow-wrap: anywhere; color: var(--navy); border-radius: 7px; background: var(--sky-soft); }
.wms-report-grid .panel { min-height: 180px; }

.label-overlay { z-index: 155; }
.label-dialog { width: min(1040px, 100%); max-height: calc(100vh - 36px); overflow: auto; border-radius: 14px; background: #f5f7fa; box-shadow: 0 34px 90px rgba(4,12,27,.34); }
.label-dialog-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 14px; padding: 16px; }
.label-dialog-body > section { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.label-dialog-body h3 { margin: 0 0 13px; color: var(--navy); font-size: 14px; }
.label-template-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.label-template-option { position: relative; display: grid; align-content: start; min-height: 116px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; transition: .15s ease; cursor: pointer; }
.label-template-option:hover { border-color: #91b3d5; background: #f9fbfe; }
.label-template-option.selected { border-color: #4d86bd; background: #f2f8fe; box-shadow: 0 0 0 2px rgba(77,134,189,.1); }
.label-template-option input { position: absolute; right: 11px; top: 11px; width: 16px; height: 16px; accent-color: var(--navy); }
.label-template-option strong { padding-right: 22px; color: var(--navy); font-size: 13px; }
.label-template-option span { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.label-template-option small { margin-top: auto; padding-top: 8px; color: #3477b9; font-size: 9px; font-weight: 800; }
.label-count-row { display: grid; grid-template-columns: minmax(130px,.55fr) minmax(0,1fr); gap: 12px; align-items: end; margin: 15px 0; }
.label-count-row label { display: grid; gap: 6px; color: #4c5b72; font-size: 10px; font-weight: 800; }
.label-count-row input { width: 100%; height: 42px; padding: 0 10px; border: 1px solid #ccd6e3; border-radius: 7px; outline: 0; }
.label-count-row input:focus { border-color: #648eb9; box-shadow: 0 0 0 3px rgba(100,142,185,.11); }
.label-count-row > div { min-width: 0; padding: 10px 12px; border: 1px solid #d8e1ec; border-radius: 8px; background: #f8fafc; }
.label-count-row > div strong, .label-count-row > div span { display: block; }
.label-count-row > div strong { color: var(--navy); font-size: 14px; }
.label-count-row > div span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.label-preview-panel { display: flex; flex-direction: column; }
.label-preview { min-height: 350px; flex: 1; display: grid; place-items: center; padding: 18px; overflow: auto; border: 1px dashed #aebed1; border-radius: 9px; background: #edf2f7; }
.label-artwork { width: 450px; height: 300px; display: flex; flex-direction: column; flex: 0 0 auto; overflow: hidden; padding: 15px; color: var(--navy); border: 1px solid #ccd6e3; background: #fff; box-shadow: 0 8px 24px rgba(17,34,64,.14); font-family: Arial, "Segoe UI", sans-serif; }
.label-artwork.label-2x2 { width: 310px; height: 310px; }
.label-artwork.label-2x4 { width: 560px; height: 280px; }
.label-brand { min-height: 43px; display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 2px solid var(--navy); }
.label-brand img { width: 34px; height: 34px; object-fit: contain; }
.label-brand div { min-width: 0; flex: 1; }
.label-brand strong, .label-brand span { display: block; }
.label-brand strong { font-size: 15px; line-height: 1; }
.label-brand span { margin-top: 3px; font-size: 7px; letter-spacing: .1em; }
.label-brand > b { font-size: 9px; }
.label-content { min-height: 0; flex: 1; display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 12px; align-items: center; padding: 8px 0; }
.label-qr { display: grid; place-items: center; }
.label-qr img { width: 108px; height: 108px; image-rendering: crisp-edges; }
.label-details { min-width: 0; }
.label-sku, .label-name { display: block; overflow: hidden; }
.label-sku { color: var(--navy); font-size: 20px; line-height: 1.08; }
.label-name { margin-top: 4px; color: #33445d; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.label-details dl { display: grid; gap: 3px; margin: 8px 0 0; }
.label-details dl div { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 5px; font-size: 9px; }
.label-details dt { color: var(--muted); }
.label-details dd { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; }
.label-artwork footer { min-height: 20px; display: flex; align-items: end; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid #d7dee8; font-size: 8px; }
.label-artwork footer span, .label-artwork footer b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.label-2x2 .label-brand { min-height: 38px; }
.label-2x2 .label-content { grid-template-columns: 1fr; grid-template-rows: 145px auto; gap: 3px; padding: 4px 0; text-align: center; }
.label-2x2 .label-qr img { width: 142px; height: 142px; }
.label-2x2 .label-sku { font-size: 17px; }
.label-2x2 .label-name { font-size: 10px; }
.label-2x2 .label-details dl { display: none; }
.label-2x2 footer { justify-content: center; }
.label-2x2 footer b { display: none; }
.label-2x4 .label-content { grid-template-columns: 145px minmax(0,1fr); }
.label-2x4 .label-qr img { width: 135px; height: 135px; }
.label-2x4 .label-sku { font-size: 24px; }
.label-2x4 .label-name { font-size: 13px; }
.label-2x4 .label-details dl { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.label-2x4 .label-details dl div { grid-template-columns: 76px minmax(0,1fr); }
.label-dialog-actions { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; gap: 8px; padding: 13px 16px; border-top: 1px solid var(--line); background: rgba(255,255,255,.98); }
.asset-label-artwork { width: 420px; height: 300px; display: flex; flex-direction: column; flex: 0 0 auto; overflow: hidden; padding: 15px; color: var(--navy); border: 1px solid #ccd6e3; background: #fff; box-shadow: 0 8px 24px rgba(17,34,64,.14); font-family: Arial, "Segoe UI", sans-serif; }
.asset-label-artwork.asset-label-30x30 { width: 265px; height: 265px; padding: 11px; }
.asset-label-artwork.asset-label-50x50 { width: 355px; height: 355px; }
.asset-label-brand { min-height: 43px; display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 2px solid var(--navy); }
.asset-label-brand img { width: 34px; height: 34px; object-fit: contain; }
.asset-label-brand div { min-width: 0; flex: 1; }
.asset-label-brand strong, .asset-label-brand span { display: block; }
.asset-label-brand strong { font-size: 15px; line-height: 1; }
.asset-label-brand span { margin-top: 3px; font-size: 7px; letter-spacing: .1em; }
.asset-label-brand > b { font-size: 9px; }
.asset-label-content { min-height: 0; flex: 1; display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 12px; align-items: center; padding: 8px 0; }
.asset-label-qr { display: grid; place-items: center; }
.asset-label-qr img { width: 108px; height: 108px; image-rendering: crisp-edges; }
.asset-label-details { min-width: 0; }
.asset-label-details > strong, .asset-label-details > span { display: block; overflow: hidden; }
.asset-label-details > strong { font-size: 20px; line-height: 1.08; }
.asset-label-details > span { margin-top: 4px; color: #33445d; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.asset-label-details dl { display: grid; gap: 3px; margin: 8px 0 0; }
.asset-label-details dl div { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 5px; font-size: 9px; }
.asset-label-details dt { color: var(--muted); }
.asset-label-details dd { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; }
.asset-label-artwork footer { min-height: 20px; display: flex; align-items: end; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid #d7dee8; font-size: 8px; }
.asset-label-30x30 .asset-label-brand { min-height: 32px; }
.asset-label-30x30 .asset-label-brand img { width: 25px; height: 25px; }
.asset-label-30x30 .asset-label-brand strong { font-size: 12px; }
.asset-label-30x30 .asset-label-brand span, .asset-label-30x30 .asset-label-brand > b { display: none; }
.asset-label-30x30 .asset-label-content { grid-template-columns: 1fr; grid-template-rows: 125px auto; gap: 3px; padding: 4px 0; text-align: center; }
.asset-label-30x30 .asset-label-qr img { width: 122px; height: 122px; }
.asset-label-30x30 .asset-label-details > strong { font-size: 15px; }
.asset-label-30x30 .asset-label-details > span, .asset-label-30x30 .asset-label-details dl, .asset-label-30x30 footer { display: none; }
.asset-label-50x50 .asset-label-content { grid-template-columns: 1fr; grid-template-rows: 180px auto; gap: 4px; text-align: center; }
.asset-label-50x50 .asset-label-qr img { width: 176px; height: 176px; }
.asset-label-50x50 .asset-label-details dl { display: none; }
.asset-label-artwork.asset-label-50x70 { width: 300px; height: 420px; }
.asset-label-50x70 .asset-label-content { grid-template-columns: 1fr; grid-template-rows: 190px auto; gap: 5px; text-align: center; }
.asset-label-50x70 .asset-label-qr img { width: 184px; height: 184px; }
.asset-label-50x70 .asset-label-details > strong { font-size: 23px; }
.asset-label-50x70 .asset-label-details dl { text-align: left; }

.hrm-subnav {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  scrollbar-width: thin;
}
.hrm-subnav button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 13px;
  color: #42536b;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.hrm-subnav button span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #235f98;
  border-radius: 6px;
  background: #eaf4fd;
}
.hrm-subnav button:hover { color: var(--navy); background: #f5f8fc; }
.hrm-subnav button.active {
  color: var(--navy);
  border-color: #8db8dc;
  background: #b9d9f2;
  box-shadow: inset 0 -2px 0 #4388bf;
}
.hrm-mini-metrics { margin: 0 0 14px; }
.hrm-mini-metrics .metric-card { min-height: 126px; }
.hrm-process-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.hrm-process-grid button {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfdff;
  cursor: pointer;
}
.hrm-process-grid button:hover { border-color: #85afd5; box-shadow: 0 8px 22px rgba(22,58,97,.09); transform: translateY(-1px); }
.hrm-process-grid button > b { display: grid; place-items: center; width: 42px; height: 42px; color: #fff; border-radius: 9px; background: var(--navy); }
.hrm-process-grid strong, .hrm-process-grid small { display: block; }
.hrm-process-grid strong { color: var(--navy); font-size: 12px; }
.hrm-process-grid small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.hrm-process-grid i { color: #4388bf; font-style: normal; font-size: 18px; font-weight: 900; }
.hrm-payroll-console {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid #b9cee3;
  border-radius: 10px;
  background: linear-gradient(105deg,#f8fbff,#eef6fd);
}
.hrm-payroll-console > div { display: grid; gap: 5px; min-width: 175px; }
.hrm-payroll-console label { color: #41536a; font-size: 9px; font-weight: 800; }
.hrm-payroll-console input { height: 40px; padding: 0 10px; color: var(--navy); border: 1px solid #adc3da; border-radius: 7px; background: #fff; font-weight: 800; }
.hrm-payroll-console small { min-width: 240px; flex: 1; color: var(--muted); font-size: 9px; line-height: 1.5; }
.hrm-preview-panel { margin-bottom: 14px; overflow: hidden; }
.loading-state.compact { min-height: 90px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }

body.sidebar-collapsed { --sidebar-width: 76px; }
body.sidebar-collapsed .sidebar-brand > div,
body.sidebar-collapsed .tenant-card > span:last-child,
body.sidebar-collapsed .nav-group-title,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .sidebar-footer span:not(.status-dot),
body.sidebar-collapsed .sidebar-footer small { display: none; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding-inline: 9px; }
body.sidebar-collapsed .sidebar-collapse { position: absolute; right: -13px; top: 24px; color: var(--navy); border: 1px solid var(--line); background: #fff; transform: rotate(180deg); }
body.sidebar-collapsed .tenant-card { justify-content: center; padding: 8px; }
body.sidebar-collapsed .nav-link { justify-content: center; padding-inline: 8px; }
body.sidebar-collapsed .nav-link .nav-icon { width: auto; }

.hrm-request-detail-card { width: min(960px, calc(100vw - 32px)); }
.approval-timeline { display: grid; gap: 10px; }
.approval-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #9cb2c8;
  border-radius: 10px;
  background: #fff;
}
.approval-step > b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eaf3fb;
  color: var(--navy);
}
.approval-step > div { display: grid; gap: 2px; min-width: 0; }
.approval-step > div span, .approval-step > div small, .approval-step time { color: var(--muted); font-size: 12px; }
.approval-step.success { border-left-color: var(--green); }
.approval-step.processing { border-left-color: var(--blue); }
.approval-step.danger { border-left-color: var(--red); }

@media (max-width: 1180px) {
  .ai-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sme-graphic-grid { grid-template-columns: 1fr; }
  .graphic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .module-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .global-search { display: none; }
  .document-entry-grid, .realtime-grid { grid-template-columns: 1fr; }
  .wms-device-grid, .wms-info-grid, .wms-report-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wms-trace-grid { grid-template-columns: 1fr; }
  .label-dialog-body { grid-template-columns: 1fr; }
  .hrm-process-grid { grid-template-columns: 1fr; }
  .hrm-payroll-console { align-items: stretch; flex-wrap: wrap; }
}

.module-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
.module-overview-card { min-height:112px; border:1px solid var(--line); border-radius:14px; background:#fff; padding:18px; display:grid; grid-template-columns:42px minmax(0,1fr) 20px; gap:12px; align-items:center; text-align:left; color:var(--navy); cursor:pointer; box-shadow:var(--shadow-sm); }
.module-overview-card:hover { border-color:#7db5dc; transform:translateY(-1px); }
.module-overview-card > span { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#eaf5fc; color:#1673ad; font-size:20px; }
.module-overview-card strong,.module-overview-card small { display:block; }
.module-overview-card small { margin-top:5px; color:var(--muted); line-height:1.35; }
.module-overview-card i { font-style:normal; color:#5792ba; }
.money-input { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.money-input:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,123,181,.12); }
.money-input input { border:0 !important; box-shadow:none !important; min-width:0; }
.money-input span { padding:0 12px; color:var(--muted); font-weight:700; border-left:1px solid var(--line); }
.approval-levels-field > textarea { display:none; }
.approval-level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.approval-level-card { border:1px solid var(--line); border-radius:12px; padding:14px; background:#f8fafc; }
.approval-level-card.selected { border-color:#76b7df; background:#eef8fe; }
.approval-level-card > span,.approval-level-card > strong,.approval-level-card > small { display:block; }
.approval-level-card > span { color:#247bb5; font-size:12px; font-weight:800; text-transform:uppercase; }
.approval-level-card > strong { margin:5px 0 10px; }
.approval-level-card > small { margin-top:8px; color:var(--muted); }
.approval-level-note { margin-top:10px; }
.count-snapshot-note { margin:0 0 14px; }
.knowledge-upload-card { width:min(960px,100%); }
.knowledge-source-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.knowledge-drop-zone { display:grid; place-items:center; min-height:150px; padding:20px; border:2px dashed #9ab8d2; border-radius:12px; color:var(--navy); background:#f5faff; text-align:center; transition:.16s ease; }
.knowledge-drop-zone.nas { border-color:#83b9a9; background:#f3fbf8; }
.knowledge-drop-zone:hover { border-color:#2e76aa; transform:translateY(-1px); }
.knowledge-drop-zone > span { display:grid; place-items:center; width:44px; height:44px; margin-bottom:10px; border-radius:12px; color:#fff; background:linear-gradient(135deg,#245b8f,#15947a); font-size:22px; }
.knowledge-drop-zone strong,.knowledge-drop-zone small { display:block; }
.knowledge-drop-zone small { margin-top:5px; color:var(--muted); }
.knowledge-file-list { display:flex; flex-wrap:wrap; gap:7px; min-height:42px; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.knowledge-file-list > b { flex-basis:100%; color:var(--navy); }
.knowledge-file-list > span { display:flex; align-items:center; gap:6px; max-width:100%; padding:6px 8px; border-radius:7px; background:#eef4fa; color:#42536b; font-size:10px; }
.knowledge-file-list > span i { color:#2b70a8; font-style:normal; }
.knowledge-file-list > span small { color:var(--muted); white-space:nowrap; }
.knowledge-file-list > em { padding:6px 8px; color:var(--muted); font-style:normal; }
.knowledge-upload-form-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.knowledge-upload-form-grid label { display:grid; align-content:start; gap:6px; color:#4c5b72; font-size:10px; font-weight:800; }
.knowledge-upload-form-grid label.wide { grid-column:1/-1; }
.knowledge-upload-form-grid select,.knowledge-upload-form-grid textarea { width:100%; min-height:42px; padding:9px 10px; border:1px solid #ccd6e3; border-radius:7px; background:#fff; outline:0; }
.knowledge-upload-form-grid textarea { min-height:90px; resize:vertical; }
.knowledge-upload-form-grid small { color:var(--muted); font-weight:500; }
.knowledge-upload-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:4px; }

@media (max-width: 1100px) {
  .module-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .approval-level-grid { grid-template-columns:1fr; }
}

@media (max-width: 900px) {
  .ai-command-hero { align-items: flex-start; flex-direction: column; }
  .login-view { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 50px; color: var(--navy); font-size: 19px; }
  .mobile-brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; }
  .login-form-panel { min-height: 100vh; padding: 28px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { transform: translateX(-105%); box-shadow: 20px 0 50px rgba(4,12,27,.2); }
  body.mobile-sidebar-open .sidebar { transform: translateX(0); }
  .workspace { grid-column: 1; }
  .mobile-menu { display: inline-grid; place-items: center; }
  .breadcrumb > span, .breadcrumb > b { display: none; }
  .dashboard-layout, .ai-workspace { grid-template-columns: 1fr; }
  .user-button > span:nth-child(2), .user-button > b { display: none; }
  .workflow-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-header { align-items: stretch; flex-direction: column; }
  .workflow-header-actions { justify-content: flex-start; }
  .scan-config { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .module-overview-grid { grid-template-columns:1fr; }
  .workspace-tabs { margin-inline: -2px; }
  .ai-metric-grid { grid-template-columns: 1fr; }
  .ai-command-hero { padding: 20px; }
  .ai-command-hero .button { width: 100%; }
  .ai-result-section { grid-template-columns: 32px minmax(0,1fr); padding: 13px; }
  .ai-section-index { width: 30px; height: 30px; }
  .ai-result-toolbar, .ai-feedback { align-items: flex-start; flex-direction: column; }
  .topbar { min-height: 60px; padding: 0 10px; gap: 8px; }
  .topbar-actions { gap: 4px; }
  .topbar-button { min-width: 34px; height: 34px; padding: 0 5px; }
  .user-button { padding: 2px 3px; }
  .view-container { padding: 14px 10px 24px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-actions { width: 100%; justify-content: flex-start; }
  .metric-grid, .domain-grid { grid-template-columns: 1fr; }
  .graphic-grid { grid-template-columns: 1fr; }
  .module-strip { grid-template-columns: 1fr 1fr; }
  .module-card { min-height: 72px; }
  .toolbar .search-box { min-width: 100%; }
  .table-scroll { max-height: calc(100vh - 330px); }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { width: 100%; max-height: 94vh; border-radius: 14px 14px 0 0; }
  .modal-fields { grid-template-columns: 1fr; padding: 16px; }
  .form-field.wide { grid-column: auto; }
  .knowledge-source-grid,.knowledge-upload-form-grid { grid-template-columns:1fr; }
  .knowledge-upload-form-grid label.wide { grid-column:auto; }
  .knowledge-drop-zone { min-height:120px; }
  .asset-route-strip { grid-template-columns: 1fr; }
  .asset-route-strip > b { min-height: 24px; transform: rotate(90deg); }
  .workflow-overlay { padding: 0; align-items: end; }
  .document-workspace, .realtime-workspace, .import-result-card { width: 100%; max-height: 96vh; border-radius: 14px 14px 0 0; }
  .workflow-body { padding: 10px; }
  .workflow-metrics { grid-template-columns: 1fr 1fr; gap: 7px; }
  .workflow-metric { min-height: 76px; padding: 12px; }
  .workflow-metric strong { margin-top: 7px; font-size: 22px; }
  .inline-entry-form { grid-template-columns: 1fr; }
  .attachment-entry { grid-template-columns: 1fr; }
  .attachment-row { grid-template-columns: 32px minmax(0, 1fr); }
  .attachment-row > .status-badge, .attachment-row > button { grid-column: 2; justify-self: start; }
  .scan-config { grid-template-columns: 1fr; }
  .wms-trace-box { grid-template-columns: 1fr; }
  .wms-device-grid, .wms-info-grid, .wms-report-grid { grid-template-columns: 1fr; }
  .sync-strip { align-items: flex-start; }
  .label-dialog { width: 100%; max-height: 96vh; border-radius: 14px 14px 0 0; }
  .label-dialog-body { padding: 10px; }
  .label-template-grid { grid-template-columns: 1fr; }
  .label-template-option { min-height: 92px; }
  .label-count-row { grid-template-columns: 1fr; }
  .label-preview { min-height: 290px; padding: 10px; }
  .label-artwork { transform: scale(.64); transform-origin: center; }
  .hrm-payroll-console { flex-direction: column; }
  .hrm-payroll-console > div, .hrm-payroll-console .button, .hrm-payroll-console small { width: 100%; }
}

/* LATec Platform V2 • Tenant & Licensing */
.license-status-badge {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid #bfdcca;
  border-radius: 9px;
  color: #0e6e40;
  background: #eef9f2;
}
.license-status-badge > span { width: 8px; height: 8px; border-radius: 50%; background: #18a564; box-shadow: 0 0 0 4px rgba(24,165,100,.12); }
.license-status-badge b { font-size: 10px; white-space: nowrap; }
.license-status-badge small { padding-left: 7px; color: #557267; border-left: 1px solid #c8dfd0; font-size: 9px; white-space: nowrap; }
.license-status-badge.grace,.license-status-badge.not_yet_valid { color: #8c5a05; border-color: #edd39a; background: #fff8e8; }
.license-status-badge.grace > span,.license-status-badge.not_yet_valid > span { background: #e29b19; box-shadow: 0 0 0 4px rgba(226,155,25,.13); }
.license-status-badge.expired,.license-status-badge.revoked,.license-status-badge.suspended,.license-status-badge.unlicensed { color: #a52e38; border-color: #edc1c5; background: #fff0f1; }
.license-status-badge.expired > span,.license-status-badge.revoked > span,.license-status-badge.suspended > span,.license-status-badge.unlicensed > span { background: #d84b56; box-shadow: 0 0 0 4px rgba(216,75,86,.12); }

.platform-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(430px, .85fr);
  align-items: center;
  gap: 28px;
  margin-bottom: 14px;
  padding: 24px 26px;
  overflow: hidden;
  color: #fff;
  border-radius: 14px;
  background: radial-gradient(circle at 85% 0, rgba(125,194,245,.28), transparent 32%), linear-gradient(120deg, #10294d 0%, #174a74 58%, #08776d 100%);
  box-shadow: 0 14px 32px rgba(17,48,83,.16);
}
.platform-hero-card h2 { margin: 5px 0 8px; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; }
.platform-hero-card p { max-width: 760px; margin: 0; color: #dceaf7; font-size: 12px; line-height: 1.55; }
.platform-hero-card .eyebrow { color: #9ed2ef; }
.platform-hero-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 7px; }
.platform-hero-flow span { min-height: 62px; display: grid; place-items: center; padding: 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.1); text-align: center; font-size: 10px; font-weight: 800; backdrop-filter: blur(8px); }
.platform-hero-flow i { color: #94c8e7; font-style: normal; }
.platform-kpi-grid { margin-bottom: 14px; }

.platform-tabs { display: flex; gap: 7px; margin: 0 0 14px; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.platform-tabs button { min-height: 38px; flex: 1 0 auto; padding: 8px 14px; color: #5c687a; border: 0; border-radius: 8px; background: transparent; font-size: 11px; font-weight: 750; }
.platform-tabs button:hover { color: var(--navy); background: #f2f6fa; }
.platform-tabs button.active { color: #fff; background: var(--navy); box-shadow: 0 5px 12px rgba(17,34,64,.15); }
.platform-panel { display: none; }
.platform-panel.active { display: block; }
.platform-layout { display: grid; grid-template-columns: minmax(460px, .88fr) minmax(580px, 1.12fr); gap: 14px; align-items: start; }
.platform-layout.compact { grid-template-columns: minmax(370px, .72fr) minmax(650px, 1.28fr); }
.platform-form-card,.platform-list-card,.platform-audit-card { overflow: hidden; }
.platform-list-card { min-width: 0; }
.platform-list-card .panel-header,.platform-form-card .panel-header,.platform-audit-card .panel-header { padding: 15px 17px; }
.platform-form { display: grid; gap: 12px; padding: 16px 17px 18px; }
.platform-form label { display: grid; gap: 6px; color: #46556a; font-size: 10px; font-weight: 750; }
.platform-form input,.platform-form select { width: 100%; min-width: 0; min-height: 41px; padding: 8px 10px; color: #1d2d42; border: 1px solid #cfd8e4; border-radius: 8px; outline: 0; background: #fff; font: inherit; font-size: 12px; font-weight: 500; }
.platform-form input:focus,.platform-form select:focus { border-color: #5e8db9; box-shadow: 0 0 0 3px rgba(76,133,183,.13); }
.platform-form-grid { display: grid; gap: 10px; }
.platform-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.platform-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-section-title { display: flex; align-items: center; gap: 9px; margin-top: 3px; padding-top: 12px; border-top: 1px solid #e9edf2; }
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.form-section-title > b { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; border-radius: 8px; background: var(--navy); font-size: 10px; }
.form-section-title strong,.form-section-title small { display: block; }
.form-section-title strong { color: var(--navy); font-size: 11px; }
.form-section-title small { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 500; }
.platform-submit { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 3px; background: linear-gradient(110deg,#142e56,#0d736b) !important; box-shadow: 0 8px 18px rgba(18,64,92,.16); }
.platform-table-scroll { width: 100%; overflow: auto; max-height: 620px; }
.platform-table td { vertical-align: middle; }
.platform-table td strong { color: var(--navy); }
.cell-note { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.license-limit-list { display: flex; flex-wrap: wrap; gap: 5px; color: #657286; font-size: 9px; }
.license-limit-list b { color: var(--navy); }
.platform-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.platform-actions .button { white-space: nowrap; }
.platform-empty { min-height: 280px; display: grid; place-content: center; gap: 8px; color: #7a8798; text-align: center; }
.platform-empty span { font-size: 32px; }
.platform-empty strong { font-size: 11px; }
.platform-audit-card .platform-table-scroll { max-height: 580px; }

@media (max-width: 1380px) {
  .platform-hero-card { grid-template-columns: 1fr; }
  .platform-layout,.platform-layout.compact { grid-template-columns: 1fr; }
  .platform-list-card .platform-table-scroll { max-height: 520px; }
}

@media (max-width: 900px) {
  .license-status-badge small { display: none; }
  .platform-hero-card { padding: 20px; }
  .platform-hero-flow { grid-template-columns: 1fr 1fr; }
  .platform-hero-flow i { display: none; }
  .platform-form-grid.three { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .license-status-badge { display: none; }
  .platform-hero-card h2 { font-size: 18px; }
  .platform-form-grid.two,.platform-form-grid.three { grid-template-columns: 1fr; }
  .platform-tabs button { flex-basis: 190px; }
  .platform-form { padding: 14px; }
}