/*
 * FIT Tracker legacy visual parity layer
 * Aligns the independently hosted interface with the archived FIT Tracker
 * direction: black ground, red accents, and restrained lightning motifs.
 * This file deliberately changes presentation only; it does not touch data,
 * authentication, API requests, or database field keys.
 */
:root {
  color-scheme: dark;
  --fit-black: #07080b;
  --fit-panel: #12141a;
  --fit-panel-raised: #191c24;
  --fit-text: #f5f7fa;
  --fit-muted: #a7adb9;
  --fit-red: #e3202b;
  --fit-red-bright: #ff4a53;
  
  --fit-red-deep: #7f1118;
  --fit-border: rgba(255, 255, 255, 0.12);
}

html,
body,
#root {
  min-height: 100%;
  background: var(--fit-black);
  color: var(--fit-text);
}

body {
  background:
    radial-gradient(circle at 86% 7%, rgba(227, 32, 43, 0.18), transparent 25rem),
    radial-gradient(circle at 12% 97%, rgba(127, 17, 24, 0.18), transparent 28rem),
    var(--fit-black);
}

.login,
.login-page {
  isolation: isolate;
  background:
    radial-gradient(circle at 83% 10%, rgba(227, 32, 43, 0.25), transparent 19rem),
    linear-gradient(145deg, #050608 0%, #101116 51%, #050608 100%) !important;
}

.login::before,
.login-page::before,
.app > aside::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  opacity: 0.82;
  background:
    linear-gradient(118deg, transparent 0 45%, rgba(255, 74, 83, 0.1) 45.1% 45.6%, transparent 45.7% 100%),
    linear-gradient(58deg, transparent 0 57%, rgba(255, 74, 83, 0.7) 57.1% 57.45%, transparent 57.6% 100%),
    linear-gradient(122deg, transparent 0 67%, rgba(227, 32, 43, 0.5) 67.1% 67.5%, transparent 67.65% 100%);
  filter: drop-shadow(0 0 7px rgba(227, 32, 43, 0.55));
}

.login::before,
.login-page::before {
  inset: 0;
}

.login-card,
.panel,
.client,
.metrics article,
.history-table,
.logo-preview,
.toast {
  background: linear-gradient(160deg, rgba(29, 31, 40, 0.98), rgba(14, 15, 20, 0.98)) !important;
  border-color: var(--fit-border) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
  color: var(--fit-text) !important;
}

.login-card {
  border-top: 2px solid var(--fit-red) !important;
}

.app {
  background: var(--fit-black) !important;
}

.app > aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(23, 24, 31, 0.98), rgba(6, 7, 10, 0.98)) !important;
  border-right-color: rgba(227, 32, 43, 0.54) !important;
}

.app > aside::before {
  inset: 0;
  z-index: -1;
  opacity: 0.6;
}

.workspace {
  background: transparent !important;
}

.brand,
.page-header h1,
.detail-header h1,
.client h2,
.panel h1,
.panel h2,
.panel h3,
.group-heading h2,
.fasting-panel h2 {
  color: var(--fit-text) !important;
}

.brand strong,
.brand b,
.eyebrow,
.client p,
.score-summary strong,
.metrics b,
.back,
a {
  color: var(--fit-red-bright) !important;
}

.app aside nav button,
.tabbar button,
.back,
.secondary {
  color: #e4e7eb !important;
}

.app aside nav button:hover,
.app aside nav button.active,
.tabbar button.active,
.group-filter button.selected {
  background: linear-gradient(100deg, var(--fit-red-deep), var(--fit-red)) !important;
  color: #fff !important;
}

button:not(.secondary):not(.back),
.file-button {
  background: linear-gradient(100deg, var(--fit-red-deep), var(--fit-red)) !important;
  color: #fff !important;
}

button:not(.secondary):not(.back):hover,
.file-button:hover {
  background: linear-gradient(100deg, #a91821, var(--fit-red-bright)) !important;
}

.secondary,
.group-filter button,
.status,
.active-status,
.tabbar,
.history-head {
  background: #242731 !important;
  border-color: var(--fit-border) !important;
  color: #e4e7eb !important;
}

input,
textarea,
select {
  background: #0c0e13 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--fit-text) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--fit-red-bright) !important;
  box-shadow: 0 0 0 3px rgba(227, 32, 43, 0.22) !important;
}

input::placeholder,
textarea::placeholder,
.subtle,
.history-list span,
.history-list small,
.empty,
.detail-header p,
.page-header p {
  color: var(--fit-muted) !important;
}

.client:hover {
  background: linear-gradient(160deg, #242731, #12141a) !important;
  border-color: rgba(255, 74, 83, 0.7) !important;
}

.history-table > div,
.trend-bars,
.tabbar,
.group-row {
  border-color: var(--fit-border) !important;
}

.trend-bars span {
  background: linear-gradient(#ff5660, #8f1019) !important;
  box-shadow: 0 0 12px rgba(227, 32, 43, 0.34);
}

.error {
  color: #ff737b !important;
}

@media (max-width: 880px) {
  .app > aside {
    border-bottom: 1px solid rgba(227, 32, 43, 0.54);
    border-right: 0;
  }
}

/* A local SVG keeps the lightning motif sharp at every screen density and
   avoids a dependency on any external visual asset. */
.login::before,
.login-page::before {
  background: url("/legacy-lightning.svg") center / cover no-repeat;
  filter: drop-shadow(0 0 12px rgba(227, 32, 43, 0.5));
  opacity: 0.88;
}