/* ============================================================
   Admin Design Tokens — Light (default) + Dark
   ============================================================ */
:root {
  /* Backgrounds */
  --admin-bg:               #f5f7fb;
  --admin-card-bg:          #ffffff;
  --admin-topbar-bg:        #ffffff;

  /* Borders */
  --admin-border:           #e6e9ef;
  --admin-border-light:     #f0f2f5;

  /* Text */
  --admin-text:             #3b4a5c;
  --admin-text-muted:       #64748b;

  /* Accent */
  --admin-accent:           #1c82c3;

  /* Card */
  --admin-card-radius:      12px;
  --admin-card-shadow:      0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --admin-card-shadow-md:   0 4px 12px rgba(15,23,42,0.08);

  /* Table */
  --admin-table-header-bg:  #f8fafc;
  --admin-table-border:     #e6e9ef;
  --admin-table-hover-bg:   rgba(15,23,42,0.02);

  /* Semantic colours */
  --admin-success:          #2f855a;
  --admin-success-bg:       #f0fff4;
  --admin-success-border:   #c6f6d5;
  --admin-warning:          #b7791f;
  --admin-warning-bg:       #fffbeb;
  --admin-warning-border:   #fbd38d;
  --admin-danger:           #c53030;
  --admin-danger-bg:        #fff5f5;
  --admin-danger-border:    #fed7d7;
  --admin-neutral:          #64748b;
  --admin-neutral-bg:       #f1f5f9;
  --admin-neutral-border:   #e2e8f0;
  --admin-info:             #2b6cb0;
  --admin-info-bg:          #ebf8ff;
  --admin-info-border:      #bee3f8;

  /* Radii */
  --admin-radius-sm:        6px;
  --admin-radius-md:        8px;
  --admin-radius-lg:        12px;
  --admin-radius-pill:      999px;

  /* Motion */
  --admin-transition:       0.2s ease;
}

html[data-theme="dark"] {
  --admin-bg:               #0f1117;
  --admin-card-bg:          #1a1d2e;
  --admin-topbar-bg:        #13151f;

  --admin-border:           rgba(255,255,255,0.08);
  --admin-border-light:     rgba(255,255,255,0.05);

  --admin-text:             #e2e8f0;
  --admin-text-muted:       #64748b;

  --admin-card-shadow:      0 1px 3px rgba(0,0,0,0.4);
  --admin-card-shadow-md:   0 4px 24px rgba(0,0,0,0.5);

  --admin-table-header-bg:  #252840;
  --admin-table-border:     rgba(255,255,255,0.08);
  --admin-table-hover-bg:   rgba(255,255,255,0.03);

  --admin-success:          #34d399;
  --admin-success-bg:       rgba(52,211,153,0.10);
  --admin-success-border:   rgba(52,211,153,0.20);
  --admin-warning:          #fbbf24;
  --admin-warning-bg:       rgba(251,191,36,0.10);
  --admin-warning-border:   rgba(251,191,36,0.20);
  --admin-danger:           #f87171;
  --admin-danger-bg:        rgba(248,113,113,0.10);
  --admin-danger-border:    rgba(248,113,113,0.20);
  --admin-neutral:          #94a3b8;
  --admin-neutral-bg:       rgba(148,163,184,0.10);
  --admin-neutral-border:   rgba(148,163,184,0.20);
  --admin-info:             #60a5fa;
  --admin-info-bg:          rgba(96,165,250,0.10);
  --admin-info-border:      rgba(96,165,250,0.20);

  /* Bootstrap variable overrides — forces Bootstrap's own rendering to go dark */
  --bs-body-bg:             #0f1117;
  --bs-body-color:          #e2e8f0;
  --bs-border-color:        rgba(255,255,255,0.08);
  --bs-card-bg:             #1a1d2e;
  --bs-card-border-color:   rgba(255,255,255,0.08);
  --bs-secondary-bg:        #1a1d2e;
  --bs-tertiary-bg:         #252840;
  --bs-emphasis-color:      #e2e8f0;
}

/* ============================================================
   Base overrides
   ============================================================ */
body { background: var(--admin-bg); color: var(--admin-text); }
html[data-theme="dark"] body {
  background: var(--admin-bg) !important;
  color: var(--admin-text) !important;
}
.text-muted { color: var(--admin-text-muted) !important; }
hr { border-color: var(--admin-border); opacity: 1; }

/* ============================================================
   Navbar overrides (light + dark)
   ============================================================ */
.navbar {
  background: var(--admin-topbar-bg);
  border-bottom: 1px solid var(--admin-border);
}
html[data-theme="dark"] .navbar {
  background: var(--admin-topbar-bg) !important;
  border-bottom: 1px solid var(--admin-border);
}
html[data-theme="dark"] .navbar .nav-link { color: var(--admin-text-muted); }
html[data-theme="dark"] .navbar .nav-link:hover,
html[data-theme="dark"] .navbar .nav-link.active { color: var(--admin-text); }
html[data-theme="dark"] .navbar-brand { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1); }

/* Bootstrap subtle color backgrounds — management tile icon circles */
html[data-theme="dark"] .bg-primary-subtle   { background-color: rgba(96,165,250,0.15) !important; color: #60a5fa !important; }
html[data-theme="dark"] .bg-info-subtle      { background-color: rgba(96,165,250,0.12) !important; color: #67e8f9 !important; }
html[data-theme="dark"] .bg-success-subtle   { background-color: rgba(52,211,153,0.15) !important; color: #34d399 !important; }
html[data-theme="dark"] .bg-warning-subtle   { background-color: rgba(251,191,36,0.15) !important; color: #fbbf24 !important; }
html[data-theme="dark"] .bg-danger-subtle    { background-color: rgba(248,113,113,0.15) !important; color: #f87171 !important; }
html[data-theme="dark"] .bg-secondary-subtle { background-color: rgba(148,163,184,0.12) !important; color: #94a3b8 !important; }

/* Theme toggle button */
.admin-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: background var(--admin-transition);
}
.admin-theme-toggle:hover { background: rgba(28,130,195,0.08); color: var(--admin-accent); }
html[data-theme="dark"] .admin-theme-toggle { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .admin-theme-toggle:hover { background: rgba(255,255,255,0.10); }

/* ============================================================
   .admin-card component
   ============================================================ */
.admin-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-card-shadow);
}
.admin-card--elevated { box-shadow: var(--admin-card-shadow-md); }

.admin-card__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--admin-border);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-card__header h2, .admin-card__header h3 {
  font-size: 0.9rem; font-weight: 600; margin: 0; color: var(--admin-text);
}
.admin-card__body { padding: 1.25rem; }

/* ============================================================
   .admin-badge-* system
   ============================================================ */
.admin-badge {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--admin-radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.admin-badge-success { color: var(--admin-success); background: var(--admin-success-bg); border-color: var(--admin-success-border); }
.admin-badge-warning { color: var(--admin-warning); background: var(--admin-warning-bg); border-color: var(--admin-warning-border); }
.admin-badge-danger  { color: var(--admin-danger);  background: var(--admin-danger-bg);  border-color: var(--admin-danger-border);  }
.admin-badge-neutral { color: var(--admin-neutral); background: var(--admin-neutral-bg); border-color: var(--admin-neutral-border); }
.admin-badge-info    { color: var(--admin-info);    background: var(--admin-info-bg);    border-color: var(--admin-info-border);    }

.admin-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.admin-status-dot--success { background: var(--admin-success); }
.admin-status-dot--warning { background: var(--admin-warning); }
.admin-status-dot--danger  { background: var(--admin-danger);  }
.admin-status-dot--neutral { background: var(--admin-neutral); }

/* ============================================================
   Section heading utility
   ============================================================ */
.admin-section-title {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--admin-text-muted);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--admin-border);
  margin-bottom: 1rem;
}

/* ============================================================
   Bootstrap dark overrides
   ============================================================ */

/* Cards */
html[data-theme="dark"] .card {
  background: var(--admin-card-bg);
  border-color: var(--admin-border);
  color: var(--admin-text);
}
html[data-theme="dark"] .card-header {
  background: rgba(255,255,255,0.03);
  border-bottom-color: var(--admin-border);
}
html[data-theme="dark"] .card-footer { border-top-color: var(--admin-border); }

/* Tables */
html[data-theme="dark"] .table { color: var(--admin-text); }
html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--admin-border);
}
html[data-theme="dark"] .table-light,
html[data-theme="dark"] thead.table-light,
html[data-theme="dark"] thead.table-light tr th {
  background-color: var(--admin-table-header-bg) !important;
  color: var(--admin-text-muted);
  border-color: var(--admin-border);
}
html[data-theme="dark"] .table-hover tbody tr:hover > * {
  background-color: var(--admin-table-hover-bg);
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: rgba(255,255,255,0.05);
  border-color: var(--admin-border);
  color: var(--admin-text);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: rgba(255,255,255,0.07);
  color: var(--admin-text);
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 0.2rem rgba(28,130,195,0.25);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--admin-text-muted); }
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .form-text { color: var(--admin-text); }
html[data-theme="dark"] .input-group-text {
  background: rgba(255,255,255,0.05);
  border-color: var(--admin-border);
  color: var(--admin-text-muted);
}

/* Dropdowns */
html[data-theme="dark"] .dropdown-menu {
  background: var(--admin-card-bg);
  border-color: var(--admin-border);
}
html[data-theme="dark"] .dropdown-item { color: var(--admin-text); }
html[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--admin-border); }

/* Navs / tabs */
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--admin-border); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--admin-text-muted); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
  background: var(--admin-card-bg);
  border-color: var(--admin-border) var(--admin-border) var(--admin-card-bg);
  color: var(--admin-text);
}
html[data-theme="dark"] .nav-link { color: var(--admin-text-muted); }
html[data-theme="dark"] .nav-pills .nav-link.active { background: var(--admin-accent); }

/* List groups */
html[data-theme="dark"] .list-group-item {
  background: var(--admin-card-bg);
  border-color: var(--admin-border);
  color: var(--admin-text);
}

/* Badges (Bootstrap bg-* overrides) */
html[data-theme="dark"] .badge.bg-light { background: var(--admin-neutral-bg) !important; color: var(--admin-neutral) !important; }
html[data-theme="dark"] .bg-white { background: var(--admin-card-bg) !important; }
html[data-theme="dark"] .bg-light { background: rgba(255,255,255,0.05) !important; }

/* Modals */
html[data-theme="dark"] .modal-content {
  background: var(--admin-card-bg);
  border-color: var(--admin-border);
  color: var(--admin-text);
}
html[data-theme="dark"] .modal-header { border-bottom-color: var(--admin-border); }
html[data-theme="dark"] .modal-footer { border-top-color: var(--admin-border); }
html[data-theme="dark"] .btn-close { filter: invert(1); }

/* Progress bars */
html[data-theme="dark"] .progress { background: rgba(255,255,255,0.08); }

/* Pagination */
html[data-theme="dark"] .page-link {
  background: var(--admin-card-bg);
  border-color: var(--admin-border);
  color: var(--admin-text);
}
html[data-theme="dark"] .page-item.active .page-link {
  background: var(--admin-accent); border-color: var(--admin-accent);
}
html[data-theme="dark"] .page-item.disabled .page-link {
  background: var(--admin-card-bg); color: var(--admin-text-muted);
}

/* ============================================================
   Overrides for custom classes in application.css
   ============================================================ */
.ticket-status {
  border-color: var(--admin-border);
  background: var(--admin-neutral-bg);
  color: var(--admin-text-muted);
}
html[data-theme="dark"] .sla-met    { color: var(--admin-success); }
html[data-theme="dark"] .sla-breached { color: var(--admin-danger); }
html[data-theme="dark"] .sla-running  { color: var(--admin-warning); }
html[data-theme="dark"] .sla-na       { color: var(--admin-neutral); }

html[data-theme="dark"] .ticket-conversation__message {
  background: rgba(255,255,255,0.03) !important;
  border-color: var(--admin-border) !important;
}

/* stat-tile: used in dashboard and companies/show */
.stat-tile {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  box-shadow: var(--admin-card-shadow);
  padding: 1rem 0.5rem;
}

/* ============================================================
   Buttons — dark mode overrides
   ============================================================ */
html[data-theme="dark"] .btn-outline-primary {
  color: var(--admin-accent);
  border-color: rgba(28,130,195,0.5);
  background: transparent;
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus {
  background: rgba(28,130,195,0.15);
  color: #60a5fa;
  border-color: var(--admin-accent);
}

html[data-theme="dark"] .btn-outline-secondary {
  color: var(--admin-neutral);
  border-color: var(--admin-border);
  background: transparent;
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus {
  background: rgba(255,255,255,0.08);
  color: var(--admin-text);
  border-color: rgba(255,255,255,0.2);
}

html[data-theme="dark"] .btn-outline-danger {
  color: var(--admin-danger);
  border-color: rgba(248,113,113,0.4);
  background: transparent;
}
html[data-theme="dark"] .btn-outline-danger:hover,
html[data-theme="dark"] .btn-outline-danger:focus {
  background: rgba(248,113,113,0.12);
  color: var(--admin-danger);
  border-color: var(--admin-danger);
}

html[data-theme="dark"] .btn-outline-success {
  color: var(--admin-success);
  border-color: rgba(52,211,153,0.4);
  background: transparent;
}
html[data-theme="dark"] .btn-outline-success:hover,
html[data-theme="dark"] .btn-outline-success:focus {
  background: rgba(52,211,153,0.12);
  color: var(--admin-success);
  border-color: var(--admin-success);
}

html[data-theme="dark"] .btn-outline-warning {
  color: var(--admin-warning);
  border-color: rgba(251,191,36,0.4);
  background: transparent;
}
html[data-theme="dark"] .btn-outline-warning:hover,
html[data-theme="dark"] .btn-outline-warning:focus {
  background: rgba(251,191,36,0.12);
  color: var(--admin-warning);
  border-color: var(--admin-warning);
}

html[data-theme="dark"] .btn-outline-info {
  color: var(--admin-info);
  border-color: rgba(96,165,250,0.4);
  background: transparent;
}
html[data-theme="dark"] .btn-outline-info:hover,
html[data-theme="dark"] .btn-outline-info:focus {
  background: rgba(96,165,250,0.12);
  color: var(--admin-info);
  border-color: var(--admin-info);
}

/* Solid primary button — keep accent blue, just ensure it's consistent */
html[data-theme="dark"] .btn-primary {
  background: var(--admin-accent);
  border-color: var(--admin-accent);
}
html[data-theme="dark"] .btn-primary:hover { background: #1a74af; border-color: #1a74af; }

/* Link button */
html[data-theme="dark"] .btn-link { color: var(--admin-accent); }
html[data-theme="dark"] .btn-link:hover { color: #60a5fa; }

/* ============================================================
   Alerts — dark mode overrides
   ============================================================ */
html[data-theme="dark"] .alert {
  background: rgba(255,255,255,0.05);
  border-color: var(--admin-border);
  color: var(--admin-text);
}
html[data-theme="dark"] .alert-success {
  background: var(--admin-success-bg);
  border-color: var(--admin-success-border);
  color: var(--admin-success);
}
html[data-theme="dark"] .alert-danger {
  background: var(--admin-danger-bg);
  border-color: var(--admin-danger-border);
  color: var(--admin-danger);
}
html[data-theme="dark"] .alert-warning {
  background: var(--admin-warning-bg);
  border-color: var(--admin-warning-border);
  color: var(--admin-warning);
}
html[data-theme="dark"] .alert-info {
  background: var(--admin-info-bg);
  border-color: var(--admin-info-border);
  color: var(--admin-info);
}

/* ============================================================
   Code / pre — dark mode
   ============================================================ */
html[data-theme="dark"] code {
  background: rgba(255,255,255,0.08);
  color: #f472b6;
  padding: 0.15em 0.35em;
  border-radius: 4px;
}
html[data-theme="dark"] pre {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--admin-border);
  color: var(--admin-text);
}