/* Telldrop Account Console Theme - Light & Dark Mode */

/* Light Mode (Default) */
:root,
html:not(.pf-v5-theme-dark):not(.dark-mode),
html:not(.pf-v5-theme-dark):not(.dark-mode) body {
  /* Telldrop Colors */
  --td-accent: #58aab2;
  --td-accent-strong: #3f888f;
  --td-accent-soft: rgba(88, 170, 178, .24);
  --td-bg: #ffffff;
  --td-card: #f8fafc;
  --td-text: #0f172a;
  --td-text-muted: rgba(15, 23, 42, .75);
  --td-border: rgba(148, 163, 184, .22);
  --td-border-strong: rgba(15, 23, 42, .3);

  /* PatternFly v5 Global Variables - Light Mode */
  --pf-v5-global--BackgroundColor--100: #ffffff !important;
  --pf-v5-global--BackgroundColor--200: #f8fafc !important;
  --pf-v5-global--Color--100: #0f172a !important;
  --pf-v5-global--Color--200: rgba(15, 23, 42, .75) !important;
  --pf-v5-global--primary-color--100: #58aab2 !important;
  --pf-v5-global--primary-color--200: #3f888f !important;
  --pf-v5-global--BorderColor--100: rgba(148, 163, 184, .22) !important;
  --pf-v5-global--BorderColor--200: rgba(15, 23, 42, .3) !important;
  --pf-v5-global--link--Color: #3f888f !important;
  --pf-v5-global--link--Color--hover: #58aab2 !important;
}

/* Light Mode - Form Components */
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-form__label-text,
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-form__label,
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-title,
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-description-list__text,
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-nav__link,
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-masthead,
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-page,
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-page__sidebar-body {
  --pf-v5-c-form__label-text--Color: #0f172a !important;
  --pf-v5-c-form__label--Color: #0f172a !important;
  --pf-v5-c-title--Color: #0f172a !important;
  --pf-v5-c-description-list__text--Color: #0f172a !important;
  --pf-v5-c-nav__link--Color: #0f172a !important;
  --pf-v5-c-nav__link--hover--Color: #3f888f !important;
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(88, 170, 178, .05) !important;
  --pf-v5-c-nav__link--m-current--Color: #3f888f !important;
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(88, 170, 178, .1) !important;
  color: #0f172a !important;
}

/* Light Mode - Sidebar Background */
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-page__sidebar,
html:not(.pf-v5-theme-dark):not(.dark-mode) .pf-v5-c-page__sidebar-body {
  --pf-v5-c-page__sidebar--BackgroundColor: #f8fafc !important;
  background-color: #f8fafc !important;
}

/* Dark Mode */
html.dark-mode,
body.dark-mode {
  /* Telldrop Dark Mode Colors */
  --td-accent: #58aab2;
  --td-accent-strong: #3f888f;
  --td-accent-soft: rgba(88, 170, 178, .24);
  --td-bg: #0f172a;
  --td-card: #111826;
  --td-text: #f8fafc;
  --td-text-muted: rgba(226, 232, 240, .75);
  --td-border: rgba(148, 163, 184, .22);
  --td-border-strong: rgba(226, 232, 240, .3);
}

body.dark-mode {
  /* PatternFly v5 Global Variables - Dark Mode */
  --pf-v5-global--BackgroundColor--100: var(--td-bg);
  --pf-v5-global--BackgroundColor--200: var(--td-card);
  --pf-v5-global--Color--100: var(--td-text);
  --pf-v5-global--Color--200: var(--td-text-muted);
  --pf-v5-global--primary-color--100: var(--td-accent);
  --pf-v5-global--primary-color--200: var(--td-accent-strong);
  --pf-v5-global--BorderColor--100: var(--td-border);
  --pf-v5-global--BorderColor--200: var(--td-border-strong);
  --pf-v5-global--link--Color: var(--td-accent);
  --pf-v5-global--link--Color--hover: var(--td-accent-strong);
}

/* Dark Mode - Sidebar */
html.dark-mode .pf-v5-c-page__sidebar,
html.dark-mode .pf-v5-c-page__sidebar-body,
body.dark-mode .pf-v5-c-page__sidebar,
body.dark-mode .pf-v5-c-page__sidebar-body {
  --pf-v5-c-page__sidebar--BackgroundColor: #111826 !important;
  background-color: #111826 !important;
}

/* Navigation Links */
html.dark-mode .pf-v5-c-nav__link,
body.dark-mode .pf-v5-c-nav__link {
  --pf-v5-c-nav__link--Color: #f8fafc !important;
  --pf-v5-c-nav__link--hover--Color: #58aab2 !important;
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(88, 170, 178, .1) !important;
  --pf-v5-c-nav__link--m-current--Color: #58aab2 !important;
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(88, 170, 178, .2) !important;
}

/* Button Styles */
body.dark-mode .pf-v5-c-button--m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--td-accent);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--td-accent-strong);
}

/* Card/Panel Backgrounds */
body.dark-mode .pf-v5-c-card,
body.dark-mode .pf-v5-c-page__main-section {
  --pf-v5-c-card--BackgroundColor: var(--td-card);
  --pf-v5-c-page__main-section--BackgroundColor: var(--td-bg);
}

/* Back Button */
#telldrop-back-button-container {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--td-border);
  display: flex;
  justify-content: flex-start;
}

#telldrop-back-button {
  min-width: 150px;
}

/* Light Mode - Back Button */
html:not(.pf-v5-theme-dark):not(.dark-mode) #telldrop-back-button {
  --pf-v5-c-button--m-secondary--Color: var(--td-text);
  --pf-v5-c-button--m-secondary--BorderColor: var(--td-border-strong);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--td-accent);
  --pf-v5-c-button--m-secondary--hover--Color: var(--td-accent-strong);
}

/* Dark Mode - Back Button */
html.dark-mode #telldrop-back-button,
body.dark-mode #telldrop-back-button {
  --pf-v5-c-button--m-secondary--Color: var(--td-text);
  --pf-v5-c-button--m-secondary--BorderColor: var(--td-border-strong);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--td-accent);
  --pf-v5-c-button--m-secondary--hover--Color: var(--td-accent);
}