/* ============================================================
   Krishi Sakha Help & Support Portal – Main Stylesheet
   Bootstrap 5 + Custom Design System
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
:root {
  --ks-green:       #2d8653;
  --ks-green-light: #38a169;
  --ks-green-pale:  #ebf8ef;
  --ks-gold:        #d97706;
  --ks-dark:        #0f1a14;
  --ks-dark-2:      #1a2e1f;
  --ks-dark-3:      #243b2a;
  --ks-gray:        #6b7280;
  --ks-light:       #f8faf9;
  --ks-border:      #e2e8f0;

  --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
  --bs-primary:     #2d8653;
  --bs-primary-rgb: 45,134,83;

  --card-radius: 1rem;
  --hero-gradient: linear-gradient(135deg, #0f1a14 0%, #1a3a24 40%, #2d8653 100%);
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark Mode ────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --ks-light: #111827;
  --ks-border: #374151;
  --ks-green-pale: #14291b;
}

* { box-sizing: border-box; }

body {
  font-family: var(--bs-font-sans-serif);
  font-size: 0.9375rem;
  line-height: 1.7;
  background: var(--ks-light);
  color: #1f2937;
}

[data-bs-theme="dark"] body { color: #e5e7eb; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ks-green); border-radius: 10px; }

/* ── Navbar ───────────────────────────────────────────────── */
.ks-navbar {
  background: rgba(15,26,20,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0.75rem 0;
  transition: var(--transition-smooth);
}

.ks-navbar .navbar-brand { color: #fff !important; }
.brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.1rem; color: #fff; }
.brand-sub  { font-size: 0.65rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; text-transform: uppercase; }
.brand-icon { font-size: 1.8rem; filter: drop-shadow(0 0 8px rgba(45,134,83,0.6)); }

.ks-navbar .nav-link {
  color: rgba(255,255,255,0.75) !important;
  font-weight: 500;
  padding: 0.45rem 0.9rem !important;
  border-radius: 0.5rem;
  transition: var(--transition-smooth);
  font-size: 0.875rem;
}
.ks-navbar .nav-link:hover,
.ks-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(45,134,83,0.25);
}

/* ── Hero Section ─────────────────────────────────────────── */
.hero-section {
  background: var(--hero-gradient);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2338a169' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--ks-light);
  clip-path: ellipse(55% 100% at 50% 100%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(45,134,83,0.2);
  border: 1px solid rgba(45,134,83,0.4);
  color: #6ee7a0;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero-subtitle {
  color: rgba(255,255,255,0.65);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
}

/* Search Bar */
.hero-search-wrap {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 1rem;
  padding: 0.5rem;
  max-width: 680px;
  margin: 0 auto;
  backdrop-filter: blur(8px);
}

.hero-search-wrap .form-control {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  box-shadow: none;
}

.hero-search-wrap .form-control::placeholder { color: rgba(255,255,255,0.4); }
.hero-search-wrap .form-control:focus { background: transparent; color: #fff; }

.hero-search-wrap .btn {
  border-radius: 0.6rem;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
}

/* Search Suggestions */
#searchSuggestions {
  position: absolute;
  top: 100%;
  left: 0.5rem;
  right: 0.5rem;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  z-index: 1050;
  max-height: 380px;
  overflow-y: auto;
  margin-top: 0.5rem;
  border: 1px solid var(--ks-border);
}

[data-bs-theme="dark"] #searchSuggestions { background: #1f2937; border-color: #374151; }

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  border-bottom: 1px solid var(--ks-border);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--ks-green-pale); }
.suggestion-icon { font-size: 1.2rem; color: var(--ks-green); flex-shrink: 0; margin-top: 0.1rem; }
.suggestion-title { font-weight: 600; font-size: 0.875rem; color: #1f2937; }
.suggestion-type { font-size: 0.75rem; color: var(--ks-gray); }
[data-bs-theme="dark"] .suggestion-title { color: #e5e7eb; }

/* Popular Searches */
.popular-search-tags .badge {
  cursor: pointer;
  transition: var(--transition-smooth);
  font-weight: 500;
}
.popular-search-tags .badge:hover { transform: translateY(-1px); }

/* ── Stats Bar ────────────────────────────────────────────── */
.stats-bar {
  background: #fff;
  border-radius: 1rem;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  margin-top: -2rem;
  position: relative;
  z-index: 10;
}

[data-bs-theme="dark"] .stats-bar { background: #1f2937; box-shadow: 0 4px 24px rgba(0,0,0,0.3); }

.stat-item { text-align: center; }
.stat-number { font-size: 1.5rem; font-weight: 800; color: var(--ks-green); font-family: 'Plus Jakarta Sans', sans-serif; }
.stat-label { font-size: 0.75rem; color: var(--ks-gray); font-weight: 500; }

/* ── Section Titles ───────────────────────────────────────── */
.section-badge {
  display: inline-block;
  background: var(--ks-green-pale);
  color: var(--ks-green);
  border-radius: 100px;
  padding: 0.25rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: #1f2937;
}
[data-bs-theme="dark"] .section-title { color: #f9fafb; }

/* ── Topic Cards ──────────────────────────────────────────── */
.topic-card {
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: var(--card-radius);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
[data-bs-theme="dark"] .topic-card { background: #1f2937; border-color: #374151; }

.topic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ks-green), var(--ks-green-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-smooth);
}

.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(45,134,83,0.15);
  border-color: var(--ks-green);
  color: inherit;
}

.topic-card:hover::before { transform: scaleX(1); }

.topic-icon {
  width: 56px;
  height: 56px;
  background: var(--ks-green-pale);
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  transition: var(--transition-smooth);
}

.topic-card:hover .topic-icon {
  background: var(--ks-green);
  transform: rotate(-5deg) scale(1.05);
}

.topic-title {
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
  color: #1f2937;
}
[data-bs-theme="dark"] .topic-title { color: #f9fafb; }

.topic-count {
  font-size: 0.8rem;
  color: var(--ks-gray);
}

.topic-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ks-green);
  opacity: 0;
  transition: var(--transition-smooth);
}

.topic-card:hover .topic-arrow {
  opacity: 1;
  right: 0.75rem;
}

/* ── Quick Action Buttons ─────────────────────────────────── */
.quick-action-section {
  background: linear-gradient(135deg, var(--ks-green-pale) 0%, #fff 100%);
  border-radius: 1.5rem;
  padding: 2.5rem;
}
[data-bs-theme="dark"] .quick-action-section { background: linear-gradient(135deg, var(--ks-dark-2) 0%, #1f2937 100%); }

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: #fff;
  border: 2px solid var(--ks-border);
  border-radius: 1rem;
  text-decoration: none;
  color: #1f2937;
  transition: var(--transition-smooth);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
}
[data-bs-theme="dark"] .quick-action-btn { background: #1f2937; border-color: #374151; color: #e5e7eb; }

.quick-action-btn:hover {
  border-color: var(--ks-green);
  background: var(--ks-green);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(45,134,83,0.3);
}

.quick-action-icon {
  font-size: 2rem;
  line-height: 1;
  transition: var(--transition-smooth);
}

/* ── Knowledge Base ───────────────────────────────────────── */
.kb-category-card {
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: var(--card-radius);
  padding: 1.75rem;
  transition: var(--transition-smooth);
  height: 100%;
}
[data-bs-theme="dark"] .kb-category-card { background: #1f2937; border-color: #374151; }

.kb-category-card:hover {
  border-color: var(--ks-green);
  box-shadow: 0 8px 32px rgba(45,134,83,0.12);
}

.kb-category-icon {
  width: 64px;
  height: 64px;
  background: var(--ks-green-pale);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
}

.kb-article-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--ks-border);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

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

.kb-article-item:hover { color: var(--ks-green); padding-left: 0.5rem; }

.kb-article-item i { color: var(--ks-green); flex-shrink: 0; margin-top: 0.2rem; }

/* ── Article Page ─────────────────────────────────────────── */
.article-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #374151;
}
[data-bs-theme="dark"] .article-content { color: #d1d5db; }

.article-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: #1f2937; }
.article-content h3 { font-size: 1.2rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.article-content p  { margin-bottom: 1rem; }
.article-content ul, .article-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.article-content li { margin-bottom: 0.4rem; }
.article-content code { background: var(--ks-green-pale); color: var(--ks-green); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.875em; }
.article-content pre { background: #1f2937; color: #e5e7eb; padding: 1.25rem; border-radius: 0.75rem; overflow-x: auto; margin-bottom: 1rem; }

.article-feedback-card {
  background: linear-gradient(135deg, var(--ks-green-pale) 0%, #fff 100%);
  border: 1px solid rgba(45,134,83,0.2);
  border-radius: var(--card-radius);
  padding: 2rem;
  text-align: center;
}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-category-tabs .nav-link {
  border-radius: 0.6rem;
  font-weight: 500;
  color: var(--ks-gray);
  border: 1px solid transparent;
  transition: var(--transition-smooth);
}

.faq-category-tabs .nav-link.active,
.faq-category-tabs .nav-link:hover {
  background: var(--ks-green);
  color: #fff;
  border-color: var(--ks-green);
}

.faq-accordion .accordion-button {
  font-weight: 600;
  background: #fff;
  color: #1f2937;
  border-radius: 0.75rem !important;
}
[data-bs-theme="dark"] .faq-accordion .accordion-button { background: #1f2937; color: #f9fafb; }

.faq-accordion .accordion-button:not(.collapsed) {
  background: var(--ks-green-pale);
  color: var(--ks-green);
  box-shadow: none;
}

.faq-accordion .accordion-item {
  border: 1px solid var(--ks-border);
  border-radius: 0.75rem !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
[data-bs-theme="dark"] .faq-accordion .accordion-item { border-color: #374151; }

.faq-accordion .accordion-body { background: #fff; }
[data-bs-theme="dark"] .faq-accordion .accordion-body { background: #111827; color: #d1d5db; }

/* ── Ticket Form ──────────────────────────────────────────── */
.ticket-form-card {
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
[data-bs-theme="dark"] .ticket-form-card { background: #1f2937; border-color: #374151; }

.ticket-form-header {
  background: var(--hero-gradient);
  padding: 2rem;
  color: #fff;
}

.ticket-form-body { padding: 2rem; }

.form-label { font-weight: 600; font-size: 0.875rem; color: #374151; margin-bottom: 0.4rem; }
[data-bs-theme="dark"] .form-label { color: #d1d5db; }

.form-control, .form-select {
  border: 1.5px solid var(--ks-border);
  border-radius: 0.6rem;
  padding: 0.6rem 0.875rem;
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.form-control:focus, .form-select:focus {
  border-color: var(--ks-green);
  box-shadow: 0 0 0 3px rgba(45,134,83,0.12);
}

/* Priority Selector */
.priority-selector { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.priority-option {
  flex: 1;
  min-width: 70px;
  position: relative;
}

.priority-option input { position: absolute; opacity: 0; }

.priority-option label {
  display: block;
  text-align: center;
  padding: 0.5rem 0.25rem;
  border: 2px solid var(--ks-border);
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.priority-option input:checked + label {
  border-color: var(--ks-green);
  background: var(--ks-green);
  color: #fff;
}

/* Drop Zone */
.drop-zone {
  border: 2px dashed var(--ks-border);
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--ks-green);
  background: var(--ks-green-pale);
}

/* ── Ticket Dashboard ─────────────────────────────────────── */
.ticket-row {
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  transition: var(--transition-smooth);
  cursor: pointer;
}
[data-bs-theme="dark"] .ticket-row { background: #1f2937; border-color: #374151; }

.ticket-row:hover {
  border-color: var(--ks-green);
  box-shadow: 0 4px 16px rgba(45,134,83,0.1);
}

.ticket-number { font-weight: 700; color: var(--ks-green); font-family: monospace; font-size: 0.9rem; }
.ticket-subject { font-weight: 600; color: #1f2937; margin-bottom: 0.15rem; }
[data-bs-theme="dark"] .ticket-subject { color: #f9fafb; }
.ticket-meta { font-size: 0.8rem; color: var(--ks-gray); }

/* ── Admin Dashboard ──────────────────────────────────────── */
/* Sidebar & topbar styles are self-contained in admin-header.php */
/* The rules below cover shared admin component utilities only    */

/* Stat Cards */
.stat-card {
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: var(--card-radius);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}
[data-bs-theme="dark"] .stat-card { background: #1f2937; border-color: #374151; }

.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

.stat-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.stat-card-value {
  font-size: 2rem;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-card-label { font-size: 0.8rem; color: var(--ks-gray); font-weight: 500; }

.stat-card-trend {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
}

.trend-up   { background: #dcfce7; color: #15803d; }
.trend-down { background: #fee2e2; color: #dc2626; }
.trend-neutral { background: #f3f4f6; color: #6b7280; }

/* ── Tutorial Cards ───────────────────────────────────────── */
.tutorial-card {
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: var(--transition-smooth);
}
[data-bs-theme="dark"] .tutorial-card { background: #1f2937; border-color: #374151; }

.tutorial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.tutorial-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #0f1a14;
  overflow: hidden;
}

.tutorial-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }

.tutorial-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  transition: var(--transition-smooth);
}

.tutorial-card:hover .tutorial-play-btn { background: rgba(45,134,83,0.6); }

.play-icon {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--ks-green);
  transform: scale(0.9);
  transition: var(--transition-smooth);
}

.tutorial-card:hover .play-icon { transform: scale(1); }

.tutorial-duration {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.tutorial-body { padding: 1rem; }
.tutorial-category { font-size: 0.75rem; color: var(--ks-green); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.tutorial-title { font-weight: 700; font-size: 0.9rem; margin-top: 0.25rem; color: #1f2937; }
[data-bs-theme="dark"] .tutorial-title { color: #f9fafb; }

/* ── Feature Request Cards ────────────────────────────────── */
.feature-card {
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: var(--card-radius);
  padding: 1.25rem;
  transition: var(--transition-smooth);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
[data-bs-theme="dark"] .feature-card { background: #1f2937; border-color: #374151; }

.feature-card:hover { border-color: var(--ks-green); box-shadow: 0 4px 16px rgba(45,134,83,0.1); }

.vote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--ks-border);
  border-radius: 0.6rem;
  background: transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
  font-weight: 700;
  color: #374151;
  min-width: 56px;
  flex-shrink: 0;
}
[data-bs-theme="dark"] .vote-btn { color: #d1d5db; }

.vote-btn:hover, .vote-btn.voted {
  border-color: var(--ks-green);
  background: var(--ks-green-pale);
  color: var(--ks-green);
}

.vote-count { font-size: 1.1rem; }
.vote-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Feature Status Badges */
.status-submitted     { background: #dbeafe; color: #1d4ed8; }
.status-under_review  { background: #fef3c7; color: #92400e; }
.status-planned       { background: #ede9fe; color: #6d28d9; }
.status-in_progress   { background: #fce7f3; color: #be185d; }
.status-completed     { background: #dcfce7; color: #15803d; }
.status-declined      { background: #fee2e2; color: #dc2626; }

/* ── Bug Severity ─────────────────────────────────────────── */
.severity-low      { background: #dcfce7; color: #15803d; }
.severity-medium   { background: #fef3c7; color: #92400e; }
.severity-high     { background: #fed7aa; color: #c2410c; }
.severity-critical { background: #fee2e2; color: #dc2626; }

/* ── Contact Page ─────────────────────────────────────────── */
.contact-card {
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: var(--card-radius);
  padding: 2rem;
  text-align: center;
  transition: var(--transition-smooth);
  height: 100%;
}
[data-bs-theme="dark"] .contact-card { background: #1f2937; border-color: #374151; }

.contact-card:hover {
  border-color: var(--ks-green);
  box-shadow: 0 8px 32px rgba(45,134,83,0.12);
  transform: translateY(-3px);
}

.contact-icon {
  width: 72px;
  height: 72px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.25rem;
}

/* ── Footer ───────────────────────────────────────────────── */
.ks-footer {
  background: var(--ks-dark);
  padding: 4rem 0 2rem;
}

.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.875rem;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.footer-links a:hover { color: #fff; padding-left: 0.3rem; }
.footer-links a i { font-size: 0.65rem; }

/* ── Back to Top ──────────────────────────────────────────── */
.btn-back-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  background: var(--ks-green);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(45,134,83,0.4);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
  z-index: 9999;
}

.btn-back-top.visible { opacity: 1; visibility: visible; }
.btn-back-top:hover { background: var(--ks-green-light); transform: translateY(-3px); }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb-section {
  background: var(--ks-green-pale);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(45,134,83,0.1);
}
[data-bs-theme="dark"] .breadcrumb-section { background: var(--ks-dark-2); }

.breadcrumb-item a { color: var(--ks-green); text-decoration: none; }
.breadcrumb-item.active { color: var(--ks-gray); }

/* ── General Utilities ────────────────────────────────────── */
.btn-primary {
  background: var(--ks-green);
  border-color: var(--ks-green);
  font-weight: 600;
}
.btn-primary:hover { background: var(--ks-green-light); border-color: var(--ks-green-light); }
.btn-outline-primary { color: var(--ks-green); border-color: var(--ks-green); font-weight: 600; }
.btn-outline-primary:hover { background: var(--ks-green); border-color: var(--ks-green); }

.text-primary { color: var(--ks-green) !important; }
.bg-primary { background-color: var(--ks-green) !important; }

.badge.bg-success { background: #15803d !important; }
.badge.bg-primary { background: var(--ks-green) !important; }

.page-hero {
  background: var(--hero-gradient);
  padding: 3.5rem 0 2.5rem;
  color: #fff;
}

.page-hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.5rem); }
.page-hero p  { color: rgba(255,255,255,0.7); font-size: 1.05rem; margin-bottom: 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .stats-bar { flex-wrap: wrap; gap: 1.5rem; }
}

@media (max-width: 767.98px) {
  .hero-section { padding: 3rem 0 3rem; }
  .quick-action-section { padding: 1.5rem; }
  .ticket-form-body { padding: 1.25rem; }
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }

/* ── Notification Toast ───────────────────────────────────── */
.ks-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Admin Table ──────────────────────────────────────────── */
.admin-table {
  background: #fff;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--ks-border);
}
[data-bs-theme="dark"] .admin-table { background: #1f2937; border-color: #374151; }

.admin-table table { margin: 0; }
.admin-table thead th {
  background: var(--ks-green-pale);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ks-green);
  border-bottom: 2px solid rgba(45,134,83,0.2);
  padding: 0.875rem 1rem;
}
[data-bs-theme="dark"] .admin-table thead th { background: var(--ks-dark-2); }

.admin-table tbody tr { transition: var(--transition-smooth); }
.admin-table tbody tr:hover { background: var(--ks-green-pale); }
[data-bs-theme="dark"] .admin-table tbody tr:hover { background: rgba(45,134,83,0.1); }
.admin-table tbody td { padding: 0.875rem 1rem; vertical-align: middle; font-size: 0.875rem; border-color: var(--ks-border); }

/* ── Video Modal ──────────────────────────────────────────── */
.modal-video .modal-dialog { max-width: 800px; }
.modal-video .modal-content { background: #000; border: none; }
.modal-video .modal-body { padding: 0; }
.modal-video .ratio iframe { border: none; }

/* ── Skeleton Loader ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 0.4rem;
}
[data-bs-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #2d3748 25%, #374151 50%, #2d3748 75%);
  background-size: 200% 100%;
}

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

/* ── Ticket Timeline ──────────────────────────────────────── */
.ticket-timeline { position: relative; padding-left: 2rem; }
.ticket-timeline::before {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ks-border);
}

.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-dot {
  position: absolute;
  left: -1.67rem;
  top: 0.35rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ks-green);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(45,134,83,0.2);
}

.timeline-card {
  background: #fff;
  border: 1px solid var(--ks-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
[data-bs-theme="dark"] .timeline-card { background: #1f2937; border-color: #374151; }

.timeline-card.agent-reply { border-left: 3px solid var(--ks-green); }
.timeline-card.user-reply  { border-left: 3px solid #3b82f6; }

.timeline-sender { font-weight: 700; font-size: 0.875rem; }
.timeline-time   { font-size: 0.75rem; color: var(--ks-gray); }
.timeline-body   { margin-top: 0.5rem; font-size: 0.9rem; color: #374151; }
[data-bs-theme="dark"] .timeline-body { color: #d1d5db; }