:root{
  --bg:#f8f9fa;
  --card-bg:#fff;
  --text:#212529;
  --muted:#6c757d;
  --primary:#0d6efd;
  --input-border: rgba(255, 255, 255, 0.45);
}
.dark-mode{
  --bg:#050506;
  --card-bg:#0b0c11;
  --text:#ebeef0;
  --muted:#9aa3ad;
  --primary:#5886b5;
  --input-border: rgba(255, 255, 255, 0.45);
}

/* Follow system color scheme by default when available */
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0b0c0d;
    --card-bg:#111214;
    --text:#e9ecef;
    --muted:#adb5bd;
    --primary:#66b2ff;
  }
}

html,body{height:100%;}
body{
  background:var(--bg) fixed;
  color:var(--text);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{transition:background-color .18s ease, color .18s ease}

/* Ensure dark-mode variables apply site-wide when body has class */
body.dark-mode{
  background:var(--bg) fixed;
  color:var(--text);
}

.navbar{
  background:var(--primary) !important;
}

/* Navbar text contrast */
body.dark-mode .navbar, body.dark-mode .navbar-brand, body.dark-mode .navbar .nav-link {
  background:var(--primary) !important;
  color:var(--card-bg) !important;
}

/* Table rows/cards use card background for both light and dark */
.table tbody tr{ 
  background: var(--card-bg);
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.table td, .table th {
  background: transparent;
  color: var(--text);
}

/* Hover and borders */
.table tbody tr:hover{ box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
body.dark-mode .table tbody tr:hover{ box-shadow: 0 1px 0 rgba(255,255,255,0.02); }

/* Form controls */
.form-control{
  display:block;
  width:100%;
  box-sizing:border-box;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: .38rem .5rem;
  transition: box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  -webkit-transition: box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  -moz-transition: box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  -ms-transition: box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  -o-transition: box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}
/* Stronger input contrast in dark mode */
body.dark-mode .form-control{
  box-shadow: none;
  background: #5b5b6d; /* slightly lighter than card for contrast */
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.form-control:focus{ outline: none; box-shadow: 0 0 0 0.14rem rgba(13,110,253,0.16); border-color: rgba(13,110,253,0.85); }
body.dark-mode .form-control:focus{ box-shadow: 0 0 0 0.14rem rgba(102,178,255,0.22); border-color: rgba(102,178,255,0.95); }

/* Buttons in dark mode adjustments */
.btn-success{ background-color:#198754; color:#fff; }
body.dark-mode .btn-success{ background-color:#1e7a3a; color:#fff; }
.btn-outline-primary{ color:var(--primary); border-color: rgba(0,0,0,0.08); }
body.dark-mode .btn-outline-primary{ color:var(--primary); border-color: rgba(255,255,255,0.08); }

/* Stronger contrast for buttons in dark-mode */
body.dark-mode .btn {
  color: #4f5052;
}
body.dark-mode .btn-outline-primary { border-color: rgba(255,255,255,0.12); color: var(--primary); }

.table{
  background:transparent;
  color:var(--text);
}

.table-responsive, main {
  background: transparent;
}

.card-like-row {
  background: var(--card-bg);
}

.table thead th{
  color:var(--text);
}

.btn-outline-light{
  color:var(--card-bg);
  border-color: rgba(255,255,255,0.12);
}

.dark-mode .btn-outline-light{
  color:var(--card-bg);
}

/* Mobile: convert table into stacked cards */
@media (max-width: 768px){
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr { margin-bottom: 0.75rem; border: 1px solid rgba(0,0,0,0.05); padding: .5rem; background: var(--card-bg); border-radius: .375rem; }
  /* make each cell a label/value row to avoid overlap */
  td { border: none; position: relative; padding: .5rem .75rem; white-space: normal; display: flex; gap: .5rem; align-items: flex-start; }
  td:before { content: attr(data-label); font-weight: 600; color: var(--muted); flex: 0 0 38%; max-width: 38%; }
  /* value area should wrap and take remaining space */
  td > * { flex: 1 1 auto; }
  td:last-child { padding-left: .75rem; display:flex; justify-content:flex-end; gap:.5rem; }
  .btn { font-size: .9rem; }
}