/* =========================================================
   TELEKOM ACCOUNT CONSOLE (PatternFly 5)
   ========================================================= */

:root {
  --telekom-magenta: #e20074;
  --telekom-magenta-dark: #b8005d;
  --telekom-gray-bg: #f4f4f4;
  
  /* Update Global PatternFly 5 Variables */
  --pf-v5-global--primary-color--100: var(--telekom-magenta);
  --pf-v5-global--active-color--100: var(--telekom-magenta);
  --pf-v5-global--link--Color: var(--telekom-magenta);
}

/* ── Header & Logo ── */
.pf-v5-c-masthead {
  border-top: 4px solid var(--telekom-magenta);
}

/* Force the brand image to stay consistent */
.pf-v5-c-masthead__brand img {
  height: 32px !important;
  width: auto !important;
}

/* ── Sidebar Navigation ── */
/* Current/Active link magenta bar */
.pf-v5-c-nav__link.pf-m-current::after {
  --pf-v5-c-nav__link--m-current__after--BorderColor: var(--telekom-magenta) !important;
}

/* Text color for active items */
.pf-v5-c-nav__link.pf-m-current {
  --pf-v5-c-nav__link--m-current--Color: var(--telekom-magenta) !important;
}

/* ── Buttons ── */
/* Primary Buttons (Save) */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--telekom-magenta) !important;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--telekom-magenta-dark) !important;
  border-radius: 4px;
}

/* Link Buttons (Cancel) */
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--telekom-magenta) !important;
  --pf-v5-c-button--m-link--hover--Color: var(--telekom-magenta-dark) !important;
}

/* ── Forms & Inputs ── */
/* Focus state for input fields */
.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--Focus--BorderBottomColor: var(--telekom-magenta) !important;
}

/* Labels */
.pf-v5-c-form__label-text {
  font-weight: 600;
}

/* ── Sidebar & Layout ── */
.pf-v5-c-page__sidebar {
  border-right: 1px solid #d2d2d2;
}

/* Section background styling */
.pf-v5-c-page__main-section.pf-m-light {
  background-color: #ffffff;
}

.pf-v5-c-page__main {
  background-color: var(--telekom-gray-bg);
}

/* Avatar circle color */
.pf-v5-c-avatar circle {
    fill: var(--telekom-magenta) !important;
}

/* Target the brand image in the masthead specifically */
#app > div > header > a.pf-v5-c-masthead__brand img,
.pf-v5-c-masthead__brand img {
    /* Replace the source image with your local logo */
    content: url('../img/logo.svg') !important;
    
    /* Ensure the size matches the Telekom brand look */
    height: 36px !important;
    width: auto !important;
    
    /* Remove any default filtering or opacity */
    filter: none !important;
    opacity: 1 !important;
}

/* Optional: Add a little padding to keep it away from the toggle button */
.pf-v5-c-masthead__brand {
    margin-left: 10px;
    text-decoration: none;
}