/* =============================================================
   Dark theme — overrides the color variables from
   main.css so the entire shell (banner, sections, footer)
   goes dark, then styles the tracker's own components.
   Loaded after main.css and bootstrap.min.css.
   ============================================================= */
:root {
  --background-color: #0e0e11;
  --default-color: #d8d8e0;
  --heading-color: #ffffff;
  --surface-color: #16161a;
  --contrast-color: #ffffff;
  --accent-color: #4a9eff;

  /* Keep Bootstrap itself in sync */
  --bs-body-bg: #0e0e11;
  --bs-body-color: #d8d8e0;
}

/* Force table text visibility - Bootstrap .table uses its own vars */
table.table {
  --bs-table-color: var(--default-color) !important;
  --bs-table-bg: transparent !important;
  --bs-table-border-color: #262626;
}

/* Explicit cell colors to prevent inheritance issues */
th, td, table, .table {
  color: var(--default-color) !important;
}

/* Links in table (like return names) need blue tint */
table a, .table a {
  color: #6cb5ff;
}
table a:hover, .table a:hover {
  color: #9fd0ff;
}

/* Ensure inputs/selects in filters have proper color */
input.form-control, select.form-select {
  color: #d8d8e0 !important;
}

/* Sidebar keeps its dark-background preset from base.html,
   so it is dark in both themes — no changes needed here. */

h2 { 
  font-size: 18px; 
  margin-top: 1.6em; 
}

a { 
  color: #6cb5ff; 
}

a:visited { 
  color: #6cb5ff; 
}

a:hover { 
  color: #9fd0ff; 
}

/* ---- Tables ---- */
table { 
  border-collapse: collapse; 
  width: 100%;
  background: var(--surface-color);
  box-shadow: 0 1px 3px rgba(0,0,0,.8); 
}

th, td { 
  padding: 8px 10px; 
  border-bottom: 1px solid #262626;
  text-align: left; 
  font-size: 14px; 
}

th { 
  background: #1c1c22; 
  color: #f0f0f0; 
}

tr.overdue td { 
  background: #522416; 
}

tr.archived td { 
  opacity: 0.6; 
}

.badge { 
  display: inline-block; 
  padding: 2px 8px; 
  border-radius: 10px;
  background: #c8c8d0; 
  font-size: 13px; 
  color: #000000; 
}

.flash { 
  padding: 8px 12px; 
  background: #10241a; 
  border: 1px solid #1e3a2a;
  margin-bottom: 10px; 
  border-radius: 4px; 
  color: #b0ffc0; 
}

form.inline { 
  display: inline; 
}

label { 
  font-size: 13px; 
  display: block; 
  margin-top: 8px; 
  color: #999; 
}

/* ---- Forms: bare elements AND Bootstrap classes ---- */
input, select, .form-control, .form-select {
  padding: 6px 10px; 
  margin: 2px 0; 
  background: #1c1c22;
  border: 1px solid #303030; 
  color: #d8d8e0; 
  border-radius: 4px;
  font: inherit; 
  display: inline-block; 
  width: auto;
}

.form-control:focus, .form-select:focus {
  background-color: #1c1c22; 
  color: #d8d8e0;
  border-color: #4a9eff; 
  box-shadow: none;
}

input::placeholder, .form-control::placeholder { 
  color: #888; 
}

/* ---- Buttons: bare elements AND Bootstrap classes ---- */
button, .btn, .btn-primary, .btn-secondary,
.btn-outline-secondary, .btn-warning {
  padding: 6px 14px; 
  cursor: pointer; 
  background: #1e1e28;
  border: 1px solid #3a3a4a; 
  color: #fff; 
  border-radius: 4px;
  font: inherit; 
  font-size: 14px; 
  line-height: 1.2;
  vertical-align: middle; 
  text-decoration: none;
}

button:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover,
.btn-outline-secondary:hover, .btn-warning:hover {
  background: #2a2a38; color: #fff;
}

/* ---- Status dashboard cards ---- */
.dashboard { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
  margin-bottom: 20px; 
}

.status-card { 
  background: var(--surface-color); 
  padding: 10px 14px;
  border-radius: 6px; 
  min-width: 200px; 
  text-align: center;
  border: 1px solid #262626; 
}

.status-card .count { 
  font-size: 24px; 
  font-weight: bold; 
  color: #fff; 
}

.status-card .label { 
  font-size: 12px; 
  margin-top: 4px; 
  color: #999; 
}

.status-card.active { 
  border-left: 4px solid #4a9eff; 
}

.status-card.archived {
  /* border-left: 4px solid #8866aa;  */
  border-left: 4px solid #4a9eff; 
}

/* ---- Table column widths ---- */
th.return-col, td.return-col { 
  width: 200px; 
  min-width: 200px; 
  max-width: 320px; 
}

th.note-col, td.note-col   { 
  width: 260px; 
  min-width: 160px; 
  max-width: 320px; 
}

th.date-col, td.date-col   { 
  width: 125px;  
  min-width: 100px;  
  max-width: 150px; 
}

th.year-col,  td.year-col  { 
  width: 75px;  
  min-width: 50px;  
  max-width: 100px; 
}

th.status-col, td.status-col { 
  width: 200px; 
  min-width: 200px; 
  max-width: 200px; 
}

th.type-col,  td.type-col  { 
  width: 75px;  
  min-width: 50px;  
  max-width: 100px; 
}

th.signer-col, td.signer-col { 
  width: 100px; 
  min-width: 50px; 
  max-width: 150px; 
}

/* ---- Kanban board ---- */
.kanban { 
  display: flex; 
  gap: 12px; 
  align-items: flex-start;
  margin-top: 1em; 
  overflow-x: auto; 
}

.kanban-col { 
  flex: 1 1 0; 
  min-width: 240px;
  background: var(--surface-color);
  border: 1px solid #262626; 
  border-radius: 6px; 
  padding: 8px; 
}

.kanban-col-header { 
  display: flex; 
  justify-content: space-between;
  align-items: center; 
  font-weight: bold; 
  color: #f0f0f0;
  border-bottom: 1px solid #262626; 
  padding-bottom: 6px;
  margin-bottom: 8px; 
}

.kanban-count { 
  background: #1e1e28; 
  color: #fff; 
  border-radius: 10px;
  min-width: 22px; 
  text-align: center; 
  padding: 1px 7px;
  font-size: 0.85em; 
}

.kanban-card { 
  background: #16161a; 
  border: 1px solid #303030;
  border-radius: 6px; 
  padding: 8px; 
  margin-bottom: 8px; 
}

.kanban-card.overdue { 
  border-color: #cc2222; 
  border-left: 4px solid #cc2222; 
}

.kanban-overdue-flag { 
  color: #ff5555; 
  font-weight: bold; 
  margin-top: 4px; 
}

.kanban-due, .kanban-card-meta, .kanban-note { 
  font-size: 0.85em;
  margin-top: 4px; 
  color: #999; 
}

.kanban-empty { 
  color: #777; 
  font-size: 0.85em; 
  padding: 8px 2px; 
}

.kanban-card-signer { 
  font-size: 0.85em; 
  opacity: 0.8; 
}

/* ---- Cancel button ---- */
.btn-cancel, .btn-cancel:visited, .btn-cancel:hover {
  display: inline-block; 
  padding: 6px 14px; 
  margin-left: 8px;
  background: #1e1e28; 
  border: 1px solid #3a3a4a; 
  color: #fff;
  border-radius: 4px; 
  text-decoration: none; 
  cursor: pointer;
  font: inherit; 
  font-size: 14px; 
  line-height: 1.2;
  vertical-align: middle; 
}

.btn-cancel:hover { 
  background: #2a2a38; 
  color: #fff; 
}

/* ---- Standalone login page ---- */
.auth-page { 
  display: flex; 
  align-items: center; 
  justify-content: center;
  min-height: 100vh; 
  background: var(--background-color); 
}

.auth-card { 
  background: var(--surface-color); 
  padding: 30px 36px;
  border-radius: 8px; 
  border: 1px solid #262626;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
  width: 100%; 
  max-width: 420px; 
}

.auth-card h1 { 
  font-size: 22px; 
  color: #ffffff; 
}

.auth-card h2 { 
  margin-top: 1.4em; 
}

/* Sidebar active/hover states */
.navmenu a:hover, .navmenu .active, .navmenu .active:focus {
  color: #149ddd !important;
}
.navmenu a:hover .navicon, .navmenu .active .navicon {
  color: #149ddd !important;
}

/* File input button text color in dark mode — make Browse text black */
.form-control[type=file] {
  color: #222222 !important;
}

.form-control[type=file]::file-selector-button {
  color: #222222 !important;
  background-color: #ffffff !important;
  border-color: #ccc !important;
}

.form-control[type=file]::-webkit-file-upload-button {
  color: #222222 !important;
  background-color: #ffffff !important;
  border-color: #ccc !important;
}

/* ---- Sidebar matches main content background in dark mode ----
   Loads after sidebar.css, so this equal-specificity !important
   rule wins and repaints the panel from navy to the page background. */
.header {
  background-color: #0e0e11 !important;
  border-right-color: #1a2330 !important;
}