:root {
  /* Brand Color Variables */
  --primary: #1f1b33;
  --secondary: #2b254a;
  --accent: #b53ef4;

  /* Base Colors */
  --primary-fg: #ffffff;
  --body-fg: #ffffff;
  --body-bg: #0d0b1a;
  --body-quiet-color: #bbbbbb;
  --body-loud-color: #ffffff;

  /* Header + Breadcrumbs */
  --header-color: #ffffff;
  --header-branding-color: #b53ef4;
  --header-bg: #1c1a2e;
  --header-link-color: #ffffff;
  --breadcrumbs-fg: #b53ef4;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #1c1a2e;

  /* Links */
  --link-fg: #b53ef4;
  --link-hover-color: #d76fff;
  --link-selected-fg: #8b4df9;

  /* Borders + Hairlines */
  --hairline-color: #2e2a4f;
  --border-color: #2e2a4f;

  /* Feedback Colors */
  --error-fg: #ff3e6c;
  --message-success-bg: #112b20;
  --message-warning-bg: #2f2205;
  --message-error-bg: #2b1020;

  /* Background Variants */
  --darkened-bg: #1a1530;
  --selected-bg: #301e4c;
  --selected-row: #3d2a63;

  /* Buttons */
  --button-fg: #ffffff;
  --button-bg: linear-gradient(90deg, #b53ef4, #8b4df9);
  --button-hover-bg: linear-gradient(90deg, #8b4df9, #b53ef4);
  --default-button-bg: #2e2a4f;
  --default-button-hover-bg: #3f3a60;

  /* Danger Buttons */
  --delete-button-bg: #ff3e6c;
  --delete-button-hover-bg: #b81b43;

  /* Close Buttons / Object Tools */
  --close-button-bg: #1f1b33;
  --close-button-hover-bg: #2b254a;
  --object-tools-fg: #ffffff;
  --object-tools-bg: #1a1530;
  --object-tools-hover-bg: #292043;

  /* Typography */
  --font-family-primary: 'Inter', sans-serif;
  --font-family-monospace: 'Fira Mono', monospace;
}

.sticky.toggle-nav-sidebar{
    display: none !important;
}

#nav-filter{
    display: none !important;
}

.breadcrumbs {
    display: none !important;
}

.theme-toggle{
    display: none !important;
}


/* === Root Reset === */
body, html {
  background: linear-gradient(135deg, #18122B 0%, #1e1b3a 50%, #2d1e3e 100%) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif;
}

#container > .main {
    padding:10px;
  /* min-height: 100vh; */
  background: linear-gradient(135deg, #18122B 0%, #1e1b3a 50%, #2d1e3e 100%) !important;
}

.paginator {
    width: auto !important;
}

/* === Header === */
#header {
  background: #1c1a2e !important;
  border-bottom: 2px solid #b53ef4 !important;
  box-shadow: 0 4px 10px rgba(181, 62, 244, 0.3);
}

#branding h1, #user-tools {
  color: #fff !important;
}

/* === Sidebar Navigation === */
#nav-sidebar {
  background-color: transparent !important;
  border-right: none !important;
}

#nav-sidebar .module {
  background: transparant !important;
  border: 1px solid #2e2a4f !important;
  border-radius: 12px;
  margin: 10px 12px;
  padding: 12px;
  box-shadow: none;
}

#nav-sidebar .module h2 {
  color: #b53ef4 !important;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#nav-sidebar .module th  a {
  color: #d0cfff !important;
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent !important;
}

#nav-sidebar .module th a:hover,
#nav-sidebar .module th a:focus {
  background: rgba(181, 62, 244, 0.2) !important;
  color: #fff !important;
}

#nav-sidebar .current-model {
  background: rgba(181, 62, 244, 0.35) !important;
  border-left: 3px solid #b53ef4;
}

#changelist .actions{
    width:auto !important;
}

#changelist-filter{
      background: var(--body-bg) !important;
}

/* === Main Content === */
#content {
  /* background-color: #0d0b1a !important; */
  padding: 20px;
  color: #fff !important;
}

tr:nth-child(even), tr:nth-child(even) .errorlist, tr:nth-child(odd) + .row-form-errors, tr:nth-child(odd) + .row-form-errors .errorlist {
  background: transparent !important;
}

/* === Tables === */
.change-list table {
  background: transparent !important;
  border-collapse: collapse;
  width: 100%;
}

.change-list thead th {
  background: #1f1b33 !important;
  color: #b53ef4 !important;
  font-size: 11px;
  text-transform: uppercase;
  padding: 8px;
}

.change-list tbody td {
  background: #12101f !important;
  border-bottom: 1px solid #2e2a4f !important;
  padding: 10px;
  color: #ffffff !important;
}

.change-list tbody tr:hover td {
  background: rgba(181, 62, 244, 0.1) !important;
}

/* === Forms + Inputs === */
input, select, textarea {
  background-color: #1a1530 !important;
  color: #ffffff !important;
  border: 1px solid #2e2a4f !important;
  border-radius: 6px;
  padding: 8px;
}

input:focus, select:focus, textarea:focus {
  border-color: #b53ef4 !important;
  box-shadow: 0 0 5px #b53ef4;
}

/* === Buttons === */
input[type="submit"], button, .button {
  background: linear-gradient(90deg, #b53ef4, #8b4df9) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
}

input[type="submit"]:hover, button:hover, .button:hover {
  background: linear-gradient(90deg, #8b4df9, #b53ef4) !important;
}

/* === Alerts === */
.errornote, .errorlist {
  background: #2b1020 !important;
  color: #ff3e6c !important;
  border: 1px solid #ff3e6c !important;
  border-radius: 8px;
  padding: 10px;
}

.success {
  background: #102b1f !important;
  color: #33ffad !important;
  border: 1px solid #33ffad !important;
  padding: 10px;
  border-radius: 8px;
}

/* === Breadcrumbs / Navigation === */
#container .breadcrumbs {
  background: transparent !important;
  border: none !important;
  color: #b53ef4 !important;
}

.breadcrumbs a {
  color: #70e3ff !important;
}

.breadcrumbs a:hover {
  text-decoration: underline;
  color: #d4f1ff !important;
}

/* === Links === */
a {
  color: #b53ef4 !important;
}

a:hover {
  color: #d76fff !important;
}

.paginator a:link, .paginator a:visited{
    background: transparent !important;
    color: #b53ef4 !important;
    /* text-decoration: none; */
}

/* === Top Navbar === */
#navbar {
  background: var(--header-bg) !important;
  color: var(--header-color) !important;
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 56px;
  box-shadow: 0 2px 8px rgba(181, 62, 244, 0.15);
  border-bottom: 2px solid var(--accent);
}

#navbar a {
  color: var(--header-link-color) !important;
  text-decoration: none;
  margin-right: 24px;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.2s;
}

#navbar a:hover,
#navbar a:focus {
  color: var(--accent) !important;
  text-decoration: underline;
}

#navbar .navbar-brand {
  color: var(--header-branding-color) !important;
  font-weight: 700;
  font-size: 20px;
  margin-right: 32px;
}