/* USG Ishimura - VoidAuth custom theme
 * Overrides Angular Material Design 3 system tokens.
 */

:root {
  /* Ishimura palette */
  --usg-black:          #080c14;
  --usg-surface:        #0e1320;
  --usg-surface-light:  #141a2a;
  --usg-white:          #a0aec0;
  --usg-bright-white:   #dce4f0;
  --usg-cyan:           #3a9fbf;
  --usg-bright-cyan:    #6ec8e6;
  --usg-magenta:        #7b68c8;
  --usg-bright-magenta: #a78bfa;
  --usg-green:          #3d9b8f;
  --usg-bright-green:   #5eead4;
  --usg-yellow:         #b89040;
  --usg-bright-yellow:  #fbbf60;
  --usg-red:            #8b3a50;
  --usg-bright-red:     #f0708a;

  /* ── MD3 system token overrides ─────────────────── */
  --mat-sys-surface:           var(--usg-black);
  --mat-sys-surface-container:           var(--usg-surface);
  --mat-sys-surface-container-low:       var(--usg-surface);
  --mat-sys-surface-container-high:      var(--usg-surface-light);
  --mat-sys-surface-container-highest:   var(--usg-surface-light);
  --mat-sys-surface-variant:             var(--usg-surface-light);
  --mat-sys-on-surface:                  var(--usg-white);
  --mat-sys-on-surface-variant:          var(--usg-white);
  --mat-sys-background:                  var(--usg-black);
  --mat-sys-on-background:               var(--usg-white);
  --mat-sys-outline:                     var(--usg-cyan);
  --mat-sys-outline-variant:             var(--usg-cyan);

  --mat-sys-primary:                     var(--usg-bright-cyan);
  --mat-sys-on-primary:                  var(--usg-black);
  --mat-sys-primary-container:           var(--usg-cyan);
  --mat-sys-on-primary-container:        var(--usg-black);

  --mat-sys-secondary:                   var(--usg-bright-green);
  --mat-sys-on-secondary:                var(--usg-black);
  --mat-sys-secondary-container:         var(--usg-green);
  --mat-sys-on-secondary-container:      var(--usg-black);

  --mat-sys-tertiary:                    var(--usg-bright-magenta);
  --mat-sys-on-tertiary:                 var(--usg-black);
  --mat-sys-tertiary-container:          var(--usg-magenta);
  --mat-sys-on-tertiary-container:       var(--usg-black);

  --mat-sys-error:                       var(--usg-bright-red);
  --mat-sys-on-error:                    var(--usg-black);
  --mat-sys-error-container:             var(--usg-red);
  --mat-sys-on-error-container:          var(--usg-bright-white);

  --mat-sys-inverse-surface:             var(--usg-bright-cyan);
  --mat-sys-inverse-on-surface:          var(--usg-black);

  /* Fonts — push the whole UI to Courier */
  --mat-sys-body-medium-font:    "Courier New", "Lucida Console", monospace;
  --mat-sys-body-large-font:     "Courier New", "Lucida Console", monospace;
  --mat-sys-body-small-font:     "Courier New", "Lucida Console", monospace;
  --mat-sys-label-large-font:    "Courier New", "Lucida Console", monospace;
  --mat-sys-label-medium-font:   "Courier New", "Lucida Console", monospace;
  --mat-sys-label-small-font:    "Courier New", "Lucida Console", monospace;
  --mat-sys-title-large-font:    "Courier New", "Lucida Console", monospace;
  --mat-sys-title-medium-font:   "Courier New", "Lucida Console", monospace;
  --mat-sys-title-small-font:    "Courier New", "Lucida Console", monospace;
  --mat-sys-headline-large-font: "Courier New", "Lucida Console", monospace;
  --mat-sys-headline-medium-font:"Courier New", "Lucida Console", monospace;
  --mat-sys-headline-small-font: "Courier New", "Lucida Console", monospace;
  --mat-sys-display-large-font:  "Courier New", "Lucida Console", monospace;
  --mat-sys-display-medium-font: "Courier New", "Lucida Console", monospace;
  --mat-sys-display-small-font:  "Courier New", "Lucida Console", monospace;
}

/* ── Base ────────────────────────────────────────── */
html {
  background: var(--usg-black) !important;
  color: var(--usg-white) !important;
  font-family: "Courier New", "Lucida Console", monospace !important;
}

body {
  background: transparent !important;
  color: var(--usg-white) !important;
  font-family: "Courier New", "Lucida Console", monospace !important;
}

/* Let the stars show through Material's outer containers */
mat-sidenav-container,
mat-drawer-container,
.mat-sidenav-container,
.mat-drawer-container,
mat-drawer-content,
.mat-drawer-content,
app-root {
  background: transparent !important;
}

/* ── Starfield background (animated) ─────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1.5px 1.5px at 7%  12%, #dce4f0ff, transparent 50%),
    radial-gradient(1px   1px   at 14% 38%, #dce4f0ee, transparent 50%),
    radial-gradient(2px   2px   at 22% 65%, #dce4f0ff, transparent 50%),
    radial-gradient(1px   1px   at 31% 18%, #dce4f0dd, transparent 50%),
    radial-gradient(1.5px 1.5px at 38% 47%, #dce4f0ff, transparent 50%),
    radial-gradient(1px   1px   at 44% 8%,  #dce4f0cc, transparent 50%),
    radial-gradient(1.5px 1.5px at 51% 73%, #dce4f0ff, transparent 50%),
    radial-gradient(2px   2px   at 58% 28%, #ffffff, transparent 50%),
    radial-gradient(1px   1px   at 66% 56%, #dce4f0ee, transparent 50%),
    radial-gradient(1.5px 1.5px at 73% 81%, #dce4f0ff, transparent 50%),
    radial-gradient(1px   1px   at 79% 35%, #dce4f0dd, transparent 50%),
    radial-gradient(2px   2px   at 86% 62%, #dce4f0ff, transparent 50%),
    radial-gradient(1px   1px   at 92% 14%, #dce4f0cc, transparent 50%),
    radial-gradient(1.5px 1.5px at 97% 49%, #dce4f0ff, transparent 50%),
    var(--usg-black);
  pointer-events: none;
  animation: twinkleA 14s ease-in-out infinite;
}

/* Second layer of stars with offset twinkle for depth */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1px   1px   at 4%  82%, #dce4f0dd, transparent 50%),
    radial-gradient(1.5px 1.5px at 11% 91%, #dce4f0ff, transparent 50%),
    radial-gradient(1px   1px   at 19% 27%, #dce4f0ee, transparent 50%),
    radial-gradient(1px   1px   at 27% 88%, #dce4f0cc, transparent 50%),
    radial-gradient(2px   2px   at 35% 95%, #dce4f0ff, transparent 50%),
    radial-gradient(1.5px 1.5px at 43% 60%, #dce4f0ff, transparent 50%),
    radial-gradient(1px   1px   at 52% 3%,  #dce4f0dd, transparent 50%),
    radial-gradient(1.5px 1.5px at 60% 91%, #dce4f0ff, transparent 50%),
    radial-gradient(1px   1px   at 69% 20%, #dce4f0dd, transparent 50%),
    radial-gradient(2px   2px   at 77% 5%,  #ffffff, transparent 50%),
    radial-gradient(1px   1px   at 85% 88%, #dce4f0ee, transparent 50%),
    radial-gradient(1.5px 1.5px at 93% 76%, #dce4f0ff, transparent 50%);
  pointer-events: none;
  animation: twinkleB 20s ease-in-out infinite;
}

@keyframes twinkleA {
  0%, 100% { opacity: 1.0;  }
  50%      { opacity: 0.92; }
}

@keyframes twinkleB {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 1.0;  }
}

/* ── CRT scanline overlay ────────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Glow on primary buttons + headings ──────────── */
button.mat-mdc-raised-button.mat-primary,
button.mat-mdc-unelevated-button.mat-primary,
.mdc-button--raised.mat-primary {
  text-shadow: 0 0 6px rgba(110, 200, 230, 0.4) !important;
  box-shadow: 0 0 12px rgba(110, 200, 230, 0.2) !important;
}

.mat-mdc-card,
mat-card {
  background: var(--usg-surface) !important;
  border: 1px solid var(--usg-cyan) !important;
  box-shadow: 0 0 24px rgba(58, 159, 191, 0.15) !important;
}

::selection {
  background: var(--usg-cyan);
  color: var(--usg-black);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--usg-surface); }
::-webkit-scrollbar-thumb { background: var(--usg-cyan); }
::-webkit-scrollbar-thumb:hover { background: var(--usg-bright-cyan); }

/* ── Hide theme toggle (we have our own theme) ───── */
app-theme-toggle {
  display: none !important;
}

/* ── Hide passkey/WebAuthn buttons ───────────────── */
/* Targets unthemed mat-flat-buttons that contain a mat-icon
 * (which is what VoidAuth renders for the Passkey action). */
button.mat-mdc-unelevated-button.mat-unthemed:has(mat-icon) {
  display: none !important;
}

/* ── Header logo: replace with USG monogram ──────── */
a.header-logo img {
  display: none !important;
}

a.header-logo::after {
  content: "USG";
  font-family: "Courier New", "Lucida Console", monospace;
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 0.25em;
  color: var(--usg-bright-cyan);
  text-shadow: 0 0 10px rgba(110, 200, 230, 0.5);
}

/* ── Replace "Login" h1 with ISHIMURA ASCII art ──── */
h1 {
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center;
  overflow: visible;
}

h1::before {
  content:
    " ██▓  ██████  ██░ ██  ██▓ ███▄ ▄███▓ █    ██  ██▀███   ▄▄▄    \A"
    "▓██▒▒██    ▒ ▓██░ ██▒▓██▒▓██▒▀█▀ ██▒ ██  ▓██▒▓██ ▒ ██▒▒████▄  \A"
    "▒██▒░ ▓██▄   ▒██▀▀██░▒██▒▓██    ▓██░▓██  ▒██░▓██ ░▄█ ▒▒██  ▀█▄\A"
    "░██░  ▒   ██▒░▓█ ░██ ░██░▒██    ▒██ ▓▓█  ░██░▒██▀▀█▄  ░██▄▄▄▄██\A"
    "░██░▒██████▒▒░▓█▒░██▓░██░▒██▒   ░██▒▒▒█████▓ ░██▓ ▒██▒ ▓█   ▓██▒\A"
    "░▓  ▒ ▒▓▒ ▒ ░ ▒ ░░▒░▒░▓  ░ ▒░   ░  ░░▒▓▒ ▒ ▒ ░ ▒▓ ░▒▓░ ▒▒   ▓▒█░\A"
    " ▒ ░░ ░▒  ░ ░ ▒ ░▒░ ░ ▒ ░░  ░      ░░░▒░ ░ ░   ░▒ ░ ▒░  ▒   ▒▒ ░\A"
    " ▒ ░░  ░  ░   ░  ░░ ░ ▒ ░░      ░    ░░░ ░ ░   ░░   ░   ░   ▒  \A"
    " ░        ░   ░  ░  ░ ░         ░      ░        ░           ░  ░";
  white-space: pre;
  display: block;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 0.55rem;
  line-height: 1.1;
  color: var(--usg-bright-cyan);
  text-shadow: 0 0 6px rgba(110, 200, 230, 0.4);
  letter-spacing: 0;
  margin: 0 auto 1rem;
  overflow-x: auto;
}