:root {
  /* Default = dark */
  --bg: #0b1220;
  --card: #121a2b;
  --ink: #e8eefc;
  --muted: #a8b2c3;
  --brand: #3b82f6;
  --danger: #ef4444;
  --borderold: #1f2a44; 
  --border: #2e4374;
  --modalbg: #2f3d58;
  --hint-text: #94a3b8;    
  --hint-link: #60a5fa;  
  --hint-link-hover: #93c5fd;

}

/* Light theme overrides */
body.light-mode {
  --bg: #f9fafb;
  --card: #ffffff;
  --ink: #1a1a1a;
  --muted: #555;
  --brand: #2563eb;
  --danger: #dc2626;
  --cardstat: #f7f7f7;
  --border: #c7d9f5;
  --modalbg: #eff5ff;
  --hint-text: #64748b;    
  --hint-link: #2563eb;    
  --hint-link-hover: #1d4ed8;

}

/* everything below keeps working off the variables */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Calibri;
}


.hint-text{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.45;
  color: var(--hint-text);
}

.hint-text br{
  display:block;
  margin-top:2px;
}

.hint-link{
  color: var(--hint-link);
  text-decoration:none;
  font-weight:500;
}

.hint-link:hover{
  color: var(--hint-link-hover);
  text-decoration:underline;
}


/* Reuse your existing hint vars:
   :root { --hint-text: ...; --hint-link: ...; --hint-link-hover: ...; }
   body.light-mode { --hint-text: ...; --hint-link: ...; --hint-link-hover: ...; }
*/

.field-icon{
  color: var(--hint-link);
}

/* Keep the input small (stops it stretching full width) */
.reminder-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap: nowrap;
}

.reminder-hours{
  width: 70px !important;      /* tweak 70–90 if you want */
  max-width: 70px !important;
  flex: 0 0 70px !important;   /* KEY: prevents flex-grow / 100% */
  text-align:center;
}

/* Use same vars as hint */
.hint-text{
  color: var(--hint-text);
  font-style: italic;
}

/* Preview: force normal sentence flow (prevents weird spaced layout) */
#reminder_preview.reminder-preview{
  margin-top: 8px;
  font-style: italic;
  color: var(--hint-text);

  display: block !important;   /* KEY: overrides any generic flex rules */
}

#reminder_preview.reminder-preview i{
  margin-right: 6px;
  color: #ef4444;
}


main.container {
  flex: 1; /* fills available space so footer is pushed down */
}

.site-footer {
  margin-top: auto; /* ensures footer stays at bottom */
}

.container{padding:16px}
.topbar{background:#0d1526;border-bottom:1px solid #22304e}
.topbar .container{display:flex;gap:16px;align-items:center;justify-content:space-between}
.topbar h1{font-size:20px;margin:0}
.topbar nav a{color:var(--ink);opacity:.9;text-decoration:none;margin-left:12px}
.topbar nav a:hover{opacity:1;text-decoration:underline}
.card{background:var(--card);border:1px solid #1f2a44;border-radius:14px;padding:16px;margin:16px 0;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;font-weight:600;gap:6px}
input,select{background:#162037;border:1px solid #22304e;color:var(--ink);border-radius:10px;padding:10px}
input::placeholder{color:#7a869c}
small.muted{color:var(--muted)}
.actions{grid-column:1/-1;display:flex;gap:8px}
.btn {
  background:#1b2744;
  border:1px solid #2a3960;
  color:var(--ink);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;          /* force same size for all */
  line-height:1.4;
  display:inline-flex;      /* ensures icon + text align */
  align-items:center;       /* vertically centers text + icon */
  gap:6px;                  /* consistent spacing between icon and text */
}

.btn:hover {
  border-color:#3c5287;
}

.btn.primary {
  background:var(--brand);
  border-color:var(--brand);
  color:white;
}

.btn.primary:hover {
  filter:brightness(1.05);
}

.btn i {
  font-size:14px;           /* match text size */
}

.link{background:none;border:none;color:var(--brand);cursor:pointer;padding:0}
.link.danger{color:var(--danger)}
.notice{padding:10px 12px;border-radius:10px;margin-bottom:12px}
.notice.success{background:#0e2a15;border:1px solid #2a6840}
.toast-stack{
  position:fixed;
  top:82px;
  right:18px;
  z-index:10050;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:min(420px, calc(100vw - 28px));
  pointer-events:none;
}
.app-toast{
  --toast-accent:#60a5fa;
  --toast-bg:rgba(13,21,38,.96);
  --toast-border:rgba(96,165,250,.38);
  --toast-ink:#e6eefc;
  --toast-muted:#aab6d3;
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:start;
  overflow:hidden;
  padding:13px 14px 16px;
  border:1px solid var(--toast-border);
  border-left:4px solid var(--toast-accent);
  border-radius:12px;
  background:var(--toast-bg);
  color:var(--toast-ink);
  box-shadow:0 18px 45px rgba(0,0,0,.34);
  pointer-events:auto;
  transform:translateX(18px);
  opacity:0;
  transition:opacity .22s ease, transform .22s ease, margin .22s ease;
}
.app-toast.is-visible{opacity:1;transform:translateX(0)}
.app-toast.is-leaving{opacity:0;transform:translateX(18px)}
.app-toast.success{--toast-accent:#ff6d29;--toast-border:rgba(255,109,41,.42)}
.app-toast.warning{--toast-accent:#ff6d29;--toast-border:rgba(255,109,41,.45)}
.app-toast.error,
.app-toast.is-error{--toast-accent:#ff6d29;--toast-border:rgba(255,109,41,.46)}
.app-toast-icon{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:999px;
  color:var(--toast-accent);
  background:color-mix(in srgb, var(--toast-accent) 16%, transparent);
}
.app-toast-message{
  min-width:0;
  line-height:1.45;
  font-size:.95rem;
}
.app-toast-message strong{color:inherit}
.app-toast-close{
  border:0;
  background:transparent;
  color:var(--toast-muted);
  cursor:pointer;
  padding:2px;
  line-height:1;
}
.app-toast-close:hover{color:var(--toast-ink)}
.app-toast-timer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:rgba(255,255,255,.09);
}
.app-toast-timer span{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg, var(--toast-accent), color-mix(in srgb, var(--toast-accent) 55%, white));
  transform-origin:left center;
  animation:toastCountdown var(--toast-duration, 6500ms) linear forwards;
}
@keyframes toastCountdown{to{transform:scaleX(0)}}
body.light-mode .app-toast{
  --toast-bg:rgba(255,255,255,.97);
  --toast-ink:#0d1b2a;
  --toast-muted:#64748b;
  box-shadow:0 18px 45px rgba(15,23,42,.16);
}
body.light-mode .app-toast-timer{background:#e2e8f0}
@media (max-width: 640px){
  .toast-stack{
    top:74px;
    left:14px;
    right:14px;
    width:auto;
  }
}
.muted{color:var(--muted)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0 6px}
th,td{text-align:left;padding:10px 12px;background:#0d1526;border-top:1px solid #1e2a45;border-bottom:1px solid #1e2a45}
th{position:sticky;top:0;z-index:2;background:#0b1426}
tr td:first-child, tr th:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
tr td:last-child, tr th:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}
.num{text-align:right}
.right{text-align:right}
.list-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.filters{display:flex;gap:8px;align-items:end}
.computed{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#0e1830;border:1px dashed #2a3960;border-radius:10px}
.totals{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.line.sub { opacity: .85; }
button.mv { border:none;background:transparent;color:#aab6d3;cursor:pointer;padding:0 2px;font-size:14px }
button.mv:hover { color:#fff; }
.topbar {
  background: #2c3e50;
  color: #fff;
  padding: 10px 0;
}

.topbar h1 {
  margin: 0 0 10px 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #ecf0f1;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.main-nav li {
  margin: 0;
}

.main-nav a {
  color: #ecf0f1;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-nav a:hover {
  background: #34495e;
  color: #fff;
}

.main-nav a.active {
  background: #1abc9c;
  color: #fff;
}

.main-nav .right {
  margin-left: auto;
}

.welcome {
  font-style: italic;
  color: #bdc3c7;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-excel {
  text-decoration: none;   /* remove underline */
}

.btn-excel:hover {
  text-decoration: none;   /* keep it off on hover too */
}

/* ======================================
   Light mode overrides (blue contrast)
   ====================================== */
body.light-mode {
  --bg: #e8f0fb;
  --card: #ffffff;
  --ink: #0d1b2a;
  --muted: #4a5d78;
  --brand: #2563eb;
  --danger: #dc2626;
  background: var(--bg);
  color: var(--ink);
}

body.light-mode .topbar {
  background: #dbeafe;
  color: #0d1b2a;
  border-bottom: 1px solid #93c5fd;
}
body.light-mode .topbar h1,
body.light-mode .main-nav a { color: #0d1b2a; }
body.light-mode .main-nav a:hover { background: #bfdbfe; color:#0d1b2a; }
body.light-mode .main-nav a.active { background: var(--brand); color:#fff; }

body.light-mode .card,
body.light-mode .send-form,
body.light-mode .mail-preview,
body.light-mode .mail-envelope,
body.light-mode .receipt-thumb {
  background: var(--card);
  border: 1px solid #c7d9f5;
  color: var(--ink);
}
body.light-mode th,
body.light-mode td {
  background: #f0f6ff;
  border-top: 1px solid #c7d9f5;
  border-bottom: 1px solid #c7d9f5;
  color: var(--ink);
}
body.light-mode th { background:#dbeafe; }

body.light-mode .notice.success {
  background: #d1fae5;
  border-color: #34d399;
  color: #065f46;
}
body.light-mode .notice.warning {
  background: #fef3c7;
  border-left: 3px solid #facc15;
  color: #78350f;
}

body.light-mode .stat-box {
  background: #e0ecff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .stat-box i { color:#2563eb; }

body.light-mode .summary { background:#edf5ff; border:1px solid #93c5fd; }
body.light-mode .summary-header { color: var(--ink); }

body.light-mode .send-form,
body.light-mode .mail-preview,
body.light-mode .mail-envelope {
  background:#f9fbff;
  border:1px solid #c7d9f5;
}
body.light-mode .send-form > label,
body.light-mode .mail-preview-header-asbar {
  background:#e0ecff;
  border:1px solid #93c5fd;
  color:#0d1b2a;
}
body.light-mode .send-form input,
body.light-mode .send-form textarea,
body.light-mode .send-form input[type="file"] {
  background:#f0f6ff;
  border:1px solid #93c5fd;
  color:#0d1b2a;
}
body.light-mode .addr-pill,
body.light-mode .addr-avatar,
body.light-mode .mail-preview-body,
body.light-mode .mail-preview-body .pv-note {
  background:#f0f6ff;
  border:1px solid #93c5fd;
  color:#0d1b2a;
}
body.light-mode .mail-preview-body .pv-note { background:#e0ecff; }

body.light-mode .hol-btn { background:#e0ecff; border:1px solid #93c5fd; color:#0d1b2a; }
body.light-mode .hol-btn.on { background:#dcfce7; border-color:#34d399; color:#065f46; }
body.light-mode tr.row-holiday td { background:#f0fdf4 !important; }

/* ================================
   Extra Light mode overrides
   ================================ */
/* Default: no forced scroll on desktop */
body.light-mode .table-wrap.no-scroll-x {
  overflow-x: hidden;  /* or just remove this rule */
}

/* Mobile only: allow horizontal scrolling */
@media (max-width: 768px) {
  body.light-mode .table-wrap.no-scroll-x {
    overflow-x: auto;   /* scrollable if content wider */
    -webkit-overflow-scrolling: touch; /* smooth on iOS */
  }
}

body.light-mode table.excel {
  border: none; /* or 1px solid #c7d9f5 */
}

body.light-mode table.excel th,
body.light-mode table.excel td {
  padding: 6px 8px;
  border: 1px solid #c7d9f5;
  background: #f0f6ff;
  color: #0d1b2a;
}

body.light-mode table.excel thead th,
body.light-mode table.excel tfoot th {
  background: #dbeafe;
  color: #0d1b2a;
}


/* small buttons */
body.light-mode button.add.mini {
  background: #e0ecff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
  border-radius: 999px; /* fully rounded pill */
  padding: 4px 12px;    /* a bit more horizontal padding looks better on pills */
  font-weight: 500;
}

body.light-mode button.add.mini:hover {
  border-color: #2563eb;
}
body.light-mode button.x,
body.light-mode button.mv,
body.light-mode .same-collection,
body.light-mode .receipt-line-btn {
  color: #475569;          /* slate blue/gray for normal state */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 4px;        /* give them a little breathing room */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.light-mode button.x:hover,
body.light-mode button.mv:hover,
body.light-mode .same-collection:hover,
body.light-mode .receipt-line-btn:hover {
  background: #e0ecff;     /* subtle light blue hover background */
  border-color: rgba(96, 165, 250, 0.5);
  color: #0d1b2a;          /* navy text/icons on hover */
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.14);
}

body.light-mode .receipt-line-btn.has-receipt,
body.light-mode .receipt-line-btn.is-success {
  color: #15803d;
  background: #f0fdf4;
  border-color: rgba(34, 197, 94, 0.42);
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.14);
}

body.light-mode .receipt-line-btn.has-receipt:hover,
body.light-mode .receipt-line-btn.is-success:hover {
  color: #166534;
  background: #dcfce7;
  border-color: rgba(22, 163, 74, 0.5);
  box-shadow: 0 6px 12px rgba(34, 197, 94, 0.18);
}


/* Holiday toggle button */
body.light-mode .hol-btn {
  border: 1px solid #93c5fd;
  background: #e0ecff;
  color: #0d1b2a;
  border-radius: 999px;   /* pill shape */
  padding: 6px 14px;      /* extra padding for pill look */
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.light-mode .hol-btn:hover {
  background: #dbeafe;
  border-color: #2563eb;
}

body.light-mode .hol-btn.on {
  background: #dcfce7;    /* green tint when ON */
  border-color: #34d399;
  color: #065f46;
}

body.light-mode tr.row-holiday td {
  background: #f0fdf4 !important;
}

/* ================================
   Light mode overrides (blue/white)
   ================================ */
body.light-mode {
  --bg: #f0f6ff;
  --card: #ffffff;
  --ink: #0d1b2a;
  --muted: #4a5d78;
  --brand: #2563eb;
  --danger: #dc2626;

  background: var(--bg);
  color: var(--ink);
}

body.light-mode .topbar {
  background: #dbeafe;              /* light blue */
  color: #0d1b2a;
  border-bottom: 1px solid #93c5fd; /* blue border */
}

body.light-mode .topbar h1 {
  color: #0d1b2a;
}

body.light-mode .topbar nav a,
body.light-mode .main-nav a {
  color: #0d1b2a;
  opacity: 0.9;
}
body.light-mode .topbar nav a:hover,
body.light-mode .main-nav a:hover {
  background: #bfdbfe;
  color: #0d1b2a;
  text-decoration: underline;
}
body.light-mode .main-nav a.active {
  background: var(--brand);
  color: #fff;
}

body.light-mode .card {
  background: var(--card);
  border: 1px solid #c7d9f5;
  color: var(--ink);
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
}

body.light-mode input,
body.light-mode select {
  background: #f9fbff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode input::placeholder {
  color: #7a869c;
}

body.light-mode .btn {
  background: #e0ecff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .btn:hover {
  border-color: #2563eb;
}
body.light-mode .btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
body.light-mode .btn.primary:hover {
  filter: brightness(1.05);
}

body.light-mode .notice.success {
  background: #d1fae5;
  border: 1px solid #34d399;
  color: #065f46;
}
body.light-mode .notice {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0d1b2a;
}

body.light-mode table th,
body.light-mode table td {
  background: #f9fbff;
  border-top: 1px solid #c7d9f5;
  border-bottom: 1px solid #c7d9f5;
  color: #0d1b2a;
}
body.light-mode table th {
  background: #dbeafe;
}

body.light-mode .computed {
  background: #edf2ff;
  border: 1px dashed #93c5fd;
  color: #0d1b2a;
}

body.light-mode .muted {
  color: #4a5d78;
}

@media (max-width: 768px) {
  .actions {
    flex-wrap: wrap; /* allow children to break onto new lines */
        justify-content: center;  
  align-items: flex-start; /* optional: top align */
  }
  
  .actions .muted {
    flex-basis: 100%;     /* take the full row */
    margin-left: 0 !important;
    margin-top: 6px;
    text-align: left;     /* or center, if you prefer */
  }
  
  .table-wrap.no-scroll-x { overflow-x: scroll !important; }
}



body.light-mode .welcome {
  color: #ffffff;
}

/* ================================
   Light mode overrides (send/mail)
   ================================ */
body.light-mode .stat-box {
  background: #e0ecff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .stat-box i { color: #2563eb; }

body.light-mode .summary {
  background: #f9fbff;
  border: 1px solid #c7d9f5;
  color: #0d1b2a;
}
body.light-mode .summary-header { color: #0d1b2a; }

body.light-mode .send-form {
  background: #ffffff;
  border: 1px solid #c7d9f5;
  color: #0d1b2a;
}
body.light-mode .send-form > label {
  background: #e0ecff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .send-form input[type="email"],
body.light-mode .send-form textarea,
body.light-mode .send-form input[type="file"] {
  background: #f0f6ff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .send-form input[type="file"]::file-selector-button {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .send-form input[type="file"]::file-selector-button:hover {
  background: #bfdbfe;
}
body.light-mode .send-form .checkbox {
  background: #f0f6ff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}

body.light-mode .radio-group label {
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}

body.light-mode .receipt-thumb {
  background: #f9fbff;
  border: 1px solid #c7d9f5;
}
body.light-mode .receipt-thumb .thumb-media {
  background: #e0ecff;
}
body.light-mode .receipt-thumb .thumb-name {
  color: #0d1b2a;
}
body.light-mode .receipt-thumb .thumb-remove {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

body.light-mode .mail-preview {
  background: #ffffff;
  border: 1px solid #c7d9f5;
  color: #0d1b2a;
}
body.light-mode .mail-envelope {
  background: #f0f6ff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .addr-pill {
  background: #e0ecff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .addr-avatar {
  background: #e0ecff;
  border: 1px solid #93c5fd;
}
body.light-mode .addr-avatar i {
  color: #2563eb;
}
body.light-mode .addr-label {
  color: #0d1b2a;
}
body.light-mode .mail-preview-header-asbar {
  background: #e0ecff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .mail-preview-row span { color: #475569; }
body.light-mode .mail-preview-body {
  background: #f9fbff;
  border: 1px solid #c7d9f5;
  color: #0d1b2a;
}
body.light-mode .mail-preview-body .pv-note {
  background: #e0ecff;
  border: 1px solid #93c5fd;
  color: #0d1b2a;
}
body.light-mode .mail-preview-attachments li {
  background: #f0f6ff;
  border: 1px solid #c7d9f5;
  color: #0d1b2a;
}


#confirmModal,
#earlySendModal,
#incompleteCollectionModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 900000;
  align-items: center;
  justify-content: center;
}

#confirmModal .confirm-box,
#earlySendModal .confirm-box,
#incompleteCollectionModal .confirm-box {
  background: #0d1526;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  text-align: center;
}

#confirmModal .confirm-box h3,
#earlySendModal .confirm-box h3,
#incompleteCollectionModal .confirm-box h3 {
  margin-bottom: 12px;
}

#confirmModal .confirm-box p,
#earlySendModal .confirm-box p,
#incompleteCollectionModal .confirm-box p {
  margin-bottom: 20px;
}

.confirm-actions {
  display: flex;
  justify-content: space-around;
  gap: 12px;
}

.confirm-actions .btn {
  flex: 1;
}

.confirm-actions .btn.cancel {
  background: #333;
  border: 1px solid #555;
  color: #fff;
}

/* === Light mode overrides === */
body.light-mode #confirmModal,
body.light-mode #earlySendModal,
body.light-mode #incompleteCollectionModal {
  background: rgba(0,0,0,0.4); /* same backdrop */
}

body.light-mode #confirmModal .confirm-box,
body.light-mode #earlySendModal .confirm-box,
body.light-mode #incompleteCollectionModal .confirm-box {
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

body.light-mode .confirm-actions .btn.cancel {
  background: #f3f4f6;
  border: 1px solid #cbd5e1;
  color: #1a1a1a;
}

.page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.container{
  flex: 1; /* fills available space so footer is pushed down */
}

.site-footer{
  margin-top: auto;
}