/* ============================================================
   METAPROJECT DESIGN SYSTEM
   ============================================================
   Token architecture: all design tokens (colors, spacing, typography,
   radius, shadows, z-index, animation) are defined in ./tokens/.
   This file only contains component styles that reference tokens.

   See tokens/index.css for import order and the generic token set
   components are allowed to reference. Legacy names are temporarily
   supported via tokens/compat.css while CSS/templates/JS migrate.
   ============================================================ */

@import url('./tokens/index.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   BASE RESET & TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  font-size: 14px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--type-body-size);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-base);
  min-height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-active); }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

/* ============================================================
   APP LAYOUT — SIDEBAR + CONTENT
   ============================================================ */
.app-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width-expanded);
  background-color: var(--bg-base);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width var(--transition), transform var(--transition);
  overflow: hidden;
}

.app-sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

/* Sidebar header / logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: var(--topnav-height);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-size: var(--type-body-size);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition), width var(--transition), max-width var(--transition);
}

.app-sidebar.collapsed .sidebar-logo-text { opacity: 0; width: 0; max-width: 0; overflow: hidden; pointer-events: none; }

/* Sidebar nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidebar-nav { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.sidebar-nav::-webkit-scrollbar { width: var(--scrollbar-size-sm); }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-sm); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.sidebar-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 16px 4px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition);
}

.app-sidebar.collapsed .sidebar-section-label { opacity: 0; }

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  margin: 0 var(--space-2);
  height: var(--nav-item-height);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--type-data-size);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
  position: relative;
}

.sidebar-nav-item:hover {
  background-color: var(--bg-surface-2);
  color: var(--text-primary);
  text-decoration: none;
}

.sidebar-nav-item.active {
  background-color: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}

.sidebar-nav-icon {
  width: 18px;
  min-width: 18px;
  text-align: center;
  font-size: 1rem;
}

.sidebar-nav-text {
  overflow: hidden;
  white-space: nowrap;
  transition: opacity var(--transition), width var(--transition), max-width var(--transition);
  max-width: 160px;
}

.app-sidebar.collapsed .sidebar-nav-text { opacity: 0; width: 0; max-width: 0; overflow: hidden; pointer-events: none; }
.app-sidebar.collapsed .sidebar-nav-item { padding: 0; margin: 0 var(--space-2); justify-content: center; gap: 0; }
.app-sidebar.collapsed .sidebar-section-label { opacity: 0; height: 0; padding: 0; overflow: hidden; }

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 16px;
}

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sidebar-footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--type-h2-size);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  text-decoration: none;
}

.sidebar-footer-btn:hover {
  background-color: var(--bg-surface-2);
  color: var(--text-primary);
}

.app-sidebar.collapsed .sidebar-footer {
  flex-direction: column;
  align-items: center;
}

/* ---------- Topbar ---------- */
.app-topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width-expanded);
  right: 0;
  height: var(--topnav-height);
  background-color: var(--bg-surface-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  z-index: 900;
  transition: left var(--transition);
}

.app-sidebar.collapsed ~ .app-main .app-topbar,
.app-topbar.sidebar-collapsed {
  left: var(--sidebar-width-collapsed);
}

.topbar-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.topbar-sidebar-toggle:hover {
  background-color: var(--bg-surface-2);
  color: var(--text-primary);
}

.topbar-title {
  flex: 1;
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  font-size: 0.95rem;
  position: relative;
  text-decoration: none;
}

.topbar-btn:hover {
  background-color: var(--bg-surface-2);
  color: var(--text-primary);
  text-decoration: none;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  border: none;
  background: transparent;
  transition: background-color var(--transition), color var(--transition);
  text-decoration: none;
  font-size: var(--type-data-size);
  font-weight: 500;
}

.topbar-user:hover {
  background-color: var(--bg-surface-2);
  color: var(--text-primary);
  text-decoration: none;
}

.topbar-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-caption-size);
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Main content area ---------- */
.app-main {
  margin-left: var(--sidebar-width-expanded);
  padding-top: var(--topnav-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
  flex: 1;
  min-width: 0;
}

.app-sidebar.collapsed ~ .app-main {
  margin-left: var(--sidebar-width-collapsed);
}

main {
  flex: 1;
  padding: 30px;
}

/* ── Normalize Bootstrap container wrappers inside main ─── */
/* main { padding: 30px } is the single source of truth for
   page edge spacing. Strip extra padding / margin / width
   constraints from any direct Bootstrap container child so
   every page has identical 30px gutters on all four sides. */
main > .container,
main > .container-fluid,
main > .container-sm,
main > .container-md,
main > .container-lg,
main > .container-xl,
main > .container-xxl {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* ── Page Header Component ──────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.page-header-icon {
  width: 36px;
  height: 36px;
  background: var(--accent-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}

.page-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
  line-height: 1.2;
}

.page-subtitle {
  font-size: var(--type-body-size);
  color: var(--text-secondary);
  margin: 0;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Page content wrapper (narrow centered layouts) ── */
.page-content {
  max-width: 720px;
}

/* ── Stat Cards (admin overviews) ───────────────────── */
.stat-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--bg-surface-1);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stat-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.stat-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card-label {
  font-size: var(--type-caption-size);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-h2-size);
  flex-shrink: 0;
}
.stat-card--primary { border-left: 3px solid var(--accent); }
.stat-card--primary .stat-card-icon { background-color: var(--accent-subtle); color: var(--accent); }
.stat-card--success { border-left: 3px solid var(--status-success); }
.stat-card--success .stat-card-icon { background-color: var(--status-success-subtle); color: var(--status-success); }
.stat-card--info    { border-left: 3px solid var(--status-info); }
.stat-card--info    .stat-card-icon { background-color: var(--status-info-subtle);    color: var(--status-info); }
.stat-card--warning { border-left: 3px solid var(--status-warning); }
.stat-card--warning .stat-card-icon { background-color: var(--status-warning-subtle); color: var(--status-warning); }
/* stat-card icon bg adapts per-theme via --*-subtle tokens; no
 * dark-specific override needed. */

/* ── Global form control sizing ─────────────────────── */
.form-control,
.form-select {
  font-size: var(--type-data-size);
  border-color: var(--border);
  border-radius: var(--radius-lg) !important;
  color: var(--text-primary);
  background-color: var(--bg-base);
  padding: 6px 10px;
  height: 34px;
}
/* Inside input-groups: restore flat edges where Bootstrap expects them */
.input-group > .form-control,
.input-group > .form-select {
  border-radius: 0 !important;
}
.input-group > .form-control:first-child,
.input-group > .form-select:first-child {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}
.input-group > .form-control:last-child,
.input-group > .form-select:last-child {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
}
.input-group > .form-control:only-child,
.input-group > .form-select:only-child {
  border-radius: var(--radius-lg) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: var(--ring-focus-soft);
  background-color: var(--bg-base);
  color: var(--text-primary);
  outline: none;
}
textarea.form-control {
  height: auto;
}
.input-group-text {
  font-size: var(--type-data-size);
  border-color: var(--border);
  background-color: var(--bg-base);
  color: var(--text-muted);
  height: 34px;
  padding: 6px 10px;
}
.input-group > .input-group-text:first-child {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}
.input-group > .input-group-text:last-child {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
}
.input-group:focus-within .input-group-text {
  border-color: var(--accent);
}

/* ── Global primary action button ───────────────────── */
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
  font-size: var(--type-body-size);
  font-weight: 600;
  border-radius: var(--radius-md) !important;
  padding: 7px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-active) !important;
  border-color: var(--accent-active) !important;
  color: var(--text-on-accent) !important;
  box-shadow: 0 4px 12px rgba(var(--cu-primary-rgb), 0.35) !important;
}
.btn-primary:active {
  background: var(--accent-active) !important;
}
/* btn-sm inherits primary sizing but with smaller padding */
.btn-sm {
  font-size: var(--type-data-size) !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  gap: 5px;
}

/* ── Global empty state ──────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  text-align: center;
  background: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(var(--cu-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--accent);
  margin-bottom: 20px;
  flex-shrink: 0;
}
.empty-state-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.empty-state-desc {
  font-size: var(--type-body-size);
  color: var(--text-secondary);
  max-width: 360px;
  margin-bottom: 24px;
  line-height: 1.55;
}

/* No sidebar layout (auth pages, etc.) */
.no-sidebar .app-main {
  margin-left: 0;
}
.no-sidebar .app-topbar {
  left: 0;
}

/* ---------- Auth-only navbar (unauthenticated) ---------- */
.auth-navbar {
  background-color: var(--bg-surface-1) !important;
  border-bottom: 1px solid var(--border);
  padding: 0 !important;
  height: var(--topnav-height);
}

.auth-navbar .navbar-brand {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px !important;
  margin-right: 0 !important;
}

.auth-navbar .nav-link {
  color: var(--text-secondary) !important;
  font-size: var(--type-data-size);
  font-weight: 500;
  padding: 6px 12px !important;
  border-radius: var(--radius-md);
}

.auth-navbar .nav-link:hover {
  background-color: var(--bg-surface-2);
  color: var(--text-primary) !important;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-emphasis);
}

.card-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-weight: 600;
  font-size: var(--type-body-size);
  color: var(--text-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card-body {
  padding: 16px;
}

.card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: transparent;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: var(--type-data-size);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  line-height: 1.5;
  transition: background-color var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform 60ms ease;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:active { transform: scale(0.98); }
.btn:focus { outline: none; }

/* Primary */
.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent) !important;
}
.btn-primary:hover {
  background-color: var(--accent-active);
  border-color: var(--accent-active);
  color: var(--text-on-accent) !important;
}
.btn-primary:focus {
  box-shadow: var(--ring-focus-strong);
}

/* Secondary */
.btn-secondary {
  background-color: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text-primary) !important;
}
.btn-secondary:hover {
  background-color: var(--border);
  border-color: var(--border-emphasis);
  color: var(--text-primary) !important;
}

/* Success / Danger / Warning / Info — hover filters darken for active
 * state without needing theme-specific hex values. filter: brightness()
 * respects the token so every theme gets a proportionally darker hover. */
.btn-success {
  background-color: var(--status-success);
  border-color: var(--status-success);
  color: var(--text-on-accent) !important;
}
.btn-success:hover {
  filter: brightness(0.88);
  color: var(--text-on-accent) !important;
}

.btn-danger {
  background-color: var(--status-error);
  border-color: var(--status-error);
  color: var(--text-on-accent) !important;
}
.btn-danger:hover {
  filter: brightness(0.88);
  color: var(--text-on-accent) !important;
}

.btn-warning {
  background-color: var(--status-warning);
  border-color: var(--status-warning);
  color: var(--text-on-accent) !important;
}
.btn-warning:hover {
  filter: brightness(0.88);
  color: var(--text-on-accent) !important;
}

.btn-info {
  background-color: var(--status-info);
  border-color: var(--status-info);
  color: var(--text-on-accent) !important;
}
.btn-info:hover {
  filter: brightness(0.88);
  color: var(--text-on-accent) !important;
}

/* Outline variants */
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--accent);
  color: var(--accent) !important;
}
.btn-outline-primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent) !important;
}

.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--border-emphasis);
  color: var(--text-secondary) !important;
}
.btn-outline-secondary:hover {
  background-color: var(--bg-surface-2);
  border-color: var(--border-emphasis);
  color: var(--text-primary) !important;
}

.btn-outline-danger {
  background-color: transparent;
  border-color: var(--status-error);
  color: var(--status-error) !important;
}
.btn-outline-danger:hover {
  background-color: var(--status-error);
  border-color: var(--status-error);
  color: var(--text-on-accent) !important;
}

.btn-outline-success {
  background-color: transparent;
  border-color: var(--status-success);
  color: var(--status-success) !important;
}
.btn-outline-success:hover {
  background-color: var(--status-success);
  border-color: var(--status-success);
  color: var(--text-on-accent) !important;
}

.btn-outline-warning {
  background-color: transparent;
  border-color: var(--status-warning);
  color: var(--status-warning) !important;
}
.btn-outline-warning:hover {
  background-color: var(--status-warning);
  border-color: var(--status-warning);
  color: var(--text-on-accent) !important;
}

/* Ghost / Link */
.btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
}
.btn-ghost:hover {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}
/* Sizes */
.btn-xs  { padding: 3px 8px;  font-size: var(--type-caption-size); }
.btn-sm  { padding: 4px 10px; font-size: var(--type-data-size); }
.btn-lg  { padding: 9px 20px; font-size: 0.9375rem; }
.btn-xl  { padding: 12px 24px; font-size: 1rem; }

/* Dark mode btn overrides */
[data-bs-theme="dark"] .btn:focus {
  box-shadow: var(--ring-focus-strong) !important;
}
[data-bs-theme="dark"] .btn-secondary {
  background-color: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .btn-secondary:hover {
  background-color: var(--accent-subtle);
  border-color: var(--border-emphasis);
}
[data-bs-theme="dark"] .btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--bg-surface-2);
  color: var(--text-primary) !important;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control,
.form-select {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-data-size);
  color: var(--text-primary);
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 7px 11px;
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus,
.form-select:focus {
  color: var(--text-primary);
  background-color: var(--bg-surface-1);
  border-color: var(--accent);
  box-shadow: var(--ring-focus);
  outline: none;
}

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

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--bg-base);
  border-color: var(--border);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--bg-base);
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: var(--ring-focus);
}


.form-label {
  font-size: var(--type-data-size);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.form-text {
  font-size: var(--type-caption-size);
  color: var(--text-muted);
  margin-top: 4px;
}

.input-group-text {
  background-color: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text-secondary);
  font-size: var(--type-data-size);
}

.form-check-input {
  background-color: var(--bg-surface-1);
  border-color: var(--border-emphasis);
}

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

[data-bs-theme="dark"] .form-check-input {
  background-color: var(--bg-base);
  border-color: var(--border);
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
  font-size: var(--type-data-size);
  color: var(--text-primary);
  border-color: var(--border);
  --bs-table-bg: var(--bg-surface-1);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border);
}

.table th {
  font-size: var(--type-caption-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background-color: var(--bg-base);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
}

.table td {
  padding: 10px 12px;
  vertical-align: middle;
  border-color: var(--border);
}

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


/* ============================================================
   BADGES & STATUS PILLS
   ============================================================ */
.badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  line-height: 1.4;
}

/* Status pills — backgrounds and text both adapt per-theme via generic tokens. */
.badge-primary { background-color: var(--accent-subtle);         color: var(--accent); }
.badge-success { background-color: var(--status-success-subtle); color: var(--status-success); }
.badge-warning { background-color: var(--status-warning-subtle); color: var(--status-warning); }
.badge-danger  { background-color: var(--status-error-subtle);   color: var(--status-error); }
.badge-info    { background-color: var(--status-info-subtle);    color: var(--status-info); }

/* Bootstrap bg- badge overrides */
.badge.bg-primary   { background-color: var(--accent) !important;          color: var(--text-on-accent) !important; }
.badge.bg-secondary { background-color: var(--bg-surface-2) !important;    color: var(--text-secondary) !important; }
.badge.bg-light     { background-color: var(--bg-surface-2) !important;    color: var(--text-secondary) !important; }
.badge.bg-dark      { background-color: var(--text-secondary) !important;  color: var(--bg-surface-1) !important; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  background: transparent;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
  background: transparent;
  color: var(--text-primary);
}

.modal-footer {
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  background: transparent;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}


/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu {
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  font-size: var(--type-data-size);
}

.dropdown-item {
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  font-size: var(--type-data-size);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color var(--transition);
}

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

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

.dropdown-header {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 8px 12px 4px;
}

.dropdown-divider {
  border-top: 1px solid var(--border);
  margin: 4px;
}


/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  border-radius: var(--radius-lg);
  font-size: var(--type-data-size);
  border: 1px solid;
  padding: 12px 16px;
  padding-right: 38px !important;
}
.alert-dismissible .btn-close {
  padding-top: 0.84rem !important;
}

/* Alerts — single rule-set works in every theme. Border uses
 * color-mix to derive a semi-transparent border from the status
 * token so light and dark themes both look correct automatically. */
.alert-success {
  background-color: var(--status-success-subtle);
  border-color: color-mix(in srgb, var(--status-success) 30%, transparent);
  color: var(--status-success);
}
.alert-danger {
  background-color: var(--status-error-subtle);
  border-color: color-mix(in srgb, var(--status-error) 30%, transparent);
  color: var(--status-error);
}
.alert-warning {
  background-color: var(--status-warning-subtle);
  border-color: color-mix(in srgb, var(--status-warning) 30%, transparent);
  color: var(--status-warning);
}
.alert-info {
  background-color: var(--status-info-subtle);
  border-color: color-mix(in srgb, var(--status-info) 30%, transparent);
  color: var(--status-info);
}

/* ============================================================
   NAV PILLS / TABS
   ============================================================ */
.nav-pills .nav-link {
  color: var(--text-secondary);
  font-size: var(--type-data-size);
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: 6px 12px;
  transition: background-color var(--transition), color var(--transition);
}
.nav-pills .nav-link:hover { background-color: var(--bg-surface-2); color: var(--text-primary); }
.nav-pills .nav-link.active { background-color: var(--accent) !important; color: var(--text-on-accent) !important; }

.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link {
  color: var(--text-secondary);
  font-size: var(--type-data-size);
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
  transition: color var(--transition), border-color var(--transition);
}
.nav-tabs .nav-link:hover { color: var(--text-primary); border-bottom-color: var(--border-emphasis); background: transparent; }
.nav-tabs .nav-link.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
  font-weight: 600;
}


/* ============================================================
   LIST GROUPS
   ============================================================ */
.list-group-item {
  background-color: var(--bg-surface-1);
  border-color: var(--border);
  color: var(--text-primary);
  font-size: var(--type-data-size);
  padding: 10px 14px;
}
.list-group-item:hover { background-color: var(--bg-surface-2); }
.list-group-item.active {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
}


/* ============================================================
   BREADCRUMBS
   ============================================================ */
.app-breadcrumb {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.app-breadcrumb .breadcrumb {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-breadcrumb .breadcrumb-item {
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumb { background: none; padding: 0; margin: 0; }
.breadcrumb-item { font-size: var(--type-data-size); color: var(--text-secondary); }
.breadcrumb-item a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-item a i { font-size: var(--type-caption-size); }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }


/* ============================================================
   PROGRESS
   ============================================================ */
.progress {
  background-color: var(--bg-surface-2);
  border-radius: var(--radius-full);
  height: 6px;
}
.progress-bar { background-color: var(--accent); border-radius: var(--radius-full); }


/* ============================================================
   PAGINATION
   ============================================================ */
.pagination .page-link {
  background-color: var(--bg-surface-1);
  border-color: var(--border);
  color: var(--text-secondary);
  font-size: var(--type-data-size);
  padding: 5px 10px;
  border-radius: var(--radius-md) !important;
  margin: 0 2px;
  transition: background-color var(--transition), color var(--transition);
}
.pagination .page-link:hover { background-color: var(--bg-surface-2); color: var(--text-primary); border-color: var(--border); }
.pagination .page-item.active .page-link {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
}
.pagination .page-item.disabled .page-link { background-color: var(--bg-surface-2); color: var(--text-muted); border-color: var(--border); }


/* ============================================================
   ACCORDIONS
   ============================================================ */
.accordion-item { background-color: var(--bg-surface-1); border-color: var(--border); }
.accordion-button {
  background-color: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: var(--type-body-size);
  font-weight: 500;
}
.accordion-button:not(.collapsed) {
  background-color: var(--bg-surface-2);
  color: var(--accent);
  box-shadow: none;
}
.accordion-button:focus { border-color: var(--accent); box-shadow: var(--ring-focus); }
.accordion-body { background-color: var(--bg-surface-1); color: var(--text-primary); font-size: var(--type-data-size); }


/* ============================================================
   TOASTS & NOTIFICATIONS
   ============================================================ */
#toast-container,
.toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

#toast-container .toast,
.toast-container .toast {
  pointer-events: auto;
}

.toast {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--type-data-size);
}

/* Only apply surface bg when no Bootstrap bg-* utility is set */
.toast:not([class*="bg-"]) {
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.toast-header {
  background-color: var(--bg-surface-1);
  border-bottom-color: var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.toast-body { color: inherit; }

/* Dark-scheme-only: invert the Bootstrap close icon for visibility.
 * Applied to all dark themes via color-scheme, not just legacy 'dark'. */
[data-theme="dark"] .toast .btn-close,
[data-theme="dark-brown"] .toast .btn-close,
[data-theme="precision"] .toast .btn-close,
[data-theme="midnight"] .toast .btn-close,
[data-theme="workshop"] .toast .btn-close,
[data-theme="forge"] .toast .btn-close,
[data-theme="graphite"] .toast .btn-close,
[data-theme="amethyst"] .toast .btn-close,
[data-theme="carbon"] .toast .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ============================================================
   TOOLTIPS & POPOVERS
   ============================================================ */
.tooltip-inner { background-color: var(--accent-subtle); color: var(--text-primary); border-radius: var(--radius-md); font-size: var(--type-caption-size); }

.popover { background-color: var(--bg-surface-1); border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.popover-header { background-color: var(--bg-surface-2); border-bottom-color: var(--border); color: var(--text-primary); font-size: var(--type-body-size); font-weight: 600; }
.popover-body { color: var(--text-primary); font-size: var(--type-data-size); }


/* ============================================================
   UTILITY OVERRIDES
   ============================================================ */
.bg-light { background-color: var(--bg-base) !important; }
.bg-white { background-color: var(--bg-surface-1) !important; }
.text-dark { color: var(--text-primary) !important; }
.text-muted { color: var(--text-secondary) !important; }
.border-color { border-color: var(--border) !important; }


/* Text selection */
::selection { background-color: var(--accent); color: var(--text-on-accent); }

/* Scrollbars — global defaults */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ============================================================
   FLASH MESSAGES (STATUS TOASTS)
   ============================================================ */
.status-message {
  position: fixed !important;
  top: calc(var(--topnav-height) + 16px) !important;
  right: 20px !important;
  z-index: 10050 !important;
  background: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  padding: 12px 16px !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  font-size: var(--type-data-size) !important;
  font-weight: 500 !important;
  max-width: 350px !important;
  min-width: 200px !important;
  animation: slideInFromRight 0.25s ease-out !important;
}

.status-message.tool-status-indicator {
  border-left: 3px solid var(--accent) !important;
}

.status-message .status-content {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.status-message .status-text { font-weight: 500 !important; }

@keyframes slideInFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ============================================================
   KANBAN BOARD
   ============================================================ */
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 20px;
  min-height: 500px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.kanban-board::-webkit-scrollbar { height: var(--scrollbar-size); }
.kanban-board::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-sm); }
.kanban-board::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
.kanban-board::-webkit-scrollbar-track { background: transparent; }

.kanban-column {
  flex: 1 1 0;
  min-width: 200px;
  background-color: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), background-color var(--transition);
  box-shadow: var(--shadow-sm);
}

.kanban-column:hover { box-shadow: var(--shadow-md); }

.kanban-column-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-column-title {
  font-weight: 600;
  font-size: var(--type-caption-size);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.story-count {
  background-color: var(--bg-surface-2);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.kanban-stories {
  padding: 8px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.story-card {
  background-color: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition), transform 100ms ease, background-color var(--transition);
  position: relative;
  z-index: 1;
  outline: 0.5px solid transparent;
}

.story-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  border-color: var(--border-emphasis);
  outline-color: var(--border-emphasis);
  transform: translateY(-1px);
  z-index: 10;
}

.story-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-sm);
}

.story-card.dragging {
  opacity: 0.4;
  transform: rotate(1.5deg) scale(0.97);
  box-shadow: var(--shadow-lg);
}

.story-card-title {
  font-weight: 500;
  font-size: var(--type-data-size);
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-card-description {
  font-size: var(--type-caption-size);
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 8px;
  max-height: 42px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.story-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--type-caption-size);
  color: var(--text-secondary);
  gap: 6px;
}

.story-points {
  background-color: var(--accent-subtle);
  color: var(--accent);
  border-radius: var(--radius-full);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.story-assignee {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-surface-2);
}

.add-story-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--accent-subtle);
}

/* Priority colors */
.story-card.priority-low     { border-left: 3px solid var(--status-success); }
.story-card.priority-medium  { border-left: 3px solid var(--status-warning); }
.story-card.priority-high    { border-left: 3px solid var(--status-error); }
.story-card.priority-critical{ border-left: 3px solid var(--status-error); }

.story-priority-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  color: var(--text-on-accent);
}
.story-priority-badge.priority-low      { background-color: var(--status-success); }
.story-priority-badge.priority-medium   { background-color: var(--status-warning); }
.story-priority-badge.priority-high     { background-color: var(--status-error); }
.story-priority-badge.priority-critical { background-color: var(--status-error); }

/* Column status count badge colors */
.kanban-column[data-status="backlog"]     .story-count { background-color: var(--accent-subtle); color: var(--text-secondary); }
.kanban-column[data-status="todo"]        .story-count { background-color: rgba(217,119,6,.15); color: var(--status-warning); }
.kanban-column[data-status="in_progress"] .story-count { background-color: rgba(123,104,238,.15); color: var(--accent); }
.kanban-column[data-status="review"]      .story-count { background-color: rgba(2,132,199,.15); color: var(--status-info); }
.kanban-column[data-status="testing"]     .story-count { background-color: rgba(220,38,38,.15); color: var(--status-error); }
.kanban-column[data-status="done"]        .story-count { background-color: rgba(22,163,74,.15); color: var(--status-success); }

/* Drag and drop */
.kanban-column.drag-over {
  background-color: var(--accent-subtle);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-md);
}
.kanban-column.drag-over .kanban-stories {
  border: 2px dashed var(--accent);
  border-radius: var(--radius-md);
  margin: 4px;
  opacity: 0.8;
}

/* Empty state */
.story-card-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--type-data-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.story-card-empty i { font-size: 28px; opacity: 0.25; display: block; }
.story-card-empty span { font-size: var(--type-caption-size); }

/* Dropdown z-index in kanban */
.story-card .dropdown-menu,
.sprint-story-card .dropdown-menu,
.kanban-container .dropdown-menu,
.sprint-kanban-container .dropdown-menu,
.story-card-actions .dropdown-menu { z-index: 10000 !important; position: absolute !important; }

.story-card .dropdown,
.sprint-story-card .dropdown,
.story-card-actions .dropdown { position: relative !important; z-index: 1000; }

.story-card .dropdown.show,
.sprint-story-card .dropdown.show,
.story-card-actions .dropdown.show { z-index: 10001 !important; }

.story-card,
.sprint-story-card { position: relative; z-index: 1; }
.story-card:hover,
.sprint-story-card:hover,
.story-card:focus-within,
.sprint-story-card:focus-within { z-index: 10; }

/* Mobile kanban */
@media (max-width: 768px) {
  .kanban-column { min-width: 160px; }
  .kanban-board { padding: 8px; gap: 8px; }
}

/* ============================================================
   PROJECT HEADER
   ============================================================ */
.project-header {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-active) 100%);
  color: var(--text-on-accent);
  padding: 20px 24px;
  border-radius: var(--radius-xl);
  margin-bottom: 20px;
}

.project-description { font-size: var(--type-body-size); opacity: 0.85; margin-bottom: 12px; color: var(--text-on-accent); }

.compact-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.compact-stat {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  text-align: center;
  min-width: 70px;
}
.compact-stat-number { font-size: var(--type-h2-size); font-weight: 700; color: var(--text-on-accent); line-height: 1; }
.compact-stat-label { font-size: 0.6875rem; color: color-mix(in srgb, var(--text-on-accent) 80%, transparent); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }


/* ============================================================
   GLOBAL CONSISTENCY LAYER
   Fixes systemic inconsistencies across all pages:
   – Card overflow clipping (no "square content over rounded card")
   – Uniform button heights on the same row
   – Section-card component (used in dashboard, digest, leave)
   – Metric-card component (timesheet summaries)
   – Table-inside-card border-radius clipping
   – Consistent .card-header label style
   ============================================================ */

/* ── Card: always clip overflowing children ───────────────── */
/* This is the #1 fix for "square background on rounded card"  */
.card { overflow: hidden; }

/* ── Table inside card: no double border at top/bottom ─────── */
.card > .table,
.card > .table-responsive > .table {
  margin-bottom: 0;
}
.card > .table thead th:first-child,
.card > .table-responsive > .table thead th:first-child {
  border-top-left-radius: 0;
}
.card > .table thead th:last-child,
.card > .table-responsive > .table thead th:last-child {
  border-top-right-radius: 0;
}
.card > .table,
.card > .table-responsive { border: none; }

/* ── Button height normalisation ───────────────────────────── */
/* All btns on the same row must share a predictable height.   */
.btn      { height: 34px; }
.btn-xs   { height: 26px; padding: 3px 8px !important;  font-size: var(--type-caption-size)  !important; border-radius: var(--radius-md) !important; }
.btn-sm   { height: 30px; padding: 4px 10px !important; font-size: var(--type-data-size) !important; border-radius: var(--radius-md) !important; }
.btn-lg   { height: 40px; padding: 9px 20px !important; font-size: 0.9375rem !important; }
.btn-xl   { height: 46px; padding: 12px 24px !important; font-size: 1rem !important; }
/* Textareas and multi-line never override height */
textarea.form-control { height: auto !important; }
/* Input-group button height must match the adjacent input */
.input-group .btn      { height: 34px; }
.input-group .btn-sm   { height: 30px; }
.input-group .form-control,
.input-group .form-select { height: 34px; }

/* ── Section Card (global component) ───────────────────────── */
/* Used in dashboard, My Work digest, leave management, etc.   */
.section-card {
  background: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface-1);
  flex-shrink: 0;
}
.section-card-header h5,
.section-card-header h6 {
  font-size: var(--type-body-size);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-card-header h5 i,
.section-card-header h6 i { color: var(--accent); }
.section-card-body { padding: 16px 18px; }
.section-card-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-base);
}

/* ── Metric Card (timesheet / stat summaries) ───────────────── */
/* Replaces repeated inline styles on summary number cards     */
.metric-card {
  background: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 16px;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
  height: 100%;
}
.metric-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.metric-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.metric-card-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
.metric-card-value.primary  { color: var(--accent); }
.metric-card-value.info     { color: var(--status-info); }
.metric-card-value.success  { color: var(--status-success); }
.metric-card-value.warning  { color: var(--status-warning); }
.metric-card-value.danger   { color: var(--status-error); }

/* ── Modal: clip inner content to rounded borders ─────────────  */
.modal-content { overflow: hidden; }

/* ── Page nav bar (month pickers, toolbar strips) ─────────────  */
/* A consistent horizontal toolbar card below the page-header  */
.page-toolbar {
  background: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ── Consistent form filter row ─────────────────────────────── */
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-row .form-select,
.filter-row .form-control { max-width: 180px; }
.filter-row .form-select-sm,
.filter-row .form-control-sm { max-width: 150px; }

/* ── Stacked summary chips (projects page style) ─────────────  */
.summary-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.summary-chip strong { color: var(--text-primary); font-weight: 600; }
.summary-chip-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex-shrink: 0; }

/* ── Story status dot colours ────────────────────────────────── */
.story-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.story-status-dot.done        { background-color: var(--status-success); }
.story-status-dot.in-progress { background-color: var(--status-info); }
.story-status-dot.review      { background-color: var(--accent); }
.story-status-dot.backlog     { background-color: var(--text-muted); }

/* ── Priority text colours ───────────────────────────────────── */
.priority-critical { color: var(--status-error) !important; }
.priority-high     { color: var(--status-warning) !important; }
.priority-medium   { color: var(--status-info) !important; }
.priority-low      { color: var(--status-success) !important; }

/* ── Spinner colour ──────────────────────────────────────────── */
.spinner-border { color: var(--accent); }

/* ============================================================
   EDITOR LAYOUT (special full-height case)
   ============================================================ */
body.editor-page {
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
body.editor-page .app-main { overflow: hidden; }
body.editor-page main {
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topnav-height));
  min-height: 0;
  padding: 0;
}

/* View toggle */
.view-toggle-container {
  position: fixed !important;
  right: 20px !important;
  top: calc(var(--topnav-height) + 90px) !important;
  z-index: 1000 !important;
  background: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2px;
}

.view-toggle-btn {
  color: var(--text-secondary);
  background-color: transparent;
  border: none;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: background-color var(--transition), color var(--transition);
  font-size: var(--type-data-size);
  cursor: pointer;
}
.view-toggle-btn:hover { background-color: var(--bg-surface-2); color: var(--text-primary); }
.view-toggle-btn.active { background-color: var(--accent) !important; color: var(--text-on-accent) !important; }


/* Document switcher */
#document-switcher-select {
  background-color: var(--bg-surface-1);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-bs-theme="dark"] #document-switcher-select {
  background-color: var(--bg-base) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] #document-switcher-select:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--ring-focus) !important;
}
[data-bs-theme="dark"] #document-switcher-select option {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   EDITOR DARK MODE
   ============================================================ */
[data-bs-theme="dark"] .editor-container,
[data-bs-theme="dark"] .editor-wrapper,
[data-bs-theme="dark"] .editor-content,
[data-bs-theme="dark"] .editor-split,
[data-bs-theme="dark"] .editor-pane { background-color: var(--bg-base) !important; }

[data-bs-theme="dark"] .editor-container textarea {
  background-color: var(--bg-base);
  border-color: var(--border);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .editor-header { background-color: var(--bg-surface-1) !important; border-bottom-color: var(--border) !important; }
[data-bs-theme="dark"] .editor-title { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .editor-subtitle,
[data-bs-theme="dark"] .editor-subtitle small { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .editor-action-btn {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .editor-action-btn:hover { background-color: var(--accent-subtle) !important; border-color: var(--border-emphasis) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .editor-action-btn.save { border-color: var(--status-success) !important; color: var(--status-success) !important; }
[data-bs-theme="dark"] .editor-action-btn.save:hover { background-color: var(--status-success) !important; color: var(--text-on-accent) !important; }
[data-bs-theme="dark"] .editor-toolbar .btn { background-color: var(--bg-surface-2) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .editor-toolbar .btn:hover { background-color: var(--accent-subtle) !important; color: var(--text-primary) !important; }

[data-bs-theme="dark"] .splitter { background-color: var(--border) !important; }
[data-bs-theme="dark"] .splitter:hover { background-color: var(--border-emphasis) !important; }

/* ============================================================
   AI CHAT PANEL DARK MODE
   ============================================================ */
[data-bs-theme="dark"] .ai-chat-panel { background-color: var(--bg-surface-1) !important; border-left-color: var(--border) !important; }
[data-bs-theme="dark"] .ai-chat-header { background-color: var(--bg-surface-2) !important; border-bottom-color: var(--border) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .ai-chat-messages { background-color: var(--bg-base) !important; }
[data-bs-theme="dark"] .ai-message { background-color: var(--bg-surface-1) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .ai-message.user { background-color: var(--bg-surface-2) !important; border-left-color: var(--accent) !important; }
[data-bs-theme="dark"] .ai-message.assistant { background-color: var(--bg-base) !important; border-left-color: var(--status-success) !important; }
[data-bs-theme="dark"] .ai-chat-input { background-color: var(--bg-surface-1) !important; border-top-color: var(--border) !important; }
[data-bs-theme="dark"] .ai-chat-input .form-control { background-color: var(--bg-base) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .ai-chat-input .btn { background-color: var(--bg-surface-2) !important; border-color: var(--border) !important; color: var(--accent) !important; }
[data-bs-theme="dark"] .ai-chat-input .btn:hover { background-color: var(--accent-subtle) !important; }

.ai-chat-panel { box-shadow: var(--shadow-xl) !important; }
.ai-chat-minimize { cursor: pointer !important; padding: 4px 8px !important; border-radius: var(--radius-md) !important; transition: background var(--transition) !important; }
.ai-chat-minimize:hover { background: rgba(255,255,255,.15) !important; }
.ai-chat-panel.minimized { height: 48px !important; overflow: hidden !important; }
.ai-chat-panel.minimized .ai-chat-messages,
.ai-chat-panel.minimized .ai-chat-input,
.ai-chat-panel.minimized #ai-thinking-section { display: none !important; }

/* AI quick actions */
.ai-quick-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 12px !important; }
.ai-quick-action {
  padding: 5px 10px !important;
  font-size: var(--type-caption-size) !important;
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-full) !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  border: 1px solid var(--border) !important;
}
.ai-quick-action:hover { background: var(--accent-subtle) !important; color: var(--accent) !important; transform: translateY(-1px) !important; }
[data-bs-theme="dark"] .ai-quick-action { background: var(--bg-surface-2) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .ai-quick-action:hover { background: var(--accent-subtle) !important; color: var(--accent) !important; }

/* Agent selector */
#agent-selector { font-size: var(--type-caption-size) !important; min-width: 120px !important; }
[data-bs-theme="dark"] #agent-selector { background: var(--bg-surface-2) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] #agent-selector option { background: var(--bg-surface-1) !important; color: var(--text-primary) !important; }

/* ============================================================
   TOAST UI EDITOR - DARK MODE
   ============================================================ */
[data-bs-theme="dark"] .toastui-editor-defaultUI,
[data-bs-theme="dark"] .toastui-editor,
[data-bs-theme="dark"] .toastui-editor-main,
[data-bs-theme="dark"] .toastui-editor-main-container { background-color: var(--bg-base) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-defaultUI .toastui-editor-toolbar,
[data-bs-theme="dark"] .toastui-editor-toolbar,
[data-bs-theme="dark"] .toastui-editor-defaultUI-toolbar { background-color: var(--bg-surface-1) !important; border-bottom-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-toolbar button { background-color: transparent !important; color: var(--text-secondary) !important; border-color: transparent !important; }
[data-bs-theme="dark"] .toastui-editor-toolbar-icons { background-color: transparent !important; color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .toastui-editor-toolbar-icons:hover,
[data-bs-theme="dark"] .toastui-editor-toolbar button:hover { background-color: var(--bg-surface-2) !important; }
[data-bs-theme="dark"] .toastui-editor-toolbar-divider { background-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-popup-add-image,
[data-bs-theme="dark"] .toastui-editor-popup-add-link,
[data-bs-theme="dark"] .toastui-editor-popup-add-table { background-color: var(--bg-surface-1) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-context-menu { background-color: var(--bg-surface-1) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-md-container,
[data-bs-theme="dark"] .toastui-editor-ww-container { background-color: var(--bg-base) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor-md-tab-container,
[data-bs-theme="dark"] .toastui-editor-tabs { background-color: var(--bg-surface-1) !important; border-bottom-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-tabs .tab-item { color: var(--text-secondary) !important; border-color: transparent !important; background-color: transparent !important; }
[data-bs-theme="dark"] .toastui-editor-tabs .tab-item.active { color: var(--text-primary) !important; border-bottom-color: var(--accent) !important; }
[data-bs-theme="dark"] .toastui-editor-tabs .tab-item:hover { color: var(--text-primary) !important; background-color: var(--bg-surface-2) !important; }
[data-bs-theme="dark"] .toastui-editor-mode-switch { background-color: var(--bg-surface-1) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-mode-switch button { background-color: var(--bg-surface-2) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-mode-switch button:hover { background-color: var(--accent-subtle) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor-mode-switch button.active { background-color: var(--accent) !important; color: var(--text-on-accent) !important; border-color: var(--accent) !important; }
[data-bs-theme="dark"] .toastui-editor-md-code { background-color: var(--bg-inset); color: var(--accent-hover); }
[data-bs-theme="dark"] .toastui-editor-md-code-block { background-color: var(--bg-surface-1); border-color: var(--border); }
[data-bs-theme="dark"] .toastui-editor-contents { color: var(--text-primary); }
[data-bs-theme="dark"] .toastui-editor-contents h1,
[data-bs-theme="dark"] .toastui-editor-contents h2,
[data-bs-theme="dark"] .toastui-editor-contents h3,
[data-bs-theme="dark"] .toastui-editor-contents h4,
[data-bs-theme="dark"] .toastui-editor-contents h5,
[data-bs-theme="dark"] .toastui-editor-contents h6 { color: var(--text-primary); }
[data-bs-theme="dark"] .toastui-editor-contents code { background-color: var(--bg-inset); color: var(--accent-hover); }
[data-bs-theme="dark"] .toastui-editor-contents pre { background-color: var(--bg-surface-1); border-color: var(--border); }
[data-bs-theme="dark"] .toastui-editor-contents table { border-color: var(--border); }
[data-bs-theme="dark"] .toastui-editor-contents th,
[data-bs-theme="dark"] .toastui-editor-contents td { border-color: var(--border); }
[data-bs-theme="dark"] .toastui-editor-contents th { background-color: var(--bg-surface-1); }
[data-bs-theme="dark"] .toastui-editor-contents blockquote { border-left-color: var(--border); color: var(--text-secondary); }
[data-bs-theme="dark"] .toastui-editor-contents a { color: var(--accent); }
[data-bs-theme="dark"] .toastui-editor-md-preview { background-color: var(--bg-base); color: var(--text-primary); }
[data-bs-theme="dark"] .toastui-editor-md-splitter { background-color: var(--border); }
[data-bs-theme="dark"] .toastui-editor-popup { background-color: var(--bg-surface-1); border-color: var(--border); }
[data-bs-theme="dark"] .toastui-editor-popup-body { background-color: var(--bg-surface-1); color: var(--text-primary); }
[data-bs-theme="dark"] .toastui-editor .ProseMirror { background-color: var(--bg-base); color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor .CodeMirror { background-color: var(--bg-base) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor .CodeMirror-line { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor .CodeMirror-cursor { border-left-color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor .CodeMirror-gutters { background-color: var(--bg-base); border-right-color: var(--border); }
[data-bs-theme="dark"] .toastui-editor .CodeMirror-linenumber { color: var(--text-muted); }
[data-bs-theme="dark"] .toastui-editor input[type="text"],
[data-bs-theme="dark"] .toastui-editor textarea { background-color: var(--bg-surface-1); color: var(--text-primary); border-color: var(--border); }
[data-bs-theme="dark"] .toastui-editor-dropdown { background-color: var(--bg-surface-1); border-color: var(--border); }
[data-bs-theme="dark"] .toastui-editor-dropdown-item { color: var(--text-primary); }
[data-bs-theme="dark"] .toastui-editor-dropdown-item:hover { background-color: var(--bg-surface-2); }
[data-bs-theme="dark"] .toastui-editor-ok-button,
[data-bs-theme="dark"] .toastui-editor-close-button { background-color: var(--bg-surface-2) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor-ok-button:hover,
[data-bs-theme="dark"] .toastui-editor-close-button:hover { background-color: var(--accent-subtle) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor-scrollsync { background-color: transparent !important; color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .toastui-editor-scrollsync.active { background-color: var(--accent-subtle) !important; color: var(--accent) !important; }
[data-bs-theme="dark"] .toastui-editor-placeholder { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .toastui-editor-contents ::selection { background-color: var(--accent); color: var(--text-on-accent); }
[data-bs-theme="dark"] .toastui-editor-popup-add-image .toastui-editor-file-name,
[data-bs-theme="dark"] .toastui-editor-popup-add-link input { background-color: var(--bg-base) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor-color-picker { background-color: var(--bg-surface-1) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-cell-editor { background-color: var(--bg-base) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor-md-hint { background-color: var(--bg-surface-1) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .toastui-editor-md-hint-item { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor-md-hint-item.active { background-color: var(--accent-subtle) !important; color: var(--accent) !important; }
[data-bs-theme="dark"] #toast-mode-toggle { border-left-color: var(--border); color: var(--text-secondary); }
[data-bs-theme="dark"] #toast-mode-toggle:hover { background-color: var(--bg-surface-2); color: var(--text-primary); }
[data-bs-theme="dark"] .toastui-editor-ww-mode .ProseMirror { background-color: var(--bg-base) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .toastui-editor-ww-mode p,
[data-bs-theme="dark"] .toastui-editor-ww-mode span { color: var(--text-primary) !important; }

/* ============================================================
   PRISM.JS CODE HIGHLIGHTING — DARK MODE
   ============================================================ */
[data-bs-theme="dark"] pre[class*="language-"],
[data-bs-theme="dark"] code[class*="language-"] { background-color: var(--bg-surface-1); color: var(--text-primary); }
[data-bs-theme="dark"] :not(pre) > code[class*="language-"] { background-color: var(--bg-surface-1); }

/* ============================================================
   MEDIA ATTACHMENTS
   ============================================================ */
.attachment-preview { margin: 8px 0; }
.attachment-thumbnail {
  max-width: 100%; height: auto; max-height: 300px; object-fit: contain;
  border-radius: var(--radius-md); cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.attachment-thumbnail:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.attachment-video { max-width: 100%; height: auto; max-height: 300px; border-radius: var(--radius-md); background: #000; }
.attachment-item { transition: background-color var(--transition); }
.attachment-item:hover { background-color: var(--bg-surface-2); }

[data-bs-theme="dark"] .attachment-thumbnail { border-color: var(--border); background-color: var(--bg-base); }
[data-bs-theme="dark"] .img-thumbnail { background-color: var(--bg-base); border-color: var(--border); }

/* File type icons (PNG image-based) */
.file-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.file-icon-sm { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.file-icon-lg { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.file-icon-xl { width: 40px; height: 40px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }

/* ============================================================
   WORK DIGEST
   ============================================================ */
.work-item h5 { color: var(--text-primary); }
[data-bs-theme="dark"] .expanded-content .bg-light { background-color: var(--bg-surface-2) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .expanded-content .markdown-content { color: var(--text-primary); }
[data-bs-theme="dark"] .h4 { color: var(--text-primary) !important; }

/* ============================================================
   FOOTER (minimal, only on public pages)
   ============================================================ */
footer {
  background-color: var(--bg-surface-2);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  margin-top: auto;
  flex-shrink: 0;
}

[data-bs-theme="dark"] footer {
  background-color: var(--bg-base);
  border-top-color: var(--border);
}

/* ============================================================
   PROJECT DOCUMENTATION SECTION (ClickUp-style)
   ============================================================ */

/* Outer container */
.pd-container {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.pd-wrapper {
  max-width: 1100px; width: 100%; margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex; flex-direction: column; flex: 1;
  overflow: hidden; min-height: 0;
}

/* Header bar */
.pd-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-shrink: 0;
}
.pd-header-title {
  font-size: 1.125rem; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}
.pd-header-title i { font-size: var(--type-h2-size); color: var(--accent); }
.pd-header-count {
  font-size: 0.8rem; font-weight: 500; color: var(--text-muted);
  background: var(--bg-surface-2); padding: 2px 10px; border-radius: var(--radius-full);
}
.pd-new-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: var(--type-data-size); font-weight: 600;
  color: var(--text-on-accent); background: var(--accent); border: none;
  border-radius: var(--radius-md); cursor: pointer;
  text-decoration: none; transition: background var(--transition);
}
.pd-new-btn:hover { background: var(--accent-active); color: var(--text-on-accent); }
.pd-new-btn i { font-size: var(--type-body-size); }

/* Filter bar */
.pd-filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.pd-filter-search-wrap { position: relative; flex-shrink: 0; }
.pd-filter-search-wrap i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 0.72rem; color: var(--text-muted); pointer-events: none;
}
.pd-filter-search {
  width: 200px; padding: 0 var(--space-3) 0 28px; height: var(--input-height); font-size: 0.78rem;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--bg-base); color: var(--text-primary);
  outline: none; transition: border-color var(--transition), width var(--duration-slow);
}
.pd-filter-search:focus { border-color: var(--accent); width: 260px; }
.pd-filter-search::placeholder { color: var(--text-muted); }
.pd-filter-select {
  padding: 0 var(--space-6) 0 var(--space-3); height: var(--input-height); font-size: 0.78rem;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--bg-base); color: var(--text-secondary);
  cursor: pointer; outline: none; appearance: auto; transition: border-color var(--transition);
}
.pd-filter-select:focus { border-color: var(--accent); }
.pd-filter-clear {
  display: none; padding: 4px 10px; font-size: 0.72rem;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--transition);
}
.pd-filter-clear:hover { border-color: var(--status-error); color: var(--status-error); }
.pd-filter-clear.visible { display: inline-flex; align-items: center; gap: 3px; }
.pd-filter-count {
  font-size: var(--type-caption-size); color: var(--text-muted); white-space: nowrap; margin-left: auto;
}
.pd-filter-count b { color: var(--text-secondary); font-weight: 700; }

/* Pinned section */
.pd-pinned { margin-bottom: 1.25rem; flex-shrink: 0; }
.pd-pinned-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--status-warning);
  margin-bottom: 0.5rem; display: flex; align-items: center; gap: 5px;
}
.pd-pinned-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.625rem;
}
.pd-pinned-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); text-decoration: none; transition: all var(--transition);
}
.pd-pinned-card:hover { background: var(--bg-surface-2); box-shadow: var(--shadow-sm); }

/* Document icon (colored square) */
.pd-doc-icon {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--type-body-size); flex-shrink: 0;
}
/* Category colors — mapped to generic status/accent tokens so every
 * theme gets coherent, per-theme-correct tints automatically.
 * Design uses the error family (pink-red area) to keep it distinct
 * from warning (amber) and accent (violet/theme-primary). */
.pd-doc-icon.cat-story          { background: var(--status-warning-subtle); color: var(--status-warning); }
.pd-doc-icon.cat-specification  { background: var(--status-success-subtle); color: var(--status-success); }
.pd-doc-icon.cat-design         { background: var(--status-error-subtle);   color: var(--status-error); }
.pd-doc-icon.cat-documentation  { background: var(--status-info-subtle);    color: var(--status-info); }
.pd-doc-icon.cat-meeting        { background: var(--status-warning-subtle); color: var(--status-warning); }
.pd-doc-icon.cat-planning       { background: var(--accent-subtle);         color: var(--accent); }
.pd-doc-icon.cat-general        { background: var(--bg-surface-2);          color: var(--text-secondary); }

/* Table */
.pd-table-wrap {
  flex: 1; overflow-y: auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
}
.pd-table-wrap::-webkit-scrollbar { width: var(--scrollbar-size-sm); }
.pd-table-wrap::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-sm); }
.pd-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
.pd-table { width: 100%; border-collapse: collapse; }
.pd-table thead th {
  padding: 6px 12px; font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; background: var(--bg-surface-1); z-index: 1;
}
.pd-table tbody tr {
  border-bottom: 1px solid var(--border); transition: background var(--duration-fast);
}
.pd-table tbody tr:hover { background: var(--bg-surface-2); }
.pd-table tbody tr:last-child { border-bottom: none; }
.pd-table td { padding: 10px 12px; font-size: var(--type-data-size); vertical-align: middle; }

/* Doc name cell */
.pd-doc-name { display: flex; align-items: center; gap: 10px; }
.pd-doc-name-text { display: flex; flex-direction: column; }
.pd-doc-title {
  font-weight: 600; color: var(--text-primary);
  text-decoration: none; line-height: 1.3;
}
.pd-doc-title:hover { color: var(--accent); }
.pd-doc-subtitle {
  font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; margin-top: 1px;
}
.pd-pin-indicator { color: var(--status-warning); font-size: 0.625rem; margin-left: 4px; }

/* Category badge (colored pill) */
.pd-cat-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 0.7rem; font-weight: 500;
  border-radius: var(--radius-full); white-space: nowrap;
}
.pd-cat-badge.cat-story          { background: var(--status-warning-subtle); color: var(--status-warning); }
.pd-cat-badge.cat-specification  { background: var(--status-success-subtle); color: var(--status-success); }
.pd-cat-badge.cat-design         { background: var(--status-error-subtle);   color: var(--status-error); }
.pd-cat-badge.cat-documentation  { background: var(--status-info-subtle);    color: var(--status-info); }
.pd-cat-badge.cat-meeting        { background: var(--status-warning-subtle); color: var(--status-warning); }
.pd-cat-badge.cat-planning       { background: var(--accent-subtle);         color: var(--accent); }
.pd-cat-badge.cat-general        { background: var(--bg-surface-2);          color: var(--text-secondary); }

/* Owner */
.pd-owner { display: flex; align-items: center; gap: 6px; }
.pd-owner-avatar {
  width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--accent-subtle); color: var(--accent);
  font-size: 0.625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; flex-shrink: 0;
}
.pd-owner-name { font-size: 0.8rem; color: var(--text-secondary); }

/* Timestamp */
.pd-time { font-size: 0.78rem; color: var(--text-muted); }

/* Actions (hover-reveal) */
.pd-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition); }
.pd-table tbody tr:hover .pd-actions { opacity: 1; }
.pd-action-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: 0.8rem; transition: all var(--duration-fast);
  text-decoration: none; padding: 0;
}
.pd-action-btn:hover { background: var(--bg-surface-2); color: var(--accent); }
.pd-action-btn.pinned { color: var(--status-warning); }
.pd-action-btn.pinned:hover { color: var(--status-warning); background: var(--status-warning-subtle); }
.pd-action-btn-danger { opacity: 0.5; }
.pd-action-btn-danger:hover { color: var(--status-error) !important; background: var(--status-error-subtle) !important; opacity: 1; }

/* Category dropdown in actions */
.pd-cat-dropdown .dropdown-menu {
  min-width: 180px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-surface-1); box-shadow: var(--shadow-lg); padding: 4px;
}
.pd-cat-dropdown .dropdown-item {
  font-size: 0.8rem; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-primary);
}
.pd-cat-dropdown .dropdown-item:hover { background: var(--bg-surface-2); }

/* Empty state */
.pd-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 24px; text-align: center; flex: 1;
}
.pd-empty-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--accent-subtle); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.75rem; color: var(--accent); margin-bottom: 20px;
}
.pd-empty-title {
  font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px;
}
.pd-empty-desc {
  font-size: var(--type-data-size); color: var(--text-secondary);
  max-width: 320px; margin-bottom: 20px; line-height: 1.5;
}

/* ============================================================
   MISC COMPONENT OVERRIDES
   ============================================================ */

/* Notification indicator */
.notification-indicator {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--status-error);
  color: var(--text-on-accent);
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: var(--radius-full);
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}
.msg-indicator { background: var(--accent); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* Active users */
.active-users { background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px; margin-bottom: 10px; }
.user-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--radius-full); font-size: var(--type-caption-size); color: var(--text-on-accent); font-weight: 500; }
.user-badge .status-dot { width: 6px; height: 6px; border-radius: var(--radius-full); margin-right: 6px; }

/* Hover utils */
.hover-bg-light:hover { background-color: var(--bg-surface-2) !important; }

/* Responsive — hide sidebar on mobile */
@media (max-width: 991px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.mobile-open { transform: translateX(0); }
  .app-main { margin-left: 0 !important; }
  .app-topbar { left: 0 !important; }
  main { padding: 16px; }
}

@media (max-width: 768px) {
  .page-header { flex-direction: column; gap: 8px; }
  .page-header-actions { width: 100%; justify-content: flex-start; }
  .project-title { font-size: 1.125rem; }
  .compact-stats { gap: 8px; }
  .compact-stat { min-width: 60px; padding: 6px 10px; }
}

/* ============================================================
   GLOBAL UTILITIES — Skeletons, Loading, Feedback
   ============================================================ */

/* Button loading state */
.btn-loading { pointer-events: none; opacity: 0.75; }
.btn-loading .spinner-border { width: 14px; height: 14px; border-width: 2px; }

/* Empty state container */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state-icon { font-size: 2.5rem; opacity: 0.2; margin-bottom: 12px; }
.empty-state-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.empty-state-desc { font-size: var(--type-data-size); color: var(--text-muted); max-width: 300px; margin-bottom: 16px; }

/* Form validation feedback */
.form-control.is-invalid { border-color: var(--status-error); box-shadow: 0 0 0 2px rgba(220,38,38,0.15); }
.form-control.is-valid { border-color: var(--status-success); box-shadow: 0 0 0 2px rgba(22,163,74,0.15); }
.invalid-feedback { font-size: var(--type-caption-size); color: var(--status-error); margin-top: 4px; }
.valid-feedback { font-size: var(--type-caption-size); color: var(--status-success); margin-top: 4px; }

/* Toast notification */
.toast-notification {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: var(--type-data-size);
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
}
.toast-notification.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast-notification.success { background: var(--status-success); color: var(--text-on-accent); }
.toast-notification.error   { background: var(--status-error);   color: var(--text-on-accent); }
.toast-notification.warning { background: var(--status-warning); color: var(--text-on-accent); }
.toast-notification.info    { background: var(--status-info);    color: var(--text-on-accent); }