html[data-theme="win95"] {
  --page: #008080;
  --surface: #c0c0c0;
  --surface-soft: #dfdfdf;
  --ink: #000000;
  --muted: #202020;
  --line: #000000;
  --primary: #000080;
  --primary-dark: #00005f;
  --primary-soft: #ffffff;
  --warning: #7a4b00;
  --danger: #800000;
  --success: #006000;
  --shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #404040,
    inset -2px -2px 0 #808080,
    8px 8px 0 rgba(0, 0, 0, 0.22);
  color-scheme: light;
  font-family: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif;
}

html[data-theme="win95"] body {
  font-size: 13px;
}

html[data-theme="win95"] .app-header {
  top: 8px;
  margin: 10px;
  padding: 0;
  border: 2px solid #000000;
  background: var(--surface);
  box-shadow: var(--shadow);
}

html[data-theme="win95"] .brand {
  min-width: 230px;
  align-self: stretch;
  gap: 8px;
  padding: 5px 8px;
  color: #ffffff;
  background: linear-gradient(90deg, #000080, #1084d0);
}

html[data-theme="win95"] .brand-mark {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border: 1px solid #ffffff;
  border-radius: 0;
  background: #c0c0c0;
  color: #000000;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #404040;
}

html[data-theme="win95"] .brand-subtitle {
  color: #ffffff;
}

html[data-theme="win95"] .main-nav {
  padding: 5px;
}

html[data-theme="win95"] .button,
html[data-theme="win95"] .nav-menu summary,
html[data-theme="win95"] input[type="text"],
html[data-theme="win95"] input[type="password"],
html[data-theme="win95"] input[type="file"],
html[data-theme="win95"] select,
html[data-theme="win95"] textarea {
  border: 1px solid #000000;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #808080;
}

html[data-theme="win95"] .button,
html[data-theme="win95"] .nav-menu summary {
  min-height: 32px;
  padding: 6px 10px;
  background: var(--surface);
  color: #000000;
}

html[data-theme="win95"] .button:active,
html[data-theme="win95"] .nav-menu summary:active {
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset 1px 1px 0 #808080;
}

html[data-theme="win95"] .button-primary {
  background: #000080;
  color: #ffffff;
}

html[data-theme="win95"] .button-secondary,
html[data-theme="win95"] .button-danger {
  background: var(--surface);
  color: #000000;
}

html[data-theme="win95"] .button-danger {
  color: #800000;
  font-weight: 800;
}

html[data-theme="win95"] .panel,
html[data-theme="win95"] .empty-state,
html[data-theme="win95"] .placeholder-tile,
html[data-theme="win95"] .login-dialog,
html[data-theme="win95"] .modal-dialog,
html[data-theme="win95"] .nav-menu-panel,
html[data-theme="win95"] .warning-panel,
html[data-theme="win95"] .flash {
  border: 2px solid #000000;
  border-radius: 0;
  background: var(--surface);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #404040,
    inset -2px -2px 0 #808080;
}

html[data-theme="win95"] .panel-header {
  margin: -12px -12px 14px;
  padding: 5px 8px;
  color: #ffffff;
  background: linear-gradient(90deg, #000080, #1084d0);
}

html[data-theme="win95"] .panel {
  padding: 16px;
}

html[data-theme="win95"] .panel-header .eyebrow,
html[data-theme="win95"] .panel-header h2 {
  color: #ffffff;
}

html[data-theme="win95"] .eyebrow {
  color: #000080;
}

html[data-theme="win95"] .metadata-grid div,
html[data-theme="win95"] .stat-item,
html[data-theme="win95"] .grade-weight-toolbar,
html[data-theme="win95"] .goal-status,
html[data-theme="win95"] .classification-card,
html[data-theme="win95"] .count-pill,
html[data-theme="win95"] .tile-number,
html[data-theme="win95"] .choice-field,
html[data-theme="win95"] .date-field,
html[data-theme="win95"] .radio-card {
  border: 1px solid #000000;
  border-radius: 0;
  background: var(--surface-soft);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #808080;
}

html[data-theme="win95"] .nav-menu-panel {
  padding: 4px;
}

html[data-theme="win95"] .nav-menu-panel a:not(.button),
html[data-theme="win95"] .main-nav a:not(.button) {
  border-radius: 0;
}

html[data-theme="win95"] .data-table th,
html[data-theme="win95"] .data-table td {
  border-color: #808080;
}

html[data-theme="win95"] .data-table th {
  color: #000000;
  background: #dfdfdf;
}

html[data-theme="win95"] .data-table th.sortable-table-header:hover,
html[data-theme="win95"] .data-table th.sortable-table-header:focus-visible,
html[data-theme="win95"] .data-table th.sortable-table-header.is-sort-active {
  color: #ffffff;
  background: #000080;
}

html[data-theme="win95"] .data-table th.sortable-table-header:focus-visible {
  outline: 1px dotted #ffffff;
  outline-offset: -4px;
}

html[data-theme="win95"] .data-table th.sortable-table-header::after {
  color: currentColor;
  text-shadow: none;
}

html[data-theme="win95"] .collapsible-summary {
  width: auto;
  color: #000000;
  background: var(--surface);
}

html[data-theme="win95"] .collapsible-section[open] > .collapsible-summary {
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset 1px 1px 0 #808080;
}

html[data-theme="win95"] .classification-card strong {
  color: #000080;
}

html[data-theme="win95"] .chart-image {
  border: 2px solid #000000;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #404040;
}

html[data-theme="win95"] .chart-note {
  color: #202020;
}

html[data-theme="win95"] .grade-weight-toolbar {
  padding: 10px;
}

html[data-theme="win95"] .grade-weight-select {
  font-weight: 700;
}

html[data-theme="win95"] .grade-entry-table tr.keyboard-row-active td {
  background: #dfdfdf;
}

html[data-theme="win95"] .grade-entry-table input.keyboard-cell-active {
  outline: 1px dotted #000000;
  outline-offset: -4px;
  box-shadow:
    inset 1px 1px 0 #000000,
    inset -1px -1px 0 #ffffff;
}

html[data-theme="win95"] .goal-status {
  border-radius: 0;
}

html[data-theme="win95"] .goal-status.is-achieved {
  background: #d8f0d8;
  color: #006000;
}

html[data-theme="win95"] .goal-status.is-warning {
  background: #fff0c0;
  color: #7a4b00;
}

html[data-theme="win95"] .missing-grade,
html[data-theme="win95"] .present-grade {
  border: 1px solid #000000;
  border-radius: 0;
}

html[data-theme="win95"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.38);
}

@media (max-width: 860px) {
  html[data-theme="win95"] .brand {
    width: 100%;
  }
}