/* Neworia workspace reframe — task-first information architecture, shared by both themes. */
body.dashboard-v3 {
  --workspace-gutter: clamp(18px, 2.5vw, 38px);
  --workspace-gap: 18px;
  --workspace-radius: 10px;
  font-family: "Albert Sans", "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-size: 14px;
  line-height: 1.5;
}

body.dashboard-v3:not(.light) {
  --bg: #071522;
  --sidebar: #141b22;
  --sidebar-line: #2e3c47;
  --panel: #1b232b;
  --surface: #1b232b;
  --surface-raised: #252e36;
  --panel-2: #252e36;
  --control: #171f27;
  --line: #1b394b;
  --text: #f2f1ed;
  --muted: #a6c0cc;
  --blue: #37b9e8;
  --blue-light: #a7e8ff;
  --focus: #72d3fb;
  --green: #52c99e;
  --red: #fa7780;
  --amber: #73d4f7;
}

body.dashboard-v3.light {
  --bg: #e9ebed;
  --sidebar: #e4e0d7;
  --sidebar-line: #c9bda9;
  --panel: #fff;
  --surface: #fff;
  --surface-raised: #f4f0e8;
  --panel-2: #f4f4f2;
  --control: #fff;
  --line: #d5cec2;
  --text: #292720;
  --muted: #615c51;
  --blue: #087eaa;
  --blue-light: #075d7c;
  --focus: #087eaa;
  --green: #138766;
  --red: #bd4652;
  --amber: #087eaa;
}

body.dashboard-v3,
body.dashboard-v3 #app { background: var(--bg); color: var(--text); }
body.dashboard-v3 #app.layout { display: grid; min-height: 100dvh; grid-template-columns: 252px minmax(0, 1fr); }
body.dashboard-v3 .sidebar {
  position: sticky; inset: 0 auto auto; z-index: 12; display: flex; width: 252px; height: 100dvh;
  flex-direction: column; overflow: hidden; padding: 18px 12px 12px; border-right: 1px solid var(--sidebar-line);
  background: var(--sidebar); box-shadow: none; /* taste-skill-ignore: keep the navigation column flat */
}
body.dashboard-v3 .sidebar-brand-area { flex: 0 0 auto; padding: 0 7px 15px; border-bottom: 1px solid var(--sidebar-line); }
body.dashboard-v3 .brand { min-height: 48px; gap: 11px; padding: 0; text-decoration: none; }
body.dashboard-v3 .brand-mark.small { width: 40px; height: 40px; border: 0; border-radius: 8px; }
body.dashboard-v3 .brand b { color: var(--text); font-size: 14px; font-weight: 750; letter-spacing: .075em; }
body.dashboard-v3 .brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
body.dashboard-v3 .sidebar-workspace { display: flex; min-height: 0; flex: 1; overflow: hidden; border: 0; }
body.dashboard-v3 .side-navigation { display: flex; width: 100%; flex-direction: column; gap: 5px; overflow-x: hidden; overflow-y: auto; padding: 14px 0; scrollbar-color: var(--line) transparent; }
body.dashboard-v3 .module-search { position: sticky; z-index: 2; top: -14px; gap: 7px; margin: -14px 0 8px; padding: 14px 7px 10px; border: 0; border-bottom: 1px solid var(--sidebar-line); background: var(--sidebar); }
body.dashboard-v3 .module-search > span { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body.dashboard-v3 .module-search input { min-height: 42px; border: 1px solid var(--line); border-radius: 7px; background: var(--control); color: var(--text); font-size: 13px; }
body.dashboard-v3 .nav-group { display: grid; gap: 2px; margin: 0; }
body.dashboard-v3 .nav-group-toggle { min-height: 38px; justify-content: space-between; padding: 5px 10px; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0; text-align: left; text-transform: none; }
body.dashboard-v3 .nav-group-toggle:hover,
body.dashboard-v3 .nav-group.expanded > .nav-group-toggle { background: transparent; color: var(--text); }
body.dashboard-v3 .nav-group-chevron { color: var(--muted); }
body.dashboard-v3 .nav-group:not(.expanded) > .nav-item { display: none; }
body.dashboard-v3 .nav-item { min-height: 40px; gap: 10px; padding: 6px 10px; border-radius: 6px; color: var(--muted); font-size: 13px; font-weight: 500; }
body.dashboard-v3 .nav-item > span { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: currentColor; }
body.dashboard-v3 .nav-item > span svg { width: 17px; height: 17px; }
body.dashboard-v3 .nav-item:hover { background: var(--panel-2); color: var(--text); }
body.dashboard-v3 .nav-item.active { background: color-mix(in srgb, var(--blue) 12%, var(--panel)); box-shadow: none; /* taste-skill-ignore: selection uses a surface tint only */ color: var(--text); }
body.dashboard-v3 .nav-item.active > span { color: var(--blue); }
body.dashboard-v3 .sidebar-bottom { display: grid; flex: 0 0 auto; gap: 3px; margin-top: 6px; padding: 12px 4px 0; border-top: 1px solid var(--sidebar-line); background: var(--sidebar); }
body.dashboard-v3 .online { min-height: 32px; color: var(--muted); font-size: 11px; }
body.dashboard-v3 .online i { background: var(--green); box-shadow: none; /* taste-skill-ignore: status dots have no halo */ }
body.dashboard-v3 .logout { min-height: 40px; justify-content: flex-start; border-radius: 6px; color: var(--muted); font-size: 12px; }
body.dashboard-v3 .logout:hover { background: var(--panel-2); color: var(--text); }

body.dashboard-v3 .main { width: 100%; min-width: 0; max-width: 1900px; margin: 0 auto; padding: 0 var(--workspace-gutter) 54px; container: dashboard-main / inline-size; }
body.dashboard-v3 .topbar {
  position: sticky; z-index: 10; top: 0; min-width: 0; min-height: 72px; margin: 0 calc(-1 * var(--workspace-gutter)) 24px;
  padding: 10px var(--workspace-gutter); border-bottom: 1px solid var(--line); background: var(--bg);
}
body.dashboard-v3 .topbar-title { min-width: 0; }
body.dashboard-v3 .topbar .breadcrumbs { margin: 0 0 1px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
body.dashboard-v3 .topbar h1 { margin: 0; overflow: hidden; color: var(--text); font-size: 20px; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
body.dashboard-v3 .topbar-actions { min-width: 0; gap: 12px; }
body.dashboard-v3 .topbar-server-picker { width: min(250px, 24vw); padding-right: 12px; border-color: var(--line); }
body.dashboard-v3 .topbar-server-picker > span,
body.dashboard-v3 .mobile-server-picker > span { color: var(--muted); font-size: 11px; font-weight: 600; }
body.dashboard-v3 .topbar-server-picker select,
body.dashboard-v3 .mobile-server-picker select { min-height: 40px; border: 1px solid var(--line); border-radius: 7px; background-color: var(--control); color: var(--text); font-size: 13px; }
body.dashboard-v3 .user-chip { max-width: 220px; min-height: 42px; gap: 8px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 12px; }
body.dashboard-v3 .user-chip img { width: 30px; height: 30px; border-radius: 50%; }
body.dashboard-v3 .view { min-width: 0; animation: none; }
body.dashboard-v3 .section-intro { align-items: center; gap: 18px; margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
body.dashboard-v3 .section-intro h2 { margin: 0; color: var(--text); font-size: 24px; font-weight: 650; line-height: 1.22; letter-spacing: -.02em; }
body.dashboard-v3 .section-intro p { max-width: 68ch; margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

body.dashboard-v3 .overview-page-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
body.dashboard-v3 .overview-context { min-width: 0; }
body.dashboard-v3 .overview-page-heading p { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 12px; }
body.dashboard-v3 .overview-page-heading p strong { color: var(--text); font-weight: 650; }
body.dashboard-v3 .overview-separator { color: var(--line); }
body.dashboard-v3 .overview-page-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; }
body.dashboard-v3 .overview-page-actions .button { min-height: 38px; }
body.dashboard-v3 .health-pill { min-height: 36px; border-radius: 6px; }

body.dashboard-v3 .panel,
body.dashboard-v3 .stat-card,
body.dashboard-v3 .login-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--workspace-radius); background: var(--panel); box-shadow: none; /* taste-skill-ignore: use the same flat surface as the workspace */ }
body.dashboard-v3 .panel { padding: 0; }
body.dashboard-v3 .panel-head { min-width: 0; align-items: center; gap: 12px; margin: 0; padding: 15px 16px; border-bottom: 1px solid var(--line); }
body.dashboard-v3 .panel-head > div { min-width: 0; }
body.dashboard-v3 .panel h3 { margin: 0; color: var(--text); font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
body.dashboard-v3 .panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
body.dashboard-v3 .settings-panel { padding: 18px; }
body.dashboard-v3 .settings-panel:has(> .panel-head),
body.dashboard-v3 .appeals-mine-panel:has(> .panel-head) { padding: 0; }
body.dashboard-v3 .module-card { overflow: visible; border: 1px solid var(--line); }
body.dashboard-v3 .module-fields { gap: 16px 20px; padding: 18px; }
body.dashboard-v3 .module-fields > label,
body.dashboard-v3 .settings-panel > label { min-width: 0; color: var(--text); font-size: 13px; font-weight: 550; line-height: 1.45; }
body.dashboard-v3 .input,
body.dashboard-v3 textarea.input,
body.dashboard-v3 select.input,
body.dashboard-v3 .multi-select-trigger,
body.dashboard-v3 .form-question { min-height: 44px; border: 1px solid var(--line); border-radius: 7px; background-color: var(--control); color: var(--text); }
body.dashboard-v3 select.input { padding-right: 36px; }
body.dashboard-v3 select.input option,
body.dashboard-v3 select option { background: var(--panel); color: var(--text); }
body.dashboard-v3 textarea.input { min-height: 112px; }
body.dashboard-v3 :where(button, a, input, select, textarea, [role="button"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
body.dashboard-v3 .input:focus-visible,
body.dashboard-v3 textarea.input:focus-visible,
body.dashboard-v3 select.input:focus-visible,
body.dashboard-v3 .multi-select-trigger:focus-visible { border-color: var(--focus); outline: 2px solid color-mix(in srgb, var(--focus) 25%, transparent); outline-offset: 1px; box-shadow: none; /* taste-skill-ignore: the visible outline is the focus treatment */ }
body.dashboard-v3 .button { min-height: 40px; border-radius: 7px; font-weight: 650; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
body.dashboard-v3 .button:active { transform: translateY(1px); }
body.dashboard-v3 .button.primary,
body.dashboard-v3 .primary:not(.badge):not(.status-badge) { border: 1px solid var(--blue); background: var(--blue); color: #04121d; }
body.dashboard-v3 .button.ghost { border: 1px solid var(--line); background: transparent; color: var(--text); }
body.dashboard-v3 .button.ghost:hover:not(:disabled) { border-color: var(--focus); background: var(--panel-2); }
body.dashboard-v3 .text-button { min-height: 38px; border-radius: 6px; color: var(--blue-light); }
body.dashboard-v3 .text-button:hover { background: var(--panel-2); color: var(--text); }
body.dashboard-v3 .notice { border-color: var(--line); border-radius: 7px; background: var(--panel); color: var(--text); }
body.dashboard-v3 .content-grid,
body.dashboard-v3 .events-grid,
body.dashboard-v3 .applications-layout,
body.dashboard-v3 .logging-studio-grid { min-width: 0; gap: 16px; }
body.dashboard-v3 .table-panel,
body.dashboard-v3 .ticket-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--line) transparent; }
body.dashboard-v3 table { font-variant-numeric: tabular-nums; }

/* Overview: the queue is the working surface; a narrow rail holds supporting context. */
body.dashboard-v3 #overview-view .overview-workspace-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.72fr) minmax(300px, .9fr); grid-template-areas: "primary rail"; align-items: start; gap: 18px 20px; }
body.dashboard-v3 #overview-view .overview-primary-column { display: grid; min-width: 0; grid-area: primary; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
body.dashboard-v3 #overview-view .overview-primary-column > *,
body.dashboard-v3 #overview-view .overview-context-rail > * { min-width: 0; width: 100%; }
body.dashboard-v3 #overview-view .overview-context-rail { display: grid; min-width: 0; grid-area: rail; align-content: start; gap: 14px; container: overview-rail / inline-size; }
body.dashboard-v3 #overview-view .overview-tickets { container: overview-ticket / inline-size; overflow: hidden; padding: 0; }
body.dashboard-v3 #overview-view .overview-tickets > .panel-head { min-height: 62px; align-items: center; padding: 13px 16px; }
body.dashboard-v3 #overview-view .overview-tickets > .panel-head .text-button { flex: 0 0 auto; }
body.dashboard-v3 #overview-view .overview-focus { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; overflow: hidden; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface-raised); }
body.dashboard-v3 #overview-view .overview-focus .focus-card { display: grid; min-width: 0; min-height: 66px; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 9px 12px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); text-align: left; }
body.dashboard-v3 #overview-view .overview-focus .focus-card:last-child { border-right: 0; }
body.dashboard-v3 #overview-view .overview-focus .focus-card:hover { background: color-mix(in srgb, var(--blue) 8%, var(--surface-raised)); }
body.dashboard-v3 #overview-view .overview-focus .focus-card > span { min-width: 0; }
body.dashboard-v3 #overview-view .overview-focus .focus-card small { overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
body.dashboard-v3 #overview-view .overview-focus .focus-card strong { color: var(--text); font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
body.dashboard-v3 #overview-view .overview-focus .focus-card em,
body.dashboard-v3 #overview-view .overview-focus .focus-icon { display: none !important; }
body.dashboard-v3 #overview-view .overview-focus .focus-urgent strong { color: var(--red); }
body.dashboard-v3 #overview-view .overview-focus .focus-unassigned strong { color: var(--amber); }
body.dashboard-v3 #overview-view .overview-focus .focus-active strong { color: var(--blue-light); }
body.dashboard-v3 #overview-view .overview-focus .focus-completed strong { color: var(--muted); }
body.dashboard-v3 #overview-view .overview-ticket-head,
body.dashboard-v3 #overview-view .overview-tickets .ticket-row { display: grid; min-width: 0; grid-template-columns: minmax(54px, .48fr) minmax(82px, .9fr) minmax(80px, .85fr) minmax(74px, .66fr) minmax(80px, .9fr) minmax(92px, .9fr); align-items: center; column-gap: 9px; }
body.dashboard-v3 #overview-view .overview-ticket-head { min-height: 38px; padding: 0 15px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 600; }
body.dashboard-v3 #overview-view .overview-tickets .ticket-list { min-height: 0; padding: 0 15px; }
body.dashboard-v3 #overview-view .overview-tickets .ticket-row { min-height: 49px; margin: 0; padding: 7px 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); text-decoration: none; }
body.dashboard-v3 #overview-view .overview-tickets .ticket-row:first-child { border-top: 0; }
body.dashboard-v3 #overview-view .overview-tickets .ticket-row:hover { background: transparent; }
body.dashboard-v3 #overview-view .overview-tickets .ticket-row:hover .ticket-ref { color: var(--blue-light); }
body.dashboard-v3 #overview-view .ticket-ref { color: var(--text); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
body.dashboard-v3 #overview-view .ticket-owner,
body.dashboard-v3 #overview-view .ticket-type,
body.dashboard-v3 #overview-view .ticket-assignee,
body.dashboard-v3 #overview-view .ticket-created { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
body.dashboard-v3 #overview-view .ticket-assignee { color: var(--text); }
body.dashboard-v3 #overview-view .ticket-status { justify-self: start; }
body.dashboard-v3 #overview-view .queue-empty { display: grid; min-height: 150px; align-content: center; justify-items: start; gap: 7px; padding: 22px 18px; text-align: left; }
body.dashboard-v3 #overview-view .queue-empty-mark { display: none; }
body.dashboard-v3 #overview-view .queue-empty b { color: var(--text); font-size: 14px; }
body.dashboard-v3 #overview-view .queue-empty p { max-width: 48ch; margin: 0; color: var(--muted); font-size: 12px; }
body.dashboard-v3 #overview-view .overview-team-panel { container: overview-team / inline-size; overflow: hidden; padding: 0; }
body.dashboard-v3 #overview-view .overview-team-panel .panel-head select { flex: 0 0 auto; width: auto; min-width: 130px; }
body.dashboard-v3 #overview-view .overview-team-panel .table-panel { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
body.dashboard-v3 #overview-view .overview-team-panel .ticket-table { width: 100%; min-width: 620px; table-layout: fixed; }
body.dashboard-v3 #overview-view .overview-team-panel .ticket-table th,
body.dashboard-v3 #overview-view .overview-team-panel .ticket-table td { padding: 10px 9px; font-size: 11px; }
body.dashboard-v3 #overview-view .overview-team-panel .ticket-table th:first-child,
body.dashboard-v3 #overview-view .overview-team-panel .ticket-table td:first-child { width: 25%; padding-left: 15px; text-align: left; }
body.dashboard-v3 #overview-view .overview-team-panel .ticket-table th:not(:first-child),
body.dashboard-v3 #overview-view .overview-team-panel .ticket-table td:not(:first-child) { text-align: right; }
body.dashboard-v3 #overview-view .rating-insights { container: overview-ratings / inline-size; }
body.dashboard-v3 #overview-view .distribution { display: grid; gap: 0; padding: 0 14px 4px; }
body.dashboard-v3 #overview-view .distribution-row { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border-bottom: 1px solid var(--line); }
body.dashboard-v3 #overview-view .distribution-row:last-child { border-bottom: 0; }
body.dashboard-v3 #overview-view .distribution-status { display: inline-flex; min-width: 0; align-items: center; gap: 8px; color: var(--text); font-size: 12px; }
body.dashboard-v3 #overview-view .distribution-row > b { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
body.dashboard-v3 #overview-view .status-mark { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--muted); }
body.dashboard-v3 #overview-view .status-mark.open { background: var(--red); }
body.dashboard-v3 #overview-view .status-mark.claimed { background: var(--amber); }
body.dashboard-v3 #overview-view .status-mark.working { background: var(--blue); }
body.dashboard-v3 #overview-view .status-mark.closed { background: var(--muted); }
body.dashboard-v3 #overview-view .attention-list { padding: 5px 12px; }
body.dashboard-v3 #overview-view .attention-list > button { min-height: 46px; }
body.dashboard-v3 #overview-view .type-summary { padding: 4px 11px; }
body.dashboard-v3 #overview-view .type-chip { min-height: 40px; }
body.dashboard-v3 #overview-view .rating-insights { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; margin: 0; }
body.dashboard-v3 #overview-view .rating-insights.hidden { display: none; }
body.dashboard-v3 #overview-view .rating-insights > .panel { min-width: 0; width: 100%; overflow: hidden; }
body.dashboard-v3 #overview-view .rating-insights > .rating-recent-panel { grid-column: 1 / -1; }
body.dashboard-v3 #overview-view .rating-score { white-space: nowrap; font-variant-numeric: tabular-nums; }
body.dashboard-v3 #overview-view .overview-metrics { margin-top: 22px; }
body.dashboard-v3 #overview-view .overview-metrics-heading { margin-bottom: 10px; }
body.dashboard-v3 #overview-view .overview-metrics-heading h3 { margin: 0; font-size: 15px; font-weight: 650; }
body.dashboard-v3 #overview-view .overview-metrics-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
body.dashboard-v3 #overview-view .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; }
body.dashboard-v3 #overview-view .stat-card { padding: 13px 14px; }
body.dashboard-v3 #overview-view .stat-icon { color: var(--blue); }
body.dashboard-v3 #overview-view .stat-value { font-variant-numeric: tabular-nums; }

body.dashboard-v3 .mobile-tabbar,
body.dashboard-v3 .mobile-server-picker { display: none; }
body.dashboard-v3 .mobile-tab { min-width: 0; min-height: 50px; gap: 3px; border-radius: 7px; color: var(--muted); }
body.dashboard-v3 .mobile-tab > span { width: 20px; height: 20px; }
body.dashboard-v3 .mobile-tab > span svg { width: 19px; height: 19px; }
body.dashboard-v3 .mobile-tab small { font-size: 10px; font-weight: 600; }
body.dashboard-v3 .mobile-tab.active { background: color-mix(in srgb, var(--blue) 12%, var(--panel)); color: var(--blue-light); }
body.dashboard-v3 .mobile-more-dialog { color: var(--text); }
body.dashboard-v3 .multi-select-trigger { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 1px 12px; padding: 8px 12px; text-align: left; }
body.dashboard-v3 .multi-select-trigger > span { min-width: 0; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
body.dashboard-v3 .multi-select-trigger > small { grid-column: 1; color: var(--muted); font-size: 11px; }
body.dashboard-v3 .multi-select-trigger > svg { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; stroke: var(--muted); transition: transform .16s ease; }
body.dashboard-v3 .multi-select-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
body.dashboard-v3 .multi-select-dialog { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 32px)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
body.dashboard-v3 .multi-select-dialog::backdrop { background: rgb(3 12 19 / 68%); }
body.dashboard-v3 .multi-select-card { display: grid; min-height: 0; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; gap: 11px; max-height: min(760px, calc(100dvh - 32px)); padding: 18px; overflow: hidden; overscroll-behavior: contain; background: var(--panel); color: var(--text); }
body.dashboard-v3 .multi-select-options { min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }

@container dashboard-main (max-width: 860px) {
  body.dashboard-v3 #overview-view .overview-workspace-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "primary" "rail"; gap: 18px; }
  body.dashboard-v3 #overview-view .overview-primary-column { gap: 18px; }
  body.dashboard-v3 #overview-view .overview-context-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  body.dashboard-v3 #overview-view .overview-status-panel { grid-column: 1 / -1; }
  body.dashboard-v3 .content-grid,
  body.dashboard-v3 .events-grid,
  body.dashboard-v3 .applications-layout,
  body.dashboard-v3 .logging-studio-grid { grid-template-columns: minmax(0, 1fr); }
  body.dashboard-v3 .type-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Forms should respond to the space left after the navigation shell, not only
   the device's viewport width. This also covers tablet split-screen and zoom. */
@container dashboard-main (max-width: 820px) {
  body.dashboard-v3 .module-card > .module-fields,
  body.dashboard-v3 .module-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  body.dashboard-v3 .module-fields > * { min-width: 0; }
  body.dashboard-v3 .module-fields > :is(.editor-heading, .editor-actions, .ticket-meta, .empty-state, .module-list, .linked-role-list, .invite-reward-rows, .counter-rows, .team-role-rows, .role-option-rows, .question-list, .resource-list, .resource-filters, .teamlist-preview, .preview-label, [id$="-rows"], [id$="-list"]),
  body.dashboard-v3 .module-fields > label:has(textarea),
  body.dashboard-v3 .module-fields > label:has(select[multiple]) { grid-column: 1; }
}

@container dashboard-main (max-width: 620px) {
  body.dashboard-v3 .module-fields .field-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Keep the compact desktop workspace in two columns until the main content
   itself is genuinely tablet-sized; the sidebar is outside this container. */
body.dashboard-v3 #engagement-anti-raid-view .module-fields > label:has(#raid-enabled),
body.dashboard-v3 #engagement-anti-raid-view .module-fields > .field-grid {
  grid-column: 1 / -1;
}
body.dashboard-v3 #engagement-anti-raid-view .module-fields > label:has(#raid-enabled) {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
}

@container overview-ticket (max-width: 760px) {
  body.dashboard-v3 #overview-view .overview-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.dashboard-v3 #overview-view .overview-focus .focus-card:nth-child(2) { border-right: 0; }
  body.dashboard-v3 #overview-view .overview-focus .focus-card:nth-child(n + 3) { border-top: 1px solid var(--line); }
  body.dashboard-v3 #overview-view .overview-ticket-head { display: none; }
  body.dashboard-v3 #overview-view .overview-tickets .ticket-list { padding: 0 12px; }
  body.dashboard-v3 #overview-view .overview-tickets .ticket-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 11px 1px; }
  body.dashboard-v3 #overview-view .ticket-ref { grid-column: 1; grid-row: 1; }
  body.dashboard-v3 #overview-view .ticket-status { grid-column: 2; grid-row: 1; justify-self: end; }
  body.dashboard-v3 #overview-view .ticket-owner { grid-column: 1; grid-row: 2; }
  body.dashboard-v3 #overview-view .ticket-type { grid-column: 2; grid-row: 2; max-width: 42vw; text-align: right; }
  body.dashboard-v3 #overview-view .ticket-assignee { grid-column: 1; grid-row: 3; max-width: 48vw; white-space: normal; }
  body.dashboard-v3 #overview-view .ticket-created { grid-column: 2; grid-row: 3; text-align: right; }
}

@container overview-team (max-width: 760px) {
  body.dashboard-v3 #overview-view .overview-team-panel .panel-head { align-items: flex-start; flex-direction: column; }
  body.dashboard-v3 #overview-view .overview-team-panel .panel-head select { width: 100%; }
}

@container overview-ratings (max-width: 760px) {
  body.dashboard-v3 #overview-view .rating-insights { grid-template-columns: minmax(0, 1fr); }
  body.dashboard-v3 #overview-view .rating-insights > .rating-recent-panel { grid-column: auto; }
}

@media (max-width: 1080px) {
  body.dashboard-v3 #app.layout { display: block; min-height: 100dvh; }
  body.dashboard-v3 .sidebar { display: none; }
  body.dashboard-v3 .main { max-width: none; padding: 0 22px calc(104px + env(safe-area-inset-bottom)); }
  /* Keep the operational overview full-width on tablet and phone even when
     inline-size container queries are unavailable or report a stale width. */
  body.dashboard-v3 #overview-view .overview-workspace-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "primary" "rail"; }
  body.dashboard-v3 #overview-view .overview-primary-column,
  body.dashboard-v3 #overview-view .overview-context-rail { min-width: 0; width: 100%; }
  body.dashboard-v3 .topbar { min-height: 66px; margin: 0 -22px 20px; padding: calc(8px + env(safe-area-inset-top)) 22px 8px; }
  body.dashboard-v3 .topbar-server-picker { display: none; }
  body.dashboard-v3 .mobile-server-picker { display: grid; width: min(190px, 31vw); gap: 2px; }
  body.dashboard-v3 .user-chip { flex: 0 0 40px; width: 40px; min-width: 40px; max-width: 40px; justify-content: center; overflow: hidden; padding: 3px; }
  body.dashboard-v3 .user-chip span { display: none; }
  body.dashboard-v3 .mobile-tabbar { position: fixed; z-index: 40; inset: auto 0 0; display: grid !important; width: 100%; min-height: 66px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--sidebar); }
  body.dashboard-v3 .mobile-tab { min-height: 50px; }
  body.dashboard-v3 .overview-page-heading { align-items: flex-start; }
}

@media (min-width: 761px) and (max-width: 1080px) {
  body.dashboard-v3 .main { padding-right: 28px; padding-left: 28px; }
  body.dashboard-v3 .topbar { margin-right: -28px; margin-left: -28px; padding-right: 28px; padding-left: 28px; }
  body.dashboard-v3 #overview-view .overview-context-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.dashboard-v3 #overview-view .overview-status-panel { grid-column: 1 / -1; }
  body.dashboard-v3 #overview-view .overview-focus .focus-card { min-height: 70px; }
}

@media (max-width: 760px) {
  body.dashboard-v3 { font-size: 14px; }
  /* Keep dashboard cards readable in the actual phone content width. This
     rule follows the older two-column rating layout loaded earlier. */
  body.dashboard-v3 #overview-view .rating-insights { grid-template-columns: minmax(0, 1fr); }
  body.dashboard-v3 #overview-view .rating-insights > .rating-recent-panel { grid-column: auto; }
  body.dashboard-v3 .main { padding-right: 15px; padding-left: 15px; }
  body.dashboard-v3 .topbar { min-height: 60px; margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; }
  body.dashboard-v3 .topbar .breadcrumbs { max-width: 48vw; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  body.dashboard-v3 .topbar h1 { font-size: 18px; }
  body.dashboard-v3 .topbar-actions { gap: 6px; }
  body.dashboard-v3 .mobile-server-picker { width: min(145px, 36vw); }
  body.dashboard-v3 .mobile-server-picker select { min-height: 38px; padding: 0 28px 0 8px; font-size: 12px; }
  body.dashboard-v3 .overview-page-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; }
  body.dashboard-v3 .overview-page-actions { width: 100%; justify-content: space-between; }
  body.dashboard-v3 .overview-page-actions .button,
  body.dashboard-v3 .health-pill { min-height: 40px; }
  body.dashboard-v3 .panel-head { align-items: flex-start; padding: 13px 13px; }
  body.dashboard-v3 #overview-view .overview-tickets > .panel-head { align-items: flex-start; gap: 6px; padding: 13px; }
  body.dashboard-v3 #overview-view .overview-tickets > .panel-head .text-button { min-height: 40px; padding: 0 5px; font-size: 12px; }
  body.dashboard-v3 #overview-view .overview-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.dashboard-v3 #overview-view .overview-focus .focus-card:nth-child(2) { border-right: 0; }
  body.dashboard-v3 #overview-view .overview-focus .focus-card:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  body.dashboard-v3 #overview-view .overview-focus .focus-card:nth-child(n + 3) { border-top: 0; }
  body.dashboard-v3 #overview-view .overview-context-rail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.dashboard-v3 #overview-view .overview-status-panel { grid-column: auto; }
  body.dashboard-v3 #overview-view .overview-focus .focus-card { min-height: 61px; padding: 8px 10px; }
  body.dashboard-v3 #overview-view .overview-focus .focus-card small { font-size: 11px; }
  body.dashboard-v3 #overview-view .overview-focus .focus-card strong { font-size: 18px; }
  body.dashboard-v3 #overview-view .overview-tickets .ticket-row { min-height: 76px; }
  body.dashboard-v3 #overview-view .overview-tickets .ticket-list { padding: 0 12px; }
  body.dashboard-v3 #overview-view .overview-team-panel .ticket-table { min-width: 620px; }
  body.dashboard-v3 .section-intro { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 17px; }
  body.dashboard-v3 .section-intro > .button { width: 100%; }
  body.dashboard-v3 .module-fields { gap: 14px; padding: 14px; }
  body.dashboard-v3 .settings-panel { padding: 14px; }
  body.dashboard-v3 .multi-select-dialog[open] { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: min(86dvh, 780px); margin: 0; border-radius: 18px 18px 0 0; }
  body.dashboard-v3 .multi-select-card { max-height: min(86dvh, 780px); padding: 16px 14px calc(14px + env(safe-area-inset-bottom)); }
  body.dashboard-v3 .multi-select-dialog::backdrop { background: rgb(3 12 19 / 65%); }
  body.dashboard-v3 .mobile-more-dialog[open] { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: min(84dvh, 780px); margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--panel); }
  body.dashboard-v3 .mobile-more-card { max-height: min(84dvh, 780px); padding-bottom: env(safe-area-inset-bottom); background: var(--panel); color: var(--text); }
  body.dashboard-v3 .mobile-more-head { min-height: 56px; background: var(--panel); }
}

@media (max-width: 390px) {
  body.dashboard-v3 .main { padding-right: 12px; padding-left: 12px; }
  body.dashboard-v3 .topbar { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
  body.dashboard-v3 .topbar .breadcrumbs { display: none; }
  body.dashboard-v3 .mobile-server-picker { width: min(126px, 35vw); }
  body.dashboard-v3 .mobile-tabbar { gap: 1px; padding-right: 5px; padding-left: 5px; }
  body.dashboard-v3 .mobile-tab small { font-size: 9px; }
  body.dashboard-v3 #overview-view .overview-page-actions { align-items: stretch; }
  body.dashboard-v3 #overview-view .overview-page-actions .button { padding-inline: 9px; }
}

@media (max-width: 1080px) {
  /* Do not let long dashboard pages show through the fixed bottom navigation. */
  body.dashboard-v3 .mobile-tabbar { background-color: var(--sidebar) !important; }
}

body.dashboard-v3 #ticket-drawer .drawer-close { min-width: 44px; min-height: 44px; }
body.dashboard-v3 :where(button, a, input, select, textarea, [role="button"]) { scroll-margin-block: 84px; }
body.dashboard-v3 ::selection { background: color-mix(in srgb, var(--blue) 30%, transparent); color: var(--text); }
body.dashboard-v3 :where(input, textarea) { caret-color: var(--blue); }
body.dashboard-v3 :where(input, textarea)::placeholder { color: var(--muted); opacity: .82; }
body.dashboard-v3 :where(a) { text-underline-offset: 3px; }
body.dashboard-v3 :where(table) { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  body.dashboard-v3 *, body.dashboard-v3 *::before, body.dashboard-v3 *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Readability and semantic fixes from the post-redesign audit. */
body.dashboard-v3 .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
body.dashboard-v3 .config-preflight-summary { border-left-width: 1px; border-left-color: var(--line); box-shadow: none; /* taste-skill-ignore: keep the warning panel flat */ }
body.dashboard-v3 #overview-view .overview-ticket-head { min-height: 42px; padding-block: 9px; font-size: 12px; }
body.dashboard-v3 .mobile-tab small { font-size: 11px; }
body.dashboard-v3 .topbar .breadcrumbs { font-size: 11px; }
body.dashboard-v3 .multi-select-dialog { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
@media (max-width: 680px) {
  body.dashboard-v3 .topbar .breadcrumbs { font-size: 11px; }
  body.dashboard-v3 .mobile-tab small { font-size: 11px; }
}
/* Touch and keyboard refinements for phones and tablets. */
body.dashboard-v3 :where(button, a, [role="button"]) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.dashboard-v3 :where(h2, h3) { text-wrap: balance; }
@media (max-width: 1080px) {
  body.dashboard-v3 :where(input.input, textarea.input, select.input, .multi-select-trigger, .form-question) { font-size: 16px; }
}

/* Two-level Neworia navigation: choose a work area, then a module within it. */
@media (min-width: 1081px) {
  body.dashboard-v3 #app.layout { grid-template-columns: 354px minmax(0, 1fr); }
  body.dashboard-v3 .sidebar {
    display: grid; width: 354px; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0; padding: 14px 0 11px;
  }
  body.dashboard-v3 .sidebar-brand-area { grid-column: 1 / -1; grid-row: 1; padding: 0 17px 13px; }
  body.dashboard-v3 .workspace-category-rail {
    display: flex; min-height: 0; grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; gap: 5px;
    overflow-x: hidden; overflow-y: auto; padding: 13px 7px; border-right: 1px solid var(--sidebar-line); scrollbar-width: thin;
  }
  body.dashboard-v3 .workspace-category {
    display: grid; min-width: 0; min-height: 55px; grid-template-rows: 21px auto; align-content: center; justify-items: center; gap: 4px;
    padding: 6px 2px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer;
  }
  body.dashboard-v3 .workspace-category > span { display: grid; width: 20px; height: 20px; place-items: center; }
  body.dashboard-v3 .workspace-category svg { display: block; width: 18px; height: 18px; }
  body.dashboard-v3 .workspace-category small { max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 600; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  body.dashboard-v3 .workspace-category:hover { background: var(--panel-2); color: var(--text); }
  body.dashboard-v3 .workspace-category.active { border-color: color-mix(in srgb, var(--blue) 25%, transparent); background: color-mix(in srgb, var(--blue) 12%, var(--sidebar)); color: var(--text); }
  body.dashboard-v3 .workspace-category.active > span { color: var(--blue); }
  body.dashboard-v3 .sidebar-workspace { min-width: 0; grid-column: 2; grid-row: 2; overflow: hidden; padding: 0 9px; }
  body.dashboard-v3 .side-navigation { gap: 4px; padding: 12px 0; }
  body.dashboard-v3 .module-search { top: -12px; margin: -12px 0 7px; padding: 12px 5px 10px; }
  body.dashboard-v3 .module-search input { min-height: 40px; }
  body.dashboard-v3 .nav-group-toggle { min-height: 34px; padding-inline: 8px; }
  body.dashboard-v3 .nav-item { min-height: 39px; padding-inline: 8px; }
  body.dashboard-v3 .sidebar-bottom { grid-column: 1 / -1; grid-row: 3; margin: 7px 12px 0; padding: 10px 0 0; }
}

/* Compact desktop windows (including browser zoom) need a narrower rail.
   The older 761–1120px rule was overridden by the 354px workspace shell. */
@media (min-width: 1081px) and (max-width: 1440px) {
  body.dashboard-v3 #app.layout { grid-template-columns: 310px minmax(0, 1fr); }
  body.dashboard-v3 .sidebar { width: 310px; grid-template-columns: 66px minmax(0, 1fr); }
  body.dashboard-v3 .workspace-category-rail { padding-right: 5px; padding-left: 5px; }
  body.dashboard-v3 .sidebar-workspace { padding-right: 7px; padding-left: 7px; }
  body.dashboard-v3 .main { padding-right: 22px; padding-left: 22px; }
  body.dashboard-v3 .topbar-server-picker { width: min(178px, 20vw); padding-right: 8px; }
  body.dashboard-v3 .topbar-actions { gap: 8px; }
  body.dashboard-v3 .user-chip { flex: 0 0 42px; width: 42px; min-width: 42px; max-width: 42px; justify-content: center; overflow: hidden; padding: 4px; }
  body.dashboard-v3 .user-chip span { display: none; }
}

@media (max-width: 1080px) {
  body.dashboard-v3 .workspace-category-rail { display: none; }
}

/* Keep older module previews and alerts inside the current Neworia surface system. */
body.dashboard-v3 .discord-preview,
body.dashboard-v3 .teamlist-preview,
body.dashboard-v3 .applications-preview-card,
body.dashboard-v3 .appeal-response,
body.dashboard-v3 .config-preflight-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}
body.dashboard-v3 .teamlist-preview,
body.dashboard-v3 .applications-preview-card,
body.dashboard-v3 .appeal-response,
body.dashboard-v3 .config-preflight-summary { background: var(--panel-2); color: var(--text); }
body.dashboard-v3 .applications-preview-card span { color: var(--blue-light); }
body.dashboard-v3 .mobile-tab small { font-size: 11px; }
body.dashboard-v3 #overview-view .overview-team-panel .ticket-table td { font-size: 11px; }
body.dashboard-v3 .applications-preview-label { font-size: 11px; }

/* Keep desktop layouts from squeezing fixed-width ticket tables into the context rail. */
@container dashboard-main (max-width: 1120px) {
  body.dashboard-v3 #overview-view .overview-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "primary" "rail";
    gap: 20px;
  }
  body.dashboard-v3 #overview-view .overview-context-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  body.dashboard-v3 #overview-view .overview-status-panel { grid-column: 1 / -1; }
  body.dashboard-v3 .content-grid,
  body.dashboard-v3 .events-grid,
  body.dashboard-v3 .applications-layout,
  body.dashboard-v3 .logging-studio-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.dashboard-v3 .module-fields { grid-template-columns: minmax(0, 1fr); }
  body.dashboard-v3 .module-fields > * { grid-column: 1 / -1; }

  /* The legacy rules above use viewport breakpoints. With the two-rail
     desktop shell, the actual content area can already be tablet-sized while
     the browser window still reports a wide desktop viewport. Match those
     high-specificity view rules to the content container instead. */
  body.dashboard-v3 #settings-view > .content-grid,
  body.dashboard-v3 #settings-view > .content-grid.settings-extras,
  body.dashboard-v3 #welcome-view > .content-grid,
  body.dashboard-v3 #moderation-view > .moderation-config,
  body.dashboard-v3 #resource-library-view > .resource-library-grid,
  body.dashboard-v3 #applications-view .applications-layout,
  body.dashboard-v3 #events-view .events-grid,
  body.dashboard-v3 #dashboard-branding-settings .branding-layout,
  body.dashboard-v3 #dashboard-branding-settings .branding-theme-controls,
  body.dashboard-v3 #engagement-team-promotions-view .module-fields,
  body.dashboard-v3 #engagement-tempvoice-view .module-fields,
  body.dashboard-v3 #engagement-invites-view .module-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  body.dashboard-v3 #dashboard-branding-settings .branding-layout > *,
  body.dashboard-v3 #settings-view > .content-grid > *,
  body.dashboard-v3 #welcome-view > .content-grid > *,
  body.dashboard-v3 #moderation-view > .moderation-config > *,
  body.dashboard-v3 #resource-library-view > .resource-library-grid > *,
  body.dashboard-v3 #applications-view .applications-layout > *,
  body.dashboard-v3 #events-view .events-grid > * {
    min-width: 0;
    width: 100%;
  }
}

@container dashboard-main (max-width: 760px) {
  body.dashboard-v3 #overview-view .overview-context-rail { grid-template-columns: minmax(0, 1fr); }
  body.dashboard-v3 #overview-view .overview-status-panel { grid-column: auto; }
}


/* Keep application stages readable when the workflow stacks on phones. */
body.dashboard-v3 .applications-steps > div {
  display: grid;
  min-width: 0;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: baseline;
  column-gap: 9px;
}
body.dashboard-v3 .applications-steps b { white-space: nowrap; }
body.dashboard-v3 .applications-steps small { min-width: 0; line-height: 1.35; }

/* The rail is intentionally narrow; short labels stay legible while the full
   accessible name and tooltip retain the complete work-area name. */
body.dashboard-v3 .workspace-category small { text-overflow: clip; }