/* static/css/main.css */

/* IMMEDIATE DARK MODE PREVENTION - Applied first */
html {
  background-color: #121212 !important;
}
body {
  background-color: #121212 !important;
  color: #f0f0f0 !important;
}
.dark-theme {
  background-color: #121212 !important;
}
.dark-mode {
  background-color: #121212 !important;
  color: #f0f0f0 !important;
}

/* RESET & BOX-SIZING */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-family: "Poppins", sans-serif;
  /* transition: background 0.5s, color 0.5s; // Removed, can cause issues with rapid theme changes */
}

/* COLOR VARIABLES */
:root {
  /* New Design System Color Palette (Dark Theme) */

  /* Backgrounds & Surfaces */
  --color-background: #121212;        /* Primary page background */
  --color-surface-1: #1e1e1e;         /* Cards, modals, primary surface */
  --color-surface-2: #2a2a2a;         /* Nested elements, interactive surface states */
  --color-border-subtle: #383838;     /* Subtle borders between dark surfaces */
  --color-border-strong: #555555;     /* Stronger borders or dividers */

  /* Text Colors */
  --color-text-primary: #FFFFFF;      /* Main text color, for high contrast */
  --color-text-secondary: #c0c0c0;    /* Secondary text, slightly muted */
  --color-text-disabled: #777777;     /* Disabled text or elements */
  --color-text-placeholder: #888888;  /* Placeholder text in inputs */

  /* Primary Action Color (Green) */
  --color-primary-main: #3CD353;
  --color-primary-hover: #2A9A3E;     /* Darker for hover */
  --color-primary-active: #248a34;    /* Even darker for active/pressed */
  --color-primary-focus-ring: rgba(60, 211, 83, 0.4); /* For focus outlines */
  --color-primary-text-on-brand: #FFFFFF; /* Text on primary-main backgrounds */

  /* Secondary Action Color (Purple) */
  --color-secondary-main: #8338ec;
  --color-secondary-hover: #732dd8;   /* Darker for hover */
  --color-secondary-active: #621fc3;  /* Even darker for active/pressed */
  --color-secondary-focus-ring: rgba(131, 56, 236, 0.4); /* For focus outlines */
  --color-secondary-text-on-brand: #FFFFFF; /* Text on secondary-main backgrounds */

  /* Semantic Feedback Colors */
  /* Success */
  --color-success-main: #3cb371;          /* Main success indicator (e.g., icons, borders) */
  --color-success-background: #204e30;    /* Background for success alerts/banners */
  --color-success-text-on-bg: #d1f7e0;    /* Text on success-background */
  --color-success-text-standalone: var(--color-success-main); /* Standalone success text */

  /* Warning */
  --color-warning-main: #ffc107;          /* Main warning indicator */
  --color-warning-background: #594402;    /* Background for warning alerts/banners */
  --color-warning-text-on-bg: #fff3cd;    /* Text on warning-background */
  --color-warning-text-standalone: var(--color-warning-main); /* Standalone warning text */

  /* Danger / Error */
  --color-danger-main: #dc3545;           /* Main danger/error indicator */
  --color-danger-background: #5c1e24;     /* Background for danger alerts/banners */
  --color-danger-text-on-bg: #f8d7da;     /* Text on danger-background */
  --color-danger-text-standalone: var(--color-danger-main); /* Standalone danger text */

  /* Info */
  --color-info-main: #17a2b8;             /* Main info indicator */
  --color-info-background: #0f5662;       /* Background for info alerts/banners */
  --color-info-text-on-bg: #d1ecf1;       /* Text on info-background */
  --color-info-text-standalone: var(--color-info-main); /* Standalone info text */

  /* Focus Outline - Generic */
  --color-focus-outline: var(--color-primary-main);

  /* Additional colors for compatibility */
  --color-bg-dark: #121212;
  --color-sidebar-dark: #111;
  --color-card-bg: #1e1e1e;
  --color-table-header: #2a2a2a;
  --color-table-row-odd: rgba(255, 255, 255, 0.02);
  --color-table-row-even: rgba(255, 255, 255, 0.05);
  --color-border-light: #444;
  
  /* Map old variables to new ones for backward compatibility */
  --color-primary: #3CD353;
  --color-primary-hover: #2A9A3E;
  --color-secondary: var(--color-secondary-main);
  --color-accent: #3CD353;
  --color-background-dark: var(--color-background);
  --color-surface-dark: var(--color-surface-1);
  --color-surface-medium: #222;
  --color-surface-light: #303030;
  --color-border-dark: #444;
  --color-text-dark: #f0f0f0;
  --color-text-secondary-dark: #a0a0a0;
  --color-text-subtle-dark: #777;
}

/* Reset and Base Styles */

/* THEME: default is dark mode styling. If you also manage a light mode, you'd adjust accordingly. */
body {
  background-color: var(--color-bg-dark);
  color: var(--color-text-dark);
}
body.dark-mode {
  background-color: var(--color-bg-dark);
  color: var(--color-text-dark);
}

/* SIDEBAR LAYOUT */
.layout-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling during transitions */
}
.sidebar {
  background-color: #222;
  flex-shrink: 0;
  width: 220px !important; /* Default expanded width, important to override any inline styles */
  max-width: 220px !important; /* Ensure maximum width is enforced */
  min-width: 60px !important; /* Minimum width when collapsed */
  transition: width 0.25s ease, max-width 0.25s ease !important; /* Slightly faster transition */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1000;
  overflow: hidden;
  will-change: width, max-width; /* Hint to browser for optimized animation */
}
body.dark-mode .sidebar {
  background-color: var(--color-sidebar-dark);
}
.sidebar.collapsed {
  width: 60px !important; /* Collapsed width, important to override any inline styles */
  max-width: 60px !important; /* Ensure maximum width is also enforced when collapsed */
}

/* TOP SIDEBAR CONTROLS */
.top-sidebar-controls {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#sidebar-toggle {
  background: #555;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.3s;
}
#sidebar-toggle:hover {
  background: #444;
}
body.dark-mode #sidebar-toggle:hover {
  background: #333;
}

/* DARK MODE SWITCH */
.switch {
  position: relative;
  width: 3.5em;
  height: 2em;
}
.checkbox {
  display: none;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #444;
  border-radius: 34px;
  transition: background-color 0.4s;
  cursor: pointer;
}
.slider::before {
  content: "";
  position: absolute;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background-color: #fff;
  bottom: 0.2em;
  left: 0.2em;
  transition: transform 0.4s;
}
.checkbox:checked + .slider {
  background-color: var(--color-primary);
}
.checkbox:checked + .slider::before {
  transform: translateX(1.5em);
}

/* SIDEBAR HEADER with TWO images:
   1) .logo-full => bigger "tlc_wit.png"
   2) .logo-icon => small "tlc_favicon.png"
*/
.sidebar-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
  height: 50px; /* optional fixed height to position icons easily */
}
.logo-full,
.logo-icon {
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: block;
  max-height: 40px;
  height: auto;
}

a {
  text-decoration: none;
}

/* Full logo is default visible. */
.logo-full {
  opacity: 1;
  transform: scale(1);
  will-change: opacity, transform; /* Hint for optimization */
}
.logo-icon {
  opacity: 0;
  transform: scale(0.8);
  position: absolute;
  top: 5px;
  left: 14px;
  max-width: 32px;
  height: auto;
  will-change: opacity, transform; /* Hint for optimization */
}

/* Collapsed => hide .logo-full, show .logo-icon */
.sidebar.collapsed .logo-full {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}
.sidebar.collapsed .logo-icon {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* SIDEBAR NAV */
.sidebar-nav {
  margin-top: 10px;
  width: 100%;
  will-change: contents; /* Hint for optimization */
}
.sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-nav li {
  margin-bottom: 6px;
  width: 100%;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  color: #ccc;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.sidebar-nav a:hover {
  background-color: #444;
  color: #fff;
}
body.dark-mode .sidebar-nav a:hover {
  background-color: #222;
}
.icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}
.nav-text {
  transition: opacity 0.25s ease; /* Faster transition */
  white-space: nowrap; /* Prevent wrapping which can cause layout issues */
  will-change: opacity; /* Hint for optimization */
}
.sidebar.collapsed .nav-text {
  opacity: 0;
  pointer-events: none;
}

/* MAIN CONTENT */
.main-content {
  flex: 1;
  padding: 20px;
  background: inherit;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 20px 10px;
  font-size: 0.9rem;
  background-color: #1f1f1f10;
  color: #ccc;
  width: 100%;
}
body.dark-mode .footer {
  background-color: #1e1e1e;
  color: #ccc;
}
.footer-links a {
  color: inherit;
  margin: 0 10px;
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--color-primary);
}

/* BUTTONS & FORMS */
button,
input[type="submit"],
a.button {
  display: inline-block;
  padding: 10px 14px;
  font-size: 14px;
  background-color: #2ea043;
  color: #fff !important;
  border: none;
  border-radius: 5px !important;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  margin: 4px 2px 4px 0;
  text-decoration: none;
  opacity: 1 !important;
}
button:hover,
input[type="submit"]:hover,
a.button:hover {
  background-color: #248a34; /* Slightly darker green */
  transform: scale(1.02);
  opacity: 0.9 !important;
}
label {
  display: block;
  margin: 10px 0 4px;
  font-weight: 500;
}

/* Make all inputs/selects darker by default */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: #303030; /* darker background */
  color: #ddd;              /* near-white text */
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode select,
body.dark-mode textarea {
  background: #1f1f1f;
  color: #fff;
  border: 1px solid var(--color-border-dark);
}

/* FLASH MESSAGES */
.flash-messages ul {
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
.flash-messages li {
  background: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 5px;
}
body.dark-mode .flash-messages li {
  background: #333;
  color: #fff;
}

/* CARD */
.card {
  background-color: var(--color-card-bg);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* TABLES & RESPONSIVE */
.table-container {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 20px;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

thead th {
  background-color: var(--color-table-header);
  color: var(--color-text-dark);
  text-align: left;
  padding: 12px 15px;
  font-weight: 600;
  border-bottom: 2px solid #333;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* First and last th elements get rounded corners */
thead th:first-child {
  border-top-left-radius: 8px;
}

thead th:last-child {
  border-top-right-radius: 8px;
}

tbody tr {
  border-bottom: 1px solid #333;
}

tbody tr:nth-child(odd) {
  background-color: var(--color-table-row-odd);
}

tbody tr:nth-child(even) {
  background-color: var(--color-table-row-even);
}

tbody tr:hover {
  background-color: rgba(57, 211, 83, 0.05) !important; /* Lighter green highlight on hover */
  color: var(--color-text-dark) !important;
}

tbody td {
  padding: 12px 15px;
  vertical-align: middle;
  color: var(--color-text-dark);
  word-break: break-word;
}

/* Ensure buttons in table cells have consistent styling */
tbody td .button, 
tbody td button {
  padding: 6px 12px;
  margin: 4px 0;
  font-size: 0.9rem;
}

/* Make sure tables are consistently styled across all pages */
.card .table-container table {
  margin: 0;
}

/* Mobile table layout */
@media (max-width: 768px) {
  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    width: 100%;
  }
  thead {
    display: none;
  }
  tbody tr {
    margin-bottom: 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 8px;
  }
  body.dark-mode tbody tr {
    border-color: var(--color-border-dark);
  }
  tbody td {
    display: block;
    text-align: left;
    padding: 6px 0;
    border: none;
  }
  tbody td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: #888;
    margin-right: 5px;
  }
}

/* AUTH CONTAINER (login pages) */
.auth-container {
  min-height: calc(100vh - 100px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: inherit;
  width: 100%;
  padding: 20px;
}

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

.auth-logo img {
  max-width: 300px;
  height: auto;
}

.auth-container form {
  /* width: 100%;
  max-width: 480px;
  background-color: var(--color-card-bg);
  padding: 35px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); */
}

.auth-container input[type="text"],
.auth-container input[type="email"],
.auth-container input[type="password"] {
  padding: 14px 16px;
  font-size: 16px;
  margin-bottom: 20px;
  background-color: #282828;
  border: 1px solid #444;
  border-radius: 8px;
  color: #f0f0f0;
}

.auth-container button {
  padding: 14px;
  width: 100%;
  margin-top: 15px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.auth-container button:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
}

.auth-container a {
  display: inline-block;
  margin-top: 15px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 15px;
}

.auth-container a:hover {
  text-decoration: underline;
}

/* Improve collapsible content in detail.html */
.content-section {
  color: #f0f0f0;
  background-color: #2a2a2a;
  padding: 15px;
  border-radius: 4px;
  line-height: 1.6;
}

/* Markdown content styling */
.markdown-content {
  color: #f0f0f0;
}

.markdown-content h1, 
.markdown-content h2, 
.markdown-content h3, 
.markdown-content h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--color-primary);
}

.markdown-content ul, 
.markdown-content ol {
  margin-left: 20px;
  margin-bottom: 10px;
}

.markdown-content p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.markdown-content a {
  color: #4db8ff;
  text-decoration: none;
}

.markdown-content a:hover {
  text-decoration: underline;
}

.markdown-content code {
  background-color: #1a1a1a;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

/* Markdown table styling - ensures tables render properly in evaluations and summaries */
.markdown-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 15px 0;
  font-size: 0.9rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.markdown-content table thead th {
  background-color: var(--color-table-header);
  color: var(--color-text-dark);
  text-align: left;
  padding: 12px 15px;
  font-weight: 600;
  border-bottom: 2px solid #333;
}

.markdown-content table thead th:first-child {
  border-top-left-radius: 8px;
}

.markdown-content table thead th:last-child {
  border-top-right-radius: 8px;
}

.markdown-content table tbody tr {
  border-bottom: 1px solid #333;
}

.markdown-content table tbody tr:nth-child(odd) {
  background-color: var(--color-table-row-odd);
}

.markdown-content table tbody tr:nth-child(even) {
  background-color: var(--color-table-row-even);
}

.markdown-content table tbody tr:hover {
  background-color: rgba(57, 211, 83, 0.05) !important;
  color: var(--color-text-dark) !important;
}

.markdown-content table tbody td {
  padding: 12px 15px;
  vertical-align: middle;
  color: var(--color-text-dark);
  word-break: break-word;
  border-right: 1px solid #333;
}

.markdown-content table tbody td:last-child {
  border-right: none;
}

/* Mobile responsive tables in markdown */
@media (max-width: 768px) {
  .markdown-content table,
  .markdown-content table thead,
  .markdown-content table tbody,
  .markdown-content table tr,
  .markdown-content table th,
  .markdown-content table td {
    display: block;
    width: 100%;
  }
  
  .markdown-content table thead {
    display: none;
  }
  
  .markdown-content table tbody tr {
    margin-bottom: 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    padding: 8px;
    background-color: var(--color-surface-1) !important;
  }
  
  .markdown-content table tbody td {
    display: block;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #333;
    text-align: left;
  }
  
  .markdown-content table tbody td:last-child {
    border-bottom: none;
  }
  
  .markdown-content table tbody td:before {
    content: attr(data-label) ": ";
    font-weight: bold;
    color: var(--color-primary);
  }
}

/* SPLIT CONTAINER & COLLAPSIBLES (detail page) */
.split-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  justify-content: center;
  margin-top: 20px;
}
.panel {
  flex: 1 1 300px;
  background-color: #1a1a1a;
  color: #e0e0e0;
  padding: 15px;
  border-radius: 5px;
  max-height: 600px;
  overflow-y: auto;
}
body.dark-mode .panel {
  background-color: #1a1a1a;
  color: #e0e0e0;
}
@media (max-width: 500px) {
  .panel {
    width: 100%;
    flex: 1 1 auto;
    margin-bottom: 20px;
    max-height: none;
  }
}

/* Collapsible sections - Improved for compatibility */
.collapsible-header {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #222;
  padding: 12px 15px;
  border-radius: 6px;
  transition: background-color 0.2s;
  border-left: 3px solid var(--color-primary);
  user-select: none;
}
.collapsible-header:hover {
  background-color: #2a2a2a;
}
.collapsible-header::after {
  content: "▼";
  font-size: 12px;
  transition: transform 0.3s;
  color: var(--color-primary);
}
.collapsible-header.opened {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.collapsible-header.opened::after {
  transform: rotate(-180deg);
}
.collapsible-content {
  display: none;
  padding: 15px;
  background-color: #1a1a1a;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-bottom: 12px;
  border-left: 3px solid var(--color-primary);
  color: #f0f0f0;
}
.collapsible-content.open {
  display: block;
}

/* Section collapsible for detail.html - Enhanced styling */
.section-collapsible {
  margin-bottom: 15px;
}

.section-collapsible .collapsible-header {
  background-color: #222;
  font-size: 16px;
  font-weight: 600;
}

.section-collapsible .content-section {
  background-color: #2a2a2a;
  color: #f0f0f0;
  padding: 15px;
  border-radius: 4px;
  line-height: 1.6;
}

.section-collapsible .card {
  background-color: #222;
  border: 1px solid #333;
}

.section-collapsible .card p {
  color: #e0e0e0;
}

/* Improved collapsible content to ensure visibility */
.collapsible-content p, 
.collapsible-content div, 
.collapsible-content span {
  color: #f0f0f0;
}

/* Further improvements for detail page text readability */
.content-section {
  color: #f0f0f0;
  background-color: #2a2a2a;
  padding: 15px;
  border-radius: 4px;
  line-height: 1.6;
}

/* STATUS PILLS */
.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.status-nieuw {
  background-color: #2962ff;
  color: white;
}

.status-in-behandeling {
  background-color: #ff9800;
  color: white;
}

.status-voltooid {
  background-color: #43a047;
  color: white;
}

/* BUTTON VARIATIONS */
.action-button {
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  margin: 3px;
}

.action-button:hover {
  transform: translateY(-1px);
}

.start-button {
  background-color: #3CD353;
  color: white;
}

.start-button:hover {
  background-color: #2A9A3E;
}

.call-button {
  background-color: #ff5722;
  color: white;
}

.call-button:hover {
  background-color: #e64a19;
}

/* Ensure table borders remain dark */
table, th, td {
  border-color: #333 !important;
}

/* Fix borders on inputs and selects */
input, 
select,
textarea,
.form-field input,
.form-field textarea,
#daterange {
  border: 1px solid #444 !important; 
}

/* Make sure dropdowns remain dark */
.dropdown-menu,
.ui-datepicker,
.daterangepicker {
  background-color: #1d1d1d !important;
  border-color: #444 !important;
  color: var(--color-text-dark) !important;
}

/* Fix dropdown items */
.dropdown-item:hover {
  background-color: #333 !important;
  color: white !important;
}

/* Ensure modal shows above table headers */
#deviceModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000 !important; /* Very high z-index to ensure it's above everything */
}

/* Fix collapsible sections on detail page */
.collapsible-content {
  display: none; /* Collapsed by default */
}

.collapsible-header {
  background-color: #202020;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* Ensure dark backdrops for modals and popups */
.modal-backdrop,
.modal-content,
.popover,
.tooltip-inner {
  background-color: #222 !important;
}

/* Fix any elements that might have white backgrounds */
.card, 
.panel, 
.modal-content,
.popover-body,
.list-group-item {
  background-color: var(--color-card-bg) !important;
  border-color: #444 !important;
}

/* Fix Bootstrap button hover states */
.btn:hover,
.button:hover,
button:hover {
  background-color: var(--color-primary-hover) !important;
  color: white !important;
}

/* Improve card and panel contrast */
.card, .panel {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* DETAIL PAGE STYLING */
.detail-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.detail-page-header h1 {
  margin: 0;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.detail-info-item {
  padding: 10px;
  background-color: #222;
  border-radius: 4px;
}

.detail-info-item strong {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.detail-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Further improve responsive styling */
@media (max-width: 576px) {
  .detail-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .detail-info-grid {
    grid-template-columns: 1fr;
  }
  
  .detail-actions {
    flex-direction: column;
  }
  
  .detail-actions button,
  .detail-actions a.button {
    width: 100%;
  }
  
  /* Ensure modals display well on mobile */
  #deviceModal {
    width: 95% !important;
    max-width: none !important;
  }
  
  input, select, textarea {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }
}

/* Improve text readability */
.info-label, 
label, 
th, 
h1, h2, h3, h4, h5, h6,
.collapsible-header,
.detail-field strong,
.status-pill {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  color: var(--color-text-light);
}

/* Make text value fields readable with proper contrast */
.info-value,
.detail-field span,
td {
  background-color: rgba(30, 30, 30, 0.7) !important;
  color: var(--color-text-light);
  /* border-radius: 4px; */
}
.table-hover>tbody>tr:hover>* {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: #212121 !important;
}

/* Mobile card layout */
@media (max-width: 767px) {
  .card {
    padding: 15px;
  }
  
  /* Dashboard and callbacks mobile view */
  table.dashboard-table td:before,
  #callbacksTable td:before {
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  }
  
  /* Mobile card container for table rows */
  .table-container table tr {
    margin-bottom: 12px;
    padding: 12px;
    background-color: #222 !important;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  
  /* Mobile button styling */
  .table-container .button,
  .table-container button {
    display: block;
    width: 100%;
    margin: 5px 0;
    text-align: center;
  }
  
  /* Consistent filter button */
  #filterToggleBtn {
    background-color: var(--color-primary) !important;
    color: white;
    font-weight: 600;
    padding: 12px;
  }
  
  /* Mobile search inputs */
  #filterContainer input,
  #filterContainer select {
    background-color: #252525 !important;
    color: var(--color-text-light) !important;
    padding: 12px !important;
  }
}

/* Improve mobile detail page view */
@media (max-width: 576px) {
  .collapsible-header {
    padding: 15px;
    font-size: 1.1rem;
  }
  
  .collapsible-content {
    padding: 15px;
  }
  
  .content-section {
    line-height: 1.6;
  }
  
  /* Consistent action buttons */
  .action-button,
  .actions .button,
  .actions button {
    margin: 5px 0;
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* SCORE PILLS */
.score-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: white;
}

.agent-score {
  background-color: #2196f3;
}

.beller-score {
  background-color: #9c27b0;
}

/* Consistent button styling in both tables */
.dashboard-table .action-button,
#callbacksTable .action-button {
  border-radius: 6px;
  font-weight: 500;
  transition: transform 0.2s;
}

.dashboard-table .action-button:hover,
#callbacksTable .action-button:hover {
  transform: translateY(-2px);
}

/* Make table headers look clickable for sorting */
.dashboard-table th,
#callbacksTable th {
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
}

.dashboard-table th:hover,
#callbacksTable th:hover {
  background-color: #222222;
}

/* Add sort icons */
#callbacksTable th::after {
  content: "⇅";
  display: inline-block;
  margin-left: 5px;
  font-size: 0.8em;
  opacity: 0.5;
}

.dashboard-table th.asc::after,
#callbacksTable th.asc::after {
  content: "↑";
  opacity: 1;
}

.dashboard-table th.desc::after,
#callbacksTable th.desc::after {
  content: "↓";
  opacity: 1;
}