/*
  ServiceDesk visual theme.
  These CSS variables are reused across every dashboard so colours, borders,
  panels, and status states stay consistent.
*/
:root {
  --ink: #17202a;
  --muted: #667085;
  --line: #d7dee8;
  --soft: #f5f7fa;
  --panel: #ffffff;
  --brand: #176b87;
  --brand-strong: #0f4f64;
  --accent: #cf5c36;
  --ok: #168a5b;
  --warn: #b7791f;
  --bad: #be3030;
  --info: #4663a8;
  --label: #5f6f89;
  --shadow: 0 16px 40px rgba(23, 32, 42, 0.08);
}

body:not(.is-authenticated) .app-shell {
  display: none;
}

body.is-authenticated .login-view {
  display: none;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(6, 78, 98, 0.92), rgba(14, 33, 50, 0.96)),
    radial-gradient(circle at 20% 10%, rgba(43, 183, 205, 0.35), transparent 32%);
}

.login-card {
  width: min(440px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(2, 16, 28, 0.32);
  padding: 28px;
  display: grid;
  gap: 22px;
}

.login-brand {
  color: var(--ink);
}

.login-heading h1 {
  margin: 4px 0 8px;
  font-size: 30px;
  letter-spacing: 0;
}

.login-heading p {
  color: var(--muted);
  line-height: 1.5;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.login-message {
  min-height: 18px;
  color: var(--bad);
  font-weight: 800;
}

.login-forgot-button {
  justify-self: center;
  min-height: 28px;
  color: var(--brand-strong);
  font-weight: 800;
}

.sidebar-user-panel {
  margin-top: auto;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #e8f6fb;
}

.sidebar-user-panel p {
  display: block;
  margin-top: 5px;
  color: rgba(232, 246, 251, 0.72);
}

.sidebar-user-panel .ghost-button {
  width: 100%;
  margin-top: 10px;
  background: #ffffff;
  color: var(--brand-strong);
  border-color: #ffffff;
}

.brand-mark.brand-logo {
  width: 76px;
  height: 48px;
  padding: 3px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(23, 32, 42, 0.12);
}

.login-brand .brand-logo {
  width: 92px;
  height: 56px;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.password-help {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

#forgotPasswordStatus.success,
#changePasswordStatus.success {
  color: var(--ok);
}

/* Hidden fields must stay hidden even when component selectors define display. */
[hidden] {
  display: none !important;
}

/* Base browser reset. Keeps widths predictable for forms, panels, and dashboard grids. */
* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

/* Main page background and default typography for the entire IT ServiceDesk app. */
body {
  margin: 0;
  min-width: 320px;
  background: #e9edf2;
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/*
  Main application layout.
  Used by index.html to keep the sidebar on the left and every dashboard workspace
  on the right.
*/
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

/* Left navigation column shared by Dashboard, Incidents, Requests, Software, Problems, and all other sections. */
.sidebar {
  background: #122232;
  color: #f8fbff;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Product identity area at the top of the sidebar. */
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 54px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #25a4bd;
  color: #061017;
  font-weight: 800;
}

.brand span,
.eyebrow {
  color: var(--muted);
}

.brand span {
  display: block;
  margin-top: 3px;
  color: #b7c4d4;
  font-size: 13px;
}

/* Sidebar navigation list. app.js toggles .active based on the current dashboard. */
.nav-list {
  display: grid;
  gap: 6px;
}

/* Individual dashboard navigation links. These connect to data-view values in index.html. */
.nav-item {
  border: 0;
  border-radius: 7px;
  padding: 12px 14px;
  background: transparent;
  color: #cad4e1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-item:hover,
.nav-item.active {
  background: #20364a;
  color: #fff;
}

/* Right-hand workspace that contains the global topbar and the active dashboard section. */
.workspace {
  min-width: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Global topbar shown above every dashboard. */
.topbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

/* Search box and main action button area. The button label changes per dashboard in app.js. */
.topbar-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar h1,
.panel h2,
.modal h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 30px;
}

.eyebrow {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Global search input. app.js uses this for incident queue filtering and changes placeholder per section. */
.search {
  width: min(380px, 42vw);
  min-width: 240px;
  position: relative;
}

.search span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Shared form field styling for modals, filters, and editable detail popup fields. */
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 10px 11px;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

/*
  Shared button system.
  Used by topbar actions, modal saves/cancels, dashboard toolbar buttons, and popup edit controls.
*/
.primary-button,
.secondary-button,
.ghost-button,
.text-button,
.icon-button {
  min-height: 40px;
  border-radius: 7px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: 700;
  white-space: nowrap;
}

.primary-button {
  background: var(--brand);
  color: #fff;
}

.primary-button:hover {
  background: var(--brand-strong);
}

.secondary-button {
  background: #eef7f9;
  color: var(--brand-strong);
  border-color: #c7e5ed;
}

.ghost-button {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.text-button {
  min-height: 34px;
  padding: 0 8px;
  background: transparent;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.icon-button {
  width: 38px;
  padding: 0;
  background: #f0f3f7;
  color: var(--ink);
}

/*
  Dashboard visibility control.
  Every dashboard section has class .view. app.js adds .active to the selected dashboard only.
*/
.view {
  display: none;
}

.view.active {
  display: block;
}

/* Standard white panel used by dashboard sections, cards, reports, and admin blocks. */
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.panel-heading {
  min-height: 68px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Dashboard overview graph. Populated by renderKpis() in app.js. */
.dashboard-graph-panel {
  margin-bottom: 18px;
}

.graph-heading {
  align-items: end;
}

.graph-select {
  min-width: 240px;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.weekly-filter-row {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.weekly-filter-row .graph-select {
  min-width: 160px;
}

.dashboard-graph {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(180px, 0.26fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.graph-total-card {
  min-height: 180px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbfc, #fff);
  color: var(--ink);
  text-align: left;
  display: grid;
  align-content: center;
  gap: 12px;
}

.graph-total-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.graph-total-card strong {
  font-size: 48px;
}

.graph-bars {
  display: grid;
  gap: 10px;
}

.graph-bar-row {
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: center;
  text-align: left;
}

.graph-total-card:hover,
.graph-total-card:focus-visible,
.graph-bar-row:hover,
.graph-bar-row:focus-visible {
  border-color: #b9dce4;
  background: #f5fbfc;
  outline: none;
}

.graph-label {
  font-weight: 800;
}

.graph-track {
  height: 18px;
  border-radius: 999px;
  background: #edf1f5;
  overflow: hidden;
}

.graph-fill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: var(--brand);
}

.graph-fill.pending,
.graph-fill.pending-approval,
.graph-fill.warning,
.graph-fill.awaiting-cab,
.graph-fill.scheduled {
  background: var(--warn);
}

.graph-fill.resolved,
.graph-fill.fulfilled,
.graph-fill.ordered,
.graph-fill.approved,
.graph-fill.healthy,
.graph-fill.active {
  background: var(--ok);
}

.graph-fill.critical,
.graph-fill.offline,
.graph-fill.degraded {
  background: var(--bad);
}

.software-total-card {
  gap: 10px;
}

.software-total-card small {
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.software-graph-select {
  width: min(420px, 100%);
  margin: 0 auto 6px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.software-graph-select select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.problem-link-problem-block,
.problem-link-search-block {
  margin: 0 18px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f5fbfc;
}

.problem-link-problem-block {
  border-color: #9bd9e6;
  border-left: 6px solid #0b7f95;
  background: #eaf8fb;
}

.problem-link-search-block {
  background: #fff;
}

.problem-link-select,
.problem-link-search {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.problem-link-select select,
.problem-link-search input {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.problem-link-select select {
  min-height: 56px;
  color: #063f4d;
  font-size: 18px;
}

.problem-link-search input {
  background: #fbfdfe;
}

.problem-link-incident-row {
  min-height: 44px;
  padding: 8px 10px;
  gap: 10px;
}

.problem-link-incident-row strong {
  font-size: 14px;
  line-height: 1.2;
}

.problem-link-incident-row small {
  font-size: 10px;
  line-height: 1.25;
}

.problem-link-incident-row .pill {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
}

.software-status-summary {
  display: grid;
  gap: 6px;
}

.software-status-summary button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 9px;
  background: #fff;
  color: var(--ink);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
}

.software-status-summary button:hover,
.software-status-summary button:focus-visible {
  border-color: #b9dce4;
  outline: none;
}

.software-status-summary strong {
  font-size: 13px;
  line-height: 1;
}

.software-status-summary small {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.software-graph-bars {
  display: grid;
  gap: 12px;
  align-content: center;
}

.software-graph-selector-panel {
  min-height: 220px;
  align-content: start;
  padding-top: 8px;
}

.software-graph-row {
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.software-graph-row.is-focused {
  min-height: 64px;
}

.software-graph-stack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
}

.software-graph-bar {
  width: 100%;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  text-align: center;
}

.software-graph-bar.active {
  background: var(--ok);
}

.software-graph-bar.deactive,
.software-graph-bar.inactive {
  background: var(--bad);
}

.software-graph-bar.suspended {
  background: var(--warn);
}

.software-graph-bar.expired {
  background: var(--info);
}

.software-graph-bar:hover,
.software-graph-bar:focus-visible {
  filter: brightness(0.96);
  outline: 2px solid #b9dce4;
  outline-offset: 2px;
}

.weekly-ticket-panel {
  margin-bottom: 18px;
}

.weekly-ticket-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(180px, 0.26fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.weekly-total-ring,
.weekly-status-ring {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--weekly-color) calc(var(--percent) * 1%), #edf1f5 0);
}

.weekly-total-ring {
  width: min(100%, 210px);
  aspect-ratio: 1;
  justify-self: center;
  border: 0;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}

.weekly-status-ring {
  width: 64px;
  aspect-ratio: 1;
}

.weekly-ring-fill {
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  gap: 3px;
}

.weekly-ring-fill span,
.weekly-ring-fill small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.weekly-ring-fill strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.weekly-status-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(78px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.weekly-status-card {
  min-height: 108px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  text-align: center;
  color: var(--ink);
  cursor: pointer;
}

.weekly-total-ring:hover,
.weekly-total-ring:focus-visible,
.weekly-status-card:hover,
.weekly-status-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 111, 128, 0.16);
}

.weekly-status-card span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  margin-bottom: 18px;
}

.technician-ticket-grid,
.sla-summary-grid {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.technician-ticket-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.technician-ticket-card,
.sla-summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.technician-ticket-card {
  padding: 13px;
  display: grid;
  gap: 12px;
}

.technician-select {
  min-width: 220px;
}

.technician-ticket-head,
.sla-summary-card > div:first-child,
.sla-summary-main {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.technician-ticket-head span,
.sla-summary-card span {
  display: grid;
  gap: 3px;
}

.technician-ticket-head strong {
  font-size: 16px;
}

.technician-ticket-head small,
.sla-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.technician-total-button,
.sla-summary-card strong {
  font-size: 26px;
  color: var(--ink);
}

.technician-total-button {
  min-width: 56px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
  font-weight: 900;
  cursor: pointer;
}

.technician-status-stack {
  display: grid;
  gap: 7px;
}

.technician-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.technician-status-row span {
  color: var(--muted);
}

.technician-total-button:hover,
.technician-total-button:focus-visible,
.technician-status-row:hover,
.technician-status-row:focus-visible {
  border-color: var(--brand);
  background: #eef8fa;
  outline: none;
}

.sla-summary-track {
  height: 10px;
  border-radius: 999px;
  background: #edf1f5;
  overflow: hidden;
}

.sla-summary-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.sla-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sla-summary-card {
  min-height: 116px;
  padding: 14px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  border-left: 5px solid var(--sla-color);
}

.sla-summary-main,
.sla-drilldown-row {
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.sla-summary-main {
  width: 100%;
  padding: 0;
}

.sla-drilldown-heading span,
.sla-drilldown-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.sla-drilldown-list {
  max-height: min(60vh, 560px);
  overflow: auto;
  padding: 14px;
  display: grid;
  gap: 8px;
}

.sla-drilldown-heading,
.sla-drilldown-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px;
}

.sla-drilldown-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.sla-drilldown-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.sla-summary-main:hover,
.sla-summary-main:focus-visible,
.sla-drilldown-row:hover,
.sla-drilldown-row:focus-visible {
  outline: none;
  background: #eef8fa;
}

.sla-summary-track i {
  width: var(--sla-width);
  background: var(--sla-color);
}

/*
  Shared two-column dashboard layouts.
  Used by Dashboard overview, Reports, and Admin to keep summary and supporting panels aligned.
*/
.two-column,
.report-layout,
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 18px;
  margin-bottom: 18px;
}

/* Padding wrappers for dashboard content areas populated by app.js. */
.ticket-stack,
.agent-board,
.service-grid,
.record-grid,
.asset-grid,
.knowledge-grid,
.report-grid,
.rule-list,
.matrix {
  padding: 14px;
}

/* Shared card styling used by records across dashboard list/card views. */
.ticket-card,
.agent-card,
.service-card,
.record-card,
.asset-card,
.article-card,
.report-card,
.rule-card,
.matrix-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ticket-card {
  padding: 13px 14px;
}

.ticket-card + .ticket-card,
.agent-card + .agent-card,
.rule-card + .rule-card,
.matrix-row + .matrix-row {
  margin-top: 10px;
}

/* Metadata rows inside ticket cards, detail rows, activity rows, and matrix rows. */
.ticket-meta,
.row-meta,
.detail-meta,
.activity-row,
.matrix-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Status/priority pill base style used across Incidents and all dashboard rows. */
.pill {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: #edf1f5;
  color: #354253;
  font-size: 12px;
  font-weight: 800;
}

/* Pill colour variants for priority, SLA, and status values. */
.pill.critical,
.pill.overdue {
  background: #fde8e8;
  color: var(--bad);
}

.pill.high,
.pill.pending {
  background: #fff0d8;
  color: var(--warn);
}

.pill.medium,
.pill.open,
.pill.assigned,
.pill.in-progress,
.pill.re-open {
  background: #e8efff;
  color: var(--info);
}

.pill.low,
.pill.resolved,
.pill.active {
  background: #e2f6ee;
  color: var(--ok);
}

.pill.deactivated,
.pill.inactive,
.pill.expired,
.pill.pending-deactivation {
  background: #fde8e8;
  color: var(--bad);
}

.pill.suspended {
  background: #fff0d8;
  color: var(--warn);
}

.pill.cancelled,
.pill.closed {
  background: #edf1f5;
  color: #354253;
}

.pill.asset-spare,
.segmented button.asset-status-filter.asset-spare {
  background: #e7f1ff;
  color: #2859a8;
  border-color: #b9cdf4;
}

.pill.asset-in-stock,
.segmented button.asset-status-filter.asset-in-stock {
  background: #e7f7fb;
  color: #0f6f80;
  border-color: #b8e2eb;
}

.pill.asset-issued,
.segmented button.asset-status-filter.asset-issued {
  background: #fff1d8;
  color: #b76b0b;
  border-color: #f2ce8c;
}

.pill.asset-in-repairs,
.segmented button.asset-status-filter.asset-in-repairs {
  background: #fde8e8;
  color: #b42330;
  border-color: #efb4b4;
}

.pill.asset-disposed,
.segmented button.asset-status-filter.asset-disposed {
  background: #edf1f5;
  color: #536273;
  border-color: #cbd5df;
}

.segmented button.asset-status-filter.active,
.segmented button.asset-status-filter:focus-visible {
  box-shadow: inset 0 0 0 2px currentColor;
}

.sla-indicator {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 0 10px;
  background: #e2f6ee;
  color: var(--ok);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.sla-indicator.warning {
  background: #fff0d8;
  color: var(--warn);
}

.sla-indicator.met,
.sla-indicator.ok {
  background: #e2f6ee;
  color: var(--ok);
}

.sla-indicator.breached {
  background: #fde8e8;
  color: var(--bad);
}

/* Card body spacing for technician, service, record, asset, article, report, and rule cards. */
.agent-card,
.service-card,
.record-card,
.asset-card,
.article-card,
.report-card,
.rule-card {
  padding: 14px;
}

/* Technician workload cards on the Dashboard overview. */
.agent-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

/* Capacity/progress bars used in technician workload cards. */
.bar {
  height: 9px;
  border-radius: 999px;
  background: #edf1f5;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: var(--brand);
}

/* Grid containers for dashboard record collections. */
.service-grid,
.record-grid,
.asset-grid,
.knowledge-grid,
.report-grid,
.rule-list,
.matrix {
  display: grid;
  gap: 8px;
}

.knowledge-filter-panel {
  margin-bottom: 14px;
  padding: 14px;
}

.knowledge-filter-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(180px, 1fr));
  gap: 12px;
  padding: 0;
}

.knowledge-filter-controls .ticket-date-control {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--label);
  font-size: 12px;
  font-weight: 700;
}

.knowledge-filter-controls input,
.knowledge-filter-controls select {
  min-height: 40px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 400;
}

.knowledge-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.knowledge-summary-card {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
  color: var(--ink);
  padding: 12px;
  display: grid;
  gap: 4px;
  text-align: left;
}

.knowledge-summary-card:hover,
.knowledge-summary-card:focus-visible {
  outline: none;
  border-color: #9fd3df;
  background: #eef8fa;
}

.knowledge-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.knowledge-summary-card strong {
  font-size: 26px;
}

.knowledge-list {
  display: grid;
  gap: 8px;
}

.knowledge-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 16px;
  align-items: center;
  text-align: left;
}

.knowledge-card p {
  margin: 5px 0 8px;
  color: var(--muted);
}

.knowledge-card-side {
  display: grid;
  gap: 6px;
  justify-items: end;
  color: var(--muted);
  font-size: 13px;
}

/* Reports dashboard table and filter popup. */
.report-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.report-filter-panel {
  margin-bottom: 14px;
  padding: 16px;
}

.monthly-executive-launch {
  margin-bottom: 14px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px 230px;
  gap: 18px;
  align-items: end;
  border-top: 5px solid var(--brand);
}

.monthly-executive-launch h2 {
  margin: 4px 0 6px;
}

.monthly-executive-launch p:last-child {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.45;
}

.monthly-executive-launch label {
  display: grid;
  gap: 7px;
  color: var(--label);
  font-size: 12px;
  font-weight: 900;
}

.monthly-executive-launch input,
.monthly-executive-launch select,
.monthly-executive-launch button {
  min-height: 48px;
}

.monthly-executive-launch input,
.monthly-executive-launch select {
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.monthly-executive-modal {
  width: min(720px, calc(100vw - 28px));
}

.monthly-executive-modal form {
  height: auto;
}

.monthly-executive-modal-body {
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  background: #f5f8fa;
}

.monthly-executive-period {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid #d5e0e8;
  border-radius: 10px;
  background: #fff;
}

.monthly-executive-period {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  border-left: 6px solid var(--brand);
}

.monthly-executive-period strong {
  color: var(--ink);
  font-size: 18px;
}

.monthly-executive-period p {
  max-width: 620px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.monthly-executive-period label {
  display: grid;
  gap: 7px;
  color: var(--label);
  font-size: 12px;
  font-weight: 800;
}

.monthly-executive-period input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #cbd8e5;
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 620px) {
  .monthly-executive-period {
    align-items: stretch;
  }

  .monthly-executive-period {
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .monthly-executive-launch {
    grid-template-columns: 1fr;
  }
}

.report-launch-panel {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.report-select-button {
  min-width: 170px;
  min-height: 48px;
}

.report-dialog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-search-field {
  grid-column: 1 / -1;
}

.report-modal-actions .primary-button {
  min-width: 130px;
}

.report-placeholder {
  min-height: 460px;
  padding: 34px;
  display: grid;
  place-items: center;
}

.report-placeholder[hidden],
.report-table-wrap[hidden] {
  display: none;
}

.report-placeholder-card {
  width: min(560px, 100%);
  padding: 34px;
  border: 1px solid #cbe6ed;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(234, 248, 251, 0.95), rgba(255, 255, 255, 0.98)),
    #fff;
  box-shadow: 0 18px 44px rgba(23, 32, 42, 0.08);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.report-placeholder-icon {
  width: 74px;
  height: 86px;
  border: 2px solid #9bd9e6;
  border-radius: 8px;
  background: #ffffff;
  position: relative;
  box-shadow: inset 0 -18px 0 rgba(234, 248, 251, 0.9);
}

.report-placeholder-icon::before {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 22px;
  height: 22px;
  border-left: 2px solid #9bd9e6;
  border-bottom: 2px solid #9bd9e6;
  border-radius: 0 8px 0 6px;
  background: #eaf8fb;
}

.report-placeholder-icon span,
.report-placeholder-icon span::before,
.report-placeholder-icon span::after {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 6px;
  border-radius: 999px;
  background: #176b87;
}

.report-placeholder-icon span {
  top: 34px;
}

.report-placeholder-icon span::before,
.report-placeholder-icon span::after {
  content: "";
  left: 0;
  right: 0;
}

.report-placeholder-icon span::before {
  top: 15px;
  background: #cf5c36;
}

.report-placeholder-icon span::after {
  top: 30px;
  background: #168a5b;
}

.report-placeholder-card h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
}

.report-placeholder-card p:not(.eyebrow) {
  max-width: 440px;
  margin: 0 0 6px;
  color: var(--muted);
  line-height: 1.5;
}

.report-workbench .report-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: 4px;
}

.report-table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-table-wrap {
  margin: 0 14px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: #fff;
}

.report-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  font-size: 13px;
}

.report-table th,
.report-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.report-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-table tr:hover td {
  background: #f5fbfc;
}

.report-link {
  border: 0;
  background: #eaf7fa;
  color: #07516a;
  border-radius: 999px;
  padding: 5px 9px;
  font-weight: 900;
  cursor: pointer;
}

.report-link:hover,
.report-link:focus-visible {
  outline: none;
  background: #d6eef4;
}

.admin-access-panel {
  overflow: hidden;
}

.admin-config-section {
  margin: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.admin-config-form {
  padding: 14px;
}

.admin-config-form textarea {
  min-height: 110px;
  padding-top: 12px;
  resize: vertical;
}

.catalog-admin-toolbar {
  padding: 14px;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid var(--line);
  background: #f8fbfc;
}

.catalog-admin-toolbar label {
  display: grid;
  gap: 7px;
  min-width: 260px;
  color: var(--label);
  font-size: 13px;
  font-weight: 800;
}

.catalog-admin-toolbar select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  font-weight: 800;
  background: #fff;
}

.admin-access-intro {
  margin: 14px;
  padding: 14px;
  border: 1px solid #c7e5ed;
  border-radius: 8px;
  background: #f3fbfd;
}

.admin-access-intro p {
  margin: 5px 0 0;
  color: var(--muted);
}

.access-module-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

.admin-config-shell {
  padding: 0 14px 14px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
}

.admin-config-nav {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-self: start;
}

.admin-config-module {
  padding: 10px;
  border-radius: 8px;
  background: #f3fbfd;
  border: 1px solid #c7e5ed;
}

.admin-config-module strong,
.admin-config-module span {
  display: block;
}

.admin-config-module span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.admin-config-nav-item {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  padding: 0 10px;
  text-align: left;
  font-weight: 850;
}

.admin-config-nav-item:hover,
.admin-config-nav-item.active {
  border-color: #b9dce4;
  background: #eef8fa;
  color: #07516a;
}

.admin-config-workspace {
  min-width: 0;
}

.incident-config-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.incident-config-card .section-mini-heading {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fbfc;
}

.config-table-wrap {
  overflow: auto;
}

.config-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.config-table th,
.config-table td {
  padding: 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.config-table th {
  background: #f7fbfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.config-table input:not([type="checkbox"]),
.config-table select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 9px;
  font-weight: 800;
}

.field-layout-table {
  min-width: 560px;
}

.field-layout-table th:first-child,
.field-layout-table td:first-child {
  width: 96px;
}

.field-layout-table th:last-child,
.field-layout-table td:last-child {
  width: 180px;
}

.field-layout-actions {
  display: flex;
  gap: 8px;
}

.field-layout-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 28px;
  border-radius: 999px;
  background: #eaf7fb;
  color: #07516a;
  font-weight: 900;
}

.config-add-field {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(220px, 1.2fr) minmax(160px, 0.8fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-config-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.config-inline-add {
  margin: 14px;
}

.config-add-field label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.compact-button {
  min-height: 34px;
  padding: 0 10px;
}

.admin-header-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-role-counts {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 5px;
}

.admin-role-count {
  min-width: 62px;
  padding: 7px 8px;
  border: 1px solid #d6e3ea;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  color: var(--brand-strong);
  background: #f3f9fb;
}

.admin-role-count small {
  color: var(--label);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-role-count strong {
  font-size: 16px;
  line-height: 1;
}

.admin-user-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(360px, 1.2fr);
  gap: 14px;
  padding: 14px;
}

.admin-user-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-user-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-user-form label:nth-child(3),
.admin-user-form .checkbox-row,
.admin-user-form button {
  grid-column: 1 / -1;
}

.checkbox-row {
  display: flex !important;
  grid-template-columns: auto 1fr;
  flex-direction: row;
  align-items: center;
  gap: 10px !important;
  color: var(--ink) !important;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
}

.admin-user-grid {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.admin-user-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.admin-user-row p {
  margin-top: 3px;
  color: var(--muted);
}

.admin-user-table-wrap {
  margin: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: #fff;
}

.admin-user-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.admin-user-table th,
.admin-user-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.admin-user-table th {
  background: #f7fafc;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-user-table tr:last-child td {
  border-bottom: 0;
}

.admin-user-table tr:hover td {
  background: #f6fbfc;
}

.admin-user-table strong,
.admin-user-subtext {
  display: block;
}

.admin-user-subtext {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.admin-user-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-table-action {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.admin-table-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 1120px) {
  .admin-header-actions {
    width: 100%;
    margin-left: 0;
    align-items: stretch;
    flex-direction: column;
  }

  .admin-role-counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .admin-role-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inactive-pill {
  background: #eef2f6;
  color: #53637a;
}

.user-admin-modal {
  width: min(620px, calc(100vw - 28px));
}

.admin-dialog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.password-field-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.password-field-group[hidden] {
  display: none;
}

.user-reset-summary {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafc;
  font-weight: 800;
}

.readonly-field {
  background: #f3f6f8;
  color: var(--muted);
}

.success-pill {
  background: #dcf7eb;
  color: var(--ok);
}

.danger-pill {
  background: #fde8e8;
  color: var(--bad);
}

/*
  Generic list row pattern.
  Used for dashboard records where the user clicks a row to open the shared detail popup.
*/
.list-row {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, auto) minmax(180px, auto);
  gap: 12px;
  align-items: center;
}

.list-row:hover,
.list-row:focus-visible {
  background: #f5fbfc;
  border-color: #b9dce4;
  outline: none;
}

.list-row strong {
  margin-bottom: 4px;
}

.list-row p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.list-summary {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

/* Queue/detail layout originally used by the incident workflow and kept for reusable panel layouts. */
.queue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.75fr);
  gap: 18px;
  align-items: start;
}

/*
  Dashboard toolbar layout.
  Used by all list dashboards for heading + status filters only.
*/
.toolbar {
  display: block;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.view-toolbar {
  display: block;
}

.software-dashboard-filter-row label {
  min-width: 230px;
}

.software-status-select {
  font-weight: 800;
}

.software-status-select.software-status-active {
  background: #e2f6ee;
  color: var(--ok);
  border-color: #b7e6d2;
}

.software-status-select.software-status-inactive,
.software-status-select.software-status-expired {
  background: #fde8e8;
  color: var(--bad);
  border-color: #f3c4c4;
}

.software-status-select.software-status-suspended {
  background: #fff0d8;
  color: var(--warn);
  border-color: #f4d39a;
}

.ticket-filter-panel {
  margin-bottom: 12px;
}

.ticket-filter-strip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px;
  background: #fff;
  --filter-label-padding: 9px;
  --filter-label-row: 18px;
  --filter-label-gap: 6px;
  --filter-field-height: 50px;
}

.ticket-filter-strip label {
  width: 214px;
  min-width: 188px;
  display: grid;
  grid-template-rows: var(--filter-label-row) var(--filter-field-height);
  align-content: start;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.ticket-filter-strip .secondary-button {
  align-self: flex-start;
  width: 228px;
  height: var(--filter-field-height);
  min-height: var(--filter-field-height);
  margin-top: calc(var(--filter-label-padding) + var(--filter-label-row) + var(--filter-label-gap));
  padding: 0 18px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ticket-filter-strip input[type="date"] {
  height: var(--filter-field-height);
  min-height: var(--filter-field-height);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 850;
  color: var(--ink);
  background: #fff;
}

.ticket-filter-strip input,
.ticket-filter-strip select {
  height: var(--filter-field-height);
}

.procurement-cost-overview {
  align-self: flex-start;
  min-width: 260px;
  margin-top: calc(var(--filter-label-padding) + var(--filter-label-row) + var(--filter-label-gap));
  margin-left: auto;
  min-height: var(--filter-field-height);
  padding: 9px 18px;
  border: 1px solid #a9d8c5;
  border-left: 6px solid #16845b;
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 18px;
  background: #eef9f4;
  color: #116444;
  box-shadow: 0 7px 18px rgba(22, 132, 91, 0.1);
}

.procurement-cost-overview span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.procurement-cost-overview strong {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: 25px;
  line-height: 1;
  white-space: nowrap;
}

.procurement-cost-overview small {
  color: #507565;
  font-size: 11px;
  font-weight: 700;
}

.queue-heading h2 {
  margin: 0;
  font-size: 18px;
}

/* Segmented status buttons such as All, Open, Pending, Resolved, Closed. */
.segmented {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  padding-bottom: 4px;
}

.segmented button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

.segmented button.active {
  border-color: var(--brand);
  background: #eaf6f8;
  color: var(--brand-strong);
}

.status-filter-control {
  display: grid;
  grid-template-columns: minmax(96px, auto);
  gap: 4px;
  align-items: stretch;
  flex: 0 0 auto;
}

.status-filter-control button {
  width: 100%;
}

.status-filter-control.active button,
.status-filter-control:focus-within button {
  border-color: var(--brand);
  background: #eaf6f8;
  color: var(--brand-strong);
}

.segmented button.software-status-filter {
  border-color: #d4e0e7;
}

.segmented button.software-status-active {
  background: #e2f6ee;
  color: var(--ok);
  border-color: #b7e6d2;
}

.segmented button.software-status-inactive,
.segmented button.software-status-expired {
  background: #fde8e8;
  color: var(--bad);
  border-color: #f3c4c4;
}

.segmented button.software-status-suspended {
  background: #fff0d8;
  color: var(--warn);
  border-color: #f4d39a;
}

.segmented button.software-status-filter.active,
.segmented button.software-status-filter:focus-visible {
  box-shadow: inset 0 0 0 2px currentColor;
}

.status-filter-control select {
  min-height: 34px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
}

/* Incident dashboard table/list wrapper. Populated by renderIncidents() in app.js. */
.ticket-table {
  display: grid;
}

/*
  Standard clickable ticket/list row.
  Used by Incidents and reused by other dashboards for consistent list-view UX.
*/
.ticket-row {
  width: 100%;
  min-height: 70px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(180px, auto);
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.record-card.ticket-row,
.asset-card.ticket-row,
.article-card.ticket-row,
.report-card.ticket-row,
.rule-card.ticket-row {
  padding: 13px 14px;
}

.matrix-row.ticket-row {
  padding: 13px 14px;
  margin-bottom: 8px;
}

.ticket-row:hover,
.ticket-row.active {
  background: #f5fbfc;
  border-color: #b9dce4;
}

.software-ticket {
  border-left: 6px solid var(--brand);
}

.incident-ticket.warning {
  border-left: 6px solid var(--warn);
}

.incident-ticket.breached {
  border-left: 6px solid var(--bad);
}

.task-run-card.breached {
  border-left: 6px solid var(--bad);
  background: #fff7f7;
}

.task-run-card.warning {
  border-left: 6px solid var(--warn);
  background: #fffaf1;
}

.ticket-row strong,
.ticket-card strong,
.record-card strong,
.asset-card strong,
.article-card strong {
  display: block;
  margin-bottom: 5px;
}

.ticket-row p,
.ticket-card p,
.record-card p,
.asset-card p,
.article-card p,
.report-card p,
.empty-state p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

/* Legacy detail side panel styling retained for incident-detail style layouts. */
.detail-panel {
  position: sticky;
  top: 20px;
  overflow: hidden;
}

.detail-body {
  padding: 18px;
  display: grid;
  gap: 16px;
}

.detail-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.detail-title h2 {
  font-size: 20px;
}

.detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Activity/audit list container shown in the Incident detail popup. */
.activity-list {
  display: grid;
  gap: 10px;
}

/* Grey activity row blocks. These show timestamp, audit type, actor, and activity text. */
.activity-row {
  padding: 10px;
  border-radius: 7px;
  background: var(--soft);
  align-items: flex-start;
}

.activity-row time {
  color: var(--muted);
  font-size: 12px;
}

/* Left-side metadata inside activity rows: date/time, audit type, and actor name. */
.audit-meta {
  display: grid;
  gap: 4px;
  align-content: start;
  color: var(--muted);
  font-size: 12px;
}

.audit-meta span {
  font-weight: 800;
  color: var(--ink);
}

.audit-meta strong {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Empty dashboard state when filters return no matching records. */
.empty-state {
  min-height: 280px;
  padding: 28px;
  display: grid;
  place-content: center;
  text-align: center;
}

/* Reports dashboard trend chart. app.js creates .chart-column and .chart-bar elements here. */
.chart {
  min-height: 300px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(7, minmax(26px, 1fr));
  align-items: end;
  gap: 12px;
}

.chart-column {
  display: grid;
  align-items: end;
  gap: 8px;
  min-height: 240px;
}

.chart-bar {
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #2b9ab3, #176b87);
}

.chart-column span {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Base dialog/modal styling for New Incident, shared service records, and detail popups. */
.modal {
  width: min(760px, calc(100vw - 28px));
  height: auto;
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
}

#incidentModal,
#changeModal,
#assetModal,
#serviceModal,
#knowledgeModal,
#problemLinkModal {
  width: min(760px, calc(100vw - 28px));
}

.modal::backdrop {
  background: rgba(18, 34, 50, 0.5);
}

.modal form {
  margin: 0;
  height: min(820px, calc(100vh - 28px));
  height: min(820px, calc(100dvh - 28px));
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.modal-heading,
.modal-actions {
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #f7fcfe 0%, #ffffff 100%);
  position: sticky;
  top: 0;
  z-index: 20;
  flex: 0 0 auto;
  pointer-events: auto;
}

.modal-heading {
  border-left: 6px solid var(--brand);
}

#changeModal .modal-heading,
#problemLinkModal .modal-heading {
  border-left-color: var(--accent);
}

#serviceModal.procurement-modal .modal-heading {
  border-left-color: var(--warn);
}

#assetModal .modal-heading {
  border-left-color: var(--ok);
}

#knowledgeModal .modal-heading {
  border-left-color: var(--info);
}

.modal-heading h2 {
  margin: 2px 0 0;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: 0;
}

.modal-actions {
  bottom: 0;
  top: auto;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
  background: #fbfdfe;
  flex: 0 0 auto;
}

#problemLinkModal {
  height: min(820px, calc(100vh - 28px));
  height: min(820px, calc(100dvh - 28px));
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  flex-direction: column;
}

#problemLinkModal[open] {
  display: flex;
}

#problemLinkModal .sla-drilldown-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 14px 18px;
}

.warning-popup-modal {
  width: min(460px, calc(100vw - 28px));
}

.warning-popup-heading {
  border-left: 6px solid #c0362c;
  background: #fff5f4;
}

.warning-popup-body {
  padding: 18px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.5;
}

/* Two-column modal form grid used by the Incident and shared service creation popups. */
.form-grid {
  padding: 18px 20px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  overflow-y: auto;
  min-height: 0;
  align-content: start;
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(239, 248, 250, 0.72) 0, rgba(255, 255, 255, 0) 72px),
    #fff;
}

.form-grid label {
  display: grid;
  gap: 8px;
  color: var(--label);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  min-width: 0;
  padding: 11px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.form-grid label.locked-create-status {
  background: #f1f4f8;
  border-color: #d1dae6;
}

.form-grid label.locked-create-status select {
  background: #edf1f5;
  color: #5d6b7c;
  cursor: not-allowed;
}

.form-grid label.locked-create-status::after {
  content: "Auto-set by business rule";
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.form-grid .modal-summary-field {
  padding: 11px;
  border-color: #e1e7ef;
  background: rgba(255, 255, 255, 0.92);
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  min-height: 44px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 750;
  background: #fff;
}

.form-grid label:focus-within {
  border-color: #9bd9e6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 107, 135, 0.12);
}

.form-grid .modal-summary-field:focus-within {
  border-color: #9bd9e6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 107, 135, 0.12);
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--brand);
  outline: none;
}

.form-grid textarea {
  min-height: 104px;
  padding-top: 11px;
  line-height: 1.45;
}

.modal-summary-field textarea {
  min-height: 66px;
}

.modal-field-actions {
  margin-top: 2px;
}

.modal-field-actions .add-control {
  min-width: 64px;
  justify-self: end;
  background: #fff;
  color: var(--ink);
}

.form-grid [data-modal-locked-field="true"][readonly],
.form-grid [data-modal-locked-field="true"]:disabled {
  background: #f4f6f9;
  color: #64748b;
  cursor: not-allowed;
}

.form-grid label:not(.is-editing) .modal-field-actions .cancel-control,
.form-grid label:not(.is-editing) .modal-field-actions .save-control {
  display: none;
}

.form-grid label.is-editing .modal-field-actions .edit-control {
  display: none;
}

.procurement-modal {
  width: min(760px, calc(100vw - 28px));
}

.procurement-modal form {
  height: min(820px, calc(100vh - 28px));
  height: min(820px, calc(100dvh - 28px));
}

.procurement-modal .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asset-stock-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 10px;
}

.asset-summary-card {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  display: grid;
  gap: 4px;
  text-align: left;
}

.asset-summary-card:hover,
.asset-summary-card:focus-visible {
  border-color: var(--brand);
  background: #eef8fa;
  outline: none;
}

.asset-summary-card span,
.asset-summary-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.asset-summary-card strong {
  margin: 0;
  font-size: 28px;
}

.stock-asset-card {
  align-items: center;
}

.stock-asset-card.asset-spare {
  border-left: 6px solid #4b7bd8;
}

.stock-asset-card.asset-in-stock {
  border-left: 6px solid #0f879d;
}

.stock-asset-card.asset-issued {
  border-left: 6px solid #d98a16;
}

.stock-asset-card.asset-in-repairs {
  border-left: 6px solid #c93434;
}

.stock-asset-card.asset-disposed {
  border-left: 6px solid #7a8796;
  background: #f7f9fb;
}

.task-filter-strip {
  align-items: end;
}

.task-site-tabs-panel {
  border-bottom: 1px solid var(--line);
}

.task-site-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
  padding: 14px;
  background: #fff;
}

.task-site-tabs button {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 850;
}

.task-site-tabs button:hover,
.task-site-tabs button.active {
  border-color: var(--brand);
  background: #eaf6f8;
  color: var(--brand-strong);
}

.task-site-tabs strong {
  min-width: 34px;
  min-height: 28px;
  border-radius: 999px;
  background: #dff2f7;
  color: var(--brand-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.tasks-grid {
  display: grid;
  gap: 12px;
  padding: 14px;
}

#tasksView .view-toolbar {
  padding: 12px 14px;
}

#tasksView .segmented {
  gap: 7px;
}

#tasksView .segmented button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.task-summary-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(108px, 1fr));
  gap: 9px;
}

.task-summary-card {
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--ink);
  display: grid;
  gap: 4px;
  text-align: left;
}

.task-summary-card:hover,
.task-summary-card:focus-visible {
  border-color: var(--brand);
  background: #eef8fa;
  outline: none;
}

.task-summary-card.warning {
  border-color: #f0c46a;
  background: #fff9ea;
}

.task-summary-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.task-summary-card strong {
  font-size: 22px;
}

.task-dashboard-columns {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 14px;
}

.task-dashboard-columns.single {
  grid-template-columns: 1fr;
}

.task-list-panel {
  display: grid;
  gap: 12px;
}

.section-mini-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-mini-heading strong {
  font-size: 18px;
}

.task-run-list {
  display: grid;
  gap: 10px;
}

.task-run-card {
  align-items: center;
}

.downtime-card {
  border-left-color: #d44b4b;
}

.outage-summary-strip,
.outage-list {
  grid-column: 1 / -1;
}

.full-width {
  grid-column: 1 / -1;
}

/* Shared record detail popup width. Used when clicking tickets/cards on any dashboard. */
.detail-modal {
  width: min(840px, calc(100vw - 28px));
  height: min(820px, calc(100vh - 28px));
  height: min(820px, calc(100dvh - 28px));
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.detail-modal[open] {
  display: flex;
}

.detail-modal > .modal-heading,
.detail-modal > .modal-actions {
  position: relative;
  z-index: 10000;
}

.detail-modal > .modal-heading button,
.detail-modal > .modal-actions button {
  position: relative;
  z-index: 10001;
  pointer-events: auto;
}

.sla-drilldown-modal {
  width: min(920px, calc(100vw - 28px));
}

.detail-modal-body {
  padding: 18px;
  display: grid;
  gap: 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  position: relative;
  z-index: 1;
}

.detail-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.detail-tab {
  min-height: 42px;
  min-width: 132px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 0 16px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.detail-tab.active {
  border-color: var(--brand);
  background: #eaf6f8;
  color: var(--brand-strong);
}

.detail-tab-panel {
  display: none;
  gap: 16px;
  width: 100%;
  min-height: min(560px, calc(100vh - 230px));
  align-content: start;
}

.detail-tab-panel.active {
  display: grid;
}

.procurement-checklist {
  display: grid;
  gap: 10px;
}

.procurement-line-items {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfc;
}

.procurement-line-items.is-editable {
  border-color: #a9d7e1;
  background: #f3fbfd;
}

.procurement-line-items-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.procurement-line-items-heading strong {
  display: block;
  font-size: 16px;
  color: var(--ink);
}

.procurement-line-items-heading span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.procurement-line-item-list {
  display: grid;
  gap: 10px;
}

.procurement-line-item-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(76px, 0.5fr) 42px;
  gap: 8px;
  align-items: end;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.procurement-line-item-row label {
  display: grid;
  gap: 6px;
  color: var(--label);
  font-size: 12px;
  font-weight: 800;
}

.procurement-line-item-row input:disabled,
.procurement-line-items.is-locked .remove-line-item-button:disabled,
.procurement-line-items.is-locked [data-add-procurement-line-item]:disabled {
  background: #eef2f6;
  color: #718096;
  cursor: not-allowed;
}

.remove-line-item-button {
  height: 40px;
  align-self: end;
}

.checklist-row {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.checklist-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.detail-description {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Read-only summary fields at the top of the detail popup. */
.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.detail-info {
  min-height: 72px;
  padding: 12px;
  border-radius: 7px;
  background: var(--soft);
}

.detail-info span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.detail-info strong {
  overflow-wrap: anywhere;
}

.sla-detail {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--ok);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sla-detail.warning {
  border-left-color: var(--warn);
}

.sla-detail.breached {
  border-left-color: var(--bad);
}

.sla-tab-content,
.documents-panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.document-upload {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.document-upload input {
  min-height: auto;
  padding: 10px;
}

.document-list {
  display: grid;
  gap: 8px;
}

.document-row {
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.document-row strong {
  display: block;
  margin-bottom: 4px;
}

.document-row p {
  margin: 0;
  color: var(--muted);
}

.ticket-reference-line {
  display: block;
  width: fit-content;
  margin-bottom: 5px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.software-card-fields {
  display: grid;
  gap: 4px;
  margin: 6px 0;
  color: var(--muted);
  font-size: 13px;
}

.software-card-fields strong {
  display: inline;
  margin: 0;
  color: var(--label);
  font-size: 13px;
  font-weight: 700;
}

.software-ticket .row-meta {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.software-card-side-fields {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.software-card-side-fields span {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.software-card-side-fields strong {
  color: var(--label);
  font-size: 13px;
  font-weight: 700;
}

.ticket-assignment-meta {
  justify-self: end;
  display: grid;
  gap: 5px;
  min-width: 230px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
  color: var(--muted);
  font-size: 13px;
}

.ticket-assignment-meta span {
  display: block;
}

.ticket-assignment-meta strong {
  display: inline;
  margin: 0;
  color: var(--label);
  font-size: 13px;
  font-weight: 700;
}

.ticket-assignment-meta .sla-indicator {
  justify-self: start;
  margin-top: 2px;
}

.ticket-assignment-meta .sla-indicator strong {
  display: inline;
  margin-left: 2px;
}

.sla-detail span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

/* Incident reference and wide editable fields inside the Incident detail popup. */
.reference-field,
.detail-edit-field.wide {
  width: 100%;
}

.reference-field {
  display: grid;
  gap: 7px;
}

.reference-field > p {
  margin: 0;
  color: var(--label);
  font-size: 12px;
  font-weight: 700;
}

/* Non-editable reference number box. Reference IDs stay locked by design. */
.reference-lock {
  min-height: 66px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  display: flex;
  align-items: center;
}

/* Summary display block inside the Incident detail popup. */
.detail-summary-block {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.detail-summary-block strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

/* Label + input/select/textarea wrapper for editable detail popup fields. */
.detail-edit-field {
  display: grid;
  gap: 7px;
  color: var(--label);
  font-size: 12px;
  font-weight: 700;
}

.reference-lock strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

.reference-lock p {
  margin: 0;
  color: var(--muted);
}

.detail-edit-field.wide {
  grid-column: 1 / -1;
}

.detail-edit-field.compact textarea {
  min-height: 66px;
  resize: none;
}

/*
  Locked/finalized field appearance.
  Used when summary/description are not in edit mode or when an incident is resolved/cancelled/closed.
*/
.detail-edit-field textarea[readonly],
.detail-edit-field input[readonly],
.detail-edit-field.finalized select {
  background: #f6f8fa;
  color: var(--muted);
  cursor: default;
}

.detail-edit-field.finalized select {
  opacity: 1;
}

.readonly-link-list {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #f6f8fa;
  display: grid;
  gap: 6px;
}

.readonly-link-list span {
  color: var(--muted);
  font-weight: 800;
}

.readonly-ref-link {
  width: fit-content;
  border: 1px solid #cbd8e3;
  border-radius: 999px;
  padding: 5px 10px;
  background: #fff;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 900;
}

.detail-edit-field textarea[readonly]:hover,
.detail-edit-field textarea[readonly]:focus,
.detail-edit-field textarea[readonly]:focus-visible {
  border-color: var(--line);
  box-shadow: none;
  outline: none;
}

/* Active edit state after the user clicks the edit/add control. */
.detail-edit-field textarea.editing,
.detail-edit-field input.editing {
  background: #fff;
  color: var(--ink);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 124, 155, 0.14);
  cursor: text;
}

/* Edit/cancel/save controls beside Summary, Description, Comments, and Resolution blocks. */
.field-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Small icon-style buttons used for popup edit, cancel, and save controls. */
.icon-mini-button {
  min-width: 38px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  line-height: 1;
}

.icon-mini-button:hover {
  border-color: var(--brand);
  background: #eef8fa;
}

.add-control {
  min-width: 52px;
}

.save-control {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-size: 18px;
}

.cancel-control {
  color: var(--bad);
  font-size: 18px;
}

.detail-edit-field:not(.is-editing) .cancel-control,
.detail-edit-field:not(.is-editing) .save-control {
  display: none;
}

.detail-edit-field.is-editing .edit-control {
  display: none;
}

/* Full-width activity area inside the detail popup. */
.detail-activity-block {
  width: 100%;
}

/* Two-column activity row layout: left metadata, right grey audit text block. */
.edit-activity-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  width: 100%;
}

.edit-activity-row .audit-text {
  width: 100%;
  min-height: 52px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f6f8fa;
  color: var(--muted);
  line-height: 1.4;
}

/* Resolution display styling shown when a ticket has closure/resolution information. */
.resolution-block {
  padding: 14px;
  border: 1px solid #c7e5ed;
  border-radius: 8px;
  background: #f3fbfd;
}

.resolution-block p:last-child {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}

/* Bottom-right toast notification shown after saves and workflow actions. */
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(440px, calc(100vw - 36px));
  padding: 12px 14px;
  border-radius: 8px;
  background: #122232;
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: 160ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/*
  Tablet layout.
  Stacks sidebar/workspace and converts multi-column dashboard layouts to one column.
*/
@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    padding: 14px;
  }

  .nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .two-column,
  .queue-layout,
  .report-layout,
  .admin-grid,
  .dashboard-insight-grid,
  .dashboard-graph,
  .weekly-ticket-grid {
    grid-template-columns: 1fr;
  }

  .detail-panel {
    position: static;
  }
}

/*
  Mobile layout.
  Makes dashboard grids, toolbars, forms, list rows, and activity rows single-column
  so text does not overlap on narrow screens.
*/
@media (max-width: 780px) {
  .workspace {
    padding: 14px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .search {
    width: 100%;
    min-width: 0;
  }

  .topbar-actions > * {
    flex: 1 1 160px;
  }

  .service-grid,
  .record-grid,
  .asset-grid,
  .knowledge-grid,
  .report-grid,
  .technician-ticket-grid,
  .sla-summary-grid {
    grid-template-columns: 1fr;
  }

  .report-filter-controls,
  .report-filter-panel,
  .report-workbench .report-grid,
  .admin-access-grid,
  .admin-config-shell,
  .config-add-field {
    grid-template-columns: 1fr;
  }

  .report-search-control input {
    min-width: 0;
  }

  .asset-stock-summary {
    grid-template-columns: 1fr;
  }

  .task-summary-strip,
  .task-dashboard-columns,
  .task-site-tabs {
    grid-template-columns: 1fr;
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar,
  .form-grid,
  .admin-dialog-grid,
  .password-field-group,
  .detail-info-grid,
  .list-row,
  .ticket-row,
  .edit-activity-row,
  .graph-bar-row {
    grid-template-columns: 1fr;
  }

  .ticket-assignment-meta {
    justify-self: stretch;
    min-width: 0;
  }

  .graph-select {
    min-width: 0;
  }

  .weekly-filter-row {
    justify-content: stretch;
  }

  .weekly-filter-row .graph-select {
    flex: 1 1 180px;
  }

  .ticket-filter-strip label,
  .ticket-filter-strip .secondary-button {
    flex: 1 1 160px;
  }

  .procurement-cost-overview {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .technician-status-row {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  /*
    Dashboard section grid styles.
    These are retained for dashboard summary blocks if you add them back later.
  */
  .dashboard-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

/*
  Keep the full desktop navigation on standard call-centre screens.
  The previous tablet rule moved the sidebar above the dashboard at 1120px,
  which made 1024x768 workstations look different from the Admin layout.
*/
@media (min-width: 781px) and (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 16px 14px;
  }

  .nav-list {
    grid-template-columns: 1fr;
  }
}

.dashboard-box {
  min-height: 210px;
}

.dashboard-list p {
  margin: 10px 0;
  color: #52627a;
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .dashboard-section-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .dashboard-section-grid {
    grid-template-columns: 1fr;
  }
}
}

/*
  Compact operations layout.
  This final override pass reduces visual bulk across every dashboard while keeping
  the existing module structure intact. It also makes form values normal-weight so
  editable fields feel lighter and easier to scan.
*/
body {
  font-size: 14px;
}

.app-shell {
  grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
  padding: 16px 14px;
  gap: 18px;
}

.brand {
  min-height: 46px;
}

.brand-mark {
  width: 38px;
  height: 38px;
}

.brand h2 {
  font-size: 18px;
}

.nav-item {
  padding: 9px 11px;
  font-size: 13px;
}

.workspace {
  padding: 18px;
  gap: 16px;
}

.topbar {
  gap: 14px;
}

.topbar h1 {
  font-size: 26px;
}

.search {
  width: min(360px, 40vw);
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 13px;
}

.panel,
.dashboard-graph,
.report-filter-panel,
.admin-card,
.asset-stock-summary,
.task-summary-card,
.config-card {
  border-radius: 7px;
}

.toolbar,
.queue-toolbar,
.report-toolbar,
.admin-toolbar,
.task-toolbar,
.asset-toolbar,
.knowledge-toolbar {
  padding: 10px 12px;
  gap: 10px;
}

.segmented {
  gap: 6px;
}

.segmented button {
  min-height: 38px;
  padding: 0 10px;
  font-size: 12px;
}

.ticket-row,
.record-card.ticket-row,
.asset-card.ticket-row,
.article-card.ticket-row,
.report-card.ticket-row,
.rule-card.ticket-row,
.matrix-row.ticket-row {
  min-height: 58px;
  padding: 10px 12px;
  gap: 10px;
  margin-bottom: 6px;
}

.ticket-row strong,
.ticket-card strong,
.record-card strong,
.asset-card strong,
.article-card strong,
.report-card strong,
.rule-card strong {
  margin-bottom: 3px;
  font-size: 14px;
}

.ticket-row p,
.ticket-card p,
.record-card p,
.asset-card p,
.article-card p,
.report-card p,
.empty-state p {
  font-size: 13px;
  line-height: 1.35;
}

.pill,
.status-pill,
.sla-indicator,
.asset-stock-pill {
  min-height: 22px;
  padding: 3px 8px;
  font-size: 11px;
}

.modal {
  border-radius: 8px;
}

.modal-heading,
.detail-modal > .modal-heading {
  padding: 14px 18px;
}

.modal-heading h2,
.detail-modal .modal-heading h2 {
  font-size: 22px;
}

.form-grid {
  padding: 14px 16px 16px;
  gap: 11px;
}

.form-grid label,
.detail-edit-field,
.login-form label,
.config-form label,
.report-filter-panel label,
.ticket-filter-strip label,
.admin-config-workspace label {
  gap: 6px;
  padding: 9px;
  color: var(--label);
  font-size: 12px;
  font-weight: 700 !important;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.detail-edit-field input,
.detail-edit-field select,
.detail-edit-field textarea,
.ticket-date-control input[type="date"],
.graph-select,
.problem-link-select,
.software-status-select,
.document-upload,
.config-table input,
.config-table select,
.config-table textarea,
.report-filter-panel input,
.report-filter-panel select,
.report-filter-panel textarea {
  font-size: 13px;
  font-weight: 400 !important;
}

.form-grid input,
.form-grid select,
.detail-edit-field input,
.detail-edit-field select,
.report-filter-panel input,
.report-filter-panel select {
  min-height: 40px;
  padding: 8px 10px;
}

.form-grid textarea,
.detail-edit-field textarea {
  min-height: 88px;
  padding: 9px 10px;
  line-height: 1.4;
}

.modal-summary-field textarea {
  min-height: 66px;
}

.detail-modal-body,
.detail-body,
.detail-content {
  padding: 14px;
  gap: 12px;
}

.reference-lock {
  min-height: 56px;
  padding: 11px 12px;
}

.reference-lock strong,
.detail-summary-block strong {
  font-size: 16px;
}

.detail-summary-block {
  padding: 11px 12px;
}

.detail-tab,
.detail-tabs button {
  min-height: 34px;
  min-width: 104px;
  padding: 0 12px;
  font-size: 13px;
}

.detail-info-grid,
.sla-summary-grid,
.service-grid,
.record-grid,
.asset-grid,
.knowledge-grid,
.report-grid,
.technician-ticket-grid,
.task-dashboard-columns {
  gap: 10px;
}

.detail-info,
.sla-summary-card,
.service-card,
.asset-card,
.record-card,
.article-card,
.report-card,
.task-card {
  padding: 12px;
  border-radius: 7px;
}

.report-table th,
.report-table td {
  padding: 9px 10px;
  font-size: 12px;
}

.graph-bar-row {
  min-height: 42px;
  padding: 8px 10px;
}

/* Compact responsive safeguards kept after the override layer so small screens still collapse cleanly. */
@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    padding: 14px;
  }

  .nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

@media (max-width: 780px) {
  .workspace {
    padding: 12px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .search {
    width: 100%;
    min-width: 0;
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar,
  .form-grid,
  .detail-info-grid,
  .list-row,
  .ticket-row,
  .edit-activity-row,
  .graph-bar-row {
    grid-template-columns: 1fr;
  }
}

/*
  Operations command-centre dashboard.
  This is the main Dashboard redesign inspired by the compact service desk mockup:
  KPI cards at the top, two management charts, and a clickable priority/workload area.
*/
.operations-dashboard {
  display: none;
}

.operations-dashboard.active {
  display: grid;
  gap: 16px;
}

.dashboard-command-panel {
  overflow: hidden;
}

.dashboard-command-header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  align-items: end;
  justify-content: space-between;
}

.dashboard-command-header h2 {
  margin: 0;
  font-size: 25px;
}

.dashboard-command-copy {
  margin: 5px 0 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.dashboard-command-filters {
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dashboard-command-filters label {
  min-width: 150px;
  display: grid;
  gap: 6px;
  color: var(--label);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-command-filters label:first-child {
  min-width: 230px;
}

.operations-kpi-grid {
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.operations-kpi-card {
  min-height: 126px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 15px;
  color: var(--ink);
  display: grid;
  align-content: space-between;
  gap: 10px;
  text-align: left;
}

.operations-kpi-card:hover,
.operations-kpi-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(23, 107, 135, 0.14);
  outline: none;
}

.operations-kpi-card span,
.operations-kpi-card small {
  color: var(--label);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.operations-kpi-card strong {
  font-size: 34px;
  line-height: 1;
}

.operations-kpi-card.info {
  background: #eef8fb;
  border-color: #b9dce4;
}

.operations-kpi-card.danger {
  background: #fff2f2;
  border-color: #f0b6b6;
}

.operations-kpi-card.warning {
  background: #fff8e9;
  border-color: #f1d19b;
}

.operations-kpi-card.success {
  background: #f0fbf5;
  border-color: #bce5ce;
}

.operations-kpi-card.neutral {
  background: #f7f9fc;
}

.operations-dashboard-grid,
.operations-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.compact-heading {
  min-height: 62px;
  padding: 15px 16px;
}

.compact-heading h2 {
  font-size: 20px;
}

.operations-status-chart,
.operations-sla-chart,
.operations-priority-list,
.operations-workload-list {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}

.operations-bar-row,
.operations-owner-row,
.operations-workload-row {
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  display: grid;
  gap: 12px;
  align-items: center;
}

.operations-bar-row {
  grid-template-columns: minmax(115px, 170px) minmax(0, 1fr) 42px;
  padding: 8px 12px;
  text-align: left;
}

.operations-bar-row:hover,
.operations-bar-row:focus-visible,
.operations-queue-row:hover,
.operations-queue-row:focus-visible {
  border-color: var(--brand);
  background: #f4fbfd;
  outline: none;
}

.operations-bar-row span,
.operations-owner-row span strong,
.operations-workload-row span strong {
  font-weight: 900;
}

.operations-bar-row i,
.operations-owner-row i,
.operations-workload-row i {
  height: 12px;
  border-radius: 999px;
  background: #e8edf3;
  overflow: hidden;
}

.operations-bar-row i b,
.operations-owner-row i b,
.operations-workload-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.operations-bar-row i b.pending {
  background: var(--warn);
}

.operations-bar-row i b.resolved,
.operations-bar-row i b.closed,
.operations-bar-row i b.completed,
.operations-bar-row i b.active {
  background: var(--ok);
}

.operations-bar-row i b.cancelled,
.operations-bar-row i b.overdue,
.operations-bar-row i b.failed {
  background: var(--bad);
}

.operations-owner-row,
.operations-workload-row {
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr) 42px;
  padding: 10px 12px;
}

.operations-owner-row small,
.operations-workload-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.operations-owner-row em,
.operations-workload-row em {
  justify-self: end;
  min-width: 34px;
  min-height: 30px;
  border-radius: 999px;
  background: #eef3f7;
  color: var(--ink);
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
}

.operations-owner-row i b {
  background: var(--bad);
}

.operations-workload-row i b {
  background: var(--brand);
}

.operations-queue-row {
  min-height: 78px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px 14px;
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  text-align: left;
}

.operations-queue-row.warning {
  border-left-color: var(--warn);
  background: #fffaf0;
}

.operations-queue-row.breached {
  border-left-color: var(--bad);
  background: #fff5f5;
}

.operations-queue-row strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.operations-queue-row small {
  color: var(--muted);
  font-size: 13px;
}

.operations-chip-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.dashboard-legacy-controls {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .operations-kpi-grid,
  .operations-dashboard-grid,
  .operations-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-command-header {
    align-items: start;
    flex-direction: column;
  }

  .dashboard-command-filters {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .operations-kpi-grid,
  .operations-dashboard-grid,
  .operations-bottom-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-command-filters,
  .dashboard-command-filters label {
    width: 100%;
  }

  .operations-bar-row,
  .operations-owner-row,
  .operations-workload-row,
  .operations-queue-row {
    grid-template-columns: 1fr;
  }

  .operations-chip-row {
    justify-content: flex-start;
  }
}

/* Technology risk register */
.risks-view {
  gap: 16px;
}

.risk-register-panel {
  overflow: hidden;
}

.risk-register-grid {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.risk-register-card {
  border: 1px solid #d4dee8;
  border-left: 6px solid #718096;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(26, 42, 57, 0.06);
  overflow: hidden;
}

.risk-register-card.risk-rating-severe {
  border-left-color: #c83232;
}

.risk-register-card.risk-rating-high {
  border-left-color: #df7a00;
}

.risk-register-card.risk-rating-medium {
  border-left-color: #d2a500;
}

.risk-register-card.risk-rating-low {
  border-left-color: #16885d;
}

.risk-card-heading,
.risk-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.risk-card-heading {
  border-bottom: 1px solid #e2e8ef;
  background: linear-gradient(90deg, #f8fbfd, #fff);
}

.risk-card-heading h3 {
  margin: 5px 0 0;
  font-size: 17px;
  line-height: 1.35;
}

.risk-reference {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.risk-rating-badge {
  flex: 0 0 auto;
  min-width: 82px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: #536579;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.risk-rating-severe .risk-rating-badge {
  background: #c83232;
}

.risk-rating-high .risk-rating-badge {
  background: #df7a00;
}

.risk-rating-medium .risk-rating-badge {
  background: #b78d00;
}

.risk-rating-low .risk-rating-badge {
  background: #16885d;
}

.risk-meta-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: #dfe7ee;
  border-bottom: 1px solid #dfe7ee;
}

.risk-meta-grid span {
  display: grid;
  gap: 5px;
  padding: 13px 16px;
  background: #fff;
}

.risk-meta-grid small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.risk-meta-grid strong {
  font-size: 13px;
}

.risk-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.risk-control-grid section {
  padding: 16px 18px;
}

.risk-control-grid section + section {
  border-left: 1px solid #e2e8ef;
}

.risk-control-grid h4 {
  margin: 0 0 9px;
  color: var(--brand-strong);
  font-size: 13px;
}

.risk-control-grid ul {
  margin: 0;
  padding-left: 18px;
  color: #405267;
  font-size: 12px;
  line-height: 1.55;
}

.risk-empty-copy,
.risk-card-actions span {
  color: var(--muted);
  font-size: 11px;
}

.risk-card-actions {
  padding-top: 11px;
  padding-bottom: 11px;
  border-top: 1px solid #e2e8ef;
  background: #fafcfd;
}

.risk-modal {
  width: min(900px, calc(100vw - 28px));
}

.risk-modal form {
  height: min(840px, calc(100dvh - 28px));
}

.risk-form-grid textarea {
  min-height: 96px;
}

@media (max-width: 900px) {
  .risk-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .risk-control-grid {
    grid-template-columns: 1fr;
  }

  .risk-control-grid section + section {
    border-top: 1px solid #e2e8ef;
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .risk-meta-grid,
  .risk-form-grid {
    grid-template-columns: 1fr;
  }

  .risk-card-heading,
  .risk-card-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*
  Call-centre incident wallboard.
  Large, high-contrast status tiles remain readable on a shared display.
*/
.call-centre-overview {
  padding: 28px;
  min-height: calc(100vh - 88px);
  background: #f3f6fa;
}

.call-centre-overview.active {
  display: grid;
  gap: 24px;
  align-content: start;
}

.overview-hero,
.overview-carryover-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.overview-hero h2 {
  margin: 4px 0 6px;
  font-size: clamp(28px, 3vw, 44px);
}

.overview-hero p,
.overview-carryover-heading p {
  margin: 0;
  color: var(--muted);
}

.overview-live-indicator {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px 10px;
  color: #08764d;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.overview-live-indicator > span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #18a76f;
  box-shadow: 0 0 0 6px rgba(24, 167, 111, 0.15);
  animation: overview-live-pulse 1.5s ease-in-out infinite;
}

.overview-live-indicator small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.overview-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.overview-status-card {
  min-height: 220px;
  border: 3px solid currentColor;
  border-radius: 22px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 40px rgba(25, 39, 55, 0.18);
  animation: overview-card-flash 1.8s ease-in-out infinite;
}

.overview-status-card p {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.overview-status-card strong {
  font-size: clamp(70px, 9vw, 128px);
  line-height: 0.9;
}

.overview-status-card span {
  max-width: 90%;
  font-size: 13px;
  font-weight: 800;
}

.overview-status-open {
  background: #c92727;
}

.overview-status-attending {
  background: #e47713;
  animation-delay: 0.35s;
}

.overview-status-resolved {
  background: #16845b;
  animation-delay: 0.7s;
}

.overview-carryover-panel {
  overflow: hidden;
  border: 2px solid #d12d2d;
  box-shadow: 0 14px 35px rgba(154, 35, 35, 0.13);
}

.overview-carryover-heading {
  padding: 22px 24px;
  background: #fff4f4;
  border-bottom: 1px solid #efc4c4;
}

.overview-carryover-heading h2 {
  margin: 3px 0 5px;
  color: #8d1d1d;
}

.overview-carryover-alert {
  min-width: 125px;
  padding: 12px 20px;
  border-radius: 16px;
  display: grid;
  justify-items: center;
  background: #b52222;
  color: #fff;
  animation: overview-alert-flash 1.2s ease-in-out infinite;
}

.overview-carryover-alert span {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.overview-carryover-alert strong {
  font-size: 42px;
  line-height: 1;
}

.overview-carryover-list {
  display: grid;
}

.overview-carryover-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e4e9ef;
  display: grid;
  grid-template-columns: 100px minmax(240px, 1fr) auto minmax(130px, auto) auto;
  align-items: center;
  gap: 18px;
  padding: 17px 24px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.overview-carryover-row:hover {
  background: #fff8f1;
}

.overview-carryover-age {
  padding: 7px 9px;
  border-radius: 999px;
  background: #ffe0e0;
  color: #9f2020;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.overview-carryover-main {
  display: grid;
  gap: 4px;
}

.overview-carryover-main small,
.overview-carryover-owner {
  color: var(--muted);
}

@keyframes overview-card-flash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

@keyframes overview-alert-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 34, 34, 0.38); }
  50% { box-shadow: 0 0 0 10px rgba(181, 34, 34, 0); }
}

@keyframes overview-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (max-width: 980px) {
  .overview-status-grid {
    grid-template-columns: 1fr;
  }

  .overview-status-card {
    min-height: 170px;
  }

  .overview-carryover-row {
    grid-template-columns: 90px minmax(0, 1fr) auto;
  }

  .overview-carryover-owner {
    display: none;
  }
}

@media (max-width: 620px) {
  .call-centre-overview {
    padding: 16px;
  }

  .overview-hero,
  .overview-carryover-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-carryover-row {
    grid-template-columns: 1fr auto;
  }

  .overview-carryover-main {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview-status-card,
  .overview-carryover-alert,
  .overview-live-indicator > span {
    animation: none;
  }
}

/* Final shell safeguard: all authenticated roles share the desktop sidebar at 1024px. */
@media (min-width: 781px) and (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 16px 14px;
  }

  .nav-list {
    grid-template-columns: 1fr;
  }
}

/* Full asset lifecycle register, separate from quantity-based Stock Control. */
.asset-management-view {
  padding: 22px;
  background: #f4f7fa;
}

.asset-management-view.active {
  display: grid;
  gap: 18px;
  align-content: start;
}

.asset-management-status-panel {
  overflow: hidden;
}

.asset-management-status-panel .view-toolbar {
  min-height: 76px;
}

.asset-management-status-panel .segmented {
  width: 100%;
}

.asset-management-toolbar {
  padding: 18px;
}

.asset-management-filter-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.7fr) repeat(2, minmax(180px, 0.85fr)) minmax(220px, 1fr);
  gap: 12px;
}

.asset-management-filter-grid label {
  display: grid;
  gap: 7px;
  color: var(--label);
  font-size: 12px;
  font-weight: 800;
}

.asset-management-filter-grid input,
.asset-management-filter-grid select {
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.asset-register-panel {
  overflow: hidden;
}

.asset-management-register {
  display: grid;
}

.asset-register-row {
  width: 100%;
  min-height: 86px;
  padding: 15px 18px;
  border: 0;
  border-top: 1px solid #e5eaf0;
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, auto);
  align-items: center;
  gap: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.asset-register-row:hover {
  background: #f4fafc;
}

.asset-register-row > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.asset-register-row strong,
.asset-register-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-register-row small {
  color: var(--muted);
}

.asset-register-identity strong {
  color: #176f84;
}

.asset-register-state {
  justify-items: end;
}

.ack-pending {
  color: #b12626 !important;
  font-weight: 900;
}

.ack-ok {
  color: #187251 !important;
  font-weight: 800;
}

.pill.asset-lost,
.segmented button.asset-status-filter.asset-lost {
  background: #fde1e1;
  color: #a51f1f;
  border-color: #efb3b3;
}

.pill.asset-retired,
.segmented button.asset-status-filter.asset-retired {
  background: #eceff2;
  color: #4e5965;
  border-color: #cbd2d9;
}

.asset-official-forms {
  display: grid;
  gap: 16px;
}

.asset-form-guidance {
  padding: 16px 18px;
  border: 1px solid #b8d9e2;
  border-radius: 10px;
  background: #eff8fb;
}

.asset-form-guidance h3,
.asset-form-guidance p {
  margin: 4px 0;
}

.asset-form-list {
  display: grid;
  gap: 10px;
}

.asset-form-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
}

.asset-form-card > span {
  display: grid;
  gap: 4px;
}

.asset-form-card small {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .asset-management-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-register-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-register-state {
    justify-items: start;
  }
}

@media (max-width: 680px) {
  .asset-management-view {
    padding: 14px;
  }

  .asset-management-filter-grid,
  .asset-register-row {
    grid-template-columns: 1fr;
  }

  .asset-form-card {
    align-items: stretch;
    flex-direction: column;
  }
}

/*
  Shared operational status bar.
  All modules except Overview and Dashboard use the same clean, card-like status controls.
*/
.view:not(.operations-dashboard):not(.call-centre-overview) .queue-panel > .toolbar {
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #d8e1ea;
}

.view:not(.operations-dashboard):not(.call-centre-overview) .segmented {
  gap: 10px;
  padding: 2px 0;
}

.view:not(.operations-dashboard):not(.call-centre-overview) .segmented button {
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid #cbd8e5;
  border-radius: 10px;
  background: #f8fafc;
  color: #26384a;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(31, 51, 70, 0.04);
}

.view:not(.operations-dashboard):not(.call-centre-overview) .segmented button:hover {
  border-color: #8ebcca;
  background: #f0f8fa;
}

.view:not(.operations-dashboard):not(.call-centre-overview) .segmented button.active,
.view:not(.operations-dashboard):not(.call-centre-overview) .status-filter-control.active button,
.view:not(.operations-dashboard):not(.call-centre-overview) .status-filter-control:focus-within button {
  border-color: #0f7184;
  background: #e7f7fa;
  color: #095d6e;
  box-shadow: inset 0 0 0 2px #0f7184;
}

.view:not(.operations-dashboard):not(.call-centre-overview) .status-filter-control {
  gap: 6px;
}

.view:not(.operations-dashboard):not(.call-centre-overview) .status-filter-control select {
  min-height: 38px;
  border-radius: 8px;
  border-color: #cbd8e5;
  background: #fff;
}

/*
  Dashboard mockup alignment.
  These final overrides turn the Dashboard into the white card / donut graph /
  vertical SLA bar layout shown in the reference design.
*/
.operations-dashboard.active {
  gap: 14px;
}

.dashboard-command-panel,
.operations-chart-card {
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(23, 32, 42, 0.06);
}

.dashboard-command-header {
  align-items: center;
  padding: 18px 20px;
}

.dashboard-command-header h2 {
  font-size: 26px;
  letter-spacing: 0;
}

.dashboard-command-copy {
  font-size: 13px;
}

.dashboard-command-filters {
  align-items: end;
}

.dashboard-command-filters label {
  min-width: 168px;
}

.operations-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px 20px;
}

.operations-kpi-card {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #ffffff;
  border-color: #dbe3ec;
  border-radius: 8px;
  box-shadow: none;
}

.operations-kpi-card.info,
.operations-kpi-card.danger,
.operations-kpi-card.warning,
.operations-kpi-card.success,
.operations-kpi-card.neutral {
  background: #ffffff;
}

.operations-kpi-card .operations-kpi-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.operations-kpi-card.info .operations-kpi-icon {
  background: #e4f0ff;
  color: #2f77e6;
}

.operations-kpi-card.danger .operations-kpi-icon {
  background: #ffe4e4;
  color: #c83232;
}

.operations-kpi-card.warning .operations-kpi-icon {
  background: #fff0dc;
  color: #c46e13;
}

.operations-kpi-card.success .operations-kpi-icon {
  background: #ddf6e8;
  color: #16845b;
}

.operations-kpi-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.operations-kpi-card .operations-kpi-copy small {
  color: var(--label);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.operations-kpi-card .operations-kpi-copy strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.05;
}

.operations-kpi-card .operations-kpi-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.engineer-workload-section {
  margin: 0 20px 20px;
  padding: 18px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #f7f9fc;
}

.engineer-workload-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 14px;
}

.engineer-workload-heading h3 {
  margin: 4px 0;
  color: var(--ink);
  font-size: 18px;
}

.engineer-workload-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.engineer-workload-total {
  padding: 8px 12px;
  border-radius: 999px;
  color: #1f5f9f;
  background: #e4f0ff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.engineer-workload-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.engineer-workload-card {
  display: grid;
  gap: 12px;
  min-height: 104px;
  padding: 14px 15px;
  border: 1px solid #d9e2ec;
  border-radius: 9px;
  color: var(--ink);
  background: #ffffff;
  text-align: left;
  box-shadow: 0 2px 6px rgba(23, 32, 42, 0.025);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.engineer-workload-card:hover,
.engineer-workload-card:focus-visible {
  border-color: #2f77e6;
  box-shadow: 0 7px 18px rgba(47, 119, 230, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.engineer-workload-card.current-engineer {
  border: 1px solid #2f77e6;
  background: linear-gradient(145deg, #f5f9ff, #edf4ff);
  box-shadow: inset 3px 0 0 #2f77e6, 0 4px 12px rgba(47, 119, 230, 0.08);
}

.engineer-workload-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}

.engineer-workload-card-heading small {
  padding: 4px 7px;
  border-radius: 999px;
  color: #2f77e6;
  background: #dfeaff;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  text-transform: uppercase;
}

.engineer-workload-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid #edf1f5;
}

.engineer-workload-metrics .incident-count {
  color: #b44900;
}

.engineer-workload-metrics .request-count {
  color: #1f5f9f;
}

.engineer-workload-card-heading strong {
  font-size: 14px;
  line-height: 1.25;
}

.engineer-workload-metrics span {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.attendance-view {
  display: none;
  gap: 16px;
  padding-bottom: 28px;
}

.attendance-view.active {
  display: grid;
}

.attendance-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid #d7e4ec;
  border-radius: 9px;
  background: linear-gradient(135deg, #f7fbfd, #eef6fa);
}

.attendance-hero h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.attendance-hero p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.attendance-period-controls {
  display: flex;
  gap: 10px;
}

.attendance-period-controls label {
  min-width: 180px;
  color: var(--label);
  font-size: 11px;
  font-weight: 800;
}

.attendance-period-controls input,
.attendance-period-controls select {
  margin-top: 5px;
  background: #fff;
}

.attendance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.attendance-kpi {
  min-height: 104px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: #fff;
}

.attendance-kpi span {
  color: var(--label);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.attendance-kpi strong {
  display: block;
  margin: 7px 0 4px;
  font-size: 25px;
}

.attendance-kpi small {
  color: var(--muted);
  font-size: 11px;
}

.attendance-kpi.worked { border-left-color: var(--ok); }
.attendance-kpi.leave { border-left-color: var(--info); }
.attendance-kpi.overtime { border-left-color: var(--warn); }

.attendance-table-panel {
  overflow: hidden;
}

.attendance-table-heading {
  align-items: center;
}

.attendance-table-wrap {
  overflow-x: auto;
}

.attendance-table {
  width: 100%;
  border-collapse: collapse;
}

.attendance-table th {
  padding: 10px 12px;
  color: var(--label);
  background: #f5f8fa;
  font-size: 10px;
  text-align: left;
  text-transform: uppercase;
}

.attendance-table td {
  padding: 11px 12px;
  border-top: 1px solid #e5eaf0;
  font-size: 12px;
  white-space: nowrap;
}

.attendance-status,
.attendance-claim {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #24596a;
  background: #e8f4f7;
  font-size: 10px;
  font-weight: 800;
}

.attendance-status.not-captured {
  color: #8a5310;
  background: #fff0d2;
}

.attendance-read-only {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.attendance-status.absent,
.attendance-claim.rejected {
  color: #a32626;
  background: #fdeaea;
}

.attendance-claim.pending {
  color: #9a5b0b;
  background: #fff2d9;
}

.attendance-claim.approved,
.attendance-claim.paid {
  color: #116b48;
  background: #e1f5eb;
}

.attendance-actions {
  display: flex;
  gap: 5px;
}

.attendance-action {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #cbdce5;
  border-radius: 6px;
  color: var(--brand-strong);
  background: #f4fafc;
  font-size: 10px;
  font-weight: 800;
}

.attendance-action.approve { color: var(--ok); }
.attendance-action.reject,
.attendance-action.delete { color: var(--bad); }
.attendance-action.paid { color: #6954c9; }

.attendance-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.attendance-time-field input[type="time"] {
  min-height: 42px;
  border-color: var(--line);
  color: var(--ink);
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.attendance-time-field input[type="time"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(23, 107, 135, 0.12);
  outline: none;
}

.attendance-field-disabled {
  opacity: 0.45;
}

.operational-reminder-modal {
  width: min(620px, calc(100vw - 28px));
}

.operational-reminder-badge {
  position: fixed;
  z-index: 90;
  top: 92px;
  right: 20px;
  width: min(330px, calc(100vw - 40px));
  min-height: 62px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 30px;
  gap: 11px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #72c89d;
  border-radius: 9px;
  color: #124f36;
  background: #ecfbf3;
  box-shadow: 0 10px 28px rgba(22, 138, 91, 0.2);
  text-align: left;
  animation: operationalReminderPulseGreen 1.5s ease-in-out infinite;
}

.operational-reminder-badge[hidden] {
  display: none;
}

.operational-reminder-badge:hover,
.operational-reminder-badge:focus-visible {
  outline: 3px solid rgba(22, 138, 91, 0.16);
  transform: translateY(-1px);
}

.operational-reminder-badge.urgent {
  border-color: #e28d8d;
  color: #8f2020;
  background: #fff0f0;
  box-shadow: 0 10px 28px rgba(190, 48, 48, 0.24);
  animation-name: operationalReminderPulseRed;
}

.operational-reminder-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
}

.operational-reminder-badge.urgent .operational-reminder-badge-dot {
  background: var(--bad);
}

.operational-reminder-badge > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.operational-reminder-badge strong {
  font-size: 13px;
}

.operational-reminder-badge small {
  font-size: 11px;
  font-weight: 700;
}

.operational-reminder-badge-count {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: var(--ok);
  font-size: 12px;
  font-weight: 900;
}

.operational-reminder-badge.urgent .operational-reminder-badge-count {
  background: var(--bad);
}

@keyframes operationalReminderPulseGreen {
  0%, 100% { box-shadow: 0 8px 22px rgba(22, 138, 91, 0.16); }
  50% { box-shadow: 0 8px 30px rgba(22, 138, 91, 0.42); }
}

@keyframes operationalReminderPulseRed {
  0%, 100% { box-shadow: 0 8px 22px rgba(190, 48, 48, 0.18); }
  50% { box-shadow: 0 8px 32px rgba(190, 48, 48, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .operational-reminder-badge {
    animation: none;
  }
}

.operational-reminder-heading {
  border-left: 5px solid var(--brand);
  background: #f3f9fb;
}

.operational-reminder-list {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.operational-reminder-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #d9e5eb;
  border-radius: 8px;
  background: #f9fbfc;
}

.operational-reminder-icon {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 7px;
  color: #fff;
  background: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.operational-reminder-item.attendance .operational-reminder-icon {
  background: var(--info);
}

.operational-reminder-item strong {
  font-size: 14px;
}

.operational-reminder-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.operational-reminder-detail-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid #d5e3ec;
  border-radius: 10px;
  background: #ffffff;
}

.operational-reminder-detail-card > div {
  display: grid;
  gap: 4px;
}

.operational-reminder-detail-card p {
  margin: 0;
  color: var(--muted);
}

.operational-reminder-detail-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.operational-reminder-detail-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #f4f8fb;
  color: #123047;
}

.operational-reminder-detail-card li strong {
  color: #0f7184;
  font-size: 12px;
  text-transform: uppercase;
}

.engineer-workload-metrics strong {
  color: var(--ink);
  font-size: 15px;
}

.engineer-workload-metrics .status-pending strong {
  color: #c46e13;
}

.engineer-workload-metrics .status-in-progress strong {
  color: #2f77e6;
}

.engineer-ticket-modal {
  width: min(980px, calc(100vw - 32px));
}

.engineer-ticket-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 20px 14px;
}

.engineer-ticket-summary span {
  padding: 7px 10px;
  border-radius: 6px;
  background: #eef3f8;
  font-size: 11px;
  font-weight: 900;
}

.engineer-ticket-list {
  display: grid;
  gap: 8px;
  max-height: 58vh;
  overflow: auto;
  padding: 0 20px 20px;
}

.engineer-ticket-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.engineer-ticket-row:hover,
.engineer-ticket-row:focus-visible {
  border-color: #2f77e6;
  outline: none;
}

.engineer-ticket-row > span:first-child {
  display: grid;
  gap: 4px;
}

.engineer-ticket-row small {
  color: var(--muted);
}

.engineer-ticket-row-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: end;
}

.operations-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.operations-chart-card {
  overflow: hidden;
}

.compact-heading {
  min-height: 70px;
  padding: 18px 20px;
}

.compact-heading h2 {
  margin-top: 6px;
  font-size: 19px;
}

.operations-status-chart,
.operations-sla-chart {
  min-height: 310px;
  padding: 18px 20px 22px;
}

.operations-donut-layout {
  min-height: 260px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.operations-donut {
  justify-self: center;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: var(--donut-gradient);
  position: relative;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(23, 32, 42, 0.04);
}

.operations-donut::after {
  content: "";
  position: absolute;
  inset: 54px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #edf2f7;
}

.operations-donut span {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  place-items: center;
  color: var(--ink);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.operations-donut strong {
  font-size: 30px;
  line-height: 1;
}

.operations-donut small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.operations-donut-legend {
  display: grid;
  gap: 10px;
}

.operations-legend-row {
  min-height: 36px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.operations-legend-row:hover,
.operations-legend-row:focus-visible {
  color: var(--brand-strong);
  outline: none;
}

.operations-legend-row i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.operations-legend-row span {
  font-size: 13px;
  font-weight: 800;
}

.operations-legend-row strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.operations-column-chart {
  height: 260px;
  padding: 8px 12px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  align-items: end;
  background:
    linear-gradient(to top, #dfe6ee 1px, transparent 1px) 0 100% / 100% 25%,
    linear-gradient(#ffffff, #ffffff);
}

.operations-column {
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  grid-template-rows: 24px 1fr 34px;
  gap: 8px;
  align-items: end;
  justify-items: center;
  padding: 0;
}

.operations-column-value {
  align-self: start;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.operations-column-track {
  width: min(68px, 68%);
  height: 176px;
  display: flex;
  align-items: end;
  justify-content: center;
}

.operations-column-track i {
  width: 100%;
  min-height: 4px;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 8px 18px rgba(23, 32, 42, 0.08);
}

.operations-column strong {
  align-self: start;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 1180px) {
  .engineer-workload-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-donut-layout {
    grid-template-columns: 1fr;
  }

  .operations-donut-legend {
    width: min(420px, 100%);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .operations-kpi-grid,
  .operations-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .operations-column-chart {
    gap: 16px;
  }

  .engineer-workload-grid {
    grid-template-columns: 1fr;
  }

  .engineer-workload-heading,
  .engineer-ticket-row {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .engineer-workload-card {
    min-height: 98px;
  }

  .attendance-hero,
  .attendance-period-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attendance-form-grid {
    grid-template-columns: 1fr;
  }

  .engineer-ticket-row-meta {
    justify-content: start;
  }
}

/* IT Compliance: 2026 assurance library and network topology gallery. */
.compliance-view {
  display: none;
  gap: 18px;
}

.compliance-view.active {
  display: grid;
}

.compliance-hero {
  min-height: 250px;
  padding: 34px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 86% 28%, rgba(52, 184, 207, 0.28), transparent 25%),
    linear-gradient(128deg, #0d2639 0%, #104f67 62%, #167d91 100%);
  box-shadow: var(--shadow);
}

.compliance-hero .eyebrow {
  color: #9fe3ef;
}

.compliance-hero h2 {
  margin: 5px 0 10px;
  font-size: clamp(28px, 4vw, 45px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.compliance-hero-copy > p:last-of-type {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.65;
}

.compliance-hero-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compliance-hero-actions a {
  text-decoration: none;
}

.compliance-hero-actions .primary-button {
  background: #ffffff;
  color: #0f5065;
}

.compliance-hero-actions .secondary-button {
  border-color: rgba(255, 255, 255, 0.42);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.compliance-year-mark {
  width: 180px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.035);
}

.compliance-year-mark span,
.compliance-year-mark small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.compliance-year-mark strong {
  margin: 2px 0;
  font-size: 42px;
  letter-spacing: -0.04em;
}

.compliance-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.compliance-summary-grid article {
  min-height: 104px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(23, 32, 42, 0.05);
}

.compliance-summary-icon {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand-strong), #1c91a7);
  font-size: 13px;
  font-weight: 950;
}

.compliance-summary-grid strong,
.compliance-summary-grid small {
  display: block;
}

.compliance-summary-grid strong {
  margin-bottom: 5px;
  font-size: 14px;
}

.compliance-summary-grid small {
  color: var(--muted);
  line-height: 1.4;
}

.compliance-library-panel,
.compliance-topology-panel,
.compliance-repository-panel {
  padding: 24px;
}

.compliance-section-heading {
  align-items: flex-start;
}

.compliance-section-heading p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
}

.compliance-current-pill {
  padding: 8px 12px;
  border-radius: 999px;
  color: #08734c;
  background: #e5f7ef;
  font-size: 12px;
  font-weight: 900;
}

.compliance-document-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.compliance-document-card {
  min-height: 300px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
}

.compliance-document-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.compliance-document-code {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #123c55;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.compliance-document-status {
  padding: 6px 9px;
  border-radius: 999px;
  color: #126a4a;
  background: #e8f7f0;
  font-size: 11px;
  font-weight: 900;
}

.compliance-document-card h3 {
  margin: 17px 0 8px;
  font-size: 18px;
  line-height: 1.25;
}

.compliance-document-card > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.compliance-document-card dl {
  margin: auto 0 16px;
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.compliance-document-card dl div {
  padding: 10px;
  border-radius: 7px;
  background: var(--soft);
}

.compliance-document-card dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.compliance-document-card dd {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 900;
}

.compliance-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.compliance-card-actions a,
.compliance-topology-card > div > a {
  min-height: 38px;
  border: 1px solid #b8dce6;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--brand-strong);
  background: #eef8fb;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.compliance-card-actions a:first-child {
  color: #ffffff;
  border-color: var(--brand);
  background: var(--brand);
}

.compliance-topology-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.compliance-topology-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

.compliance-topology-card > a {
  height: 230px;
  display: block;
  overflow: hidden;
  background: #edf2f6;
}

.compliance-topology-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 180ms ease;
}

.compliance-topology-card > a:hover img {
  transform: scale(1.025);
}

.compliance-topology-card > div {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 14px;
  align-items: end;
}

.compliance-topology-card span {
  color: var(--brand);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.compliance-topology-card h3 {
  margin: 4px 0 5px;
}

.compliance-topology-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.compliance-repository-admin,
.compliance-folder-content-heading,
.compliance-repository-summary,
.compliance-document-row,
.compliance-document-actions {
  display: flex;
  align-items: center;
}

.compliance-repository-admin {
  gap: 8px;
}

.compliance-repository-summary {
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--soft);
}

.compliance-repository-summary span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #36576b;
  background: #e3edf3;
  font-size: 10px;
  font-weight: 900;
}

.compliance-folder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.compliance-folder-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 82px;
  padding: 14px;
  border: 1px solid #d3dee7;
  border-radius: 8px;
  color: var(--ink);
  background: #ffffff;
  text-align: left;
}

.compliance-folder-card:hover,
.compliance-folder-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 5px 16px rgba(23, 107, 135, 0.12);
  outline: none;
}

.compliance-folder-icon {
  position: relative;
  width: 43px;
  height: 31px;
  border-radius: 4px;
  background: #2f8ca8;
  box-shadow: inset 0 -5px 0 rgba(18, 63, 88, 0.18);
}

.compliance-folder-icon::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 3px;
  width: 19px;
  height: 9px;
  border-radius: 4px 4px 0 0;
  background: #2f8ca8;
}

.compliance-folder-card > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.compliance-folder-card strong {
  font-size: 14px;
}

.compliance-folder-card small {
  color: var(--muted);
  font-size: 11px;
}

.compliance-folder-count {
  min-width: 32px;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--brand-strong);
  background: #e6f2f5;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.compliance-folder-content {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.compliance-folder-content-heading {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.compliance-folder-content-heading > div {
  flex: 1;
}

.compliance-folder-content-heading h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 19px;
}

.compliance-document-list {
  display: grid;
  gap: 9px;
}

.compliance-document-row {
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #d7e1e9;
  border-radius: 8px;
  background: #ffffff;
}

.compliance-document-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.compliance-document-row-main strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}

.compliance-document-row-main small {
  color: var(--muted);
  font-size: 10px;
}

.compliance-document-actions {
  gap: 7px;
  flex-wrap: wrap;
  justify-content: end;
}

.compliance-document-actions a,
.compliance-document-actions button {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.compliance-upload-guidance {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.compliance-library-modal {
  width: min(520px, calc(100vw - 32px));
}

.compliance-library-modal form {
  padding: 20px;
}

@media (max-width: 1180px) {
  .compliance-summary-grid,
  .compliance-document-grid,
  .compliance-folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compliance-topology-grid {
    grid-template-columns: 1fr;
  }

  .compliance-topology-card {
    display: grid;
    grid-template-columns: minmax(300px, 46%) 1fr;
  }

  .compliance-topology-card > a {
    height: 100%;
    min-height: 250px;
  }
}

@media (max-width: 760px) {
  .compliance-hero {
    padding: 24px;
    grid-template-columns: 1fr;
  }

  .compliance-year-mark {
    width: 136px;
  }

  .compliance-summary-grid,
  .compliance-document-grid,
  .compliance-folder-grid {
    grid-template-columns: 1fr;
  }

  .compliance-topology-card {
    display: block;
  }

  .compliance-topology-card > a {
    height: 210px;
    min-height: 0;
  }

  .compliance-document-row,
  .compliance-folder-content-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .compliance-document-actions {
    justify-content: start;
  }
}

/* Projects portfolio dashboard and executive reporting controls. */
.projects-view {
  padding-bottom: 28px;
}

.projects-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.project-kpi {
  min-height: 150px;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--brand);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.project-kpi-budget {
  border-top-color: #d97706;
}

.project-kpi-hours {
  border-top-color: #6954c9;
}

.project-kpi-risk {
  border-top-color: var(--bad);
}

.project-kpi span,
.project-meta-grid small {
  color: var(--label);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-kpi strong {
  margin: 7px 0 3px;
  font-size: 34px;
  line-height: 1;
}

.project-kpi small {
  color: var(--muted);
  font-weight: 700;
}

.projects-status-panel {
  margin-bottom: 18px;
  padding: 18px 20px;
}

.projects-status-panel .segmented {
  flex-wrap: wrap;
}

.project-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.project-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--ok);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.project-card.project-at-risk {
  border-left-color: #d97706;
}

.project-card.project-critical {
  border-left-color: var(--bad);
}

.project-card.project-complete {
  border-left-color: #6954c9;
}

.project-card-heading,
.project-progress-block > div,
.project-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.project-card-heading > div > span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.project-card h3 {
  margin: 5px 0 0;
  font-size: 20px;
}

.project-card > p {
  min-height: 42px;
  margin: 15px 0;
  color: var(--muted);
  line-height: 1.5;
}

.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.project-meta-grid span {
  padding: 11px;
  border-radius: 8px;
  background: var(--soft);
}

.project-meta-grid strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.project-progress-block {
  display: grid;
  gap: 7px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.project-progress-block span,
.project-progress-block strong {
  font-size: 12px;
}

.project-progress-block progress {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  accent-color: var(--brand);
}

.project-card-actions {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 16px;
}

.project-card-actions button {
  min-width: 130px;
}

.project-on-track {
  color: #087657;
  background: #e5f7f0;
}

.project-at-risk {
  color: #a15c00;
  background: #fff1d6;
}

.project-critical {
  color: #b42318;
  background: #feeceb;
}

.project-complete {
  color: #5544b5;
  background: #efecff;
}

#projectModal {
  width: min(920px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(840px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
}

#projectModal form {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

#projectModal .project-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

#projectModal textarea {
  min-height: 82px;
}

#projectModal .modal-heading,
#projectModal .modal-actions {
  padding: 14px 18px;
}

.project-completion-field small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.project-completion-field input[readonly] {
  color: var(--brand-strong);
  background: #eaf7fa;
  font-size: 18px;
  font-weight: 900 !important;
}

.project-deliverables-editor {
  padding: 16px;
  border: 1px solid #cbdce5;
  border-radius: 10px;
  background: #f8fcfd;
}

.project-deliverables-heading,
.project-deliverables-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.project-deliverables-heading span {
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-deliverables-heading h3 {
  margin: 3px 0;
  font-size: 18px;
}

.project-deliverables-heading p,
.project-deliverables-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.project-deliverables-summary {
  margin: 14px 0 10px;
  padding: 11px 13px;
  border-radius: 8px;
  color: var(--brand-strong);
  background: #e4f4f7;
}

.project-deliverables-summary strong {
  font-size: 17px;
}

.project-deliverables-summary span {
  font-size: 12px;
  font-weight: 800;
}

.project-deliverables-list {
  display: grid;
  gap: 10px;
}

.project-deliverables-empty {
  padding: 16px;
  border: 1px dashed #b9cbd6;
  border-radius: 8px;
  text-align: center;
}

.project-deliverable-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 2fr) minmax(140px, 1.2fr) 140px 110px 110px 145px;
  gap: 8px;
  padding: 12px 45px 12px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: #ffffff;
}

.project-deliverable-row label {
  padding: 0;
  border: 0;
  gap: 5px;
  background: transparent;
  font-size: 11px;
}

.project-deliverable-row input,
.project-deliverable-row select {
  min-height: 38px;
}

.project-deliverable-remove {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  color: var(--bad);
  background: #fff0f0;
}

.danger-button {
  border: 1px solid #b42318;
  border-radius: 7px;
  padding: 10px 16px;
  color: #ffffff;
  background: #b42318;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.danger-button:hover {
  background: #8f1b13;
}

.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-delete-button {
  margin-right: auto;
}

.application-footer {
  position: fixed;
  right: 18px;
  bottom: 10px;
  z-index: 20;
  display: flex;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid rgba(18, 63, 88, 0.14);
  border-radius: 7px;
  color: #526474;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 12px rgba(18, 63, 88, 0.08);
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .application-footer {
    position: static;
    justify-content: center;
    flex-wrap: wrap;
    margin: 12px;
    text-align: center;
  }
}

@media (max-width: 1220px) {
  .project-deliverable-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .projects-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .projects-kpi-grid,
  .project-meta-grid,
  #projectModal .project-form-grid {
    grid-template-columns: 1fr;
  }

  #projectModal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .project-deliverable-row {
    grid-template-columns: 1fr;
  }

  .project-deliverables-heading,
  .project-deliverables-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .project-card-heading,
  .project-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .project-card-actions button {
    width: 100%;
  }
}

/* Keep the Admin-style left navigation on standard 1024px call-centre displays. */
@media (min-width: 781px) and (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 16px 14px;
  }

  .nav-list {
    grid-template-columns: 1fr;
  }
}