/* Remove left gap and double border for file input button */
/* Themed file input button (Choose File) */
input[type="file"].form-control::-webkit-file-upload-button,
input[type="file"]::-webkit-file-upload-button {
  border-radius: 2rem;
  border: 1.5px solid rgba(147, 51, 234, 0.18);
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.18), rgba(190, 24, 93, 0.10)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
  color: #f3eaff;
  box-shadow: 0 2px 12px 0 rgba(80, 20, 120, 0.18), 0 0 0 1px rgba(255,255,255,0.04) inset;
  padding: 0.45rem 1.2rem;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, border-color .18s, color .18s;
}
input[type="file"].form-control::-webkit-file-upload-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.28), rgba(190, 24, 93, 0.18)),
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.02));
  color: #fff;
  border-color: rgba(147, 51, 234, 0.32);
}
input[type="file"].form-control:focus::-webkit-file-upload-button,
input[type="file"]:focus::-webkit-file-upload-button {
  outline: none;
  border-color: rgba(147, 51, 234, 0.32);
  box-shadow: 0 0 0 0.18rem var(--st-glow);
}
input[type="file"].form-control::file-selector-button,
input[type="file"]::file-selector-button {
  border-radius: 2rem;
  border: 1.5px solid rgba(147, 51, 234, 0.18);
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.18), rgba(190, 24, 93, 0.10)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
  color: #f3eaff;
  box-shadow: 0 2px 12px 0 rgba(80, 20, 120, 0.18), 0 0 0 1px rgba(255,255,255,0.04) inset;
  padding: 0.45rem 1.2rem;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, border-color .18s, color .18s;
}
input[type="file"].form-control:hover::file-selector-button,
input[type="file"]:hover::file-selector-button {
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.28), rgba(190, 24, 93, 0.18)),
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.02));
  color: #fff;
  border-color: rgba(147, 51, 234, 0.32);
}
input[type="file"].form-control:focus::file-selector-button,
input[type="file"]:focus::file-selector-button {
  outline: none;
  border-color: rgba(147, 51, 234, 0.32);
  box-shadow: 0 0 0 0.18rem var(--st-glow);
}
/* Site font variable and optional local self-host fallback */
:root {
  --st-font: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Optional: local @font-face fallback if you later self-host fonts in /public/fonts/ */
@font-face {
  font-family: 'PoppinsLocal';
  src: local('Poppins'), local('Poppins-Regular');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Font smoothing */
body, input, button, select, textarea { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Themed glass inputs and file uploads */
.form-control, .form-select, .form-floating > .form-control, .form-floating > .form-select, input[type="file"].form-control {
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.10), rgba(190, 24, 93, 0.06)),
    var(--st-surface);
  color: #f3eaff;
  border: 1.5px solid rgba(147, 51, 234, 0.18);
  border-radius: 1.2rem;
  box-shadow: 0 1px 6px 0 rgba(80, 20, 120, 0.10) inset;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(147, 51, 234, 0.32);
  box-shadow: 0 0 0 0.18rem var(--st-glow);
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.16), rgba(190, 24, 93, 0.10)),
    var(--st-surface);
  color: #fff;
}
.form-control[readonly], .form-control:disabled, .form-select:disabled {
  background: rgba(40, 20, 50, 0.13) !important;
  color: #bbaacc !important;
  opacity: 0.7;
}
input[type="file"].form-control {
  padding: 0.45rem 1rem;
  color-scheme: dark;
}
.form-floating > label {
  color: #bbaacc;
  background: transparent;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-select:focus ~ label {
  color: #fff;
}

/* Button group fixes for glass theme */
.btn-group .btn, .input-group .btn, .input-group .form-control {
  border-radius: 2rem !important;
  z-index: 1;
}
.btn-group .btn:not(:last-child), .input-group .btn:not(:last-child), .input-group .form-control:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.btn-group .btn:not(:first-child), .input-group .btn:not(:first-child), .input-group .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.btn-group .btn:focus, .input-group .btn:focus, .input-group .form-control:focus {
  z-index: 2;
}
/* Themed glass buttons: override Bootstrap for all .btn variants */
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger {
  position: relative;
  border-radius: 2rem !important;
  border: 1.5px solid rgba(180, 80, 200, 0.18);
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.18), rgba(190, 24, 93, 0.10)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
  color: #f3eaff !important;
  box-shadow: 0 2px 12px 0 rgba(80, 20, 120, 0.18), 0 0 0 1px rgba(255,255,255,0.04) inset;
  backdrop-filter: blur(2px) saturate(120%);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  transition: background .18s, box-shadow .18s, border-color .18s, color .18s;
}
.btn:hover, .btn:focus, .btn:active {
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.28), rgba(190, 24, 93, 0.18)),
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.02));
  color: #fff !important;
  border-color: rgba(147, 51, 234, 0.32);
  box-shadow: 0 4px 18px 0 rgba(147, 51, 234, 0.18), 0 0 0 0.18rem var(--st-glow);
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}
.btn:disabled, .btn.disabled {
  opacity: 0.55 !important;
  background: rgba(40, 20, 50, 0.18) !important;
  color: #bbaacc !important;
  border-color: rgba(80, 20, 120, 0.10) !important;
  box-shadow: none !important;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger {
  background: transparent !important;
  color: #e0cfff !important;
  border: 1.5px solid rgba(147, 51, 234, 0.32) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-danger:hover {
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.18), rgba(190, 24, 93, 0.10)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
  color: #fff !important;
  border-color: rgba(147, 51, 234, 0.32) !important;
}
/* Dark, gradient, and glass UI for ShowTrak Portal */
:root[data-bs-theme='dark'] {
  /* Base palette */
  --st-body-bg: #0b0d10;
  /* Lighter, more transparent glass surfaces for dark mode */
  --st-surface: rgba(12, 10, 18, 0.32);
  --st-surface-strong: rgba(12, 10, 18, 0.44);
  --st-border: rgba(255, 255, 255, 0.08);
  /* Accent glow (purple→magenta) */
  --st-glow: rgba(147, 51, 234, 0.35); /* ~#9333ea */
  --st-text-muted: #8a939b;

  /* Gradients */
  /* Dark dramatic backdrop: deep purple → magenta accents */
  --st-gradient-1: radial-gradient(1400px 700px at -10% -20%, rgba(76, 29, 149, 0.38), transparent 60%),
                   radial-gradient(1200px 800px at 120% 0%, rgba(162, 28, 175, 0.28), transparent 60%),
                   radial-gradient(1000px 600px at 50% 120%, rgba(190, 24, 93, 0.20), transparent 60%),
                   linear-gradient(180deg, #0a0712 0%, #0a0712 100%);

  /* Cards */
  --st-card-bg: #12151a;
  --st-card-border: var(--st-border);
}

/* Background gradient */
body.st-dark {
  min-height: 100vh;
  background: var(--st-gradient-1);
  color: #e6e8ea;
}

/* Glass containers (dramatic purple→magenta realistic glass) */
.st-glass {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)),
    var(--st-card-bg);
  border: 1px solid var(--st-card-border);
  border-radius: .75rem;
  box-shadow: none;
  overflow: hidden;
}
.st-glass::before,
.st-glass::after { content: none; }

/* Card component variant */
.st-card.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)),
    var(--st-card-bg);
  border-color: var(--st-card-border);
  border-radius: .75rem;
  box-shadow: none;
  overflow: hidden;
}
.st-card.card::before { content: none; }

/* Navbar - glass */
.st-nav {
  background: var(--st-surface-strong);
  border-bottom: 1px solid var(--st-border);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.navbar .navbar-brand { letter-spacing: 0.2px; }

/* Badges and text accents */
/* ================= Error Page Enhancements ================= */
.st-badge-priority { font-weight: 700; letter-spacing: .2px; border: 1px solid rgba(255,255,255,0.14); }
.st-badge-priority.p1 { background-color: #dc3545 !important; color: #fff !important; }
.st-badge-priority.p2 { background-color: #fd7e14 !important; color: #212529 !important; }
.st-badge-priority.p3 { background-color: #ffc107 !important; color: #212529 !important; }
.st-badge-priority.p4 { background-color: #0d6efd !important; color: #fff !important; }
.st-badge-priority.p5 { background-color: #6c757d !important; color: #fff !important; }
.st-error-hero {
  animation: stFadeIn 0.6s ease;
}
.st-error-status {
  background: linear-gradient(90deg, #9333ea, #be185d);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: -1px;
}
.st-error-panel {
  position: relative;
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}
.st-stack-details summary { cursor: pointer; }
.st-stack-details pre { max-height: 360px; }
@keyframes stFadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }
.badge.bg-primary-subtle { background-color: rgba(13,110,253,.15)!important; }

/* ================= Tracks Table (Report Detail) ================= */
.tracks-table-wrapper { --tracks-header-bg: rgba(255,255,255,0.06); --tracks-row-alt: rgba(255,255,255,0.02); --tracks-border: var(--st-card-border); }
.tracks-table { border-collapse: separate; border-spacing: 0; width:100%; }
.tracks-table thead th { background: var(--tracks-header-bg); color:#f0f3f6; font-weight:600; padding:6px 8px; font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; border-bottom:1px solid var(--tracks-border); position:sticky; top:0; z-index:2; }
.tracks-table tbody tr.dept-row td { background: linear-gradient(90deg, rgba(147,51,234,0.18), rgba(190,24,93,0.18)); color:#fff; font-weight:600; letter-spacing:.5px; font-size:.6rem; text-transform:uppercase; padding:6px 10px; border-top:1px solid var(--tracks-border); border-bottom:1px solid var(--tracks-border); }
.tracks-table tbody tr.track-row td { background: transparent; border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(0,0,0,0.4); padding:6px 8px; vertical-align:top; }
.tracks-table tbody tr.track-row:nth-child(even) td { background: var(--tracks-row-alt); }
.tracks-table code { background: rgba(255,255,255,0.04); padding:2px 4px; border-radius:4px; font-size:.65rem; }
.tracks-table .track-assignees .badge { background: linear-gradient(180deg, rgba(147,51,234,0.25), rgba(190,24,93,0.25)); border:1px solid rgba(255,255,255,0.15); font-weight:500; }
.tracks-table .track-assignees .badge:hover { background: linear-gradient(180deg, rgba(147,51,234,0.35), rgba(190,24,93,0.35)); }
.tracks-table .btn.track-assign-btn { border:1px solid rgba(255,255,255,0.25); color:#fff; background:rgba(255,255,255,0.05); font-weight:500; letter-spacing:.5px; }
.tracks-table .btn.track-assign-btn:hover { background: linear-gradient(180deg, rgba(147,51,234,0.5), rgba(190,24,93,0.45)); border-color: rgba(255,255,255,0.4); }
.tracks-table tbody tr.track-row:hover td { background: rgba(255,255,255,0.05); }
.tracks-table .text-secondary { color: var(--st-text-muted)!important; }
.tracks-table-wrapper { border:1px solid var(--st-card-border); border-radius:.65rem; }
/* Scrollbars removed as tracks area now expands fully (no internal scroll) */
.badge.bg-success-subtle { background-color: rgba(25,135,84,.15)!important; }
.badge.bg-warning-subtle { background-color: rgba(255,193,7,.15)!important; }
.badge.bg-info-subtle    { background-color: rgba(13,202,240,.15)!important; }
/* Department manager badge */
.badge-dept-manager {
  background: linear-gradient(135deg, rgba(147,51,234,0.22), rgba(59,7,100,0.25));
  color: #e9d5ff;
  border: 1px solid rgba(147,51,234,0.35);
  font-weight: 500;
  letter-spacing: .25px;
}

.text-primary-emphasis { color: #9ec5fe!important; }
.text-success-emphasis { color: #86efac!important; }
.text-warning-emphasis { color: #fde68a!important; }
.text-info-emphasis    { color: #93c5fd!important; }

/* Buttons with subtle glow */
.btn-primary, .btn-success, .btn-outline-danger, .btn-outline-light {
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .2s ease, transform .05s ease;
}
.btn-primary:hover, .btn-success:hover, .btn-outline-danger:hover, .btn-outline-light:hover { box-shadow: 0 0 0 0.25rem var(--st-glow); }
.btn:active { transform: translateY(1px); }

/* Muted text */
.text-secondary { color: var(--st-text-muted)!important; }

/* Responsive images for hero and logos (preserve aspect ratio) */
.st-hero-img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: min(100%, 640px);
  max-height: 240px;
  object-fit: contain;
}

.st-hero-img-sm {
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 360px;
  max-height: 120px;
}

.st-show-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: rgba(0,0,0,0.2);
  border-radius: 0.5rem;
}
/* Manage Show: file input sizing and overflow fix */
.branding-upload .form-control[type="file"] { width:100%; max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:.8rem; padding:.35rem .75rem; }
.branding-upload .form-control[type="file"]::file-selector-button,
.branding-upload .form-control[type="file"]::-webkit-file-upload-button { font-size:.7rem; padding:.4rem .9rem; white-space:nowrap; }
.branding-upload .btn.btn-sm { white-space:nowrap; }
.branding-upload { overflow:hidden; }

/* Modern table styles */
.st-table-wrapper {
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)),
    var(--st-card-bg);
  box-shadow: none;
  overflow: hidden;
}
.table-modern {
  border-collapse: separate;
  border-spacing: 0;
}
.table-modern thead th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .78rem;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border-bottom-color: var(--st-border) !important;
}
.table-modern tbody tr {
  transition: background-color .15s ease;
}
.table-modern tbody tr:hover {
  background-color: rgba(255,255,255,0.03);
}
.table-modern td, .table-modern th {
  border-color: var(--st-border) !important;
}

/* Floating labels on dark theme: improve contrast and spacing */
.form-floating>.form-control::placeholder { color: transparent; }
.form-floating>.form-control, .form-floating>.form-select {
  background-color: rgba(255,255,255,0.03);
  border-color: var(--st-border);
}
.form-floating>label {
  color: var(--st-text-muted);
}
.form-floating>.form-control:focus, .form-floating>.form-select:focus {
  border-color: rgba(147, 51, 234, .45);
  box-shadow: 0 0 0 0.2rem rgba(147, 51, 234, .15);
}
.form-text { color: var(--st-text-muted); }

/* Avatars */
.st-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  user-select: none;
  border: 1px solid var(--st-border);
  background: rgba(255,255,255,0.06);
  color: #e6e8ea;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) inset;
}
.st-avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.st-avatar-xs { width: 24px; height: 24px; font-size: 0.65rem; }
.st-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-avatar-initials { font-weight: 700; letter-spacing: .5px; }

/* Expanded 24-color avatar gradient palette (diverse hues, dark enough for light initials) */
.st-avatar-bg-0  { background: linear-gradient(135deg,#1e3a8a,#0f172a); }
.st-avatar-bg-1  { background: linear-gradient(135deg,#0f766e,#042f2e); }
.st-avatar-bg-2  { background: linear-gradient(135deg,#065f46,#022c22); }
.st-avatar-bg-3  { background: linear-gradient(135deg,#166534,#052e16); }
.st-avatar-bg-4  { background: linear-gradient(135deg,#3f6212,#1a2e05); }
.st-avatar-bg-5  { background: linear-gradient(135deg,#713f12,#451a03); }
.st-avatar-bg-6  { background: linear-gradient(135deg,#78350f,#3d1f07); }
.st-avatar-bg-7  { background: linear-gradient(135deg,#92400e,#4a2307); }
.st-avatar-bg-8  { background: linear-gradient(135deg,#9a3412,#431407); }
.st-avatar-bg-9  { background: linear-gradient(135deg,#b45309,#4a1d04); }
.st-avatar-bg-10 { background: linear-gradient(135deg,#be123c,#500724); }
.st-avatar-bg-11 { background: linear-gradient(135deg,#9d174d,#451030); }
.st-avatar-bg-12 { background: linear-gradient(135deg,#86198f,#3d0d54); }
.st-avatar-bg-13 { background: linear-gradient(135deg,#6d28d9,#3b0d8a); }
.st-avatar-bg-14 { background: linear-gradient(135deg,#4c1d95,#2d0b52); }
.st-avatar-bg-15 { background: linear-gradient(135deg,#3730a3,#1e1b4b); }
.st-avatar-bg-16 { background: linear-gradient(135deg,#1e40af,#0b1e3d); }
.st-avatar-bg-17 { background: linear-gradient(135deg,#075985,#082f49); }
.st-avatar-bg-18 { background: linear-gradient(135deg,#0369a1,#0c3047); }
.st-avatar-bg-19 { background: linear-gradient(135deg,#0e7490,#103243); }
.st-avatar-bg-20 { background: linear-gradient(135deg,#155e75,#072f3d); }
.st-avatar-bg-21 { background: linear-gradient(135deg,#14532d,#06281b); }
.st-avatar-bg-22 { background: linear-gradient(135deg,#4d7c0f,#1e3a07); }
.st-avatar-bg-23 { background: linear-gradient(135deg,#7f1d1d,#3b0a0a); }

/* Breadcrumbs (subtle, consistent with cards) */
.st-crumbs { border: 1px solid var(--st-border); background: transparent; border-radius: .5rem; }
.st-crumb.btn { background: rgba(255,255,255,0.03); border: 1px solid var(--st-border); color: #e6e8ea; box-shadow: none; }
.st-crumb.btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.st-crumb.is-active { background: rgba(147, 51, 234, 0.14) !important; border-color: rgba(147, 51, 234, 0.28) !important; }

/* Modern tiles / metric cards */
.st-tile {
  position: relative;
  border-radius: .75rem;
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)),
    var(--st-card-bg);
  padding: 1rem; /* default spacing; override per size */
  box-shadow: none;
}
.st-tile:hover { transform: none; box-shadow: none; }
.st-tile .st-kpi { font-size: 1.6rem; font-weight: 700; letter-spacing: .2px; }
.st-tile .st-kpi-label { color: var(--st-text-muted); font-size: .85rem; }

/* Show cards */
.st-show-card {
  border-radius: .75rem;
  border: 1px solid var(--st-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)),
    var(--st-card-bg);
  box-shadow: none;
}
.st-show-card:hover { transform: none; box-shadow: none; }
.st-show-card .st-show-title { font-weight: 600; font-size: 1.05rem; }

/* Hero */
.st-hero {
  text-align: center;
}
.st-hero .st-hero-title {
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(90deg, #e9d5ff, #f0abfc, #e879f9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.st-hero .st-hero-subtitle { color: var(--st-text-muted); }

/* Utility spacing */
.st-gap-2 { gap: .5rem; }
.st-gap-3 { gap: .75rem; }
.st-gap-4 { gap: 1rem; }

/* --- Brand color overrides --- */
/* Replace default Bootstrap primary (blue) with site purple */
.bg-primary { background-color: #9333ea !important; color: #ffffff !important; }
.badge.bg-primary { background-color: #9333ea !important; }
/* If Bootstrap adds text-bg-primary utility, ensure it matches */
.text-bg-primary { background-color: #9333ea !important; color:#fff !important; }
/* Footer styling */
.st-footer {
  border-top: 1px solid var(--st-border);
  background: var(--st-surface-strong);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.st-footer a { color: var(--st-text-muted)!important; transition: color .15s ease; }
.st-footer a:hover { color: #fff !important; }

.alert {
  border-radius: 15px !important;
}

/* === Track Assignment Modal Role Styling === */
.track-assign-groups { display:flex; flex-direction:column; gap:1rem; }
.track-assign-groups .member-group-head { font-size:.55rem; letter-spacing:1px; text-transform:uppercase; color:var(--st-text-muted,#adb5bd); margin:0 0 .25rem .15rem; }
.track-assign-groups .member-group-body { display:flex; flex-wrap:wrap; gap:.4rem; }
.member-pill { --pill-border:#555; --pill-bg:rgba(255,255,255,0.02); --pill-active:#6f42c1; --pill-active-border:#9d6bff; border:1px solid var(--pill-border); background:var(--pill-bg); color:#fff; display:flex; align-items:center; gap:4px; font-size:.55rem; padding:2px 6px; border-radius:999px; line-height:1.1; font-weight:500; letter-spacing:.25px; box-shadow:0 0 0 1px rgba(255,255,255,0.04) inset; backdrop-filter:saturate(120%) blur(2px); -webkit-backdrop-filter:saturate(120%) blur(2px); transition:background .15s,border-color .15s,box-shadow .15s; }
.member-pill .pill-label { white-space:nowrap; }
.member-pill.role-show-manager { border-color:#b48cff; box-shadow:0 0 0 1px rgba(180,140,255,0.3),0 0 6px -1px rgba(180,140,255,0.5); }
.member-pill.role-dept-manager { border-color:#7f9eff; box-shadow:0 0 0 1px rgba(127,158,255,0.25),0 0 4px -1px rgba(127,158,255,0.4); }
.member-pill.role-dept-member { opacity:.85; }
.member-pill:hover { border-color:#bbb; background:rgba(255,255,255,0.06); }
.member-pill.active { background:linear-gradient(135deg,var(--pill-active) 0%,#9a5bff 100%); border-color:var(--pill-active-border); box-shadow:0 0 0 1px rgba(157,107,255,0.5),0 0 10px -1px rgba(157,107,255,0.6); }
.member-pill:focus { outline:none; box-shadow:0 0 0 1px rgba(255,255,255,0.15); }
.member-pill:not(.active):focus { background:var(--pill-bg); border-color:var(--pill-border); box-shadow:0 0 0 1px rgba(255,255,255,0.12); }
.member-group { padding:.45rem .55rem .6rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:.85rem; }
.member-group-head { font-weight:600; }
/* Performance collapse caret rotation */
.performance-collapse-btn[aria-expanded="false"] i { transform: rotate(-90deg); transition: transform .2s ease; }
.performance-collapse-btn[aria-expanded="true"] i { transform: rotate(0deg); transition: transform .2s ease; }
/* Performance header/body layout tweaks */
.performance-wrapper { position:relative; }
.performance-wrapper .performance-header { min-height:46px; display:flex; }
.performance-wrapper .performance-header > .d-flex:first-child { align-items:center; }
.performance-wrapper .performance-header h4 { display:flex; align-items:center; line-height:1; }
/* Move border to body so it disappears when collapsed */
.performance-wrapper .performance-body { border-top:1px solid rgba(255,255,255,0.08); }
.performance-wrapper .performance-body.collapse:not(.show) { border-top:none; }
/* Remove padding while collapsed or collapsing to avoid visible sliver */
.performance-wrapper .performance-body.collapsing { padding-top:0 !important; padding-bottom:0 !important; overflow:hidden; }
.performance-wrapper .performance-body.collapse:not(.show) { padding-top:0 !important; padding-bottom:0 !important; }
/* Smooth collapse visual (optional subtle fade) */
.performance-wrapper .performance-body { transition: border-color .2s ease; }
/* Tighten bottom spacing on final section of a performance */
.performance-wrapper .dept-block:last-of-type { margin-bottom: 0 !important; }
.performance-wrapper .dept-block:last-of-type .section-container:last-of-type { margin-bottom: 0 !important; }
/* .performance-wrapper .dept-block:last-of-type .section-container:last-of-type .section-body { padding-bottom: 0 !important; } */
.section-body {
  position: relative;
}

/* ================= Kanban (Department Todos) ================= */
/* Trello-like dark board: borderless solid columns, lighter cards, clean add button */
:root[data-bs-theme='dark'] {
  --st-kanban-col-bg: #0f1218;      /* solid dark for lists */
  --st-kanban-card-bg: #171b22;     /* slightly lighter for cards */
  --st-kanban-card-hover: #1b2029;  /* hover for cards */
  --st-kanban-borderless: transparent;
}

/* Board container polishing */
.st-kanban {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  align-items: flex-start;
}
.st-kanban::-webkit-scrollbar { height: 10px; }
.st-kanban::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
.st-kanban::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }

/* Column width and internal panel */
.st-kanban .st-column { flex: 0 0 320px; }
.st-kanban .st-column > .st-glass {
  background: var(--st-kanban-col-bg) !important;
  border: none !important;
  box-shadow: none !important;
}
.st-kanban .st-column h6 { font-weight: 700; letter-spacing: .2px; }

/* Cards (items) */
.st-kanban .st-cards { display: flex; flex-direction: column; gap: .5rem; }
.st-kanban .st-card {
  background: var(--st-kanban-card-bg) !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease, transform .05s ease;
  cursor: pointer;
}
.st-kanban .st-card:hover { background: var(--st-kanban-card-hover) !important; }
.st-kanban .st-card:active { transform: translateY(1px); }
/* Drag visual affordances */
.st-kanban .st-card[draggable="true"] { cursor: grab; }
.st-kanban .st-cards.drag-over { background: rgba(255,255,255,0.06); border-radius: .5rem; }

/* Ghost placeholder showing target position */
.st-kanban .st-card-placeholder {
  height: 58px; /* approx card height; will be adjusted dynamically */
  border-radius: .5rem;
  border: 1.5px dashed rgba(147, 51, 234, 0.35);
  background: linear-gradient(90deg, rgba(147,51,234,0.08), rgba(190,24,93,0.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: height .15s ease, margin .15s ease, background .15s ease;
}

/* Dragging card visuals: tilt + translucent gradient overlay */
.st-kanban .st-card.is-dragging {
  opacity: 0.85;
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}
.st-kanban .st-card.is-dragging::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(147,51,234,0.08));
  pointer-events: none;
}

/* Subtle animation for cards shifting around placeholder */
.st-kanban .st-card.moving {
  transition: transform .12s ease;
}

/* Card row with reserved space for hover checkbox (prevents text jump) */
.st-kanban .st-card-row { position: relative; display:flex; align-items:flex-start; }
/* Place checkbox absolutely so default text can be fully left-aligned; animate in on hover */
.st-kanban .st-card-check { position:absolute; left:0; top:2px; bottom:auto; width:24px; display:flex; align-items:flex-start; justify-content:center; }
.st-kanban .st-card-check-form { margin:0; }
.st-kanban .st-card-check-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-4px);
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.st-kanban .st-card:hover .st-card-check-btn { visibility: visible; opacity:1; transform: translateX(0); pointer-events: auto; }
.st-kanban .st-card-check-btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); }
.st-kanban .st-card-check-btn:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.12); }
/* Text block slides right smoothly on hover to make space for the checkbox */
.st-kanban .st-card-main { min-width: 0; transform: translateX(0); transition: transform .18s ease; }
.st-kanban .st-card:hover .st-card-main { transform: translateX(28px); }

/* Add-item button: borderless, transparent, better icon */
.st-kanban .st-add-btn.btn-link {
  border: none !important;
  background: transparent !important;
  text-decoration: none !important;
  color: var(--st-text-muted) !important;
  padding: .35rem .4rem;
  border-radius: .5rem !important; /* match inline input radius; override global .btn radius */
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.st-kanban .st-add-btn.btn-link:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}
.st-kanban .st-add-btn.btn-link:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.08); }
/* Style the leading plus as a circular glyph */
.st-kanban .st-add-btn.btn-link > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: .25rem;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  color: #cbd5e1;
  background: #232833;
  border: 1px solid rgba(255,255,255,0.08);
}
.st-kanban .st-add-btn.btn-link:hover > span:first-child {
  background: #2a2f3a;
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

/* Compact inline add form inside columns */
.st-kanban .st-add-form .form-control {
  border-radius: .5rem;
  padding: .4rem .6rem;
}

/* While dragging, freeze hover animations to prevent flicker and layout jumping */
.st-kanban.is-dragging .st-card:hover .st-card-main,
.st-kanban.is-dragging .st-card .st-card-main {
  transform: none !important;
}
.st-kanban.is-dragging .st-card .st-card-check-btn {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}