/* ==========================================================================
   Traefik Services Manager - minimal theme
   Load AFTER bootstrap.min.css (and after the inline <style> block on dashboards).
   Principles: neutral surfaces, hairline borders, one accent, no gradients/glows/shadows.
   ========================================================================== */

[data-bs-theme="light"] {
  --tf-accent: #0e7490;
  --tf-accent-soft: rgba(14, 116, 144, 0.08);
  --tf-ring: rgba(14, 116, 144, 0.22);
  --tf-surface: #ffffff;
  --tf-canvas: #fafafa;
  --tf-line: #e5e7eb;
  --tf-ink-soft: #6b7280;
  --tf-on-accent: #ffffff;

  --bs-primary: #0e7490;
  --bs-primary-rgb: 14, 116, 144;
  --bs-link-color: #0e7490;
  --bs-link-color-rgb: 14, 116, 144;
  --bs-link-hover-color: #155e75;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg: #fafafa;
  --bs-tertiary-bg-rgb: 250, 250, 250;
  --bs-secondary-bg: #f4f4f5;
  --bs-border-color: #e5e7eb;
  --bs-body-color: #18181b;
  --bs-secondary-color: #6b7280;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.65rem;

  --panel-border: #e5e7eb;
  --panel-radius: 0.65rem;
  --panel-shadow: none;
}

[data-bs-theme="dark"] {
  --tf-accent: #22b8d6;
  --tf-accent-soft: rgba(34, 184, 214, 0.12);
  --tf-ring: rgba(34, 184, 214, 0.30);
  --tf-surface: #141416;
  --tf-canvas: #0c0c0d;
  --tf-line: #27272a;
  --tf-ink-soft: #a1a1aa;
  --tf-on-accent: #04121a;

  --bs-primary: #22b8d6;
  --bs-primary-rgb: 34, 184, 214;
  --bs-link-color: #5fd0e6;
  --bs-link-color-rgb: 95, 208, 230;
  --bs-link-hover-color: #9be3f1;
  --bs-body-bg: #141416;
  --bs-body-bg-rgb: 20, 20, 22;
  --bs-tertiary-bg: #0c0c0d;
  --bs-tertiary-bg-rgb: 12, 12, 13;
  --bs-secondary-bg: #1c1c1f;
  --bs-border-color: #27272a;
  --bs-body-color: #e4e4e7;
  --bs-secondary-color: #a1a1aa;

  --panel-border: #27272a;
  --panel-shadow: none;
}

/* ---------- Base ---------- */
body {
  background-color: var(--tf-canvas) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
::selection { background: var(--tf-ring); }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
hr { opacity: 1; border-color: var(--tf-line); }

/* ---------- Radius: calmer than pills ---------- */
.btn.rounded-pill, .form-control.rounded-pill, .form-select.rounded-pill,
.input-group.rounded-pill, .input-group.rounded-pill > .form-control,
.input-group.rounded-pill > .input-group-text, .input-group.rounded-pill > .btn { border-radius: 0.5rem !important; }
.rounded-4 { border-radius: 0.65rem !important; }
.rounded-3 { border-radius: 0.5rem !important; }

/* ---------- Buttons ---------- */
.btn { font-weight: 500; letter-spacing: 0; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.btn:active { transform: none; }
.btn-primary {
  --bs-btn-bg: var(--tf-accent);
  --bs-btn-border-color: var(--tf-accent);
  --bs-btn-color: var(--tf-on-accent);
  --bs-btn-hover-bg: var(--tf-accent);
  --bs-btn-hover-border-color: var(--tf-accent);
  --bs-btn-hover-color: var(--tf-on-accent);
  --bs-btn-active-bg: var(--tf-accent);
  --bs-btn-active-border-color: var(--tf-accent);
  --bs-btn-active-color: var(--tf-on-accent);
  --bs-btn-focus-shadow-rgb: 14, 116, 144;
}
.btn-primary:hover { filter: brightness(0.94); }
.btn-outline-primary {
  --bs-btn-color: var(--tf-accent);
  --bs-btn-border-color: var(--tf-line);
  --bs-btn-hover-bg: var(--tf-accent-soft);
  --bs-btn-hover-color: var(--tf-accent);
  --bs-btn-hover-border-color: var(--tf-accent);
  --bs-btn-active-bg: var(--tf-accent-soft);
  --bs-btn-active-color: var(--tf-accent);
  --bs-btn-active-border-color: var(--tf-accent);
}
.btn-outline-secondary, .btn-light, .btn-outline-danger, .btn-outline-success {
  --bs-btn-border-color: var(--tf-line);
}
.btn-light { --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--bs-secondary-bg); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background-color: var(--tf-surface);
  border-color: var(--tf-line);
  box-shadow: none;
}
.form-control:focus, .form-select:focus {
  border-color: var(--tf-accent);
  box-shadow: 0 0 0 3px var(--tf-ring);
}
.form-check-input:checked { background-color: var(--tf-accent); border-color: var(--tf-accent); }
.form-label { color: var(--bs-body-color); }

/* ---------- Surfaces ---------- */
.card, .tf-panel, .modal-content, .dropdown-menu, .toast {
  background-color: var(--tf-surface);
  border: 1px solid var(--tf-line) !important;
  border-radius: var(--panel-radius) !important;
  box-shadow: none !important;
}
.card-header, .card-footer { background: transparent; border-color: var(--tf-line); }
.modal-header, .modal-footer { border-color: var(--tf-line) !important; }
.modal-backdrop { --bs-backdrop-opacity: .45; }
.group-box, .svc-card, .service-card-compact { box-shadow: none !important; transition: border-color .12s ease; }
.group-box:hover { border-color: var(--tf-accent) !important; }
.svc-card:hover { border-color: var(--tf-accent) !important; }
.filter-box { background: transparent !important; border-color: var(--tf-line) !important; }
.bulk-bar { background: var(--tf-accent-soft) !important; border-color: var(--tf-line) !important; }
.cat-chip { border-radius: 0.4rem !important; }

/* ---------- Navbar ---------- */
.navbar {
  background-color: var(--tf-surface) !important;
  border-bottom: 1px solid var(--tf-line);
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.navbar-brand { letter-spacing: -0.01em; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--tf-accent-soft); --bs-table-border-color: var(--tf-line); }
.table > thead th, .table-light { background: transparent !important; --bs-table-bg: transparent; }
.table th {
  color: var(--tf-ink-soft);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom-color: var(--tf-line);
}
.table-container { border-color: var(--tf-line) !important; }

/* ---------- Sidebar pills ---------- */
.nav-pills .nav-link { color: var(--bs-body-color); border-radius: 0.5rem; transition: background-color .12s ease; }
.nav-pills .nav-link:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.nav-pills .nav-link.active {
  background: var(--tf-accent-soft) !important;
  color: var(--tf-accent) !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* ---------- Colour utilities that follow the accent ---------- */
.bg-primary.bg-opacity-10, .bg-primary.bg-opacity-25 { background-color: var(--tf-accent-soft) !important; }
.text-primary { color: var(--tf-accent) !important; }
.text-bg-primary, .badge.bg-primary { background-color: var(--tf-accent) !important; color: var(--tf-on-accent) !important; }
.border-primary { border-color: var(--tf-accent) !important; }
.progress-bar { background-color: var(--tf-accent); }
.badge { font-weight: 500; }

/* ==========================================================================
   Shared components
   ========================================================================== */
.tf-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; border-radius: 8px; }
.tf-mark-lg { width: 44px; height: 44px; border-radius: 12px; }
.tf-brandtext { line-height: 1.15; }
.tf-brandtext b { display: block; font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; }
.tf-brandtext small { display: block; color: var(--tf-ink-soft); font-size: .72rem; font-weight: 400; }

/* legacy decorative hooks: intentionally flat */
.tf-backdrop, .tf-grid { background-image: none !important; }
.tf-grid::before { display: none !important; }
.tf-layer { position: relative; z-index: 1; }

.tf-panel { padding: 1.75rem; }

.tf-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid var(--tf-line); background: transparent;
  color: var(--tf-ink-soft); font-size: .78rem; font-weight: 500;
}
.tf-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.tf-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: .5rem;
  border: 1px solid var(--tf-line); background: transparent; color: var(--bs-body-color);
  transition: border-color .12s ease, color .12s ease;
}
.tf-icon-btn:hover { border-color: var(--tf-accent); color: var(--tf-accent); }

/* service tiles on home */
.tf-tile {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1rem; text-decoration: none; color: inherit;
  background: var(--tf-surface); border: 1px solid var(--tf-line); border-radius: .65rem;
  transition: border-color .12s ease, background-color .12s ease;
}
.tf-tile:hover { border-color: var(--tf-accent); color: inherit; }
.tf-tile .tf-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tf-accent-soft); color: var(--tf-accent); font-size: 1rem;
}
.tf-tile .tf-go { margin-left: auto; color: var(--tf-ink-soft); transition: transform .12s ease, color .12s ease; }
.tf-tile:hover .tf-go { transform: translateX(2px); color: var(--tf-accent); }
.tf-tile h6 { font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }