/* ReqArchitect Admin Console Theme
   Matching the reqarchi-dashboard design system (shadcn/ui dark mode) */

/* ========================================
   Google Fonts - Inter (matches dashboard)
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========================================
   Design Tokens (from dashboard globals.css)
   HSL → Hex conversions:
     background:       hsl(222.2 84% 4.9%)   → #020817
     foreground:        hsl(210 40% 98%)      → #f8fafc
     card:              hsl(222.2 84% 4.9%)   → #020817
     secondary/border:  hsl(217.2 32.6% 17.5%) → #1e293b
     muted-fg:          hsl(215 20.2% 65.1%)  → #94a3b8
     destructive:       hsl(0 62.8% 30.6%)    → #7f1d1d
   ======================================== */
:root {
  /* --- PatternFly v5 overrides --- */
  --pf-v5-global--BackgroundColor--100: #020817;
  --pf-v5-global--BackgroundColor--200: #0f172a;
  --pf-v5-global--BackgroundColor--dark-100: #020817;
  --pf-v5-global--BackgroundColor--dark-200: #0f172a;
  --pf-v5-global--BackgroundColor--light-100: #0f172a;
  --pf-v5-global--BackgroundColor--light-200: #1e293b;
  --pf-v5-global--BackgroundColor--light-300: #1e293b;

  /* PF4 fallbacks */
  --pf-global--BackgroundColor--100: #020817;
  --pf-global--BackgroundColor--200: #0f172a;
  --pf-global--BackgroundColor--dark-100: #020817;
  --pf-global--BackgroundColor--dark-200: #0f172a;
  --pf-global--BackgroundColor--light-100: #0f172a;
  --pf-global--BackgroundColor--light-200: #1e293b;
  --pf-global--BackgroundColor--light-300: #1e293b;

  /* Primary / accent — dashboard uses near-white as primary in dark */
  --pf-v5-global--primary-color--100: #f8fafc;
  --pf-v5-global--primary-color--200: #e2e8f0;
  --pf-v5-global--link--Color: #60a5fa;
  --pf-v5-global--link--Color--hover: #93c5fd;
  --pf-v5-global--link--Color--dark: #60a5fa;

  --pf-global--primary-color--100: #f8fafc;
  --pf-global--primary-color--200: #e2e8f0;
  --pf-global--link--Color: #60a5fa;
  --pf-global--link--Color--hover: #93c5fd;

  /* Text colors */
  --pf-v5-global--Color--100: #f8fafc;
  --pf-v5-global--Color--200: #e2e8f0;
  --pf-v5-global--Color--light-100: #f8fafc;
  --pf-v5-global--Color--light-200: #e2e8f0;
  --pf-v5-global--Color--dark-100: #f8fafc;
  --pf-v5-global--Color--dark-200: #e2e8f0;

  --pf-global--Color--100: #f8fafc;
  --pf-global--Color--200: #e2e8f0;
  --pf-global--Color--light-100: #f8fafc;
  --pf-global--Color--light-200: #e2e8f0;
  --pf-global--Color--dark-100: #f8fafc;
  --pf-global--Color--dark-200: #e2e8f0;

  /* Border colors */
  --pf-v5-global--BorderColor--100: #1e293b;
  --pf-v5-global--BorderColor--200: #1e293b;
  --pf-v5-global--BorderColor--300: #334155;

  --pf-global--BorderColor--100: #1e293b;
  --pf-global--BorderColor--200: #1e293b;
  --pf-global--BorderColor--300: #334155;

  /* Box shadows */
  --pf-v5-global--BoxShadow--sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --pf-v5-global--BoxShadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --pf-v5-global--BoxShadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

  --pf-global--BoxShadow--sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --pf-global--BoxShadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --pf-global--BoxShadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

  /* Font */
  --pf-v5-global--FontFamily--sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pf-global--FontFamily--sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========================================
   Base
   ======================================== */
html, body {
  background-color: #020817 !important;
  color: #f8fafc !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Page Shell
   ======================================== */
.pf-v5-c-page,
.pf-c-page {
  background-color: #020817 !important;
}

/* ========================================
   Masthead / Header — dashboard uses h-14, border-b
   ======================================== */
.pf-v5-c-masthead,
.pf-c-masthead,
.pf-v5-c-page__header,
.pf-c-page__header,
header[class*="pf-"] {
  background-color: #020817 !important;
  border-bottom: 1px solid #1e293b !important;
  box-shadow: none !important;
  min-height: 3.5rem;
}

/* Brand / Logo */
.pf-v5-c-masthead__brand,
.pf-c-masthead__brand,
.pf-v5-c-brand,
.pf-c-brand {
  color: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.pf-v5-c-brand img,
.pf-c-brand img,
.pf-v5-c-masthead__brand img,
.pf-c-masthead__brand img,
img[alt="logo"],
img[src*="logo"] {
  max-height: 28px !important;
  width: auto !important;
  border-radius: 6px !important;
}

/* ========================================
   Sidebar — dashboard uses bg-sidebar which is
   a slightly lighter panel than the main area
   ======================================== */
.pf-v5-c-page__sidebar,
.pf-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-c-page__sidebar-body {
  background-color: #0f172a !important;
  border-right: 1px solid #1e293b !important;
}

.pf-v5-c-nav,
.pf-c-nav {
  background-color: transparent !important;
}

/* Nav links — muted text, active = bright */
.pf-v5-c-nav__link,
.pf-c-nav__link {
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 0.75rem !important;
  transition: color 150ms ease, background-color 150ms ease;
}

.pf-v5-c-nav__link:hover,
.pf-c-nav__link:hover {
  color: #f8fafc !important;
  background-color: #1e293b !important;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-c-nav__item.pf-m-current > .pf-c-nav__link {
  color: #f8fafc !important;
  background-color: #1e293b !important;
  font-weight: 600 !important;
}

/* Remove the default left-border indicator, use rounded bg instead */
.pf-v5-c-nav__link::after,
.pf-c-nav__link::after {
  display: none !important;
}

/* Nav section labels */
.pf-v5-c-nav__section-title,
.pf-c-nav__section-title {
  color: #64748b !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.5rem 0.75rem !important;
}

/* ========================================
   Main Content Area
   ======================================== */
.pf-v5-c-page__main,
.pf-c-page__main,
main {
  background-color: #020817 !important;
}

.pf-v5-c-page__main-section,
.pf-c-page__main-section {
  background-color: #020817 !important;
}

.pf-v5-c-page__main-breadcrumb,
.pf-c-page__main-breadcrumb {
  background-color: #020817 !important;
}

/* ========================================
   Cards — dashboard uses rounded-lg, border, bg-card
   ======================================== */
.pf-v5-c-card,
.pf-c-card {
  background-color: #0f172a !important;
  border: 1px solid #1e293b !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  color: #f8fafc !important;
}

.pf-v5-c-card__header,
.pf-c-card__header,
.pf-v5-c-card__title,
.pf-c-card__title {
  color: #f8fafc !important;
  font-weight: 600 !important;
}

.pf-v5-c-card__body,
.pf-c-card__body {
  color: #e2e8f0 !important;
}

/* ========================================
   Typography
   ======================================== */
.pf-v5-c-title,
.pf-c-title,
h1, h2, h3, h4, h5, h6 {
  color: #f8fafc !important;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.pf-v5-c-content,
.pf-c-content,
p {
  color: #e2e8f0 !important;
}

/* ========================================
   Form Controls — dashboard uses rounded-md, 
   bg-input (secondary), border
   ======================================== */
.pf-v5-c-form-control,
.pf-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  background-color: #020817 !important;
  border: 1px solid #1e293b !important;
  color: #f8fafc !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.75rem !important;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.pf-v5-c-form-control:focus,
.pf-c-form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #f8fafc !important;
  box-shadow: 0 0 0 2px rgba(248, 250, 252, 0.1) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #64748b !important;
}

.pf-v5-c-form__label,
.pf-c-form__label,
label {
  color: #f8fafc !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

.pf-v5-c-form__helper-text,
.pf-c-form__helper-text {
  color: #64748b !important;
  font-size: 0.8125rem !important;
}

/* ========================================
   Buttons — dashboard primary = white bg, dark text
   ======================================== */
.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary,
button.pf-m-primary {
  background-color: #f8fafc !important;
  color: #020817 !important;
  border: none !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  transition: opacity 150ms ease;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover,
button.pf-m-primary:hover {
  background-color: #f8fafc !important;
  opacity: 0.9;
}

.pf-v5-c-button.pf-m-primary:active,
.pf-c-button.pf-m-primary:active,
button.pf-m-primary:active {
  opacity: 0.8;
}

.pf-v5-c-button.pf-m-secondary,
.pf-c-button.pf-m-secondary,
button.pf-m-secondary {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: background-color 150ms ease;
}

.pf-v5-c-button.pf-m-secondary:hover,
.pf-c-button.pf-m-secondary:hover,
button.pf-m-secondary:hover {
  background-color: #334155 !important;
}

.pf-v5-c-button.pf-m-link,
.pf-c-button.pf-m-link,
button.pf-m-link {
  color: #60a5fa !important;
  font-size: 0.875rem !important;
}

.pf-v5-c-button.pf-m-link:hover,
.pf-c-button.pf-m-link:hover,
button.pf-m-link:hover {
  color: #93c5fd !important;
  text-decoration: underline !important;
}

.pf-v5-c-button.pf-m-danger,
.pf-c-button.pf-m-danger,
button.pf-m-danger {
  background-color: #dc2626 !important;
  color: #f8fafc !important;
  border: none !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
}

.pf-v5-c-button.pf-m-danger:hover,
.pf-c-button.pf-m-danger:hover,
button.pf-m-danger:hover {
  background-color: #b91c1c !important;
}

.pf-v5-c-button.pf-m-plain,
.pf-c-button.pf-m-plain {
  color: #94a3b8 !important;
}

.pf-v5-c-button.pf-m-plain:hover,
.pf-c-button.pf-m-plain:hover {
  color: #f8fafc !important;
}

/* ========================================
   Links
   ======================================== */
a {
  color: #60a5fa !important;
  transition: color 150ms ease;
}

a:hover {
  color: #93c5fd !important;
}

/* ========================================
   Alerts — matching dashboard destructive/success tones
   ======================================== */
.pf-v5-c-alert,
.pf-c-alert {
  border-radius: 0.375rem !important;
  border-width: 1px !important;
}

.pf-v5-c-alert.pf-m-danger,
.pf-c-alert.pf-m-danger {
  background-color: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
  color: #fca5a5 !important;
}

.pf-v5-c-alert.pf-m-success,
.pf-c-alert.pf-m-success {
  background-color: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
}

.pf-v5-c-alert.pf-m-warning,
.pf-c-alert.pf-m-warning {
  background-color: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
  color: #fde047 !important;
}

.pf-v5-c-alert.pf-m-info,
.pf-c-alert.pf-m-info {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}

/* ========================================
   Tables
   ======================================== */
.pf-v5-c-table,
.pf-c-table {
  background-color: transparent !important;
  color: #f8fafc !important;
}

.pf-v5-c-table tr,
.pf-c-table tr {
  border-bottom: 1px solid #1e293b !important;
}

.pf-v5-c-table th,
.pf-c-table th {
  color: #94a3b8 !important;
  background-color: transparent !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
}

.pf-v5-c-table td,
.pf-c-table td {
  color: #e2e8f0 !important;
  font-size: 0.875rem !important;
}

.pf-v5-c-table tbody tr:hover,
.pf-c-table tbody tr:hover {
  background-color: #0f172a !important;
}

/* ========================================
   Tabs
   ======================================== */
.pf-v5-c-tabs,
.pf-c-tabs {
  border-bottom: 1px solid #1e293b !important;
}

.pf-v5-c-tabs__link,
.pf-c-tabs__link {
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.pf-v5-c-tabs__link:hover,
.pf-c-tabs__link:hover {
  color: #f8fafc !important;
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link,
.pf-c-tabs__item.pf-m-current .pf-c-tabs__link {
  color: #f8fafc !important;
  border-bottom: 2px solid #f8fafc !important;
}

/* ========================================
   Dropdowns / Menus — dashboard uses popover styling
   ======================================== */
.pf-v5-c-dropdown__menu,
.pf-c-dropdown__menu,
.pf-v5-c-menu,
.pf-c-menu {
  background-color: #0f172a !important;
  border: 1px solid #1e293b !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5) !important;
}

.pf-v5-c-dropdown__menu-item,
.pf-c-dropdown__menu-item,
.pf-v5-c-menu__item,
.pf-c-menu__item {
  color: #e2e8f0 !important;
  font-size: 0.875rem !important;
  border-radius: 0.25rem !important;
}

.pf-v5-c-dropdown__menu-item:hover,
.pf-c-dropdown__menu-item:hover,
.pf-v5-c-menu__item:hover,
.pf-c-menu__item:hover {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

/* ========================================
   Toolbar
   ======================================== */
.pf-v5-c-toolbar,
.pf-c-toolbar {
  background-color: transparent !important;
}

/* ========================================
   Modals — dashboard uses popover colors
   ======================================== */
.pf-v5-c-modal-box,
.pf-c-modal-box {
  background-color: #0f172a !important;
  border: 1px solid #1e293b !important;
  border-radius: 0.5rem !important;
  color: #f8fafc !important;
}

.pf-v5-c-modal-box__header,
.pf-c-modal-box__header {
  border-bottom: 1px solid #1e293b !important;
}

.pf-v5-c-modal-box__footer,
.pf-c-modal-box__footer {
  border-top: 1px solid #1e293b !important;
}

.pf-v5-c-backdrop,
.pf-c-backdrop {
  background-color: rgba(2, 8, 23, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

/* ========================================
   Scrollbar
   ======================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* ========================================
   Avatar
   ======================================== */
.pf-v5-c-avatar,
.pf-c-avatar {
  border: 2px solid #1e293b !important;
  border-radius: 9999px !important;
}

/* ========================================
   Breadcrumbs
   ======================================== */
.pf-v5-c-breadcrumb__link,
.pf-c-breadcrumb__link {
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
}

.pf-v5-c-breadcrumb__link:hover,
.pf-c-breadcrumb__link:hover {
  color: #f8fafc !important;
}

.pf-v5-c-breadcrumb__item,
.pf-c-breadcrumb__item {
  color: #64748b !important;
}

/* ========================================
   Dividers
   ======================================== */
.pf-v5-c-divider,
.pf-c-divider,
hr {
  border-color: #1e293b !important;
}

/* ========================================
   Empty State
   ======================================== */
.pf-v5-c-empty-state,
.pf-c-empty-state {
  color: #94a3b8 !important;
}

.pf-v5-c-empty-state__icon,
.pf-c-empty-state__icon {
  color: #64748b !important;
}

/* ========================================
   Description Lists
   ======================================== */
.pf-v5-c-description-list__term,
.pf-c-description-list__term {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
}

.pf-v5-c-description-list__description,
.pf-c-description-list__description {
  color: #f8fafc !important;
}

/* ========================================
   Toggle / Switch
   ======================================== */
.pf-v5-c-switch__label,
.pf-c-switch__label {
  color: #f8fafc !important;
}

.pf-v5-c-switch__input:checked + .pf-v5-c-switch__toggle,
.pf-c-switch__input:checked + .pf-c-switch__toggle {
  background-color: #f8fafc !important;
}

/* ========================================
   Badges / Chips / Labels
   ======================================== */
.pf-v5-c-badge,
.pf-c-badge,
.pf-v5-c-chip,
.pf-c-chip {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
}

.pf-v5-c-label,
.pf-c-label {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  border-radius: 9999px !important;
}

/* ========================================
   Spinner
   ======================================== */
.pf-v5-c-spinner,
.pf-c-spinner {
  --pf-v5-c-spinner--Color: #f8fafc;
  --pf-c-spinner--Color: #f8fafc;
}

/* ========================================
   Loading splash override
   ======================================== */
.keycloak__loading-container {
  background-color: #020817 !important;
  color: #f8fafc !important;
}