/* GLOBAL */
body {
  background-color: #0a0a0a;
  color: #ffffff;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

/* CONTAINERS */
.container {
  padding: 1rem 2rem;
}

.chart-container {
  max-width: 1000px;
  margin: 10px;
  background-color: #111;
  padding: 20px;
  border-radius: 8px;
}


/* TABLES */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #111;
  color: #aaa;
  table-layout: fixed;
}

th, td {
  border: 1px solid #333;
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

th {
  background-color: #1a1a1a;
  color: #ffffff;
  font-weight: normal;
  font-size: 13px;
}

tr:nth-child(even) {
  background-color: #0f0f0f;
}

tr:hover {
  background-color: #1f1f1f;
}

/* COLOR FORMATTING */
.positive {
  color: #00ff90;
}

.negative {
  color: #ff4d4d;
}

/* BUTTONS */
.btn {
  background-color: #1a1a1a;
  border: 1px solid #444;
  color: #ffffff;
  padding: 6px 12px;
  text-decoration: none;
  font-weight: bold;
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background-color: #333;
  border-color: #666;
}

.arrow {
  width: 20px;
  text-align: center;
  display: inline-block;
}

.arrow.positive {
  color: #00ff99;
}

.arrow.negative {
  color: #ff4d4d;
}


/* FORMS */
input[type="file"] {
  color: #ffffff;
}

h1 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #ffffff;
  font-family: 'Consolas', 'Courier New', monospace;
}

.button-row {
  display: flex;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.button-row a:first-child {
  margin-right: 7rem; /* or any desired spacing */
}

td.empty {
  background-color: #1a1a1a; /* dark block filler */
  color: #555;               /* optional: dim or no text */
  text-align: center;
  font-style: italic;
}


/* FORMS */

.session-form {
  position: absolute;
  top: 120px;
  left: 40px;
  z-index: 1000;
  margin: 0;
  padding: 1rem;
  border: 1px solid #333;
  background-color: #0f0f0f;

  /* container tightly wraps inputs */
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.session-form.hidden {
  display: none;
}

.comp-form {
  position: absolute;
  top: 120px;
  left: 40px;
  z-index: 1000;
  margin: 0;
  padding: 1rem;
  border: 1px solid #333;
  background-color: #0f0f0f;
}



.form-grid {
  display: grid;
  grid-template-columns: auto auto; /* preserve fixed input size */
  column-gap: 0.5rem;               /* tighter horizontal spacing */
  row-gap: 0.5rem;                  /* tighter vertical spacing */
  margin-bottom: 1rem;
}

.form-grid input {
  width: 110px;
  padding: 6px;
  background-color: #111;
  border: 1px solid #333;
  color: #eee;
  font-family: 'Consola', monospace;
  font-size: 14px;
}

form button {
  font-size: 1rem;
  font-family: inherit;
  padding: 6px 12px;
  height: auto;
}

button,
.btn,
input[type="submit"] {
  font-size: 1rem;
  font-family: inherit;
}

.btn-outline-green {
  color: #3aff89;
  border: 1px solid #3aff89;
  background-color: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-outline-green:hover {
  background-color: #3aff89;
  color: #000;
  border-color: #3aff89;
}

.btn-outline-red {
  color: #ff5a5a;
  border: 1px solid #ff5a5a;
  background-color: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-outline-red:hover {
  background-color: #ff5a5a;
  color: #000;
  border-color: #ff5a5a;
}

.table {
  min-width: 700px;
  
}

.table + .table {
  min-width: 200px;
}

.positive {
  color: #00ff88;
}

.negative {
  color: #ff4e4e;
}

.table-main {
  min-width: 800px;
  flex: 1;
}

.table-stats {
  min-width: 150px;
  max-width: 260px;
  flex-shrink: 0;
}

.table-stats td, .table-stats th {
  font-size: 0.95rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  line-height: 1.4;
  word-break: break-all;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
}

.checkbox-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 4px;
}

.checkbox-label {
  font-family: 'JetBrains Mono', monospace;
  color: #eee;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.checkbox-label input[type="checkbox"] {
  accent-color: #00ff99; /* match your theme */
  width: 14px;
  height: 14px;
}

.layout {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  
}

.sidebar {
  width: 200px;
  min-height: 20%;
  background-color: #0d0d0d;
  border-right: 1px solid #222;
  padding: 1rem;
  box-shadow: 2px 0 4px rgba(0, 255, 153, 0.05);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.sidebar-title {
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 1.2rem;
  font-family: Consolas, monospace;
}

.sidebar-link {
  display: block;
  color: #eee;
  text-decoration: none;
  margin-bottom: 1rem;
  font-size: 14px;
  transition: color 0.2s;
}

.sidebar-link:hover {
  color: #00ff99;
}


.main-content {
 display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 0 2rem;
}

canvas {
  display: block;
  width: 100% !important;
  height: auto;
  /* Ensure crisp rendering on high-DPI displays */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}



/* Standardize scrollbars across browsers */
.scrollbox {
  overflow-y: auto;
  scrollbar-width: thin;           /* Firefox */
  scrollbar-color: #444 #111;      /* Firefox */
}

/* WebKit (Chrome, Edge, Safari) */
.scrollbox::-webkit-scrollbar {
  width: 8px;
}

.scrollbox::-webkit-scrollbar-track {
  background: #111;
}

.scrollbox::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 4px;
  border: 2px solid #111;
}






.input-lock-container {
  position: relative;
  display: flex;
}

.input-lock-container input {
  width: 124px;
  padding-right: 1.6rem; /* make room for lock icon */
  box-sizing: border-box;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  background-color: #111;
  color: #fff;
  border: 1px solid #333;
  padding: 0.4rem 0.5rem;
  height: 2rem;
}

.lock-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #ffa500;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.edit-only {
  background-color: #111;
  color: #fff;
  border: 1px solid #333;
  font-family: 'JetBrains Mono', monospace;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  width: 60%;
  box-sizing: border-box;
}

.edit-only:focus {
  outline: none;
  border-color: #00ff99;
  box-shadow: 0 0 0 1px #00ff99;
}


.table td, .table th,
.table-stats td, .table-stats th {
  font-size: 0.9rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  line-height: 1.4;
}

.edit-only input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 40vh 25vh;
  gap: 1rem;
  /* height: 100vh; */
  flex-grow: 1;
  margin-top: 0;
}



.chart {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #111;
  border-radius: 10px;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem; /* tighter top/bottom */
  height: 100%;
  box-sizing: border-box;
}



.chart-wide {
  grid-column: span 3;
  height: 320px;
  padding: 1rem;
}


.chart-narrow {
  grid-column: span 2;
  height: 230px;
  padding: 1rem;
}

.chart-label {
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: 600;
  font-size: 1rem;
  background-color: #000;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  width: fit-content;
  margin: 0 auto 0.25rem auto;
  border: 2px solid;
  text-align: center;
}

.chart-label.green {
  color: #00ff99;
  border-color: #00ff99;
}

.chart-label.blue {
  color: #66ccff;
  border-color: #66ccff;
}

.venture-grid {
  display: contents; /* Use the grid of the parent .dashboard-grid */
}

.main-content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  /* height: 100vh; */
  padding: 0;
}



/* Modal overlay (backdrop) */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;               /* hidden by default */
  align-items: center;         /* center the modal */
  justify-content: center;
  z-index: 2000;               /* above everything else */
}

/* The white “dialog” box */
.modal-content {
  background-color: #0f0f0f;
  width: 90%;
  max-width: 1200px;
  max-height: 80%;             /* so it never exceeds screen height */
  overflow-y: auto;            /* scroll if content is too tall */
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.7);
  position: relative;
}

/* Footer inside modal, sticks to bottom as you scroll */
.modal-footer {
  position: sticky;
  bottom: 0;
  background-color: #0f0f0f;
  border-top: 1px solid #333;
  padding: 0.75rem 1rem;
  text-align: right;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}




/* –– Modal table container –– */
#editModal .table-wrapper {
  overflow: auto;
  max-height: calc(80vh - 120px);  /* leave room for title + footer */
  margin-bottom: 1rem;
}

/* –– Table & cells –– */
#editModal .table {
  width: 100%;
  border-collapse: collapse;
}
#editModal .table th,
#editModal .table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #333;
  white-space: nowrap;
  vertical-align: middle;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9rem;
}
  
/* –– Sticky headers –– */
#editModal .table th {
  background-color: #141414;
  color: #eee;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* –– Dark-themed scrollbars in modal –– */
#editModal .table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#editModal .table-wrapper::-webkit-scrollbar-track {
  background: #1a1a1a;
}
#editModal .table-wrapper::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 4px;
  border: 2px solid #1a1a1a;
}

/* –– For Firefox (optional) –– */
#editModal .table-wrapper {
  scrollbar-width: thin;
  scrollbar-color: #444 #1a1a1a;
}

/* only vertical scroll inside the modal table */
#editModal .table-wrapper {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* hide ANY WebKit scrollbar in the modal */
#editModal .table-wrapper::-webkit-scrollbar,
#editModal .modal-content::-webkit-scrollbar {
  display: none !important;
}

/* let your global .table th/td rules style the cells—no overrides needed here */
/* slim down padding & font for modal table */
#editModal .table th,
#editModal .table td {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

/* inputs fill the cell and use your site’s input styling */
#editModal .table td input {
  width: 100%;
  box-sizing: border-box;
  /* if you have custom input variables, they’ll apply here */
}

/* force only vertical scroll, no horizontal */
#editModal .table-wrapper {
  overflow-y: auto;
  overflow-x: hidden;
}


/* ——————————————
   EDIT MODAL STYLES
   —————————————— */

/* Dark overlay, centered flexbox */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;               /* we toggle via JS */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal panel */
.modal-content {
  background-color: #111;      /* same as your tables */
  padding: 1.5rem;
  border-radius: 6px;
  max-width: 95%;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0,255,153,0.2);
}

/* Scrollable wrapper for the table */
.table-wrapper {
  max-height: 70vh;
  overflow-y: auto;
}

/* Style each input just like your form-grid inputs */
.modal-input {
  background-color: #111;
  border: 1px solid #333;
  color: #eee;
  font-family: 'Consolas', monospace;
  font-size: 14px;
  padding: 6px 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Optional: tighten up table cells inside the modal */
.modal-content table th,
.modal-content table td {
  padding: 6px 10px;
  border-color: #333;
}

/* ----------------------------------------
   Modal Table Overrides
   ---------------------------------------- */

/* Target only the table inside your edit modal */
.modal-content table.table {
  /* kill the 700px min-width… */
  min-width: 0 !important;        /* override .table { min-width:700px; } */
  /* allow us to respect individual column widths */
  table-layout: fixed;            /* otherwise the browser auto-expands all columns */
  width: auto;                    /* let it size down to your sum of <th> widths */
}

/* hide calendar icon on date inputs */
.modal-input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  pointer-events: none;
}

/* hide clock icon on time inputs */
.modal-input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  pointer-events: none;
}

/* Firefox fallback: turn date/time into plain textfields */
.modal-input[type="date"],
.modal-input[type="time"] {
  -moz-appearance: textfield;
  appearance: none;
}


/* — Trash Button in Edit Modal — */
.modal-content .trash-cell {
  text-align: center;
  padding: 0;  /* match your table’s padding */
}

.modal-content .trash-btn {
  background-color: transparent;
  border: none;           /* we’re using btn-outline-red */
  color: var(--red-500);  /* match your “danger” tone */
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.modal-content .trash-btn:hover {
  background-color: rgba(255, 0, 0, 0.1);
  color: var(--red-400);
}

.table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.table-wrapper::-webkit-scrollbar-track {
  background: #1a1a1a;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 4px;
  border: 2px solid #1a1a1a;
}
.table-wrapper {
  scrollbar-width: thin;
  scrollbar-color: #444 #1a1a1a;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.styled-select {
  background-color: #111;
  color: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  outline: none;
  transition: border 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  box-sizing: border-box;
}
.styled-select:focus {
  border-color: #66ccff;
}

.styled-input {
  background-color: #111;
  color: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border 0.2s;
  box-sizing: border-box;
  width: 100%;
}
.styled-input:focus {
  border-color: #66ccff;
}

/* Textarea styling for feedback modal */
.styled-input[rows] {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

/* Dashboard-specific scrollbar hiding */
.dashboard-page html, .dashboard-page body {
  overflow: hidden !important;
}

/* Ensure main-content flex column (sidebar parent) is scrollable */
.dashboard-page .main-content > div[style*='flex-direction: column'] {
  overflow-y: auto !important;
  height: 90vh !important;
}

/* Remove scrollbars from dashboard elements except sidebar */
.dashboard-page .container, .dashboard-page .main-content, .dashboard-page .dashboard-grid {
  overflow: visible !important;
}

/* Donation page styles */
.donate-page {
  overflow-y: auto !important;
}

.donate-page .container {
  overflow: visible !important;
}

/* --- Custom Slider Switch for Dashboard Tips Toggle --- */
.custom-slider-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.custom-slider-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.custom-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #333;
  transition: .4s;
  border-radius: 20px;
}
.custom-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: #00ff99;
  transition: .4s;
  border-radius: 50%;
}
.custom-slider-switch input:checked + .custom-slider {
  background-color: #00ff99;
}
.custom-slider-switch input:checked + .custom-slider:before {
  transform: translateX(16px);
  background: #111;
}