/* ========== Modern Bootstrap Overrides (Poppins + Roboto) ========== */

/* Design tokens */
:root {
  /* Brand palette (tweak to taste) */
  --bs-primary:        #4f46e5; /* indigo-600 */
  --bs-primary-rgb:    79,70,229;
  --bs-secondary:      #64748b; /* slate-500 */
  --bs-success:        #10b981; /* emerald-500 */
  --bs-info:           #06b6d4; /* cyan-500 */
  --bs-warning:        #f59e0b; /* amber-500 */
  --bs-danger:         #ef4444; /* red-500 */
  --bs-light:          #f8fafc; /* slate-50 */
  --bs-dark:           #0f172a; /* slate-900 */

  /* Surfaces */
  --surface:           #ffffff;
  --surface-2:         #f6f7fb;
  --border:            #e6e8f0;

  /* Typography */
  --font-display:      "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-body:         "Roboto", system-ui, -apple-system, Segoe UI, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Radii & shadows */
  --radius:            14px;
  --radius-sm:         10px;
  --radius-lg:         18px;
  --shadow-sm:         0 4px 10px rgba(15, 23, 42, .06);
  --shadow:            0 10px 24px rgba(15, 23, 42, .10);
  --shadow-lg:         0 18px 40px rgba(15, 23, 42, .16);

  /* Focus ring */
  --ring:              rgba(var(--bs-primary-rgb), .35);

    /* Indigo gradient + neutrals tuned for dark UI */
  --nav-bg:           #0b0d1f;           /* near-black with blue undertone */
  --nav-bg-2:         #0f1130;           /* slightly lighter for panels */
  --nav-border:       #1a1e3a;
  --nav-link:         #b8c2ff;           /* desaturated indigo */
  --nav-link-dim:     #94a3b8;           /* slate for secondary items */
  --nav-link-hover:   #e0e7ff;
  --nav-link-active:  #ffffff;
  --nav-pill:         rgba(99, 102, 241, .16); /* indigo-500 @ 16% */
  --nav-pill-border:  rgba(99, 102, 241, .45);
  --nav-shadow:       0 10px 24px rgba(0,0,0,.35);
}

/* ---------- Base Typography ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: #0b1324;
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, .display-1, .display-2, .display-3, .navbar-brand {
  font-family: var(--font-display);
  letter-spacing: .2px;
}
h1, .h1 { font-weight: 700; }
h2, .h2 { font-weight: 600; }
h3, .h3 { font-weight: 600; }
.lead { color: #334155; }

/* Subtle headings */
.heading-subtle { font-family: var(--font-display); font-weight: 500; color: #334155; }

/* ---------- Layout & Containers ---------- */
.container, .container-fluid { padding-left: 1.0rem; padding-right: 1.0rem; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card-header {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  font-family: var(--font-display);
  font-weight: 600;
}
.card:hover { box-shadow: var(--shadow); transition: box-shadow .25s ease; }

/* Glass variant (optional utility) */
.card-glass {
  background: rgba(255,255,255,.6);
  /*backdrop-filter: blur(10px);*/
  border: 1px solid rgba(255,255,255,.35);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px; /* pill */
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .05s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #4338ca; /* indigo-700 */
  --bs-btn-hover-border-color: #4338ca;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), .22);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: rgba(var(--bs-primary-rgb), .45);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .08);
  --bs-btn-hover-border-color: var(--bs-primary);
}

/* Icon-only ghost button */
.btn-ghost {
  background: transparent;
  border: 0;
  color: #475569;
  border-radius: 10px;
}
.btn-ghost:hover { background: rgba(2,6,23,.05); color: #0f172a; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
    padding: 12px 15px;
    font-weight: 200;
    font-family: poppins;
}
.form-check-input {
    border-radius: 12px;
    border: 1px solid var(--border);
    font-weight: 200;
    font-family: poppins;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), .6);
  box-shadow: 0 0 0 .2rem var(--ring);
}
.input-group-text { border-radius: 12px; border: 1px solid var(--border); }

.form-label { font-weight: 600; font-family: var(--font-display); }

/* ---------- Nav / Tabs / Pills ---------- */
.nav-pills .nav-link {
  border-radius: 999px;
  font-weight: 600;
  color: #475569;
  background: #eef2ff00;
}
.nav-pills .nav-link.active {
  background: rgba(var(--bs-primary-rgb), .12);
  color: var(--bs-primary);
  box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .30);
}

/* ---------- Navbar / Dropdown ---------- */
.navbar {
  border-bottom: 1px solid var(--border);
  background: #ffffffcc;
  backdrop-filter: blur(6px);
}
.dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ---------- Tables ---------- */
.table {
  --bs-table-striped-bg: #f7f8fc;
  --bs-table-hover-bg: #f2f4fb;
  border-color: var(--border);
}
.table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid var(--border);
}
.table td, .table th { vertical-align: middle; }

/* ---------- List group ---------- */
.list-group-item {
  border-color: var(--border);
  border-radius: 12px;
  margin-bottom: .5rem;
}
.list-group-item + .list-group-item { margin-top: .125rem; }

/* ---------- Badges / Alerts ---------- */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
}
.alert {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

/* ---------- Modals ---------- */
.modal-content {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

/* ---------- Pagination ---------- */
.page-link {
  border-radius: 10px !important;
  border: 1px solid var(--border);
}
.page-item.active .page-link {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), .2);
}

/* ---------- Utilities ---------- */
.shadow-soft { box-shadow: var(--shadow-sm) !important; }
.rounded-2xl { border-radius: var(--radius-lg) !important; }
.pill { border-radius: 999px !important; }
.text-muted { color: #64748b !important; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:6px; padding:.15rem .4rem; }

/* ---------- Links ---------- */
a { color: var(--bs-primary); text-decoration: none; }
a:hover { color: #4338ca; text-decoration: underline; }

/* ---------- Focus visible ---------- */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- Dark Mode (auto) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:        #0b1020;
    --surface-2:      #070b16;
    --border:         #1f2a44;
    --bs-light:       #0f172a;
    --bs-dark:        #e2e8f0;
  }
  body { color: #e6e9ef; background: var(--surface-2); }
  .card { background: #0c1426; border-color: var(--border); box-shadow: none; }
  .card-header { background: linear-gradient(180deg, #0c1426, #0a1120); border-bottom-color: var(--border); }
  .navbar { background: #0b1020cc; border-bottom-color: var(--border); }
  .dropdown-menu { background: #0c1426; border-color: var(--border); }
  .form-control, .form-select { background:#0e1730; border-color: var(--border); color:#e6e9ef; }
  .form-control::placeholder { color:#94a3b8; }
  .table { --bs-table-striped-bg: #0e1530; --bs-table-hover-bg: #0f1836; border-color: var(--border); color: #e6e9ef; }
  .list-group-item { background:#0e1730; border-color: var(--border); color:#dbe1ea; }
  .alert { background:#0e1730; color:#e6e9ef; }
  .page-link { background:#0b1020; color:#e6e9ef; border-color: var(--border); }
}
/* Header (top navbar) */
.navbar.navbar-dark {
  background:
    radial-gradient(1200px 400px at -10% -50%, #4338ca 0%, transparent 60%),
    linear-gradient(180deg, #10122b 0%, #0b0d1f 100%);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
}
.navbar.navbar-dark .navbar-brand { color: #fff; font-weight: 700; }
.navbar.navbar-dark .nav-link { color: var(--nav-link); }
.navbar.navbar-dark .nav-link:hover { color: var(--nav-link-hover); }

/* Sidebar container */
.app-sidebar {
  width: 270px;
  background:
    radial-gradient(900px 300px at 120% -40%, rgba(99,102,241,.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%);
  border-right: 1px solid var(--nav-border);
  color: var(--nav-link-dim);
  min-height: 100vh;
  position: sticky;
  top: 0;
}

/* Sidebar header (logo/title) */
.app-sidebar .sidebar-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--nav-border);
  color: #e5e7eb;
  font-family: var(--font-display);
  font-weight: 600;
}

/* Sidebar nav items */
.sidebar-nav .list-group-item {
  background: transparent;
  color: var(--nav-link);
  border: 0;
  border-radius: 10px;
  margin: .15rem .5rem;
  padding: .55rem .75rem;
}
.sidebar-nav .list-group-item:hover {
  background: var(--nav-pill);
  color: var(--nav-link-hover);
  box-shadow: inset 0 0 0 1px var(--nav-pill-border);
}
.sidebar-nav .list-group-item.active,
.sidebar-nav .list-group-item[aria-current="page"] {
  background: linear-gradient(180deg, rgba(99,102,241,.26), rgba(76,81,191,.26));
  color: var(--nav-link-active);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Accordion (sidebar groups) */
.sidebar-accordion .accordion-item {
  background: transparent;
  border: 0;
}
.sidebar-accordion .accordion-button {
  background: transparent;
  color: var(--nav-link);
  border-radius: 10px;
  margin: .25rem .5rem;
  padding: .6rem .9rem;
  border: 1px solid transparent;
}
.sidebar-accordion .accordion-button:hover {
  background: var(--nav-pill);
  color: var(--nav-link-hover);
  border-color: var(--nav-pill-border);
}
.sidebar-accordion .accordion-button:focus {
  box-shadow: 0 0 0 .2rem var(--ring);
}
.sidebar-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(180deg, rgba(99,102,241,.24), rgba(79,70,229,.18));
  color: #fff;
  border-color: rgba(255,255,255,.12);
}
.sidebar-accordion .accordion-body {
  padding: .25rem .5rem .75rem .5rem;
}
/* ===== Sidebar: kill stray borders (top/bottom hairlines) ===== */
.app-sidebar .accordion {
  --bs-accordion-border-color: transparent;
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-inner-border-radius: 0;
  border: 0 !important;
}
.app-sidebar .accordion-item,
.app-sidebar .accordion-collapse {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}
.app-sidebar .accordion-button {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}
.app-sidebar .accordion-button:not(.collapsed) {
  border: 0 !important;
  box-shadow: none !important;
}

/* List group “flush” adds a top/bottom border on first/last items — remove in sidebar */
.app-sidebar .list-group-flush > .list-group-item {
  border: 0 !important;
}
.app-sidebar .list-group {
  border: 0 !important;
  box-shadow: none !important;
}

/* Your template adds .border-bottom / .border-top wrappers — neutralize inside sidebar */
.app-sidebar .border-bottom,
.app-sidebar .border-top {
  border-color: transparent !important;
}

/* ===== Container padding: only in content, never in sidebar shell ===== */
/* Remove global padding on the outer layout container */
body > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Put the nice 1rem padding back only in the main content area */
.app-content .container,
.app-content .container-fluid {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
/* Ensure no extra horizontal padding inside the sidebar */
.app-sidebar .container,
.app-sidebar .container-fluid,
.app-sidebar .accordion-body,
.app-sidebar .list-group {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Compact chips, match your modern theme */
.ts-control { min-height: 38px; border-radius: 12px; }
.ts-wrapper.multi .ts-control > div { margin: 2px 4px; padding: .2rem .45rem; border-radius: 999px; }
.ts-dropdown .option { padding: .4rem .6rem; }

/* Pills in the content area to match theme */
.nav-pills .nav-link {
  background: transparent;
  color: #4f46e5;
  border: 1px solid rgba(79,70,229,.25);
}
.nav-pills .nav-link.active {
  background: rgba(79,70,229,.12);
  color: #4338ca;
  box-shadow: inset 0 0 0 1px rgba(79,70,229,.4);
}

/* Content wrapper next to sidebar */
.app-content {
  min-height: 100vh;
  background: var(--surface-2);
}

/* Header action buttons (rounded ghost) */
.header-actions .btn {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: #e2e8f0;
  background: rgba(255,255,255,.06);
}
.header-actions .btn:hover {
  background: rgba(255,255,255,.12);
}

/* Make Bootstrap dropdowns match dark header */
.navbar-dark .dropdown-menu {
  background: #10122b;
  border: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
}
.navbar-dark .dropdown-item { color: #c7d2fe; }
.navbar-dark .dropdown-item:hover { color: #fff; background: rgba(79,70,229,.22); }