@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:wght@400;600&display=swap");

:root {
  --brand-900: #0f1f6b;
  --brand-700: #1f45d8;
  --brand-500: #3e64ff;
  --brand-200: #dfe7ff;
  --ink-900: #111422;
  --ink-700: #2b3247;
  --ink-500: #4e5975;
  --paper: #f5f7fb;
  --white: #ffffff;
  --shadow: 0 20px 60px rgba(17, 20, 34, 0.12);
  --radius-lg: 18px;
  --radius-md: 12px;

  /* Surfaces */
  --surface-0: #ffffff;
  --surface-1: #f4f5f7;
  --surface-2: #f9fafb;
  --surface-3: #f3f4f6;

  /* Text */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;

  /* Borders */
  --border-default: #e5e7eb;
  --border-subtle: #f3f4f6;
  --border-strong: #d1d5db;
}

[data-theme="dark"] {
  --surface-0: #0f1219;
  --surface-1: #151a24;
  --surface-2: #1a2030;
  --surface-3: #232b3a;

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;

  --border-default: #2d3748;
  --border-subtle: #1e293b;
  --border-strong: #475569;

  --brand-500: #6b8aff;
  --brand-200: #1e2a4a;

  --ink-900: #e2e8f0;
  --ink-700: #cbd5e1;
  --ink-500: #94a3b8;
  --paper: #151a24;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

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

body {
  margin: 0;
}

.landing a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

.landing {
  min-height: 100vh;
  color: var(--ink-900);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(63, 94, 255, 0.18), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(31, 69, 216, 0.2), transparent 40%),
    linear-gradient(135deg, #f8f9ff 0%, #eef2ff 45%, #f9fbff 100%);
  display: flex;
  justify-content: center;
  padding: 40px 24px 80px;
}

.landing-shell {
  width: min(1120px, 100%);
}

.landing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--brand-900);
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  box-shadow: 0 10px 22px rgba(31, 69, 216, 0.35);
}

.nav-links {
  display: flex;
  gap: 18px;
  font-size: 0.95rem;
  color: var(--ink-500);
}

.nav-links a:hover {
  color: var(--ink-900);
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--brand-700);
  color: var(--white);
  box-shadow: 0 18px 35px rgba(31, 69, 216, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-outline {
  border-color: var(--brand-200);
  color: var(--brand-900);
  background: var(--white);
}

.btn-outline:hover {
  border-color: var(--brand-500);
}

.hero {
  margin-top: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 36px;
  align-items: center;
  animation: fade-rise 0.8s ease-out both;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(63, 94, 255, 0.12);
  color: var(--brand-900);
  font-size: 0.8rem;
  font-weight: 600;
}

.hero h1 {
  font-size: clamp(2.4rem, 3.6vw, 3.6rem);
  line-height: 1.05;
  margin: 18px 0 16px;
  letter-spacing: -0.02em;
}

.hero p.lead {
  font-size: 1.1rem;
  color: var(--ink-700);
  line-height: 1.65;
  margin-bottom: 24px;
}

.hero-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 24px;
  color: var(--ink-500);
  font-size: 0.95rem;
}

.hero-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}

.hero-card h2 {
  margin: 0 0 14px;
  font-size: 1.1rem;
}

.hero-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  color: var(--ink-700);
}

.hero-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hero-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-200);
  color: var(--brand-900);
  font-size: 0.8rem;
  font-weight: 700;
}

.feature-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feature {
  padding: 22px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(31, 69, 216, 0.12);
  backdrop-filter: blur(6px);
  animation: fade-rise 0.8s ease-out both;
}

.feature:nth-child(2) {
  animation-delay: 0.08s;
}

.feature:nth-child(3) {
  animation-delay: 0.16s;
}

.feature h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.feature p {
  margin: 0;
  color: var(--ink-500);
  line-height: 1.6;
}

.landing-footer {
  margin-top: 72px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(31, 69, 216, 0.1), rgba(63, 94, 255, 0.2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.landing-footer h4 {
  margin: 0;
  font-size: 1.4rem;
}

.landing-footer p {
  margin: 8px 0 0;
  color: var(--ink-500);
}

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .landing-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .landing-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .nav-links {
    flex-wrap: wrap;
  }

  .hero-card {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Start page */
.start {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", "Segoe UI", sans-serif;
  background: #0f1629;
  color: #e2e8f0;
}

.start-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.start-logo img {
  height: 32px;
}

.start-signin {
  color: #94a3b8;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.start-signin:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.start-main {
  flex: 1;
  padding: 0 48px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.start-hero {
  padding: 80px 0 60px;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.start-eyebrow {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #60a5fa;
  margin: 0 0 16px;
}

.start-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 20px;
  color: #fff;
  letter-spacing: -0.02em;
}

.start-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #94a3b8;
  margin: 0 0 32px;
}

.start-cta {
  display: inline-block;
  padding: 14px 28px;
  background: #fff;
  color: #0f1629;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.start-cta:hover {
  background: #e2e8f0;
}

.start-problems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 40px 0 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.start-problem {
  padding: 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.start-problem-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 10px;
  color: #60a5fa;
  margin-bottom: 18px;
}

.start-problem h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}

.start-problem p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

.start-features {
  padding: 60px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.start-features h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 32px;
  text-align: center;
}

.start-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.start-feature {
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.start-feature-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #60a5fa;
  margin-bottom: 10px;
}

.start-feature p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0;
}

.start-bottom {
  padding: 60px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.start-bottom h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}

.start-bottom p {
  color: #94a3b8;
  margin: 0 0 28px;
  font-size: 1.05rem;
}

.start-footer {
  padding: 24px 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .start-header {
    padding: 20px 24px;
  }

  .start-main {
    padding: 0 24px;
  }

  .start-hero {
    padding: 60px 0 40px;
  }

  .start-problems {
    grid-template-columns: 1fr;
  }

  .start-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .start-footer {
    padding: 20px 24px;
  }
}

@media (max-width: 600px) {
  .start-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Pricing page ── */

.pricing-main {
  flex: 1;
  padding: 0 48px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.pricing-hero {
  padding: 64px 0 48px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.pricing-hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -0.02em;
}

.pricing-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

/* Cards */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-bottom: 80px;
}

.pricing-card {
  position: relative;
  padding: 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}

.pricing-card--popular {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.3);
}

.pricing-card--current {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.04);
}

.pricing-card-cta--disabled {
  display: block;
  text-align: center;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  background: #e5e7eb;
  color: #9ca3af;
  cursor: default;
}

[data-theme="dark"] .pricing-card--current {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.06);
}

[data-theme="dark"] .pricing-card-cta--disabled {
  background: #21262d;
  color: #6b7280;
}

/* Pricing cards inside settings (light background context) */
.settings-card .pricing-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.settings-card .pricing-card--popular {
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.25);
}
.settings-card .pricing-card--current {
  background: rgba(34, 197, 94, 0.04);
  border-color: rgba(34, 197, 94, 0.35);
}
.settings-card .pricing-card-header h3 {
  color: #1e293b;
}
.settings-card .pricing-amount {
  color: #1e293b;
}
.settings-card .pricing-card-tagline {
  color: #64748b;
}
.settings-card .pricing-card-features li {
  color: #475569;
}
.settings-card .pricing-card-features li::before {
  color: #3b82f6;
}
.settings-card .pricing-card-cta {
  border-color: #d1d5db;
  color: #374151;
}
.settings-card .pricing-card-cta:hover {
  border-color: #9ca3af;
  background: #f1f5f9;
}
.settings-card .pricing-card-cta--primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
.settings-card .pricing-card-cta--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

[data-theme="dark"] .settings-card .pricing-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .settings-card .pricing-card--popular {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.3);
}
[data-theme="dark"] .settings-card .pricing-card--current {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.3);
}
[data-theme="dark"] .settings-card .pricing-card-header h3 {
  color: #e6edf3;
}
[data-theme="dark"] .settings-card .pricing-amount {
  color: #e6edf3;
}
[data-theme="dark"] .settings-card .pricing-card-features li {
  color: #8b949e;
}
[data-theme="dark"] .settings-card .pricing-card-cta {
  border-color: #30363d;
  color: #c9d1d9;
}
[data-theme="dark"] .settings-card .pricing-card-cta:hover {
  border-color: #484f58;
  background: #21262d;
}

.pricing-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #3b82f6;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

.pricing-card-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
}

.pricing-card-tagline {
  font-size: 0.9rem;
  color: #94a3b8;
  margin: 0 0 20px;
}

.pricing-card-price {
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.pricing-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pricing-period {
  font-size: 0.95rem;
  color: #64748b;
}

.pricing-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 28px;
}

.pricing-card-features li {
  font-size: 0.9rem;
  color: #cbd5e1;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.pricing-card-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #60a5fa;
  font-weight: 600;
  font-size: 0.85rem;
}

.pricing-card-cta {
  display: block;
  text-align: center;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
}

.pricing-card-cta:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

.pricing-card-cta--primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.pricing-card-cta--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.pricing-card-trial {
  text-align: center;
  font-size: 0.8rem;
  color: #64748b;
  margin: 10px 0 0;
}

/* Comparison table */
.pricing-comparison {
  padding: 64px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pricing-comparison h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 32px;
  text-align: center;
}

.pricing-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.pricing-table thead th {
  text-align: center;
  padding: 12px 16px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-table thead th:first-child {
  text-align: left;
}

.pricing-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  text-align: center;
}

.pricing-table td:first-child {
  text-align: left;
  color: #94a3b8;
}

.pricing-table-section td {
  font-weight: 600;
  color: #60a5fa !important;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-check {
  color: #34d399;
  display: inline-block;
  vertical-align: middle;
}

.pricing-dash {
  color: #334155;
  font-size: 0.85rem;
}

/* FAQ */
.pricing-faq {
  padding: 64px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 700px;
  margin: 0 auto;
}

.pricing-faq h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 32px;
  text-align: center;
}

.pricing-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pricing-faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pricing-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  gap: 16px;
}

.pricing-faq-trigger:hover {
  color: #fff;
}

.pricing-faq-icon {
  font-size: 1.25rem;
  color: #64748b;
  flex-shrink: 0;
  line-height: 1;
}

.pricing-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}

.pricing-faq-answer--open {
  max-height: 200px;
  padding-bottom: 16px;
}

.pricing-faq-answer p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #94a3b8;
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .pricing-main {
    padding: 0 24px;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .pricing-hero {
    padding: 48px 0 36px;
  }

  .pricing-table {
    font-size: 0.8rem;
  }

  .pricing-table thead th,
  .pricing-table td {
    padding: 8px 10px;
  }
}

/* ── Features page ── */

.features-main {
  flex: 1;
  padding: 0 48px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.features-hero {
  padding: 64px 0 48px;
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.features-hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -0.02em;
}

.features-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

.features-section {
  padding: 48px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.features-section-header {
  margin-bottom: 28px;
}

.features-section-header h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}

.features-section-header p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.features-item {
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.features-item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 10px;
  color: #60a5fa;
  margin-bottom: 14px;
  font-size: 1.1rem;
}

.features-item h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}

.features-item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

.features-cta {
  padding: 60px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.features-cta h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}

.features-cta p {
  color: #94a3b8;
  margin: 0 0 28px;
  font-size: 1.05rem;
}

@media (max-width: 900px) {
  .features-main {
    padding: 0 24px;
  }

  .features-hero {
    padding: 48px 0 36px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* Auth pages - dark theme */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "Inter", "Segoe UI", sans-serif;
  background: #0f1629;
  color: #e2e8f0;
  position: relative;
  overflow: hidden;
}

.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
}

.auth-orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(16, 185, 129, 0.3);
  top: -100px;
  left: -100px;
  animation: auth-float 8s ease-in-out infinite;
}

.auth-orb-2 {
  width: 300px;
  height: 300px;
  background: rgba(59, 130, 246, 0.25);
  top: 50%;
  right: -50px;
  animation: auth-float 10s ease-in-out infinite reverse;
}

.auth-orb-3 {
  width: 250px;
  height: 250px;
  background: rgba(139, 92, 246, 0.2);
  bottom: -50px;
  left: 30%;
  animation: auth-float 12s ease-in-out infinite;
}

.auth-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

@keyframes auth-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, 20px); }
}

.auth-box {
  position: relative;
  z-index: 10;
  width: min(420px, 100%);
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 36px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.auth-box-success {
  transform: scale(1.02);
  border-color: rgba(16, 185, 129, 0.4);
}

.auth-shake {
  animation: auth-shake-anim 0.4s ease;
}

@keyframes auth-shake-anim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.auth-logo img {
  height: 40px;
}

.auth-header {
  text-align: center;
  margin-bottom: 28px;
}

.auth-icon-error {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  color: #f87171;
}

.auth-header h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}

.auth-header p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.95rem;
}

.auth-error {
  padding: 14px 16px;
  margin-bottom: 20px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 0.9rem;
}

.auth-error-link {
  display: block;
  margin-top: 8px;
  color: #10b981;
}

.auth-info {
  padding: 14px 16px;
  margin-bottom: 20px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  color: #93c5fd;
  font-size: 0.9rem;
}

.auth-field {
  margin-bottom: 20px;
}

.auth-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.auth-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.auth-field-header label {
  margin-bottom: 0;
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input::placeholder {
  color: #64748b;
}

.auth-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.auth-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #64748b;
}

.auth-field-error {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #fca5a5;
}

.auth-email-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #cbd5e1;
}

.auth-email-display svg {
  flex-shrink: 0;
}

.auth-email-display span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-change-btn {
  background: none;
  border: none;
  color: #10b981;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.auth-change-btn:hover {
  color: #34d399;
}

.auth-forgot {
  color: #10b981;
  font-size: 0.85rem;
  text-decoration: none;
}

.auth-forgot:hover {
  color: #34d399;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.auth-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #10b981;
}

.auth-remember label {
  font-size: 0.9rem;
  color: #94a3b8;
  cursor: pointer;
}

.auth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: #10b981;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}

.auth-btn:hover {
  background: #059669;
}

.auth-btn:disabled {
  background: #374151;
  cursor: not-allowed;
}

.auth-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 0.9rem;
  color: #94a3b8;
}

.auth-footer a {
  color: #10b981;
  text-decoration: none;
}

.auth-footer a:hover {
  color: #34d399;
}

@media (max-width: 480px) {
  .auth-box {
    padding: 28px 24px;
  }

  .auth-header h1 {
    font-size: 1.3rem;
  }
}

/* Dashboard */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  font-family: "Inter", "Segoe UI", sans-serif;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.card-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.card-icon {
  width: 20px;
  height: 20px;
}

.card-icon-red { color: #ef4444; }
.card-icon-blue { color: #3b82f6; }
.card-icon-green { color: #10b981; }
.card-icon-amber { color: #f59e0b; }
.card-icon-cyan { color: #06b6d4; }

.card-body {
  padding: 16px 20px;
}

.card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
}

.card-empty svg {
  width: 40px;
  height: 40px;
  color: #10b981;
  margin-bottom: 12px;
}

.card-empty p {
  margin: 0;
  color: #6b7280;
  font-size: 0.9rem;
}

/* Tables */
.table-container {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.table th {
  padding: 8px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7280;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.table td {
  padding: 8px 16px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

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

.table tbody tr:hover {
  background: #f9fafb;
}

[data-theme="dark"] .table th {
  color: #9ca3af;
  background: #1f2937;
  border-bottom-color: #374151;
}

[data-theme="dark"] .table td {
  color: #d1d5db;
  border-bottom-color: #1f2937;
}

[data-theme="dark"] .table tbody tr:hover {
  background: #1f2937;
}

/* Admin dashboard */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.stat-label {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 2px;
}

[data-theme="dark"] .stat-value {
  color: #f3f4f6;
}

[data-theme="dark"] .stat-label {
  color: #9ca3af;
}

/* Ticket list */
.ticket-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid #f3f4f6;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.ticket-item:last-child {
  border-bottom: none;
}

.ticket-item:hover {
  background: #f9fafb;
}

.ticket-info {
  min-width: 0;
  flex: 1;
}

.ticket-name {
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-project {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  background: #ecfdf5;
  color: #047857;
  border-radius: 4px;
}

.ticket-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ticket-status {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  background: #f0fdf4;
  color: #15803d;
  border-radius: 6px;
}

.ticket-due {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  background: #f3f4f6;
  color: #4b5563;
  border-radius: 6px;
}

.ticket-due-overdue {
  background: #fef2f2;
  color: #dc2626;
}

/* Birthday stories */
.birthday-stories {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px;
}

.birthday-story {
  flex-shrink: 0;
  width: 100px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.birthday-story:hover {
  background: #f3f4f6;
}

.birthday-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
}

.birthday-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #6366f1);
}

.birthday-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: #4b5563;
}

.birthday-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ec4899;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.birthday-badge svg {
  width: 14px;
  height: 14px;
  color: #fff;
}

.birthday-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.birthday-date {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
}

.birthday-age {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-top: 1px;
}

/* Charts */
.chart-container {
  padding: 16px;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #4b5563;
}

.chart-legend-line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
}

.chart-legend-line-amber { background: #f59e0b; }
.chart-legend-line-red { background: repeating-linear-gradient(to right, #f87171, #f87171 3px, transparent 3px, transparent 6px); }

/* Heatmap */
.heatmap-container {
  overflow-x: auto;
  padding-bottom: 8px;
}

.heatmap {
  display: flex;
  gap: 3px;
}

.heatmap-week {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.heatmap-day {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.heatmap-day-empty { background: transparent; }
.heatmap-day-0 { background: #f3f4f6; }
.heatmap-day-1 { background: #fde68a; }
.heatmap-day-2 { background: #fbbf24; }
.heatmap-day-3 { background: #f59e0b; }
.heatmap-day-today { box-shadow: 0 0 0 2px #ef4444; }

.heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.75rem;
  color: #6b7280;
}

.heatmap-legend-colors {
  display: flex;
  gap: 3px;
}

/* App Layout */
.app-layout {
  display: flex;
  height: 100vh;
  background: #f4f5f7;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Sidebar */
.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 220px;
  background: linear-gradient(180deg, #fdfdfe 0%, #f9fafb 100%);
  border-right: none;
  box-shadow: 1px 0 0 #e8eaed, 4px 0 16px rgba(17, 20, 34, 0.04);
}

.sidebar-team {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-team-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease-out;
  font-family: inherit;
}

.sidebar-team-btn:hover {
  background: rgba(17, 20, 34, 0.05);
}

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #b0b8c8;
  cursor: pointer;
  transition: all 0.15s ease-out;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: rgba(17, 20, 34, 0.05);
  color: var(--ink-500);
}

.sidebar-collapse-btn svg {
  width: 16px;
  height: 16px;
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar.collapsed .sidebar-team-btn {
  display: none;
}

.sidebar.collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-nav {
  padding: 0;
}

.sidebar.collapsed .sidebar-nav-list {
  gap: 0;
}

.sidebar.collapsed .sidebar-nav-item {
  justify-content: center;
  padding: 12px 0;
  border-radius: 0;
}

.sidebar.collapsed .sidebar-nav-item::before {
  display: none;
}

.sidebar.collapsed .sidebar-nav-item span {
  display: none;
}

.sidebar.collapsed .sidebar-user {
  padding: 6px 0;
}

.sidebar.collapsed .sidebar-user-btn {
  justify-content: center;
  padding: 10px 0;
  border-radius: 0;
}

.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed .sidebar-team-chevron {
  display: none;
}

.sidebar-team-avatar {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(62, 100, 255, 0.3);
}

.sidebar-team-name {
  flex: 1;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.sidebar-team-chevron {
  width: 14px;
  height: 14px;
  color: #b0b8c8;
}

/* Sidebar Dropdown */
.sidebar-dropdown {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 54px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow:
    0 4px 6px -1px rgba(17, 20, 34, 0.07),
    0 12px 24px -4px rgba(17, 20, 34, 0.12);
  z-index: 100;
  display: none;
}

.sidebar-dropdown.open {
  display: block;
}

.sidebar-dropdown-section {
  padding: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-dropdown-section:last-child {
  border-bottom: none;
}

.sidebar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--ink-500);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-out;
  font-family: inherit;
  text-align: left;
}

.sidebar-dropdown-item:hover {
  background: rgba(17, 20, 34, 0.05);
  color: var(--ink-900);
}

.sidebar-dropdown-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Sidebar Nav */
.sidebar-nav {
  flex: 1;
  padding: 8px 10px;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
  display: none;
}

.sidebar-nav-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 450;
  color: var(--ink-500);
  text-decoration: none;
  transition: all 0.15s ease-out;
  position: relative;
}

.sidebar-nav-item:hover {
  background: rgba(17, 20, 34, 0.05);
  color: var(--ink-700);
}

.sidebar-nav-item.is-active {
  background: rgba(62, 100, 255, 0.08);
  color: var(--brand-700);
  font-weight: 500;
}

.sidebar-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--brand-500);
  border-radius: 0 2px 2px 0;
}

.sidebar-nav-item.is-active svg {
  color: var(--brand-500);
}

.sidebar-nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.15s ease-out;
}

.sidebar-nav-item:hover svg {
  opacity: 1;
}

.sidebar-nav-item.is-active svg {
  opacity: 1;
}

/* Sidebar Nav Grouping */
.sidebar-nav-item.sidebar-nav-group-start {
  margin-top: 10px;
}

/* Sidebar User */
.sidebar-user {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 6px;
}

.sidebar-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease-out;
  font-family: inherit;
}

.sidebar-user-btn:hover {
  background: rgba(17, 20, 34, 0.05);
}

.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(62, 100, 255, 0.3);
}

.sidebar-user-name {
  flex: 1;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-dropdown {
  position: absolute;
  bottom: 64px;
  left: 10px;
  right: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow:
    0 4px 6px -1px rgba(17, 20, 34, 0.07),
    0 12px 24px -4px rgba(17, 20, 34, 0.12);
  z-index: 100;
  display: none;
}

.sidebar-user-dropdown.show {
  display: block;
}

.sidebar.collapsed .sidebar-user-dropdown {
  left: 64px;
  right: auto;
  bottom: 0;
  width: 200px;
}

/* Main Content */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* App Header */
.app-header {
  position: relative;
  z-index: 10;
  height: 52px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(17, 20, 34, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #b0b8c8;
  text-decoration: none;
  transition: all 0.15s ease-out;
}

.app-header-back:hover {
  background: rgba(17, 20, 34, 0.05);
  color: var(--ink-500);
}

.app-header-back svg {
  width: 15px;
  height: 15px;
}

.app-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--brand-500);
  opacity: 0.7;
}

.app-header-icon svg {
  width: 17px;
  height: 17px;
}

.app-header-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Header Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease-out;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  box-shadow:
    0 1px 2px rgba(5, 150, 105, 0.2),
    0 2px 8px rgba(5, 150, 105, 0.15);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0ea572 0%, #047857 100%);
  box-shadow:
    0 2px 4px rgba(5, 150, 105, 0.25),
    0 4px 12px rgba(5, 150, 105, 0.2);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
}

.btn-secondary {
  background: transparent;
  color: var(--ink-500);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
  background: rgba(17, 20, 34, 0.04);
  color: var(--ink-700);
  border-color: rgba(0, 0, 0, 0.14);
}

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

.btn-danger:hover {
  background: #fef2f2;
}

.btn svg {
  width: 15px;
  height: 15px;
}

.btn-icon {
  padding: 7px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.btn-icon:hover {
  background: rgba(17, 20, 34, 0.05);
  color: var(--ink-700);
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

/* Header Dropdown */
.header-dropdown {
  position: relative;
}

.header-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 160px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow:
    0 4px 6px -1px rgba(17, 20, 34, 0.07),
    0 12px 24px -4px rgba(17, 20, 34, 0.12);
  z-index: 50;
  padding: 5px;
}

.header-dropdown-menu.show {
  display: block;
}

.header-dropdown-item {
  display: block;
  padding: 7px 12px;
  font-size: 0.8125rem;
  color: var(--ink-500);
  text-decoration: none;
  transition: all 0.15s ease-out;
  border-radius: 6px;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-weight: 450;
}

.header-dropdown-item:hover {
  background: rgba(17, 20, 34, 0.05);
  color: var(--ink-900);
}

button.header-dropdown-item {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.header-dropdown-item-danger {
  color: #dc2626;
}

.header-dropdown-item-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* App Content */
.app-content {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: #f3f4f7;
}

/* Mobile Menu */
.mobile-menu-btn {
  display: none;
  padding: 7px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.mobile-menu-btn:hover {
  background: rgba(17, 20, 34, 0.05);
  color: var(--ink-700);
}

.mobile-menu-btn svg {
  width: 18px;
  height: 18px;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
  display: none;
}

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    box-shadow: none;
  }

  .sidebar.is-open {
    transform: translateX(0);
    box-shadow:
      4px 0 24px rgba(17, 20, 34, 0.12),
      1px 0 0 rgba(17, 20, 34, 0.06);
  }

  .mobile-overlay.is-open {
    display: block;
  }

  .mobile-menu-btn {
    display: block;
  }

  .app-header {
    padding: 0 16px;
  }

  .app-content {
    padding: 16px;
  }
}

/* Dropdown Menu (generic) */
.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 140px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow:
    0 4px 6px -1px rgba(17, 20, 34, 0.07),
    0 12px 24px -4px rgba(17, 20, 34, 0.12);
  z-index: 100;
  padding: 5px;
}

.dropdown-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--ink-500);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease-out;
  font-family: inherit;
  border-radius: 6px;
}

.dropdown-menu-item:hover {
  background: rgba(17, 20, 34, 0.05);
  color: var(--ink-900);
}

.dropdown-menu-item:first-child {
  border-radius: 6px;
}

.dropdown-menu-item:last-child {
  border-radius: 6px;
}

/* Settings Page */
.settings-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .settings-page {
    flex-direction: row;
  }
}

.settings-sidebar {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .settings-sidebar {
    width: 220px;
  }
}

.settings-nav {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-nav-item {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  transition: all 0.15s ease;
}

.settings-nav-item:hover {
  background: #f3f4f6;
  color: #111827;
}

.settings-nav-item.is-active {
  background: rgba(62, 100, 255, 0.08);
  color: var(--brand-700);
  border: 1px solid rgba(62, 100, 255, 0.15);
}

.settings-content {
  flex: 1;
  min-width: 0;
}

.settings-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.settings-card + .settings-card {
  margin-top: 24px;
}

.settings-card-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-card-header-text h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.settings-card-header-text p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 4px 0 0 0;
}

.settings-card-body {
  padding: 24px;
}

.settings-card-danger {
  border-color: #fecaca;
}

.settings-card-danger .settings-card-header {
  background: #fef2f2;
  border-bottom-color: #fecaca;
}

.settings-card-danger .settings-card-header h3 {
  color: #7f1d1d;
}

.settings-card-danger .settings-card-header p {
  color: #b91c1c;
}

.settings-danger-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-danger-item h4 {
  font-weight: 500;
  color: #111827;
  margin: 0 0 4px 0;
}

.settings-danger-item p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.settings-danger-item .settings-btn {
  flex-shrink: 0;
}

.settings-deletion-stats {
  background: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.settings-deletion-stats > p {
  font-size: 0.875rem;
  color: #374151;
  margin: 0 0 12px 0;
}

.settings-deletion-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.875rem;
  color: #4b5563;
}

.settings-deletion-stats-grid strong {
  color: #111827;
}

.settings-card-footer {
  padding: 16px 24px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Settings Form */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .settings-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.settings-form-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .settings-form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.settings-field {
  display: flex;
  flex-direction: column;
}

.settings-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.settings-field label .required {
  color: #ef4444;
}

.settings-input,
.settings-select {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111827;
  transition: all 0.15s ease;
  font-family: inherit;
}

.settings-input:focus,
.settings-select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.settings-input::placeholder {
  color: #9ca3af;
}

.settings-input[readonly] {
  background: #f9fafb;
  color: #6b7280;
}

.settings-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 6px;
}

.settings-error {
  font-size: 0.875rem;
  color: #ef4444;
  margin-top: 4px;
}

.settings-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.settings-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #10b981;
}

.settings-checkbox-row label {
  font-size: 0.875rem;
  color: #374151;
  margin: 0;
}

.settings-checkbox-row label span {
  color: #6b7280;
}

/* Settings Version */
.settings-version {
  margin-top: 16px;
  padding: 8px 16px;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Settings Label */
.settings-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

/* Settings Field Error */
.settings-field-error {
  margin-top: 4px;
  font-size: 0.875rem;
  color: #ef4444;
}

/* Settings Info Box */
.settings-info-box {
  margin-bottom: 24px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.settings-info-text {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0;
}

.settings-info-text strong {
  color: #111827;
}

.settings-info-hint {
  margin-top: 4px;
  font-size: 0.875rem;
  color: #9ca3af;
}

/* Settings Success Box */
.settings-success-box {
  margin-bottom: 24px;
  padding: 16px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
}

.settings-success-title {
  color: #047857;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.settings-success-text {
  font-size: 0.875rem;
  color: #059669;
  margin: 0 0 12px 0;
}

.settings-token-display {
  padding: 12px;
  background: #fff;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.875rem;
  word-break: break-all;
  color: #111827;
  margin-bottom: 12px;
}

/* Settings Table */
.settings-table-wrap {
  overflow-x: auto;
}

.settings-table {
  width: 100%;
  border-collapse: collapse;
}

.settings-table-th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
}

.settings-table-th-center {
  text-align: center;
}

.settings-table-th-right {
  text-align: right;
}

.settings-table-row {
  transition: background 0.15s ease;
}

.settings-table-row:not(:last-child) {
  border-bottom: 1px solid #f3f4f6;
}

.settings-table-row:hover {
  background: #f9fafb;
}

.settings-table-td {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: #111827;
}

.settings-table-td-center {
  text-align: center;
}

.settings-table-td-right {
  text-align: right;
}

.settings-table-td-secondary {
  color: #6b7280;
}

/* Settings Checkbox */
.settings-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #10b981;
  cursor: pointer;
}

/* Settings Key Display */
.settings-key-name {
  font-weight: 500;
  color: #111827;
}

.settings-key-uuid {
  font-size: 0.75rem;
  color: #9ca3af;
  font-family: monospace;
}

/* Settings Section */
.settings-section {
  margin-bottom: 24px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 16px 0;
}

/* Settings Inline Form */
.settings-inline-form {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.settings-inline-form-field {
  flex: 1;
}

.settings-inline-form-action {
  padding-top: 24px;
}

/* Settings Details / Accordion */
.settings-details {
  cursor: pointer;
}

.settings-details-summary {
  font-weight: 600;
  font-size: 0.875rem;
  color: #374151;
  user-select: none;
}

.settings-details-content {
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4b5563;
}

.settings-details-intro {
  margin-bottom: 16px;
}

.settings-details-section {
  margin-bottom: 24px;
}

.settings-details-divider {
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.settings-details-heading {
  font-weight: 600;
  color: #047857;
  margin: 0 0 8px 0;
}

.settings-details-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 8px;
}

.settings-details-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.settings-details-steps {
  margin-top: 12px;
}

.settings-details-ol {
  margin: 8px 0 0 20px;
  font-size: 0.75rem;
  list-style: decimal;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-details-tip {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Settings Code */
.settings-code-block {
  margin-top: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.75rem;
  font-family: monospace;
  overflow-x: auto;
  color: #1f2937;
}

.settings-inline-code {
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 4px;
  font-family: monospace;
  font-size: inherit;
  color: #374151;
}

/* Settings Buttons */
.settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.settings-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-btn-primary {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.settings-btn-primary:hover:not(:disabled) {
  background: #d1fae5;
}

.settings-btn-secondary {
  background: #f9fafb;
  color: #4b5563;
  border-color: #e5e7eb;
}

.settings-btn-secondary:hover:not(:disabled) {
  background: #f3f4f6;
  color: #111827;
}

.settings-btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.settings-btn-danger:hover:not(:disabled) {
  background: #fee2e2;
}

.settings-btn-sm {
  padding: 6px 12px;
  border-radius: 8px;
}

.settings-btn-icon {
  padding: 6px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-btn-icon:hover {
  background: #f3f4f6;
  color: #4b5563;
}

.settings-btn-icon.danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.settings-btn-icon svg {
  width: 16px;
  height: 16px;
}

/* Settings Alerts */
.settings-alert {
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.settings-alert svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.settings-alert-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.settings-alert-info svg {
  color: #2563eb;
}

.settings-alert-info p {
  color: #1d4ed8;
  font-size: 0.875rem;
  margin: 0;
}

.settings-alert-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.settings-alert-success svg {
  color: #059669;
}

.settings-alert-success p {
  color: #047857;
  font-size: 0.875rem;
  margin: 0;
}

.settings-alert-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.settings-alert-warning svg {
  color: #d97706;
}

.settings-alert-warning p {
  color: #b45309;
  font-size: 0.875rem;
  margin: 0;
}

.settings-alert p strong {
  font-weight: 600;
}

/* Settings Members */
.settings-members-list {
  divide: 1px solid #f3f4f6;
}

.settings-member-row {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s ease;
}

.settings-member-row:last-child {
  border-bottom: none;
}

.settings-member-row:hover {
  background: #f9fafb;
}

.settings-member-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.875rem;
  border: 1px solid;
}

.settings-member-avatar.active {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.settings-member-avatar.virtual {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
}

.settings-member-avatar.pending {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.settings-member-details p {
  margin: 0;
}

.settings-member-details .name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-member-details .email {
  font-size: 0.875rem;
  color: #6b7280;
}

.settings-member-details .meta {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 2px;
}

.settings-member-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Settings Badges */
.settings-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid;
}

.settings-badge-gray {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
}

.settings-badge-green {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.settings-badge-blue {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.settings-badge-purple {
  background: #faf5ff;
  color: #7c3aed;
  border-color: #ddd6fe;
}

.settings-badge-clickable {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.settings-badge-clickable:hover {
  opacity: 0.8;
}

/* Settings Role Dropdown */
.settings-role-dropdown {
  position: relative;
}

.settings-role-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  width: 176px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 20;
  padding: 4px 0;
  display: none;
}

.settings-role-menu.is-open {
  display: block;
}

.settings-role-menu-header {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.settings-role-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: #374151;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}

.settings-role-menu-item:hover {
  background: #f9fafb;
}

.settings-role-menu-item.is-active {
  background: #f9fafb;
  font-weight: 500;
  color: #111827;
}

.settings-role-menu-item svg {
  width: 16px;
  height: 16px;
  color: #10b981;
}

/* Settings Invitation */
.settings-invitation {
  padding: 24px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s ease;
}

.settings-invitation:last-child {
  border-bottom: none;
}

.settings-invitation:hover {
  background: #f9fafb;
}

.settings-invitation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.settings-invitation-link {
  margin-top: 12px;
}

.settings-invitation-link label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  margin-bottom: 6px;
}

.settings-invitation-link-row {
  display: flex;
  gap: 8px;
}

.settings-invitation-link-row input {
  flex: 1;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: ui-monospace, monospace;
  color: #4b5563;
}

/* Settings Empty State */
.settings-empty {
  padding: 48px;
  text-align: center;
}

.settings-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-empty-icon svg {
  width: 32px;
  height: 32px;
  color: #d1d5db;
}

.settings-empty h3 {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin: 0 0 8px 0;
}

.settings-empty p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 24px 0;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Settings Invite Form */
.settings-invite-form {
  padding: 24px;
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
}

/* Settings Logo */
.settings-logo-current {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}

.settings-logo-preview {
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.settings-logo-preview img {
  max-height: 96px;
  max-width: 200px;
  object-fit: contain;
}

.settings-upload-zone {
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-upload-zone:hover {
  border-color: #10b981;
}

.settings-upload-zone svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: #d1d5db;
}

.settings-upload-zone p {
  margin: 0 0 4px 0;
  color: #4b5563;
}

.settings-upload-zone p span {
  color: #059669;
  font-weight: 500;
}

.settings-upload-zone .hint {
  font-size: 0.875rem;
  color: #9ca3af;
}

.settings-upload-progress {
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-top: 16px;
}

.settings-upload-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.settings-upload-progress-header span {
  font-size: 0.875rem;
}

.settings-upload-progress-header span:first-child {
  font-weight: 500;
  color: #111827;
}

.settings-upload-progress-header span:last-child {
  color: #6b7280;
}

.settings-upload-progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.settings-upload-progress-bar-fill {
  height: 100%;
  background: #10b981;
  transition: width 0.3s ease;
}

/* Settings Permissions */
.settings-permissions-section {
  margin-bottom: 32px;
}

.settings-permissions-section:last-child {
  margin-bottom: 0;
}

.settings-permissions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.settings-permissions-header .role-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-permissions-header .role-info span {
  font-size: 0.875rem;
  color: #6b7280;
}

.settings-permissions-resource {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.settings-permissions-resource:last-child {
  margin-bottom: 0;
}

.settings-permissions-resource h4 {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  margin: 0 0 12px 0;
  text-transform: capitalize;
}

.settings-permissions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-permission-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  background: transparent;
}

.settings-permission-toggle:disabled {
  cursor: default;
}

.settings-permission-toggle.is-enabled {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.settings-permission-toggle.is-disabled {
  background: #f9fafb;
  color: #6b7280;
  border-color: #e5e7eb;
}

.settings-permission-toggle:not(:disabled):hover {
  opacity: 0.8;
}

.settings-permission-toggle svg {
  width: 16px;
  height: 16px;
}

/* Flash/Toast Notifications */
.flash {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-width: 384px;
  transition: all 0.3s ease-out;
  border: 1px solid;
}

.flash-info {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.flash-error {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.flash-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.flash-info .flash-icon {
  color: #10b981;
}

.flash-error .flash-icon {
  color: #ef4444;
}

.flash-content {
  flex: 1;
}

.flash-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 2px 0;
}

.flash-message {
  font-size: 0.875rem;
  margin: 0;
}

.flash-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

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

.flash-close svg {
  width: 16px;
  height: 16px;
}

/* Dialog/Modal */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background: transparent;
  border: none;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.dialog[open] {
  display: flex;
}

.dialog-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.dialog-panel {
  position: relative;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}

.dialog-panel-sm {
  max-width: 384px;
}

.dialog-panel-md {
  max-width: 448px;
}

.dialog-panel-lg {
  max-width: 512px;
}

.dialog-panel-xl {
  max-width: 576px;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}

.dialog-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.dialog-close {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #9ca3af;
  transition: color 0.15s ease;
}

.dialog-close:hover {
  color: #4b5563;
}

.dialog-close svg {
  width: 20px;
  height: 20px;
}

.dialog-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.dialog-body p {
  margin: 0;
  color: #4b5563;
}

.dialog-body p strong {
  color: #111827;
}

.dialog-text {
  margin: 0;
  color: #4b5563;
}

.dialog-text strong {
  color: #111827;
}

.dialog-text-muted {
  margin: 8px 0 0 0;
  font-size: 0.875rem;
  color: #9ca3af;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #f3f4f6;
  flex-shrink: 0;
}

/* ==========================================================================
   Contacts Page
   ========================================================================== */

/* View Toggle */
.contacts-view-toggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.contacts-toggle-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 10px;
}

.contacts-toggle-btn {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.contacts-toggle-btn:hover {
  color: #111827;
}

.contacts-toggle-btn.is-active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Contacts Grid */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .contacts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .contacts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Contact Card */
.contact-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.contact-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.contact-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.contact-avatar-sm {
  width: 36px;
  height: 36px;
  font-size: 0.875rem;
}

.contact-card-info {
  flex: 1;
  min-width: 0;
}

.contact-card-name {
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.contact-card-company {
  font-size: 0.875rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 4px 0 0 0;
}

.contact-card-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #6b7280;
}

.contact-detail-row svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  flex-shrink: 0;
}

.contact-detail-row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Contacts Empty State */
.contacts-empty {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 48px;
}

.contacts-empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.contacts-empty-content svg {
  width: 48px;
  height: 48px;
  color: #d1d5db;
  margin-bottom: 16px;
}

.contacts-empty-content p {
  margin: 0;
}

.contacts-empty-content .title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 4px;
}

.contacts-empty-content .subtitle {
  font-size: 0.875rem;
  color: #9ca3af;
}

/* Corporations List */
.corporations-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.corporation-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.corporation-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background 0.15s ease;
}

.corporation-card-header:hover {
  background: #f9fafb;
}

.corporation-card-header h3 {
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.corporation-contact-count {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  background: #ecfdf5;
  color: #047857;
  border-radius: 9999px;
}

.corporation-contacts {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 640px) {
  .corporation-contacts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .corporation-contacts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.corporation-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.corporation-contact-item:hover {
  background: #f3f4f6;
}

.corporation-contact-info {
  flex: 1;
  min-width: 0;
}

.corporation-contact-info .name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.corporation-contact-info .position {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 0 0;
}

.corporation-no-contacts {
  padding: 16px 20px;
  font-size: 0.875rem;
  color: #9ca3af;
}

/* ==========================================================================
   Drawer (Side Panel)
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 28rem;
}

.drawer-panel-lg {
  max-width: 32rem;
}

.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.drawer-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.drawer-close {
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawer-close:hover {
  background: #f3f4f6;
  color: #6b7280;
}

.drawer-close svg {
  width: 20px;
  height: 20px;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.drawer-section {
  margin-bottom: 24px;
}

.drawer-section:last-child {
  margin-bottom: 0;
}

.drawer-section-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.drawer-section-border {
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.drawer-dl {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-dl-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.drawer-dl-row dt {
  font-size: 0.875rem;
  color: #6b7280;
}

.drawer-dl-row dd {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
  text-align: right;
}

.drawer-dl-row dd a {
  color: #059669;
  text-decoration: none;
  transition: color 0.15s ease;
}

.drawer-dl-row dd a:hover {
  color: #047857;
}

.drawer-dl-row dd .meta {
  color: #6b7280;
  font-weight: 400;
  margin-left: 4px;
}

.drawer-address {
  font-size: 0.875rem;
  color: #111827;
}

.drawer-address p {
  margin: 0 0 4px 0;
}

.drawer-address p:last-child {
  margin-bottom: 0;
}

.drawer-address .country {
  color: #6b7280;
}

.drawer-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
}

.drawer-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.drawer-footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s ease;
  font-family: inherit;
  border: 1px solid;
  cursor: pointer;
}

.drawer-footer-btn svg {
  width: 16px;
  height: 16px;
}

.drawer-footer-btn-secondary {
  background: #f9fafb;
  color: #374151;
  border-color: #e5e7eb;
}

.drawer-footer-btn-secondary:hover {
  background: #f3f4f6;
  color: #111827;
}

.drawer-footer-btn-primary {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.drawer-footer-btn-primary:hover {
  background: #d1fae5;
}

.drawer-footer-btn-full {
  width: 100%;
}

.drawer-badge {
  display: inline-flex;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid;
}

.drawer-badge-cyan {
  background: #ecfeff;
  color: #0e7490;
  border-color: #a5f3fc;
}

/* ==========================================================================
   Contact Form
   ========================================================================== */

/* ==========================================================================
   Form Field Components (Core Components)
   ========================================================================== */

.field-group {
  margin-bottom: 16px;
}

.field-label-block {
  display: block;
}

.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.field-input {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111827;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}

.field-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.field-input::placeholder {
  color: #9ca3af;
}

.field-input.is-error {
  border-color: #f87171;
}

.field-input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

textarea.field-input {
  min-height: 100px;
  resize: vertical;
}

.field-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #4b5563;
}

.field-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  accent-color: #10b981;
}

.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: #dc2626;
  margin-top: 4px;
}

.field-error-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Form Utilities */
.form-required {
  color: #dc2626;
}

.form-error {
  font-size: 0.875rem;
  color: #dc2626;
  margin-top: 4px;
}

.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #4b5563;
}

.form-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  accent-color: #10b981;
}

/* Contact/Corporation Form */
.contact-form-container {
  max-width: 56rem;
  margin: 0 auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .contact-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-form-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.contact-form-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form-card-body h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .contact-form-row-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form-row-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-form-field {
  display: flex;
  flex-direction: column;
}

.contact-form-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.contact-form-input,
.contact-form-select {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111827;
  transition: all 0.15s ease;
  font-family: inherit;
}

.contact-form-input:focus,
.contact-form-select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.contact-form-input::placeholder {
  color: #9ca3af;
}

.contact-form-input.is-verified {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.contact-form-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 6px;
}

.contact-form-success {
  font-size: 0.875rem;
  color: #059669;
  margin-top: 6px;
}

.contact-form-input-group {
  display: flex;
  gap: 8px;
}

.contact-form-input-group .contact-form-input {
  flex: 1;
}

.contact-form-verify-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.contact-form-verify-btn:hover:not(:disabled) {
  background: #d1fae5;
}

.contact-form-verify-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.contact-form-verify-btn svg {
  width: 16px;
  height: 16px;
}

.contact-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
}

.contact-form-actions:has(.contact-form-btn-danger) {
  justify-content: space-between;
}

.contact-form-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-form-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-decoration: none;
}

.contact-form-btn-secondary {
  background: #f9fafb;
  color: #6b7280;
  border-color: #e5e7eb;
}

.contact-form-btn-secondary:hover {
  background: #f3f4f6;
  color: #111827;
}

.contact-form-btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.contact-form-btn-danger:hover {
  background: #fee2e2;
}

.contact-form-btn-primary {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.contact-form-btn-primary:hover {
  background: #d1fae5;
}

/* TIN Verification Section */
.tin-verify-section {
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

/* ==========================================================================
   Data Tables
   ========================================================================== */

.data-table-container {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.data-table-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.data-table-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.data-table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.data-table th.text-right {
  text-align: right;
}

.data-table td {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

.data-table td.text-right {
  text-align: right;
}

.data-table td.font-medium {
  font-weight: 500;
  color: #111827;
}

.data-table td.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.data-table .text-success {
  color: #059669;
}

.data-table tbody tr:hover {
  background: #f9fafb;
}

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

.data-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.data-table-badge {
  display: inline-flex;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.data-table-badge.badge-success {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.data-table-badge.badge-warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}

/* Empty State */
.empty-state {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 48px 24px;
}

.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-icon svg {
  width: 32px;
  height: 32px;
  color: #9ca3af;
}

.empty-state h3 {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin: 0 0 8px 0;
}

.empty-state p {
  color: #6b7280;
  margin: 0 0 24px 0;
}

/* Action Buttons (for tables) */
.btn-table {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  font-family: inherit;
}

.btn-table-secondary {
  background: #f9fafb;
  color: #6b7280;
  border-color: #e5e7eb;
}

.btn-table-secondary:hover {
  background: #f3f4f6;
  color: #111827;
}

.btn-table-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.btn-table-danger:hover {
  background: #fee2e2;
}

/* Delete Modal Warning */
.delete-warning {
  padding: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}

.delete-warning p {
  font-size: 0.875rem;
  color: #dc2626;
  margin: 0;
}

/* ==========================================================================
   Card Grids (Banks, etc.)
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: background-color 0.15s ease;
}

.card-item:hover {
  background: #f9fafb;
}

.card-item-body {
  padding: 20px;
}

.card-item-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.card-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #ecfdf5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-item-icon svg {
  width: 24px;
  height: 24px;
  color: #059669;
}

.card-item-info {
  flex: 1;
  min-width: 0;
}

.card-item-info h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-item-info .card-item-code {
  font-size: 0.875rem;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.card-item-details {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-item-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #4b5563;
}

.card-item-detail svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

.card-item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #059669;
  text-decoration: none;
  transition: color 0.15s ease;
}

.card-item-link:hover {
  color: #047857;
}

.card-item-link svg {
  width: 16px;
  height: 16px;
}

.card-item-footer {
  padding: 12px 20px;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ==========================================================================
   Birthday Calendar
   ========================================================================== */

.birthday-container {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Calendar Navigation */
.birthday-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.birthday-nav-btn {
  padding: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.birthday-nav-btn:hover {
  background: #f9fafb;
  color: #111827;
}

.birthday-nav-btn svg {
  width: 20px;
  height: 20px;
}

.birthday-nav h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

/* Calendar Grid */
.birthday-calendar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.birthday-calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #e5e7eb;
}

.birthday-calendar-header-cell {
  padding: 12px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.birthday-calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.birthday-calendar-day {
  min-height: 60px;
  padding: 8px;
  border-bottom: 1px solid #f3f4f6;
  border-right: 1px solid #f3f4f6;
  position: relative;
}

.birthday-calendar-day:nth-child(7n) {
  border-right: none;
}

.birthday-calendar-day.is-empty {
  background: #fafafa;
}

.birthday-calendar-day.is-today {
  background: #ecfdf5;
}

.birthday-calendar-day-number {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

.birthday-calendar-day.is-today .birthday-calendar-day-number {
  color: #059669;
}

.birthday-calendar-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #ec4899;
  border-radius: 50%;
}

/* Birthday List */
.birthday-list {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.birthday-list-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.birthday-list-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.birthday-list-empty {
  padding: 32px;
  text-align: center;
  color: #6b7280;
}

.birthday-list-items {
  divide: 1px solid #e5e7eb;
}

.birthday-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s ease;
}

.birthday-list-item:last-child {
  border-bottom: none;
}

.birthday-list-item:hover {
  background: #f9fafb;
}

.birthday-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.birthday-list-info {
  flex: 1;
  min-width: 0;
}

.birthday-list-info .name {
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.birthday-list-info .date {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 2px 0 0 0;
}

.birthday-list-info .date .age {
  color: #9ca3af;
  margin-left: 4px;
}

/* Spinner animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

/* Toggle Switch */
.toggle-group {
  position: relative;
  display: inline-flex;
  border-radius: 12px;
  background: #f3f4f6;
  padding: 4px;
}

.toggle-group-indicator {
  position: absolute;
  inset-block: 4px;
  left: 4px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-out;
}

.toggle-group-btn {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s;
}

.toggle-group-btn:hover {
  color: #374151;
}

.toggle-group-btn.active {
  color: #111827;
}

.toggle-group-btn svg {
  width: 16px;
  height: 16px;
}

/* Project Cards */
.project-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 16px;
  text-decoration: none;
  transition: all 0.2s;
}

.project-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.project-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.project-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.project-card-info {
  flex: 1;
  min-width: 0;
}

.project-card-info h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card-info p {
  margin: 4px 0 0 0;
  font-size: 0.875rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-card-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #6b7280;
}

.project-card-owner svg {
  width: 16px;
  height: 16px;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid;
}

.status-badge-active {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.status-badge-pending {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}

.status-badge-on-hold {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fdba74;
}

.status-badge-completed {
  background: #f0f9ff;
  color: #0369a1;
  border-color: #7dd3fc;
}

.status-badge-default {
  background: #f9fafb;
  color: #4b5563;
  border-color: #e5e7eb;
}

/* Filter header */
.filter-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

/* Project Show Header */
.project-show-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .project-show-header {
    flex-wrap: nowrap;
  }
}

/* Swimlane View */
.swimlane-container {
  overflow-x: auto;
}

.swimlane-columns {
  display: flex;
  gap: 16px;
  min-width: max-content;
  padding-bottom: 16px;
}

.swimlane-column {
  width: 288px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.swimlane-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.swimlane-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.swimlane-column-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
}

.swimlane-column-count {
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #6b7280;
}

.swimlane-add-btn {
  padding: 6px;
  border-radius: 8px;
  color: #9ca3af;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.swimlane-add-btn:hover {
  color: #4b5563;
  background: #f3f4f6;
}

.swimlane-add-btn svg {
  width: 16px;
  height: 16px;
}

.swimlane-dropzone {
  padding: 8px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.swimlane-dropzone-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* Swimlane Ticket Card */
.swimlane-card {
  display: block;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.swimlane-card:hover {
  background: #f3f4f6;
}

.swimlane-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.swimlane-card-id {
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
}

.swimlane-card-title {
  margin: 0 0 8px 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.swimlane-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.swimlane-card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
}

.swimlane-card-due {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #9ca3af;
}

.swimlane-card-due svg {
  width: 12px;
  height: 12px;
}

/* Swimlane Drag and Drop */
.swimlane-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.swimlane-dropzone.drag-over {
  background: #ecfdf5;
  border: 2px dashed #10b981;
  border-radius: 8px;
}

.swimlane-dropzone.drag-over .swimlane-card {
  pointer-events: none;
}

/* Gantt Chart Styles */
.gantt-container {
  display: flex;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.gantt-sidebar {
  flex-shrink: 0;
  width: 250px;
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
}

.gantt-sidebar-header {
  display: flex;
  align-items: flex-end;
  padding: 0 16px 12px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}

.gantt-sidebar-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gantt-sidebar-rows {
  overflow-y: auto;
}

.gantt-sidebar-row {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #f3f4f6;
}

.gantt-milestone-label-row {
  background: #f9fafb;
}

.gantt-milestone-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-ticket-label-row {
  background: #fff;
}

.gantt-ticket-label {
  font-size: 0.8125rem;
  color: #4b5563;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.gantt-ticket-label:hover {
  color: #059669;
}

.gantt-timeline-wrapper {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

.gantt-chart {
  display: block;
}

.gantt-header-bg {
  fill: #f3f4f6;
}

.gantt-month-label {
  font-size: 12px;
  font-weight: 600;
  fill: #374151;
}

.gantt-day-label {
  font-size: 10px;
  fill: #9ca3af;
  text-anchor: middle;
}

.gantt-row-bg {
  fill: transparent;
}

.gantt-milestone-row-bg {
  fill: #f9fafb;
}

.gantt-ticket-row-bg {
  fill: #fff;
}

.gantt-bar {
  cursor: pointer;
  transition: filter 0.15s;
}

.gantt-bar:hover {
  filter: brightness(1.1);
}

.gantt-milestone-bar {
  fill: #6366f1;
}

.gantt-ticket-bar {
  fill: #10b981;
}

.gantt-bar-link {
  text-decoration: none;
}

.gantt-assignee-avatar {
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 1;
}

.gantt-assignee-initials {
  font-size: 10px;
  font-weight: 600;
  fill: #374151;
}

.gantt-grid-line {
  stroke: #e5e7eb;
  stroke-width: 1;
}

.gantt-friday-line {
  stroke: #f3f4f6;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.gantt-today-marker {
  stroke: #ef4444;
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.gantt-ticket-popover {
  position: absolute;
  z-index: 100;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  padding: 12px;
  min-width: 200px;
  pointer-events: none;
}

.gantt-popover-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gantt-popover-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.gantt-popover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}

.gantt-popover-label {
  color: #6b7280;
}

.gantt-popover-timeline {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.gantt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: #6b7280;
}

.gantt-empty-state h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #374151;
}

.gantt-empty-state p {
  margin: 0;
  font-size: 0.875rem;
}

/* Ticket Status Badge */
.ticket-status-badge {
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

/* List View */
.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.milestone-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.milestone-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.milestone-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.milestone-card-title h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.milestone-card-count {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #6b7280;
}

.milestone-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.milestone-tickets {
  divide-y: 1px solid #f9fafb;
}

.milestone-ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  text-decoration: none;
  transition: background 0.15s;
}

.milestone-ticket-row:hover {
  background: #f9fafb;
}

.milestone-ticket-row:not(:last-child) {
  border-bottom: 1px solid #f9fafb;
}

.milestone-ticket-row:last-child {
  border-radius: 0 0 12px 12px;
}

.milestone-ticket-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.milestone-ticket-id {
  width: 48px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #9ca3af;
}

.milestone-ticket-info h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
}

.milestone-ticket-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.milestone-ticket-assignee {
  display: flex;
  align-items: center;
  gap: 8px;
}

.milestone-ticket-assignee-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
}

.milestone-ticket-assignee-name {
  font-size: 0.875rem;
  color: #6b7280;
}

.milestone-ticket-due {
  font-size: 0.875rem;
  color: #9ca3af;
}

.milestone-empty {
  padding: 32px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

.milestone-empty p {
  margin: 0;
}

.milestone-ticket-list {
  border-top: 1px solid #f3f4f6;
}

.milestone-ticket-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.milestone-ticket-details h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
}

.milestone-ticket-status {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.milestone-ticket-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.milestone-ticket-assignee span {
  font-size: 0.875rem;
  color: #6b7280;
}

.dropdown-container {
  position: relative;
  display: inline-block;
}

.empty-state-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.empty-state-card svg {
  width: 48px;
  height: 48px;
  color: #d1d5db;
  margin-bottom: 16px;
}

.empty-state-card h3 {
  margin: 0 0 4px 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: #4b5563;
}

.empty-state-card p {
  margin: 0;
  font-size: 0.875rem;
  color: #9ca3af;
}

/* Avatar styles */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  flex-shrink: 0;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

/* Icon Button (for dropdown menus) */
.icon-btn {
  padding: 8px;
  border-radius: 8px;
  color: #9ca3af;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.icon-btn:hover {
  color: #4b5563;
  background: #f3f4f6;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.icon-btn-danger {
  color: #ef4444;
}

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

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  right: 0;
  margin-top: 4px;
  width: 128px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
  padding: 4px 0;
}

.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: #374151;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background: #f9fafb;
  color: #111827;
}

/* New Ticket Button */
.new-ticket-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s;
}

.new-ticket-btn:hover {
  background: #d1fae5;
}

.new-ticket-btn svg {
  width: 16px;
  height: 16px;
}

/* ==============================================
   TICKET SHOW PAGE
   ============================================== */

.ticket-show {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ticket-show-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .ticket-show-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.ticket-show-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ticket-show-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Ticket Card */
.ticket-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.ticket-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.ticket-card-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
}

.ticket-card-header-collapsible {
  cursor: pointer;
  user-select: none;
}

.ticket-card-header-collapsible:hover {
  background-color: #f9fafb;
}

.ticket-card-body {
  padding: 20px;
}

.ticket-card-body-spaced {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ticket Buttons */
.ticket-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.ticket-btn-secondary {
  background: #f9fafb;
  color: #374151;
  border-color: #e5e7eb;
}

.ticket-btn-secondary:hover {
  background: #f3f4f6;
  color: #111827;
}

.ticket-btn-primary {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.ticket-btn-primary:hover {
  background: #d1fae5;
}

.ticket-btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.ticket-btn-danger:hover {
  background: #fee2e2;
}

.ticket-btn-warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.ticket-btn-warning:hover {
  background: #fef3c7;
}

.ticket-btn-full {
  width: 100%;
  justify-content: center;
}

.ticket-btn svg {
  width: 16px;
  height: 16px;
}

/* No content placeholder */
.ticket-no-content {
  color: #9ca3af;
  font-style: italic;
}

/* Attachments */
.ticket-attachment-upload {
  margin-bottom: 16px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
}

.ticket-attachment-upload-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  margin-bottom: 8px;
}

.ticket-attachment-upload-name {
  color: #111827;
}

.ticket-attachment-upload-progress {
  color: #6b7280;
}

.ticket-attachment-progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

.ticket-attachment-progress-fill {
  height: 100%;
  background: #10b981;
  border-radius: 9999px;
  transition: width 0.15s;
}

.ticket-attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  transition: background 0.15s;
}

.ticket-attachment-item:hover {
  background: #f3f4f6;
}

.ticket-attachment-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111827;
  text-decoration: none;
  flex: 1;
  min-width: 0;
  transition: color 0.15s;
}

.ticket-attachment-link:hover {
  color: #059669;
}

.ticket-attachment-preview {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.ticket-attachment-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-attachment-icon svg {
  width: 20px;
  height: 20px;
  color: #6b7280;
}

.ticket-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-attachment-delete {
  padding: 6px;
  border-radius: 8px;
  color: #9ca3af;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.15s;
}

.ticket-attachment-delete:hover {
  color: #dc2626;
  background: #fef2f2;
}

.ticket-attachment-delete svg {
  width: 16px;
  height: 16px;
}

/* Empty state */
.ticket-empty-state {
  padding: 32px;
  text-align: center;
}

.ticket-empty-state svg {
  width: 48px;
  height: 48px;
  color: #d1d5db;
  margin: 0 auto 12px;
}

.ticket-empty-state p {
  margin: 0;
  color: #9ca3af;
}

/* Comments */
.ticket-comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ticket-comment {
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
}

.ticket-comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ticket-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.ticket-comment-meta {
  display: flex;
  flex-direction: column;
}

.ticket-comment-author {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.ticket-comment-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

.ticket-comment-body {
  color: #374151;
}

/* Timer Section */
.ticket-timer-display {
  text-align: center;
  padding: 16px 0;
}

.ticket-timer-time {
  font-size: 1.875rem;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: #111827;
}

.ticket-timer-label {
  display: block;
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 8px;
}

.ticket-timer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Ticket Detail Row */
.ticket-detail-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.ticket-detail-btn:hover {
  background: #f3f4f6;
}

.ticket-detail-static {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.ticket-detail-btn svg,
.ticket-detail-static svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

.ticket-detail-text {
  font-size: 0.875rem;
  color: #111827;
}

.ticket-detail-placeholder {
  font-size: 0.875rem;
  color: #9ca3af;
}

.ticket-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* Subscribers */
.ticket-subscriber-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-subscriber {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.ticket-subscriber-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-subscriber-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.ticket-subscriber-avatar-user {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: #fff;
}

.ticket-subscriber-avatar-virtual {
  background: #e5e7eb;
  color: #6b7280;
}

.ticket-subscriber-name {
  font-size: 0.875rem;
  color: #111827;
}

.ticket-subscriber-remove {
  padding: 4px;
  border-radius: 4px;
  color: #9ca3af;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.ticket-subscriber-remove:hover {
  color: #dc2626;
  background: #fef2f2;
}

.ticket-subscriber-remove svg {
  width: 14px;
  height: 14px;
}

.ticket-add-subscriber-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: #6b7280;
  background: transparent;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.ticket-add-subscriber-btn:hover {
  color: #111827;
  background: #f9fafb;
}

.ticket-add-subscriber-btn svg {
  width: 16px;
  height: 16px;
}

/* Virtual badge */
.ticket-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  background: #f3f4f6;
  color: #4b5563;
}

/* Dates section */
.ticket-dates {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.ticket-dates-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ticket-dates-info svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  margin-top: 2px;
}

.ticket-dates-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
}

.ticket-dates-label {
  color: #6b7280;
}

.ticket-dates-value {
  color: #111827;
}

/* Rate dropdown */
.ticket-rate-dropdown {
  position: relative;
}

.ticket-rate-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.ticket-rate-btn:hover {
  background: #f3f4f6;
}

.ticket-rate-btn span {
  font-size: 0.875rem;
  color: #111827;
}

.ticket-rate-btn svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  transition: transform 0.15s;
}

.ticket-rate-btn svg.rotated {
  transform: rotate(180deg);
}

.ticket-rate-menu {
  position: absolute;
  z-index: 20;
  margin-top: 4px;
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.ticket-rate-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.ticket-rate-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.ticket-rate-option:hover {
  background: #f9fafb;
}

.ticket-rate-option.selected {
  background: #f9fafb;
}

.ticket-rate-option-name {
  font-size: 0.875rem;
  color: #111827;
}

.ticket-rate-option-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-rate-option-amount {
  font-size: 0.875rem;
  color: #4b5563;
}

.ticket-rate-option-amount.muted {
  color: #9ca3af;
}

.ticket-rate-option-check {
  width: 16px;
  height: 16px;
  color: #059669;
}

/* Editor Styles */
.editor-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Action Buttons — below blocks */
.editor-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.editor-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: none;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease-out;
  white-space: nowrap;
}

.editor-btn-secondary {
  background: transparent;
  color: var(--ink-500);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.editor-btn-secondary:hover {
  background: rgba(17, 20, 34, 0.04);
  color: var(--ink-700);
  border-color: rgba(0, 0, 0, 0.14);
}

.editor-btn-secondary:active {
  transform: translateY(0);
}

.editor-btn-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  box-shadow:
    0 1px 2px rgba(5, 150, 105, 0.2),
    0 2px 8px rgba(5, 150, 105, 0.15);
}

.editor-btn-primary:hover {
  background: linear-gradient(135deg, #0ea572 0%, #047857 100%);
  box-shadow:
    0 2px 4px rgba(5, 150, 105, 0.25),
    0 4px 12px rgba(5, 150, 105, 0.2);
  transform: translateY(-1px);
}

.editor-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
}

/* Block List */
.editor-blocks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Individual Block Row */
.editor-block {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
  border-radius: 8px;
  transition: background 0.12s ease-out;
}

.editor-block:hover {
  background: rgba(17, 20, 34, 0.025);
}

/* Block Controls — left gutter, always visible at reduced opacity */
.editor-block-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 24px;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 0.15s ease-out;
}

.editor-block:hover .editor-block-controls {
  opacity: 1;
}

/* Control Buttons — +  and ⠿ */
.editor-control-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: #b0b8c8;
  cursor: pointer;
  transition: color 0.15s ease-out, background 0.15s ease-out;
}

.editor-control-btn:hover {
  color: var(--ink-700);
  background: rgba(17, 20, 34, 0.06);
}

.editor-control-btn:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}

.editor-control-btn svg {
  width: 13px;
  height: 13px;
}

.editor-control-btn:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* Block Header — type badge + actions row */
.editor-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  min-height: 22px;
}

.editor-block-type-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  user-select: none;
}

.editor-block-header-actions {
  display: flex;
  gap: 2px;
}

.editor-block-action-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #b0b8c8;
  cursor: pointer;
  transition: color 0.15s ease-out, background 0.15s ease-out;
  opacity: 0;
}

.editor-block:hover .editor-block-action-btn {
  opacity: 1;
}

.editor-block-action-btn:hover {
  color: var(--ink-700);
  background: rgba(17, 20, 34, 0.06);
}

.editor-block-action-btn:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
  opacity: 1;
}

/* Dropdown Menus */
.editor-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 100;
  min-width: 152px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow:
    0 4px 6px -1px rgba(17, 20, 34, 0.07),
    0 12px 24px -4px rgba(17, 20, 34, 0.12);
  padding: 5px;
}

.editor-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 450;
  font-family: inherit;
  color: var(--ink-500);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease-out, color 0.12s ease-out;
}

.editor-menu-item:hover {
  background: rgba(17, 20, 34, 0.05);
  color: var(--ink-900);
}

.editor-menu-item:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}

.editor-menu-item:disabled,
.editor-menu-item.disabled {
  color: #c8cdd8;
  cursor: not-allowed;
}

.editor-menu-item:disabled:hover,
.editor-menu-item.disabled:hover {
  background: transparent;
  color: #c8cdd8;
}

.editor-menu-item-danger {
  color: #dc2626;
}

.editor-menu-item-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.editor-menu-item-danger:disabled,
.editor-menu-item-danger.disabled {
  color: #c8cdd8;
}

.editor-menu-item-danger:disabled:hover,
.editor-menu-item-danger.disabled:hover {
  background: transparent;
  color: #c8cdd8;
}

/* Menu right-aligned variant */
.editor-menu-right {
  left: auto;
  right: 0;
}

/* Menu separator line */
.editor-menu-separator {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 4px 6px;
}

/* Menu section label */
.editor-menu-label {
  padding: 5px 10px 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  user-select: none;
}

/* Menu item icon */
.editor-menu-icon {
  display: inline-flex;
  justify-content: center;
  width: 20px;
  font-size: 0.75rem;
  color: var(--ink-400);
  font-weight: 600;
}

/* Block Content Area */
.editor-block-content {
  flex: 1;
  min-width: 0;
  padding: 2px 4px 2px 0;
}

/* Shared input / select / textarea base */
.editor-input,
.editor-select,
.editor-textarea {
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: "Inter", "Segoe UI", sans-serif;
  color: var(--ink-900);
  line-height: 1.5;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
  appearance: none;
  -webkit-appearance: none;
}

.editor-input::placeholder,
.editor-textarea::placeholder {
  color: #b0b8c8;
}

.editor-input:hover,
.editor-select:hover,
.editor-textarea:hover {
  border-color: #d1d5db;
}

.editor-input:focus,
.editor-select:focus,
.editor-textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(62, 100, 255, 0.1);
}

/* Select — restore arrow */
.editor-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

/* Textarea */
.editor-textarea {
  resize: vertical;
  min-height: 108px;
}

/* Auto-grow paragraph textarea — starts small, grows with content */
.editor-textarea-autogrow {
  min-height: 40px;
  overflow: hidden;
  resize: none;
  field-sizing: content;
}

/* Code Textarea — dark code editor feel */
.editor-textarea-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.65;
  background: #111827;
  color: #e2e8f0;
  border-color: #1f2937;
  border-radius: 8px;
  min-height: 140px;
  caret-color: var(--brand-500);
}

.editor-textarea-code::placeholder {
  color: #4b5563;
}

.editor-textarea-code:hover {
  border-color: #374151;
}

.editor-textarea-code:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(62, 100, 255, 0.15);
}

/* Headline Row — level select + text input side by side */
.editor-headline-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.editor-headline-select {
  flex-shrink: 0;
  width: auto;
  min-width: 62px;
  padding: 9px 28px 9px 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.editor-headline-input {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

/* Link Fields */
.editor-link-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Field Label */
.editor-field-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 5px;
}

/* Link "More options" toggle */
.editor-link-options-toggle {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  font-family: inherit;
  color: var(--ink-400);
  cursor: pointer;
  transition: color 0.15s ease-out;
}

.editor-link-options-toggle:hover {
  color: var(--brand-500);
}

/* Code Block Fields */
.editor-code-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Language selector in code block — compact pill */
.editor-code-fields .editor-select {
  width: auto;
  display: inline-flex;
  padding: 5px 28px 5px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  background-color: #1a2234;
  border-color: #2d3748;
  color: #94a3b8;
  border-radius: 6px;
}

.editor-code-fields .editor-select:hover {
  border-color: #3d4f6b;
}

.editor-code-fields .editor-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(62, 100, 255, 0.15);
}

.editor-code-fields .editor-select option {
  background: #111827;
  color: #e2e8f0;
}

/* Empty State — block type buttons for discoverability */
.editor-empty-hint {
  text-align: center;
  padding: 12px 0 4px;
}

.editor-empty-hint-text {
  font-size: 0.8125rem;
  color: var(--ink-400);
  margin: 0 0 12px;
}

.editor-empty-hint-types {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.editor-empty-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  color: var(--ink-500);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

.editor-empty-type-btn:hover {
  background: rgba(17, 20, 34, 0.03);
  border-color: var(--brand-500);
  color: var(--brand-600);
}

.editor-empty-type-icon {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-400);
}

.editor-empty-type-btn:hover .editor-empty-type-icon {
  color: var(--brand-500);
}

/* ─── Editor Output Styles ─────────────────────────────────────────── */

.editor-output {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editor-paragraph {
  margin: 0;
  color: var(--ink-700);
  line-height: 1.7;
  font-size: 0.9375rem;
  white-space: pre-wrap;
}

.editor-headline {
  margin: 0;
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.editor-h1 {
  font-size: 1.625rem;
  line-height: 1.25;
}

.editor-h2 {
  font-size: 1.3125rem;
  line-height: 1.3;
}

.editor-h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 600;
}

.editor-h4 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
}

.editor-h5 {
  font-size: 0.875rem;
  line-height: 1.45;
  font-weight: 600;
}

.editor-h6 {
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

/* Code Block Output */
.editor-code-block {
  background: #111827;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.editor-code-header {
  display: flex;
  justify-content: flex-end;
  padding: 8px 20px 0;
}

.editor-code-lang-badge {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  color: #64748b;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.editor-code-pre {
  margin: 0;
  padding: 16px 20px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.editor-code-pre::-webkit-scrollbar {
  height: 4px;
}

.editor-code-pre::-webkit-scrollbar-track {
  background: transparent;
}

.editor-code-pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.editor-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: #cbd5e1;
  white-space: pre;
}

/* Link Output */
.editor-link-wrapper {
  display: inline-block;
}

.editor-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-500);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease-out, text-decoration-color 0.15s ease-out;
}

.editor-link:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.editor-link-icon {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s ease-out;
}

.editor-link:hover .editor-link-icon {
  opacity: 1;
}

.editor-link-unconfigured {
  color: #b0b8c8;
  font-style: italic;
  font-size: 0.875rem;
}

.editor-output-unknown {
  padding: 8px 12px;
  background: #fffbeb;
  border-radius: 6px;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 0.8125rem;
}

/* Modal Styles */
.modal-text {
  color: #6b7280;
  margin-bottom: 16px;
}

.modal-text-sm {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-top: 8px;
}

.modal-text-sm-top {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-top: 12px;
}

.modal-text strong {
  color: #111827;
}

.modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-form-group {
  margin-bottom: 16px;
}

.modal-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.modal-label-muted {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 8px;
}

.modal-input,
.modal-select,
.modal-textarea {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111827;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.modal-input::placeholder,
.modal-textarea::placeholder {
  color: #9ca3af;
}

.modal-input:focus,
.modal-select:focus,
.modal-textarea:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.modal-btn-secondary {
  background: #f9fafb;
  color: #4b5563;
  border-color: #e5e7eb;
}

.modal-btn-secondary:hover {
  background: #f3f4f6;
  color: #111827;
}

.modal-btn-primary {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.modal-btn-primary:hover {
  background: #d1fae5;
}

.modal-btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.modal-btn-danger:hover {
  background: #fee2e2;
}

.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status selector in modal */
.modal-status-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
  border: 1px solid #e5e7eb;
  width: 100%;
  text-align: left;
}

.modal-status-option:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.modal-status-option.selected {
  background: #f0fdf4;
  border-color: #86efac;
}

.modal-status-option .ticket-status-dot {
  flex-shrink: 0;
}

.modal-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-status-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #111827;
}

.modal-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 22px;
}

.modal-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 3px 8px;
  border-radius: 4px;
}

.modal-status-tag svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Time blocks table */
.time-blocks-wrapper {
  margin-top: 16px;
}

.time-blocks-table {
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.time-blocks-table table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.time-blocks-table thead tr {
  border-bottom: 1px solid #e5e7eb;
}

.time-blocks-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}

.time-blocks-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

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

.time-blocks-table td {
  padding: 8px 12px;
  color: #374151;
}

.time-blocks-running {
  color: #059669;
}

.time-blocks-delete-btn {
  padding: 4px;
  border-radius: 4px;
  color: #9ca3af;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.time-blocks-delete-btn:hover {
  color: #dc2626;
  background: #fef2f2;
}

.time-blocks-delete-btn svg {
  width: 16px;
  height: 16px;
}

.time-blocks-total {
  text-align: right;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 8px;
}

.time-blocks-total strong {
  color: #111827;
  font-weight: 500;
}

/* Project Members Page */
.members-container {
  max-width: 42rem;
  margin: 0 auto;
}

.members-tabs {
  margin-bottom: 24px;
}

.members-tabs nav {
  display: flex;
  gap: 8px;
}

.members-tab {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s;
}

.members-tab-active {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.members-tab-inactive {
  color: #4b5563;
  border: 1px solid transparent;
}

.members-tab-inactive:hover {
  background: #f3f4f6;
  color: #111827;
}

.members-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.members-empty {
  padding: 48px 20px;
  text-align: center;
}

.members-empty svg {
  width: 48px;
  height: 48px;
  color: #d1d5db;
  margin: 0 auto 16px;
}

.members-empty h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 500;
  color: #4b5563;
}

.members-empty p {
  margin: 0 0 16px 0;
  font-size: 0.875rem;
  color: #9ca3af;
}

.members-list {
  display: flex;
  flex-direction: column;
}

.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.member-row:last-child {
  border-bottom: none;
}

.member-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.member-avatar-user {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: #fff;
}

.member-avatar-virtual {
  background: #e5e7eb;
  color: #6b7280;
}

.member-details {
  display: flex;
  flex-direction: column;
}

.member-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #111827;
}

.member-email {
  font-size: 0.875rem;
  color: #9ca3af;
}

.member-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Role Badges */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid;
}

.role-badge-owner {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.role-badge-member {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.role-badge-viewer {
  background: #f9fafb;
  color: #4b5563;
  border-color: #e5e7eb;
}

.role-badge-custom {
  background: #faf5ff;
  color: #7c3aed;
  border-color: #ddd6fe;
}

.role-badge-clickable {
  cursor: pointer;
  transition: opacity 0.15s;
}

.role-badge-clickable:hover {
  opacity: 0.8;
}

.role-badge svg {
  width: 14px;
  height: 14px;
}

/* Role Dropdown */
.role-dropdown {
  position: relative;
}

.role-dropdown-menu {
  position: absolute;
  right: 0;
  margin-top: 4px;
  width: 176px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 20;
  padding: 4px 0;
}

.role-dropdown-header {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.role-dropdown-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: #374151;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.role-dropdown-option:hover {
  background: #f9fafb;
}

.role-dropdown-option.selected {
  background: #f9fafb;
  color: #111827;
  font-weight: 500;
}

.role-dropdown-option svg {
  width: 16px;
  height: 16px;
  color: #059669;
}

/* Member Remove Button */
.member-remove-btn {
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  background: #f9fafb;
  color: #4b5563;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.member-remove-btn:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

/* Virtual Badge */
.virtual-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: #f3f4f6;
  color: #4b5563;
  border-radius: 4px;
}

/* Statuses Page */
.statuses-container {
  max-width: 72rem;
  margin: 0 auto;
}

.statuses-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
}

.statuses-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .statuses-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .statuses-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.status-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.status-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
}

.status-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-card-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-action-btn {
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
}

.status-action-btn:hover {
  background: #f3f4f6;
  color: #4b5563;
}

.status-action-btn svg {
  width: 16px;
  height: 16px;
}

.status-action-btn-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.status-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-property {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #4b5563;
}

.status-property svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.status-property-empty {
  font-size: 0.875rem;
  color: #9ca3af;
  font-style: italic;
}

/* Status Form */
.status-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.status-form-group {
  display: flex;
  flex-direction: column;
}

.status-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.status-form-label .required {
  color: #ef4444;
}

.status-checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-checkbox-label {
  font-size: 0.875rem;
  color: #374151;
}

.status-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-form-section {
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.status-form-section-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin: 0 0 12px 0;
}

/* Color Swatches */
.color-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  background: #6b7280;
}

.color-swatch svg {
  width: 16px;
  height: 16px;
  color: #fff;
  display: none;
}

.color-swatch.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827;
}

.color-swatch.selected svg {
  display: block;
}

.color-swatch-red { background: #ef4444; }
.color-swatch-orange { background: #f97316; }
.color-swatch-amber { background: #f59e0b; }
.color-swatch-emerald { background: #10b981; }
.color-swatch-cyan { background: #06b6d4; }
.color-swatch-sky { background: #0ea5e9; }
.color-swatch-blue { background: #3b82f6; }
.color-swatch-indigo { background: #6366f1; }
.color-swatch-fuchsia { background: #d946ef; }
.color-swatch-pink { background: #ec4899; }
.color-swatch-slate { background: #64748b; }
.color-swatch-zinc { background: #71717a; }
.color-swatch-gray { background: #6b7280; }

/* Hourly Rates Page */
.rates-container {
  max-width: 72rem;
  margin: 0 auto;
}

.rates-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
}

.rates-table-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.rates-table-wrapper {
  overflow-x: auto;
}

.rates-table {
  width: 100%;
  border-collapse: collapse;
}

.rates-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.rates-table th.text-right {
  text-align: right;
}

.rates-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}

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

.rates-table tbody tr:hover {
  background: #f9fafb;
}

.rates-table td {
  padding: 12px 16px;
  font-size: 0.875rem;
}

.rates-table td.text-right {
  text-align: right;
}

.rate-name {
  font-weight: 500;
  color: #111827;
}

.rate-external {
  color: #6b7280;
}

.rate-type-badge {
  display: inline-flex;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid;
}

.rate-type-primary {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.rate-type-derived {
  background: #f9fafb;
  color: #4b5563;
  border-color: #e5e7eb;
}

.rate-value {
  font-family: ui-monospace, monospace;
  color: #6b7280;
}

.rate-empty {
  color: #9ca3af;
}

.rate-calculated {
  font-family: ui-monospace, monospace;
  font-weight: 500;
  color: #047857;
}

.rate-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.rate-action-btn {
  padding: 6px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rate-action-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.rate-action-btn svg {
  width: 16px;
  height: 16px;
}

.rate-action-btn-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.rate-action-btn-danger:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* Rates Empty State */
.rates-empty-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rates-empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rates-empty-icon svg {
  width: 32px;
  height: 32px;
  color: #d1d5db;
}

.rates-empty-card h3 {
  margin: 0 0 8px 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
}

.rates-empty-card p {
  margin: 0 0 24px 0;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Hourly Rate Form Page */
.rate-form-container {
  max-width: 42rem;
  margin: 0 auto;
}

.rate-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rate-form-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
}

.rate-form-card-header {
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #f3f4f6;
}

.rate-form-card-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.rate-form-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rate-form-field {
  display: flex;
  flex-direction: column;
}

.rate-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.rate-form-label .required {
  color: #ef4444;
}

.rate-form-input,
.rate-form-select {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111827;
  font-family: inherit;
  transition: all 0.15s;
}

.rate-form-input:focus,
.rate-form-select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.rate-form-input::placeholder {
  color: #9ca3af;
}

.rate-form-input-group {
  display: flex;
}

.rate-form-input-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 0.875rem;
  color: #6b7280;
}

.rate-form-input-with-prefix {
  flex: 1;
  border-radius: 0 8px 8px 0;
}

.rate-form-hint {
  margin: 6px 0 0 0;
  font-size: 0.75rem;
  color: #9ca3af;
}

.rate-form-error {
  margin: 4px 0 0 0;
  font-size: 0.875rem;
  color: #dc2626;
}

.rate-form-radio-group {
  display: flex;
  gap: 16px;
}

.rate-form-radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
}

.rate-form-radio {
  width: 16px;
  height: 16px;
  accent-color: #10b981;
}

.rate-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Time Logs Page */
.time-logs-container {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.time-logs-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .time-logs-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.time-logs-summary-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 20px;
}

.time-logs-summary-card h3 {
  margin: 0 0 4px 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: #6b7280;
}

.time-logs-summary-value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #047857;
}

.time-logs-summary-count {
  margin: 4px 0 0 0;
  font-size: 0.875rem;
  color: #9ca3af;
}

.time-logs-view-switcher {
  display: flex;
  align-items: center;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 4px;
}

.time-logs-view-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.time-logs-view-btn:hover {
  color: #111827;
}

.time-logs-view-btn.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.time-logs-view-btn svg {
  width: 16px;
  height: 16px;
}

/* Time Logs Empty State */
.time-logs-empty {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 48px 24px;
  text-align: center;
}

.time-logs-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
}

.time-logs-empty-icon svg {
  width: 48px;
  height: 48px;
  color: #d1d5db;
}

.time-logs-empty h3 {
  margin: 0 0 8px 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
}

.time-logs-empty p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Time Logs Cards View */
.time-logs-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .time-logs-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .time-logs-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.time-log-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.time-log-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.time-log-ticket {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #111827;
}

.time-log-ticket svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

.time-log-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #6b7280;
}

.time-log-user svg {
  width: 16px;
  height: 16px;
}

.time-log-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.time-log-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 4px;
}

.time-log-stat-label svg {
  width: 14px;
  height: 14px;
}

.time-log-stat-value {
  margin: 0;
  font-weight: 500;
  color: #111827;
}

.time-log-card-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #9ca3af;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.time-log-card-date svg {
  width: 16px;
  height: 16px;
}

.time-log-card-description {
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.time-log-card-description p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Time Log Badges */
.time-log-badge {
  display: inline-flex;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid;
}

.time-log-badge-billable {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.time-log-badge-billed {
  background: #f0f9ff;
  color: #0369a1;
  border-color: #bae6fd;
}

.time-log-badge-non-billable {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}

.time-log-badge-default {
  background: #f9fafb;
  color: #4b5563;
  border-color: #e5e7eb;
}

/* Time Logs Table View */
.time-logs-table-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.time-logs-table-wrapper {
  overflow-x: auto;
}

.time-logs-table {
  width: 100%;
  border-collapse: collapse;
}

.time-logs-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e5e7eb;
}

.time-logs-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}

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

.time-logs-table tbody tr:hover {
  background: #f9fafb;
}

.time-logs-table td {
  padding: 12px 16px;
  font-size: 0.875rem;
}

.time-log-table-ticket {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #111827;
}

.time-log-table-ticket svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

.time-log-table-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
}

.time-log-table-user svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

.time-log-table-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
}

.time-log-table-duration svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

.time-log-amount {
  color: #6b7280;
}

.time-log-table-date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
}

.time-log-table-date svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

.time-log-empty {
  color: #9ca3af;
}

.time-log-description {
  color: #6b7280;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-log-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-log-action-btn {
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
}

.time-log-action-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.time-log-action-btn svg {
  width: 16px;
  height: 16px;
}

.time-log-action-btn-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Edit Time Log Modal */
.edit-time-log-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.edit-time-log-field {
  display: flex;
  flex-direction: column;
}

.edit-time-log-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 4px;
}

.edit-time-log-value {
  font-weight: 500;
  color: #111827;
}

.edit-time-blocks-table-wrapper {
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.edit-time-blocks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.edit-time-blocks-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

.edit-time-blocks-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

.edit-time-blocks-table tbody tr:last-child {
  border-bottom: none;
}

.edit-time-blocks-table td {
  padding: 8px 12px;
  color: #6b7280;
}

.edit-time-blocks-total {
  text-align: right;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 8px;
}

.edit-time-blocks-total strong {
  color: #111827;
  font-weight: 500;
}

.edit-time-log-textarea {
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111827;
  font-family: inherit;
  resize: vertical;
  transition: all 0.15s;
}

.edit-time-log-textarea:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.edit-time-log-textarea::placeholder {
  color: #9ca3af;
}

/* Generic Badge System */
.badge {
  display: inline-flex;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid;
}

.badge-gray {
  background: #f9fafb;
  color: #4b5563;
  border-color: #e5e7eb;
}

.badge-blue {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.badge-green {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.badge-red {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.badge-yellow {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}

/* Invoices Page */
.invoices-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.invoices-filters {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 16px;
}

.filters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: end;
}

@media (min-width: 640px) {
  .filters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .filters-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.filter-group {
  display: flex;
  flex-direction: column;
}

.filter-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 6px;
}

.filter-select,
.filter-input {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111827;
  transition: all 0.15s;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.invoices-table-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.table-wrapper {
  overflow: visible;
}

.data-table {
  min-width: 100%;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: #f9fafb;
}

.data-table .invoice-number,
.data-table .estimate-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  text-decoration: none;
}

.data-table .invoice-number .inv-prefix,
.data-table .estimate-number .inv-prefix {
  color: #9ca3af;
}

.data-table .invoice-number .inv-year,
.data-table .estimate-number .inv-year {
  color: #6b7280;
}

.data-table .invoice-number .inv-seq,
.data-table .estimate-number .inv-seq {
  color: #059669;
  font-weight: 600;
}

.data-table .estimate-number:hover .inv-seq {
  text-decoration: underline;
}

.text-muted {
  color: #6b7280;
}

.text-light {
  color: #9ca3af;
}

.text-right {
  text-align: right;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.link-primary {
  color: #059669;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.link-primary:hover {
  color: #047857;
  text-decoration: underline;
}

.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pagination-link {
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  background: #f9fafb;
  color: #4b5563;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  transition: all 0.15s;
}

.pagination-link:hover {
  background: #f3f4f6;
  color: #111827;
}

.pagination-link.active {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

/* Invoice Show Page */
.invoice-show {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.invoice-header-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
}

.invoice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.invoice-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.invoice-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.invoice-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.invoice-parties-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .invoice-parties-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.invoice-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
}

.invoice-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.invoice-party-name {
  font-weight: 500;
  color: #111827;
}

.invoice-address {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

.invoice-address p {
  margin: 0;
}

.invoice-details-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invoice-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.invoice-detail-label {
  color: #6b7280;
}

.invoice-detail-value {
  color: #111827;
}

.invoice-section-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.invoice-section-header {
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.invoice-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.invoice-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.line-item-name {
  font-weight: 500;
  color: #111827;
}

.line-item-note {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-top: 2px;
}

.line-item-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #9ca3af;
}

.invoice-totals {
  max-width: 28rem;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invoice-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.invoice-total-label {
  color: #6b7280;
}

.invoice-total-value {
  color: #374151;
}

.invoice-total-border {
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.invoice-total-final {
  font-size: 1.125rem;
  font-weight: 600;
}

.invoice-total-final .invoice-total-label {
  color: #111827;
}

.invoice-notes {
  color: #374151;
  line-height: 1.6;
}

.text-success {
  color: #059669;
}

.text-warning {
  color: #d97706;
}

.empty-state {
  padding: 32px;
  text-align: center;
  color: #9ca3af;
}

/* Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  padding: 6px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
}

.dropdown-trigger:hover {
  background: #f3f4f6;
  color: #4b5563;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  margin-top: 4px;
  min-width: 160px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  padding: 4px 0;
}

.dropdown-menu-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: #374151;
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.dropdown-menu-item:hover {
  background: #f9fafb;
  color: #111827;
}

.dropdown-menu-item-danger {
  color: #dc2626;
}

.dropdown-menu-item-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Badge sizes */
.badge-lg {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.badge-xs {
  padding: 2px 6px;
  font-size: 0.625rem;
}

/* Button variants */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.btn-secondary {
  background: #f9fafb;
  color: #4b5563;
  border-color: #e5e7eb;
}

.btn-secondary:hover {
  background: #f3f4f6;
  color: #111827;
}

.btn-success {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.btn-success:hover {
  background: #d1fae5;
}

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

.btn-danger:hover {
  background: #fee2e2;
}

.btn-warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}

.btn-warning:hover {
  background: #fef3c7;
}

/* Confirm Dialog */
.confirm-dialog {
  text-align: center;
  padding: 16px 0;
}

.confirm-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-icon-warning {
  background: #fffbeb;
  color: #f59e0b;
}

.confirm-icon-danger {
  background: #fef2f2;
  color: #ef4444;
}

.confirm-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.confirm-text {
  color: #6b7280;
}

/* Form styles */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.form-label .required {
  color: #dc2626;
}

.form-input,
.form-select {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111827;
  transition: all 0.15s;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-input::placeholder {
  color: #9ca3af;
}

/* Invoice Select List (for copy modal) */
.invoice-select-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 24rem;
  overflow-y: auto;
}

.invoice-select-item {
  width: 100%;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.invoice-select-item:hover {
  background: #f3f4f6;
}

.invoice-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invoice-select-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.font-medium {
  font-weight: 500;
}

/* Invoice Form Page */
.invoice-form-container {
  max-width: 56rem;
  margin: 0 auto;
}

.invoice-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-group-full {
  grid-column: 1 / -1;
}

.form-textarea {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111827;
  font-family: inherit;
  resize: vertical;
  transition: all 0.15s;
}

.form-textarea:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-textarea::placeholder {
  color: #9ca3af;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.required {
  color: #dc2626;
}

/* Line Item Show Page */
.line-item-show {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 24px;
}

@media (min-width: 768px) {
  .details-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-value {
  font-size: 0.9375rem;
  color: #111827;
  font-weight: 500;
}

.detail-note {
  margin: 0 24px 24px 24px;
  padding-top: 24px;
  border-top: 1px solid #f3f4f6;
}

.detail-note-text {
  margin-top: 8px;
  color: #4b5563;
  line-height: 1.5;
}

/* Invoice/Estimate Detail Page */
.invoice-detail-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.invoice-header-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .invoice-header-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.invoice-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.invoice-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.invoice-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.detail-row-total {
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  font-size: 1.125rem;
  font-weight: 600;
}

.party-name {
  font-weight: 500;
  color: #111827;
}

.party-address {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

.party-address p {
  margin: 0;
}

.section-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.section-header .section-title {
  margin-bottom: 0;
}

.section-content {
  padding: 24px;
}

.allowance-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.allowance-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
}

.allowance-item-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.allowance-item-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.allowance-item-name {
  color: #374151;
}

.allowance-item-amount {
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #6b7280;
}

.allowance-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.empty-text {
  color: #9ca3af;
  text-align: center;
  padding: 32px;
}

.notes-text {
  color: #374151;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Confirm Dialog */
.confirm-dialog-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-dialog-icon-danger {
  background: #fef2f2;
  color: #ef4444;
}

.confirm-dialog-icon-warning {
  background: #fffbeb;
  color: #f59e0b;
}

.confirm-dialog-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.confirm-dialog-text {
  color: #6b7280;
}

/* Dialog Components */
.dialog-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 24px;
}

.radio-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  cursor: pointer;
  transition: all 0.15s;
}

.radio-option:hover {
  background: #f3f4f6;
}

.radio-option-selected {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.radio-input {
  margin-top: 2px;
  margin-right: 12px;
  width: 16px;
  height: 16px;
  accent-color: #10b981;
}

.radio-content {
  flex: 1;
}

.radio-label {
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}

.radio-description {
  font-size: 0.875rem;
  color: #6b7280;
}

.upfront-options {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #d1d5db;
}

.percentage-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.percentage-input {
  width: 96px;
}

.percentage-suffix {
  font-size: 0.875rem;
  color: #6b7280;
}

.upfront-preview {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 8px;
}

.upfront-amount {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #059669;
}

/* Allowance/Charge List */
.allowance-charge-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.allowance-charge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
}

.allowance-charge-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.allowance-charge-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.allowance-charge-reason {
  color: #374151;
}

.allowance-charge-amount {
  font-size: 0.875rem;
}

.allowance-charge-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Form Stack (vertical form layout) */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Radio Group */
.radio-group {
  display: flex;
  align-items: center;
  gap: 24px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
}

.radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #10b981;
}

/* Form Help Text */
.form-help {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #6b7280;
}

/* Calculated Total */
.calculated-total {
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.calculated-amount {
  font-size: 1.25rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #059669;
}

/* Payments Page */
.payments-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.payment-summary-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
}

.payment-summary-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.payment-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-summary-label {
  font-size: 0.875rem;
  color: #6b7280;
}

.payment-summary-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.payment-summary-invoice-total {
  font-size: 1.125rem;
  color: #374151;
}

.payments-list {
  display: flex;
  flex-direction: column;
}

.payment-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}

.payment-item:last-child {
  border-bottom: none;
}

.payment-item:hover {
  background: #f9fafb;
}

.payment-info {
  flex: 1;
}

.payment-amount {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.payment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.payment-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: #6b7280;
}

.payment-meta-item svg {
  color: #9ca3af;
}

.payment-breakdowns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-breakdown-card {
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
  min-width: 200px;
}

.payment-breakdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.15s;
}

.payment-breakdown-header:hover {
  color: #10b981;
}

.payment-breakdown-count {
  padding: 2px 6px;
  font-size: 0.75rem;
  background: #e5e7eb;
  color: #4b5563;
  border-radius: 4px;
}

.payment-breakdown-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-conversion-item,
.payment-transfer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #6b7280;
}

.payment-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Text color utilities */
.text-warning {
  color: #d97706;
}

/* Form Card Header */
.form-card-header {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
}

.form-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.form-card-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 4px;
}

/* Transfers List */
.transfers-list {
  display: flex;
  flex-direction: column;
}

.transfer-item {
  padding: 16px 24px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}

.transfer-item:last-child {
  border-bottom: none;
}

.transfer-item:hover {
  background: #f9fafb;
}

.transfer-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transfer-amount {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.transfer-fee {
  font-size: 0.875rem;
  font-weight: 400;
}

.transfer-accounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.transfer-account-name {
  font-weight: 500;
  color: #374151;
}

.transfer-arrow {
  color: #d1d5db;
}

.transfer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Hosting Page */
.hosting-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hosting-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hosting-forms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .hosting-forms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hosting-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
}

.hosting-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hosting-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px 0;
}

.hosting-card-header .hosting-card-title {
  margin: 0;
}

.hosting-card-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 16px 0;
}

.hosting-card-count {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Hosting Stats Grid */
.hosting-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .hosting-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .hosting-stats-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.hosting-stat-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 20px;
  text-align: center;
}

.hosting-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.hosting-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  margin-top: 8px;
}

.hosting-stat-detail {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 4px;
}

/* Section Tabs */
.section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.section-tab {
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.15s;
}

.section-tab:hover:not(.is-disabled) {
  background: #f9fafb;
  color: #374151;
}

.section-tab.is-active {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.section-tab.is-disabled {
  border-style: dashed;
  color: #9ca3af;
  cursor: default;
}

/* Color Picker */
.color-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-picker-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.color-picker-swatch:hover {
  transform: scale(1.1);
}

.color-picker-swatch.is-selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827;
}

.color-picker-swatch svg {
  width: 16px;
  height: 16px;
  color: #fff;
  display: none;
}

.color-picker-swatch.is-selected svg {
  display: block;
}

.color-picker-swatch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.color-picker-swatch.color-gray { background-color: #6b7280; }
.color-picker-swatch.color-blue { background-color: #3b82f6; }
.color-picker-swatch.color-green { background-color: #10b981; }
.color-picker-swatch.color-red { background-color: #ef4444; }
.color-picker-swatch.color-yellow { background-color: #f59e0b; }
.color-picker-swatch.color-purple { background-color: #8b5cf6; }
.color-picker-swatch.color-cyan { background-color: #06b6d4; }
.color-picker-swatch.color-orange { background-color: #f97316; }
.color-picker-swatch.color-pink { background-color: #ec4899; }
.color-picker-swatch.color-teal { background-color: #14b8a6; }

/* Color display (for dots and bars) */
.color-gray { background-color: #6b7280; }
.color-blue { background-color: #3b82f6; }
.color-green { background-color: #10b981; }
.color-red { background-color: #ef4444; }
.color-yellow { background-color: #f59e0b; }
.color-purple { background-color: #8b5cf6; }
.color-cyan { background-color: #06b6d4; }
.color-orange { background-color: #f97316; }
.color-pink { background-color: #ec4899; }
.color-teal { background-color: #14b8a6; }

/* Stack Cards */
.stacks-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .stacks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stacks-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stack-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stack-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stack-card-color-bar {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 12px;
}

.stack-card-color-bar.color-gray { background-color: #6b7280; }
.stack-card-color-bar.color-blue { background-color: #3b82f6; }
.stack-card-color-bar.color-green { background-color: #10b981; }
.stack-card-color-bar.color-red { background-color: #ef4444; }
.stack-card-color-bar.color-yellow { background-color: #f59e0b; }
.stack-card-color-bar.color-purple { background-color: #8b5cf6; }
.stack-card-color-bar.color-cyan { background-color: #06b6d4; }
.stack-card-color-bar.color-orange { background-color: #f97316; }
.stack-card-color-bar.color-pink { background-color: #ec4899; }
.stack-card-color-bar.color-teal { background-color: #14b8a6; }

.stack-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stack-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.stack-card-link {
  color: inherit;
  text-decoration: none;
}

.stack-card-link:hover {
  color: #059669;
}

.stack-card-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 8px 0 0 0;
  line-height: 1.5;
  flex: 1;
}

.stack-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

.stack-card-meta {
  font-size: 0.75rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stack-card-meta svg {
  width: 14px;
  height: 14px;
}

/* Collapsible Card */
.collapsible-card {
  padding: 0;
}

.collapsible-card-header {
  width: 100%;
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  text-align: left;
  transition: background-color 0.15s ease;
  border-radius: 12px;
}

.collapsible-card-header:hover {
  background-color: #f9fafb;
}

.collapsible-card.is-open .collapsible-card-header {
  border-radius: 12px 12px 0 0;
}

.collapsible-card-header .hosting-card-title {
  margin: 0;
}

.collapsible-card-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.2s ease;
}

.collapsible-card-icon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-top: -2px;
}

.collapsible-card.is-open .collapsible-card-icon {
  transform: rotate(180deg);
}

.collapsible-card-content {
  padding: 0 24px 24px 24px;
  border-top: 1px solid #f3f4f6;
}

.collapsible-card-content .hosting-card-desc {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Stack Show Page */
.stack-show {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stack-header {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.stack-header-color-bar {
  width: 48px;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 16px;
}

.stack-header-color-bar.color-gray { background-color: #6b7280; }
.stack-header-color-bar.color-blue { background-color: #3b82f6; }
.stack-header-color-bar.color-green { background-color: #10b981; }
.stack-header-color-bar.color-red { background-color: #ef4444; }
.stack-header-color-bar.color-yellow { background-color: #f59e0b; }
.stack-header-color-bar.color-purple { background-color: #8b5cf6; }
.stack-header-color-bar.color-cyan { background-color: #06b6d4; }
.stack-header-color-bar.color-orange { background-color: #f97316; }
.stack-header-color-bar.color-pink { background-color: #ec4899; }
.stack-header-color-bar.color-teal { background-color: #14b8a6; }

.stack-header-info {
  flex: 1;
}

.stack-header-info h1 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.stack-header-info p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 8px 0 0 0;
  line-height: 1.5;
}

.stack-edit-form {
  flex: 1;
}

/* Project Cards */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.project-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.project-card-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.project-card-color-dot.color-gray { background-color: #6b7280; }
.project-card-color-dot.color-blue { background-color: #3b82f6; }
.project-card-color-dot.color-green { background-color: #10b981; }
.project-card-color-dot.color-red { background-color: #ef4444; }
.project-card-color-dot.color-yellow { background-color: #f59e0b; }
.project-card-color-dot.color-purple { background-color: #8b5cf6; }
.project-card-color-dot.color-cyan { background-color: #06b6d4; }
.project-card-color-dot.color-orange { background-color: #f97316; }
.project-card-color-dot.color-pink { background-color: #ec4899; }
.project-card-color-dot.color-teal { background-color: #14b8a6; }

.project-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  flex: 1;
}

.project-card-desc {
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 10px 0 0 0;
  line-height: 1.5;
}

.project-card-ports {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.project-card-port-badge {
  font-size: 0.7rem;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
  background: #f3f4f6;
  color: #4b5563;
  padding: 2px 6px;
  border-radius: 4px;
}

.project-card-actions {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.project-card:hover .project-card-actions {
  opacity: 1;
}

/* Settings Detail Grid */
.settings-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.settings-detail-row:last-child {
  border-bottom: none;
}

.settings-detail-label {
  font-size: 0.875rem;
  color: #6b7280;
  flex-shrink: 0;
}

.settings-detail-value {
  font-size: 0.875rem;
  color: #111827;
  text-align: right;
}

/* Alert boxes */
.alert {
  border-radius: 12px;
  padding: 16px;
  border: 1px solid;
}

.alert-warning {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

.alert-success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.alert-header {
  margin-bottom: 8px;
}

.alert-header strong {
  font-weight: 600;
}

.alert-text {
  font-size: 0.875rem;
  margin: 0 0 12px 0;
}

/* Key display */
.key-display-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0;
}

@media (min-width: 768px) {
  .key-display-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.key-display-box {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #fcd34d;
  padding: 12px;
}

.key-display-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.key-display-content {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  color: #374151;
  background: #f9fafb;
  border-radius: 6px;
  padding: 12px;
  margin: 0;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.key-download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.command-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  color: #065f46;
  background: #fff;
  border-radius: 6px;
  padding: 12px;
  margin: 8px 0 0 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Form utilities */
.btn-full {
  width: 100%;
  justify-content: center;
}

.permission-note {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 12px 0 0 0;
}

/* Server show page */
.server-show {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.server-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.server-header-info h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}

.server-header-info p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.server-status-box {
  text-align: right;
}

.server-status-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0 0 4px 0;
}

.server-status-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.server-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 1024px) {
  .server-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.server-stat-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 16px;
}

.server-stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0 0 4px 0;
}

.server-stat-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

/* Setup steps */
.setup-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setup-step {
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  padding: 12px 16px;
}

.setup-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setup-step-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setup-step-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.setup-step-icon.is-spinning {
  animation: spin 1s linear infinite;
}

.setup-step-icon.is-success {
  color: #059669;
}

.setup-step-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.setup-step-status {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 4px 0 0 0;
}

.setup-step-time {
  font-size: 0.75rem;
  color: #6b7280;
}

.setup-step-output {
  margin-top: 12px;
}

.setup-step-output summary {
  font-size: 0.75rem;
  color: #6b7280;
  cursor: pointer;
}

.setup-step-output pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  color: #374151;
  background: #fff;
  border-radius: 6px;
  padding: 8px;
  margin: 8px 0 0 0;
  max-height: 128px;
  overflow: auto;
}

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

/* Danger zone */
.danger-zone {
  background: #fef2f2;
  border-radius: 8px;
  border: 1px solid #fecaca;
  padding: 16px;
}

.danger-zone-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.danger-zone h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #991b1b;
  margin: 0 0 4px 0;
}

.danger-zone p {
  font-size: 0.75rem;
  color: #b91c1c;
  margin: 0;
}

/* Container Logs */
.log-container-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-container-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  gap: 12px;
}

.log-container-option.is-selected {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 4%, transparent);
}

.log-container-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #111827;
  flex: 1;
  text-align: left;
}

.log-container-name .text-muted {
  font-weight: 400;
  font-size: 0.75rem;
}

pre.log-output {
  background: #111827;
  color: #d1d5db;
  padding: 16px;
  border-radius: 8px;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  max-height: 600px;
  overflow-y: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

pre.log-output code {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
}

/* =========================================
   Command Palette Styles
   ========================================= */

/* Hide dialog header for command palette */
#command-palette-dialog .dialog-header {
  display: none;
}

#command-palette-dialog .dialog-body {
  padding: 0;
}

.command-palette {
  width: 100%;
}

.command-palette-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.command-palette-search-icon {
  width: 20px;
  height: 20px;
  color: #9ca3af;
  flex-shrink: 0;
}

.command-palette-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background: transparent;
  color: #111827;
}

.command-palette-input::placeholder {
  color: #9ca3af;
}

.command-palette-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-family: inherit;
}

.command-palette-results {
  max-height: 400px;
  overflow-y: auto;
}

.command-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.1s;
}

.command-palette-item:hover {
  background: #f9fafb;
}

.command-palette-item.selected {
  background: #eff6ff;
}

.command-palette-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f3f4f6;
  border-radius: 6px;
}

.command-palette-item-icon svg {
  width: 18px;
  height: 18px;
  color: #6b7280;
}

.command-palette-item.selected .command-palette-item-icon {
  background: #dbeafe;
}

.command-palette-item.selected .command-palette-item-icon svg {
  color: #2563eb;
}

.command-palette-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.command-palette-item-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette-item-subtitle {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette-item-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.command-palette-item.selected .command-palette-item-badge {
  background: #dbeafe;
  color: #2563eb;
}

.command-palette-empty {
  padding: 32px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}

.command-palette-hint {
  padding: 24px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

.command-palette-hint p {
  margin: 0 0 16px 0;
}

.command-palette-hint-shortcuts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.command-palette-hint-shortcuts span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #9ca3af;
}

.command-palette-hint-shortcuts kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  font-size: 0.625rem;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  font-family: inherit;
}

/* Dark mode styles */
[data-theme="dark"] .command-palette-search {
  border-bottom-color: #374151;
}

[data-theme="dark"] .command-palette-search-icon {
  color: #6b7280;
}

[data-theme="dark"] .command-palette-input {
  color: #f9fafb;
}

[data-theme="dark"] .command-palette-input::placeholder {
  color: #6b7280;
}

[data-theme="dark"] .command-palette-kbd {
  color: #9ca3af;
  background: #374151;
  border-color: #4b5563;
}

[data-theme="dark"] .command-palette-item:hover {
  background: #1f2937;
}

[data-theme="dark"] .command-palette-item.selected {
  background: #1e3a5f;
}

[data-theme="dark"] .command-palette-item-icon {
  background: #374151;
}

[data-theme="dark"] .command-palette-item-icon svg {
  color: #9ca3af;
}

[data-theme="dark"] .command-palette-item.selected .command-palette-item-icon {
  background: #1e40af;
}

[data-theme="dark"] .command-palette-item.selected .command-palette-item-icon svg {
  color: #93c5fd;
}

[data-theme="dark"] .command-palette-item-title {
  color: #f9fafb;
}

[data-theme="dark"] .command-palette-item-subtitle {
  color: #9ca3af;
}

[data-theme="dark"] .command-palette-item-badge {
  color: #9ca3af;
  background: #374151;
}

[data-theme="dark"] .command-palette-item.selected .command-palette-item-badge {
  background: #1e40af;
  color: #93c5fd;
}

[data-theme="dark"] .command-palette-empty,
[data-theme="dark"] .command-palette-hint {
  color: #9ca3af;
}

[data-theme="dark"] .command-palette-hint-shortcuts span {
  color: #6b7280;
}

[data-theme="dark"] .command-palette-hint-shortcuts kbd {
  color: #9ca3af;
  background: #374151;
  border-color: #4b5563;
}

/* =========================================
   Sidebar Search Hint
   ========================================= */

.sidebar-search-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  width: calc(100% - 20px);
  margin: 0 10px 6px 10px;
  padding: 7px 10px;
  background: rgba(17, 20, 34, 0.04);
  border: none;
  border-radius: 8px;
  color: #9ca3af;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.sidebar-search-hint:hover {
  background: rgba(17, 20, 34, 0.07);
  color: var(--ink-500);
}

.sidebar-search-hint svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.sidebar-search-hint span {
  flex: 1;
  text-align: left;
  letter-spacing: 0.01em;
}

.sidebar-search-kbd {
  font-size: 0.625rem;
  font-weight: 500;
  color: #b0b8c8;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: inherit;
  line-height: 1.6;
}

/* OS detection - hide by default, JS will show the correct one */
.sidebar-search-kbd[data-mac] {
  display: none;
}

.sidebar-search-kbd[data-win] {
  display: none;
}

/* When body has data-os="mac", show mac shortcut */
body[data-os="mac"] .sidebar-search-kbd[data-mac] {
  display: inline-flex;
}

/* When body has data-os="win", show win shortcut */
body[data-os="win"] .sidebar-search-kbd[data-win] {
  display: inline-flex;
}

/* Collapsed sidebar */
.sidebar.collapsed .sidebar-search-hint {
  display: none;
}

/* Dark mode */
[data-theme="dark"] .sidebar-search-hint {
  background: rgba(255, 255, 255, 0.04);
  color: #6b7280;
}

[data-theme="dark"] .sidebar-search-hint:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

[data-theme="dark"] .sidebar-search-kbd {
  color: #6b7280;
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Assistant Chat Page
   ========================================================================== */

.assistant-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  background: #f8f9fc;
  margin: -24px;
}

@media (max-width: 768px) {
  .assistant-container {
    margin: -16px;
  }
}

.assistant-credits {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  margin-left: auto;
}

.assistant-credits svg {
  flex-shrink: 0;
  color: #9ca3af;
}

.assistant-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
  /* Refined scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 20, 34, 0.12) transparent;
}

.assistant-messages::-webkit-scrollbar {
  width: 4px;
}

.assistant-messages::-webkit-scrollbar-track {
  background: transparent;
}

.assistant-messages::-webkit-scrollbar-thumb {
  background: rgba(17, 20, 34, 0.12);
  border-radius: 99px;
}

.assistant-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 20, 34, 0.22);
}

.assistant-loading-more {
  text-align: center;
  padding: 12px;
  font-size: 0.85rem;
  color: #9ca3af;
}

/* ---- Empty State ---- */
.assistant-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 32px;
  animation: assistant-fade-up 0.4s ease-out both;
}

@keyframes assistant-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Orb: layered ambient glow around the icon */
.assistant-empty-icon {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-500);
}

.assistant-empty-icon::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(62, 100, 255, 0.12) 0%, rgba(62, 100, 255, 0.04) 55%, transparent 75%);
  pointer-events: none;
}

.assistant-empty-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(62, 100, 255, 0.1) 0%, rgba(31, 69, 216, 0.06) 100%);
  border: 1px solid rgba(62, 100, 255, 0.18);
  backdrop-filter: blur(4px);
}

.assistant-empty-icon svg {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
}

.assistant-empty h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.assistant-empty p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-500);
  margin: 0;
  max-width: 340px;
}

/* ---- Messages ---- */

/* Outer row: user messages right-align, assistant left-align */
.assistant-message {
  width: 100%;
  display: flex;
  padding: 8px 24px;
  animation: assistant-fade-up 0.25s ease-out both;
}

.assistant-message.user {
  justify-content: flex-end;
}

.assistant-message.assistant {
  justify-content: flex-start;
}

/* Inner layout wrapper (caps max width) */
.assistant-message-inner {
  max-width: min(640px, 80%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Role label */
.assistant-message-inner::before {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.45;
  line-height: 1;
  margin-bottom: 2px;
}

.assistant-message.user .assistant-message-inner::before {
  content: "You";
  text-align: right;
  color: var(--brand-700);
}

.assistant-message.assistant .assistant-message-inner::before {
  content: "Assistant";
  text-align: left;
  color: var(--ink-700);
}

/* Bubble */
.assistant-message-text {
  font-size: 0.9375rem;
  line-height: 1.75;
  word-break: break-word;
  padding: 12px 16px;
  border-radius: 16px;
  background: transparent;
}

.assistant-message.user .assistant-message-inner {
  align-items: flex-end;
}

.assistant-message.user .assistant-message-text {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  color: #ffffff;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 1px 3px rgba(62, 100, 255, 0.12), 0 4px 12px rgba(62, 100, 255, 0.08);
}

.assistant-message.assistant .assistant-message-text {
  background: #ffffff;
  color: var(--ink-900);
  border-radius: 16px 16px 16px 4px;
  border: 1px solid rgba(17, 20, 34, 0.07);
  box-shadow: 0 1px 3px rgba(17, 20, 34, 0.06), 0 4px 12px rgba(17, 20, 34, 0.04);
}

/* Streaming message (the live in-progress bubble) */
#streaming-message .assistant-message-text {
  background: #ffffff;
  color: var(--ink-900);
  border-radius: 16px 16px 16px 4px;
  border: 1px solid rgba(17, 20, 34, 0.07);
  box-shadow: 0 1px 3px rgba(17, 20, 34, 0.06), 0 4px 12px rgba(17, 20, 34, 0.04);
}

/* First message in a sequence — add top padding to the messages list */
.assistant-message:first-child {
  padding-top: 20px;
}

/* ---- Streaming Cursor (::after pseudo-element) ---- */
#streaming-message .assistant-message-text::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--brand-500);
  margin-left: 2px;
  border-radius: 2px;
  vertical-align: text-bottom;
  animation: assistant-cursor-pulse 1.2s ease-in-out infinite;
}

@keyframes assistant-cursor-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}

/* ---- Markdown styles for assistant messages ---- */

/* Shorthand scope alias */
.assistant-message.assistant .assistant-message-text {
  line-height: 1.7;
}

/* --- Paragraphs --- */
.assistant-message.assistant .assistant-message-text p {
  margin: 0 0 0.9em;
}

.assistant-message.assistant .assistant-message-text p:last-child {
  margin-bottom: 0;
}

/* --- Headings --- */
.assistant-message.assistant .assistant-message-text h1,
.assistant-message.assistant .assistant-message-text h2,
.assistant-message.assistant .assistant-message-text h3,
.assistant-message.assistant .assistant-message-text h4 {
  margin: 1.25em 0 0.5em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.assistant-message.assistant .assistant-message-text h1 {
  font-size: 1.3em;
  padding-bottom: 0.35em;
  border-bottom: 2px solid rgba(62, 100, 255, 0.15);
}

.assistant-message.assistant .assistant-message-text h2 {
  font-size: 1.15em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(17, 20, 34, 0.08);
}

.assistant-message.assistant .assistant-message-text h3 {
  font-size: 1.0em;
  font-weight: 600;
}

.assistant-message.assistant .assistant-message-text h4 {
  font-size: 0.9em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

/* First heading should not have top margin */
.assistant-message.assistant .assistant-message-text > h1:first-child,
.assistant-message.assistant .assistant-message-text > h2:first-child,
.assistant-message.assistant .assistant-message-text > h3:first-child,
.assistant-message.assistant .assistant-message-text > h4:first-child {
  margin-top: 0;
}

/* --- Strong & Em --- */
.assistant-message.assistant .assistant-message-text strong {
  font-weight: 700;
  color: var(--ink-900);
}

.assistant-message.assistant .assistant-message-text em {
  font-style: italic;
}

/* --- Lists --- */
.assistant-message.assistant .assistant-message-text ul,
.assistant-message.assistant .assistant-message-text ol {
  margin: 0 0 0.9em;
  padding-left: 1.6em;
}

.assistant-message.assistant .assistant-message-text ul {
  list-style: none;
}

.assistant-message.assistant .assistant-message-text ul li {
  position: relative;
}

.assistant-message.assistant .assistant-message-text ul li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-500);
  opacity: 0.7;
}

.assistant-message.assistant .assistant-message-text ol {
  list-style: decimal;
}

.assistant-message.assistant .assistant-message-text ol li::marker {
  color: var(--brand-500);
  font-weight: 600;
  font-size: 0.9em;
}

.assistant-message.assistant .assistant-message-text li {
  margin-bottom: 0.35em;
  line-height: 1.65;
}

.assistant-message.assistant .assistant-message-text li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
.assistant-message.assistant .assistant-message-text li ul,
.assistant-message.assistant .assistant-message-text li ol {
  margin: 0.3em 0 0.1em;
}

.assistant-message.assistant .assistant-message-text li ul li::before {
  background: var(--ink-500);
  opacity: 0.4;
  width: 4px;
  height: 4px;
}

/* --- Inline Code --- */
.assistant-message.assistant .assistant-message-text code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.82em;
  background: rgba(62, 100, 255, 0.07);
  color: var(--brand-700);
  padding: 0.18em 0.48em;
  border-radius: 5px;
  border: 1px solid rgba(62, 100, 255, 0.12);
  font-weight: 500;
  white-space: nowrap;
}

/* --- Code Blocks --- */
.assistant-message.assistant .assistant-message-text pre {
  margin: 0 0 1em;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 16px rgba(17, 20, 34, 0.18),
    0 1px 4px rgba(17, 20, 34, 0.12);
  position: relative;
}

/* Terminal dots header bar */
.assistant-message.assistant .assistant-message-text pre::before {
  content: "";
  display: block;
  height: 36px;
  background: #252d3d;
  background-image:
    radial-gradient(circle, #ff5f57 0%, #ff5f57 50%, transparent 52%),
    radial-gradient(circle, #febc2e 0%, #febc2e 50%, transparent 52%),
    radial-gradient(circle, #28c840 0%, #28c840 50%, transparent 52%);
  background-size: 10px 10px, 10px 10px, 10px 10px;
  background-position: 14px 13px, 30px 13px, 46px 13px;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.assistant-message.assistant .assistant-message-text pre > code {
  display: block;
  background: #1a2235;
  color: #cdd9f0;
  padding: 14px 18px 16px;
  overflow-x: auto;
  font-size: 0.82em;
  line-height: 1.7;
  border-radius: 0 0 10px 10px;
  /* Reset inline-code styles that would otherwise bleed in */
  border: none;
  font-weight: 400;
  white-space: pre;
}

/* --- Tables --- */
.assistant-message.assistant .assistant-message-text .md-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 0 0 1em;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(17, 20, 34, 0.08), 0 4px 12px rgba(17, 20, 34, 0.06);
  border: 1px solid rgba(17, 20, 34, 0.09);
}

.assistant-message.assistant .assistant-message-text table {
  /* Use separate + border-spacing:0 so border-radius + overflow:hidden clip correctly */
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.875em;
  margin: 0 0 1em;
  border: 1px solid rgba(17, 20, 34, 0.09);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(17, 20, 34, 0.08), 0 4px 12px rgba(17, 20, 34, 0.05);
}

.assistant-message.assistant .assistant-message-text thead {
  background: linear-gradient(135deg, rgba(62, 100, 255, 0.07) 0%, rgba(31, 69, 216, 0.04) 100%);
}

.assistant-message.assistant .assistant-message-text thead tr th {
  border-bottom: 2px solid rgba(62, 100, 255, 0.18);
}

.assistant-message.assistant .assistant-message-text th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-700);
  white-space: nowrap;
}

.assistant-message.assistant .assistant-message-text td {
  padding: 9px 16px;
  border-top: 1px solid rgba(17, 20, 34, 0.06);
  color: var(--ink-700);
  line-height: 1.5;
  transition: background 0.12s ease-out;
}

/* Zebra striping */
.assistant-message.assistant .assistant-message-text tbody tr:nth-child(even) td {
  background: rgba(17, 20, 34, 0.022);
}

/* Row hover */
.assistant-message.assistant .assistant-message-text tbody tr:hover td {
  background: rgba(62, 100, 255, 0.045);
}

/* --- Blockquotes --- */
.assistant-message.assistant .assistant-message-text blockquote {
  margin: 0 0 1em;
  padding: 0.75em 1em 0.75em 1.1em;
  border-left: 3px solid var(--brand-500);
  background: rgba(62, 100, 255, 0.04);
  border-radius: 0 8px 8px 0;
  color: var(--ink-700);
  font-style: italic;
  position: relative;
}

.assistant-message.assistant .assistant-message-text blockquote p {
  margin: 0;
}

.assistant-message.assistant .assistant-message-text blockquote p + p {
  margin-top: 0.5em;
}

/* --- Horizontal Rule --- */
.assistant-message.assistant .assistant-message-text hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(17, 20, 34, 0.12) 20%,
    rgba(17, 20, 34, 0.12) 80%,
    transparent 100%
  );
  margin: 1.5em 0;
}

/* --- Links --- */
.assistant-message.assistant .assistant-message-text a {
  color: var(--brand-500);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(62, 100, 255, 0.4);
  transition: color 0.15s ease-out, text-decoration-color 0.15s ease-out;
}

.assistant-message.assistant .assistant-message-text a:hover {
  color: var(--brand-700);
  text-decoration-color: var(--brand-700);
}

/* ---- Error Toast ---- */
.assistant-error {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 24px 4px;
  padding: 12px 16px;
  background: #fff5f5;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-left: 3px solid #dc2626;
  border-radius: 10px;
  color: #b91c1c;
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08);
  animation: assistant-fade-up 0.2s ease-out both;
}

.assistant-error svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* ---- Input Form ---- */
.assistant-input-form {
  padding: 12px 20px 20px;
  background: #f8f9fc;
  /* No harsh border — use shadow to separate */
  position: relative;
}

.assistant-input-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17, 20, 34, 0.08) 20%, rgba(17, 20, 34, 0.08) 80%, transparent);
}

.assistant-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: #ffffff;
  border: 1px solid rgba(17, 20, 34, 0.1);
  border-radius: 16px;
  padding: 8px 8px 8px 18px;
  box-shadow: 0 2px 8px rgba(17, 20, 34, 0.06), 0 1px 2px rgba(17, 20, 34, 0.04);
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.assistant-input-wrapper:focus-within {
  border-color: rgba(62, 100, 255, 0.4);
  box-shadow:
    0 2px 8px rgba(17, 20, 34, 0.06),
    0 1px 2px rgba(17, 20, 34, 0.04),
    0 0 0 3px rgba(62, 100, 255, 0.1);
}

.assistant-input-wrapper textarea {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  min-height: 38px;
  max-height: 200px;
  padding: 8px 0;
  margin: 0;
  color: var(--ink-900);
}

.assistant-input-wrapper textarea::placeholder {
  color: rgba(78, 89, 117, 0.5);
}

.assistant-input-wrapper textarea:disabled {
  color: rgba(78, 89, 117, 0.4);
  cursor: not-allowed;
}

/* Send button — brand blue gradient, matches primary CTA style */
.assistant-send-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(62, 100, 255, 0.3);
  transition: box-shadow 0.15s ease-out, transform 0.1s ease-out, opacity 0.15s ease-out;
}

.assistant-send-btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(62, 100, 255, 0.4);
  transform: translateY(-1px);
}

.assistant-send-btn:active:not(:disabled) {
  transform: scale(0.95) translateY(0);
  box-shadow: 0 1px 4px rgba(62, 100, 255, 0.25);
}

.assistant-send-btn:disabled {
  background: linear-gradient(135deg, #d1d5db 0%, #c4c9d4 100%);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

.assistant-send-btn svg {
  width: 18px;
  height: 18px;
}

/* Spinner Animation */
.assistant-spinner {
  animation: spin 0.9s linear infinite;
}

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

/* ---- Dark Mode ---- */
[data-theme="dark"] .assistant-container {
  background: #0d1117;
}

[data-theme="dark"] .assistant-credits {
  color: #9ca3af;
  border-bottom-color: #21262d;
}

[data-theme="dark"] .assistant-credits svg {
  color: #6b7280;
}

[data-theme="dark"] .assistant-messages {
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

[data-theme="dark"] .assistant-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .assistant-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .assistant-empty-icon {
  color: #60a5fa;
}

[data-theme="dark"] .assistant-empty-icon::before {
  background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.1) 0%, rgba(96, 165, 250, 0.03) 55%, transparent 75%);
}

[data-theme="dark"] .assistant-empty-icon::after {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
  border-color: rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .assistant-empty h3 {
  color: #f1f5f9;
}

[data-theme="dark"] .assistant-empty p {
  color: #94a3b8;
}

[data-theme="dark"] .assistant-message.user .assistant-message-inner::before {
  color: #93c5fd;
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-inner::before {
  color: #94a3b8;
}

[data-theme="dark"] .assistant-message.user .assistant-message-text {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3), 0 1px 2px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text {
  background: #1e2433;
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] #streaming-message .assistant-message-text {
  background: #1e2433;
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] #streaming-message .assistant-message-text::after {
  background: #60a5fa;
}

/* Dark mode markdown overrides */

/* Headings */
[data-theme="dark"] .assistant-message.assistant .assistant-message-text h1,
[data-theme="dark"] .assistant-message.assistant .assistant-message-text h2,
[data-theme="dark"] .assistant-message.assistant .assistant-message-text h3,
[data-theme="dark"] .assistant-message.assistant .assistant-message-text h4 {
  color: #e2e8f0;
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text h1 {
  border-bottom-color: rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text h2 {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text h4 {
  color: #94a3b8;
}

/* Strong */
[data-theme="dark"] .assistant-message.assistant .assistant-message-text strong {
  color: #f1f5f9;
}

/* Inline code */
[data-theme="dark"] .assistant-message.assistant .assistant-message-text code {
  background: rgba(96, 165, 250, 0.1);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.18);
}

/* Code blocks */
[data-theme="dark"] .assistant-message.assistant .assistant-message-text pre {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text pre::before {
  background: #1a2035;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text pre > code {
  background: #0d1117;
  color: #c9d7ea;
  border: none;
}

/* Tables */
[data-theme="dark"] .assistant-message.assistant .assistant-message-text table {
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text thead {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.07) 100%);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text thead tr th {
  border-bottom-color: rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text th {
  color: #60a5fa;
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text td {
  border-top-color: rgba(255, 255, 255, 0.05);
  color: #c9d7ea;
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text tbody tr:hover td {
  background: rgba(96, 165, 250, 0.07);
}

/* Blockquote */
[data-theme="dark"] .assistant-message.assistant .assistant-message-text blockquote {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.07);
  color: #94a3b8;
}

/* List bullets */
[data-theme="dark"] .assistant-message.assistant .assistant-message-text ul li::before {
  background: #60a5fa;
  opacity: 0.75;
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text ol li::marker {
  color: #60a5fa;
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text li ul li::before {
  background: #94a3b8;
  opacity: 0.45;
}

/* HR */
[data-theme="dark"] .assistant-message.assistant .assistant-message-text hr {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%
  );
}

/* Links */
[data-theme="dark"] .assistant-message.assistant .assistant-message-text a {
  color: #60a5fa;
  text-decoration-color: rgba(96, 165, 250, 0.4);
}

[data-theme="dark"] .assistant-message.assistant .assistant-message-text a:hover {
  color: #93c5fd;
  text-decoration-color: #93c5fd;
}

[data-theme="dark"] .assistant-error {
  background: rgba(127, 29, 29, 0.3);
  border-color: rgba(220, 38, 38, 0.3);
  border-left-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .assistant-input-form {
  background: #0d1117;
}

[data-theme="dark"] .assistant-input-form::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 80%, transparent);
}

[data-theme="dark"] .assistant-input-wrapper {
  background: #1e2433;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .assistant-input-wrapper:focus-within {
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .assistant-input-wrapper textarea {
  color: #e2e8f0;
}

[data-theme="dark"] .assistant-input-wrapper textarea::placeholder {
  color: rgba(148, 163, 184, 0.45);
}

[data-theme="dark"] .assistant-input-wrapper textarea:disabled {
  color: rgba(148, 163, 184, 0.3);
}

[data-theme="dark"] .assistant-send-btn:disabled {
  background: linear-gradient(135deg, #374151 0%, #2d3748 100%);
}

/* ============================================
   Project Show Page
   ============================================ */

.project-show {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-header-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.project-header-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.project-header-info h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.project-header-info p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 4px 0 0 0;
}

.project-header-breadcrumb {
  padding-left: 28px;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-link:hover {
  color: #111827;
}

.stack-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stack-color-dot.color-gray { background-color: #6b7280; }
.stack-color-dot.color-blue { background-color: #3b82f6; }
.stack-color-dot.color-green { background-color: #10b981; }
.stack-color-dot.color-red { background-color: #ef4444; }
.stack-color-dot.color-yellow { background-color: #f59e0b; }
.stack-color-dot.color-purple { background-color: #8b5cf6; }
.stack-color-dot.color-cyan { background-color: #06b6d4; }
.stack-color-dot.color-orange { background-color: #f97316; }
.stack-color-dot.color-pink { background-color: #ec4899; }
.stack-color-dot.color-teal { background-color: #14b8a6; }

.project-header-color-dot.color-gray { background-color: #6b7280; }
.project-header-color-dot.color-blue { background-color: #3b82f6; }
.project-header-color-dot.color-green { background-color: #10b981; }
.project-header-color-dot.color-red { background-color: #ef4444; }
.project-header-color-dot.color-yellow { background-color: #f59e0b; }
.project-header-color-dot.color-purple { background-color: #8b5cf6; }
.project-header-color-dot.color-cyan { background-color: #06b6d4; }
.project-header-color-dot.color-orange { background-color: #f97316; }
.project-header-color-dot.color-pink { background-color: #ec4899; }
.project-header-color-dot.color-teal { background-color: #14b8a6; }

/* Make project cards clickable */
.project-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.project-card-link:hover {
  border-color: #a5b4fc;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

/* Container list and cards */
.containers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.container-card {
  background: #f9fafb;
  border-radius: 8px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
}

.container-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.container-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.container-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.container-card-image {
  font-size: 0.8125rem;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.container-card-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.container-card:hover .container-card-actions {
  opacity: 1;
}

.container-card-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.container-card-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8125rem;
}

.container-card-detail-label {
  color: #6b7280;
  flex-shrink: 0;
  min-width: 60px;
}

.container-card-detail-value {
  color: #374151;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.port-badge,
.volume-badge {
  display: inline-block;
  background: #e5e7eb;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #374151;
}

/* Port and volume lists in edit mode */
.port-list,
.volume-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.port-row,
.volume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.port-mapping,
.volume-mapping {
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #374151;
}

/* Inline add forms */
.form-inline-add {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.form-inline-add .field-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 100px;
}

.form-inline-add .field-group:has(select) {
  flex: 1;
  min-width: 140px;
}

.form-inline-add .field-group:has(input[type="checkbox"]) {
  flex: 0 0 auto;
  min-width: auto;
  display: flex;
  align-items: center;
  height: 38px;
}

.form-inline-add .field-group:has(input[type="number"]) {
  flex: 0 0 100px;
  min-width: 80px;
}

.form-inline-add input[type="number"] {
  width: 100%;
}

.form-inline-add select {
  width: 100%;
}

/* Compact select for protocol dropdown */
.form-inline-add .field-group:has(select[name*="protocol"]) {
  flex: 0 0 80px;
  min-width: 80px;
}

.form-inline-separator {
  color: #9ca3af;
  font-size: 1rem;
  height: 38px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Form two column row */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .form-row-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Checkbox row in forms */
.form-checkbox-row {
  margin: 8px 0;
}

.form-checkbox-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
}

.form-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Environment Variables */
.env-vars-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.env-var-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
}

.env-var-row:first-child {
  border-radius: 8px 8px 0 0;
}

.env-var-row:last-child {
  border-radius: 0 0 8px 8px;
}

.env-var-row:only-child {
  border-radius: 8px;
}

.env-var-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.env-var-key {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.env-var-value {
  font-size: 0.8125rem;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.env-var-secret {
  color: #9ca3af;
}

/* Form section header */
.form-section-header {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0 8px 0;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.form-section-header:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Resource badge */
.resource-badge {
  display: inline-block;
  background: #dbeafe;
  color: #1e40af;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Config badge (for health check, labels count, etc.) */
.config-badge {
  display: inline-block;
  background: #d1fae5;
  color: #065f46;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* Dependency badge */
.dependency-badge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Label badge */
.label-badge {
  display: inline-block;
  background: #e5e7eb;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #374151;
}

/* Label, dependency, and extra host lists in edit mode */
.label-list,
.dependency-list,
.extra-host-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.label-row,
.dependency-row,
.extra-host-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.extra-host-mapping {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
}


/* Domain management styles */
.domain-input-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.domain-input-name {
  flex: 1;
}

.domain-input-tld {
  width: 100px;
}

/* Verification instructions */
.verify-instructions-row {
  background: #f0f9ff !important;
}

.verify-instructions-cell {
  padding: 0 !important;
}

.verify-instructions {
  padding: 16px 24px;
  border-top: 1px dashed #bfdbfe;
}

.verify-instructions-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e40af;
  margin-bottom: 12px;
}

.verify-record {
  background: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.verify-record-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verify-record-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  width: 50px;
}

.verify-record-value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 4px;
  color: #374151;
}

.verify-instructions-note {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 12px;
}

/* Verification error styles */
.verify-instructions-row.is-failed {
  background: #fef2f2 !important;
}

.verify-instructions-row.is-failed .verify-instructions {
  border-top-color: #fecaca;
}

.verify-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.verify-error-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #991b1b;
  margin: 0 0 4px 0;
}

.verify-error-message {
  font-size: 0.8125rem;
  color: #b91c1c;
  margin: 0;
}

/* Delete modal text */
.delete-modal-text {
  font-size: 0.9375rem;
  color: #374151;
  margin: 0 0 8px 0;
}

.delete-modal-text strong {
  color: #111827;
}

.delete-modal-subtext {
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 0;
}

/* Deployment Status Badges */
.deployment-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.deployment-status-badge .status-icon {
  font-size: 0.875rem;
}

.deployment-status-badge .status-age {
  font-weight: 400;
  opacity: 0.8;
}

.status-success {
  background: #ecfdf5;
  color: #047857;
}

.status-failed {
  background: #fef2f2;
  color: #dc2626;
}

.status-in-progress {
  background: #eff6ff;
  color: #2563eb;
}

.status-cancelled {
  background: #f9fafb;
  color: #6b7280;
}

.status-pending {
  background: #fffbeb;
  color: #b45309;
}

/* Deployment header status */
.deployment-header-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.deployment-waiting-hint,
.deployment-running-hint {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Deployment steps */
.deployment-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.deployment-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f9fafb;
}

.deployment-step-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deployment-step-icon svg {
  display: block;
}

.deployment-step-info {
  flex: 1;
  min-width: 0;
}

.deployment-step-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.deployment-step-output {
  margin-top: 8px;
}

.deployment-step-output summary {
  font-size: 0.75rem;
  color: #6b7280;
  cursor: pointer;
}

.deployment-step-output pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  background: #1f2937;
  color: #f9fafb;
  padding: 12px;
  border-radius: 6px;
  margin-top: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Step status styles */
.step-success {
  background: #ecfdf5;
}

.step-success .deployment-step-name {
  color: #047857;
}

.step-failed {
  background: #fef2f2;
}

.step-failed .deployment-step-name {
  color: #dc2626;
}

.step-in-progress {
  background: #eff6ff;
}

.step-in-progress .deployment-step-name {
  color: #2563eb;
}

.step-pending {
  background: #f9fafb;
}

.step-pending .deployment-step-name {
  color: #6b7280;
}

/* Icon colors */
.icon-success {
  color: #059669;
}

.icon-failed {
  color: #dc2626;
}

.icon-pending {
  color: #9ca3af;
}

.icon-spinner {
  animation: spin 1s linear infinite;
  color: #2563eb;
}

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

/* Deployment error */
.deployment-error {
  padding: 12px 16px;
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  font-size: 0.875rem;
  color: #991b1b;
}

/* Deployment actions */
.deployment-actions {
  padding: 12px 16px;
  border-top: 1px solid #f3f4f6;
}

/* Deployment history table */
.deployment-history {
  padding: 0 16px 16px;
}

.deployment-history .data-table {
  width: 100%;
}

.status-waiting {
  font-size: 0.75rem;
  color: #b45309;
}

.status-running {
  font-size: 0.75rem;
  color: #2563eb;
}

/* Deployment step error output - shown by default for failed steps */
.deployment-step-error {
  margin-top: 8px;
}

.deployment-step-error pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 12px;
  border-radius: 6px;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Registry Credentials */
.credentials-list {
  padding: 0 16px 16px;
}

.credential-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  margin-bottom: 8px;
}

.credential-row:last-child {
  margin-bottom: 0;
}

.credential-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.credential-registry {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.credential-username {
  font-size: 0.75rem;
  color: #6b7280;
}

/* ==========================================================================
   Notes
   ========================================================================== */

.sidebar-quick-note-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: calc(100% - 20px);
  margin: 0 10px 6px 10px;
  padding: 7px 10px;
  background: rgba(17, 20, 34, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  color: #9ca3af;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease-out;
  text-decoration: none;
}

.sidebar-quick-note-btn:hover {
  background: rgba(17, 20, 34, 0.07);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--ink-500);
}

.sidebar-quick-note-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.sidebar-quick-note-btn span {
  flex: 1;
  text-align: left;
  letter-spacing: 0.01em;
}

.sidebar.collapsed .sidebar-quick-note-btn {
  display: none;
}

[data-theme="dark"] .sidebar-quick-note-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
  color: #6b7280;
}

[data-theme="dark"] .sidebar-quick-note-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

/* Notes Header */
.notes-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* Notes List */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-card {
  display: block;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}

.note-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.note-card-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 6px;
}

.note-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: #6b7280;
}

.note-card-scope {
  background: rgba(17, 20, 34, 0.05);
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ink-700);
  border: 1px solid rgba(17, 20, 34, 0.06);
}

.note-card-scope a {
  color: inherit;
  text-decoration: none;
}

.note-card-scope a:hover {
  color: var(--brand-700);
  text-decoration: none;
}

.note-card-private {
  background: #fef5e4;
  color: #92400e;
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  border: 1px solid rgba(146, 64, 14, 0.12);
}

[data-theme="dark"] .note-card {
  background: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .note-card:hover {
  border-color: #4b5563;
}

[data-theme="dark"] .note-card-title {
  color: #f9fafb;
}

[data-theme="dark"] .note-card-meta {
  color: #9ca3af;
}

[data-theme="dark"] .note-card-scope {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

[data-theme="dark"] .note-card-scope a:hover {
  color: #93b4ff;
}

[data-theme="dark"] .note-card-private {
  background: rgba(120, 53, 15, 0.35);
  border-color: rgba(253, 230, 138, 0.15);
  color: #fde68a;
}

/* Note Form */
.note-form {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.note-form-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.note-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}

/* Note Show */
@keyframes modal-card-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.note-show-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.note-show-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--ink-500);
}

.note-card-author {
  color: var(--ink-700);
  font-weight: 500;
}

.note-card-date {
  color: var(--ink-500);
  font-size: 0.8125rem;
}

.note-card-date::before {
  content: "·";
  margin-right: 10px;
  color: #cbd5e1;
  font-weight: 700;
}

.note-show-actions {
  display: flex;
  gap: 8px;
}

.note-show-body {
  max-width: 720px;
}

.note-content {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 28px 32px;
  min-height: 120px;
  box-shadow:
    0 1px 3px rgba(17, 20, 34, 0.05),
    0 4px 16px rgba(17, 20, 34, 0.06);
  transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.note-content.cursor-pointer:hover {
  border-color: rgba(62, 100, 255, 0.2);
  box-shadow:
    0 1px 3px rgba(17, 20, 34, 0.06),
    0 6px 24px rgba(17, 20, 34, 0.09);
  cursor: pointer;
}

.note-content.cursor-pointer:active {
  box-shadow:
    0 1px 2px rgba(17, 20, 34, 0.04),
    0 2px 8px rgba(17, 20, 34, 0.06);
}

/* Improve reading typography within the note content area */
.note-content .editor-output {
  gap: 16px;
}

.note-content .editor-paragraph {
  line-height: 1.75;
  color: var(--ink-700);
}

.note-content .editor-headline {
  color: var(--ink-900);
}

.note-empty-content {
  color: #94a3b8;
  font-style: normal;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-empty-content::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  flex-shrink: 0;
}

[data-theme="dark"] .note-show-meta {
  color: #9ca3af;
}

[data-theme="dark"] .note-card-author {
  color: #d1d5db;
}

[data-theme="dark"] .note-card-date {
  color: #9ca3af;
}

[data-theme="dark"] .note-card-date::before {
  color: #374151;
}

[data-theme="dark"] .note-content {
  background: #1c2333;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .note-content.cursor-pointer:hover {
  border-color: rgba(62, 100, 255, 0.3);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.25),
    0 6px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .note-content .editor-paragraph {
  color: #cbd5e1;
}

[data-theme="dark"] .note-empty-content {
  color: #4b5563;
}

[data-theme="dark"] .note-empty-content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}

/* Delete Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 20, 34, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  max-width: 400px;
  width: 90%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 4px 6px -1px rgba(17, 20, 34, 0.07),
    0 16px 40px -4px rgba(17, 20, 34, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  animation: modal-card-in 0.18s ease-out both;
}

.modal-card h3 {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.modal-card p {
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: var(--ink-500);
  line-height: 1.6;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .modal-card {
  background: #1c2333;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 16px 40px -4px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

[data-theme="dark"] .modal-card h3 {
  color: #f1f5f9;
}

[data-theme="dark"] .modal-card p {
  color: #94a3b8;
}

/* Project Notes Section */
.project-notes-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.project-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.project-notes-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.project-notes-empty {
  font-size: 0.8125rem;
  color: #9ca3af;
  font-style: italic;
}

.project-notes-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-note-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.project-note-item:hover {
  background: #f3f4f6;
}

.project-note-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.project-note-meta {
  font-size: 0.75rem;
  color: #6b7280;
}

[data-theme="dark"] .project-notes-section {
  border-color: #374151;
}

[data-theme="dark"] .project-notes-header h2 {
  color: #f9fafb;
}

[data-theme="dark"] .project-notes-empty {
  color: #6b7280;
}

[data-theme="dark"] .project-note-item:hover {
  background: #374151;
}

[data-theme="dark"] .project-note-title {
  color: #f9fafb;
}

[data-theme="dark"] .project-note-meta {
  color: #9ca3af;
}

/* Theme Switcher Options */
.theme-switcher-options {
  display: flex;
  gap: 16px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.theme-option:hover {
  background: #f3f4f6;
  color: #111827;
}

.theme-option-active {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
}

.theme-option-icon {
  width: 24px;
  height: 24px;
}

.theme-option-label {
  font-size: 0.875rem;
  font-weight: 500;
}

[data-theme="dark"] .theme-option {
  border-color: var(--border-default);
  background: var(--surface-2);
  color: var(--text-secondary);
}

[data-theme="dark"] .theme-option:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="dark"] .theme-option-active {
  border-color: #059669;
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

/* Connection Status Toast */
.connection-toast {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.connection-toast svg {
  color: #ef4444;
}

/* ==========================================================================
   Nightshade Dark Mode — Comprehensive Overrides
   ========================================================================== */

/* Tell the browser to use dark form controls */
[data-theme="dark"] {
  color-scheme: dark;
}

/* --- Smooth transitions --- */
body,
.app-layout,
.sidebar,
.app-header,
.app-content,
.card,
.settings-card,
.dialog-panel,
.dropdown-menu,
.header-dropdown-menu,
.sidebar-dropdown,
.sidebar-user-dropdown,
.flash {
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* --- App Shell --- */
[data-theme="dark"] .app-layout {
  background: var(--surface-1);
}

[data-theme="dark"] .app-content {
  background: var(--surface-1);
}

/* --- Sidebar --- */
[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-0) 100%);
  box-shadow: 1px 0 0 var(--border-default), 4px 0 16px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .sidebar-team {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .sidebar-team-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sidebar-collapse-btn {
  color: var(--text-tertiary);
}

[data-theme="dark"] .sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

[data-theme="dark"] .sidebar-team-chevron {
  color: var(--text-tertiary);
}

[data-theme="dark"] .sidebar-dropdown {
  background: var(--surface-3);
  border-color: var(--border-default);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 12px 24px -4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sidebar-dropdown-section {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .sidebar-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sidebar-nav-item.is-active {
  background: rgba(107, 138, 255, 0.12);
  color: var(--brand-500);
}

[data-theme="dark"] .sidebar-nav-item.is-active svg {
  color: var(--brand-500);
}

[data-theme="dark"] .sidebar-user {
  border-top-color: var(--border-subtle);
}

[data-theme="dark"] .sidebar-user-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sidebar-user-dropdown {
  background: var(--surface-3);
  border-color: var(--border-default);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 12px 24px -4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sidebar.is-open {
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4), 1px 0 0 var(--border-default);
}

/* --- App Header --- */
[data-theme="dark"] .app-header {
  background: rgba(15, 18, 25, 0.95);
  border-bottom-color: var(--border-default);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .app-header-back {
  color: var(--text-tertiary);
}

[data-theme="dark"] .app-header-back:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

/* --- Buttons --- */
[data-theme="dark"] .btn-secondary {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

[data-theme="dark"] .btn-danger:hover {
  background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .btn-icon {
  color: var(--text-tertiary);
}

[data-theme="dark"] .btn-icon:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

[data-theme="dark"] .mobile-menu-btn {
  color: var(--text-tertiary);
}

[data-theme="dark"] .mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

/* --- Header Dropdown --- */
[data-theme="dark"] .header-dropdown-menu {
  background: var(--surface-3);
  border-color: var(--border-default);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 12px 24px -4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .header-dropdown-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .header-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

[data-theme="dark"] .header-dropdown-item-danger {
  color: #ef4444;
}

[data-theme="dark"] .header-dropdown-item-danger:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #ef4444;
}

/* --- Generic Dropdown --- */
[data-theme="dark"] .dropdown-menu {
  background: var(--surface-3);
  border-color: var(--border-default);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 12px 24px -4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dropdown-menu-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

/* --- Cards --- */
[data-theme="dark"] .card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .card-header {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .card-header h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .card-empty p {
  color: var(--text-secondary);
}

[data-theme="dark"] .card-empty svg {
  color: #059669;
}

/* --- Tables (supplement existing) --- */
[data-theme="dark"] .table td {
  border-bottom-color: var(--border-subtle);
}

/* --- Dashboard --- */
[data-theme="dark"] .birthday-story:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .birthday-initials {
  background: var(--surface-2);
  color: var(--text-secondary);
}

[data-theme="dark"] .birthday-name {
  color: var(--text-primary);
}

[data-theme="dark"] .birthday-date {
  color: var(--text-secondary);
}

[data-theme="dark"] .birthday-age {
  color: var(--text-tertiary);
}

[data-theme="dark"] .chart-legend {
  border-top-color: var(--border-subtle);
}

[data-theme="dark"] .chart-legend-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .heatmap-legend {
  color: var(--text-secondary);
}

[data-theme="dark"] .heatmap-day-0 {
  background: var(--surface-3);
}

/* --- Ticket list --- */
[data-theme="dark"] .ticket-item {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .ticket-item:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .ticket-name {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-project {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

[data-theme="dark"] .ticket-due {
  background: var(--surface-3);
  color: var(--text-secondary);
}

[data-theme="dark"] .ticket-due-overdue {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* --- Status Badges (dark) --- */
[data-theme="dark"] .status-badge-active {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .status-badge-pending {
  background: rgba(180, 83, 9, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .status-badge-on-hold {
  background: rgba(194, 65, 12, 0.15);
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.3);
}

[data-theme="dark"] .status-badge-completed {
  background: rgba(3, 105, 161, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

[data-theme="dark"] .status-badge-default {
  background: var(--surface-3);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

/* --- Generic Badge System --- */
[data-theme="dark"] .badge-gray {
  background: var(--surface-3);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

[data-theme="dark"] .badge-blue {
  background: rgba(29, 78, 216, 0.15);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .badge-green {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .badge-red {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .badge-yellow {
  background: rgba(180, 83, 9, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

/* --- Data Table Badges --- */
[data-theme="dark"] .data-table-badge.badge-success {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .data-table-badge.badge-info {
  background: rgba(29, 78, 216, 0.15);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .data-table-badge.badge-danger {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .data-table-badge.badge-warning {
  background: rgba(180, 83, 9, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

/* --- Ticket Status Badges --- */
[data-theme="dark"] .ticket-status-badge {
  color: var(--text-secondary);
}

/* --- Empty States --- */
[data-theme="dark"] .empty-state {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .empty-state-icon {
  background: var(--surface-3);
}

[data-theme="dark"] .empty-state-icon svg {
  color: var(--text-tertiary);
}

[data-theme="dark"] .empty-state h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .empty-state p {
  color: var(--text-secondary);
}

/* --- Contacts Page --- */
[data-theme="dark"] .contacts-toggle-group {
  background: var(--surface-3);
}

[data-theme="dark"] .contacts-toggle-btn {
  color: var(--text-secondary);
}

[data-theme="dark"] .contacts-toggle-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .contacts-toggle-btn.is-active {
  background: var(--surface-0);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .contact-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .contact-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .contact-card-name {
  color: var(--text-primary);
}

[data-theme="dark"] .contact-card-company {
  color: var(--text-secondary);
}

[data-theme="dark"] .contact-detail-row {
  color: var(--text-secondary);
}

[data-theme="dark"] .contact-detail-row svg {
  color: var(--text-tertiary);
}

[data-theme="dark"] .contacts-empty {
  background: var(--surface-0);
  border-color: var(--border-default);
}

/* --- Project Cards --- */
[data-theme="dark"] .project-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .project-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .project-card-info h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .project-card-info p {
  color: var(--text-secondary);
}

[data-theme="dark"] .project-card-owner {
  color: var(--text-secondary);
}

[data-theme="dark"] .project-card-port-badge {
  background: var(--surface-2);
  color: var(--text-secondary);
}

/* --- Swimlane/Kanban --- */
[data-theme="dark"] .swimlane-column {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .swimlane-column-header {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .swimlane-column-title h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .swimlane-column-count {
  background: var(--surface-3);
  color: var(--text-secondary);
}

[data-theme="dark"] .swimlane-add-btn {
  color: var(--text-tertiary);
}

[data-theme="dark"] .swimlane-add-btn:hover {
  color: var(--text-secondary);
  background: var(--surface-3);
}

[data-theme="dark"] .swimlane-dropzone-empty {
  color: var(--text-tertiary);
}

[data-theme="dark"] .swimlane-card {
  background: var(--surface-2);
  border-color: var(--border-subtle);
}

[data-theme="dark"] .swimlane-card:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .swimlane-card-id {
  color: var(--text-tertiary);
}

[data-theme="dark"] .swimlane-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .swimlane-card-due {
  color: var(--text-tertiary);
}

[data-theme="dark"] .swimlane-dropzone.drag-over {
  background: rgba(16, 185, 129, 0.1);
  border-color: #059669;
}

/* --- Gantt Chart --- */
[data-theme="dark"] .gantt-container {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .gantt-sidebar {
  background: var(--surface-2);
  border-right-color: var(--border-default);
}

[data-theme="dark"] .gantt-sidebar-header {
  background: var(--surface-3);
  border-bottom-color: var(--border-default);
}

[data-theme="dark"] .gantt-sidebar-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .gantt-sidebar-row {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .gantt-milestone-label-row {
  background: var(--surface-2);
}

[data-theme="dark"] .gantt-milestone-label {
  color: var(--text-primary);
}

[data-theme="dark"] .gantt-ticket-label-row {
  background: var(--surface-0);
}

[data-theme="dark"] .gantt-ticket-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .gantt-header-bg {
  fill: var(--surface-3);
}

[data-theme="dark"] .gantt-month-label {
  fill: var(--text-secondary);
}

[data-theme="dark"] .gantt-day-label {
  fill: var(--text-tertiary);
}

[data-theme="dark"] .gantt-milestone-row-bg {
  fill: var(--surface-2);
}

[data-theme="dark"] .gantt-ticket-row-bg {
  fill: var(--surface-0);
}

[data-theme="dark"] .gantt-grid-line {
  stroke: var(--border-default);
}

[data-theme="dark"] .gantt-friday-line {
  stroke: var(--border-subtle);
}

[data-theme="dark"] .gantt-assignee-avatar {
  fill: var(--surface-3);
  stroke: var(--border-default);
}

[data-theme="dark"] .gantt-assignee-initials {
  fill: var(--text-secondary);
}

[data-theme="dark"] .gantt-ticket-popover {
  background: var(--surface-3);
  border-color: var(--border-default);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .gantt-popover-title {
  color: var(--text-primary);
}

[data-theme="dark"] .gantt-popover-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .gantt-popover-timeline {
  border-top-color: var(--border-subtle);
}

[data-theme="dark"] .gantt-empty-state {
  color: var(--text-secondary);
}

[data-theme="dark"] .gantt-empty-state h3 {
  color: var(--text-primary);
}

/* --- Invoices / Estimates Page --- */
[data-theme="dark"] .invoices-filters {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .filter-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] .filter-input {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .filter-select:focus,
[data-theme="dark"] .filter-input:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .invoices-table-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .clickable-row:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .data-table .invoice-number .inv-prefix,
[data-theme="dark"] .data-table .estimate-number .inv-prefix {
  color: var(--text-tertiary);
}

[data-theme="dark"] .data-table .invoice-number .inv-year,
[data-theme="dark"] .data-table .estimate-number .inv-year {
  color: var(--text-secondary);
}

[data-theme="dark"] .data-table .invoice-number .inv-seq,
[data-theme="dark"] .data-table .estimate-number .inv-seq {
  color: #34d399;
}

[data-theme="dark"] .text-muted {
  color: var(--text-secondary);
}

[data-theme="dark"] .text-light {
  color: var(--text-tertiary);
}

[data-theme="dark"] .link-primary {
  color: #34d399;
}

[data-theme="dark"] .link-primary:hover {
  color: #6ee7b7;
}

/* Invoice Show */
[data-theme="dark"] .invoice-header-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .invoice-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

/* Invoice Show details */
[data-theme="dark"] .invoice-title {
  color: var(--text-primary);
}

[data-theme="dark"] .invoice-card-title {
  color: var(--text-secondary);
}

[data-theme="dark"] .invoice-party-name {
  color: var(--text-primary);
}

[data-theme="dark"] .invoice-address {
  color: var(--text-secondary);
}

[data-theme="dark"] .invoice-detail-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .invoice-detail-value {
  color: var(--text-primary);
}

[data-theme="dark"] .invoice-section-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .invoice-section-header {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .invoice-section-title {
  color: var(--text-secondary);
}

[data-theme="dark"] .line-item-name {
  color: var(--text-primary);
}

[data-theme="dark"] .line-item-note {
  color: var(--text-tertiary);
}

[data-theme="dark"] .line-item-meta {
  color: var(--text-tertiary);
}

[data-theme="dark"] .invoice-total-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .invoice-total-value {
  color: var(--text-primary);
}

[data-theme="dark"] .invoice-total-border {
  border-top-color: var(--border-subtle);
}

[data-theme="dark"] .invoice-total-final .invoice-total-label {
  color: var(--text-primary);
}

[data-theme="dark"] .invoice-notes {
  color: var(--text-secondary);
}

[data-theme="dark"] .text-success {
  color: #34d399;
}

[data-theme="dark"] .text-warning {
  color: #fbbf24;
}

[data-theme="dark"] .dropdown-trigger {
  color: var(--text-tertiary);
}

[data-theme="dark"] .dropdown-trigger:hover {
  background: var(--surface-3);
  color: var(--text-secondary);
}

/* --- Pagination --- */
[data-theme="dark"] .pagination-link {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

[data-theme="dark"] .pagination-link:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="dark"] .pagination-link.active {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

/* --- Forms (global) --- */
[data-theme="dark"] .form-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .form-input::placeholder {
  color: var(--text-tertiary);
}

[data-theme="dark"] .form-textarea {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .form-textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .form-textarea::placeholder {
  color: var(--text-tertiary);
}

[data-theme="dark"] .form-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .form-error {
  color: #f87171;
}

/* --- Dialog / Modal --- */
[data-theme="dark"] .dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .dialog-panel {
  background: var(--surface-0);
  border-color: var(--border-default);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dialog-header {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .dialog-title {
  color: var(--text-primary);
}

[data-theme="dark"] .dialog-close {
  color: var(--text-tertiary);
}

[data-theme="dark"] .dialog-close:hover {
  color: var(--text-secondary);
}

[data-theme="dark"] .dialog-body p {
  color: var(--text-secondary);
}

[data-theme="dark"] .dialog-body p strong {
  color: var(--text-primary);
}

[data-theme="dark"] .dialog-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .dialog-text strong {
  color: var(--text-primary);
}

[data-theme="dark"] .dialog-text-muted {
  color: var(--text-tertiary);
}

[data-theme="dark"] .dialog-footer {
  border-top-color: var(--border-subtle);
}

/* --- Flash / Toast --- */
[data-theme="dark"] .flash-info {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .flash-info .flash-icon {
  color: #34d399;
}

[data-theme="dark"] .flash-error {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .flash-error .flash-icon {
  color: #f87171;
}

/* --- Settings Page --- */
[data-theme="dark"] .settings-nav {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .settings-nav-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-nav-item:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="dark"] .settings-nav-item.is-active {
  background: rgba(107, 138, 255, 0.12);
  color: var(--brand-500);
  border-color: rgba(107, 138, 255, 0.2);
}

[data-theme="dark"] .settings-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .settings-card-header {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .settings-card-header-text h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-card-header-text p {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-card-footer {
  border-top-color: var(--border-subtle);
}

[data-theme="dark"] .settings-card-danger {
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .settings-card-danger .settings-card-header {
  background: rgba(220, 38, 38, 0.1);
  border-bottom-color: rgba(248, 113, 113, 0.2);
}

[data-theme="dark"] .settings-card-danger .settings-card-header h3 {
  color: #f87171;
}

[data-theme="dark"] .settings-card-danger .settings-card-header p {
  color: #fca5a5;
}

[data-theme="dark"] .settings-field label {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-input,
[data-theme="dark"] .settings-select {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .settings-input:focus,
[data-theme="dark"] .settings-select:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .settings-input::placeholder {
  color: var(--text-tertiary);
}

[data-theme="dark"] .settings-input[readonly] {
  background: var(--surface-3);
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-hint {
  color: var(--text-tertiary);
}

[data-theme="dark"] .settings-error {
  color: #f87171;
}

[data-theme="dark"] .settings-checkbox-row label {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-checkbox-row label span {
  color: var(--text-tertiary);
}

/* Settings Buttons */
[data-theme="dark"] .settings-btn-primary {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .settings-btn-primary:hover:not(:disabled) {
  background: rgba(4, 120, 87, 0.25);
}

[data-theme="dark"] .settings-btn-secondary {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

[data-theme="dark"] .settings-btn-secondary:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="dark"] .settings-btn-danger {
  background: rgba(220, 38, 38, 0.1);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.2);
}

[data-theme="dark"] .settings-btn-danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.2);
}

[data-theme="dark"] .settings-btn-icon {
  color: var(--text-tertiary);
}

[data-theme="dark"] .settings-btn-icon:hover {
  background: var(--surface-3);
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-btn-icon.danger:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* Settings Alerts */
[data-theme="dark"] .settings-alert-info {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .settings-alert-info svg {
  color: #60a5fa;
}

[data-theme="dark"] .settings-alert-info p {
  color: #93bbfd;
}

[data-theme="dark"] .settings-alert-success {
  background: rgba(4, 120, 87, 0.1);
  border-color: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .settings-alert-success svg {
  color: #34d399;
}

[data-theme="dark"] .settings-alert-success p {
  color: #6ee7b7;
}

[data-theme="dark"] .settings-alert-warning {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(251, 191, 36, 0.2);
}

[data-theme="dark"] .settings-alert-warning svg {
  color: #fbbf24;
}

[data-theme="dark"] .settings-alert-warning p {
  color: #fcd34d;
}

/* Settings Members */
[data-theme="dark"] .settings-member-row {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .settings-member-row:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .settings-member-avatar.active {
  background: rgba(4, 120, 87, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
}

[data-theme="dark"] .settings-member-avatar.virtual {
  background: var(--surface-3);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-member-avatar.pending {
  background: rgba(180, 83, 9, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

[data-theme="dark"] .settings-member-details .name {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-member-details .email {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-member-details .meta {
  color: var(--text-tertiary);
}

/* Settings Badges */
[data-theme="dark"] .settings-badge-gray {
  background: var(--surface-3);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

/* Settings Deletion Stats */
[data-theme="dark"] .settings-deletion-stats {
  background: var(--surface-2);
}

[data-theme="dark"] .settings-deletion-stats > p {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-deletion-stats-grid {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-deletion-stats-grid strong {
  color: var(--text-primary);
}

/* Settings Danger Items */
[data-theme="dark"] .settings-danger-item h4 {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-danger-item p {
  color: var(--text-secondary);
}

/* Settings Permissions */
[data-theme="dark"] .settings-permission-toggle.is-enabled {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .settings-permission-toggle.is-disabled {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

/* Settings Info Box */
[data-theme="dark"] .settings-info-box {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .settings-info-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-info-text strong {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-info-hint {
  color: var(--text-tertiary);
}

/* Settings Success Box */
[data-theme="dark"] .settings-success-box {
  background: rgba(4, 120, 87, 0.1);
  border-color: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .settings-success-title {
  color: #34d399;
}

[data-theme="dark"] .settings-success-text {
  color: #6ee7b7;
}

[data-theme="dark"] .settings-token-display {
  background: var(--surface-2);
  border-color: rgba(52, 211, 153, 0.2);
  color: var(--text-primary);
}

/* Settings Label */
[data-theme="dark"] .settings-label {
  color: var(--text-secondary);
}

/* Settings Field Error */
[data-theme="dark"] .settings-field-error {
  color: #f87171;
}

/* Settings Version */
[data-theme="dark"] .settings-version {
  color: var(--text-tertiary);
}

/* Settings Table */
[data-theme="dark"] .settings-table-th {
  color: var(--text-primary);
  border-bottom-color: var(--border-default);
}

[data-theme="dark"] .settings-table-row:not(:last-child) {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .settings-table-row:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .settings-table-td {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-table-td-secondary {
  color: var(--text-secondary);
}

/* Settings Key Display */
[data-theme="dark"] .settings-key-name {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-key-uuid {
  color: var(--text-tertiary);
}

/* Settings Section */
[data-theme="dark"] .settings-section-title {
  color: var(--text-primary);
}

/* Settings Details */
[data-theme="dark"] .settings-details-summary {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-details-content {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-details-divider {
  border-top-color: var(--border-subtle);
}

[data-theme="dark"] .settings-details-heading {
  color: #34d399;
}

[data-theme="dark"] .settings-details-hint {
  color: var(--text-tertiary);
}

[data-theme="dark"] .settings-details-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-details-ol {
  color: var(--text-tertiary);
}

[data-theme="dark"] .settings-details-tip {
  border-top-color: var(--border-subtle);
  color: var(--text-tertiary);
}

/* Settings Code */
[data-theme="dark"] .settings-code-block {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .settings-inline-code {
  background: var(--surface-3);
  color: var(--text-secondary);
}

/* --- Hosting Page --- */
[data-theme="dark"] .hosting-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .hosting-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .hosting-card-desc {
  color: var(--text-secondary);
}

[data-theme="dark"] .hosting-card-count {
  color: var(--text-secondary);
}

[data-theme="dark"] .hosting-stat-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .hosting-stat-value {
  color: var(--text-primary);
}

[data-theme="dark"] .hosting-stat-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .hosting-stat-detail {
  color: var(--text-tertiary);
}

/* Section Tabs */
[data-theme="dark"] .section-tab {
  border-color: var(--border-default);
  color: var(--text-secondary);
}

[data-theme="dark"] .section-tab:hover:not(.is-disabled) {
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="dark"] .section-tab.is-active {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .section-tab.is-disabled {
  color: var(--text-tertiary);
}

/* --- Table Action Buttons --- */
[data-theme="dark"] .btn-table-secondary {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

[data-theme="dark"] .btn-table-secondary:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="dark"] .btn-table-danger {
  background: rgba(220, 38, 38, 0.1);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.2);
}

[data-theme="dark"] .btn-table-danger:hover {
  background: rgba(220, 38, 38, 0.2);
}

/* --- Invoice Select (copy modal) --- */
[data-theme="dark"] .invoice-select-item {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .invoice-select-item:hover {
  background: var(--surface-3);
}

/* --- Color Picker --- */
[data-theme="dark"] .color-picker-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--text-primary);
}

/* --- Mobile Overlay --- */
[data-theme="dark"] .mobile-overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* --- Connection Status Toast --- */
[data-theme="dark"] .connection-toast {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

/* --- Form inline add --- */
[data-theme="dark"] .form-section-header {
  color: var(--text-primary);
  border-bottom-color: var(--border-subtle);
}

/* --- Container Card (hosting) --- */
[data-theme="dark"] .container-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

/* --- Project Show / Header --- */
[data-theme="dark"] .project-show-header {
  color: var(--text-primary);
}

/* --- Ticket Empty State (used inside gantt/projects) --- */
[data-theme="dark"] .ticket-empty-state,
[data-theme="dark"] .empty-state-card {
  background: var(--surface-0);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

[data-theme="dark"] .empty-state-card svg {
  color: var(--text-tertiary);
}

[data-theme="dark"] .empty-state-card h3 {
  color: var(--text-secondary);
}

[data-theme="dark"] .empty-state-card p {
  color: var(--text-tertiary);
}

/* --- Toggle group (All / Pending / Active / On Hold / Completed) --- */
[data-theme="dark"] .toggle-group {
  background: var(--surface-3);
}

[data-theme="dark"] .toggle-group-indicator {
  background: var(--surface-0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .toggle-group-btn {
  color: var(--text-secondary);
}

[data-theme="dark"] .toggle-group-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .toggle-group-btn.active {
  color: var(--text-primary);
}

/* --- Contact form buttons --- */
[data-theme="dark"] .contact-form-btn-primary {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .contact-form-btn-primary:hover {
  background: rgba(4, 120, 87, 0.25);
}

[data-theme="dark"] .contact-form-btn-secondary {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

[data-theme="dark"] .contact-form-btn-secondary:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="dark"] .contact-form-btn-danger {
  background: rgba(220, 38, 38, 0.1);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.2);
}

[data-theme="dark"] .contact-form-btn-danger:hover {
  background: rgba(220, 38, 38, 0.2);
}

/* --- Birthday calendar page --- */
[data-theme="dark"] .birthday-nav-btn {
  background: var(--surface-0);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

[data-theme="dark"] .birthday-nav-btn:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="dark"] .birthday-nav h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .birthday-calendar {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .birthday-calendar-header {
  border-bottom-color: var(--border-default);
}

[data-theme="dark"] .birthday-calendar-header-cell {
  color: var(--text-secondary);
}

[data-theme="dark"] .birthday-calendar-day {
  border-bottom-color: var(--border-subtle);
  border-right-color: var(--border-subtle);
}

[data-theme="dark"] .birthday-calendar-day.is-empty {
  background: var(--surface-2);
}

[data-theme="dark"] .birthday-calendar-day.is-today {
  background: rgba(4, 120, 87, 0.1);
}

[data-theme="dark"] .birthday-calendar-day-number {
  color: var(--text-secondary);
}

[data-theme="dark"] .birthday-calendar-day.is-today .birthday-calendar-day-number {
  color: #34d399;
}

[data-theme="dark"] .birthday-list {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .birthday-list-header {
  border-bottom-color: var(--border-default);
}

[data-theme="dark"] .birthday-list-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .birthday-list-empty {
  color: var(--text-secondary);
}

[data-theme="dark"] .birthday-list-item {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .birthday-list-item:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .birthday-list-info .name {
  color: var(--text-primary);
}

[data-theme="dark"] .birthday-list-info .date {
  color: var(--text-secondary);
}

[data-theme="dark"] .birthday-list-info .date .age {
  color: var(--text-tertiary);
}

/* --- Data table (full dark override) --- */
[data-theme="dark"] .data-table-container {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .data-table-header {
  border-bottom-color: var(--border-default);
}

[data-theme="dark"] .data-table-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .data-table th {
  color: var(--text-secondary);
  background: var(--surface-2);
  border-bottom-color: var(--border-default);
}

[data-theme="dark"] .data-table td {
  color: var(--text-secondary);
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .data-table td.font-medium {
  color: var(--text-primary);
}

[data-theme="dark"] .data-table tbody tr:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .data-table .text-success {
  color: #34d399;
}

/* --- TIN verification --- */
[data-theme="dark"] .tin-verify-section {
  background: var(--surface-2);
  border-color: var(--border-default);
}

/* --- Ticket card (full) --- */
[data-theme="dark"] .ticket-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-card-header h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-btn-secondary {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-btn-secondary:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-attachment-upload-name {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-attachment-link {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-comment-author {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-comment-body {
  color: var(--text-secondary);
}

[data-theme="dark"] .ticket-timer-time {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-detail-text {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-subscriber-name {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-add-subscriber-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-badge {
  color: var(--text-secondary);
  background: var(--surface-3);
}

[data-theme="dark"] .ticket-dates-value {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-rate-menu {
  background: var(--surface-3);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-rate-btn span {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-rate-option-name {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-rate-option-amount {
  color: var(--text-secondary);
}

/* --- Editor --- */
[data-theme="dark"] .editor-menu {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .editor-input,
[data-theme="dark"] .editor-select,
[data-theme="dark"] .editor-textarea {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .editor-input:focus,
[data-theme="dark"] .editor-select:focus,
[data-theme="dark"] .editor-textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .editor-textarea-code::placeholder {
  color: var(--text-tertiary);
}

/* --- Modal inputs --- */
[data-theme="dark"] .modal-input,
[data-theme="dark"] .modal-select,
[data-theme="dark"] .modal-textarea {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-input:focus,
[data-theme="dark"] .modal-select:focus,
[data-theme="dark"] .modal-textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .modal-text strong {
  color: var(--text-primary);
}

[data-theme="dark"] .modal-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .modal-btn-secondary {
  color: var(--text-secondary);
}

[data-theme="dark"] .modal-btn-secondary:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .modal-status-option {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .modal-status-name {
  color: var(--text-primary);
}

/* --- Members / Roles --- */
[data-theme="dark"] .members-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .members-tab-inactive {
  color: var(--text-secondary);
}

[data-theme="dark"] .members-tab-inactive:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .members-empty h3 {
  color: var(--text-secondary);
}

[data-theme="dark"] .member-name {
  color: var(--text-primary);
}

[data-theme="dark"] .role-badge-viewer {
  color: var(--text-secondary);
}

[data-theme="dark"] .role-dropdown-menu {
  background: var(--surface-3);
  border-color: var(--border-default);
}

[data-theme="dark"] .role-dropdown-option {
  color: var(--text-secondary);
}

[data-theme="dark"] .role-dropdown-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .role-dropdown-option.selected {
  color: var(--text-primary);
}

[data-theme="dark"] .member-remove-btn {
  color: var(--text-secondary);
}

[data-theme="dark"] .virtual-badge {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-role-menu {
  background: var(--surface-3);
  border-color: var(--border-default);
}

[data-theme="dark"] .settings-role-menu-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-role-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .settings-role-menu-item.is-active {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-invitation-link-row input {
  color: var(--text-secondary);
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .settings-empty h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-upload-zone p {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-upload-progress-header span:first-child {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-permissions-resource h4 {
  color: var(--text-primary);
}

/* --- Status / Rates --- */
[data-theme="dark"] .status-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .status-card-title h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .status-action-btn:hover {
  color: var(--text-secondary);
}

[data-theme="dark"] .status-property {
  color: var(--text-secondary);
}

[data-theme="dark"] .status-form-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .status-checkbox-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .status-form-section-title {
  color: var(--text-secondary);
}

[data-theme="dark"] .rates-table-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .rates-empty-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .rates-empty-card h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .rate-name {
  color: var(--text-primary);
}

[data-theme="dark"] .rate-type-derived {
  color: var(--text-secondary);
}

[data-theme="dark"] .rate-action-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .rate-form-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .rate-form-card-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .rate-form-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .rate-form-input,
[data-theme="dark"] .rate-form-select {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .rate-form-input:focus,
[data-theme="dark"] .rate-form-select:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .rate-form-radio-option {
  color: var(--text-secondary);
}

/* --- Time logs --- */
[data-theme="dark"] .time-logs-summary-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .time-logs-view-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .time-logs-view-btn.active {
  background: var(--surface-0);
  color: var(--text-primary);
}

[data-theme="dark"] .time-logs-empty {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .time-logs-empty h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .time-log-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .time-log-ticket {
  color: var(--text-primary);
}

[data-theme="dark"] .time-log-stat-value {
  color: var(--text-primary);
}

[data-theme="dark"] .time-log-badge-default {
  color: var(--text-secondary);
  background: var(--surface-3);
}

[data-theme="dark"] .time-logs-table-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .time-log-table-ticket {
  color: var(--text-primary);
}

[data-theme="dark"] .time-log-action-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .time-blocks-table td {
  color: var(--text-secondary);
}

[data-theme="dark"] .time-blocks-total strong {
  color: var(--text-primary);
}

[data-theme="dark"] .edit-time-log-textarea {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .edit-time-log-textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .edit-time-log-value {
  color: var(--text-primary);
}

[data-theme="dark"] .edit-time-blocks-total strong {
  color: var(--text-primary);
}

[data-theme="dark"] .confirm-title {
  color: var(--text-primary);
}

/* --- Invoice / Payment details --- */
[data-theme="dark"] .payment-summary-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .detail-note-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .invoice-number {
  color: var(--text-primary);
}

[data-theme="dark"] .party-name {
  color: var(--text-primary);
}

[data-theme="dark"] .allowance-item-name {
  color: var(--text-secondary);
}

[data-theme="dark"] .notes-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .confirm-dialog-title {
  color: var(--text-primary);
}

[data-theme="dark"] .radio-label {
  color: var(--text-primary);
}

[data-theme="dark"] .allowance-charge-reason {
  color: var(--text-secondary);
}

[data-theme="dark"] .payment-summary-invoice-total {
  color: var(--text-secondary);
}

[data-theme="dark"] .transfer-amount {
  color: var(--text-primary);
}

[data-theme="dark"] .transfer-account-name {
  color: var(--text-secondary);
}

/* --- Hosting / Infrastructure --- */
[data-theme="dark"] .stack-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .stack-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .stack-header {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .stack-header-info h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .key-display-box {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .key-display-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .key-display-content {
  color: var(--text-secondary);
}

[data-theme="dark"] .command-display {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .server-stat-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .server-header-info h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .server-status-value {
  color: var(--text-primary);
}

[data-theme="dark"] .server-stat-value {
  color: var(--text-primary);
}

[data-theme="dark"] .setup-step-name {
  color: var(--text-primary);
}

[data-theme="dark"] .setup-step-output pre {
  background: var(--surface-2);
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-detail-value {
  color: var(--text-primary);
}

/* --- Deployment / Container details --- */
[data-theme="dark"] .project-header-info h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .project-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .breadcrumb-link:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .container-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .container-card-detail-value {
  color: var(--text-secondary);
}

[data-theme="dark"] .volume-badge {
  color: var(--text-secondary);
}

[data-theme="dark"] .volume-mapping {
  color: var(--text-secondary);
}

[data-theme="dark"] .env-var-row {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .env-var-key {
  color: var(--text-primary);
}

[data-theme="dark"] .label-badge {
  color: var(--text-secondary);
}

[data-theme="dark"] .verify-record {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .verify-record-value {
  color: var(--text-secondary);
}

[data-theme="dark"] .delete-modal-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .delete-modal-text strong {
  color: var(--text-primary);
}

[data-theme="dark"] .deployment-step-name {
  color: var(--text-secondary);
}

[data-theme="dark"] .credential-registry {
  color: var(--text-secondary);
}

/* --- Generic field inputs --- */
[data-theme="dark"] .field-input {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .field-input:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .field-input::placeholder {
  color: var(--text-tertiary);
}

[data-theme="dark"] .field-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .field-checkbox {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .field-checkbox-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .form-checkbox {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .form-checkbox-label {
  color: var(--text-secondary);
}

/* --- Contact form --- */
[data-theme="dark"] .contact-form-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .contact-form-card-body h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .contact-form-field label {
  color: var(--text-secondary);
}

[data-theme="dark"] .contact-form-input,
[data-theme="dark"] .contact-form-select {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .contact-form-input:focus,
[data-theme="dark"] .contact-form-select:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .contact-form-input::placeholder {
  color: var(--text-tertiary);
}

[data-theme="dark"] .contact-form-btn-secondary {
  color: var(--text-secondary);
}

[data-theme="dark"] .contact-form-btn-secondary:hover {
  color: var(--text-primary);
}

/* --- Corporation cards --- */
[data-theme="dark"] .corporation-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .corporation-card:hover {
  border-color: var(--border-strong);
}

[data-theme="dark"] .corporation-card-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .corporation-contact-info .name {
  color: var(--text-primary);
}

/* --- Drawer --- */
[data-theme="dark"] .drawer-content {
  background: var(--surface-0);
}

[data-theme="dark"] .drawer-header h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .drawer-dl-row dd {
  color: var(--text-primary);
}

[data-theme="dark"] .drawer-address {
  color: var(--text-primary);
}

[data-theme="dark"] .drawer-footer-btn-secondary {
  color: var(--text-secondary);
}

[data-theme="dark"] .drawer-footer-btn-secondary:hover {
  color: var(--text-primary);
}

/* --- Data table --- */
[data-theme="dark"] .data-table-container {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .data-table-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .data-table td {
  color: var(--text-secondary);
}

[data-theme="dark"] .data-table td.font-medium {
  color: var(--text-primary);
}

/* --- Card item --- */
[data-theme="dark"] .card-item {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .card-item-info h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .card-item-detail {
  color: var(--text-secondary);
}

/* --- Birthday module --- */
[data-theme="dark"] .birthday-nav-btn {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .birthday-nav-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .birthday-nav h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .birthday-calendar {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .birthday-list {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .birthday-list-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .birthday-list-info .name {
  color: var(--text-primary);
}

/* --- Toggle group --- */
[data-theme="dark"] .toggle-group-indicator {
  background: var(--surface-0);
}

[data-theme="dark"] .toggle-group-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .toggle-group-btn.active {
  color: var(--text-primary);
}

/* --- Milestones --- */
[data-theme="dark"] .milestone-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .milestone-card-title h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .milestone-ticket-info h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .milestone-ticket-details h3 {
  color: var(--text-primary);
}

/* --- Tickets --- */
[data-theme="dark"] .ticket-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-card-header h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-btn-secondary {
  color: var(--text-secondary);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-btn-secondary:hover {
  color: var(--text-primary);
  background: var(--surface-3);
}

[data-theme="dark"] .ticket-attachment-upload-name {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-attachment-link {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-comment-author {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-comment-body {
  color: var(--text-secondary);
}

[data-theme="dark"] .ticket-timer-time {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-detail-text {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-subscriber-name {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-add-subscriber-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-badge {
  color: var(--text-secondary);
  background: var(--surface-3);
}

[data-theme="dark"] .ticket-dates-value {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-rate-menu {
  background: var(--surface-3);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-rate-btn span {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-rate-option-name {
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-rate-option-amount {
  color: var(--text-secondary);
}

/* --- Editor --- */
[data-theme="dark"] .editor-menu {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .editor-input,
[data-theme="dark"] .editor-select,
[data-theme="dark"] .editor-textarea {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .editor-input:focus,
[data-theme="dark"] .editor-select:focus,
[data-theme="dark"] .editor-textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .editor-textarea-code::placeholder {
  color: var(--text-tertiary);
}

[data-theme="dark"] .editor-textarea-code:hover {
  color: var(--text-secondary);
}

/* --- Modals (generic) --- */
[data-theme="dark"] .modal-input,
[data-theme="dark"] .modal-select,
[data-theme="dark"] .modal-textarea {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-input:focus,
[data-theme="dark"] .modal-select:focus,
[data-theme="dark"] .modal-textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .modal-text strong {
  color: var(--text-primary);
}

[data-theme="dark"] .modal-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .modal-btn-secondary {
  color: var(--text-secondary);
}

[data-theme="dark"] .modal-btn-secondary:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .modal-status-option {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .modal-status-name {
  color: var(--text-primary);
}

/* --- Members / Roles --- */
[data-theme="dark"] .members-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .members-tab-inactive {
  color: var(--text-secondary);
}

[data-theme="dark"] .members-tab-inactive:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .members-empty h3 {
  color: var(--text-secondary);
}

[data-theme="dark"] .member-name {
  color: var(--text-primary);
}

[data-theme="dark"] .role-badge-viewer {
  color: var(--text-secondary);
}

[data-theme="dark"] .role-dropdown-menu {
  background: var(--surface-3);
  border-color: var(--border-default);
}

[data-theme="dark"] .role-dropdown-option {
  color: var(--text-secondary);
}

[data-theme="dark"] .role-dropdown-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .role-dropdown-option.selected {
  color: var(--text-primary);
}

[data-theme="dark"] .member-remove-btn {
  color: var(--text-secondary);
}

[data-theme="dark"] .virtual-badge {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-role-menu {
  background: var(--surface-3);
  border-color: var(--border-default);
}

[data-theme="dark"] .settings-role-menu-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-role-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .settings-role-menu-item.is-active {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-invitation-link-row input {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-empty h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-upload-zone p {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-upload-progress-header span:first-child {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-permissions-resource h4 {
  color: var(--text-primary);
}

/* --- Status / Rates --- */
[data-theme="dark"] .status-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .status-card-title h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .status-action-btn:hover {
  color: var(--text-secondary);
}

[data-theme="dark"] .status-property {
  color: var(--text-secondary);
}

[data-theme="dark"] .status-form-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .status-checkbox-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .status-form-section-title {
  color: var(--text-secondary);
}

[data-theme="dark"] .rates-table-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .rates-empty-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .rates-empty-card h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .rate-name {
  color: var(--text-primary);
}

[data-theme="dark"] .rate-type-derived {
  color: var(--text-secondary);
}

[data-theme="dark"] .rate-action-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .rate-form-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .rate-form-card-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .rate-form-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .rate-form-input,
[data-theme="dark"] .rate-form-select {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .rate-form-input:focus,
[data-theme="dark"] .rate-form-select:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .rate-form-radio-option {
  color: var(--text-secondary);
}

/* --- Time logs --- */
[data-theme="dark"] .time-logs-summary-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .time-logs-view-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .time-logs-view-btn.active {
  background: var(--surface-0);
  color: var(--text-primary);
}

[data-theme="dark"] .time-logs-empty {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .time-logs-empty h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .time-log-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .time-log-ticket {
  color: var(--text-primary);
}

[data-theme="dark"] .time-log-stat-value {
  color: var(--text-primary);
}

[data-theme="dark"] .time-log-badge-default {
  color: var(--text-secondary);
  background: var(--surface-3);
}

[data-theme="dark"] .time-logs-table-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .time-log-table-ticket {
  color: var(--text-primary);
}

[data-theme="dark"] .time-log-action-btn:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .time-blocks-table td {
  color: var(--text-secondary);
}

[data-theme="dark"] .time-blocks-total strong {
  color: var(--text-primary);
}

[data-theme="dark"] .edit-time-log-textarea {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .edit-time-log-textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .edit-time-log-value {
  color: var(--text-primary);
}

[data-theme="dark"] .edit-time-blocks-total strong {
  color: var(--text-primary);
}

[data-theme="dark"] .confirm-title {
  color: var(--text-primary);
}

/* --- Icon buttons (generic) --- */
[data-theme="dark"] .icon-btn:hover {
  color: var(--text-secondary);
}

/* --- Dropdown menus (generic links) --- */
[data-theme="dark"] .dropdown-menu a {
  color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-menu a:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* --- Invoice / Payment details --- */
[data-theme="dark"] .payment-summary-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .detail-note-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .invoice-number {
  color: var(--text-primary);
}

[data-theme="dark"] .party-name {
  color: var(--text-primary);
}

[data-theme="dark"] .allowance-item-name {
  color: var(--text-secondary);
}

[data-theme="dark"] .notes-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .confirm-dialog-title {
  color: var(--text-primary);
}

[data-theme="dark"] .radio-label {
  color: var(--text-primary);
}

[data-theme="dark"] .allowance-charge-reason {
  color: var(--text-secondary);
}

[data-theme="dark"] .payment-summary-invoice-total {
  color: var(--text-secondary);
}

[data-theme="dark"] .transfer-amount {
  color: var(--text-primary);
}

[data-theme="dark"] .transfer-account-name {
  color: var(--text-secondary);
}

/* --- Hosting / Infrastructure --- */
[data-theme="dark"] .stack-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .stack-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .stack-header {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .stack-header-info h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .key-display-box {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .key-display-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .key-display-content {
  color: var(--text-secondary);
}

[data-theme="dark"] .command-display {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .server-stat-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .server-header-info h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .server-status-value {
  color: var(--text-primary);
}

[data-theme="dark"] .server-stat-value {
  color: var(--text-primary);
}

[data-theme="dark"] .setup-step-name {
  color: var(--text-primary);
}

[data-theme="dark"] .setup-step-output pre {
  background: var(--surface-2);
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-detail-value {
  color: var(--text-primary);
}

/* --- Deployment / Container --- */
[data-theme="dark"] .project-header-info h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .project-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .breadcrumb-link:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .container-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .container-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .container-card-detail-value {
  color: var(--text-secondary);
}

[data-theme="dark"] .volume-badge {
  color: var(--text-secondary);
}

[data-theme="dark"] .volume-mapping {
  color: var(--text-secondary);
}

[data-theme="dark"] .env-var-row {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .env-var-key {
  color: var(--text-primary);
}

[data-theme="dark"] .label-badge {
  color: var(--text-secondary);
}

[data-theme="dark"] .verify-record {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .verify-record-value {
  color: var(--text-secondary);
}

[data-theme="dark"] .delete-modal-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .delete-modal-text strong {
  color: var(--text-primary);
}

[data-theme="dark"] .deployment-step-name {
  color: var(--text-secondary);
}

[data-theme="dark"] .credential-registry {
  color: var(--text-secondary);
}

/* --- Detail items (line-item show, etc.) --- */
[data-theme="dark"] .detail-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .detail-value {
  color: var(--text-primary);
}

[data-theme="dark"] .detail-note {
  border-top-color: var(--border-subtle);
}

/* --- Form Card Header --- */
[data-theme="dark"] .form-card-header {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .form-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .form-card-description {
  color: var(--text-secondary);
}

/* --- Transfers list --- */
[data-theme="dark"] .transfer-item {
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .transfer-item:hover {
  background: var(--surface-3);
}

/* --- Payment breakdown --- */
[data-theme="dark"] .payment-breakdown-header {
  color: var(--text-secondary);
}

[data-theme="dark"] .payment-breakdown-count {
  background: var(--surface-3);
  color: var(--text-secondary);
}

[data-theme="dark"] .payment-conversion-item,
[data-theme="dark"] .payment-transfer-item {
  color: var(--text-secondary);
}

/* --- Form checkbox row (hosting forms) --- */
[data-theme="dark"] .form-checkbox-row label {
  color: var(--text-secondary);
}

/* --- Form section header --- */
[data-theme="dark"] .form-section-header {
  border-bottom-color: var(--border-subtle);
}

/* --- Required field marker --- */
[data-theme="dark"] .required {
  color: #f87171;
}

/* --- Tailwind utility overrides for dark mode ---
   These catch inline Tailwind classes used in LiveView templates
   that cannot respond to CSS custom properties. */
[data-theme="dark"] .bg-white {
  background-color: var(--surface-0) !important;
}

[data-theme="dark"] .bg-gray-50 {
  background-color: var(--surface-2) !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: var(--surface-3) !important;
}

[data-theme="dark"] .text-gray-900 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-800 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-700 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-600 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-500 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-400 {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .border-gray-200 {
  border-color: var(--border-default) !important;
}

[data-theme="dark"] .border-gray-100 {
  border-color: var(--border-subtle) !important;
}

[data-theme="dark"] .border-gray-300 {
  border-color: var(--border-strong) !important;
}

[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-default) !important;
}

[data-theme="dark"] .hover\:bg-gray-50:hover {
  background-color: var(--surface-3) !important;
}

[data-theme="dark"] .hover\:bg-gray-100:hover {
  background-color: var(--surface-3) !important;
}

[data-theme="dark"] .bg-emerald-50 {
  background-color: rgba(4, 120, 87, 0.15) !important;
}

[data-theme="dark"] .text-emerald-700 {
  color: #34d399 !important;
}

[data-theme="dark"] .border-emerald-500 {
  border-color: #059669 !important;
}

[data-theme="dark"] .ring-gray-300 {
  --tw-ring-color: var(--border-default) !important;
}

[data-theme="dark"] .ring-emerald-200 {
  --tw-ring-color: rgba(5, 150, 105, 0.4) !important;
}

[data-theme="dark"] .placeholder-gray-400::placeholder {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .border-emerald-200 {
  border-color: rgba(5, 150, 105, 0.4) !important;
}

[data-theme="dark"] .text-gray-300 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-red-500 {
  color: #f87171 !important;
}

[data-theme="dark"] .bg-gray-200 {
  background-color: var(--surface-3) !important;
}

[data-theme="dark"] .hover\:text-gray-900:hover {
  color: var(--text-primary) !important;
}

/* Alert/notification Tailwind overrides */
[data-theme="dark"] .bg-red-50 {
  background-color: rgba(220, 38, 38, 0.15) !important;
}

[data-theme="dark"] .text-red-800 {
  color: #f87171 !important;
}

[data-theme="dark"] .border-red-200 {
  border-color: rgba(248, 113, 113, 0.3) !important;
}

[data-theme="dark"] .bg-green-50 {
  background-color: rgba(4, 120, 87, 0.15) !important;
}

[data-theme="dark"] .text-green-800 {
  color: #34d399 !important;
}

[data-theme="dark"] .border-green-200 {
  border-color: rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .bg-blue-50 {
  background-color: rgba(37, 99, 235, 0.1) !important;
}

[data-theme="dark"] .text-blue-800 {
  color: #60a5fa !important;
}

[data-theme="dark"] .border-blue-200 {
  border-color: rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .bg-yellow-50 {
  background-color: rgba(217, 119, 6, 0.1) !important;
}

[data-theme="dark"] .text-yellow-800 {
  color: #fbbf24 !important;
}

[data-theme="dark"] .border-yellow-200 {
  border-color: rgba(251, 191, 36, 0.3) !important;
}

/* ==============================================
   NIGHTSHADE: Comprehensive remaining overrides
   ============================================== */

/* --- Dashboard ticket status & due badges --- */
[data-theme="dark"] .ticket-status {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

[data-theme="dark"] .ticket-due {
  background: var(--surface-3);
  color: var(--text-secondary);
}

[data-theme="dark"] .ticket-due-overdue {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* --- Settings badges --- */
[data-theme="dark"] .settings-badge-green {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .settings-badge-blue {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .settings-badge-purple {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.3);
}

/* --- Settings misc --- */
[data-theme="dark"] .settings-invitation:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .settings-empty-icon {
  background: var(--surface-3);
}

[data-theme="dark"] .settings-empty-icon svg {
  color: var(--text-tertiary);
}

[data-theme="dark"] .settings-empty h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-empty p {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-invite-form {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .settings-logo-preview {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .settings-upload-progress {
  background: var(--surface-2);
  border-color: var(--border-default);
}

/* --- Corporation --- */
[data-theme="dark"] .corporation-card-header:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .corporation-card-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .corporation-contact-count {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

[data-theme="dark"] .corporation-contact-item {
  background: var(--surface-2);
}

[data-theme="dark"] .corporation-contact-item:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .corporation-contact-info .name {
  color: var(--text-primary);
}

/* --- Contacts empty state --- */
[data-theme="dark"] .contacts-empty {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .contacts-empty-content svg {
  color: var(--text-tertiary);
}

[data-theme="dark"] .contacts-empty-content .title {
  color: var(--text-secondary);
}

[data-theme="dark"] .contacts-empty-content .subtitle {
  color: var(--text-tertiary);
}

/* --- Drawer --- */
[data-theme="dark"] .drawer-close:hover {
  background: var(--surface-3);
  color: var(--text-secondary);
}

[data-theme="dark"] .drawer-section-header {
  color: var(--text-tertiary);
}

[data-theme="dark"] .drawer-section-border {
  border-color: var(--border-default);
}

[data-theme="dark"] .drawer-dl-row dt {
  color: var(--text-secondary);
}

[data-theme="dark"] .drawer-dl-row dd {
  color: var(--text-primary);
}

[data-theme="dark"] .drawer-dl-row dd .meta {
  color: var(--text-secondary);
}

[data-theme="dark"] .drawer-address {
  color: var(--text-primary);
}

[data-theme="dark"] .drawer-address .country {
  color: var(--text-secondary);
}

[data-theme="dark"] .drawer-footer {
  border-color: var(--border-default);
}

[data-theme="dark"] .drawer-footer-btn-primary {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .drawer-footer-btn-primary:hover {
  background: rgba(4, 120, 87, 0.25);
}

[data-theme="dark"] .drawer-badge-cyan {
  background: rgba(14, 116, 144, 0.15);
  color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.3);
}

/* --- New ticket button --- */
[data-theme="dark"] .new-ticket-btn {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .new-ticket-btn:hover {
  background: rgba(4, 120, 87, 0.25);
}

/* --- Ticket buttons --- */
[data-theme="dark"] .ticket-btn-primary {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .ticket-btn-primary:hover {
  background: rgba(4, 120, 87, 0.25);
}

[data-theme="dark"] .ticket-btn-danger {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .ticket-btn-danger:hover {
  background: rgba(220, 38, 38, 0.25);
}

[data-theme="dark"] .ticket-btn-warning {
  background: rgba(217, 119, 6, 0.12);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .ticket-btn-warning:hover {
  background: rgba(217, 119, 6, 0.2);
}

[data-theme="dark"] .ticket-btn-secondary {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-btn-secondary:hover {
  background: var(--surface-3);
}

/* --- Icon buttons --- */
[data-theme="dark"] .icon-btn-danger:hover {
  color: #f87171;
  background: rgba(220, 38, 38, 0.15);
}

/* --- Ticket attachments --- */
[data-theme="dark"] .ticket-attachment-upload {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-attachment-upload-progress {
  color: var(--text-secondary);
}

[data-theme="dark"] .ticket-attachment-progress-bar {
  background: var(--border-default);
}

[data-theme="dark"] .ticket-attachment-item {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-attachment-item:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .ticket-attachment-icon {
  background: var(--surface-3);
}

[data-theme="dark"] .ticket-attachment-icon svg {
  color: var(--text-secondary);
}

[data-theme="dark"] .ticket-attachment-delete {
  color: var(--text-tertiary);
}

[data-theme="dark"] .ticket-attachment-delete:hover {
  color: #f87171;
  background: rgba(220, 38, 38, 0.15);
}

/* --- Ticket comments --- */
[data-theme="dark"] .ticket-comment {
  background: var(--surface-2);
}

/* --- Ticket detail buttons & fields --- */
[data-theme="dark"] .ticket-detail-btn {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-detail-btn:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .ticket-detail-static {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* --- Ticket subscribers --- */
[data-theme="dark"] .ticket-subscriber {
  background: var(--surface-2);
}

[data-theme="dark"] .ticket-subscriber-remove:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* --- Ticket rate --- */
[data-theme="dark"] .ticket-rate-btn {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .ticket-rate-btn:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .ticket-rate-option:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .ticket-rate-option.selected {
  background: var(--surface-2);
  border-color: rgba(52, 211, 153, 0.3);
}

/* --- Ticket card internals --- */
[data-theme="dark"] .ticket-card {
  background: var(--surface-0);
  border-color: var(--border-default);
}

[data-theme="dark"] .ticket-card-header {
  border-color: var(--border-subtle);
}

[data-theme="dark"] .ticket-card-header-collapsible:hover {
  background-color: var(--surface-1, rgba(255, 255, 255, 0.05));
}

[data-theme="dark"] .ticket-card-header h2 {
  color: var(--text-primary);
}

/* --- Dropdown menu (ticket page) --- */
[data-theme="dark"] .dropdown-menu {
  background: var(--surface-0);
  border-color: var(--border-default);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dropdown-menu a {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu a:hover {
  background: var(--surface-3);
}

/* --- Editor menu --- */
[data-theme="dark"] .editor-menu-item-danger:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

[data-theme="dark"] .editor-output-unknown {
  background: rgba(217, 119, 6, 0.12);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

/* --- Modal buttons --- */
[data-theme="dark"] .modal-btn-primary {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .modal-btn-primary:hover {
  background: rgba(4, 120, 87, 0.25);
}

[data-theme="dark"] .modal-btn-danger {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .modal-btn-danger:hover {
  background: rgba(220, 38, 38, 0.25);
}

/* --- Modal status --- */
[data-theme="dark"] .modal-status-option:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .modal-status-option.selected {
  background: rgba(4, 120, 87, 0.1);
}

[data-theme="dark"] .modal-status-tag {
  background: var(--surface-3);
  color: var(--text-secondary);
}

/* --- Time blocks --- */
[data-theme="dark"] .time-blocks-table {
  background: var(--surface-2);
}

[data-theme="dark"] .time-blocks-delete-btn:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* --- Members tab --- */
[data-theme="dark"] .members-tab-active {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

/* --- Role badges --- */
[data-theme="dark"] .role-badge-owner {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .role-badge-member {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .role-badge-custom {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.3);
}

[data-theme="dark"] .member-remove-btn:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* --- Settings role menu --- */
[data-theme="dark"] .settings-role-menu {
  background: var(--surface-0);
  border-color: var(--border-default);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .settings-role-menu-header {
  color: var(--text-tertiary);
}

[data-theme="dark"] .settings-role-menu-item {
  color: var(--text-primary);
}

[data-theme="dark"] .settings-role-menu-item:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .settings-role-menu-item.is-active {
  background: var(--surface-2);
  color: var(--text-primary);
}

[data-theme="dark"] .settings-invitation {
  border-color: var(--border-subtle);
}

[data-theme="dark"] .settings-invitation-link label {
  color: var(--text-tertiary);
}

[data-theme="dark"] .settings-invitation-link-row input {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

/* --- Status action buttons --- */
[data-theme="dark"] .status-action-btn-danger:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* --- Rates --- */
[data-theme="dark"] .rates-table th {
  background: var(--surface-2);
  color: var(--text-secondary);
}

[data-theme="dark"] .rates-table tbody tr:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .rate-type-primary {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .rate-action-btn {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .rate-action-btn-danger {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .rate-action-btn-danger:hover {
  background: rgba(220, 38, 38, 0.25);
}

[data-theme="dark"] .rates-empty-icon {
  background: var(--surface-3);
}

[data-theme="dark"] .rate-form-input-prefix {
  background: var(--surface-2);
  color: var(--text-secondary);
}

/* --- Time logs --- */
[data-theme="dark"] .time-logs-view-switcher {
  background: var(--surface-2);
}

[data-theme="dark"] .time-log-badge-billable {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .time-logs-table tbody tr:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .time-log-action-btn-danger:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

[data-theme="dark"] .edit-time-blocks-table-wrapper {
  background: var(--surface-2);
}

/* --- Dropdown menu item danger --- */
[data-theme="dark"] .dropdown-menu-item-danger:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* --- Generic buttons --- */
[data-theme="dark"] .btn-success {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .btn-success:hover {
  background: rgba(4, 120, 87, 0.25);
}

[data-theme="dark"] .btn-danger {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .btn-warning {
  background: rgba(217, 119, 6, 0.12);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .btn-warning:hover {
  background: rgba(217, 119, 6, 0.2);
}

/* --- Confirm dialogs --- */
[data-theme="dark"] .confirm-icon-warning {
  background: rgba(217, 119, 6, 0.15);
}

[data-theme="dark"] .confirm-icon-danger {
  background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .confirm-dialog-icon-danger {
  background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .confirm-dialog-icon-warning {
  background: rgba(217, 119, 6, 0.15);
}

/* --- Allowances --- */
[data-theme="dark"] .allowance-item {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .allowance-charge-item {
  background: var(--surface-2);
  border-color: var(--border-default);
}

/* --- Radio options --- */
[data-theme="dark"] .radio-option {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .radio-option:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .radio-option-selected {
  background: rgba(4, 120, 87, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
}

/* --- Payments --- */
[data-theme="dark"] .payment-item:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .payment-breakdown-card {
  background: var(--surface-2);
  border-color: var(--border-default);
}

/* --- Collapsible card --- */
[data-theme="dark"] .collapsible-card-header:hover {
  background-color: var(--surface-2);
}

/* --- Alerts --- */
[data-theme="dark"] .alert-warning {
  background: rgba(217, 119, 6, 0.12);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .alert-success {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

/* --- Setup & danger zone --- */
[data-theme="dark"] .setup-step {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .log-container-option {
  border-color: var(--border-default);
}

[data-theme="dark"] .log-container-option.is-selected {
  border-color: var(--accent-color);
}

[data-theme="dark"] .log-container-name {
  color: var(--text-primary);
}

[data-theme="dark"] pre.log-output {
  background: #0d1117;
  color: #c9d1d9;
}

[data-theme="dark"] .danger-zone {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .delete-warning {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
}

/* --- Card items --- */
[data-theme="dark"] .card-item:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .card-item-icon {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

[data-theme="dark"] .card-item-footer {
  background: var(--surface-2);
  border-color: var(--border-default);
}

/* --- Data table badge --- */
[data-theme="dark"] .data-table-badge {
  background: var(--surface-3);
  color: var(--text-secondary);
}

/* --- Milestone --- */
[data-theme="dark"] .milestone-card-count {
  background: var(--surface-3);
  color: var(--text-secondary);
}

[data-theme="dark"] .milestone-ticket-row:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .milestone-ticket-status {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

/* --- Contact form verify --- */
[data-theme="dark"] .contact-form-input.is-verified {
  background: rgba(4, 120, 87, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .contact-form-verify-btn {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .contact-form-verify-btn:hover:not(:disabled) {
  background: rgba(4, 120, 87, 0.25);
}

/* --- Hosting / Deployment --- */
[data-theme="dark"] .volume-row {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .config-badge {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

[data-theme="dark"] .dependency-badge {
  background: rgba(217, 119, 6, 0.12);
  color: #fbbf24;
}

[data-theme="dark"] .extra-host-row {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .verify-instructions-row.is-failed {
  background: rgba(220, 38, 38, 0.15) !important;
}

[data-theme="dark"] .verify-error {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .deployment-error {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

[data-theme="dark"] .deployment-step-error pre {
  background: rgba(220, 38, 38, 0.1);
  color: #f87171;
}

/* --- Deployment status indicators --- */
[data-theme="dark"] .status-success {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

[data-theme="dark"] .status-failed {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

[data-theme="dark"] .status-in-progress {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
}

[data-theme="dark"] .status-cancelled {
  background: var(--surface-2);
  color: var(--text-secondary);
}

[data-theme="dark"] .status-pending {
  background: rgba(217, 119, 6, 0.12);
  color: #fbbf24;
}

[data-theme="dark"] .deployment-step {
  background: var(--surface-2);
  border-color: var(--border-default);
}

[data-theme="dark"] .step-success {
  background: rgba(4, 120, 87, 0.15);
  color: #34d399;
}

[data-theme="dark"] .step-failed {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

[data-theme="dark"] .step-in-progress {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
}

[data-theme="dark"] .step-pending {
  background: var(--surface-2);
  color: var(--text-secondary);
}

[data-theme="dark"] .credential-row {
  background: var(--surface-2);
}