/*
 * V1 visual refresh — presentation-only overrides.
 * Keep this file after each page's legacy styles so no behaviour, IDs,
 * handlers, routes, or data contracts need to change.
 */

:root {
  --ui-canvas: #f7f5f0;
  --ui-surface: #fffdf9;
  --ui-surface-muted: #f1eee7;
  --ui-border: #dedad0;
  --ui-border-strong: #c9c2b5;
  --ui-ink: #1d2733;
  --ui-ink-secondary: #5f6873;
  --ui-ink-muted: #8b929b;
  --ui-navy: #112334;
  --ui-navy-hover: #0b1b29;
  --ui-gold: #b68b3a;
  --ui-gold-soft: #f4ecd9;
  --ui-blue: #2e68c8;
  --ui-blue-hover: #2055aa;
  --ui-success: #287a58;
  --ui-warning: #b87917;
  --ui-danger: #bd4540;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-shadow-float: 0 12px 30px rgb(18 31 42 / 8%);
}

* { box-sizing: border-box; }

html,
body {
  background: var(--ui-canvas) !important;
  color: var(--ui-ink) !important;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
}

body::before,
body::after { display: none !important; }

.editorial-title,
.editorial-subtitle,
h1, h2, h3 {
  font-family: "Noto Serif SC", "Songti SC", serif;
  letter-spacing: -0.015em;
}

/* Shared controls */
button,
.btn-primary,
.btn-secondary,
.btn-accent,
input,
textarea,
select {
  border-radius: var(--ui-radius-sm) !important;
}

.btn-primary,
button.bg-primary,
button[class*="bg-primary"] {
  background: var(--ui-navy) !important;
  color: #fff !important;
  border: 1px solid var(--ui-navy) !important;
  box-shadow: none !important;
}

.btn-primary::before { display: none !important; }

.btn-primary:hover,
button.bg-primary:hover,
button[class*="bg-primary"]:hover {
  background: var(--ui-navy-hover) !important;
  border-color: var(--ui-navy-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-accent,
button[class*="bg-accent"] {
  background: var(--ui-gold) !important;
  color: #fff !important;
  border: 1px solid var(--ui-gold) !important;
  box-shadow: none !important;
}

.btn-accent:hover,
button[class*="bg-accent"]:hover {
  background: #98712c !important;
  border-color: #98712c !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Legacy accent utilities resolve to the same restrained gold family. */
[class*="bg-accent"] { background-color: var(--ui-gold) !important; }
[class*="text-accent"] { color: var(--ui-gold) !important; }
[class*="border-accent"] { border-color: var(--ui-gold) !important; }

.btn-secondary,
button[class*="border-primary"] {
  background: transparent !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-navy) !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
button[class*="border-primary"]:hover {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-navy) !important;
  border-color: var(--ui-navy) !important;
}

.form-input,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

.form-input:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  border-color: var(--ui-blue) !important;
  box-shadow: 0 0 0 3px rgb(46 104 200 / 12%) !important;
}

input::placeholder,
textarea::placeholder { color: var(--ui-ink-muted) !important; }

/* Main course workspace */
.sidebar {
  background: var(--ui-navy) !important;
  border-right: 1px solid rgb(255 255 255 / 10%) !important;
}

.sidebar-logo { border-bottom-color: rgb(255 255 255 / 12%) !important; }

.sidebar-logo {
  position: relative;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand-mark img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.nav-item {
  border-left: 3px solid transparent !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}

.nav-item:hover {
  background: rgb(255 255 255 / 6%) !important;
  border-left-color: rgb(182 139 58 / 55%) !important;
}

.nav-item.active {
  background: rgb(255 255 255 / 10%) !important;
  border-left-color: var(--ui-gold) !important;
}

.nav-item.completed { color: #e7dbc0 !important; }

.step-number.pending {
  background: rgb(255 255 255 / 7%) !important;
  border-color: rgb(255 255 255 / 13%) !important;
  color: #afbac5 !important;
}

.step-number.active,
.step-number.completed {
  background: var(--ui-gold) !important;
  box-shadow: none !important;
  color: #fff !important;
}

.main-content { background: var(--ui-canvas) !important; }
.main-content::before { background: var(--ui-border) !important; }

.top-bar {
  background: rgb(255 253 249 / 96%) !important;
  border-bottom-color: var(--ui-border) !important;
  backdrop-filter: none !important;
}

.card,
.modal-content {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

.card:hover {
  transform: none !important;
  box-shadow: 0 8px 18px rgb(18 31 42 / 5%) !important;
  border-color: var(--ui-border-strong) !important;
}

.modal-overlay {
  background: rgb(17 35 52 / 48%) !important;
  backdrop-filter: none !important;
}

/* AI actions: one restrained blue language. */
button[class*="bg-blue"],
button.text-blue-600,
.text-blue-600[class*="bg-"] {
  border-color: var(--ui-blue) !important;
}

a.text-blue-600,
.text-blue-600 { color: var(--ui-blue) !important; }

/* Toolbox */
.tool-card,
.glass-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
  border-radius: var(--ui-radius-md) !important;
}

.tool-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--ui-border-strong) !important;
  box-shadow: 0 8px 20px rgb(18 31 42 / 6%) !important;
}

.category-tab.active {
  background: var(--ui-navy) !important;
  color: #fff !important;
}

.category-tab:hover:not(.active) { background: var(--ui-surface-muted) !important; }

/* Toolbox categories use hierarchy instead of a rainbow of category colors. */
.tool-card [class*="bg-orange"],
.tool-card [class*="bg-blue"],
.tool-card [class*="bg-violet"],
.tool-card [class*="bg-purple"],
.tool-card [class*="bg-emerald"],
.tool-card [class*="bg-green"] {
  background-color: var(--ui-surface-muted) !important;
}

.tool-card [class*="text-orange"],
.tool-card [class*="text-blue"],
.tool-card [class*="text-violet"],
.tool-card [class*="text-purple"],
.tool-card [class*="text-emerald"],
.tool-card [class*="text-green"] {
  color: var(--ui-navy) !important;
}

.category-tab[class*="border-"] { border-left-color: var(--ui-gold) !important; }

.category-tab i { color: var(--ui-navy) !important; }

#category-tabs .category-tab {
  border-left-color: var(--ui-gold) !important;
}

#tools-container > .mb-8 > .flex > .w-10 {
  background-color: var(--ui-surface-muted) !important;
}

#tools-container > .mb-8 > .flex > .w-10 i {
  color: var(--ui-navy) !important;
}

.tool-card {
  border-left-color: var(--ui-gold) !important;
}

.tool-card .tool-icon {
  background: var(--ui-surface-muted) !important;
}

.tool-card .tool-icon i { color: var(--ui-navy) !important; }

.tool-card .mt-4 > span {
  background-color: var(--ui-gold-soft) !important;
  color: #8f6827 !important;
}

/* Admin surfaces */
table { border-color: var(--ui-border) !important; }
thead { background: var(--ui-surface-muted) !important; }
th { color: var(--ui-ink-secondary) !important; font-weight: 600 !important; }
tr { border-color: var(--ui-border) !important; }
tr:hover { background: #fbfaf6 !important; }

[class*="shadow"] { box-shadow: none; }
[class*="rounded-2xl"] { border-radius: var(--ui-radius-lg) !important; }
[class*="rounded-xl"] { border-radius: var(--ui-radius-md) !important; }

/* Status colors stay semantic and are not used as decoration. */
.text-orange-500, .text-orange-600 { color: var(--ui-gold) !important; }
.bg-orange-500, .bg-orange-600 { background-color: var(--ui-gold) !important; }
.text-emerald-500, .text-emerald-600 { color: var(--ui-success) !important; }
.text-red-500, .text-red-600 { color: var(--ui-danger) !important; }

@media (max-width: 1024px) {
  .sidebar { width: 240px !important; }
  .top-bar { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

@media (max-width: 720px) {
  body { overflow-x: hidden !important; }
  .sidebar { width: 72px !important; }
  .sidebar .sidebar-logo > div > div:last-child,
  .sidebar .nav-item > div:last-child,
  .sidebar h3,
  .sidebar p,
  .sidebar .text-sm,
  .sidebar .text-xs { display: none !important; }
  .sidebar .nav-item { justify-content: center !important; padding-left: .5rem !important; padding-right: .5rem !important; }
  .top-bar { padding-left: .75rem !important; padding-right: .75rem !important; }
}