/* =====================================================================
   SMARTPLANS5 — OFFICIAL BRAND SYSTEM
   Approved brand direction:
   - Pure white background
   - Black Times New Roman typography
   - Logo-derived blue/cyan/purple/magenta/orange highlights
   This file is loaded LAST and intentionally overrides legacy themes.
   ===================================================================== */

:root {
  --sp5-white: #FFFFFF;
  --sp5-black: #000000;
  --sp5-blue-deep: #073B9A;
  --sp5-blue: #006BFF;
  --sp5-cyan: #00CFFF;
  --sp5-purple: #6D28D9;
  --sp5-magenta: #E600FF;
  --sp5-orange: #FF6A00;
  --sp5-line: #B7D9FF;
  --sp5-soft-blue: #F3F8FF;
  --sp5-soft-cyan: #F0FCFF;
  --sp5-soft-purple: #F8F4FF;
  --sp5-soft-orange: #FFF7F0;

  /* Legacy aliases redirected to the approved SmartPlans5 palette. */
  --brand-teal: var(--sp5-blue) !important;
  --brand-teal-light: var(--sp5-cyan) !important;
  --brand-teal-dark: var(--sp5-blue-deep) !important;
  --brand-teal-deep: #052866 !important;
  --brand-gold: var(--sp5-orange) !important;
  --brand-gold-light: #FF9A4D !important;
  --brand-gold-dark: #C84B00 !important;
  --brand-ink: var(--sp5-black) !important;
  --brand-ink-soft: rgba(0,0,0,.72) !important;
  --brand-ink-muted: rgba(0,0,0,.56) !important;
  --brand-canvas: var(--sp5-white) !important;
  --brand-canvas-2: var(--sp5-white) !important;
  --brand-canvas-3: var(--sp5-soft-blue) !important;
  --brand-line: var(--sp5-blue) !important;
  --brand-line-gold: var(--sp5-orange) !important;
  --brand-line-teal: var(--sp5-cyan) !important;

  --accent-teal: var(--sp5-blue) !important;
  --accent-teal-light: var(--sp5-cyan) !important;
  --accent-teal-dark: var(--sp5-blue-deep) !important;
  --accent-gold: var(--sp5-orange) !important;
  --accent-gold-light: #FF9A4D !important;
  --accent-amber: var(--sp5-orange) !important;
  --accent-sky: var(--sp5-cyan) !important;
  --accent-indigo: var(--sp5-purple) !important;
  --accent-emerald: var(--sp5-blue) !important;
  --accent-rose: var(--sp5-magenta) !important;

  --bg-deep: var(--sp5-white) !important;
  --bg-surface: var(--sp5-white) !important;
  --bg-surface-2: var(--sp5-white) !important;
  --text-primary: var(--sp5-black) !important;
  --text-secondary: var(--sp5-black) !important;
  --text-muted: #404040 !important;
}

html,
body {
  margin: 0;
  background: var(--sp5-white) !important;
  color: var(--sp5-black) !important;
  font-family: "Times New Roman", Times, serif !important;
  color-scheme: light !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 100000;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--sp5-blue-deep) 0%,
    var(--sp5-blue) 28%,
    var(--sp5-cyan) 48%,
    var(--sp5-purple) 68%,
    var(--sp5-magenta) 84%,
    var(--sp5-orange) 100%);
}

body :where(div, section, article, aside, nav, header, footer, main, form,
  p, span, label, button, input, textarea, select, option, table, thead,
  tbody, tfoot, tr, th, td, ul, ol, li, h1, h2, h3, h4, h5, h6, a,
  small, strong, em, blockquote, code, pre) {
  font-family: "Times New Roman", Times, serif !important;
}

body,
#app-shell,
#step-content,
.app-shell,
.page,
.page-shell,
.main,
.content,
.workspace,
.dashboard,
.modal,
.modal-content,
.dialog,
.panel,
.card,
.section,
.surface {
  background-color: var(--sp5-white) !important;
}

.bg-grid,
.bg-grid-lines,
.bg-orb,
.animated-background,
.gradient-orb,
.noise-overlay {
  display: none !important;
  background: none !important;
}

#app-shell {
  max-width: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#app-header,
header,
.topbar,
.toolbar,
.navbar {
  background: var(--sp5-white) !important;
  color: var(--sp5-black) !important;
  border-color: var(--sp5-line) !important;
  box-shadow: 0 3px 18px rgba(0,107,255,.08) !important;
}

#app-header .header-row {
  background: var(--sp5-white) !important;
  border-bottom: 1px solid #DCEBFF !important;
}

#app-header .header-row--brand {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  min-height: 66px !important;
}

#app-header .header-logo {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

#app-header .header-logo > img {
  width: min(440px, 42vw) !important;
  height: auto !important;
  max-height: 64px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important;
}

#app-header .header-logo .logo-zoom {
  background: var(--sp5-white) !important;
  border: 1px solid var(--sp5-cyan) !important;
  box-shadow: 0 18px 60px rgba(0,107,255,.22) !important;
}

#app-header .header-logo .logo-zoom img {
  max-width: min(85vw, 1100px) !important;
  height: auto !important;
}

h1, h2, h3, h4, h5, h6,
.title, .heading, .section-title, .card-title,
.chrome-text, .brand-title {
  color: var(--sp5-black) !important;
  font-family: "Times New Roman", Times, serif !important;
  text-shadow: none !important;
}

p, label, li, dt, dd, th, td,
.text-primary, .text-secondary, .text-muted,
.subtitle, .description, .helper-text {
  color: var(--sp5-black) !important;
}

a,
.link,
button.link-button {
  color: var(--sp5-blue-deep) !important;
  text-decoration-color: var(--sp5-cyan) !important;
}

a:hover,
.link:hover {
  color: var(--sp5-purple) !important;
}

.header-row-label,
.eyebrow,
.kicker,
.overline {
  color: var(--sp5-blue-deep) !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
}

button,
.btn,
.header-btn,
.action-btn,
input[type="button"],
input[type="submit"] {
  background: var(--sp5-white) !important;
  color: var(--sp5-black) !important;
  border: 1px solid var(--sp5-blue) !important;
  border-radius: 7px !important;
  box-shadow: 0 2px 8px rgba(0,107,255,.08) !important;
  text-shadow: none !important;
}

button:hover,
.btn:hover,
.header-btn:hover,
.action-btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  color: var(--sp5-black) !important;
  border-color: var(--sp5-purple) !important;
  background: linear-gradient(90deg, var(--sp5-soft-blue), var(--sp5-soft-purple)) !important;
  box-shadow: 0 4px 14px rgba(109,40,217,.14) !important;
}

.btn-primary,
.header-btn--primary,
.primary,
button.primary,
button[type="submit"] {
  background: linear-gradient(90deg, #EAF4FF 0%, #EFFCFF 52%, #F8F2FF 100%) !important;
  color: var(--sp5-black) !important;
  border: 1px solid var(--sp5-blue) !important;
  box-shadow: inset 4px 0 0 var(--sp5-cyan), 0 3px 12px rgba(0,107,255,.12) !important;
}

.btn-danger,
.header-btn--stop,
.danger {
  background: #FFF5FB !important;
  color: var(--sp5-black) !important;
  border-color: var(--sp5-magenta) !important;
}

input,
textarea,
select,
.input,
.form-control {
  background: var(--sp5-white) !important;
  color: var(--sp5-black) !important;
  border: 1px solid #8DBEFF !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #555555 !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(0,207,255,.34) !important;
  outline-offset: 2px !important;
  border-color: var(--sp5-blue) !important;
}

.card,
.panel,
.section,
.widget,
.tile,
.stat-card,
.result-card,
.upload-zone,
.drop-zone,
.auth-shell,
.modal-content,
.dialog,
.popover,
.dropdown-menu {
  background: var(--sp5-white) !important;
  color: var(--sp5-black) !important;
  border: 1px solid #CFE4FF !important;
  box-shadow: 0 8px 28px rgba(7,59,154,.07) !important;
}

.card::before,
.panel::before,
.section::before {
  border-color: var(--sp5-cyan) !important;
}

table {
  background: var(--sp5-white) !important;
  color: var(--sp5-black) !important;
  border-color: #BFD9FF !important;
}

th {
  background: var(--sp5-soft-blue) !important;
  color: var(--sp5-black) !important;
  border-color: #BFD9FF !important;
}

td,
tr {
  background: var(--sp5-white) !important;
  color: var(--sp5-black) !important;
  border-color: #DCEBFF !important;
}

tr:hover td {
  background: var(--sp5-soft-cyan) !important;
}

.badge,
.pill,
.tag,
.chip,
.status,
.status-badge {
  color: var(--sp5-black) !important;
  background: var(--sp5-soft-blue) !important;
  border: 1px solid var(--sp5-cyan) !important;
}

.success,
.status-success,
.badge-success {
  color: var(--sp5-black) !important;
  background: var(--sp5-soft-cyan) !important;
  border-color: var(--sp5-cyan) !important;
}

.warning,
.status-warning,
.badge-warning {
  color: var(--sp5-black) !important;
  background: var(--sp5-soft-orange) !important;
  border-color: var(--sp5-orange) !important;
}

.error,
.status-error,
.badge-error {
  color: var(--sp5-black) !important;
  background: #FFF5FB !important;
  border-color: var(--sp5-magenta) !important;
}

progress,
.progress,
.progress-bar {
  accent-color: var(--sp5-blue) !important;
}

.progress-fill,
.progress-bar-fill {
  background: linear-gradient(90deg,
    var(--sp5-blue), var(--sp5-cyan), var(--sp5-purple), var(--sp5-magenta), var(--sp5-orange)) !important;
}

hr,
.divider {
  border-color: #CFE4FF !important;
}

code,
pre {
  color: var(--sp5-black) !important;
  background: var(--sp5-soft-blue) !important;
  border-color: #CFE4FF !important;
}

::selection {
  background: rgba(0,207,255,.30) !important;
  color: var(--sp5-black) !important;
}

::-webkit-scrollbar-track { background: var(--sp5-white) !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sp5-blue), var(--sp5-purple)) !important;
  border: 2px solid var(--sp5-white) !important;
}

/* Login screen: exact logo, white card, black typography, logo-derived accents. */
.auth-shell {
  max-width: 560px !important;
  background: var(--sp5-white) !important;
  border: 1px solid #BFD9FF !important;
  border-top: 4px solid var(--sp5-blue) !important;
  box-shadow: 0 20px 60px rgba(7,59,154,.12) !important;
}
.auth-logo-wrap img {
  width: min(460px, 82vw) !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Keep canvases and plan images visually faithful; branding must not recolor drawings. */
canvas,
.plan-canvas,
.pdf-canvas,
img.plan-image,
.plan-viewer img {
  filter: none !important;
}

@media (max-width: 760px) {
  #app-header .header-logo > img {
    width: min(330px, 78vw) !important;
    max-height: 52px !important;
  }
  #app-header .header-row { padding-left: 14px !important; padding-right: 14px !important; }
}