/* Zyte theme: polished Material-inspired styles */
:root{
  /* Zyte brand-inspired palette */
  --zyte-primary: #5a2d82; /* Zyte purple */
  --zyte-primary-variant: #3e1f5a; /* deeper purple variant */
  --zyte-on-primary: #FFFFFF;
  --zyte-surface: #FFFFFF;
  --zyte-surface-variant: #F6F7FB;
  --zyte-secondary: #008f87; /* teal/green accent used by Zyte */
  /* Unified list hover (blend of primary & secondary at ~10% opacity over white) */
  --zyte-row-hover: #f3eef9; /* purple-tinted hover */
  --zyte-error: #d9534f; /* bootstrap danger */
  --zyte-accent: #00bfa5; /* bright accent */
  --zyte-elevation-1: 0 1px 3px rgba(15,15,25,0.06);
  --zyte-elevation-2: 0 8px 22px rgba(15,15,25,0.08);
  --zyte-radius: 12px;
  
  /* Sticky header offset (navbar height) */
  --sticky-top-offset: 56px;

  /* Override Bootstrap primary with Zyte brand purple */
  --bs-primary: #5a2d82;
  --bs-primary-rgb: 90, 45, 130;
  --bs-link-color: #5a2d82;
  --bs-link-color-rgb: 90, 45, 130;
  --bs-link-hover-color: #3e1f5a;
  --bs-link-hover-color-rgb: 62, 31, 90;
  --bs-focus-ring-color: rgba(90, 45, 130, 0.25);
}

/* Dark mode palette */
[data-bs-theme="dark"] {
  --zyte-primary: #8b5fc7; /* lighter purple for dark mode */
  --zyte-primary-variant: #6b4a98; /* medium purple variant */
  --zyte-on-primary: #FFFFFF;
  --zyte-surface: #1a1a2e;
  --zyte-surface-variant: #16213e;
  --zyte-secondary: #00bfa5; /* brighter teal for dark mode */
  --zyte-row-hover: #2a2a3e;
  --zyte-error: #ff6b6b; /* softer red for dark mode */
  --zyte-accent: #4dffdb;
  --zyte-elevation-1: 0 1px 3px rgba(0,0,0,0.3);
  --zyte-elevation-2: 0 8px 22px rgba(0,0,0,0.4);

  /* Override Bootstrap primary with Zyte brand purple (dark) */
  --bs-primary: #8b5fc7;
  --bs-primary-rgb: 139, 95, 199;
  --bs-link-color: #a07dd4;
  --bs-link-color-rgb: 160, 125, 212;
  --bs-link-hover-color: #c0a0e8;
  --bs-link-hover-color-rgb: 192, 160, 232;
  --bs-focus-ring-color: rgba(139, 95, 199, 0.35);
}

/* ========================================
   STICKY TABLE HEADERS
   ======================================== */

/* Sticky table headers for all list pages */
.table-responsive {
  position: relative;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bs-body-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .table thead th {
  background-color: var(--zyte-surface);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Ensure sorting links in sticky headers are clickable */
.table thead th a {
  position: relative;
  z-index: 11;
  display: block;
  width: 100%;
  color: inherit;
}

/* Add subtle border to sticky headers */
.table thead th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--bs-border-color);
}

/* Mobile: disable sticky headers on small screens */
@media (max-width: 768px) {
  .table thead th {
    position: static;
    box-shadow: none;
  }
  
  .table thead th::after {
    display: none;
  }
}

[data-bs-theme="dark"] body {
  background: linear-gradient(180deg, #0f0f1e 0%, #1a1a2e 100%);
  color: #e4e4e7;
}

[data-bs-theme="dark"] .page-title {
  color: #f4f4f5;
}

[data-bs-theme="dark"] .page-subtitle {
  color: #a1a1aa;
}

[data-bs-theme="dark"] .mdc-button--outlined {
  border-color: rgba(255, 255, 255, 0.2);
  color: #e4e4e7;
}

/* Dark mode navbar styling (kept for backwards compatibility) */
[data-bs-theme="dark"] .navbar {
  background: linear-gradient(90deg, var(--zyte-primary-variant), #2a1a40) !important;
}

[data-bs-theme="dark"] .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: #2a2a3e;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .dropdown-item {
  color: #e4e4e7;
}

[data-bs-theme="dark"] .dropdown-item:hover {
  background-color: rgba(139, 95, 199, 0.2);
  color: #ffffff;
}

[data-bs-theme="dark"] .card {
  background: var(--zyte-surface);
  border-color: transparent;
}

[data-bs-theme="dark"] .table {
  color: #e4e4e7;
}

[data-bs-theme="dark"] .table thead th {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(139, 95, 199, 0.1);
}

[data-bs-theme="dark"] .table tbody tr {
  border-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: var(--zyte-row-hover);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #2a2a3e;
  border-color: rgba(255, 255, 255, 0.2);
  color: #e4e4e7;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #2a2a3e;
  border-color: var(--zyte-primary);
  color: #e4e4e7;
}

[data-bs-theme="dark"] .badge {
  background-color: rgba(139, 95, 199, 0.3);
  color: #e4e4e7;
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--zyte-surface);
  color: #e4e4e7;
}

[data-bs-theme="dark"] .modal-header {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .btn-close {
  filter: invert(1);
}

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--zyte-surface);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

[data-bs-theme="dark"] .list-group-item:hover {
  background-color: var(--zyte-row-hover);
}

[data-bs-theme="dark"] .list-group-item.active {
  background-color: var(--zyte-primary) !important;
  border-color: var(--zyte-primary) !important;
  color: var(--zyte-on-primary) !important;
}

[data-bs-theme="dark"] .table {
  background: var(--zyte-surface);
}

[data-bs-theme="dark"] .table thead th {
  background: rgba(139, 95, 199, 0.15);
  color: #f4f4f5;
}

[data-bs-theme="dark"] .table tbody td {
  border-top-color: rgba(255, 255, 255, 0.05);
  background-color: transparent;
}

[data-bs-theme="dark"] .table tbody tr {
  background-color: transparent;
}

[data-bs-theme="dark"] .bg-light {
  background-color: #2a2a3e !important;
}

[data-bs-theme="dark"] .alert {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .alert-info {
  background-color: rgba(13, 110, 253, 0.2);
  border-color: rgba(13, 110, 253, 0.3);
  color: #9ec5fe;
}

[data-bs-theme="dark"] .alert-warning {
  background-color: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.3);
  color: #ffe69c;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.3);
  color: #f8b4bb;
}

[data-bs-theme="dark"] .alert-success {
  background-color: rgba(25, 135, 84, 0.2);
  border-color: rgba(25, 135, 84, 0.3);
  color: #a3cfbb;
}

[data-bs-theme="dark"] .text-dark {
  color: #e4e4e7 !important;
}

[data-bs-theme="dark"] .text-muted {
  color: #a1a1aa !important;
}

[data-bs-theme="dark"] .border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .card-header {
  background-color: rgba(139, 95, 199, 0.15);
  border-bottom-color: var(--zyte-primary) !important;
  color: #f4f4f5;
}

[data-bs-theme="dark"] .card-body {
  background-color: var(--zyte-surface);
  color: #e4e4e7;
}

/* Preserve colored card backgrounds in dark mode (stat cards, etc.) */
[data-bs-theme="dark"] .card.bg-primary .card-body,
[data-bs-theme="dark"] .card.bg-success .card-body,
[data-bs-theme="dark"] .card.bg-danger .card-body,
[data-bs-theme="dark"] .card.bg-info .card-body,
[data-bs-theme="dark"] .card.bg-warning .card-body,
[data-bs-theme="dark"] .card.bg-dark .card-body,
[data-bs-theme="dark"] .card.bg-secondary .card-body {
  background-color: transparent !important;
}

/* Outline stat cards (bg-opacity-10 pattern) - keep card-body transparent */
[data-bs-theme="dark"] .card.bg-opacity-10 .card-body,
[data-bs-theme="dark"] .card.bg-orange-subtle .card-body {
  background-color: transparent !important;
}

[data-bs-theme="dark"] .card.bg-primary,
[data-bs-theme="dark"] .card.bg-success,
[data-bs-theme="dark"] .card.bg-danger,
[data-bs-theme="dark"] .card.bg-info,
[data-bs-theme="dark"] .card.bg-warning,
[data-bs-theme="dark"] .card.bg-dark,
[data-bs-theme="dark"] .card.bg-secondary {
  border-color: transparent;
}

[data-bs-theme="dark"] .card-footer {
  background-color: rgba(139, 95, 199, 0.1);
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

/* Smooth transitions for theme switching */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Branded focus rings — replaces Bootstrap's default blue outline */
:focus-visible {
  outline: 2px solid var(--zyte-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

body,
.card,
.navbar,
.dropdown-menu,
.form-control,
.form-select,
.modal-content,
.list-group-item,
.alert,
.bg-light {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


*{box-sizing:border-box}
body{
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  margin:0;padding:0;background:linear-gradient(180deg,#F8FBFE 0%, #F3F7FB 100%);
  color:#0f172a;
}

.zyte-topbar{background:linear-gradient(90deg,var(--zyte-primary),var(--zyte-primary-variant));color:var(--zyte-on-primary);padding:14px 0;box-shadow:var(--zyte-elevation-2)}
.zyte-topbar .navbar-brand{color:var(--zyte-on-primary);font-weight:600}

.container{max-width:1100px;margin:12px auto;padding:20px}

/* Card wrapper for main content */
.card{
  background:var(--zyte-surface);
  border-radius:var(--zyte-radius);
  box-shadow:var(--zyte-elevation-1);
  padding:20px;
}

.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.page-title{margin:0;font-size:1.6rem;color:#0F172A}
.page-subtitle{color:#6B7280;font-size:0.95rem}

/* Buttons */
.mdc-button{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:none;background:transparent;color:inherit;text-decoration:none;cursor:pointer;font-weight:500}
.mdc-button--raised{background:var(--zyte-primary);color:var(--zyte-on-primary);box-shadow:var(--zyte-elevation-1)}
.mdc-button--outlined{background:transparent;border:1px solid rgba(15,23,42,0.06);color:#111827}
.mdc-button--dangerous{background:transparent;color:var(--zyte-error)}
.mdc-button:hover{transform:translateY(-1px);transition:all 120ms ease}

/* Table styles: elevated surface with subtle dividers */
.table{width:100%;border-collapse:separate;border-spacing:0;background:linear-gradient(180deg, var(--zyte-surface), #fff);border-radius:10px;overflow:hidden;box-shadow:var(--zyte-elevation-1)}
.table thead th{background:linear-gradient(180deg, rgba(90,45,130,0.06), rgba(90,45,130,0.02));padding:14px 16px;text-align:left;color:#0f172a;font-weight:600;font-size:0.95rem}
.table tbody td{padding:14px 16px;border-top:1px solid rgba(15,23,42,0.04);vertical-align:middle}
/* Unified hover color for all list/table rows (apply to cells so it is visible) */
.table tbody tr:hover td{background: var(--zyte-row-hover) !important;}

/* Ensure dropdown menus inside tables are not clipped by overflow:hidden on table */

/* Clickable table rows */
.table tbody tr.clickable-row{cursor:pointer}
.table tbody tr.clickable-row:focus{outline:2px solid rgba(90,45,130,0.12);outline-offset:2px}

/* Left accent on hovered clickable rows */
.table tbody tr.clickable-row:hover td:first-child {
  border-left: 3px solid var(--zyte-primary);
  padding-left: calc(1rem - 3px);
}

/* Account name link styles */
.account-link{color:inherit;text-decoration:none;font-weight:600}
.account-link:hover{color:var(--zyte-primary);text-decoration:underline}

/* Removed per-row hover variants in favor of single consistent brand-themed hover */

/* Ensure the row background tint takes precedence over link hover color */
.table tbody tr.clickable-row td{transition: background-color 140ms ease}
.account-link:hover{color:var(--zyte-primary);text-decoration:underline;background:transparent}

.avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:600;margin-right:8px}
.avatar--violet{background:var(--zyte-primary)}

.actions a{margin-right:8px}

/* Responsive tweaks */
@media (max-width:720px){
  .container{padding:12px}
  .page-header{flex-direction:column;align-items:stretch}
  .table thead{display:none}
  .table tbody td{display:block;padding:12px}
  .table tbody tr{margin-bottom:12px;border-radius:8px;display:block;background:var(--zyte-surface)}
}

/* Small helpers */
.muted{color:#6B7280;font-size:0.9rem}

/* Bootstrap overrides */
/* Buttons */
.btn-primary{
  background-color: var(--zyte-primary) !important;
  border-color: var(--zyte-primary-variant) !important;
  color: var(--zyte-on-primary) !important;
  box-shadow: 0 2px 6px rgba(90,45,130,0.18);
}
.btn-primary:hover, .btn-primary:focus{
  background-color: var(--zyte-primary-variant) !important;
  border-color: var(--zyte-primary-variant) !important;
}
.btn-secondary{
  background-color: #6c757d !important; /* keep readable secondary */
  color: #fff !important;
}
.btn-outline-secondary{
  color: #495057 !important;
  border-color: rgba(73,80,87,0.15) !important;
}


/* Form controls */
.form-control:focus{
  box-shadow: 0 0 0 0.2rem rgba(90,45,130,0.25) !important;
  border-color: var(--zyte-primary-variant) !important;
}
.form-control{
  border-radius: 8px;
}

/* List-group active / selected */
.list-group-item.active{
  background-color: var(--zyte-primary) !important;
  border-color: var(--zyte-primary) !important;
  color: var(--zyte-on-primary) !important;
}

/* Small avatar touch */
.avatar--violet{background:var(--zyte-primary);box-shadow:0 2px 6px rgba(90,45,130,0.12)}

/* Navbar active animation underline */
.nav-link{
  transition: color 160ms ease, transform 160ms ease;
}
.nav-link.active{
  transform: translateY(-2px);
}
.nav-link.active::after{
  content: '';
  display: block;
  height: 3px;
  width: 40%;
  background: linear-gradient(90deg,var(--zyte-primary),var(--zyte-primary-variant));
  border-radius: 2px;
  margin-top:4px;
  transition: width 220ms ease;
}

/* Enhanced navbar styling */
.zyte-navbar{
  background: linear-gradient(90deg, var(--zyte-primary) 0%, var(--zyte-secondary) 100%) !important;
  backdrop-filter: saturate(160%) blur(4px);
  -webkit-backdrop-filter: saturate(160%) blur(4px);
  box-shadow: 0 2px 6px rgba(15,15,25,0.18);
}
.zyte-navbar .navbar-brand{
  color: var(--zyte-on-primary) !important;
  font-weight:600;
  letter-spacing:0.5px;
}
.zyte-navbar .nav-link{
  color: rgba(255,255,255,0.82) !important;
  font-weight:500;
}
.zyte-navbar .nav-link:hover{
  color:#fff !important;
}
.zyte-navbar .nav-link.active{
  color:#fff !important;
}
.zyte-navbar .dropdown-menu{
  border-radius:10px;
  box-shadow: var(--zyte-elevation-2);
  border:1px solid rgba(90,45,130,0.25);
}
.zyte-navbar .dropdown-item:hover{
  background: var(--zyte-surface-variant);
}

/* Toast variants (lighter success/error) */
.toast-success-light{
  background: #d7f7e3 !important; /* very light green */
  color: #0a5132 !important;
  border: 1px solid #b3eccd !important;
}
.toast-success-light .toast-header{
  background: transparent !important;
  color: #0a5132 !important;
  border-bottom: 1px solid #b3eccd !important;
}
.toast-error-light{
  background: #ffe3e3 !important; /* very light red */
  color: #7d1f1f !important;
  border: 1px solid #ffcccc !important;
}
.toast-error-light .toast-header{
  background: transparent !important;
  color: #7d1f1f !important;
  border-bottom: 1px solid #ffcccc !important;
}

/* Toast warning (validation) */
.toast-warning-light{
  background: #fff6d8 !important; /* pale yellow */
  color: #5c4700 !important;
  border: 1px solid #ffe9a8 !important;
}
.toast-warning-light .toast-header{
  background: transparent !important;
  color: #5c4700 !important;
  border-bottom: 1px solid #ffe9a8 !important;
}

/* Dark mode: Bootstrap contextual table classes (table-success, table-secondary, table-light)
   have poor contrast in dark mode — override with subtle, readable alternatives */
[data-bs-theme="dark"] .table td.table-success,
[data-bs-theme="dark"] .table th.table-success {
  --bs-table-bg: rgba(25, 135, 84, 0.15);
  --bs-table-color: #e4e4e7;
}

[data-bs-theme="dark"] .table td.table-secondary,
[data-bs-theme="dark"] .table th.table-secondary {
  --bs-table-bg: rgba(108, 117, 125, 0.15);
  --bs-table-color: #e4e4e7;
}

[data-bs-theme="dark"] .table thead.table-light th,
[data-bs-theme="dark"] .table tfoot.table-light td {
  --bs-table-bg: rgba(139, 95, 199, 0.15);
  --bs-table-color: #f4f4f5;
}