/* ═══════════════════════════════════════════════════════
   Biznasi Admin Theme — Executive Grade
   Green palette (#51be78), Poppins typography
   Parent: keycloak.v2
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ── Design tokens ── */
:root {
  /* Typography */
  --biz-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --biz-font-size-xs: 0.75rem;
  --biz-font-size-sm: 0.82rem;
  --biz-font-size-base: 0.88rem;
  --biz-font-size-lg: 1rem;
  --biz-font-size-xl: 1.15rem;
  --biz-font-size-2xl: 1.35rem;
  --biz-font-weight-normal: 400;
  --biz-font-weight-medium: 500;
  --biz-font-weight-semibold: 600;
  --biz-font-weight-bold: 700;

  /* Colors — Green palette */
  --biz-primary: #51be78;
  --biz-primary-hover: #3da066;
  --biz-primary-active: #338952;
  --biz-primary-light: #f0fdf4;
  --biz-primary-subtle: rgba(81, 190, 120, 0.06);
  --biz-primary-soft: rgba(81, 190, 120, 0.12);
  --biz-gradient-start: #51be78;
  --biz-gradient-end: #3d8f5e;

  /* Surfaces */
  --biz-surface: #ffffff;
  --biz-surface-alt: #f5faf6;
  --biz-bg: #f0f7f2;

  /* Sidebar */
  --biz-sidebar-bg: #0a2e1a;
  --biz-sidebar-text: #e2e8f0;
  --biz-sidebar-hover: rgba(255, 255, 255, 0.06);

  /* Text */
  --biz-text: #111827;
  --biz-text-secondary: #4b5563;
  --biz-text-muted: #9ca3af;

  /* Borders */
  --biz-border: #e2e8f0;
  --biz-border-light: #f1f5f9;

  /* Radii */
  --biz-radius-sm: 6px;
  --biz-radius-md: 8px;
  --biz-radius-lg: 12px;
  --biz-radius-xl: 16px;

  /* Shadows */
  --biz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --biz-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --biz-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04);
  --biz-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Status */
  --biz-success: #10b981;
  --biz-danger: #ef4444;
  --biz-warning: #f59e0b;
  --biz-info: #3b82f6;

  /* Transitions */
  --biz-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --biz-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base font ── */
body, .keycloak-admin, .kc-admin, [class*="kc-"], .pf-c-page, .pf-c-nav, .pf-c-button, .pf-c-card, .pf-c-table {
  font-family: var(--biz-font) !important;
}

/* ── Header ── */
#kc-header, .kc-header, [class*="kc-header"], .pf-c-page__header {
  background: var(--biz-sidebar-bg) !important;
  color: var(--biz-sidebar-text) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Logo area ── */
#kc-logo, .kc-logo-wrapper, [class*="kc-logo"] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

#kc-logo img, .kc-logo-wrapper img, [class*="kc-logo"] img {
  height: 32px;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

#kc-logo::after, .kc-logo-wrapper::after {
  content: 'Biznasi';
  font-family: var(--biz-font);
  font-weight: var(--biz-font-weight-bold);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--biz-sidebar-text);
}

/* ── Sidebar navigation ── */
.nav-pf-vertical, .kc-nav, [class*="kc-nav"], [class*="sidebar"], .pf-c-nav, .pf-c-page__sidebar {
  background: var(--biz-sidebar-bg) !important;
  color: var(--biz-sidebar-text) !important;
}

.nav-pf-vertical .nav-item-pf-header, .kc-nav a, [class*="kc-nav"] a, .pf-c-nav__link, .pf-c-nav__item {
  color: var(--biz-sidebar-text) !important;
  opacity: 0.7;
  font-size: var(--biz-font-size-base) !important;
  font-weight: var(--biz-font-weight-medium) !important;
  transition: opacity var(--biz-transition-fast), background var(--biz-transition-fast) !important;
  border-radius: 4px !important;
  margin: 2px 8px !important;
}

.nav-pf-vertical .nav-item-pf-header:hover, .kc-nav a:hover, [class*="kc-nav"] a:hover, .pf-c-nav__link:hover {
  opacity: 1 !important;
  background: var(--biz-sidebar-hover) !important;
}

.nav-pf-vertical .active, .kc-nav .active, [class*="kc-nav"] .active, .pf-c-nav__link.pf-m-current {
  opacity: 1 !important;
  background: rgba(81, 190, 120, 0.15) !important;
  font-weight: var(--biz-font-weight-semibold) !important;
  border-left: 3px solid var(--biz-primary) !important;
}

/* ── Primary buttons ── */
.btn-primary, .kc-button, [class*="kc-btn-primary"], .pf-c-button.pf-m-primary {
  background: linear-gradient(135deg, var(--biz-gradient-start), var(--biz-gradient-end)) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: var(--biz-radius-md) !important;
  font-family: var(--biz-font) !important;
  font-weight: var(--biz-font-weight-medium) !important;
  font-size: var(--biz-font-size-base) !important;
  box-shadow: 0 2px 6px rgba(81, 190, 120, 0.2) !important;
  transition: all var(--biz-transition-fast) !important;
  padding: 8px 18px !important;
}

.btn-primary:hover, .kc-button:hover, .pf-c-button.pf-m-primary:hover {
  background: linear-gradient(135deg, var(--biz-primary-hover), var(--biz-primary-active)) !important;
  box-shadow: 0 4px 12px rgba(81, 190, 120, 0.3) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:active, .kc-button:active, .pf-c-button.pf-m-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(81, 190, 120, 0.15) !important;
}

/* Secondary buttons */
.btn-default, .pf-c-button.pf-m-secondary, .pf-c-button.pf-m-link {
  color: var(--biz-primary) !important;
  border-color: var(--biz-primary) !important;
  font-family: var(--biz-font) !important;
  transition: all var(--biz-transition-fast) !important;
}

.btn-default:hover, .pf-c-button.pf-m-secondary:hover, .pf-c-button.pf-m-link:hover {
  background: var(--biz-primary-subtle) !important;
  border-color: var(--biz-primary-hover) !important;
  color: var(--biz-primary-hover) !important;
}

/* Danger buttons */
.btn-danger, .pf-c-button.pf-m-danger {
  background: var(--biz-danger) !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2) !important;
}

/* ── Cards ── */
.card-pf, .kc-card, [class*="kc-card"], .pf-c-card, .pf-c-card.pf-m-flat {
  border-radius: var(--biz-radius-lg) !important;
  box-shadow: var(--biz-shadow-card) !important;
  border: 1px solid var(--biz-border) !important;
  background: var(--biz-surface) !important;
  transition: box-shadow var(--biz-transition-base) !important;
}

.card-pf:hover, .kc-card:hover, .pf-c-card:hover {
  box-shadow: var(--biz-shadow-lg) !important;
}

/* ── Form controls ── */
.form-control, .kc-input, [class*="kc-input"], .pf-c-form-control {
  border-radius: var(--biz-radius-md) !important;
  border: 1.5px solid var(--biz-border) !important;
  font-family: var(--biz-font) !important;
  font-size: var(--biz-font-size-base) !important;
  color: var(--biz-text) !important;
  padding: 8px 12px !important;
  transition: border-color var(--biz-transition-fast), box-shadow var(--biz-transition-fast) !important;
  line-height: 1.5 !important;
}

.form-control:focus, .kc-input:focus, .pf-c-form-control:focus {
  border-color: var(--biz-primary) !important;
  box-shadow: 0 0 0 3px var(--biz-primary-soft) !important;
}

.form-control:focus-visible, .kc-input:focus-visible, .pf-c-form-control:focus-visible {
  outline: 2px solid var(--biz-primary) !important;
  outline-offset: 1px !important;
}

/* ── Labels ── */
.control-label, .kc-label, [class*="kc-label"], .pf-c-label, .pf-c-form__label {
  font-weight: var(--biz-font-weight-medium) !important;
  color: var(--biz-text-secondary) !important;
  font-size: var(--biz-font-size-sm) !important;
  font-family: var(--biz-font) !important;
  letter-spacing: 0.01em !important;
}

/* ── Status / badges ── */
.pf-m-success, .kc-success, .pf-c-label.pf-m-green {
  color: var(--biz-success) !important;
}

.pf-m-danger, .kc-danger, .kc-error, .pf-c-label.pf-m-red {
  color: var(--biz-danger) !important;
}

.pf-m-warning, .kc-warning, .pf-c-label.pf-m-orange {
  color: var(--biz-warning) !important;
}

/* ── Alerts / notifications ── */
.alert-success, .pf-c-alert.pf-m-success {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: var(--biz-radius-md) !important;
  color: #065f46 !important;
}

.alert-danger, .pf-c-alert.pf-m-danger {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--biz-radius-md) !important;
  color: #991b1b !important;
}

.alert-warning, .pf-c-alert.pf-m-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: var(--biz-radius-md) !important;
  color: #92400e !important;
}

.alert-info, .pf-c-alert.pf-m-info {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: var(--biz-radius-md) !important;
  color: #166534 !important;
}

/* ── Tables ── */
.table, .kc-table, .pf-c-table, .pf-c-table.pf-m-grid-md {
  font-family: var(--biz-font) !important;
  border-radius: var(--biz-radius-md) !important;
  overflow: hidden !important;
}

.table th, .kc-table th, .pf-c-table th, .pf-c-table thead th {
  font-weight: var(--biz-font-weight-semibold) !important;
  color: var(--biz-text-secondary) !important;
  font-size: var(--biz-font-size-xs) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--biz-surface-alt) !important;
  border-bottom: 2px solid var(--biz-border) !important;
  padding: 12px 16px !important;
}

.table td, .kc-table td, .pf-c-table td, .pf-c-table tbody td {
  padding: 10px 16px !important;
  font-size: var(--biz-font-size-base) !important;
  border-bottom: 1px solid var(--biz-border-light) !important;
}

.table tr:hover, .kc-table tr:hover, .pf-c-table tbody tr:hover {
  background: var(--biz-primary-subtle) !important;
}

/* ── Links ── */
a, .kc-link, [class*="kc-link"], .pf-c-nav__link, .pf-c-dropdown__menu-item {
  color: var(--biz-primary) !important;
  transition: color var(--biz-transition-fast) !important;
}

a:hover, .kc-link:hover, .pf-c-nav__link:hover, .pf-c-dropdown__menu-item:hover {
  color: var(--biz-primary-hover) !important;
}

a:focus-visible {
  outline: 2px solid var(--biz-primary) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

/* ── Headings ── */
h1, h2, h3, h4, .kc-title, [class*="kc-title"], .pf-c-title {
  font-family: var(--biz-font) !important;
  font-weight: var(--biz-font-weight-semibold) !important;
  letter-spacing: -0.02em !important;
  color: var(--biz-text) !important;
}

/* ── Toolbar / actions ── */
.toolbar-pf, .kc-toolbar, [class*="kc-toolbar"], .pf-c-toolbar {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
}

/* ── Footer ── */
.footer, .kc-footer, [class*="kc-footer"], .pf-c-page__footer {
  border-top: 1px solid var(--biz-border) !important;
  color: var(--biz-text-muted) !important;
  font-size: var(--biz-font-size-xs) !important;
}

/* ── Background ── */
body, .kc-body, [class*="kc-body"], .pf-c-page__main, .pf-c-page__main-section {
  background: var(--biz-bg) !important;
}

/* ── Breadcrumbs ── */
.breadcrumb, .pf-c-breadcrumb, .pf-c-breadcrumb__item, .pf-c-breadcrumb__link {
  font-family: var(--biz-font) !important;
  font-size: var(--biz-font-size-sm) !important;
}

/* ── Dropdowns ── */
.dropdown-menu, .pf-c-dropdown__menu {
  border-radius: var(--biz-radius-md) !important;
  box-shadow: var(--biz-shadow-md) !important;
  border: 1px solid var(--biz-border) !important;
  padding: 4px 0 !important;
}

.dropdown-menu > li > a, .pf-c-dropdown__menu-item {
  padding: 8px 16px !important;
  font-size: var(--biz-font-size-base) !important;
  font-family: var(--biz-font) !important;
}

/* ── Modals ── */
.modal-content, .pf-c-modal-box {
  border-radius: var(--biz-radius-lg) !important;
  box-shadow: var(--biz-shadow-lg) !important;
  border: none !important;
}

.modal-header, .pf-c-modal-box__header {
  border-bottom: 1px solid var(--biz-border) !important;
  padding: 20px 24px 16px !important;
}

.modal-footer, .pf-c-modal-box__footer {
  border-top: 1px solid var(--biz-border) !important;
  padding: 16px 24px 20px !important;
}

/* ── Tabs ── */
.nav-tabs, .pf-c-tabs, .pf-c-tabs__link {
  font-family: var(--biz-font) !important;
  font-size: var(--biz-font-size-base) !important;
}

.nav-tabs > li.active > a, .pf-c-tabs__link.pf-m-current {
  color: var(--biz-primary) !important;
  border-bottom-color: var(--biz-primary) !important;
  font-weight: var(--biz-font-weight-semibold) !important;
}

.nav-tabs > li > a:hover, .pf-c-tabs__link:hover {
  color: var(--biz-primary-hover) !important;
}

/* ── Badge / label pills ── */
.badge, .pf-c-badge, .pf-c-label__content {
  font-family: var(--biz-font) !important;
  font-size: var(--biz-font-size-xs) !important;
  font-weight: var(--biz-font-weight-medium) !important;
}

/* ═══════════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --biz-primary: #6ddb96;
    --biz-primary-hover: #51be78;
    --biz-primary-active: #45a86a;
    --biz-primary-subtle: rgba(109, 219, 150, 0.08);
    --biz-primary-soft: rgba(109, 219, 150, 0.12);
    --biz-gradient-start: #6ddb96;
    --biz-gradient-end: #45a86a;
    --biz-surface: #152e1d;
    --biz-surface-alt: #1c3a25;
    --biz-bg: #0b1f12;
    --biz-text: #e2e8f0;
    --biz-text-secondary: #94a3b8;
    --biz-text-muted: #64748b;
    --biz-border: #1e3a2a;
    --biz-border-light: #1a3324;
    --biz-sidebar-bg: #061a0f;
    --biz-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  body, .kc-body, [class*="kc-body"], .pf-c-page__main, .pf-c-page__main-section {
    background: var(--biz-bg) !important;
  }

  .form-control, .kc-input, [class*="kc-input"], .pf-c-form-control {
    background: #0b1f12 !important;
    color: var(--biz-text) !important;
  }

  .card-pf, .kc-card, [class*="kc-card"], .pf-c-card {
    background: var(--biz-surface) !important;
  }

  .table th, .kc-table th, .pf-c-table thead th {
    background: var(--biz-surface-alt) !important;
  }

  .table td, .kc-table td, .pf-c-table tbody td {
    border-bottom-color: var(--biz-border-light) !important;
  }

  .table tr:hover, .kc-table tr:hover, .pf-c-table tbody tr:hover {
    background: var(--biz-primary-subtle) !important;
  }

  .alert-success, .pf-c-alert.pf-m-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
  }

  .alert-danger, .pf-c-alert.pf-m-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
  }

  .alert-warning, .pf-c-alert.pf-m-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
  }

  .alert-info, .pf-c-alert.pf-m-info {
    background: rgba(109, 219, 150, 0.08) !important;
    border-color: rgba(109, 219, 150, 0.2) !important;
    color: #6ddb96 !important;
  }

  .dropdown-menu, .pf-c-dropdown__menu {
    background: var(--biz-surface) !important;
    border-color: var(--biz-border) !important;
  }

  .modal-content, .pf-c-modal-box {
    background: var(--biz-surface) !important;
  }

  .modal-header, .pf-c-modal-box__header {
    border-bottom-color: var(--biz-border) !important;
  }

  .modal-footer, .pf-c-modal-box__footer {
    border-top-color: var(--biz-border) !important;
  }

  .nav-tabs > li > a {
    color: var(--biz-text-secondary) !important;
  }

  .nav-tabs > li.active > a {
    color: var(--biz-primary) !important;
  }
}