/*
 * Secure Code Workspace — product identity.
 *
 * Palette sampled from the product artwork in docs/ (the "Stop Code Theft"
 * sheet). The scheme is deliberately
 * a deep navy with cyan-to-indigo accents: this is a security console that
 * operators keep open all day, and it should read as infrastructure, not as a
 * marketing page.
 *
 * Everything here is a token plus a small number of AdminLTE overrides. No
 * external font and no CDN — the portal is expected to run where arbitrary
 * egress is blocked, and tests/test_console.py fails the build if a template
 * introduces one.
 *
 * Two rules to keep if you edit this:
 *   1. State colour means the same thing on every page — success/warning/danger
 *      map to the workspace and job states, so a red badge is always "needs a
 *      human".
 *   2. Brand accents never carry state on their own. Cyan is identity, not
 *      "good"; an operator must not have to guess whether cyan means healthy.
 */

:root {
  /* --- brand ---------------------------------------------------------- */
  --scw-ink:            #000C23;  /* page ground */
  --scw-ink-2:          #000F28;  /* panels */
  --scw-ink-3:          #001942;  /* raised surfaces, footer band */
  --scw-cyan:           #38CDF5;
  --scw-cyan-bright:    #52E8FF;
  --scw-azure:          #40A3FF;
  --scw-blue:           #3281EE;
  --scw-indigo:         #6785EF;
  --scw-violet:         #463691;
  --scw-mist:           #BFE4FF;  /* light text on dark */
  --scw-slate:          #8CA6C4;  /* secondary text on dark */

  --scw-gradient: linear-gradient(100deg,
                    var(--scw-cyan) 0%,
                    var(--scw-azure) 48%,
                    var(--scw-indigo) 100%);

  /* --- map onto Bootstrap/AdminLTE ------------------------------------ */
  --bs-primary:        #1668c4;
  --bs-primary-rgb:    22, 104, 196;
  --bs-link-color:     #1668c4;
  --bs-link-hover-color: #0f4f99;
  --bs-border-radius:  .5rem;
}

/* The console in dark mode is the brand's native form. */
[data-bs-theme="dark"] {
  --bs-body-bg:            var(--scw-ink);
  --bs-body-color:         #DCE9F7;
  --bs-secondary-color:    var(--scw-slate);
  --bs-emphasis-color:     #FFFFFF;
  --bs-border-color:       rgba(56, 205, 245, .16);
  --bs-primary:            var(--scw-azure);
  --bs-primary-rgb:        64, 163, 255;
  --bs-link-color:         var(--scw-cyan);
  --bs-link-hover-color:   var(--scw-cyan-bright);
  --bs-card-bg:            var(--scw-ink-2);
}

/* ---------------------------------------------------------------------- */
/* Sidebar: the brand surface                                             */
/* ---------------------------------------------------------------------- */
.app-sidebar {
  background: linear-gradient(185deg, #00112E 0%, var(--scw-ink) 62%) !important;
  border-right: 1px solid rgba(56, 205, 245, .14);
}

.sidebar-brand {
  background: transparent !important;
  border-bottom: 1px solid rgba(56, 205, 245, .16);
  /* The hairline of brand gradient under the wordmark is the one piece of
     decoration in the chrome; it marks the product, not a state. */
  box-shadow: inset 0 -2px 0 0 transparent;
  position: relative;
}
.sidebar-brand::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--scw-gradient);
  opacity: .9;
}

.sidebar-brand .brand-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding-block: .875rem;
  overflow: hidden;
}
.sidebar-brand .brand-image {
  width: 34px;
  height: 34px;
  opacity: 1 !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}
/* AdminLTE sets .brand-text at 20px and nowrap from a more specific selector,
   which clipped the three-word product name against the sidebar edge. Matched
   here at equal-or-greater specificity so it wraps to two lines instead. */
.app-sidebar .sidebar-brand .brand-link .brand-text {
  font-weight: 600;
  font-size: .9375rem !important;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: #FFFFFF;
  white-space: normal !important;
  min-width: 0;
  flex: 1 1 auto;
}
.sidebar-brand .brand-text small {
  display: block;
  font-weight: 400;
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--scw-cyan);
}

.app-sidebar .nav-link {
  border-radius: .4rem;
  margin-inline: .375rem;
  color: #B9CBE0;
}
.app-sidebar .nav-link:hover {
  background: rgba(64, 163, 255, .12);
  color: #FFFFFF;
}
.app-sidebar .nav-link.active {
  background: rgba(64, 163, 255, .18) !important;
  color: #FFFFFF !important;
  /* The active marker is a cyan edge rather than a filled block: it stays
     legible next to the state colours a row may also carry. */
  box-shadow: inset 3px 0 0 0 var(--scw-cyan);
}
.app-sidebar .nav-header {
  color: var(--scw-slate);
  letter-spacing: .09em;
  font-size: .6875rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Chrome                                                                 */
/* ---------------------------------------------------------------------- */
.app-header {
  border-bottom: 1px solid rgba(56, 205, 245, .16);
}

.app-footer {
  border-top: 1px solid rgba(56, 205, 245, .16);
  font-size: .8125rem;
}

/* Cards: outline variants get the brand edge, state variants keep theirs. */
.card {
  border-radius: .625rem;
}
.card-primary.card-outline {
  border-top: 3px solid transparent;
  border-image: var(--scw-gradient) 1;
}

.btn-primary {
  background: var(--scw-gradient);
  border: none;
  color: #04121F;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(100deg, var(--scw-cyan-bright) 0%,
                              var(--scw-azure) 50%, var(--scw-indigo) 100%);
  color: #04121F;
}
.btn-primary:disabled {
  background: var(--scw-ink-3);
  color: var(--scw-slate);
}

.btn-outline-primary {
  border-color: var(--scw-azure);
  color: var(--scw-azure);
}
.btn-outline-primary:hover {
  background: var(--scw-azure);
  color: #04121F;
}

/* KPI boxes read as one family with the sidebar. */
.small-box {
  border: 1px solid rgba(56, 205, 245, .18);
  border-radius: .625rem;
}
.small-box.text-bg-primary {
  background: linear-gradient(135deg, #10336B 0%, #0A1F45 100%) !important;
  color: #EAF6FF !important;
}

/* ---------------------------------------------------------------------- */
/* Login: the one page a person sees before they are anybody              */
/* ---------------------------------------------------------------------- */
.scw-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  /* The faint radial wash echoes the artwork without needing an image, so
     the page still renders on a host with no static files warmed up. */
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(64, 163, 255, .18), transparent 60%),
    radial-gradient(900px 520px at 92% 108%, rgba(103, 133, 239, .20), transparent 60%),
    var(--scw-ink);
  color: #DCE9F7;
}

.scw-login__panel {
  width: 100%;
  max-width: 26rem;
  background: rgba(0, 15, 40, .86);
  border: 1px solid rgba(56, 205, 245, .22);
  border-radius: .875rem;
  padding: 2rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.scw-login__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .25rem;
}
.scw-login__brand img { width: 44px; height: 44px; }
.scw-login__brand strong {
  font-size: 1.125rem;
  font-weight: 650;
  color: #FFFFFF;
  line-height: 1.15;
}
/* The kicker only - scoped so the uppercase does not inherit into the
   product name inside the same wrapper. */
.scw-login__brand strong + span,
.scw-login__brand span > span {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--scw-cyan);
}
.scw-login__brand strong { text-transform: none; }

.scw-login__rule {
  height: 2px;
  background: var(--scw-gradient);
  border-radius: 2px;
  margin: 1.25rem 0 1.5rem;
}

.scw-login__tagline {
  font-size: .8125rem;
  color: var(--scw-slate);
  margin-bottom: 0;
}
.scw-login__tagline b { color: var(--scw-mist); font-weight: 500; }

.scw-login .form-control {
  background: rgba(0, 25, 66, .55);
  border-color: rgba(56, 205, 245, .25);
  color: #EAF6FF;
}
.scw-login .form-control:focus {
  background: rgba(0, 25, 66, .75);
  border-color: var(--scw-cyan);
  box-shadow: 0 0 0 .2rem rgba(56, 205, 245, .18);
  color: #FFFFFF;
}
.scw-login .form-label { color: var(--scw-mist); font-size: .8125rem; }
.scw-login .btn { width: 100%; }

.scw-login__note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(56, 205, 245, .16);
  font-size: .75rem;
  color: var(--scw-slate);
}

/* ---------------------------------------------------------------------- */
/* Utilities used by the console templates                                */
/* ---------------------------------------------------------------------- */
.scw-gradient-text {
  background: var(--scw-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scw-rule {
  height: 2px;
  background: var(--scw-gradient);
  border: 0;
  border-radius: 2px;
  opacity: 1;
}

/* Light mode is supported but secondary: the tokens above keep contrast
   without repainting every surface, so an operator who prefers it is not
   reading white text on white. */
[data-bs-theme="light"] .app-sidebar,
:root:not([data-bs-theme="dark"]) .app-sidebar {
  background: linear-gradient(185deg, #00112E 0%, var(--scw-ink) 62%) !important;
}