/* ===============================================
   TRIDENT PROFESSIONAL SERVICE MANAGEMENT SYSTEM
   Tier One Enterprise Theme (Bootstrap 5)
   Palette: Obsidian · Alabaster · Amber Accent
   =============================================== */

:root {
  /* --- core palette --- */
  --primary: #000000;
  --primary-rgb: 0, 0, 0;
  --primary-light: #27272a;
  --secondary: #ffffff;
  
  /* amber/gold accent */
  --accent: #f59e0b;
  --accent-rgb: 245, 158, 11;
  --accent-hover: #d97706;
  --accent-subtle: rgba(245, 158, 11, 0.08);
  --accent-glow: rgba(245, 158, 11, 0.25);

  /* --- semantic colors --- */
  --success: #10b981;
  --success-subtle: rgba(16, 185, 129, 0.1);
  --danger: #ef4444;
  --danger-subtle: rgba(239, 68, 68, 0.1);
  --warning: #f59e0b;
  --warning-subtle: rgba(245, 158, 11, 0.1);
  --info: #3b82f6;
  --info-subtle: rgba(59, 130, 246, 0.1);

  /* --- surfaces --- */
  --body-bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --surface-hover: #e2e8f0;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  /* --- radii (tight / industrial) --- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius: 4px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;
  
  /* --- shadows (minimal / utilitarian) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 3px 6px rgba(0, 0, 0, 0.12);
  
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-blur: blur(4px);

  /* --- typography --- */
  --font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  
  /* --- icon sizing --- */
  --icon-xs: 0.875rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;
  
  /* --- layout --- */
  --navbar-height: 60px;
  --sidebar-width: 260px;
  
  /* --- timing (snappy, no spring) --- */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 100ms var(--ease-out);
  --transition: 120ms var(--ease-out);
  --transition-slow: 150ms var(--ease-out);

  /* bootstrap overrides */
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--body-bg);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
}

/* --- dark theme: black main, white offset, yellow tints (minimal) --- */
[data-bs-theme="dark"] {
  --primary: #ffffff;
  --primary-rgb: 255, 255, 255;
  --primary-light: #f5f5f5;
  --secondary: #000000;

  --accent: #fbbf24;
  --accent-hover: #fcd34d;
  --accent-subtle: rgba(251, 191, 36, 0.08);
  --accent-glow: rgba(251, 191, 36, 0.18);

  --body-bg: #000000;
  --surface: #0a0a0a;
  --surface-alt: #141414;
  --surface-hover: #1c1c1c;
  --border: #2a2a2a;
  --border-light: #1a1a1a;

  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-muted: #6b6b6b;
  --text-inverse: #000000;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.7);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.7);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.75);

  --glass-bg: rgba(0, 0, 0, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* bootstrap dark-mode token overrides — keep BS aware */
  --bs-body-bg: #000000;
  --bs-body-color: #ffffff;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-bg: #0a0a0a;
  --bs-tertiary-bg: #141414;
  --bs-border-color: #2a2a2a;
  --bs-secondary-color: #a3a3a3;
  --bs-link-color: #fbbf24;
  --bs-link-hover-color: #fcd34d;
}

/* yellow-tint accents in dark mode (minimal — only on hover/focus/active) */
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--accent-hover); }
[data-bs-theme="dark"] .btn-primary {
  background-color: #ffffff; border-color: #ffffff; color: #000000;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
  background-color: var(--accent); border-color: var(--accent); color: #000000;
}
[data-bs-theme="dark"] .btn-outline-secondary { color: #ffffff; border-color: #2a2a2a; }
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--accent-subtle); border-color: var(--accent); color: var(--accent);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 .15rem var(--accent-glow);
}
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning.text-dark { background-color: var(--accent) !important; color: #000 !important; }

/* ===============================================
   BASE
   =============================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--body-bg);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  position: relative;
}

/* noise texture disabled for clean look */

::selection {
  background-color: var(--accent);
  color: var(--text-inverse);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===============================================
   ANIMATED BACKGROUND
   =============================================== */

/* animated background shapes — disabled */
.animated-shapes, .shape { display: none !important; }

/* ===============================================
   ICONS (Tabler Icons Enhancement)
   =============================================== */

/* base icon styling */
[class^="ti-"],
[class*=" ti-"],
.ti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 
    transform var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast);
}

/* icon sizes */
.icon-xs, .fs-8 { font-size: var(--icon-xs) !important; }
.icon-sm, .fs-7 { font-size: var(--icon-sm) !important; }
.icon-md, .fs-5 { font-size: var(--icon-md) !important; }
.icon-lg, .fs-4 { font-size: var(--icon-lg) !important; }
.icon-xl, .fs-3 { font-size: var(--icon-xl) !important; }

/* icon with background circle */
.icon-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--surface-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.icon-circle:hover {
  box-shadow: var(--shadow-sm);
}

.icon-circle.icon-circle-sm {
  width: 2rem;
  height: 2rem;
}

.icon-circle.icon-circle-lg {
  width: 3rem;
  height: 3rem;
}

/* colored icon circles */
.icon-circle-primary {
  background-color: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.icon-circle-accent {
  background: var(--accent-subtle);
  color: var(--accent);
}

.icon-circle-success {
  background-color: var(--success-subtle);
  color: var(--success);
}

.icon-circle-danger {
  background-color: var(--danger-subtle);
  color: var(--danger);
}

.icon-circle-warning {
  background-color: var(--warning-subtle);
  color: var(--warning);
}

.icon-circle-info {
  background-color: var(--info-subtle);
  color: var(--info);
}

/* icon with soft glow */
.icon-glow {
  filter: drop-shadow(0 0 4px currentColor);
}

.icon-glow-accent {
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* icon badge (notification dot) */
.icon-badge {
  position: relative;
}

.icon-badge::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.icon-badge-accent::after {
  background-color: var(--accent);
}

.icon-badge-success::after {
  background-color: var(--success);
}

/* icon animations — disabled */

.icon-spin {
  animation: iconSpinAnim 1s linear infinite;
}

@keyframes iconSpinAnim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* icon hover animations — disabled */

/* stat icon (for dashboard cards) */
.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--surface-alt);
  color: var(--text-secondary);
}

/* ===============================================
   DECORATIVE SVG PATTERNS
   =============================================== */

/* grid pattern for empty states */
.pattern-grid {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000' fill-opacity='0.03'%3E%3Cpath d='M0 0h20v20H0V0zm20 20h20v20H20V20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .pattern-grid {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fff' fill-opacity='0.03'%3E%3Cpath d='M0 0h20v20H0V0zm20 20h20v20H20V20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* dots pattern */
.pattern-dots {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.03'%3E%3Ccircle cx='3' cy='3' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .pattern-dots {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Ccircle cx='3' cy='3' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* diagonal lines */
.pattern-lines {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.03'%3E%3Cpath d='M5 0h1L0 5v1h1L6 1V0H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* circuit pattern (techy look) */
.pattern-circuit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.03' stroke-width='1'%3E%3Cpath d='M10 10h80v80H10z'/%3E%3Cpath d='M30 10v20h40V10M30 70v20h40V70M10 30h20v40H10M70 30h20v40H70'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='70' cy='30' r='3'/%3E%3Ccircle cx='30' cy='70' r='3'/%3E%3Ccircle cx='70' cy='70' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .pattern-circuit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.03' stroke-width='1'%3E%3Cpath d='M10 10h80v80H10z'/%3E%3Cpath d='M30 10v20h40V10M30 70v20h40V70M10 30h20v40H10M70 30h20v40H70'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='70' cy='30' r='3'/%3E%3Ccircle cx='30' cy='70' r='3'/%3E%3Ccircle cx='70' cy='70' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===============================================
   EMPTY STATE STYLING
   =============================================== */

.empty-state {
  text-align: center;
  padding: 3rem 2rem;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: var(--radius);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  max-width: 300px;
  margin: 0 auto 1.5rem;
}

/* ===============================================
   SVG SPRITE ICONS
   =============================================== */

/* base svg icon usage */
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

/* svg icon sizes */
.svg-icon-xs { width: 0.875rem; height: 0.875rem; }
.svg-icon-sm { width: 1rem; height: 1rem; }
.svg-icon-md { width: 1.25rem; height: 1.25rem; }
.svg-icon-lg { width: 1.5rem; height: 1.5rem; }
.svg-icon-xl { width: 2rem; height: 2rem; }
.svg-icon-2xl { width: 2.5rem; height: 2.5rem; }
.svg-icon-3xl { width: 3rem; height: 3rem; }

/* decorative wave/blob components */
.deco-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  color: var(--accent);
}

.deco-blob {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  color: var(--accent);
  animation: float 8s ease-in-out infinite;
}

.deco-blob-1 {
  top: 10%;
  right: 5%;
  width: 200px;
  height: 200px;
}

.deco-blob-2 {
  bottom: 15%;
  left: 3%;
  width: 150px;
  height: 150px;
  animation-delay: -4s;
}

/* ===============================================
   DECORATIVE SEPARATORS
   =============================================== */

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.separator:not(:empty)::before {
  margin-right: 0.75rem;
}

.separator:not(:empty)::after {
  margin-left: 0.75rem;
}

/* dotted separator */
.separator-dots {
  position: relative;
  height: 2px;
  background: transparent;
}

.separator-dots::after {
  content: '• • •';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 0.5rem;
  letter-spacing: 0.5em;
}

/* accent line */
.accent-line {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: var(--radius-full);
}

.accent-line-center {
  margin: 0 auto;
}

/* ===============================================
   FEATURE CARDS / ICON BOXES
   =============================================== */

.feature-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-color);
  transition: var(--transition-base);
}

.feature-box:hover {
  border-color: var(--accent);
}

.feature-box-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: 1.125rem;
}

.feature-box-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.feature-box-content p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ===============================================
   LOADING SKELETONS
   =============================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-alt) 25%,
    var(--surface) 50%,
    var(--surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5rem;
}

.skeleton-text-sm { width: 40%; }
.skeleton-text-md { width: 70%; }
.skeleton-text-lg { width: 100%; }

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.skeleton-card {
  height: 120px;
}

.skeleton-btn {
  height: 38px;
  width: 100px;
}

/* ===============================================
   NOTIFICATION DOT / PULSE
   =============================================== */

.has-notification {
  position: relative;
}

.has-notification::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: var(--radius-full);
  border: 2px solid var(--surface);
  animation: notification-pulse 2s ease-in-out infinite;
}

@keyframes notification-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

/* notification with count */
.notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: var(--danger);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
}

/* ===============================================
   GLASSMORPHISM
   =============================================== */

.glass {
  background: var(--bs-body-bg) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--bs-border-color);
}

.card-glass {
  background: var(--bs-body-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--bs-border-color);
}

/* ===============================================
   NAVBAR
   =============================================== */

.navbar {
  height: var(--navbar-height);
  padding: 0 1rem;
  transition: box-shadow var(--transition), background var(--transition);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}



.brand-icon-wrapper {
  width: 30px;
  height: 30px;
  background: var(--primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-bs-theme="dark"] .brand-icon-wrapper {
  background: var(--accent);
}

.brand-logo {
  width: 18px;
  height: 18px;
  filter: invert(1);
}

[data-bs-theme="dark"] .brand-logo {
  filter: invert(0);
}

.navbar-toggler {
  padding: 0.5rem;
  border: none;
  border-radius: var(--radius);
  transition: background var(--transition-fast);
}

.navbar-toggler:hover {
  background: var(--surface-hover);
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* ===============================================
   SIDEBAR
   =============================================== */

.sidebar {
  width: var(--sidebar-width);
  background-color: var(--surface);
  border-right: 1px solid var(--border);
}

.offcanvas-start {
  width: var(--sidebar-width);
}

.offcanvas-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.offcanvas-body {
  padding: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--radius);
  margin: 0.125rem 0.5rem;
  transition: 
    color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-primary);
  background-color: var(--surface-hover);
}

.nav-link.active {
  background-color: var(--primary);
  color: var(--text-inverse);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

[data-bs-theme="dark"] .nav-link.active {
  background-color: var(--accent);
  color: var(--text-inverse);
}

[data-bs-theme="dark"] .nav-link {
  color: white !important;
}


.nav-link i {
  font-size: 1.125rem;
  opacity: 0.7;
  flex-shrink: 0;
  transition: 
    transform var(--transition-fast),
    opacity var(--transition-fast),
    color var(--transition-fast);
}

.nav-link:hover i {
  opacity: 1;
}

.nav-link.active i {
  opacity: 1;
}

/* sidebar section labels */
.sidebar small.text-uppercase,
.offcanvas small.text-uppercase {
  display: block;
  padding: 0.75rem 1rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* ===============================================
   CARDS
   =============================================== */

.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: 
    box-shadow var(--transition),
    transform var(--transition),
    border-color var(--transition);
  overflow: hidden;
  position: relative;
}

/* card accent line — disabled */
.card::before { display: none; }

.card:hover {
  border-color: var(--surface-hover);
}

/* disable hover for certain cards */
.card.no-hover:hover,
.card-static:hover {
  box-shadow: var(--shadow-xs);
  transform: none;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  background-color: var(--surface-alt);
  border-top: 1px solid var(--border);
  padding: 0.875rem 1.25rem;
}

.card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
  letter-spacing: -0.01em;
}

.card-text {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* ===============================================
   BUTTONS
   =============================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.5rem 1rem;
  min-height: 36px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* button shine — disabled */
.btn::before { display: none; }

.btn:active {
  opacity: 0.85;
}

/* sizes */
.btn-sm {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  min-height: 30px;
  border-radius: var(--radius-sm);
}

.btn-lg {
  font-size: 0.9375rem;
  padding: 0.625rem 1.5rem;
  min-height: 44px;
  border-radius: var(--radius-md);
}

/* primary */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-xs), 0 0 0 0 rgba(var(--primary-rgb), 0);
}

.btn-primary:hover {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
  color: var(--text-inverse);
}

.btn-primary:focus-visible {
  box-shadow: var(--shadow-sm), 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

.btn-primary:active {
  opacity: 0.85;
}

[data-bs-theme="dark"] .btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

[data-bs-theme="dark"] .btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* secondary */
.btn-secondary {
  background-color: var(--surface-alt);
  border-color: var(--border);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background-color: var(--surface-hover);
  border-color: var(--border);
  color: var(--text-primary);
}

/* outline */
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

[data-bs-theme="dark"] .btn-outline-primary {
  border-color: var(--accent);
  color: var(--accent);
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--accent);
  color: var(--text-inverse);
}

/* ghost */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

/* semantic */
.btn-success {
  background-color: var(--success);
  border-color: var(--success);
  color: white;
}

.btn-success:hover {
  background-color: #059669;
  border-color: #059669;
}

.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: white;
}

.btn-danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: white;
}

.btn-info {
  background-color: var(--info);
  border-color: var(--info);
  color: white;
}

/* icon button */
.btn-icon {
  width: 36px;
  height: 36px;
  min-height: unset;
  padding: 0;
  border-radius: var(--radius);
}

.btn-icon.btn-sm {
  width: 30px;
  height: 30px;
}

.btn-icon.btn-lg {
  width: 44px;
  height: 44px;
}

/* surface alt */
.btn-surface-alt {
  background-color: var(--surface-alt);
  border-color: var(--border);
  color: var(--text-primary);
}

.btn-surface-alt:hover {
  background-color: var(--surface-hover);
  border-color: var(--border);
  color: var(--text-primary);
}

/* ===============================================
   FORMS
   =============================================== */

.form-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

.form-control,
.form-select {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--text-primary);
  transition: 
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.form-control:hover,
.form-select:hover {
  border-color: var(--surface-hover);
  background-color: rgba(255, 255, 255, 0.5);
}

[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle), 0 1px 2px rgba(0, 0, 0, 0.04);
  outline: none;
  background-color: var(--surface);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control-sm {
  font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  min-height: 32px;
}

.form-control-lg {
  font-size: 0.9375rem;
  padding: 0.625rem 1rem;
  min-height: 44px;
}

/* input group */
.input-group .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-text {
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

.input-group-flat .form-control {
  border-right: none;
}

.input-group-flat .btn {
  border-left: none;
}

/* switch */
.form-check-input {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border);
  transition: 
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-switch .form-check-input {
  width: 2.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
}

.form-text {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ===============================================
   TABLES
   =============================================== */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border);
  font-size: 0.875rem;
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table thead th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background-color: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  padding: 0.625rem 1rem;
}

.table tbody tr {
  transition: background var(--transition-fast);
}

.table tbody tr:hover {
  background-color: var(--surface-hover);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* striped */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.015);
}

[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ===============================================
   BADGES
   =============================================== */

.badge {
  font-weight: 600;
  font-size: 0.6875rem;
  padding: 0.35em 0.65em;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

.badge.rounded-pill {
  padding: 0.4em 0.75em;
}

/* subtle badges */
.badge-subtle-success {
  background-color: var(--success-subtle);
  color: var(--success);
}

.badge-subtle-danger {
  background-color: var(--danger-subtle);
  color: var(--danger);
}

.badge-subtle-warning {
  background-color: var(--warning-subtle);
  color: var(--warning);
}

.badge-subtle-info {
  background-color: var(--info-subtle);
  color: var(--info);
}

/* ===============================================
   ALERTS
   =============================================== */

.alert {
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  border: 1px solid transparent;
}

.alert-success {
  background-color: var(--success-subtle);
  border-color: var(--success);
  color: #065f46;
}

.alert-danger {
  background-color: var(--danger-subtle);
  border-color: var(--danger);
  color: #991b1b;
}

.alert-warning {
  background-color: var(--warning-subtle);
  border-color: var(--warning);
  color: #92400e;
}

.alert-info {
  background-color: var(--info-subtle);
  border-color: var(--info);
  color: #1e40af;
}

/* ===============================================
   DROPDOWNS
   =============================================== */

.dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.375rem;
  min-width: 160px;
  animation: dropIn 150ms var(--ease-out);
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: background var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--accent-subtle);
  color: var(--accent);
}

.dropdown-divider {
  border-color: var(--border);
  margin: 0.375rem 0;
}

.dropdown-header {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem;
}

/* ===============================================
   MODALS
   =============================================== */

.modal-content {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s var(--ease-out);
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 1.0625rem;
  font-weight: 700;
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  background-color: var(--surface-alt);
  gap: 0.5rem;
}

.btn-close {
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.btn-close:hover {
  opacity: 1;
}

/* ===============================================
   AVATARS
   =============================================== */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
  transition: 
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

/* avatar hover — disabled */

/* status ring for avatars */
.avatar-online {
  position: relative;
}

.avatar-online::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: var(--success);
  border: 2px solid var(--surface);
  border-radius: 50%;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

.avatar-xs { width: 24px; height: 24px; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 48px; height: 48px; }
.avatar-lg { width: 64px; height: 64px; }

/* initials */
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  background: var(--surface-alt);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

[data-bs-theme="dark"] .avatar-initials {
  background: var(--surface-alt);
  border-color: var(--border);
}

/* avatar group */
.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  margin-left: -8px;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* ===============================================
   LIST GROUP
   =============================================== */

.list-group {
  border-radius: var(--radius-lg);
}

.list-group-item {
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  transition: background var(--transition-fast);
}

.list-group-item:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.list-group-item:last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.list-group-item + .list-group-item {
  border-top: none;
}

.list-group-item:hover {
  background-color: var(--surface-hover);
}

.list-group-item.active {
  background-color: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

/* flush */
.list-group-flush .list-group-item {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

/* ===============================================
   PROGRESS
   =============================================== */

.progress {
  height: 6px;
  background-color: var(--surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  background-color: var(--accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ===============================================
   TOOLTIPS
   =============================================== */

.tooltip-inner {
  background-color: var(--primary);
  color: var(--text-inverse);
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ===============================================
   BREADCRUMB
   =============================================== */

.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
}

.breadcrumb-item {
  color: var(--text-secondary);
}

.breadcrumb-item a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--accent);
}

.breadcrumb-item.active {
  color: var(--text-primary);
  font-weight: 500;
}

/* ===============================================
   PAGINATION
   =============================================== */

.pagination {
  gap: 0.25rem;
}

.page-link {
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  background-color: var(--surface);
  transition: 
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.page-link:hover {
  background-color: var(--surface-hover);
  border-color: var(--border);
  color: var(--text-primary);
}

.page-item.active .page-link {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

.page-item.disabled .page-link {
  background-color: var(--surface-alt);
  color: var(--text-muted);
}

/* ===============================================
   TABS
   =============================================== */

.nav-tabs {
  border-bottom: 1px solid var(--border);
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.625rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-secondary);
  background: transparent;
  border-radius: 0;
}

.nav-tabs .nav-link:hover {
  border-bottom-color: var(--border);
  color: var(--text-primary);
  background: transparent;
  transform: none;
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}

/* ===============================================
   UTILITIES
   =============================================== */

/* text */
.text-accent { color: var(--accent) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--text-muted) !important; }

/* backgrounds */
.bg-surface { background-color: var(--surface) !important; }
.bg-surface-alt { background-color: var(--surface-alt) !important; }
.bg-body { background-color: var(--body-bg) !important; }
.bg-accent { background-color: var(--accent) !important; }
.bg-accent-subtle { background-color: var(--accent-subtle) !important; }

/* borders */
.border-accent { border-color: var(--accent) !important; }

/* shadows */
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* typography */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.ls-1 { letter-spacing: 0.05em; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }

/* hover effects (flattened) */
.hover-bg-light:hover { background-color: var(--surface-hover) !important; }
.hover-shadow:hover { box-shadow: var(--shadow) !important; }
.hover-lift:hover { /* disabled */ }
.hover-glow:hover { /* disabled */ }
.hover-scale:hover { /* disabled */ }

/* transitions */
.transition-all { transition: all var(--transition); }
.transition-fast { transition: all var(--transition-fast); }

/* cursor */
.cursor-pointer { cursor: pointer; }

/* ===============================================
   SUBTLE ANIMATIONS
   =============================================== */

/* fade in on scroll */
.fade-in {
  animation: fadeIn 0.4s var(--ease-out) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* stagger children animation */
.stagger-children > * {
  animation: fadeIn 0.3s var(--ease-out) backwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }

/* shimmer loading effect */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--surface-alt) 0%,
    var(--surface) 50%,
    var(--surface-alt) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* bounce/wiggle/spin hover effects — disabled */

/* ===============================================
   NOTIFICATION PULSE
   =============================================== */

.notification-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ===============================================
   LOADER
   =============================================== */

#page-loader {
  position: fixed;
  inset: 0;
  background-color: var(--body-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity var(--transition-slow);
}

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===============================================
   SCROLLBAR
   =============================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ===============================================
   RESPONSIVE
   =============================================== */

@media (max-width: 767px) {
  .card-body {
    padding: 1rem;
  }
  
  .btn {
    padding: 0.5rem 0.875rem;
  }
  
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.25rem; }
  
  /* add padding at bottom for mobile nav */
  main {
    padding-bottom: 80px !important;
  }
}

/* ===============================================
   MOBILE BOTTOM NAVIGATION
   =============================================== */

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--surface);
  border-top: 1px solid var(--border-color);
  z-index: 1050;
  padding: 0.5rem 0;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 767px) {
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  position: relative;
}

.mobile-nav-item i {
  font-size: 1.25rem;
  transition: var(--transition-fast);
}

.mobile-nav-item:hover,
.mobile-nav-item:focus {
  color: var(--text-primary);
  text-decoration: none;
}

.mobile-nav-item.active {
  color: var(--accent);
}

.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
}



/* sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.sidebar-overlay.show,
.offcanvas.show ~ .sidebar-overlay {
  display: block;
  opacity: 1;
}

/* ===============================================
   ONBOARDING TOOLTIP SYSTEM
   =============================================== */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.onboarding-overlay.active {
  opacity: 1;
  visibility: visible;
}

.onboarding-highlight {
  position: relative;
  z-index: 9999;
  box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-md);
  animation: highlight-pulse 2s ease-in-out infinite;
}

@keyframes highlight-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 0 0 8px var(--accent-subtle), 0 0 0 9999px rgba(0, 0, 0, 0.6); }
}

.onboarding-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 320px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7) translateY(10px);
  transform-origin: center center;
  pointer-events: auto;
}

.onboarding-tooltip.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  animation: tooltip-plop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes tooltip-plop {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
  50% {
    transform: scale(1.08) translateY(-5px);
  }
  75% {
    transform: scale(0.95) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.onboarding-tooltip::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
}

.onboarding-tooltip.arrow-top::before {
  top: -7px;
  left: 24px;
}

.onboarding-tooltip.arrow-bottom::before {
  bottom: -7px;
  left: 24px;
  transform: rotate(225deg);
}

.onboarding-tooltip.arrow-left::before {
  left: -7px;
  top: 24px;
  transform: rotate(-45deg);
}

.onboarding-tooltip.arrow-right::before {
  right: -7px;
  top: 24px;
  transform: rotate(135deg);
}

.onboarding-step-indicator {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--border-color);
  transition: var(--transition-fast);
}

.onboarding-dot.active {
  background: var(--accent);
  width: 20px;
}

.onboarding-dot.completed {
  background: var(--success);
}

.onboarding-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.onboarding-title i {
  color: var(--accent);
}

.onboarding-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.onboarding-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
}

.onboarding-skip {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.onboarding-skip:hover {
  color: var(--text-primary);
}

.onboarding-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--obsidian);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.onboarding-btn:hover {
  background: var(--accent-hover);
}

.onboarding-btn.secondary {
  background: var(--surface-alt);
  color: var(--text-primary);
}

.onboarding-btn.secondary:hover {
  background: var(--surface-hover);
}

.onboarding-progress {
  height: 3px;
  background: var(--border-color);
  border-radius: var(--radius-full);
  margin-top: 1rem;
  overflow: hidden;
}

.onboarding-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-out);
}

/* ===============================================
   PRINT
   =============================================== */

@media print {
  .sidebar,
  .navbar,
  .btn,
  .no-print,
  .animated-shapes {
    display: none !important;
  }
  
  .card {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  
  body {
    background: white !important;
  }
}

/* ===============================================
   REDUCED MOTION
   =============================================== */

@media (prefers-reduced-motion: reduce) {
  .shape,
  .animated-shapes .shape {

  }
}

/* ===============================================
   REVAMP 2026 — MODERN MINIMAL POLISH LAYER
   Purely additive refinements. Tightens spacing,
   contrast, and consistency across cards / tables /
   forms / sidebar / empty states. No layout changes.
   =============================================== */

/* --- subtle, consistent card surfaces --- */
.card,
.bg-body,
.list-group-item {
  border-color: var(--border) !important;
}

.card {
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.card.card-hover:hover,
.card.interactive:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--shadow-sm);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* --- form inputs: cleaner, consistent height --- */
.form-control,
.form-select {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.form-control:hover,
.form-select:hover {
  border-color: color-mix(in srgb, var(--text-secondary) 40%, var(--border));
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-control::placeholder { color: var(--text-muted); }

.form-label {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
  letter-spacing: 0.005em;
}

.form-text { color: var(--text-muted); }

/* --- buttons: tighter, more deliberate --- */
.btn {
  border-radius: var(--radius-md);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding-inline: 1rem;
  transition: all var(--transition);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
  color: var(--text-inverse);
}

.btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-primary);
}
.btn-outline-secondary:hover {
  background-color: var(--surface-alt);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}

/* --- tables: flat, scannable --- */
.table {
  --bs-table-bg: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}

.table > thead {
  background: var(--surface-alt);
}

.table > thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  padding-block: 0.625rem;
}

.table > tbody > tr {
  border-color: var(--border-light);
  transition: background-color var(--transition-fast);
}

.table > tbody > tr:hover {
  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
}

.table-borderless > :not(caption) > * > * { border-bottom-width: 0; }

/* DataTables visual refinements */
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  outline: none;
}

/* --- nav-pills (used on auth page) --- */
.nav-pills .nav-link {
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 500;
  transition: all var(--transition);
}
.nav-pills .nav-link.active {
  background-color: var(--primary);
  color: var(--text-inverse);
}

/* --- badges: legible, soft --- */
.badge {
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.3em 0.6em;
  border-radius: var(--radius);
}

.badge.bg-success-subtle { color: #047857; }
.badge.bg-danger-subtle  { color: #b91c1c; }
.badge.bg-warning-subtle { color: #b45309; }
.badge.bg-info-subtle    { color: #1d4ed8; }

[data-bs-theme="dark"] .badge.bg-success-subtle { color: #6ee7b7; }
[data-bs-theme="dark"] .badge.bg-danger-subtle  { color: #fca5a5; }
[data-bs-theme="dark"] .badge.bg-warning-subtle { color: #fcd34d; }
[data-bs-theme="dark"] .badge.bg-info-subtle    { color: #93c5fd; }

/* --- alerts: softer, modern --- */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.alert-success { background: var(--success-subtle); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: #065f46; }
.alert-danger  { background: var(--danger-subtle);  border-color: color-mix(in srgb, var(--danger) 30%, transparent);  color: #991b1b; }
.alert-warning { background: var(--warning-subtle); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: #92400e; }
.alert-info    { background: var(--info-subtle);    border-color: color-mix(in srgb, var(--info) 30%, transparent);    color: #1e40af; }

[data-bs-theme="dark"] .alert-success { color: #6ee7b7; }
[data-bs-theme="dark"] .alert-danger  { color: #fca5a5; }
[data-bs-theme="dark"] .alert-warning { color: #fcd34d; }
[data-bs-theme="dark"] .alert-info    { color: #93c5fd; }

/* --- sidebar / navbar polish --- */
.navbar.sticky-top {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: color-mix(in srgb, var(--surface) 92%, transparent);
}

.offcanvas .nav-link,
.sidebar .nav-link {
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.125rem;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.offcanvas .nav-link:hover,
.sidebar .nav-link:hover {
  background-color: var(--surface-alt);
  color: var(--text-primary);
}

.offcanvas .nav-link.active,
.sidebar .nav-link.active {
  background-color: var(--accent-subtle);
  color: var(--text-primary);
  font-weight: 600;
}

/* --- dropdowns --- */
.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.375rem;
}

.dropdown-item {
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  padding: 0.4rem 0.6rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--surface-alt);
  color: var(--text-primary);
}

/* --- empty state pattern --- */
.empty-state-card {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  color: var(--text-muted);
  margin: 0 auto;
}

/* --- list-group polish --- */
.list-group-item {
  background: transparent;
  padding: 0.75rem 1rem;
  transition: background-color var(--transition-fast);
}

.list-group-item:hover {
  background-color: var(--surface-alt);
}

.list-group-flush > .list-group-item {
  border-color: var(--border-light);
}

/* --- modals: tighter --- */
.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom-color: var(--border); }
.modal-footer { border-top-color: var(--border); }

/* --- avatar utility (used in navbar) --- */
.avatar { display: inline-flex; align-items: center; justify-content: center; }
.avatar.avatar-sm { width: 2rem;   height: 2rem;   font-size: 0.75rem; }
.avatar.avatar-md { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.avatar.avatar-lg { width: 3rem;   height: 3rem;   font-size: 1rem; }

/* --- subtle scrollbar (webkit) --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 40%, transparent);
  border-radius: var(--radius-full);
  border: 2px solid var(--body-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-muted) 70%, transparent);
}

/* --- typography breathing --- */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.text-muted { color: var(--text-muted) !important; }

/* --- focus ring consistency for inputs and switches --- */
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* --- responsive container gutters --- */
@media (min-width: 768px) {
  .container, .container-fluid { padding-inline: 1.5rem; }
}

/* --- print: cleaner output --- */
@media print {
  .table > thead { background: #f3f4f6 !important; }
  .card { page-break-inside: avoid; }
}

/* === END REVAMP 2026 === */

/* ============================================================
   TRIDENT DESIGN SYSTEM — shared primitives (promoted from
   home.html / jobs_list.html / job_detail.html — May 2026)
   ============================================================ */

/* dashboard header */
.dash-header{border-bottom:1px solid var(--bs-border-color);padding-bottom:.75rem;margin-bottom:1.25rem}
.dash-header h4{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin:0}
.dash-header .meta{font-size:.75rem;color:var(--bs-secondary-color)}

/* KPI tiles */
.kpi{border:1px solid var(--bs-border-color);border-radius:4px;padding:.85rem 1rem;background:var(--bs-body-bg)}
.kpi-val{font-size:1.4rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--bs-emphasis-color)}
.kpi-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--bs-secondary-color);margin-bottom:2px}
.kpi-sub{font-size:.72rem;color:var(--bs-secondary-color)}

/* panels */
.panel{border:1px solid var(--bs-border-color);border-radius:4px;overflow:hidden;background:var(--bs-body-bg)}
.panel-head{padding:.6rem .85rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bs-secondary-color);border-bottom:1px solid var(--bs-border-color);background:var(--bs-tertiary-bg);display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.panel-body{padding:.85rem}

/* compact table */
.tbl-compact{margin-bottom:0;width:100%}
.tbl-compact th{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--bs-secondary-color);padding:.5rem .6rem;border-bottom:2px solid var(--bs-border-color);background:var(--bs-tertiary-bg);text-align:left}
.tbl-compact td{font-size:.8rem;padding:.55rem .6rem;border-bottom:1px solid var(--bs-border-color);vertical-align:middle;color:var(--bs-body-color)}
.tbl-compact tbody tr:hover{background:var(--bs-tertiary-bg)}
.tbl-compact tbody tr:last-child td{border-bottom:0}

/* status mini-bar */
.status-bar{height:4px;border-radius:2px;overflow:hidden;display:flex;background:var(--bs-tertiary-bg)}
.status-bar .seg{height:100%}

/* status badges */
.badge-status{font-size:.62rem;font-weight:700;padding:.18em .5em;border-radius:3px;letter-spacing:.04em;text-transform:uppercase;display:inline-block}
.badge-open{background:#e0f2fe;color:#0369a1}
.badge-in_progress,.badge-pending{background:#dbeafe;color:#1d4ed8}
.badge-on_hold{background:#fef3c7;color:#92400e}
.badge-closed,.badge-paid{background:#dcfce7;color:#166534}
.badge-cancelled{background:#fee2e2;color:#991b1b}
.badge-overdue{background:#fee2e2;color:#991b1b}
[data-bs-theme="dark"] .badge-open{background:rgba(14,165,233,.15);color:#38bdf8}
[data-bs-theme="dark"] .badge-in_progress,[data-bs-theme="dark"] .badge-pending{background:rgba(59,130,246,.15);color:#60a5fa}
[data-bs-theme="dark"] .badge-on_hold{background:rgba(251,191,36,.15);color:#fbbf24}
[data-bs-theme="dark"] .badge-closed,[data-bs-theme="dark"] .badge-paid{background:rgba(34,197,94,.15);color:#4ade80}
[data-bs-theme="dark"] .badge-cancelled,[data-bs-theme="dark"] .badge-overdue{background:rgba(239,68,68,.15);color:#f87171}

/* status-pill (used in filter rows) */
.spill{display:inline-flex;align-items:center;gap:6px;padding:.3rem .65rem;border:1px solid var(--bs-border-color);border-radius:3px;font-size:.7rem;font-weight:700;color:var(--bs-body-color);text-decoration:none;background:var(--bs-body-bg);transition:border-color .1s,background-color .1s}
.spill:hover{border-color:var(--bs-emphasis-color);color:var(--bs-body-color)}
.spill.is-active{background:var(--bs-emphasis-color);color:var(--bs-body-bg);border-color:var(--bs-emphasis-color)}
.spill .count{font-size:.65rem;color:var(--bs-secondary-color)}
.spill.is-active .count{color:rgba(255,255,255,.8)}
.spill .dot{width:6px;height:6px;border-radius:50%}

/* filter row */
.filter-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filter-row .form-control,.filter-row .form-select{font-size:.78rem;padding:.4rem .6rem;border-radius:3px}
.filter-row .input-group-text{font-size:.78rem;background:transparent}

/* ghost button (for icon-only inline actions in tables) */
.btn-ghost{background:transparent;border:1px solid transparent;color:var(--bs-secondary-color);border-radius:3px;padding:.25rem .45rem;font-size:.8rem;line-height:1}
.btn-ghost:hover{border-color:var(--bs-border-color);color:var(--bs-emphasis-color);background:var(--bs-tertiary-bg)}

/* row-actions group */
.row-actions{display:inline-flex;gap:2px}
.row-actions .btn-ghost.danger:hover{color:#f87171;border-color:rgba(239,68,68,.4)}

/* pager */
.pager{display:flex;justify-content:center;gap:3px;flex-wrap:wrap;margin-top:1rem}
.pager a,.pager span{min-width:30px;height:30px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bs-border-color);border-radius:3px;font-size:.74rem;font-weight:700;color:var(--bs-body-color);text-decoration:none;background:var(--bs-body-bg)}
.pager a:hover{border-color:var(--bs-emphasis-color)}
.pager .active{background:var(--bs-emphasis-color);color:var(--bs-body-bg);border-color:var(--bs-emphasis-color)}
.pager .disabled{opacity:.4}

/* empty state */
.empty{border:1px dashed var(--bs-border-color);border-radius:4px;padding:48px 20px;text-align:center;color:var(--bs-secondary-color)}
.empty i.icon{font-size:1.8rem;display:block;margin-bottom:.5rem;opacity:.6}

/* form primitives */
.tform .field{margin-bottom:1rem}
.tform label{display:block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--bs-secondary-color);margin-bottom:.3rem}
.tform .form-control,.tform .form-select,.tform textarea.form-control{font-size:.85rem;padding:.5rem .65rem;border-radius:4px;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);color:var(--bs-body-color);width:100%}
.tform .form-control:focus,.tform .form-select:focus,.tform textarea.form-control:focus{border-color:var(--bs-link-color);box-shadow:0 0 0 .15rem rgba(251,191,36,.18);background:var(--bs-body-bg)}
.tform .help{font-size:.65rem;color:var(--bs-secondary-color);margin-top:.25rem}
.tform .req{color:#f87171;margin-left:.15rem}

/* action button (minimal) */
.btn-flat{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.45rem .85rem;border-radius:4px;border:1px solid var(--bs-border-color);background:var(--bs-body-bg);color:var(--bs-body-color);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;line-height:1;cursor:pointer;transition:border-color .12s,background-color .12s,color .12s}
.btn-flat:hover{border-color:var(--bs-emphasis-color);color:var(--bs-emphasis-color);background:var(--bs-tertiary-bg)}
.btn-flat.primary{background:var(--bs-emphasis-color);color:var(--bs-body-bg);border-color:var(--bs-emphasis-color)}
.btn-flat.primary:hover{background:var(--bs-link-color);border-color:var(--bs-link-color);color:#000}
.btn-flat.danger:hover{color:#f87171;border-color:rgba(239,68,68,.5)}

/* === END DESIGN SYSTEM === */