/* ============================================================
   TECHSWITCH — Professional Material-3 theme (logo colors)
   Overrides Material system tokens (the ONLY reliable way to
   theme built-in Angular Material). Logo red #d80000 + charcoal.
   ============================================================ */
:root, html, body, .mat-typography, .mat-app-background {
  /* ---- brand red (from logo) ---- */
  --mat-sys-primary: #d80000 !important;
  --mat-sys-primary-container: #a80000 !important;
  --mat-sys-on-primary: #ffffff !important;
  --mat-sys-on-primary-container: #ffffff !important;
  --mat-sys-surface-tint: #d80000 !important;
  --mat-sys-inverse-primary: #f01414 !important;
  --mat-ripple-color: rgba(216,0,0,.20) !important;

  /* secondary/tertiary pulled toward brand so accents are cohesive */
  --mat-sys-secondary: #a80000 !important;
  --mat-sys-secondary-container: #2a2b34 !important;
  --mat-sys-on-secondary: #ffffff !important;
  --mat-sys-tertiary: #f01414 !important;

  /* ---- top toolbar: deep charcoal (not flat red = more premium) ---- */
  --mat-toolbar-container-background-color: #141417 !important;
  --mat-toolbar-container-text-color: #ffffff !important;

  /* ---- left sidenav + tree: deep charcoal ---- */
  --mat-sidenav-container-background-color: #17181d !important;
  --mat-sidenav-container-text-color: #eef0f4 !important;
  --mat-tree-container-background-color: #17181d !important;
  --mat-tree-node-text-color: #eef0f4 !important;

  /* ---- content surface: soft light with a hint of warmth ---- */
  --mat-sidenav-content-background-color: #f4f5f7 !important;

  /* ---- accents ---- */
  --mat-menu-item-hover-state-layer-color: #d80000 !important;
  --mat-menu-item-focus-state-layer-color: #d80000 !important;
  --mat-form-field-outlined-hover-outline-color: #d80000 !important;
  --mat-form-field-outlined-focus-outline-color: #d80000 !important;
  --mat-sys-info: #d80000 !important;

  /* rounder corners globally = more modern */
  --mat-sys-corner-medium: 12px !important;
  --mat-sys-corner-large: 16px !important;
}

/* ---- top toolbar: add a red gradient underline accent ---- */
.mat-toolbar, mat-toolbar.mat-primary, .mat-mdc-toolbar {
  background: linear-gradient(135deg,#1c1c22,#141417) !important;
  color:#fff !important;
  border-bottom: 2px solid #d80000 !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.25) !important;
}

/* ---- sidenav active item: red gradient highlight ---- */
.menu-item.active, a.menu-item.active,
.mat-mdc-list-item.mdc-list-item--activated {
  background: linear-gradient(135deg,#d80000,#a80000) !important;
  color:#fff !important;
  border-radius: 10px !important;
  margin: 2px 8px !important;
  box-shadow: 0 4px 14px rgba(216,0,0,.35) !important;
}
.menu-item.active .mat-icon,
.mat-mdc-list-item.mdc-list-item--activated .mat-icon { color:#fff !important; }

/* sidenav hover */
.mat-mdc-list-item:hover, a.menu-item:hover {
  background: rgba(216,0,0,.14) !important;
  border-radius: 10px !important;
}

/* ---- primary buttons: red gradient + hover lift ---- */
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mdc-button--raised.mat-primary,
button.mat-primary {
  background: linear-gradient(135deg,#d80000,#f01414 60%,#a80000) !important;
  color:#fff !important;
  border:none !important;
  box-shadow: 0 6px 18px rgba(216,0,0,.30) !important;
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease !important;
}
.mat-mdc-raised-button.mat-primary:hover,
.mdc-button--raised.mat-primary:hover,
button.mat-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(216,0,0,.42) !important;
  filter: brightness(1.05);
}

/* ---- cards: rounded, soft shadow, hover lift ---- */
.mat-mdc-card, mat-card {
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.07) !important;
  transition: transform .16s ease, box-shadow .2s ease !important;
}
.mat-mdc-card:hover, mat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(216,0,0,.12) !important;
}

/* ---- table rows: hover tint ---- */
.mat-mdc-row { transition: background-color .16s ease !important; }
.mat-mdc-row:hover { background: rgba(216,0,0,.05) !important; }

/* ---- form fields: rounded + red focus ---- */
.mat-mdc-form-field .mdc-text-field { border-radius: 10px !important; }
.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color:#d80000 !important; border-width:2px !important;
}

/* ---- icon buttons hover ---- */
.mat-mdc-icon-button { transition: transform .14s ease, color .16s ease !important; }
.mat-mdc-icon-button:hover { color:#d80000 !important; transform: scale(1.08); }

/* ---- login sign-in button ---- */
.auth-container .mat-mdc-raised-button, .sign-in, .sign-in .mat-mdc-raised-button {
  background: linear-gradient(135deg,#d80000,#f01414 60%,#a80000) !important; color:#fff !important;
}

/* ---- entrance animation for cards/tables ---- */
@keyframes tsFadeUp { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.mat-mdc-card, mat-card, .mat-mdc-table { animation: tsFadeUp .35s ease both; }