:root {
  color-scheme: light;
  --brand-navy: #001d34;
  --brand-green: #5cba47;
  --brand-lime: #cedc29;
  --page: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --surface-hover: #f0f4f6;
  --text: #102230;
  --muted: #637381;
  --border: #dde4e8;
  --success: #338c39;
  --success-bg: #e9f7e9;
  --warning: #ae6b00;
  --warning-bg: #fff4d9;
  --danger: #b42318;
  --danger-bg: #feeceb;
  --shadow: 0 1px 2px rgb(0 29 52 / 5%), 0 10px 30px rgb(0 29 52 / 5%);
  --sidebar: #001d34;
  --sidebar-text: #dce7ed;
  --sidebar-muted: #8da3b1;
  --radius: 14px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #07131c;
  --surface: #0d1f2b;
  --surface-2: #122733;
  --surface-hover: #17313e;
  --text: #ecf4f7;
  --muted: #95a9b4;
  --border: #203844;
  --success-bg: #17351f;
  --warning-bg: #3b2d0e;
  --danger-bg: #3b1818;
  --shadow: 0 10px 35px rgb(0 0 0 / 22%);
  --sidebar: #041722;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page); color: var(--text); }
body { min-width: 1120px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.eyebrow { color: var(--brand-green); display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-bottom: 8px; text-transform: uppercase; }
.eyebrow.light { color: #b9ec68; }
.status-dot { background: #8da3b1; border-radius: 50%; display: inline-block; height: 8px; width: 8px; }
.status-dot.online { background: #63ce59; box-shadow: 0 0 0 3px rgb(99 206 89 / 14%); }
.status-dot.warning { background: #f0a128; box-shadow: 0 0 0 3px rgb(240 161 40 / 14%); }
.status-dot.offline { background: #e0564a; box-shadow: 0 0 0 3px rgb(224 86 74 / 14%); }

.login-page { display: grid; grid-template-columns: minmax(480px, 1.12fr) minmax(460px, .88fr); min-height: 100vh; }
.login-brand { background: var(--brand-navy) url('/assets/sorlandsparken.jpeg') center/cover; color: white; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; overflow: hidden; padding: 56px 64px; position: relative; }
.login-brand-overlay { background: linear-gradient(135deg, rgb(0 29 52 / 96%) 5%, rgb(0 29 52 / 76%) 58%, rgb(0 29 52 / 45%)); inset: 0; position: absolute; }
.login-brand-logo { height: auto; position: relative; width: 230px; z-index: 1; }
.login-brand-copy { max-width: 600px; position: relative; z-index: 1; }
.login-brand-copy h1 { font-size: clamp(42px, 4.2vw, 68px); letter-spacing: -.045em; line-height: 1.02; margin: 12px 0 24px; }
.login-brand-copy p { color: #d1e0e7; font-size: 18px; line-height: 1.65; max-width: 530px; }
.login-panel { align-items: center; background: var(--surface); display: flex; justify-content: center; padding: 64px; }
.login-card { width: min(420px, 100%); }
.login-logo { display: none; width: 190px; }
.login-heading { margin: 0 0 36px; }
.login-heading h2 { font-size: 34px; letter-spacing: -.035em; margin: 0 0 10px; }
.login-heading p, .prototype-note { color: var(--muted); line-height: 1.55; margin: 0; }
.login-card > label, .form-grid label { display: grid; font-size: 13px; font-weight: 750; gap: 9px; margin: 0 0 20px; }
.login-card input, .form-grid input, .admin-form input, .admin-form select, .admin-form textarea, .admin-user-row input, .admin-user-row select, .admin-detail-form input, .admin-detail-form select, .admin-list-tools input, .admin-list-tools select, .admin-permission-toolbar input, .ops-toolbar select, .task-edit-form select, .task-edit-form input, .task-comment-form textarea, .contact-form input, .masterdata-form input { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); min-height: 48px; outline: none; padding: 0 14px; transition: border .15s, box-shadow .15s; }
.admin-form textarea, .task-comment-form textarea { min-height: 92px; padding: 12px 14px; resize: vertical; }
.login-card input:focus, .form-grid input:focus, .admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus, .admin-user-row input:focus, .admin-user-row select:focus, .admin-detail-form input:focus, .admin-detail-form select:focus, .admin-list-tools input:focus, .admin-list-tools select:focus, .admin-permission-toolbar input:focus, .ops-toolbar select:focus, .task-edit-form select:focus, .task-edit-form input:focus, .task-comment-form textarea:focus, .contact-form input:focus, .masterdata-form input:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgb(92 186 71 / 14%); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 65px; width: 100%; }
.text-button { background: none; border: 0; color: var(--brand-green); cursor: pointer; font-size: 13px; font-weight: 800; padding: 12px; position: absolute; right: 2px; top: 2px; }
.login-options { align-items: center; display: flex; justify-content: space-between; margin: 2px 0 26px; }
.check { align-items: center; color: var(--muted); display: flex; font-size: 13px; gap: 8px; }
.check input { accent-color: var(--brand-green); min-height: auto; }
.link-button { align-items: center; background: transparent; border: 0; color: var(--brand-green); cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 800; gap: 6px; padding: 6px 0; }
.link-button .icon { width: 15px; }
.prototype-note { font-size: 12px; margin-top: 22px; text-align: center; }
.form-error, .form-message { border-radius: 8px; font-size: 12px; font-weight: 750; line-height: 1.45; margin: 0 0 16px; padding: 11px 12px; }
.form-error { background: var(--danger-bg); color: var(--danger); }
.form-message { background: var(--success-bg); color: var(--success); }

.primary-button, .secondary-button { border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 800; min-height: 42px; padding: 0 18px; transition: transform .15s, background .15s; }
.primary-button { background: var(--brand-green); border: 1px solid var(--brand-green); color: #061908; }
.primary-button:hover { background: #70c95d; transform: translateY(-1px); }
.secondary-button { background: var(--surface); border: 1px solid var(--border); }
.secondary-button:hover { background: var(--surface-hover); }
.secondary-button.glass { background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 30%); color: white; backdrop-filter: blur(8px); }
.primary-button:disabled, .secondary-button:disabled, .link-button:disabled { cursor: not-allowed; filter: grayscale(.25); opacity: .58; transform: none; }
.full { width: 100%; }

.app-shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; transition: grid-template-columns .2s; }
.sidebar { background: var(--sidebar); color: var(--sidebar-text); display: flex; flex-direction: column; height: 100vh; left: 0; overflow: hidden; position: sticky; top: 0; z-index: 20; }
.sidebar-head { align-items: center; display: flex; flex: 0 0 82px; gap: 12px; padding: 0 18px 0 24px; }
.brand-full { height: auto; width: 154px; }
.brand-mark { display: none; align-items: center; background: linear-gradient(135deg, var(--brand-green), var(--brand-lime)); border-radius: 10px; color: var(--brand-navy); font-size: 21px; font-weight: 950; height: 38px; justify-content: center; width: 38px; }
.icon-button { align-items: center; background: transparent; border: 0; border-radius: 9px; cursor: pointer; display: inline-flex; height: 40px; justify-content: center; padding: 0; width: 40px; }
.icon-button:hover { background: var(--surface-hover); }
.sidebar-collapse { color: var(--sidebar-muted); margin-left: auto; }
.sidebar-collapse:hover { background: rgb(255 255 255 / 8%); color: white; }
.main-nav { flex: 1; overflow: auto; padding: 14px 12px 24px; scrollbar-width: thin; }
.nav-link { align-items: center; border: 0; border-radius: 9px; color: var(--sidebar-text); cursor: pointer; display: flex; gap: 12px; margin: 2px 0; min-height: 43px; padding: 0 12px; position: relative; width: 100%; }
.nav-link:hover { background: rgb(255 255 255 / 6%); color: white; }
.nav-link.active { background: rgb(92 186 71 / 16%); color: #bdec73; }
.nav-link span { flex: 1; font-size: 13px; font-weight: 750; text-align: left; }
.nav-toggle { background: none; }
.nav-toggle .chevron { height: 16px; transition: transform .2s; width: 16px; }
.nav-group.expanded .nav-toggle .chevron { transform: rotate(90deg); }
.nav-children { max-height: 0; overflow: hidden; transition: max-height .24s ease; }
.nav-group.expanded .nav-children { max-height: 520px; }
.nav-child { align-items: center; border-left: 1px solid rgb(255 255 255 / 12%); color: var(--sidebar-muted); display: flex; font-size: 12.5px; gap: 9px; margin-left: 21px; min-height: 35px; padding: 0 10px 0 22px; position: relative; }
.nav-child:hover { color: white; }
.nav-child.active { color: #bdec73; font-weight: 800; }
.nav-child.active::before { background: var(--brand-green); border-radius: 2px; content: ""; height: 20px; left: -2px; position: absolute; width: 3px; }
.nav-child .status-dot { height: 6px; width: 6px; }
.sidebar-foot { border-top: 1px solid rgb(255 255 255 / 8%); padding: 18px 24px 22px; }
.platform-status { align-items: center; display: flex; gap: 11px; }
.platform-status span { display: grid; gap: 3px; }
.platform-status strong { font-size: 11px; }
.platform-status small, .version { color: var(--sidebar-muted); font-size: 9.5px; }
.version { display: block; margin-top: 16px; }
.sidebar-compact { grid-template-columns: 76px 1fr; }
.sidebar-compact .brand-full, .sidebar-compact .nav-link span, .sidebar-compact .nav-toggle .chevron, .sidebar-compact .nav-children, .sidebar-compact .sidebar-foot { display: none; }
.sidebar-compact .brand-mark { display: flex; }
.sidebar-compact .sidebar-head { justify-content: center; padding: 0; }
.sidebar-compact .sidebar-collapse { margin: 0; position: absolute; top: 86px; }
.sidebar-compact .main-nav { padding-top: 55px; }
.sidebar-compact .nav-link { justify-content: center; padding: 0; }

.workspace { min-width: 0; }
.topbar { align-items: center; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border); display: flex; height: 82px; justify-content: space-between; padding: 0 34px; position: sticky; top: 0; backdrop-filter: blur(12px); z-index: 15; }
.topbar-title span { color: var(--muted); font-size: 10px; font-weight: 700; }
.topbar-title h1 { font-size: 18px; letter-spacing: -.02em; margin: 5px 0 0; }
.topbar-actions { align-items: center; display: flex; gap: 8px; }
.search-trigger { align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; color: var(--muted); cursor: pointer; display: flex; gap: 10px; height: 40px; margin-right: 10px; padding: 0 8px 0 12px; width: 260px; }
.search-trigger span { flex: 1; font-size: 12px; text-align: left; }
kbd { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; box-shadow: 0 1px 0 var(--border); color: var(--muted); font-family: inherit; font-size: 9px; padding: 4px 6px; }
.notification-button { position: relative; }
.notification-button i { background: #e0564a; border: 2px solid var(--surface); border-radius: 50%; height: 9px; position: absolute; right: 8px; top: 7px; width: 9px; }
.profile-wrap { margin-left: 5px; position: relative; }
.profile-button { align-items: center; background: transparent; border: 0; border-left: 1px solid var(--border); cursor: pointer; display: flex; gap: 10px; margin-left: 4px; padding: 0 0 0 16px; }
.avatar { align-items: center; background: linear-gradient(145deg, var(--brand-green), var(--brand-lime)); border-radius: 10px; color: var(--brand-navy); display: inline-flex; font-size: 12px; font-weight: 900; height: 38px; justify-content: center; width: 38px; }
.avatar.large { border-radius: 16px; font-size: 20px; height: 64px; width: 64px; }
.profile-copy { display: grid; gap: 2px; min-width: 76px; text-align: left; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { color: var(--muted); font-size: 9.5px; }
.profile-button .chevron { height: 14px; transform: rotate(90deg); width: 14px; }
.profile-menu { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); display: grid; min-width: 240px; overflow: hidden; padding: 8px; position: absolute; right: 0; top: 52px; }
.profile-menu > div { border-bottom: 1px solid var(--border); display: grid; gap: 4px; margin: 0 6px 7px; padding: 8px 4px 13px; }
.profile-menu small { color: var(--muted); }
.profile-menu a, .profile-menu button { background: none; border: 0; border-radius: 7px; cursor: pointer; font-size: 12px; padding: 10px; text-align: left; }
.profile-menu a:hover, .profile-menu button:hover { background: var(--surface-hover); }
.page-content { padding: 32px 34px 50px; }

.hero-row { align-items: end; display: flex; justify-content: space-between; margin: 2px 0 27px; }
.hero-row h2 { font-size: 30px; letter-spacing: -.035em; margin: 0 0 8px; }
.hero-row p { color: var(--muted); font-size: 14px; margin: 0; }
.hero-actions { display: flex; gap: 9px; }
.source-strip { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 1px rgb(0 29 52 / 2%); display: grid; gap: 14px; grid-template-columns: minmax(220px, 1fr) auto; margin: 0 0 18px; padding: 15px 18px; }
.source-strip div:first-child { display: grid; gap: 3px; }
.source-strip strong { font-size: 12px; }
.source-strip span, .source-strip p { color: var(--muted); font-size: 10.5px; }
.source-strip p { grid-column: 1/-1; line-height: 1.45; margin: 0; }
.source-badges { display: flex; flex-wrap: wrap; gap: 7px; justify-content: end; }
.data-badge { align-items: center; border-radius: 99px; display: inline-flex; font-size: 9px; font-weight: 900; min-height: 25px; padding: 0 10px; text-transform: uppercase; }
.data-badge.live { background: var(--success-bg); color: var(--success); }
.data-badge.fallback { background: var(--warning-bg); color: var(--warning); }
.data-badge.disabled { background: var(--surface-2); color: var(--muted); }
.kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 1px rgb(0 29 52 / 3%); display: grid; min-height: 126px; padding: 22px; position: relative; }
.kpi-card::before { background: var(--border); border-radius: 0 3px 3px 0; content: ""; height: 38px; left: -1px; position: absolute; top: 22px; width: 3px; }
.kpi-card.positive::before { background: var(--brand-green); }
.kpi-card.warning::before { background: #f0a128; }
.kpi-card > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.kpi-card strong { align-self: center; font-size: 25px; letter-spacing: -.035em; }
.kpi-card small { color: var(--muted); font-size: 10.5px; }
.kpi-card.positive small { color: var(--success); }
.kpi-card.warning small { color: var(--warning); }
.dashboard-grid, .location-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.85fr) minmax(300px, .75fr); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 1px rgb(0 29 52 / 2%); }
.panel-head { align-items: start; display: flex; justify-content: space-between; padding: 22px 22px 17px; }
.panel-head .eyebrow { margin-bottom: 5px; }
.panel-head h3 { font-size: 16px; letter-spacing: -.015em; margin: 0; }
.panel-head p { color: var(--muted); font-size: 12px; margin: 7px 0 0; }
.counter { align-items: center; background: var(--warning-bg); border-radius: 99px; color: var(--warning); display: inline-flex; font-size: 10px; font-weight: 900; height: 23px; justify-content: center; min-width: 23px; }
.location-table { border-top: 1px solid var(--border); }
.table-row { align-items: center; border-bottom: 1px solid var(--border); display: grid; font-size: 12px; grid-template-columns: 1.7fr .8fr .8fr 1fr .45fr 24px; min-height: 65px; padding: 0 20px; transition: background .15s; }
.table-row:last-child { border-bottom: 0; }
a.table-row:hover { background: var(--surface-hover); }
.table-head { color: var(--muted); font-size: 9.5px; font-weight: 800; min-height: 38px; text-transform: uppercase; }
.location-name { align-items: center; display: flex; gap: 12px; }
.location-name > span { display: grid; gap: 4px; }
.location-name small { color: var(--muted); font-size: 9.5px; }
.status-pill { align-items: center; background: var(--surface-2); border-radius: 99px; color: var(--muted); display: inline-flex; font-size: 9px; font-weight: 850; gap: 8px; padding: 7px 10px; text-transform: uppercase; }
.status-pill.online { background: var(--success-bg); color: var(--success); }
.status-pill.warning { background: var(--warning-bg); color: var(--warning); }
.status-pill.offline { background: var(--danger-bg); color: var(--danger); }
.side-stack { display: grid; gap: 18px; align-content: start; }
.attention-list a { align-items: center; border-top: 1px solid var(--border); display: grid; gap: 11px; grid-template-columns: 34px 1fr auto; min-height: 72px; padding: 0 18px; }
.attention-list a:hover { background: var(--surface-hover); }
.attention-list a > span:nth-child(2) { display: grid; gap: 4px; }
.attention-list strong { font-size: 11.5px; }
.attention-list small, .attention-list time { color: var(--muted); font-size: 9.5px; }
.attention-icon { align-items: center; background: var(--warning-bg); border-radius: 9px; color: var(--warning); display: flex; font-size: 13px; font-weight: 950; height: 32px; justify-content: center; width: 32px; }
.attention-icon.danger { background: var(--danger-bg); color: var(--danger); }
.attention-icon.neutral { background: var(--surface-2); color: var(--muted); }
.dashboard-mini-tabs { border-top: 1px solid var(--border); display: flex; gap: 7px; padding: 0 18px 12px; }
.dashboard-mini-tabs button { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 850; min-height: 30px; padding: 0 11px; }
.dashboard-mini-tabs button.active { background: var(--brand-navy); border-color: var(--brand-navy); color: white; }
.dashboard-counter-row { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 18px 14px; }
.dashboard-counter-row a { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; display: grid; gap: 3px; padding: 10px; }
.dashboard-counter-row a:hover { border-color: var(--brand-green); }
.dashboard-counter-row strong { font-size: 17px; }
.dashboard-counter-row span { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.dashboard-task-list .priority-badge { justify-self: end; white-space: nowrap; }
.dashboard-empty { border-top: 1px solid var(--border); margin: 0; padding: 18px; }
.activity-list { list-style: none; margin: 0; padding: 0 20px 18px; }
.activity-list li { align-items: start; display: grid; gap: 12px; grid-template-columns: 9px 1fr; padding: 10px 0; }
.activity-list i { background: var(--brand-green); border: 3px solid var(--success-bg); border-radius: 50%; height: 9px; margin-top: 3px; width: 9px; }
.activity-list span { display: grid; gap: 4px; }
.activity-list a:hover strong { color: var(--brand-green); }
.activity-list strong { font-size: 11px; }
.activity-list small { color: var(--muted); font-size: 9.5px; }

.location-hero { background: var(--brand-navy); border-radius: 16px; color: white; height: 205px; overflow: hidden; position: relative; }
.location-hero-image { height: 100%; inset: 0; object-fit: cover; object-position: center 52%; opacity: .72; position: absolute; transform: scale(1.02); width: 100%; }
.location-cover { background: linear-gradient(90deg, rgb(0 29 52 / 97%), rgb(0 29 52 / 75%) 55%, rgb(0 29 52 / 34%)); inset: 0; position: absolute; }
.location-hero-content { align-items: end; display: flex; inset: 0; justify-content: space-between; padding: 34px; position: absolute; }
.location-hero h2 { font-size: 33px; letter-spacing: -.04em; margin: 0 0 6px; }
.location-hero p { color: #cddce4; margin: 0; }
.hero-status { align-items: center; display: flex; gap: 10px; }
.hero-status .status-pill { border: 1px solid rgb(255 255 255 / 25%); padding: 10px 13px; }
.tabs { border-bottom: 1px solid var(--border); display: flex; gap: 6px; margin: 6px 0 20px; overflow: hidden; padding: 0 4px; }
.tabs a { color: var(--muted); cursor: pointer; font-size: 11.5px; font-weight: 750; padding: 17px 13px 13px; position: relative; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--text); }
.tabs a.active::after { background: var(--brand-green); bottom: -1px; content: ""; height: 3px; left: 10px; position: absolute; right: 10px; }
.main-column { display: grid; gap: 18px; }
.camera-grid { display: grid; gap: 12px; grid-template-columns: 1.25fr .75fr; padding: 0 16px 16px; }
.camera-card { aspect-ratio: 16/9; background: var(--brand-navy); border-radius: 10px; color: white; overflow: hidden; position: relative; }
.camera-card::after { background: linear-gradient(transparent, rgb(0 0 0 / 72%)); bottom: 0; content: ""; height: 45%; left: 0; position: absolute; right: 0; }
.camera-card img { height: 100%; object-fit: cover; width: 100%; }
.camera-card span, .camera-card small { bottom: 16px; position: absolute; z-index: 2; }
.camera-card span { align-items: center; display: flex; font-size: 11px; font-weight: 800; gap: 8px; left: 16px; }
.camera-card small { color: #dce7ed; font-size: 9px; right: 16px; }
.camera-unavailable { align-items: center; border-top: 1px solid var(--border); display: grid; gap: 16px; grid-template-columns: 120px 1fr; padding: 16px 18px 18px; }
.camera-unavailable img { aspect-ratio: 16/10; border-radius: 8px; object-fit: cover; width: 100%; }
.camera-unavailable div { display: grid; gap: 6px; }
.camera-unavailable strong { font-size: 13px; }
.camera-unavailable span, .empty-inline { color: var(--muted); font-size: 11px; line-height: 1.5; }
.camera-panel { overflow: hidden; }
.camera-live-grid { border-top: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
.camera-live-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; margin: 0; overflow: hidden; }
.camera-live-card:hover, .camera-live-card:focus-visible { border-color: var(--brand-green); outline: 0; }
.camera-frame { aspect-ratio: 16/9; background: #07131c; position: relative; }
.camera-frame img { display: block; height: 100%; object-fit: cover; opacity: 0; transition: opacity .18s ease; width: 100%; }
.camera-live-card.loaded .camera-frame img { opacity: 1; }
.camera-loading, .camera-error { align-items: center; color: #dce7ed; display: flex; font-size: 11px; font-weight: 800; inset: 0; justify-content: center; position: absolute; text-align: center; }
.camera-open-hint { background: rgb(0 29 52 / 78%); border-radius: 999px; bottom: 12px; color: white; font-size: 10px; font-weight: 900; opacity: 0; padding: 7px 10px; position: absolute; right: 12px; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; }
.camera-live-card:hover .camera-open-hint, .camera-live-card:focus-visible .camera-open-hint { opacity: 1; transform: translateY(0); }
.camera-error { background: linear-gradient(135deg, rgb(7 19 28 / 92%), rgb(58 24 24 / 86%)); color: #ffd6d2; display: none; padding: 18px; }
.camera-live-card.loaded .camera-loading, .camera-live-card.failed .camera-loading { display: none; }
.camera-live-card.failed .camera-error { display: flex; }
.camera-live-card figcaption { align-items: center; display: flex; gap: 10px; justify-content: space-between; min-height: 45px; padding: 0 12px; }
.camera-live-card figcaption span { align-items: center; display: flex; font-size: 11px; font-weight: 850; gap: 8px; }
.camera-live-card figcaption small { color: var(--muted); font-size: 9px; }
.camera-modal { align-items: center; background: rgb(0 14 24 / 76%); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 130; }
.camera-modal-panel { background: var(--surface); border: 1px solid rgb(255 255 255 / 12%); border-radius: 12px; box-shadow: 0 28px 90px rgb(0 0 0 / 38%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 94vh; overflow: hidden; width: min(1500px, 96vw); }
.camera-modal-panel header, .camera-modal-panel footer { align-items: center; display: flex; gap: 14px; justify-content: space-between; padding: 14px 16px; }
.camera-modal-panel h2 { font-size: 19px; margin: 2px 0 0; }
.camera-modal-actions { align-items: center; display: flex; gap: 8px; }
.camera-video-frame { aspect-ratio: 16/9; background: #07131c; min-height: 280px; position: relative; }
.camera-video-frame > img, .camera-video-frame video { height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; }
.camera-video-frame > img { filter: saturate(.8); opacity: .38; object-fit: cover; }
.camera-video-frame video { background: #07131c; z-index: 2; }
.camera-live-loading, .camera-live-fallback { align-items: center; color: #dce7ed; display: flex; inset: 0; justify-content: center; position: absolute; text-align: center; z-index: 3; }
.camera-video-frame.playing .camera-live-loading { display: none; }
.camera-live-fallback { background: linear-gradient(135deg, rgb(7 19 28 / 88%), rgb(34 44 52 / 84%)); display: none; flex-direction: column; gap: 8px; padding: 24px; }
.camera-live-fallback.show, .camera-video-frame.failed .camera-live-fallback { display: flex; }
.camera-live-fallback strong { font-size: 15px; }
.camera-live-fallback span { color: #dce7ed; font-size: 11px; }
.camera-modal-panel footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.camera-modal-panel footer small { color: var(--muted); }
.camera-overview-hero { align-items: center; }
.camera-overview-count { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 3px; min-width: 150px; padding: 13px 16px; text-align: right; }
.camera-overview-count strong { font-size: 20px; }
.camera-overview-count small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.camera-location-tabs { overflow-x: auto; }
.camera-location-tabs a { white-space: nowrap; }
.camera-overview-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.camera-wall-card { overflow: hidden; }
.camera-wall-frame { aspect-ratio: 16/9; background: #07131c; position: relative; }
.camera-wall-frame video { background: #07131c; display: block; height: 100%; object-fit: contain; width: 100%; }
.camera-wall-loading, .camera-wall-error { align-items: center; color: #dce7ed; display: flex; font-size: 12px; font-weight: 850; inset: 0; justify-content: center; position: absolute; text-align: center; }
.camera-wall-card.playing .camera-wall-loading { display: none; }
.camera-wall-error { background: linear-gradient(135deg, rgb(7 19 28 / 91%), rgb(44 32 32 / 88%)); display: none; flex-direction: column; gap: 10px; padding: 24px; }
.camera-wall-card.failed .camera-wall-error { display: flex; }
.camera-wall-error strong { color: white; font-size: 15px; }
.camera-wall-error span { color: #dce7ed; font-size: 11px; font-weight: 650; }
.camera-wall-error .secondary-button { background: rgb(255 255 255 / 9%); border-color: rgb(255 255 255 / 26%); color: white; min-height: 34px; }
.camera-wall-card footer { align-items: center; border-top: 1px solid var(--border); display: flex; justify-content: space-between; min-height: 52px; padding: 0 12px 0 14px; }
.camera-wall-card footer span { align-items: center; display: flex; gap: 9px; min-width: 0; }
.camera-wall-card footer strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camera-wall-card:fullscreen { background: #07131c; border: 0; border-radius: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100vh; width: 100vw; }
.camera-wall-card:fullscreen .camera-wall-frame { aspect-ratio: auto; min-height: 0; }
.camera-wall-card:fullscreen footer { background: var(--surface); }
.camera-overview-empty { align-items: center; display: grid; gap: 8px; justify-items: center; min-height: 220px; padding: 28px; text-align: center; }
.breakdown-list { border-top: 1px solid var(--border); display: grid; padding: 0 18px 16px; }
.breakdown-list > div { align-items: center; border-bottom: 1px solid var(--border); display: grid; gap: 10px; grid-template-columns: 1fr auto auto; min-height: 52px; }
.breakdown-list > div:last-child { border-bottom: 0; }
.breakdown-list span { font-size: 11px; font-weight: 800; }
.breakdown-list strong { font-size: 12px; }
.breakdown-list small { color: var(--muted); font-size: 10px; }
.empty-inline { margin: 14px 0 0; }
.chart-placeholder { padding: 4px 22px 18px; }
.bars { align-items: end; border-bottom: 1px solid var(--border); display: flex; gap: 8px; height: 150px; padding: 5px 4px 0; }
.bars i { background: linear-gradient(180deg, var(--brand-green), color-mix(in srgb, var(--brand-green) 55%, var(--brand-lime))); border-radius: 4px 4px 0 0; flex: 1; height: var(--h); opacity: .85; }
.bars i:hover { opacity: 1; }
.chart-labels { color: var(--muted); display: flex; font-size: 9px; justify-content: space-between; padding-top: 8px; }
.control-panel { overflow: hidden; }
.machine-state { align-items: center; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); display: flex; gap: 12px; margin-bottom: 16px; padding: 15px 18px; }
.machine-state.compact { border: 1px solid var(--border); border-radius: 8px; margin: 0; padding: 10px; }
.machine-icon { background: var(--surface-2); border-radius: 9px; height: 44px; overflow: hidden; width: 44px; }
.machine-icon img { height: 100%; object-fit: contain; width: 100%; }
.machine-state div { display: grid; gap: 4px; }
.machine-state strong { font-size: 11.5px; }
.machine-state small { color: var(--muted); font-size: 9.5px; }
.control-panel > .primary-button { margin: 0 18px 17px; width: calc(100% - 36px); }
.ops-panel { display: grid; gap: 0; }
.ops-loading { color: var(--muted); font-size: 11px; padding: 0 18px 16px; }
.ops-readiness { border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 18px; }
.ops-readiness span { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 850; padding: 5px 8px; text-transform: uppercase; }
.ops-section { border-top: 1px solid var(--border); display: grid; gap: 10px; padding: 14px 18px; }
.ops-section h4 { font-size: 11px; margin: 0; }
.ops-card-list { display: grid; gap: 9px; }
.ops-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; display: grid; gap: 10px; padding: 10px; }
.ops-card strong { display: block; font-size: 11px; }
.ops-card small, .muted { color: var(--muted); font-size: 9.5px; }
.ops-programs { display: flex; flex-wrap: wrap; gap: 7px; }
.ops-programs .secondary-button { min-height: 32px; padding: 7px 10px; }
.door-list { border-top: 1px solid var(--border); }
.door-list > div { align-items: center; border-bottom: 1px solid var(--border); display: grid; gap: 8px; grid-template-columns: 1fr auto; padding: 13px 18px; }
.door-list span { align-items: center; display: flex; font-size: 10.5px; gap: 8px; }
.door-list strong { font-size: 10px; }
.door-list small { color: var(--muted); font-size: 9px; grid-column: 1/-1; }
.door-list div div { display: flex; gap: 6px; grid-column: 1/-1; }
.door-list button { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; font-size: 9px; font-weight: 800; padding: 6px 12px; }
.door-list button:disabled { color: var(--muted); cursor: not-allowed; opacity: .62; }
.door-list.live { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.safety-note { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 0; padding: 13px 18px 16px; }
.status-list { margin: 0; padding: 0 18px 14px; }
.status-list div { border-top: 1px solid var(--border); display: flex; font-size: 10.5px; justify-content: space-between; padding: 12px 0; }
.status-list dt { color: var(--muted); }
.status-list dd { font-weight: 800; margin: 0; }
.status-list dd.good { color: var(--success); }
.facility-info .status-list div { align-items: flex-start; gap: 14px; }
.facility-info .status-list dt { flex: 0 0 86px; }
.facility-info .status-list dd { overflow-wrap: anywhere; text-align: right; }
.facility-info .status-list a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--brand-green) 45%, transparent); text-underline-offset: 3px; }
.contact-list-compact { border-top: 1px solid var(--border); display: grid; gap: 10px; padding: 14px 18px 16px; }
.contact-list-compact h4 { font-size: 11px; margin: 0; }
.contact-row { background: var(--surface-2); border-radius: 8px; display: grid; gap: 8px; padding: 11px; }
.contact-row span { display: grid; gap: 3px; }
.contact-row strong { font-size: 12px; }
.contact-row small, .contact-row em { color: var(--muted); font-size: 9.5px; font-style: normal; }
.contact-row p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.contact-row a { font-size: 10.5px; font-weight: 800; }
.contact-modal { margin-bottom: 8vh; max-height: 84vh; overflow: hidden; width: min(960px, 94vw); }
.facility-editor-scroll { display: grid; gap: 14px; max-height: min(66vh, 720px); overflow: auto; padding: 0 18px 18px; }
.facility-editor-section { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: grid; gap: 12px; padding: 14px; }
.section-subhead { align-items: center; display: flex; justify-content: space-between; }
.section-subhead strong { display: block; font-size: 13px; }
.section-subhead small { color: var(--muted); display: block; font-size: 11px; margin-top: 2px; }
.masterdata-form { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.masterdata-form label { display: grid; font-size: 10px; font-weight: 800; gap: 6px; }
.masterdata-form label.wide, .masterdata-form .wide, .masterdata-form .contact-form-actions { grid-column: 1 / -1; }
.masterdata-form input[readonly] { background: var(--surface-2); color: var(--muted); }
.contact-editor-list { display: grid; gap: 12px; }
.contact-form { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
.contact-form-title { align-items: center; display: flex; grid-column: 1 / -1; justify-content: space-between; }
.contact-form-title strong { font-size: 12px; }
.contact-form label { display: grid; font-size: 10px; font-weight: 800; gap: 6px; }
.contact-form label.wide, .contact-form-actions { grid-column: 1 / -1; }
.contact-form-actions { display: flex; justify-content: flex-end; }
.readonly-contact { color: var(--muted); gap: 4px; grid-template-columns: 1fr; }
.readonly-contact p { margin: 0; overflow-wrap: anywhere; }
.danger-link { color: var(--danger); }
.contact-message { margin: 0 18px 18px; }

.modal-backdrop { align-items: start; background: rgb(0 14 24 / 58%); display: flex; inset: 0; justify-content: center; padding-top: 12vh; position: fixed; z-index: 100; }
.confirm-modal { width: min(520px, 92vw); }
.confirm-modal .status-list { padding-top: 6px; }
.command { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 70px rgb(0 0 0 / 28%); overflow: hidden; width: min(600px, 90vw); }
.command-input { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: 12px; padding: 12px 14px 12px 18px; }
.command-input input { background: transparent; border: 0; color: var(--text); flex: 1; font-size: 15px; outline: 0; }
.command-results { display: grid; max-height: 360px; overflow: auto; padding: 8px; }
.command-results a { align-items: center; border-radius: 8px; display: flex; font-size: 12px; justify-content: space-between; padding: 11px 12px; }
.command-results a:hover { background: var(--surface-hover); }
.command-results small { color: var(--muted); }
.command footer { background: var(--surface-2); border-top: 1px solid var(--border); color: var(--muted); display: flex; font-size: 9px; gap: 18px; padding: 10px 16px; }

.settings-layout { display: grid; gap: 22px; grid-template-columns: 210px minmax(0, 780px); }
.settings-nav { display: grid; gap: 4px; align-content: start; }
.settings-nav a { border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; padding: 11px 13px; }
.settings-nav a:hover { background: var(--surface-hover); }
.settings-nav a.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 1px rgb(0 29 52 / 5%); }
.settings-main { display: grid; gap: 18px; }
.profile-summary { align-items: center; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); display: flex; gap: 15px; padding: 18px 22px; }
.profile-summary div { display: grid; flex: 1; gap: 5px; }
.profile-summary strong { font-size: 13px; }
.profile-summary small { color: var(--muted); font-size: 10px; }
.form-grid { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; padding: 22px; }
.form-grid label { font-size: 11px; margin-bottom: 17px; }
.form-grid input { min-height: 43px; }
.form-actions { border-top: 1px solid var(--border); display: flex; gap: 9px; justify-content: end; padding: 16px 22px; }
.theme-options { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; padding: 0 22px 22px; }
.theme-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; display: grid; gap: 10px; padding: 9px; text-align: left; }
.theme-card.selected { border-color: var(--brand-green); box-shadow: 0 0 0 2px rgb(92 186 71 / 13%); }
.theme-card strong { font-size: 11px; padding: 0 4px 4px; }
.theme-preview { border: 1px solid #dce4e8; border-radius: 6px; height: 80px; position: relative; }
.theme-preview::before { border-right: 1px solid; content: ""; inset: 0 auto 0 0; width: 26%; position: absolute; }
.light-preview { background: #f5f7f9; border-color: #dde4e8; }
.light-preview::before { background: #001d34; border-color: #dde4e8; }
.dark-preview { background: #07131c; border-color: #203844; }
.dark-preview::before { background: #041722; border-color: #203844; }
.admin-users-layout { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); }
.admin-users-shell { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); }
.admin-users-sidebar { max-height: calc(100vh - 120px); overflow: hidden; position: sticky; top: 96px; }
.admin-list-tools { border-top: 1px solid var(--border); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 132px; padding: 12px; }
.admin-user-picker { border-top: 1px solid var(--border); display: grid; max-height: calc(100vh - 390px); overflow: auto; }
.admin-user-pick { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); cursor: pointer; display: grid; gap: 10px; grid-template-columns: 34px minmax(0, 1fr) 24px; padding: 11px 14px; text-align: left; }
.admin-user-pick:hover, .admin-user-pick.selected { background: var(--surface-hover); }
.admin-user-pick.selected { box-shadow: inset 3px 0 0 var(--brand-green); }
.admin-user-pick span:not(.avatar) { display: grid; gap: 3px; min-width: 0; }
.admin-user-pick strong, .admin-user-pick small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-pick strong { font-size: 12px; }
.admin-user-pick small { color: var(--muted); font-size: 9.5px; }
.admin-user-pick b { background: var(--surface-2); border-radius: 999px; color: var(--muted); font-size: 10px; padding: 4px 0; text-align: center; }
.admin-create-drawer { border-top: 1px solid var(--border); padding: 12px 14px; }
.admin-create-drawer summary { color: var(--brand-blue); cursor: pointer; font-size: 12px; font-weight: 850; }
.admin-create-drawer .admin-form { margin-top: 12px; padding: 0; }
.admin-user-detail { display: grid; gap: 14px; min-width: 0; }
.admin-detail-header { display: grid; gap: 16px; padding: 18px; }
.admin-detail-header h2 { font-size: 24px; margin: 2px 0; }
.admin-detail-header p { color: var(--muted); margin: 0; }
.admin-summary-grid { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.admin-summary-grid span { background: var(--surface-2); border-radius: 8px; display: grid; gap: 4px; min-width: 0; padding: 10px; }
.admin-summary-grid small { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.admin-summary-grid strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-tabs { margin: 0; }
.admin-tabs a { cursor: pointer; }
.admin-detail-form { display: grid; gap: 14px; padding: 16px; }
.detail-fields { grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.4fr) minmax(150px, .8fr) auto; }
.admin-permission-toolbar { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(220px, 1fr) auto auto auto; }
.admin-save-bar { align-items: center; background: rgb(255 255 255 / 92%); border: 1px solid var(--border); border-radius: 10px; bottom: 18px; box-shadow: var(--shadow); display: none; gap: 10px; justify-content: end; padding: 10px; position: sticky; z-index: 8; }
.admin-detail-form.dirty .admin-save-bar { display: flex; }
.admin-save-bar span { color: var(--muted); font-size: 11px; margin-right: auto; }
.admin-activity { padding: 18px; }
.admin-form { display: grid; gap: 15px; padding: 0 22px 22px; }
.admin-form label, .admin-user-fields label { display: grid; font-size: 11px; font-weight: 750; gap: 8px; }
.admin-form fieldset, .admin-user-row fieldset { border: 1px solid var(--border); border-radius: 10px; margin: 0; padding: 13px; }
.admin-form legend, .admin-user-row legend { color: var(--muted); font-size: 10px; font-weight: 850; padding: 0 6px; text-transform: uppercase; }
.location-checks { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.check.small { font-size: 11px; }
.user-list-panel { overflow: hidden; }
.admin-user-list { border-top: 1px solid var(--border); display: grid; }
.admin-user-row { border-bottom: 1px solid var(--border); display: grid; gap: 14px; padding: 18px 20px; }
.admin-user-row:last-child { border-bottom: 0; }
.admin-user-main { align-items: center; display: flex; gap: 12px; }
.admin-user-main div { display: grid; gap: 4px; }
.admin-user-main strong { font-size: 13px; }
.admin-user-main small { color: var(--muted); font-size: 10px; }
.admin-user-fields { display: grid; gap: 12px; grid-template-columns: minmax(150px, 1.2fr) minmax(190px, 1.3fr) minmax(140px, .85fr) auto; }
.admin-user-row .check { align-self: end; min-height: 48px; }
.admin-user-actions { align-items: center; display: flex; gap: 10px; justify-content: end; }
.admin-user-actions input { margin-right: auto; max-width: 260px; width: 100%; }
.ops-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.ops-toolbar select { min-height: 38px; min-width: 150px; }
.seg-group { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display: flex; gap: 3px; padding: 3px; }
.filter-row { display: flex; flex: 1; flex-wrap: wrap; gap: 8px; min-width: 280px; }
.toolbar-action { margin-left: auto; min-height: 38px; }
.seg-button { background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 11.5px; font-weight: 850; min-height: 32px; padding: 0 12px; }
.seg-button.active, .seg-button:hover { background: var(--success-bg); border-color: color-mix(in srgb, var(--brand-green) 50%, var(--border)); color: var(--success); }
.kpi-button { border: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: left; }
.kpi-button:hover { border-color: var(--brand-green); }
.ops-kpis { grid-template-columns: repeat(4, minmax(130px, 1fr)); margin-bottom: 14px; }
.ops-kpis .kpi-card { min-height: 78px; padding: 12px 14px; }
.ops-kpis .kpi-card strong { font-size: 22px; }
.ops-kpis .kpi-card small { font-size: 9px; }
.ops-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .72fr); }
.tasks-workspace { grid-template-columns: minmax(520px, 1fr) minmax(520px, .9fr); }
.service-workspace { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
.ops-message { margin: 0 18px 14px; }
.task-list { border-top: 1px solid var(--border); display: grid; }
.task-row { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; color: var(--text); cursor: pointer; display: grid; gap: 10px; grid-template-columns: minmax(220px, 1.6fr) 104px 82px minmax(120px, .75fr) 110px; min-height: 58px; padding: 8px 16px 8px 13px; text-align: left; }
.task-row:hover { background: var(--surface-hover); }
.task-row.active { background: color-mix(in srgb, var(--brand-green) 8%, var(--surface)); border-left-color: var(--brand-green); }
.task-row span:first-child { display: grid; gap: 5px; }
.task-row strong { font-size: 12.5px; }
.task-row small, .task-row time, .task-row em { color: var(--muted); font-size: 10px; font-style: normal; }
.task-owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priority-badge { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; justify-self: start; padding: 5px 8px; }
.priority-high, .priority-urgent { background: var(--warning-bg); color: var(--warning) !important; }
.priority-low { color: var(--muted) !important; }
.task-detail { overflow: hidden; }
.task-mobile-back { display: none; margin: 14px 16px 0; }
.task-detail-head p { max-width: 680px; white-space: pre-wrap; }
.task-detail-grid { border-top: 1px solid var(--border); display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 18px; }
.task-detail-grid span { background: var(--surface-2); border-radius: 8px; display: grid; gap: 4px; padding: 10px; }
.task-detail-grid small { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.task-detail-grid strong { font-size: 11.5px; line-height: 1.3; }
.task-edit-form { border-top: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 18px; }
.task-edit-form label { display: grid; font-size: 10.5px; font-weight: 800; gap: 7px; }
.task-edit-form .full, .task-edit-form button { grid-column: 1/-1; }
.task-meta { border-top: 1px solid var(--border); color: var(--muted); display: flex; flex-wrap: wrap; font-size: 10px; gap: 12px; padding: 12px 18px; }
.task-section { border-top: 1px solid var(--border); display: grid; gap: 12px; padding: 16px 18px; }
.task-section h4 { font-size: 12px; margin: 0; }
.task-comment-form { border-top: 1px solid var(--border); display: grid; gap: 10px; padding: 16px 18px; }
.task-timeline { display: grid; gap: 10px; }
.timeline-item { display: grid; gap: 10px; grid-template-columns: 10px 1fr; }
.timeline-item i { background: var(--brand-green); border-radius: 50%; height: 8px; margin-top: 8px; width: 8px; }
.timeline-item.comment i { background: var(--brand-navy); }
.timeline-item p { background: var(--surface-2); border-radius: 8px; display: grid; font-size: 11px; gap: 4px; line-height: 1.45; margin: 0; padding: 10px; }
.timeline-item span { color: var(--muted); font-size: 9.5px; }
.attachment-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.attachment-thumb { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; overflow: hidden; padding: 0; text-align: left; }
.attachment-thumb img { aspect-ratio: 4/3; display: block; object-fit: cover; width: 100%; }
.attachment-thumb span { color: var(--muted); display: block; font-size: 10px; overflow: hidden; padding: 8px; text-overflow: ellipsis; white-space: nowrap; }
.task-upload-form { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.upload-control { align-items: center; background: var(--success-bg); border: 1px solid color-mix(in srgb, var(--brand-green) 35%, var(--border)); border-radius: 8px; color: var(--success); cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 900; min-height: 36px; padding: 0 12px; }
.upload-control input { display: none; }
.task-upload-form small, .upload-state { color: var(--muted); font-size: 10px; }
.upload-error { color: var(--danger); font-size: 10px; font-weight: 800; }
.lightbox { align-items: center; background: rgb(0 14 24 / 72%); display: flex; inset: 0; justify-content: center; padding: 32px; position: fixed; z-index: 120; }
.lightbox figure { background: var(--surface); border-radius: 12px; box-shadow: 0 24px 70px rgb(0 0 0 / 32%); margin: 0; max-height: 90vh; max-width: min(1100px, 94vw); overflow: hidden; position: relative; }
.lightbox img { display: block; max-height: 78vh; max-width: 100%; object-fit: contain; }
.lightbox figcaption { color: var(--muted); font-size: 11px; padding: 12px 14px; }
.lightbox-close { position: absolute; right: 10px; top: 10px; }
.service-summary-grid { border-top: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px; }
.service-summary { background: var(--surface-2); border-radius: 8px; display: grid; gap: 5px; padding: 12px; }
.service-summary span { color: var(--muted); font-size: 9.5px; font-weight: 850; text-transform: uppercase; }
.service-summary strong { font-size: 13px; line-height: 1.25; }
.service-summary small { color: var(--muted); font-size: 10px; min-height: 13px; }
.service-grid { border-top: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px; }
.service-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 6px; padding: 14px; }
.service-card strong { font-size: 13px; }
.service-card small, .service-card p { color: var(--muted); font-size: 10.5px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.service-history { border-top: 1px solid var(--border); display: grid; padding: 0 16px 16px; }
.service-history-row { align-items: start; border-bottom: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: 150px 170px 150px minmax(0, 1fr); padding: 13px 0; }
.service-history-row:last-child { border-bottom: 0; }
.service-history-row time, .service-history-row span { color: var(--muted); font-size: 10px; }
.service-history-row strong { font-size: 11px; }
.service-history-row p { font-size: 11px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.sales-page { display: grid; gap: 18px; }
.sales-filterbar { padding: 14px; position: sticky; top: 96px; z-index: 10; }
.sales-filterbar .seg-group { margin-bottom: 12px; }
.sales-filter-grid { align-items: end; display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(120px, 1fr)) minmax(220px, auto); }
.sales-filter-grid label { color: var(--muted); display: grid; font-size: 9px; font-weight: 850; gap: 6px; text-transform: uppercase; }
.sales-filter-grid input, .sales-filter-grid select { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); min-height: 38px; min-width: 0; padding: 0 10px; }
.sales-filter-grid label.muted-date { opacity: .42; }
.sales-filter-actions { align-items: end; display: flex; gap: 8px; justify-content: end; }
.sales-filter-actions label { min-width: 150px; }
.sales-kpis { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sales-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 1px rgb(0 29 52 / 2%); display: grid; gap: 10px; min-height: 104px; padding: 17px; }
.sales-kpi span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.sales-kpi strong { font-size: 25px; letter-spacing: -.035em; }
.sales-kpi div { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.sales-kpi small, .delta { color: var(--muted); font-size: 10px; font-weight: 800; }
.delta.positive { color: var(--success); }
.delta.negative { color: var(--danger); }
.sales-quality-note { color: var(--muted); font-size: 10.5px; margin: -8px 2px 0; }
.sales-grid-main { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.55fr) minmax(360px, .9fr); }
.sales-grid-secondary { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sales-grid-secondary .sales-wide { grid-column: span 2; }
.sales-chart { border-top: 1px solid var(--border); height: 280px; padding: 18px; }
.sales-line { background: linear-gradient(180deg, var(--surface-2), transparent); border-radius: 10px; height: 100%; overflow: visible; width: 100%; }
.sales-line polyline, .sales-line line { fill: none; stroke: var(--brand-green); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.sales-line circle { fill: var(--brand-green); vector-effect: non-scaling-stroke; }
.sales-chart-axis { border-top: 1px solid var(--border); color: var(--muted); display: flex; font-size: 9.5px; justify-content: space-between; padding: 10px 18px 14px; }
.sales-bars { border-top: 1px solid var(--border); display: grid; padding: 8px 14px 14px; }
.sales-bars.compact { padding-top: 0; }
.sales-bar-row { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); cursor: pointer; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(70px, .35fr) 105px 68px; min-height: 58px; padding: 10px 2px; text-align: left; }
.sales-bar-row:hover { background: var(--surface-hover); }
.sales-bar-row span { display: grid; gap: 4px; min-width: 0; }
.sales-bar-row strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-bar-row small { color: var(--muted); font-size: 9.5px; }
.sales-bar-row em { background: color-mix(in srgb, var(--brand-green) 24%, var(--surface-2)); border-radius: 99px; height: 7px; overflow: hidden; position: relative; }
.sales-bar-row em::after { background: var(--brand-green); border-radius: inherit; content: ""; inset: 0 auto 0 0; position: absolute; width: 0; }
.bar-w-0::after { width: 4% !important; }
.bar-w-1::after { width: 5% !important; }
.bar-w-2::after { width: 10% !important; }
.bar-w-3::after { width: 15% !important; }
.bar-w-4::after { width: 20% !important; }
.bar-w-5::after { width: 25% !important; }
.bar-w-6::after { width: 30% !important; }
.bar-w-7::after { width: 35% !important; }
.bar-w-8::after { width: 40% !important; }
.bar-w-9::after { width: 45% !important; }
.bar-w-10::after { width: 50% !important; }
.bar-w-11::after { width: 55% !important; }
.bar-w-12::after { width: 60% !important; }
.bar-w-13::after { width: 65% !important; }
.bar-w-14::after { width: 70% !important; }
.bar-w-15::after { width: 75% !important; }
.bar-w-16::after { width: 80% !important; }
.bar-w-17::after { width: 85% !important; }
.bar-w-18::after { width: 90% !important; }
.bar-w-19::after { width: 95% !important; }
.bar-w-20::after { width: 100% !important; }
.sales-bar-row b { font-size: 11px; text-align: right; }
.sales-rank-table { border-top: 1px solid var(--border); display: grid; padding: 6px 14px 12px; }
.sales-rank-row { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); display: grid; font-size: 11px; gap: 10px; grid-template-columns: minmax(150px, 1.2fr) 68px 95px 62px; min-height: 42px; padding: 8px 0; text-align: left; width: 100%; }
.sales-rank-row:not(.head) { cursor: pointer; }
.sales-rank-row:not(.head):hover { background: var(--surface-hover); }
.sales-rank-row.head { color: var(--muted); font-size: 8.5px; font-weight: 900; min-height: 30px; text-transform: uppercase; }
.sales-rank-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-rank-row span:nth-child(n+2) { text-align: right; }
.sales-mini-list, .sales-heat { border-top: 1px solid var(--border); display: grid; gap: 10px; padding: 14px; }
.sales-mini-list div, .sales-heat div { background: var(--surface-2); border-radius: 8px; display: grid; gap: 5px; padding: 12px; }
.sales-mini-list span, .sales-heat span { color: var(--muted); font-size: 10px; font-weight: 800; }
.sales-mini-list strong, .sales-heat strong { font-size: 14px; }
.sales-mini-list small, .sales-heat small { color: var(--muted); font-size: 10px; }
.sales-heat { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sales-heat div { border: 1px solid color-mix(in srgb, var(--brand-green) 12%, var(--border)); }
.heat-0 { background: var(--surface-2) !important; }
.heat-1, .heat-2, .heat-3, .heat-4 { background: color-mix(in srgb, var(--brand-green) 8%, var(--surface-2)) !important; }
.heat-5, .heat-6, .heat-7, .heat-8 { background: color-mix(in srgb, var(--brand-green) 14%, var(--surface-2)) !important; }
.heat-9, .heat-10, .heat-11, .heat-12 { background: color-mix(in srgb, var(--brand-green) 21%, var(--surface-2)) !important; }
.heat-13, .heat-14, .heat-15, .heat-16 { background: color-mix(in srgb, var(--brand-green) 28%, var(--surface-2)) !important; }
.heat-17, .heat-18, .heat-19, .heat-20 { background: color-mix(in srgb, var(--brand-green) 36%, var(--surface-2)) !important; }
.sales-hour-grid { align-items: end; border-top: 1px solid var(--border); display: grid; gap: 5px; grid-template-columns: repeat(24, minmax(12px, 1fr)); height: 185px; padding: 18px; }
.sales-hour-grid div { align-items: end; display: grid; gap: 6px; height: 100%; justify-items: center; }
.sales-hour-grid em { background: var(--brand-green); border-radius: 5px 5px 0 0; height: 3%; min-height: 3px; opacity: .72; width: 100%; }
.hour-0 em { height: 3%; opacity: .2; }
.hour-1 em { height: 5%; }
.hour-2 em { height: 10%; }
.hour-3 em { height: 15%; }
.hour-4 em { height: 20%; }
.hour-5 em { height: 25%; }
.hour-6 em { height: 30%; }
.hour-7 em { height: 35%; }
.hour-8 em { height: 40%; }
.hour-9 em { height: 45%; }
.hour-10 em { height: 50%; }
.hour-11 em { height: 55%; }
.hour-12 em { height: 60%; }
.hour-13 em { height: 65%; }
.hour-14 em { height: 70%; }
.hour-15 em { height: 75%; }
.hour-16 em { height: 80%; }
.hour-17 em { height: 85%; }
.hour-18 em { height: 90%; }
.hour-19 em { height: 95%; }
.hour-20 em { height: 100%; }
.sales-hour-grid span { color: var(--muted); font-size: 8px; }
.sales-transactions { overflow: hidden; }
.sales-table { border-top: 1px solid var(--border); overflow-x: auto; }
.sales-table-row { align-items: center; border-bottom: 1px solid var(--border); display: grid; font-size: 11px; gap: 12px; grid-template-columns: 150px 145px 150px minmax(160px, 1fr) 120px 90px 95px; min-width: 950px; padding: 12px 18px; }
.sales-table-row.head { color: var(--muted); font-size: 9px; font-weight: 900; min-height: 38px; text-transform: uppercase; }
.sales-table-row strong { text-align: right; }
.sales-warning { margin: 0; }
.reports-layout { display: grid; gap: 18px; }
.reports-toolbar { display: grid; gap: 12px; }
.report-filters { grid-template-columns: 150px minmax(190px, 1fr) 145px 145px; }
.reports-workspace { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(460px, .9fr) minmax(560px, 1.1fr); }
.reports-archive, .reports-preview { min-width: 0; }
.crm-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(320px, .72fr) minmax(680px, 1.65fr); }
.crm-search, .crm-main { min-width: 0; }
.crm-search { position: sticky; top: 96px; }
.crm-search-form { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; padding: 0 18px 16px; }
.crm-search-form input, .crm-note-form select, .crm-note-form textarea { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); min-width: 0; padding: 0 11px; }
.crm-search-form input { min-height: 40px; }
.crm-result-list { border-top: 1px solid var(--border); display: grid; max-height: calc(100vh - 330px); overflow: auto; }
.crm-result { background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); cursor: pointer; display: grid; gap: 5px; padding: 14px 18px; text-align: left; }
.crm-result:hover, .crm-result.selected { background: var(--surface-hover); }
.crm-result.selected { box-shadow: inset 3px 0 0 var(--brand-green); }
.crm-result strong { font-size: 13px; }
.crm-result span, .crm-result small { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-main { display: grid; gap: 14px; }
.crm-header { align-items: start; display: flex; gap: 18px; justify-content: space-between; padding: 20px; }
.crm-header h2 { font-size: 28px; margin: 4px 0 4px; }
.crm-header p { color: var(--muted); margin: 0; }
.crm-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.crm-badges b { background: var(--surface-2); border-radius: 999px; color: var(--brand-blue); font-size: 10px; padding: 6px 9px; }
.crm-tabs { margin: 0; }
.crm-tabs a { cursor: pointer; }
.crm-overview-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm-overview-grid .panel { padding: 18px; }
.crm-table { border-top: 1px solid var(--border); overflow-x: auto; }
.crm-table-row { align-items: center; border-bottom: 1px solid var(--border); display: grid; font-size: 11px; gap: 12px; min-width: 800px; padding: 13px 18px; }
.crm-table-row.cards { grid-template-columns: minmax(150px, 1.1fr) 95px 88px 70px 85px 75px; }
.crm-table-row.history { grid-template-columns: 150px 150px minmax(160px, 1fr) 110px 90px 90px 88px; }
.crm-table-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-table-row strong { font-size: 12px; }
.crm-table-row small { color: var(--muted); display: block; font-size: 9.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-note-form { align-items: start; border-top: 1px solid var(--border); display: grid; gap: 10px; grid-template-columns: 150px minmax(260px, 1fr) auto auto; padding: 14px 18px; }
.crm-note-form select { min-height: 38px; }
.crm-note-form textarea { min-height: 72px; padding-top: 10px; resize: vertical; }
.crm-note-list { border-top: 1px solid var(--border); display: grid; gap: 10px; padding: 14px 18px 18px; }
.crm-note-list div { background: var(--surface-2); border-radius: 8px; padding: 12px; }
.crm-note-list p { margin: 6px 0; white-space: pre-wrap; }
.crm-note-list small { color: var(--muted); font-size: 10px; }
.receipt-v2 { max-width: 640px; width: min(640px, calc(100vw - 32px)); }
.permission-matrix { display: grid; gap: 10px; }
.permission-matrix section { background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.permission-group-toggle { align-items: center; background: transparent; border: 0; color: var(--brand-blue); cursor: pointer; display: flex; font-size: 12px; font-weight: 850; justify-content: space-between; min-height: 42px; padding: 0 12px; width: 100%; }
.permission-group-toggle small { color: var(--muted); font-size: 9px; }
.permission-group-body { display: grid; padding: 0 10px 8px; }
.permission-row { align-items: center; border-top: 1px solid var(--border); display: grid; gap: 10px; grid-template-columns: minmax(180px, 1fr) 150px 92px 100px; min-height: 38px; padding: 7px 0; }
.permission-row:first-of-type { border-top: 0; }
.permission-row span { min-width: 0; }
.permission-row strong { display: block; font-size: 11px; }
.permission-row small { color: var(--muted); display: block; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permission-row b { background: var(--surface); border-radius: 999px; color: var(--muted); font-size: 9px; padding: 5px 8px; text-align: center; }
.permission-row.granted b { color: var(--brand-green); }
.permission-row.revoked b { color: #b42318; }
.report-table { display: grid; gap: 6px; }
.report-row { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); display: grid; font: inherit; gap: 10px; grid-template-columns: 96px 86px minmax(120px, 1fr) 155px 64px; min-height: 44px; padding: 0 12px; text-align: left; width: 100%; }
.report-row:not(.head) { cursor: pointer; }
.report-row:not(.head):hover, .report-row.selected { border-color: color-mix(in srgb, var(--brand-green) 45%, var(--border)); box-shadow: 0 1px 0 rgb(0 29 52 / 5%); }
.report-row.head { background: transparent; border: 0; color: var(--muted); font-size: 10px; font-weight: 850; min-height: 28px; text-transform: uppercase; }
.report-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-frame { background: white; border: 1px solid var(--border); border-radius: 8px; height: min(72vh, 860px); width: 100%; }
.empty-panel { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 520px; padding: 70px; text-align: center; }
.empty-icon { align-items: center; background: var(--success-bg); border-radius: 14px; color: var(--brand-green); display: flex; height: 58px; justify-content: center; margin-bottom: 18px; width: 58px; }
.empty-panel h2 { font-size: 27px; margin: 0 0 10px; }
.empty-panel p { color: var(--muted); line-height: 1.6; margin: 0 0 24px; max-width: 530px; }
.fatal { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; }

@media (max-width: 1300px) {
  .app-shell { grid-template-columns: 230px 1fr; }
  .sidebar-compact { grid-template-columns: 76px 1fr; }
  .search-trigger { width: 210px; }
  .page-content { padding-left: 25px; padding-right: 25px; }
  .table-row { grid-template-columns: 1.55fr .75fr .75fr 1fr .4fr 20px; }
}

@media (max-width: 900px) {
  body { min-width: 0; }
  .app-shell { grid-template-columns: 76px 1fr; }
  .brand-full, .nav-link span, .nav-toggle .chevron, .nav-children, .sidebar-foot { display: none; }
  .brand-mark { display: flex; }
  .topbar { padding: 0 18px; }
  .topbar-actions { gap: 4px; min-width: 0; }
  .profile-wrap { margin-left: 0; }
  .profile-button { gap: 4px; margin-left: 0; padding-left: 8px; }
  .profile-button .avatar { height: 34px; width: 34px; }
  .search-trigger, .profile-copy { display: none; }
  .page-content { padding: 20px 16px 34px; }
  .kpi-grid, .dashboard-grid, .location-layout { grid-template-columns: 1fr; }
  .location-hero-content, .hero-row { align-items: start; flex-direction: column; gap: 18px; }
  .table-row { grid-template-columns: 1.3fr .7fr .8fr; gap: 10px; padding: 12px 14px; }
  .table-row > span:nth-child(4), .table-row > span:nth-child(5), .table-row > span:nth-child(6), .table-head > span:nth-child(4), .table-head > span:nth-child(5), .table-head > span:nth-child(6) { display: none; }
  .source-strip { grid-template-columns: 1fr; }
  .source-badges { justify-content: start; }
  .camera-live-grid { grid-template-columns: 1fr; }
  .camera-modal { padding: 10px; }
  .camera-modal-panel { max-height: 96vh; width: 100%; }
  .camera-modal-panel header { align-items: start; flex-direction: column; }
  .camera-modal-actions { width: 100%; }
  .camera-modal-actions .secondary-button { flex: 1; }
  .camera-video-frame { aspect-ratio: 10/16; min-height: 360px; }
  .camera-modal-panel footer { align-items: start; flex-direction: column; gap: 4px; }
  .camera-overview-grid { grid-template-columns: 1fr; }
  .camera-overview-hero { align-items: start; }
  .camera-overview-count { text-align: left; width: 100%; }
  .contact-form, .masterdata-form { grid-template-columns: 1fr; }
  .contact-modal { width: 100%; }
  .ops-layout, .tasks-workspace, .service-workspace, .service-grid, .service-summary-grid, .reports-workspace, .crm-layout, .crm-overview-grid, .admin-users-shell, .admin-summary-grid, .detail-fields, .admin-permission-toolbar { grid-template-columns: 1fr; }
  .admin-users-sidebar { max-height: none; position: static; }
  .admin-user-picker { max-height: 360px; }
  .admin-list-tools { grid-template-columns: 1fr; }
  .admin-save-bar { align-items: stretch; flex-direction: column; }
  .crm-search { position: static; }
  .crm-header { display: grid; }
  .crm-note-form { grid-template-columns: 1fr; }
  .crm-result-list { max-height: none; }
  .permission-row { grid-template-columns: 1fr; }
  .report-filters { grid-template-columns: 1fr; }
  .report-row { grid-template-columns: 82px 74px minmax(110px, 1fr); }
  .report-row span:nth-child(4), .report-row span:nth-child(5) { display: none; }
  .filter-row { min-width: 0; width: 100%; }
  .filter-row select, .ops-toolbar select { min-width: 0; width: 100%; }
  .toolbar-action { margin-left: 0; width: 100%; }
  .seg-group { overflow-x: auto; width: 100%; }
  .ops-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-row { grid-template-columns: 1fr auto; }
  .task-row .task-owner, .task-row time { grid-column: 1/-1; }
  .task-detail-stack { display: none; }
  .tasks-workspace.show-detail-mobile .task-list-panel { display: none; }
  .tasks-workspace.show-detail-mobile .task-detail-stack { display: grid; }
  .task-mobile-back { display: inline-flex; justify-self: start; }
  .task-detail-grid, .task-edit-form { grid-template-columns: 1fr; }
  .service-history-row { grid-template-columns: 1fr; gap: 5px; }
  .sales-filterbar { position: static; }
  .sales-filter-grid, .sales-kpis, .sales-grid-main, .sales-grid-secondary, .sales-heat { grid-template-columns: 1fr; }
  .sales-grid-secondary .sales-wide { grid-column: auto; }
  .sales-chart { height: 210px; }
  .sales-bar-row { grid-template-columns: 1fr 80px; }
  .sales-bar-row em, .sales-bar-row .delta { grid-column: 1/-1; }
  .sales-hour-grid { grid-template-columns: repeat(12, minmax(12px, 1fr)); height: 210px; }
  .lightbox { padding: 14px; }
}