@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
body.fullscreen #sidebar { display: none; }
body.fullscreen #main    { margin-left: 0; }

:root {
  --verdon-green:  #009688;
  --verdon-violet: #673692;
  --verdon-blue:   #1c75ba;
  --verdon-orange: #f8b133;
  --verdon-red:    #d21d57;

  --green-50:#ecf8f3;  --green-400:#43a98b; --green-500:#2f8f72; --green-700:#1b5847;
  --violet-50:#f3edf8; --violet-500:#673692;--violet-700:#401f5c;
  --blue-50:#e8f2fa;   --blue-300:#5fa3d6;  --blue-400:#2f87c7;  --blue-500:#1c75ba;
                       --blue-600:#155e96;  --blue-700:#114a76;
  --orange-50:#fef6e6; --orange-500:#d99513;--orange-700:#82570a;
  --red-50:#fdebf1;    --red-500:#d21d57;   --red-700:#841237;

  --neutral-0:#ffffff; --neutral-25:#fafbfc; --neutral-50:#f5f7fa;
  --neutral-100:#eef1f5; --neutral-200:#e2e7ee; --neutral-300:#ccd3dd;
  --neutral-400:#a3acba; --neutral-500:#79828f; --neutral-600:#5b6470;
  --neutral-700:#404754; --neutral-800:#2a303b; --neutral-900:#181d26;

  --grad-spectrum: linear-gradient(90deg,#92c01f 0%,#43a98b 25%,#1c75ba 55%,#673692 80%,#d21d57 100%);

  --bg-app:      var(--neutral-50);
  --bg-surface:  var(--neutral-0);
  --bg-sunken:   var(--neutral-100);
  --fg-1:        var(--neutral-900);
  --fg-2:        var(--neutral-700);
  --fg-3:        var(--neutral-500);
  --fg-4:        var(--neutral-400);
  --fg-on-accent:var(--neutral-0);
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);

  --shadow-sm: 0 1px 2px rgba(15,19,26,.06),0 1px 3px rgba(15,19,26,.05);
  --shadow-md: 0 2px 4px rgba(15,19,26,.06),0 6px 12px rgba(15,19,26,.06);
  --shadow-lg: 0 4px 8px rgba(15,19,26,.06),0 16px 32px rgba(15,19,26,.08);

  --font-sans:    "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --sidebar-w: 240px;
  --header-h:  50px;

  --bs-primary:         var(--verdon-blue);
  --bs-primary-rgb:     28, 117, 186;
  --bs-secondary:       var(--verdon-violet);
  --bs-secondary-rgb:   103, 54, 146;
  --bs-success:         var(--verdon-green);
  --bs-success-rgb:     67, 169, 139;
  --bs-warning:         var(--verdon-orange);
  --bs-warning-rgb:     248, 177, 51;
  --bs-danger:          var(--verdon-red);
  --bs-danger-rgb:      210, 29, 87;
  --bs-info:            var(--verdon-violet);
  --bs-info-rgb:        103, 54, 146;

  --bs-body-font-family:  var(--font-sans);
  --bs-body-color:        var(--neutral-900);
  --bs-body-bg:           var(--neutral-50);
  --bs-border-color:      var(--neutral-300);
  --bs-border-radius:     8px;
  --bs-border-radius-sm:  6px;
  --bs-border-radius-lg:  12px;
  --bs-border-radius-pill:999px;

  --bs-link-color:        var(--verdon-blue);
  --bs-link-hover-color:  var(--blue-600);

  --bs-font-monospace:    var(--font-mono);

  --bs-table-hover-bg:    var(--neutral-50);
  --bs-table-border-color:var(--neutral-200);
  --bs-table-color:       var(--neutral-900);
  --bs-table-striped-bg:  var(--neutral-25);

  --bs-modal-bg:          var(--neutral-0);
  --bs-modal-border-radius: 12px;
  --bs-modal-header-border-color: var(--neutral-200);
  --bs-modal-footer-border-color: var(--neutral-200);
  --bs-modal-box-shadow:  0 8px 32px rgba(15,19,26,.14);

  --bs-input-focus-border-color:  var(--blue-400);
  --bs-form-check-input-checked-bg-color: var(--verdon-blue);
}

[data-theme="dark"] {
  --bg-app:#191a1c; --bg-surface:#232427; --bg-sunken:#141517;
  --fg-1:#f0f0f1; --fg-2:#c8c9cc; --fg-3:#999ca1; --fg-4:#70747a;
  --border-default:#404247; --border-subtle:#323439;

  --bs-body-bg:#191a1c; --bs-body-color:#f0f0f1;
  --bs-border-color:#404247;
  --bs-table-border-color:#404247;
  --bs-table-hover-bg:rgba(255,255,255,.045);
  --bs-modal-bg:#232427;
}

body { font-family: var(--font-sans); background: var(--bg-app); color: var(--fg-1); }

.btn-primary { --bs-btn-bg: var(--verdon-blue); --bs-btn-border-color: var(--verdon-blue);
               --bs-btn-hover-bg: var(--blue-600); --bs-btn-hover-border-color: var(--blue-600); }
.btn-danger  { --bs-btn-bg: var(--verdon-red);  --bs-btn-border-color: var(--verdon-red);
               --bs-btn-hover-bg: var(--red-700); --bs-btn-hover-border-color: var(--red-700); }

.form-control:focus, .form-select:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(28,117,186,.2);
}

.table > thead > tr > th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom-width: 1px;
  background: var(--bg-sunken);
}

.table-sticky thead th { position: sticky; top: 0; z-index: 1; }

.tbl-scroll { overflow: auto; }
.tbl-scroll::-webkit-scrollbar       { width:6px; height:6px; }
.tbl-scroll::-webkit-scrollbar-track { background:transparent; }
.tbl-scroll::-webkit-scrollbar-thumb { background:var(--border-default); border-radius:999px; }
.tbl-scroll::-webkit-scrollbar-thumb:hover { background:var(--fg-3); }

.badge-role { font-family: var(--font-mono); font-size: 11.5px; font-weight:500; text-transform:capitalize; }
.badge-admin  { background: var(--red-50)!important;    color: var(--red-700)!important;    }
.badge-editor { background: var(--blue-50)!important;   color: var(--blue-700)!important;   }
.badge-viewer { background: var(--green-50)!important;  color: var(--green-700)!important;  }
.badge-id     { background: var(--neutral-100)!important; color:var(--fg-3)!important; font-family:var(--font-mono); }

:root {
  --badge-success-bg: var(--green-50);   --badge-success-fg: var(--green-700);
  --badge-warning-bg: var(--orange-50);  --badge-warning-fg: var(--orange-700);
  --badge-pending-bg: var(--neutral-100);  --badge-pending-fg: var(--neutral-600);
  --badge-info-bg:    var(--blue-50);    --badge-info-fg:    var(--blue-700);
  --badge-danger-bg:  var(--red-50);     --badge-danger-fg:  var(--red-700);
  --badge-neutral-bg: var(--neutral-100);--badge-neutral-fg: var(--neutral-600);
}

.tbl-badge-success, .kt-badge-success { background: var(--badge-success-bg) !important; color: var(--badge-success-fg) !important; }
.tbl-badge-warning, .kt-badge-warning { background: var(--badge-warning-bg) !important; color: var(--badge-warning-fg) !important; }
.tbl-badge-pending, .kt-badge-pending { background: var(--badge-pending-bg) !important; color: var(--badge-pending-fg) !important; }
.tbl-badge-info,    .kt-badge-info    { background: var(--badge-info-bg)    !important; color: var(--badge-info-fg)    !important; }
.tbl-badge-danger,  .kt-badge-danger  { background: var(--badge-danger-bg)  !important; color: var(--badge-danger-fg)  !important; }
.tbl-badge-neutral, .kt-badge-neutral { background: var(--badge-neutral-bg) !important; color: var(--badge-neutral-fg) !important; }

.modal.fade .modal-dialog { transition: transform var(--dur-base, 180ms) cubic-bezier(0.16,1,0.3,1); }

@media (min-width: 1201px) {
  .modal { left: var(--sidebar-w, 240px); right: 0; width: auto; }
  body.sp-dock-active .modal                   { right: var(--sp-dock-w, 380px); }
  body.sp-dock-active.sp-dock-collapsed .modal { right: 56px; }
}

[data-bs-theme="dark"] {
  --bg-app:         #191a1c;
  --bg-surface:     #232427;
  --bg-surface-2:   #2d2f33;
  --bg-sunken:      #141517;
  --fg-1:           #f0f0f1;
  --fg-2:           #c8c9cc;
  --fg-3:           #999ca1;
  --fg-4:           #70747a;
  --border-default: #404247;
  --border-subtle:  #323439;

  --bs-body-bg:        #191a1c;
  --bs-body-color:     #f0f0f1;
  --bs-border-color:   #404247;
  --bs-secondary-bg:   #232427;
  --bs-tertiary-bg:    #2d2f33;

  --bs-table-bg:          transparent;
  --bs-table-border-color:#404247;
  --bs-table-hover-bg:    rgba(255,255,255,.045);
  --bs-table-color:       #f0f0f1;

  --bs-modal-bg:           #232427;
  --bs-modal-header-border-color: #404247;
  --bs-modal-footer-border-color: #404247;

  --accent:          #b6b8bd;
  --accent-soft-bg:  rgba(255,255,255,.08);
  --accent-soft-fg:  #c8c9cc;

  --bs-primary:       #5fa3d6;
  --bs-primary-rgb:   95,163,214;

  --red-50:    rgba(210,29,87,.15);
  --red-700:   #f29bb6;
  --blue-50:   rgba(28,117,186,.15);
  --blue-700:  #98c4e6;
  --green-50:  rgba(67,169,139,.15);
  --green-700: #a5dfc6;
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .page-header {
  background-color: var(--bg-surface) !important;
}
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top {
  border-color: var(--border-default) !important;
}
[data-bs-theme="dark"] .flt-bar {
  background: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] {
  --bs-body-bg:    #191a1c;
  --bs-body-color: #f0f0f1;
  --bs-border-color: #404247;

  --bs-form-control-bg:           #2d2f33;
  --bs-form-control-border-color: #404247;
  --bs-form-control-color:        #f0f0f1;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c8c9cc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  .form-control,
  .form-select {
    background-color: #2d2f33;
    border-color: #404247;
    color: #f0f0f1;
  }
  .form-control:focus,
  .form-select:focus {
    background-color: #2d2f33;
    border-color: var(--blue-400);
    color: #f0f0f1;
    box-shadow: 0 0 0 3px rgba(95,163,214,.2);
  }
  .form-control::placeholder { color: #70747a; }
  .form-check-input {
    background-color: #2d2f33;
    border-color: #52555a;
  }

  --bs-table-bg:         transparent;
  --bs-table-color:      #f0f0f1;
  --bs-table-border-color: #404247;
  --bs-table-hover-bg:   rgba(255,255,255,.045);
  --bs-table-striped-bg: rgba(255,255,255,.025);

  .table > thead > tr > th {
    background: #1c1d1f;
    color: #999ca1;
    border-bottom-color: #404247;
  }
  .table > tbody > tr > td {
    border-bottom-color: #323439;
    color: #f0f0f1;
  }
  .table-hover > tbody > tr:hover > td { background-color: rgba(255,255,255,.045); }

  .btn-outline-secondary {
    --bs-btn-color:        #c8c9cc;
    --bs-btn-border-color: #52555a;
    --bs-btn-hover-bg:     #404247;
    --bs-btn-hover-color:  #f0f0f1;
    --bs-btn-hover-border-color: #52555a;
  }
  .btn-outline-primary {
    --bs-btn-color:        var(--blue-300);
    --bs-btn-border-color: var(--blue-400);
    --bs-btn-hover-bg:     var(--blue-500);
    --bs-btn-hover-color:  #fff;
  }
  .btn-outline-danger {
    --bs-btn-color:        #e75f86;
    --bs-btn-border-color: #e75f86;
    --bs-btn-hover-bg:     #d21d57;
    --bs-btn-hover-color:  #fff;
  }

  .page-link {
    background-color: #2d2f33;
    border-color: #404247;
    color: #c8c9cc;
  }
  .page-link:hover {
    background-color: #404247;
    border-color: var(--blue-400);
    color: var(--blue-300);
  }
  .page-item.active .page-link {
    background-color: var(--blue-500);
    border-color: var(--blue-500);
    color: #fff;
  }
  .page-item.disabled .page-link {
    background-color: #232427;
    border-color: #404247;
    color: #5a5c61;
  }

  --bs-modal-bg:                  #232427;
  --bs-modal-header-border-color: #404247;
  --bs-modal-footer-border-color: #404247;
  .modal-content { border-color: #404247; }
  .modal-title   { color: #f0f0f1; }
  .btn-close { filter: invert(1) grayscale(1) brightness(1.5); }

  .input-group-text {
    background-color: #323439;
    border-color: #404247;
    color: #999ca1;
  }

  .badge-admin  { background: rgba(210,29,87,.2)  !important; color: #f29bb6 !important; }
  .badge-editor { background: rgba(28,117,186,.2) !important; color: #98c4e6 !important; }
  .badge-viewer { background: rgba(67,169,139,.2) !important; color: #a5dfc6 !important; }
  .badge-id     { background: rgba(255,255,255,.08) !important; color: #999ca1 !important; }

  --badge-success-bg: rgba(67,169,139,.18);  --badge-success-fg: #a5dfc6;
  --badge-warning-bg: rgba(248,177,51,.18);  --badge-warning-fg: #f8d788;
  --badge-pending-bg: rgba(255,255,255,.08); --badge-pending-fg: #c8c9cc;
  --badge-info-bg:    rgba(28,117,186,.20);  --badge-info-fg:    #98c4e6;
  --badge-danger-bg:  rgba(210,29,87,.20);   --badge-danger-fg:  #f29bb6;
  --badge-neutral-bg: rgba(255,255,255,.08); --badge-neutral-fg: #c8c9cc;

  .sb-link.active { background: rgba(255,255,255,.09); color: #f0f0f1; }
  .page-header    { background: #232427; border-bottom-color: #404247; }
  .bg-white       { background-color: #232427 !important; }

  .pf-header, .pf-about, .pf-cards { background: #232427; }
  .pf-card { border-color: #404247; }
  .pf-field-value { color: #f0f0f1; }
  .pf-name        { color: #f0f0f1; }
}

.text-muted { color: var(--fg-3) !important; }
[data-theme="dark"] .text-muted { color: #999ca1 !important; }