/* SafetyHub Media Center 2.8.0 — dashboard visual layer only. */

:root {
  --sh28-ink: #202426;
  --sh28-muted: #746e68;
  --sh28-copper: #a2663d;
  --sh28-line: #ddd7cf;
  --sh28-soft: #f7f6f4;
  --sh28-danger: #a42f2b;
  --sh28-success: #2f7d54;
}

.app-shell,
.app-shell button,
.app-shell input,
.app-shell select,
.app-shell textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.app-shell {
  color: var(--sh28-ink);
  background: #fff;
}

.app-shell .page-heading h1,
.app-shell .panel h1 {
  color: var(--sh28-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: 1.02;
  text-transform: lowercase;
}

.app-shell nav button.active {
  border-left-color: var(--sh28-copper);
}

.app-shell .primary,
.app-shell .upload-button {
  color: #fff;
  background: var(--sh28-ink);
}

.app-shell .panel {
  color: var(--sh28-ink);
  background: #fff;
}

body:has(.app-shell),
body:has(.login-page),
body:has(.first-access-page) {
  color: var(--sh28-ink);
  background: #fff;
}

.app-shell {
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
}

.app-shell aside {
  color: var(--sh28-ink);
  background: #fff;
  border-right: 1px solid var(--sh28-line);
}

.app-shell aside .logo {
  min-height: 78px;
  margin: 0 8px 26px;
  padding: 0;
}

.app-shell aside .logo::before {
  display: block;
  width: 210px;
  height: 62px;
  content: "";
  background: url("./safetyhub-lockup.svg") left center / contain no-repeat;
}

.app-shell aside .logo > * {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.app-shell nav {
  gap: 5px;
}

.app-shell nav button {
  min-height: 46px;
  padding: 11px 13px;
  border-left: 3px solid transparent;
  border-radius: 6px;
  color: var(--sh28-muted);
  background: transparent;
  font-size: .92rem;
  font-weight: 500;
}

.app-shell nav button:hover,
.app-shell nav button.active {
  color: var(--sh28-ink);
  background: var(--sh28-soft);
}

.app-shell .aside-footer {
  border-top-color: var(--sh28-line);
}

.app-shell .aside-footer small,
.app-shell .aside-footer button {
  color: var(--sh28-muted);
}

.app-shell .workspace {
  padding: 42px clamp(28px, 4vw, 64px) 56px;
  background: #fff;
}

.app-shell .page-heading,
.app-shell .panel > header {
  gap: 24px;
}

.app-shell .page-heading h1,
.app-shell .panel h1 {
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 4.75rem);
}

.app-shell .page-heading p:not(.eyebrow),
.app-shell .panel header p:not(.eyebrow),
.app-shell .muted,
.app-shell .empty,
.app-shell td small,
.app-shell .list article span,
.app-shell .screen-meta span,
.app-shell .screen-meta code {
  color: var(--sh28-muted);
}

.app-shell .eyebrow {
  color: var(--sh28-copper);
  font-weight: 600;
  letter-spacing: .12em;
}

.app-shell .metrics,
.app-shell .registration-metrics {
  gap: 0;
  border-top: 1px solid var(--sh28-line);
  border-bottom: 1px solid var(--sh28-line);
}

.app-shell .metrics article,
.app-shell .registration-metrics article,
.app-shell .panel,
.app-shell .media-grid article,
.app-shell .screen-card,
.app-shell .registration-diagnostic,
#root:has(.app-shell) .modal,
#root:has(.app-shell) .authority-notice {
  border: 1px solid var(--sh28-line);
  border-radius: 10px;
  color: var(--sh28-ink);
  background: #fff;
  box-shadow: 0 16px 45px rgba(32, 36, 38, .055);
}

.app-shell .metrics article,
.app-shell .registration-metrics article {
  padding: 22px 24px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  box-shadow: none;
}

.app-shell .metrics article:last-child,
.app-shell .registration-metrics article:last-child {
  border-right: 0;
}

.app-shell .metrics strong,
.app-shell .registration-metrics strong,
.app-shell .panel strong:not(.status) {
  color: var(--sh28-ink);
}

.app-shell .panel {
  padding: 28px;
}

.app-shell .panel h2,
.app-shell .registration-diagnostic h2,
.app-shell .agenda-detail h2,
.app-shell .registration-detail h2 {
  color: var(--sh28-ink);
  font-weight: 300;
  letter-spacing: -.035em;
  text-transform: lowercase;
}

.app-shell .primary,
.app-shell .upload-button,
#root:has(.app-shell) .primary,
#root:has(.app-shell) .upload-button {
  min-height: 44px;
  padding: .7rem 1.05rem;
  border: 1px solid var(--sh28-ink);
  border-radius: 6px;
  box-shadow: none;
  font-weight: 600;
}

.app-shell .primary:hover:not(:disabled),
.app-shell .upload-button:hover,
#root:has(.app-shell) .primary:hover:not(:disabled),
#root:has(.app-shell) .upload-button:hover {
  border-color: var(--sh28-copper);
  background: var(--sh28-copper);
}

.app-shell .secondary,
.app-shell .link-button,
#root:has(.app-shell) .secondary,
#root:has(.app-shell) .link-button {
  min-height: 42px;
  border: 1px solid var(--sh28-line);
  border-radius: 6px;
  color: var(--sh28-ink);
  background: #fff;
  box-shadow: none;
  font-weight: 600;
}

.app-shell .secondary:hover,
.app-shell .link-button:hover,
#root:has(.app-shell) .secondary:hover,
#root:has(.app-shell) .link-button:hover {
  border-color: var(--sh28-copper);
  color: var(--sh28-copper);
  background: #fff;
}

.app-shell .danger,
#root:has(.app-shell) .danger {
  min-height: 42px;
  border: 1px solid #e5b8b5;
  border-radius: 6px;
  color: var(--sh28-danger);
  background: #fff;
  box-shadow: none;
  font-weight: 600;
}

.app-shell button:focus-visible,
.app-shell a:focus-visible,
.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible,
#root:has(.app-shell) .modal button:focus-visible,
#root:has(.app-shell) .modal input:focus-visible,
#root:has(.app-shell) .modal select:focus-visible,
#root:has(.app-shell) .modal textarea:focus-visible {
  outline: 3px solid var(--sh28-copper);
  outline-offset: 3px;
}

.app-shell input,
.app-shell select,
.app-shell textarea,
#root:has(.app-shell) .modal input,
#root:has(.app-shell) .modal select,
#root:has(.app-shell) .modal textarea {
  border: 1px solid #bbb5ae;
  border-radius: 6px;
  color: var(--sh28-ink);
  background: #fff;
  box-shadow: none;
  font-weight: 500;
}

.app-shell .table-wrap,
.app-shell .agenda-calendar-wrap {
  border: 1px solid var(--sh28-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.app-shell th,
.app-shell td,
.app-shell .list article,
.app-shell .registration-breakdown li,
.app-shell .audit-list li,
.app-shell .registration-course-list article,
.app-shell .agenda-detail dl div,
.app-shell .registration-detail dl div {
  border-bottom-color: var(--sh28-line);
}

.app-shell th,
.app-shell .agenda-weekday,
.app-shell .registration-detail dt,
.app-shell .diagnostic-status {
  color: var(--sh28-muted);
  font-weight: 600;
}

.app-shell .screen-card {
  overflow: hidden;
}

.app-shell .screen-meta,
.app-shell .media-grid article {
  color: var(--sh28-ink);
  background: #fff;
}

.app-shell .media-grid img,
.app-shell .media-grid video {
  background: var(--sh28-soft);
}

#root:has(.app-shell) .modal-backdrop {
  background: rgba(32, 36, 38, .34);
  backdrop-filter: blur(2px);
}

#root:has(.app-shell) .modal {
  color: var(--sh28-ink);
  background: #fff;
}

.app-shell .agenda-toolbar,
.app-shell .registration-toolbar,
.app-shell .registration-filters {
  gap: 14px;
}

.app-shell .agenda-view-selector {
  border: 1px solid var(--sh28-line);
  border-radius: 6px;
  background: #fff;
}

.app-shell .agenda-view-selector button,
.app-shell .agenda-day-number {
  color: var(--sh28-muted);
}

.app-shell .agenda-view-selector button.active {
  color: #fff;
  background: var(--sh28-ink);
}

.app-shell .agenda-day,
.app-shell .agenda-event {
  border-color: var(--sh28-line);
  color: var(--sh28-ink);
  background: #fff;
}

.app-shell .agenda-day.today {
  border-color: var(--sh28-copper);
  box-shadow: inset 0 0 0 1px var(--sh28-copper);
}

.app-shell .agenda-day.today .agenda-day-number {
  color: var(--sh28-copper);
  background: transparent;
}

.app-shell .agenda-day.outside-month,
.app-shell .agenda-weekday {
  background: var(--sh28-soft);
}

.app-shell .agenda-event.room-1,
.app-shell .agenda-event.room-2,
.app-shell .agenda-event.room-3 {
  border-left-color: var(--sh28-copper);
  background: #fff;
}

.app-shell .date-chip,
.app-shell .role-chip,
.app-shell .status,
.app-shell .readiness-chip {
  border: 1px solid var(--sh28-line);
  color: var(--sh28-muted);
  background: #fff;
  font-weight: 600;
}

.app-shell .status.online,
.app-shell .readiness-chip.ready,
.app-shell .success {
  border-color: #c8dfd1;
  color: var(--sh28-success);
  background: #eef6f1;
}

.app-shell .status.simulated,
.app-shell .readiness-chip.pending,
.app-shell .readiness-blockers {
  border-color: #dac798;
  color: #76521f;
  background: #fff9ea;
}

.app-shell .status.off,
.app-shell .error,
.app-shell .registration-denied {
  border-color: #e5b8b5;
  color: var(--sh28-danger);
  background: #fff3f2;
}

.login-page,
.first-access-page {
  min-height: 100vh;
  color: var(--sh28-ink);
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.login-card,
.first-access-card {
  border: 1px solid var(--sh28-line);
  border-radius: 10px;
  color: var(--sh28-ink);
  background: #fff;
  box-shadow: 0 22px 60px rgba(32, 36, 38, .08);
}

.login-card h1,
.first-access-card h1 {
  color: var(--sh28-ink);
  font-weight: 300;
  letter-spacing: -.045em;
}

.login-card input,
.first-access-card input,
.first-access-card select {
  border-color: #bbb5ae;
  border-radius: 6px;
  color: var(--sh28-ink);
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.login-card .primary,
.first-access-card .primary {
  color: #fff;
  background: var(--sh28-ink);
  border-color: var(--sh28-ink);
  border-radius: 6px;
}

/* Profiles and permissions use the same approved dashboard language. */
body:has(.profiles-shell) {
  color: var(--sh28-ink);
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.profiles-shell,
.profiles-shell button,
.profiles-shell input,
.profiles-shell select,
.profiles-shell textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.profiles-shell {
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
  color: var(--sh28-ink);
  background: #fff;
}

.profiles-aside {
  padding: 24px 18px;
  color: var(--sh28-muted);
  background: #fff;
  border-right: 1px solid var(--sh28-line);
}

.profiles-aside .brand {
  display: block;
  min-height: 78px;
  padding: 0 8px 22px;
  color: var(--sh28-ink);
}

.profiles-aside .brand::before {
  display: block;
  width: 210px;
  height: 62px;
  content: "";
  background: url("./safetyhub-lockup.svg") left center / contain no-repeat;
}

.profiles-aside .brand > * {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.profiles-aside nav {
  gap: 3px;
}

.profiles-aside nav a,
.profiles-aside .back-link {
  padding: 11px 12px;
  border-radius: 6px;
  color: var(--sh28-muted);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.profiles-aside nav a:hover,
.profiles-aside nav a:focus-visible {
  color: var(--sh28-ink);
  background: var(--sh28-soft);
}

.profiles-aside .back-link {
  color: var(--sh28-copper);
}

.profiles-main {
  width: min(1400px, 100%);
  padding: 46px clamp(28px, 5vw, 76px) 72px;
}

.profiles-shell .page-heading h1,
.profiles-shell .section-heading h2 {
  color: var(--sh28-ink);
  font-weight: 300;
  letter-spacing: -.04em;
  text-transform: lowercase;
}

.profiles-shell .page-heading p:not(.eyebrow),
.profiles-shell .section-heading p:not(.eyebrow) {
  color: var(--sh28-muted);
}

.profiles-shell .eyebrow {
  color: var(--sh28-copper);
  font-weight: 700;
  letter-spacing: .13em;
}

.profiles-shell .button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 650;
}

.profiles-shell .button.primary {
  color: #fff;
  background: var(--sh28-ink);
  border-color: var(--sh28-ink);
}

.profiles-shell .button.secondary {
  color: var(--sh28-ink);
  background: #fff;
  border-color: var(--sh28-line);
}

.profiles-shell .button.danger {
  color: var(--sh28-danger);
  background: #fff;
  border-color: #e5b8b5;
}

.profiles-shell .button:focus-visible,
.profiles-shell .text-button:focus-visible,
.profiles-shell input:focus-visible,
.profiles-shell textarea:focus-visible,
.profiles-shell select:focus-visible {
  outline: 2px solid var(--sh28-copper);
  outline-offset: 2px;
}

.profiles-shell .notice {
  border: 1px solid #c9ded2;
  border-radius: 6px;
  color: var(--sh28-success);
  background: #f2f8f4;
}

.profiles-shell .notice.error {
  border-color: #e5b8b5;
  color: var(--sh28-danger);
  background: #fff3f2;
}

.profiles-shell .section-card {
  padding: 28px;
  border: 1px solid var(--sh28-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(32, 36, 38, .045);
}

.profiles-shell .role-card {
  border-color: var(--sh28-line);
  border-radius: 8px;
  color: var(--sh28-ink);
  background: #fff;
}

.profiles-shell .role-card.selected {
  border-color: var(--sh28-copper);
  box-shadow: inset 3px 0 0 var(--sh28-copper);
}

.profiles-shell .role-card h3,
.profiles-shell .role-editor h3,
.profiles-shell .exception-summary strong,
.profiles-shell .exception-row strong,
.profiles-shell .audit-list strong {
  color: var(--sh28-ink);
}

.profiles-shell .role-card p,
.profiles-shell .role-card footer,
.profiles-shell .optional,
.profiles-shell .permission-checkbox small,
.profiles-shell .exception-row small,
.profiles-shell .audit-list span,
.profiles-shell .audit-list time,
.profiles-shell .empty {
  color: var(--sh28-muted);
}

.profiles-shell .role-editor {
  border-color: var(--sh28-line);
  border-radius: 8px;
  background: var(--sh28-soft);
}

.profiles-shell .role-editor label,
.profiles-shell .exception-picker label,
.profiles-shell .role-editor legend {
  color: var(--sh28-ink);
  font-weight: 650;
}

.profiles-shell input,
.profiles-shell textarea,
.profiles-shell select {
  border-color: #bbb5ae;
  border-radius: 6px;
  color: var(--sh28-ink);
  background: #fff;
}

.profiles-shell .permission-checkbox,
.profiles-shell .exception-row {
  border-color: var(--sh28-line);
  border-radius: 6px;
  color: var(--sh28-ink);
  background: #fff;
}

.profiles-shell .exception-summary {
  padding-left: 14px;
  border-left: 3px solid var(--sh28-copper);
  border-radius: 3px;
  color: var(--sh28-muted);
  background: var(--sh28-soft);
}

.profiles-shell .small-button,
.profiles-shell .text-button {
  color: var(--sh28-copper);
}

.profiles-shell .tag {
  padding: 0;
  border-radius: 0;
  color: var(--sh28-success);
  background: transparent;
}

.profiles-shell .tag.master {
  color: var(--sh28-copper);
  background: transparent;
}

.profiles-shell .audit-list li {
  border-color: var(--sh28-line);
}

.profiles-shell .access-message h1 {
  color: var(--sh28-ink);
  font-weight: 300;
  letter-spacing: -.04em;
  text-transform: lowercase;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .app-shell aside .logo::before {
    width: 176px;
  }

  .app-shell .workspace {
    padding-inline: 28px;
  }

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

  .profiles-aside .brand::before {
    width: 176px;
  }
}

@media (max-width: 720px) {
  .app-shell .workspace {
    padding: 24px 18px 38px;
  }

  .app-shell .panel,
  .app-shell .registration-diagnostic,
  #root:has(.app-shell) .modal,
  .login-card,
  .first-access-card {
    padding: 22px;
  }

  .profiles-shell {
    display: block;
  }

  .profiles-aside {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--sh28-line);
  }

  .profiles-aside .brand {
    min-height: 58px;
    padding-bottom: 12px;
  }

  .profiles-aside .brand::before {
    height: 48px;
  }

  .profiles-main {
    padding: 28px 18px 50px;
  }

  .app-shell .primary,
  .app-shell .secondary,
  .app-shell .danger,
  .app-shell .upload-button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  .app-shell *::before,
  .app-shell *::after,
  .login-page *,
  .first-access-page *,
  .profiles-shell * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}