/* theme.css - Selfscale Dark Mode Support */

/* ===== CSS Custom Properties ===== */
:root {
  /* Status Indicators */
  --status-dot-online: #198754;
  --status-dot-offline: #dc3545;
  --status-dot-default: #bbb;

  /* Route Colors */
  --route-approved: #198754;
  --route-available: #0d6efd;
  --route-subnet: #6c757d;
  --route-badge-bg: #f8f9fa;
  --route-badge-border: #dee2e6;

  /* Tag Badges */
  --tag-badge-bg: #e9ecef;
  --tag-badge-color: #495057;
  --tag-badge-border: #ced4da;

  /* Search Highlighting */
  --search-highlight-bg: #fff3cd;
  --search-highlight-color: inherit;

  /* Interactive Elements */
  --sortable-hover-bg: #f8f9fa;

  /* Warning Boxes */
  --warning-box-bg: #fff3cd;
  --warning-box-border: #ffc107;

  /* Editor */
  --editor-header-bg: #f8f9fa;
  --editor-header-border: #dee2e6;
}

/* ===== Dark Mode Overrides ===== */
[data-bs-theme="dark"] {
  /* Route Badges - Dark Mode */
  --route-badge-bg: #2b3035;
  --route-badge-border: #495057;

  /* Tag Badges - Dark Mode */
  --tag-badge-bg: #2b3035;
  --tag-badge-color: #adb5bd;
  --tag-badge-border: #495057;

  /* Search Highlighting - Dark Mode */
  --search-highlight-bg: #664d03;
  --search-highlight-color: #fff3cd;

  /* Interactive Elements - Dark Mode */
  --sortable-hover-bg: #343a40;

  /* Warning Boxes - Dark Mode */
  --warning-box-bg: #332701;
  --warning-box-border: #997404;

  /* Editor - Dark Mode */
  --editor-header-bg: #2b3035;
  --editor-header-border: #495057;
}

/* ===== Status Dots ===== */
.status-dot {
  height: 10px;
  width: 10px;
  background-color: var(--status-dot-default);
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.status-dot.online {
  background-color: var(--status-dot-online);
}

.status-dot.offline {
  background-color: var(--status-dot-offline);
}

/* ===== Route Styling ===== */
.route-approved {
  color: var(--route-approved);
  font-weight: bold;
}

.route-available {
  color: var(--route-available);
}

.route-subnet {
  color: var(--route-subnet);
}

.routes-list {
  font-size: 0.85em;
}

.route-badge {
  display: inline-block;
  padding: 2px 6px;
  margin: 1px;
  border-radius: 3px;
  font-size: 0.75em;
  background-color: var(--route-badge-bg);
  border: 1px solid var(--route-badge-border);
}

/* ===== Tag Badges ===== */
.tag-badge {
  display: inline-block;
  padding: 2px 6px;
  margin: 1px;
  border-radius: 3px;
  font-size: 0.75em;
  background-color: var(--tag-badge-bg);
  color: var(--tag-badge-color);
  border: 1px solid var(--tag-badge-border);
}

/* ===== Table Enhancements ===== */
.sortable {
  cursor: pointer;
}

.sortable:hover {
  background-color: var(--sortable-hover-bg);
}

.sort-arrow {
  margin-left: 5px;
  font-size: 0.8em;
}

/* ===== Search Highlighting ===== */
.search-highlight {
  background-color: var(--search-highlight-bg);
  color: var(--search-highlight-color);
  padding: 2px;
  border-radius: 3px;
}

/* ===== Utility Classes ===== */
.hidden {
  display: none;
}

/* ===== Warning Boxes ===== */
.warning-box {
  border-left: 4px solid var(--warning-box-border);
  background-color: var(--warning-box-bg);
  padding: 10px;
  margin: 10px 0;
}

/* ===== ACL Editor ===== */
#policyEditor {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  height: 500px;
}

.editor-header {
  background: var(--editor-header-bg);
  border-bottom: 1px solid var(--editor-header-border);
  padding: 10px 15px;
}

/* ===== Login Page Styling ===== */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

[data-bs-theme="dark"] .login-body {
  background-color: var(--bs-body-bg);
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  width: 100%;
}

/* ===== Theme Toggle Button ===== */
#themeToggle {
  transition: transform 0.2s ease;
}

#themeToggle:hover {
  transform: scale(1.1);
}

.theme-icon {
  font-size: 1.1em;
  display: inline-block;
}

/* ===== Smooth Theme Transitions ===== */
body,
.card,
.btn,
.form-control,
.table,
.navbar,
.alert,
.badge {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Prevent transition on page load */
.no-transition * {
  transition: none !important;
}