@font-face {
  font-family: "Area Normal";
  src: url("/static/fonts/AreaNormal-Semibold.woff2") format("woff2"),
       url("/static/fonts/AreaNormal-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

:root {
  --profile-dark-blue: #243741;
  --profile-light-blue: #6bb1e2;
  --profile-blue: #014469;
  --profile-green: #9ac331;
  --profile-orange: #ff9800;

  --primary: var(--profile-blue);
  --primary-hover: #1c5a7a;
  --secondary: #2b2b39;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --line: #dce6ed;
  --ink: #243741;
  --ink-muted: #5f6f7f;

  --ok-bg: #e8f7ef;
  --ok-text: #0d6f3a;
  --error-bg: #fdeaea;
  --error-text: #962a2a;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(107, 177, 226, 0.28) 0, rgba(107, 177, 226, 0) 46%),
    linear-gradient(180deg, #f0f6fa 0%, #f8fbfd 45%, #eef4f8 100%);
}

#wrapper.wrapper {
  flex: 1;
}

.shell {
  width: min(1290px, 100% - 2rem);
  margin: 0 auto;
}

.header {
  color: var(--primary);
  background-color: var(--surface);
  box-shadow: 0 1px 15px rgba(50, 50, 93, 0.2);
  padding: 5px 0;
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: inherit;
}

.logo-corporate {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.brand-copy {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-title {
  font-family: "Area Normal", "Lato", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.18rem;
  white-space: nowrap;
  color: var(--profile-dark-blue);
}

.logo-subtitle {
  font-family: "Area Normal", "Lato", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  color: var(--profile-dark-blue);
  opacity: 0.95;
}

.main-menu {
  margin-left: auto;
}

.main-menu > ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu a {
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-block;
  text-decoration: none;
  color: var(--primary);
  font-size: 0.95rem;
  transition: all 140ms ease;
}

.main-menu a:hover {
  background-color: rgba(107, 177, 226, 0.42);
  color: #ffffff;
}

.main-menu a.is-active {
  background-color: rgba(17, 89, 134, 0.16);
  color: var(--profile-dark-blue);
}

.main-menu .menu-icon-link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 10px;
  font-size: 1.4rem;
  line-height: 1;
}

.main-menu .menu-label {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-right: 0.35rem;
  white-space: nowrap;
}

.app-main {
  padding: 1.4rem 0 2rem;
}

.app-main.app-main-wide {
  padding: 0;
}

.plan-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: 0 8px 16px rgba(17, 44, 64, 0.06);
}

.card.narrow {
  max-width: 560px;
}

.settings-subcard {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.settings-subcard + .settings-subcard {
  margin-top: 1.5rem;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 1.25rem;
  align-items: end;
}

.settings-disclosure {
  margin-top: 1rem;
}

.settings-disclosure > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0;
}

.settings-disclosure > summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure > summary::before {
  content: "+";
  font-weight: 700;
  display: inline-block;
  width: 1em;
}

.settings-disclosure[open] > summary::before {
  content: "\2013";
}

.settings-disclosure .settings-form-grid {
  margin-top: 0.75rem;
}

.row-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

h1,
h2,
h3 {
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  color: #333333;
}

h1 {
  font-size: 1.55rem;
  line-height: 1.2;
  font-weight: 400;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.35;
  font-weight: 400;
}

h3 {
  color: var(--primary);
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 300;
}

p {
  margin: 0;
}

.muted {
  color: var(--ink-muted);
}

.stack {
  display: grid;
  gap: 0.8rem;
}

.grid {
  display: grid;
  gap: 0.8rem;
}

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

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.95rem;
}

input,
select {
  width: 100%;
  padding: 0.56rem 0.65rem;
  border: 1px solid #cdd8e1;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}

input:focus,
select:focus {
  outline: 2px solid rgba(107, 177, 226, 0.38);
  border-color: var(--profile-light-blue);
}

.button {
  white-space: nowrap;
  border-style: none;
  display: inline-block;
  padding: 7px 15px;
  border-radius: 20px;
  background: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn {
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: 0.88rem;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: rgba(1, 68, 105, 0.35);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.button:hover {
  color: #fff;
  background-color: var(--primary-hover);
  text-decoration: none;
}

.button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.button-link {
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(1, 68, 105, 0.35);
}

.button-link:hover {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.button-small {
  padding: 0.42rem 0.66rem;
  font-size: 0.76rem;
}

.form-label {
  margin-bottom: 0.35rem;
}

.form-control,
.form-select {
  border: 1px solid #cdd8e1;
  border-radius: var(--radius-sm);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--profile-light-blue);
  box-shadow: 0 0 0 0.18rem rgba(107, 177, 226, 0.28);
}

.form-important {
  background-color: palegoldenrod;
}

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

.project-table-wrap {
  max-height: 72vh;
  overflow: auto;
}

.export-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 0.9rem;
}

.export-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.export-card-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--primary);
}

.export-actions {
  width: 100%;
}

.export-action-btn {
  min-height: 2.42rem;
  padding: 0.52rem 0.95rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .export-actions {
    flex-wrap: wrap;
  }

  .export-action-btn {
    min-width: calc(50% - 0.25rem);
  }
}

@media (max-width: 575.98px) {
  .export-action-btn {
    min-width: 100%;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.table {
  --bs-table-bg: #fff;
  --bs-table-striped-bg: #f7fbff;
  --bs-table-hover-bg: #edf5fa;
}

th,
td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 0.62rem 0.5rem;
  white-space: nowrap;
}

th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.project-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
}

.project-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.project-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #ffffff;
}

.project-sticky-left {
  position: sticky;
  background: #ffffff;
  z-index: 4;
}

.project-sticky-right {
  position: sticky;
  background: #ffffff;
  z-index: 4;
}

.project-col-tenant {
  left: 0;
}

.project-col-code {
  left: var(--project-left-code, 0px);
}

.project-col-name {
  left: var(--project-left-name, 140px);
}

.project-col-action {
  right: 0;
}

.project-col-age {
  right: var(--project-right-age, 160px);
}

.project-table thead .project-sticky-left,
.project-table thead .project-sticky-right {
  z-index: 6;
}

.mode-mismatch-row td {
  background: #fffaf2;
}

.mode-mismatch-row td:first-child {
  box-shadow: inset 3px 0 0 #d97706;
}

.mode-mismatch-row td.project-sticky-left,
.mode-mismatch-row td.project-sticky-right {
  background: #fffaf2;
}

.mode-warning-icon {
  color: #b45309;
  font-size: 0.94rem;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
}

table.assessment-changes {
  table-layout: fixed;
}

table.assessment-changes th.description-col,
table.assessment-changes td.description-col {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

table.history-table td {
  vertical-align: middle;
}

.history-current {
  background-color: #eef5fb;
}

.history-current-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(1, 68, 105, 0.14);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.age-badge {
  display: inline-block;
  padding: 0.16rem 0.56rem;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

.age-badge-fresh {
  background: #e8f7ef;
  color: #0d6f3a;
}

.age-badge-warning {
  background: #fff3cd;
  color: #765600;
}

.age-badge-critical {
  background: #fdeaea;
  color: #962a2a;
}

.age-badge-missing {
  background: #edf3f8;
  color: #56697b;
}

.status-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5f70;
  background: #edf3f8;
}

.error-box,
.ok-box {
  padding: 0.66rem 0.78rem;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
}

.error-box {
  background: var(--error-bg);
  color: var(--error-text);
}

.ok-box {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.metric {
  font-size: 1.12rem;
  font-weight: 600;
}

.metric.small {
  font-size: 0.92rem;
  font-weight: 500;
  word-break: break-all;
}

.margin-chart-wrap {
  width: 100%;
  overflow-x: auto;
}

#margin-history-chart {
  width: 100%;
  height: 280px !important;
  display: block;
}

.chart-grid {
  stroke: #dce6ed;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.chart-axis {
  stroke: #8aa0b2;
  stroke-width: 1.2;
}

.chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-dot {
  fill: var(--profile-light-blue);
  stroke: var(--primary);
  stroke-width: 1.2;
}

.chart-label {
  fill: #5f6f7f;
  font-size: 11px;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

.footer {
  background: var(--secondary);
  padding: 20px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.footer-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
}

.footer-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
}

.footer-menu li {
  color: #bdc6d0;
  font-size: 0.9rem;
}

.footer-menu a {
  color: #cdd6df;
  text-decoration: none;
  display: inline-block;
  padding: 8px;
}

.footer-menu a:hover {
  text-decoration: underline;
}

.sub-footer {
  background: #1f1f2b;
  padding: 12px 0;
}

.sub-footer-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
}

.sub-footer-inner ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sub-footer-inner li {
  color: #aeb8c4;
  font-size: 0.88rem;
  line-height: 1.6;
}

.sub-footer-inner strong {
  color: #ffffff;
  font-weight: 700;
}

.reserve-editor-card .reserve-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.reserve-overview-filters {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(160px, 220px) minmax(160px, 220px) auto;
  gap: 0.75rem 1rem;
  align-items: end;
}

.reserve-overview-filter-actions {
  display: flex;
  align-items: end;
}

.reserve-chart-card {
  padding-top: 0.8rem;
}

/* KPI - Historikk: paired chart panels, wide+narrow (revenue/margin next
   to its bar/line counterpart) or even (smaller secondary metrics). See
   dashboard_history.html. */
.kpi-history-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.1rem;
}

.kpi-history-row.kpi-history-row-even {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
  .kpi-history-row {
    grid-template-columns: 1fr;
  }
}

.reserve-chart-canvas {
  width: 100%;
  height: 320px;
  display: block;
}

.chart-line-income {
  stroke: var(--primary);
}

.chart-line-workers {
  stroke: #d36d00;
}

.chart-dot-income {
  fill: var(--profile-light-blue);
  stroke: var(--primary);
}

.chart-dot-workers {
  fill: #ffd7b0;
  stroke: #d36d00;
}

.reserve-overview-wrap {
  max-height: 560px;
  overflow: auto;
}

.reserve-overview-table th,
.reserve-overview-table td {
  white-space: nowrap;
}

.reserve-overview-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #ffffff;
}

.reserve-col-project {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #ffffff;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reserve-col-sum {
  position: sticky;
  right: 0;
  z-index: 3;
  background: #ffffff;
}

.reserve-overview-table thead .reserve-col-project,
.reserve-overview-table thead .reserve-col-sum {
  z-index: 5;
}

.reserve-project-link {
  font-weight: 600;
}

.reserve-overview-income-total-row td,
.reserve-overview-staffing-row td {
  border-top: 2px solid #b7c8d6;
  background: #f7fafc;
}

.reserve-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #ffffff;
}

.reserve-editor-col-month {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #ffffff;
}

.reserve-editor-col-version {
  position: sticky;
  right: 0;
  z-index: 4;
  background: #ffffff;
}

.reserve-new-tenant-picker {
  display: grid;
  grid-template-columns: minmax(180px, 260px) auto;
  gap: 0.75rem;
  align-items: end;
}

.reserve-new-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
}

.reserve-new-panel {
  border: 1px solid #d7e2eb;
  border-radius: 12px;
  padding: 1rem;
  background: #ffffff;
}

.reserve-manual-form {
  display: grid;
  gap: 0.75rem;
}

.reserve-controls {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(180px, 260px) 1fr;
  align-items: end;
  gap: 0.65rem 1rem;
}

.reserve-field {
  max-width: 260px;
}

.reserve-field .form-label {
  font-weight: 600;
}

.reserve-actions {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  gap: 0.65rem;
}

.reserve-actions .btn {
  white-space: nowrap;
}

.reserve-meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}

.reserve-status {
  align-self: end;
}

.reserve-summary {
  text-align: right;
  line-height: 1.1;
}

.reserve-summary strong {
  display: block;
  font-size: 1rem;
}

.reserve-link-cw {
  border: 1px solid #d7e2eb;
  border-radius: 12px;
  padding: 0.9rem;
  background: #ffffff;
}

.reserve-link-cw-form {
  display: grid;
  grid-template-columns: minmax(240px, 520px) auto;
  gap: 0.65rem;
  align-items: end;
}

.reserve-manual-name-form {
  display: grid;
  grid-template-columns: minmax(240px, 520px) auto;
  gap: 0.65rem;
  align-items: end;
}

.reserve-table td,
.reserve-table th {
  vertical-align: middle;
}

.reserve-table .reserve-input {
  min-width: 120px;
}

.plan-editor-links {
  display: inline-flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.plan-workspace {
  height: calc(100dvh - 74px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.plan-page-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.8rem;
  padding: 0.65rem 0.95rem 0.55rem;
  border-bottom: 1px solid #d7e2eb;
  background: #ffffff;
}

.plan-page-heading {
  min-width: 0;
}

.plan-page-title {
  line-height: 1.06;
}

.plan-page-meta {
  margin-top: 0.12rem;
  font-size: 1.06rem;
}

.plan-page-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.plan-scale-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-left: 1px solid #d7e2eb;
  padding-left: 0.55rem;
  margin-left: 0.1rem;
}

.plan-scale-label {
  margin: 0;
  font-size: 0.84rem;
  color: #5f6f7f;
  white-space: nowrap;
}

.plan-scale-select {
  min-width: 7rem;
  width: auto;
}

.plan-zoom-btn {
  min-width: 2.15rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-weight: 700;
}

.plan-page-status {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.35rem 0.45rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.plan-page-status.text-success {
  color: #0d6f3a;
}

.plan-page-status.text-danger {
  color: #962a2a;
}

.plan-editor-root {
  flex: 1;
  min-height: 0;
  padding: 0.3rem 0.55rem 0.55rem;
}

@media (min-width: 900px) {
  .footer-inner {
    flex-direction: row;
  }

  .sub-footer-inner {
    flex-direction: row;
  }
}

@media (max-width: 1050px) {
  .main-menu .menu-label {
    display: none;
  }
}

@media (max-width: 900px) {
  .header {
    position: static;
  }

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

  .main-menu {
    width: 100%;
    margin-left: 0;
  }

  .main-menu > ul {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .row-header {
    flex-direction: column;
  }

  .reserve-controls {
    grid-template-columns: 1fr;
  }

  .reserve-overview-filters {
    grid-template-columns: 1fr;
  }

  .reserve-overview-filter-actions {
    align-items: stretch;
  }

  .reserve-overview-wrap {
    max-height: none;
  }

  .reserve-new-tenant-picker {
    grid-template-columns: 1fr;
  }

  .reserve-new-layout {
    grid-template-columns: 1fr;
  }

  .reserve-field {
    max-width: none;
  }

  .reserve-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .reserve-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .reserve-summary {
    text-align: left;
  }

  .reserve-link-cw-form,
  .reserve-manual-name-form {
    grid-template-columns: 1fr;
  }

  .plan-shell {
    padding: 0;
  }

  .plan-workspace {
    height: calc(100dvh - 66px);
  }

  .plan-page-toolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.55rem 0.55rem 0.5rem;
  }

  .plan-page-title {
    font-size: 1.4rem;
    line-height: 1.18;
  }

  .plan-page-meta {
    font-size: 1rem;
  }

  .plan-page-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .plan-scale-controls {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }

  .plan-scale-select {
    min-width: 6.2rem;
  }

  .plan-page-status {
    padding-left: 0;
  }

  .plan-editor-root {
    padding: 0.25rem 0.3rem 0.35rem;
  }

  .project-table-wrap {
    max-height: none;
  }

  th,
  td {
    font-size: 0.9rem;
  }
}

/* ── Dashboard ─────────────────────────────────────────────────────────────── */

/* Full-width shell override for dashboard pages */
.dashboard-full-width {
  width: 100%;
  padding: 0 1.25rem;
  box-sizing: border-box;
}

/* Horizontal sub-nav between company-wide sections (Dekningsgrad, KPI -
   Live) -- see _dashboard_subnav.html. Plain Bootstrap nav-tabs, same
   pattern as the Innstillinger tab strip, so it reads as one consistent
   tab convention across the app instead of a bespoke sidebar widget. */
.dashboard-subnav {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.dashboard-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dashboard-subtitle {
  margin: 0.15rem 0 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.filter-active-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.87rem;
  cursor: pointer;
  color: var(--ink);
  user-select: none;
  white-space: nowrap;
}

.filter-input {
  width: 210px;
  padding: 0.38rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.87rem;
  background: var(--surface);
  color: var(--ink);
}

.filter-input:focus {
  outline: none;
  border-color: var(--profile-light-blue);
  box-shadow: 0 0 0 3px rgba(107, 177, 226, 0.18);
}

/* ── Table ── */

.coverage-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.coverage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  white-space: nowrap;
}

.coverage-table thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 0.48rem 0.65rem;
  text-align: left;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}

.coverage-table thead th.sortable {
  cursor: pointer;
}

.coverage-table thead th.sortable:hover {
  background: #e8eef3;
  color: var(--primary);
}

.coverage-table thead th.sort-asc,
.coverage-table thead th.sort-desc {
  color: var(--primary);
}

.sort-icon {
  display: inline-block;
  width: 1em;
  font-style: normal;
  opacity: 0.7;
}

.coverage-table td {
  padding: 0.42rem 0.65rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.coverage-table tbody tr:last-child td {
  border-bottom: none;
}

.coverage-table tbody tr:hover td {
  background: #f5f9fc;
}

.coverage-table tbody tr.row-inactive {
  opacity: 0.45;
}

.coverage-table .col-month {
  text-align: right;
  min-width: 58px;
  font-variant-numeric: tabular-nums;
}

.coverage-table .col-spark {
  width: 92px;
  padding: 0.2rem 0.65rem;
  vertical-align: middle;
}

.coverage-table .col-code {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.82rem;
}

.coverage-table .col-tenant {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.coverage-table .col-money {
  min-width: 132px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.coverage-table .col-imported {
  min-width: 124px;
  font-size: 0.82rem;
}

.coverage-table .col-type {
  min-width: 86px;
}

.coverage-table .is-negative {
  color: var(--error-text);
}

/* Frozen first column while the table scrolls horizontally. Needs an
   explicit opaque background (tbody/tfoot td have none by default) so
   columns scrolling underneath don't show through; thead th already gets
   one from the rule above. z-index only needs to beat the other
   (non-positioned) cells in the same row -- sticky already paints above
   static siblings regardless, this is just belt-and-suspenders. */
.coverage-table .sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--line);
  box-shadow: 2px 0 4px rgba(17, 44, 64, 0.05);
}

/* Higher than .col-resize-handle's z-index:3 -- otherwise a later
   column's handle (a positioned child at that column's own left/right
   edge) ties with the frozen header on z-index, and DOM order (it comes
   after the frozen column) lets it paint on top once that column has
   scrolled underneath the frozen one. */
.coverage-table thead th.sticky-col {
  z-index: 5;
}

.coverage-table tbody td.sticky-col,
.coverage-table tfoot td.sticky-col {
  background: var(--surface);
}

.coverage-table tbody tr:hover td.sticky-col {
  background: #f5f9fc;
}

/* KPI - Live has more (and longer, compound-word) column headers than
   Dekningsgrad -- scoped to .kpi-table so that table isn't affected.
   Multi-line + smaller header text lets a column's width follow its
   values (short numbers) instead of its header (long Norwegian compound
   words); ­ in the labels themselves (see dashboard_kpi.html) gives
   the browser a break point mid-word where there'd otherwise be none. */
.kpi-table thead th {
  white-space: normal;
  overflow-wrap: break-word;
  font-size: 0.7rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  vertical-align: bottom;
}

/* .col-money headers inherit text-align:right from the value-column rule
   below, to match the numbers -- but right-aligning two wrapped lines of
   very different length (e.g. "BRUTTO-" over "FORTJENESTE") makes the
   short line hug the edge while the long one spans the column, reading as
   inconsistent from one header to the next. Centering both lines instead
   reads as balanced regardless of how uneven the two segments are, and is
   the conventional choice for wrapped headers over right-aligned data
   (e.g. spreadsheets). */
.kpi-table thead th.col-money {
  text-align: center;
}

/* table-layout:auto sizes each column from its content's true minimum,
   then resizable_table.js freezes that as a pixel width on load. Without
   this, `width: 100%` on .coverage-table (below) makes the browser
   distribute leftover space proportionally to each header's *unwrapped*
   width -- so a column visibly wraps to two lines but still gets padded
   out to whatever a one-line header would have needed. No min-width here
   (unlike a typical full-bleed table): with 17 columns this table always
   needs to scroll anyway, so there's no "too few columns, leave an ugly
   gap" case to guard against, and adding one back would reintroduce the
   same proportional-stretch problem for any column whose one-line header
   is wider than its values (e.g. "Andel forfalt"). */
.kpi-table {
  width: auto;
}

/* ── Badges ── */

.badge {
  display: inline-block;
  padding: 0.13em 0.55em;
  border-radius: var(--radius-pill);
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-active {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.badge-inactive {
  background: var(--surface-2);
  color: var(--ink-muted);
}

.badge-neutral {
  background: #edf2f7;
  color: var(--ink-muted);
}

/* ── Settings: not explicitly set (showing the live default, or empty) ── */

.setting-unset {
  border-color: var(--profile-light-blue);
  background-color: var(--surface-2);
}

/* ── Resizable table columns (see static/js/resizable_table.js) ── */

.resizable-table th {
  position: relative;
}

.col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  user-select: none;
}

/* Always-visible divider line, so the handle reads as draggable before
   the user ever hovers it -- the wider box above is just the hit area. */
.col-resize-handle::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--line);
  border-radius: 1px;
}

.col-resize-handle:hover,
.col-resize-handle.is-resizing {
  background: rgba(107, 177, 226, 0.18);
}

.col-resize-handle:hover::after,
.col-resize-handle.is-resizing::after {
  top: 10%;
  bottom: 10%;
  width: 3px;
  background: var(--profile-light-blue);
}

/* A column capped to a sane default width so one long value (a project
   name, a company name) doesn't push every other column off-screen.
   Users can still widen it via the resize handle, or read the full value
   from the title tooltip. */
.col-name-capped {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}