/* Visual baseline 2026-11-10.
   This file is the final shell layer while legacy page styles are migrated.
   It intentionally contains layout tokens and shell rules only; business
   component rules remain in their existing modules. */
:root {
  --io-sidebar-width: 252px;
  --io-shell-navy: #123b52;
  --io-shell-navy-2: #174b65;
  --io-shell-navy-3: #215f79;
  --io-shell-text: #f2f7f8;
  --io-shell-muted: #b9ced5;
  --io-brand-orange: #f47a35;
  --io-canvas: #f4f7f9;
  --io-line-soft: #dbe4e8;
  --io-content-max: 1480px;
}

* { box-sizing: border-box; }

html, body { min-width: 320px; }

body {
  background: var(--io-canvas);
  color: #17384b;
}

.app-shell {
  display: block;
  min-height: 100svh;
  background: var(--io-canvas);
}

/* Desktop navigation is intentionally always expanded. */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--io-sidebar-width);
  height: 100svh;
  min-height: 0;
  padding: 18px 12px 14px;
  overflow: hidden;
  color: var(--io-shell-text);
  background: var(--io-shell-navy);
  border: 0;
}

/* The brand is a clean area, not a card or boxed tile. */
.brand {
  flex: 0 0 auto;
  width: 100%;
  height: 66px;
  margin: 0 0 20px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.brand img {
  display: block;
  width: 194px;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
  object-position: left center;
}

/* Estado vazio não deve parecer um percentual calculado. */
.readiness-empty-state {
  min-height: 122px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 20px;
  border: 1px dashed var(--io-line-soft);
  border-radius: 10px;
  background: #f8fafb;
  color: #496171;
}
.readiness-empty-state strong { color: #17384b; font-size: 14px; }
.readiness-empty-state span { max-width: 520px; font-size: 12px; line-height: 1.5; }
.readiness--data[hidden], .readiness--empty[hidden] { display: none; }

.sidebar .context-label,
.sidebar .nav-section {
  color: var(--io-shell-muted);
}

.sidebar .context-label {
  padding: 0 12px 7px;
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 700;
}

.context-switcher {
  flex: 0 0 auto;
  width: 100%;
  min-height: 40px;
  margin: 0 0 14px;
  padding: 0 12px;
  color: #fff;
  background: var(--io-shell-navy-2);
  border: 1px solid rgb(214 235 240 / 25%);
  border-radius: 8px;
}

.sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgb(214 235 240 / 35%) transparent;
}

.sidebar nav::-webkit-scrollbar { width: 7px; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: rgb(214 235 240 / 35%);
  border-radius: 999px;
}

.nav-section {
  margin-top: 16px;
  padding: 10px 12px 6px;
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 700;
}

.nav-item {
  min-height: 38px;
  margin: 2px 0;
  padding: 9px 12px;
  color: var(--io-shell-text);
  border-radius: 7px;
  gap: 10px;
  line-height: 1.3;
}

.nav-item:hover,
.nav-item:focus-visible { color: #fff; background: rgb(255 255 255 / 9%); }

.nav-item.active,
.nav-item[aria-current='page'] {
  color: #0d5d43;
  background: #e3f3ec;
  font-weight: 700;
}

.nav-item b {
  background: #ffe5d8;
  color: #a9522d;
}

.nav-item b[hidden] { display: none; }

.sidebar-footer {
  flex: 0 0 auto;
  margin-top: 12px;
  padding: 13px 12px 0;
  color: var(--io-shell-muted);
  border-top: 1px solid rgb(214 235 240 / 18%);
}

.main-content {
  width: calc(100% - var(--io-sidebar-width));
  min-width: 0;
  min-height: 100svh;
  margin-left: var(--io-sidebar-width);
  padding: 0 clamp(20px, 3vw, 46px) 48px;
  overflow: visible;
}

.topbar {
  height: 72px;
  margin: 0 calc(clamp(20px, 3vw, 46px) * -1);
  padding: 0 clamp(20px, 3vw, 46px);
  background: #fff;
  border-bottom: 1px solid var(--io-line-soft);
}

#overview > .page-heading {
  width: 100%;
  max-width: var(--io-content-max);
  min-height: 270px;
  margin: 26px auto 24px;
  padding: 30px 34px;
  display: flex;
  align-items: center;
  gap: 32px;
  color: #fff;
  background: linear-gradient(135deg, #0d3b50 0%, #105565 58%, #087a59 100%);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgb(13 48 64 / 13%);
}

#overview > .page-heading > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

#overview > .page-heading h1 {
  max-width: none;
  margin: 8px 0 6px;
  color: #fff;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.16;
  overflow-wrap: normal;
  word-break: normal;
}

#overview > .page-heading .eyebrow,
#overview > .page-heading .muted { color: #d7eef0; }

#overview > .page-heading .overview-hero-action {
  width: min(100%, 520px);
  margin-top: 18px;
}

#overview > .page-heading .overview-readiness-badge {
  flex: 0 0 122px;
  width: 122px;
  height: 122px;
  min-width: 122px;
  min-height: 122px;
  margin: 0 18px 0 0;
}

#overview > .page-heading .overview-readiness-badge--empty {
  width: 148px;
  min-width: 148px;
  height: auto;
  min-height: 74px;
  padding: 14px 16px;
  border-color: rgb(215 238 240 / 42%);
  background: rgb(255 255 255 / 4%);
  border-radius: 12px;
  border-width: 1px;
}

#overview > .metric-grid,
#overview > .content-grid { align-items: stretch; }
#overview > .metric-grid > .metric-card,
#overview > .content-grid > .panel { min-width: 0; height: 100%; }
#overview > .metric-grid > .metric-card { min-height: 142px; }
#overview > .content-grid > .panel { min-height: 322px; }
.mini-bars i[hidden] { display: none; }
.severity[aria-hidden='true'] { display: none; }

/* Shared journey tracker used by Onboarding, Implantação and Kit Auditoria. */
.readiness-tracker-card {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--io-line-soft);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(16 43 61 / 5%);
}

.readiness-tracker__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.readiness-tracker__header .io-card__title { font-size: 20px; }
.readiness-tracker__header .io-card__description { max-width: 720px; }

.readiness-tracker__stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px;
  background: #f3f7f9;
  border: 1px solid var(--io-line-soft);
  border-radius: 9px;
}

.readiness-tracker__stages span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  color: #607786;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.readiness-tracker__stages b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #607786;
  background: #e3edf1;
  border-radius: 50%;
  font-size: 11px;
}

.readiness-tracker__stages .is-active { color: #0d5d43; }
.readiness-tracker__stages .is-active b { color: #fff; background: #0d5d43; }
.readiness-tracker__stages .is-done { color: #26714f; }
.readiness-tracker__stages .is-done b { color: #fff; background: #36a36e; }

.readiness-tracker__score {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 16px;
  background: #f7fafb;
  border: 1px solid var(--io-line-soft);
  border-radius: 9px;
}

.readiness-tracker__score > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.readiness-tracker__score strong { color: #0d5d43; font-size: 24px; }
.readiness-tracker__score span { color: #607786; font-size: 13px; }
.readiness-tracker__bar { height: 9px; overflow: hidden; background: #dbe6ea; border-radius: 999px; }
.readiness-tracker__bar span { display: block; height: 100%; background: #36b96b; border-radius: inherit; transition: width .2s ease; }
.readiness-tracker__bar--empty { background: #e5ecef; }

.readiness-tracker__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
  color: #607786;
  font-size: 12px;
}

.readiness-tracker__legend span { display: inline-flex; align-items: center; gap: 6px; }
.readiness-tracker__legend i { width: 8px; height: 8px; background: #d5e0e5; border-radius: 50%; }
.readiness-tracker__legend i.is-progress { background: #f2a341; }
.readiness-tracker__legend i.is-done { background: #36a36e; }
.readiness-tracker__legend i.is-blocked { background: #c65b51; }
.readiness-tracker__empty { min-height: 112px; margin-bottom: 18px; background: #f8fafb; }
.readiness-tracker__empty span { display: block; margin-top: 4px; font-size: 12px; }

/* The three operational screens share the same page rhythm. */
.onboarding-view,
.implementation-view,
.audits-view { max-width: var(--io-content-max); margin-inline: auto; }

.onboarding-view > .page-heading,
.implementation-view > .page-heading,
.audits-view > .page-heading {
  padding-top: 30px;
  padding-bottom: 20px;
}

.onboarding-view .implementation-summary,
.implementation-view .implementation-summary,
.audits-view .implementation-summary {
  gap: 12px;
}

.onboarding-view .implementation-summary .io-card,
.implementation-view .implementation-summary .io-card,
.audits-view .implementation-summary .io-card {
  min-height: 104px;
  padding: 16px 18px;
  border-color: var(--io-line-soft);
  box-shadow: 0 1px 4px rgb(16 43 61 / 4%);
}

.onboarding-view .implementation-summary .metric-label,
.implementation-view .implementation-summary .metric-label,
.audits-view .implementation-summary .metric-label { color: #6a7e88; }

.onboarding-view .implementation-summary strong,
.implementation-view .implementation-summary strong,
.audits-view .implementation-summary strong { color: #17384b; }

.implementation-phases,
.audit-package-panel { margin-top: 20px; }

.phase-list { display: grid; gap: 8px; }
.phase-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--io-line-soft);
  border-radius: 9px;
  background: #fff;
}

.phase-row--current { border-color: #efc29e; background: #fffaf5; }
.phase-index { display: inline-grid; place-items: center; width: 26px; height: 26px; color: #55717d; background: #e8f0f3; border-radius: 8px; font-size: 12px; font-weight: 700; }
.phase-row--done .phase-index { color: #fff; background: #36a36e; }
.phase-row strong { display: block; color: #17384b; font-size: 13px; }
.phase-row small { display: block; margin-top: 3px; color: #6a7e88; font-size: 11px; }
.phase-row .progress { margin-top: 7px; }

.onboarding-view .io-table-wrap,
.implementation-view .io-table-wrap,
.audits-view .io-table-wrap { box-shadow: 0 1px 4px rgb(16 43 61 / 4%); }

.onboarding-view .io-table th,
.implementation-view .io-table th,
.audits-view .io-table th { background: #f3f7f9; }

.audit-package-metrics { margin-top: 16px; }

@media (max-width: 720px) {
  .phase-row { grid-template-columns: 30px minmax(0, 1fr); }
  .phase-row > .io-badge { grid-column: 2; justify-self: start; }
}

.readiness-tracker__group { position: relative; margin-top: 18px; }
.readiness-tracker__milestone { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.readiness-tracker__milestone > span { width: 10px; height: 10px; background: #123f52; border-radius: 50%; }
.readiness-tracker__milestone h3 { margin: 0; color: #31586a; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.readiness-tracker__items { display: grid; gap: 8px; padding-left: 14px; border-left: 2px solid #d7e4e8; }

.readiness-tracker__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d8e3e7;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgb(16 43 61 / 4%);
}

.readiness-tracker__item.is-done { background: #fbfefc; border-color: #c6e6d2; }
.readiness-tracker__check { display: inline-grid; place-items: center; width: 20px; height: 20px; color: #fff; border: 1px solid #7593a0; border-radius: 50%; font-size: 12px; }
.readiness-tracker__item.is-done .readiness-tracker__check { background: #36a36e; border-color: #36a36e; }
.readiness-tracker__item-main { display: grid; min-width: 0; gap: 3px; }
.readiness-tracker__item-main strong { overflow-wrap: anywhere; color: #17384b; font-size: 13px; }
.readiness-tracker__owner, .readiness-tracker__due, .readiness-tracker__link { color: #6a7e88; font-size: 11px; }
.readiness-tracker__link { color: #2b6c88; }
.readiness-tracker__status { min-height: 36px; width: 142px; padding: 0 9px; font-size: 12px; }
.readiness-tracker__action, .readiness-tracker__detail-action { min-height: 34px; padding-inline: 11px; white-space: nowrap; font-size: 12px; }

@media (max-width: 900px) {
  .readiness-tracker__item { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .readiness-tracker__status, .readiness-tracker__action, .readiness-tracker__detail-action { grid-column: 2 / -1; justify-self: start; }
}

@media (max-width: 620px) {
  .readiness-tracker-card { padding: 16px; }
  .readiness-tracker__header { flex-direction: column; gap: 10px; }
  .readiness-tracker__stages { grid-template-columns: 1fr; }
  .readiness-tracker__stages span { justify-content: flex-start; padding-left: 12px; }
  .readiness-tracker__item { grid-template-columns: 24px minmax(0, 1fr); }
  .readiness-tracker__status, .readiness-tracker__action, .readiness-tracker__detail-action { grid-column: 2; width: 100%; }
}

@media (max-width: 1000px) {
  :root { --io-sidebar-width: 232px; }
}

@media (max-width: 720px) {
  .sidebar {
    width: min(304px, 88vw);
    background: #fff;
    color: var(--io-ink);
    border-right: 1px solid var(--io-line-soft);
    box-shadow: 12px 0 28px rgb(31 45 53 / 12%);
  }
  .sidebar .brand { background: #fff; border-bottom-color: var(--io-line-soft); }
  .sidebar .context-switcher { background: #fff; color: var(--io-ink); border-color: #cfd9dd; }
  .sidebar .nav-item { color: #53636b; }
  .sidebar .nav-item:hover { background: #f1f5f5; color: var(--io-ink); }
  .sidebar .nav-item.active,
  .sidebar .nav-item[aria-current='page'] { background: #26343b; color: #fff; }
  .sidebar-footer { border-top-color: var(--io-line-soft); color: var(--io-shell-muted); }
}

@media (max-width: 720px) {
  .sidebar {
    width: min(304px, 88vw);
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 12px 0 28px rgb(13 48 64 / 18%);
  }
  .mobile-nav-open .sidebar { transform: translateX(0); }
  .main-content { width: 100%; margin-left: 0; padding-inline: 16px; }
  .topbar { margin-inline: -16px; padding-inline: 16px; }
  #overview > .page-heading { align-items: flex-start; flex-direction: column; padding: 24px; }
  #overview > .page-heading .overview-readiness-badge { align-self: center; margin: 0; }
}

/* Light shell direction — visual-only revision based on the current reference. */
:root {
  --io-sidebar-width: 248px;
  --io-shell-navy: #ffffff;
  --io-shell-navy-2: #f6f8f9;
  --io-shell-navy-3: #eef2f3;
  --io-shell-text: #27343b;
  --io-shell-muted: #66757d;
  --io-canvas: #f7f9fa;
  --io-line-soft: #dfe6e9;
  --io-ink: #1f2d35;
  --io-accent: #0b6b4b;
  --io-accent-soft: #e7f3ee;
  color-scheme: light;
}

html { overflow-x: hidden; }
body { color: var(--io-ink); background: var(--io-canvas); }
.app-shell { background: var(--io-canvas); }

.login-screen {
  background: #f7f9fa;
}

.login-card {
  border: 1px solid #dfe7e9;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(31 45 53 / 7%);
}

.login-eyebrow { color: #6d7b82; letter-spacing: .12em; }
.login-card h1 { color: #1f2d35; }
.login-subtitle,
.login-demo-note { color: #68777e; }
.login-form input { border-color: #cfd9dd; border-radius: 7px; }
.login-form input:focus { border-color: #7aa998; box-shadow: 0 0 0 3px rgb(11 107 75 / 12%); }
.login-submit { background: #0b6b4b; border-radius: 7px; box-shadow: none; }
.login-submit:hover { background: #09583f; }

.io-empty,
.io-error,
.io-loading,
#app-shell [data-empty-state] {
  border-radius: 8px;
}

.sidebar {
  width: var(--io-sidebar-width);
  padding: 18px 10px 14px;
  color: var(--io-shell-text);
  background: #fff;
  border-right: 1px solid var(--io-line-soft);
  box-shadow: 1px 0 0 rgb(31 45 53 / 2%);
}

.brand {
  height: 54px;
  margin: 0 0 18px;
  padding: 0 12px;
  justify-content: flex-start;
  border-bottom: 1px solid #edf1f2;
}

.brand img {
  width: 166px;
  height: 38px;
  mix-blend-mode: multiply;
}

.sidebar .context-label,
.sidebar .nav-section { color: #6e7d84; }
.sidebar .context-label { padding-inline: 12px; }

.context-switcher {
  color: var(--io-ink);
  background: #fff;
  border-color: #cfd9dd;
}

.sidebar nav { scrollbar-color: #cbd7db transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: #cbd7db; }

/* Brand alignment: keep the light shell visually balanced and logo legible. */
.sidebar .brand {
  height: 82px;
  margin: 0 0 20px;
  padding: 10px 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--io-line-soft);
}

.sidebar .brand img {
  display: block;
  width: 208px;
  max-width: 100%;
  height: 52px;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}

.nav-section {
  margin-top: 18px;
  padding: 12px 12px 6px;
  letter-spacing: .04em;
}

.nav-item {
  min-height: 38px;
  color: #42535b;
  border-radius: 7px;
}

.nav-item:hover,
.nav-item:focus-visible { color: var(--io-ink); background: #f1f5f5; }

.nav-item.active,
.nav-item[aria-current='page'] {
  color: #fff;
  background: #26343b;
  font-weight: 600;
}

.nav-item b { background: #fbe8df; color: #a64c2e; }
.sidebar-footer { color: #718087; border-top-color: #e6ecee; }
.nav-item:focus-visible,
.context-switcher:focus-visible,
.icon-button:focus-visible,
.avatar:focus-visible { outline: 3px solid rgb(11 107 75 / 25%); outline-offset: 2px; }

.main-content {
  width: calc(100% - var(--io-sidebar-width));
  margin-left: var(--io-sidebar-width);
  padding-inline: clamp(24px, 4vw, 56px);
}

.topbar {
  margin-inline: calc(clamp(24px, 4vw, 56px) * -1);
  padding-inline: clamp(24px, 4vw, 56px);
  background: #fff;
  border-bottom: 1px solid var(--io-line-soft);
}

#overview > .page-heading {
  min-height: 244px;
  margin-top: 28px;
  padding: 30px 34px;
  color: var(--io-ink);
  background: #fff;
  border: 1px solid var(--io-line-soft);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgb(31 45 53 / 5%);
}

#overview > .page-heading h1 { color: var(--io-ink); }
#overview > .page-heading #greeting-title { color: var(--io-ink); }
#overview > .page-heading .eyebrow,
#overview > .page-heading .muted { color: #68777e; }
#overview > .page-heading .overview-hero-action { background: #f5f8f8; border: 1px solid #e1e8ea; }
#overview > .page-heading .overview-hero-action,
#overview > .page-heading .overview-hero-action strong,
#overview > .page-heading .overview-hero-action span,
#overview > .page-heading .overview-hero-action p { color: var(--io-ink); }
#overview > .page-heading .overview-readiness-badge--empty { color: #607078; background: #f8fafb; border-color: #dce5e8; }
#overview > .page-heading .overview-readiness-badge,
#overview > .page-heading .overview-readiness-badge strong,
#overview > .page-heading .overview-readiness-badge span,
#overview > .page-heading .overview-readiness-badge small { color: #31444c; }

.io-card,
.panel,
.metric-card,
.readiness-tracker-card { box-shadow: 0 2px 8px rgb(31 45 53 / 4%); }

.page-heading h1,
.io-card__title,
.panel-heading h2 { color: var(--io-ink); }

.io-button--primary { background: var(--io-accent); border-color: var(--io-accent); }
.io-button--primary:hover { background: #09583f; border-color: #09583f; }

/* Shared page composition: the page header is open, while data blocks carry the boundary. */
.onboarding-view > .page-heading,
.implementation-view > .page-heading,
.audits-view > .page-heading,
.diagnostic-view > .page-heading,
.documents-view > .page-heading {
  margin-top: 24px;
  padding: 16px 0 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.onboarding-view .io-card,
.implementation-view .io-card,
.audits-view .io-card,
.diagnostic-view .io-card,
.documents-view .io-card {
  border-color: #e1e7e9;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgb(31 45 53 / 4%);
}

.onboarding-view .io-table-wrap,
.implementation-view .io-table-wrap,
.audits-view .io-table-wrap,
.diagnostic-view .io-table-wrap,
.documents-view .io-table-wrap {
  border-color: #e1e7e9;
  border-radius: 8px;
  box-shadow: none;
}

.onboarding-view .io-table th,
.implementation-view .io-table th,
.audits-view .io-table th,
.diagnostic-view .io-table th,
.documents-view .io-table th {
  background: #f7f9fa;
  color: #63727a;
}

.onboarding-view .io-table tbody tr:hover,
.implementation-view .io-table tbody tr:hover,
.audits-view .io-table tbody tr:hover,
.diagnostic-view .io-table tbody tr:hover,
.documents-view .io-table tbody tr:hover { background: #fbfcfc; }

.readiness-tracker-card { border-color: #e1e7e9; box-shadow: 0 1px 5px rgb(31 45 53 / 4%); }
.readiness-tracker__stages { background: #f7f9fa; border-color: #e1e7e9; }
.readiness-tracker__item { border-color: #e1e7e9; box-shadow: none; }
.readiness-tracker__milestone > span { background: #26343b; }

@media (max-width: 720px) {
  .main-content { padding-inline: 16px; }
  .topbar { margin-inline: -16px; padding-inline: 16px; }
  .onboarding-view > .page-heading,
  .implementation-view > .page-heading,
  .audits-view > .page-heading,
  .diagnostic-view > .page-heading,
  .documents-view > .page-heading { padding-top: 20px; }
}

/* Shared controls: quiet surfaces, consistent density and readable focus. */
#app-shell input,
#app-shell select,
#app-shell textarea {
  color: #27343b;
  background: #fff;
  border: 1px solid #cfd9dd;
  border-radius: 7px;
}

#app-shell input::placeholder,
#app-shell textarea::placeholder { color: #8a989f; }
#app-shell input:focus,
#app-shell select:focus,
#app-shell textarea:focus { border-color: #7aa998; outline: 0; box-shadow: 0 0 0 3px rgb(11 107 75 / 12%); }

#app-shell .io-button,
#app-shell button:not(.icon-button):not(.avatar):not(.more) { border-radius: 7px; }
#app-shell .io-button--secondary { color: #42535b; background: #fff; border-color: #cfd9dd; }
#app-shell .io-button--secondary:hover { background: #f5f8f8; border-color: #aebfc5; }

#app-shell .io-table th { height: 42px; padding: 10px 14px; }
#app-shell .io-table td { height: 50px; padding: 11px 14px; border-bottom-color: #edf1f2; }
#app-shell .io-table tbody tr:last-child td { border-bottom: 0; }

#app-shell .task-toolbar,
#app-shell .diagnostic-filters,
#app-shell .audits-filters { gap: 8px; }
#app-shell .task-toolbar { border-bottom: 1px solid #edf1f2; }

#app-shell .io-drawer,
#app-shell dialog,
#app-shell .modal,
#app-shell .dialog {
  border: 1px solid #dce5e8;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgb(31 45 53 / 16%);
}

#app-shell .io-drawer__header,
#app-shell dialog > header,
#app-shell .modal-header,
#app-shell .dialog-header { border-bottom-color: #edf1f2; }

@media (max-width: 720px) {
  #app-shell .task-toolbar,
  #app-shell .diagnostic-filters,
  #app-shell .audits-filters { align-items: stretch; flex-direction: column; }
  #app-shell .task-toolbar > *,
  #app-shell .diagnostic-filters > *,
  #app-shell .audits-filters > * { width: 100%; }
}

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

/* Administrative and commercial surfaces use the same quiet data-workspace language. */
.settings-view > .page-heading,
.admin-view > .page-heading,
.commercial-view > .page-heading,
.fiscal-view > .page-heading,
.finance-view > .page-heading,
.reports-view > .page-heading {
  margin-top: 24px;
  padding: 16px 0 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.settings-view .settings-grid,
.settings-view .settings-directory { gap: 12px; }
.settings-view .io-card,
.admin-view .io-card,
.commercial-view .io-card,
.fiscal-view .io-card,
.finance-view .io-card,
.reports-view .io-card {
  border-color: #e1e7e9;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgb(31 45 53 / 4%);
}

.settings-view .io-card:hover,
.admin-view .io-card:hover,
.commercial-view .io-card:hover,
.fiscal-view .io-card:hover,
.finance-view .io-card:hover,
.reports-view .io-card:hover { border-color: #cbd9dc; }

.settings-view .io-table-wrap,
.admin-view .io-table-wrap,
.commercial-view .io-table-wrap,
.fiscal-view .io-table-wrap,
.finance-view .io-table-wrap,
.reports-view .io-table-wrap { border-color: #e1e7e9; box-shadow: none; }

.settings-view .io-table th,
.admin-view .io-table th,
.commercial-view .io-table th,
.fiscal-view .io-table th,
.finance-view .io-table th,
.reports-view .io-table th { background: #f7f9fa; color: #63727a; }

.settings-view .io-table tbody tr:hover,
.admin-view .io-table tbody tr:hover,
.commercial-view .io-table tbody tr:hover,
.fiscal-view .io-table tbody tr:hover,
.finance-view .io-table tbody tr:hover,
.reports-view .io-table tbody tr:hover { background: #fbfcfc; }

.requirements-view > .page-heading,
.documents-view > .page-heading,
.evidence-view > .page-heading,
.risks-view > .page-heading,
.capa-view > .page-heading,
.task-view > .page-heading {
  margin-top: 24px;
  padding: 16px 0 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.requirements-view .io-card,
.documents-view .io-card,
.evidence-view .io-card,
.risks-view .io-card,
.capa-view .io-card,
.task-view .io-card {
  border-color: #e1e7e9;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgb(31 45 53 / 4%);
}

.requirements-view .io-table-wrap,
.documents-view .io-table-wrap,
.evidence-view .io-table-wrap,
.risks-view .io-table-wrap,
.capa-view .io-table-wrap,
.task-view .io-table-wrap { border-color: #e1e7e9; box-shadow: none; }

.requirements-view .io-table th,
.documents-view .io-table th,
.evidence-view .io-table th,
.risks-view .io-table th,
.capa-view .io-table th,
.task-view .io-table th { background: #f7f9fa; color: #63727a; }

@media (max-width: 1000px) {
  :root { --io-sidebar-width: 232px; }
}