/**
 * Telefónica Tech Data Space — account console theme
 * Overrides PatternFly v5 tokens to match the login theme.
 */

/* ── Telefonica Sans ─────────────────────────────────────────────────────── */

@font-face {
  font-family: "Telefonica Sans";
  src: url("../fonts/telefonica_sans/woff2/Telefonica_Sans_Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Telefonica Sans";
  src: url("../fonts/telefonica_sans/woff2/Telefonica_Sans_Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Telefonica Sans";
  src: url("../fonts/telefonica_sans/woff2/Telefonica_Sans_Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Telefonica Sans";
  src: url("../fonts/telefonica_sans/woff2/Telefonica_Sans_Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Telefonica Sans";
  src: url("../fonts/telefonica_sans/woff2/Telefonica_Sans_Bold_Italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ── PatternFly v5 global token overrides ────────────────────────────────── */

:root {
  /* Font */
  --pf-v5-global--FontFamily--sans-serif:           "Telefonica Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pf-v5-global--FontFamily--heading--sans-serif:  "Telefonica Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Brand palette — single source of truth, referenced by every PF5 token
     and component override below instead of repeating literals. */
  --brand-color:         #0066ff;
  --brand-color-hover:   #0052cc;
  --brand-color-rgb:     0, 102, 255;
  --chrome-bg:           #0d0d2b;
  --chrome-bg-darker:    #0a0a22;

  /* Primary / brand colour */
  --pf-v5-global--primary-color--100:       var(--brand-color);
  --pf-v5-global--primary-color--200:       var(--brand-color-hover);
  --pf-v5-global--primary-color--300:       var(--brand-color);
  --pf-v5-global--primary-color--light-100: var(--brand-color);
  --pf-v5-global--primary-color--dark-100:  var(--brand-color);

  /* Links — base tokens, plus the --dark/--light variants that components
     inside masthead/sidebar (dark-background chrome) actually resolve to */
  --pf-v5-global--link--Color:               var(--brand-color);
  --pf-v5-global--link--Color--hover:        var(--brand-color-hover);
  --pf-v5-global--link--Color--visited:      var(--brand-color);
  --pf-v5-global--link--Color--dark:         var(--brand-color);
  --pf-v5-global--link--Color--dark--hover:  var(--brand-color-hover);
  --pf-v5-global--link--Color--light:        var(--brand-color);
  --pf-v5-global--link--Color--light--hover: var(--brand-color-hover);

  /* Active / focus accent */
  --pf-v5-global--active-color--100:   var(--brand-color);
  --pf-v5-global--focus-ring--color:   rgba(var(--brand-color-rgb), 0.3);

  /* Flat design: remove border radius globally */
  --pf-v5-global--BorderRadius--sm: 0;
  --pf-v5-global--BorderRadius--lg: 0;
}

/* ── Toggle switch: restore circular thumb ───────────────────────────────── */

.pf-v5-c-switch {
  --pf-v5-c-switch__toggle--before--BorderRadius: 50%;
}

/* ── Masthead (top bar) ───────────────────────────────────────────────────── */

.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--chrome-bg);
}

/* ── Sidebar / nav ───────────────────────────────────────────────────────── */

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--chrome-bg-darker);
}

/* Nav active item left-border accent */
.pf-v5-c-nav__item--m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav__link.pf-m-current {
  --pf-v5-c-nav__link--m-current--Color:                                   #ffffff;
  --pf-v5-c-nav__item--m-current__link--after--BackgroundColor:            var(--brand-color);
}

/* ── Logo sizing ─────────────────────────────────────────────────────────── */

.pf-v5-c-brand {
  max-height: 2rem;
  width: auto;
}