/* app/static/css/_variables.css */

/* ---------------------------
   Light mode (default)
---------------------------- */
:root {
  --color-primary: #6f1d1b;      /* burgundy */
  --color-secondary: #f8f9fa;    /* light gray for cards, tables */
  --color-background: #ffffff;
  --color-text: #2e2e2e;
  --color-border: #dcdcdc;
  --color-muted: #6c757d;
  --color-white: #ffffff;
  --color-shadow: rgba(0,0,0,0.1);
}

/* ---------------------------
   Dark mode
---------------------------- */
.dark-mode {
  --color-background: #1c1c1c;
  --color-text: #f0f0f0;
  --color-primary: #a75b55;
  --color-secondary: #2a2a2a;
  --color-border: #444444;
  --color-muted: #999999;
  --color-white: #1c1c1c;
  --color-shadow: rgba(0,0,0,0.4);
}

/* =========================
   Dark mode: alert fixes
========================= */

body.dark-mode .alert,
body.dark-mode .alert-secondary,
body.dark-mode .alert-light {
  background-color: var(--color-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}


/* ---------------------------
   Global body
---------------------------- */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

body.dark-mode {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* ---------------------------
   Typography & links
---------------------------- */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: #ffb3a7; /* optional hover shade */
  text-decoration: underline;
}

/* ---------------------------
   Cards
---------------------------- */

.card {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: 0 2px 6px var(--color-shadow);
}

/* IMPORTANT: Bootstrap sets card-body bg to white */
.card-body {
  background-color: var(--color-secondary);
  color: var(--color-text);
}

/* ---------------------------
   Theme-aware muted text
---------------------------- */
.text-muted-theme {
  color: var(--color-muted);
}



/* ---------------------------
   Tables (Dark Mode Fixed)
---------------------------- */

/* Make table background match card */
table {
    background-color: var(--color-secondary);
    color: var(--color-text);
    border-collapse: collapse;
}

/* Table head */
table thead {
    background-color: var(--color-secondary);
    color: var(--color-text);
}

/* Table borders */
table th,
table td {
    border: 1px solid var(--color-border);
}

/* Table striped rows */
table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,0.03); /* Light mode */
}

body.dark-mode table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.05); /* Dark mode stripes */
}

/* Table row hover effect */
table.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,0.05); /* Light mode */
}

body.dark-mode table.table-hover tbody tr:hover {
    background-color: rgba(255,255,255,0.1); /* Dark mode hover */
}

/* Table header & cells in dark mode */
body.dark-mode table th,
body.dark-mode table td {
    background-color: var(--color-secondary);
    color: var(--color-text);
    border-color: var(--color-border);
}

.table-danger,
.table-danger > th,
.table-danger > td {
  color: var(--color-text) !important;
}
.table-danger {
  background-color: #f8d7da !important;
}

/* ===========================
   THEME-AWARE MISSED ROWS
   =========================== */

/* ---------- Light mode ---------- */
.table-danger {
  --bs-table-color: var(--color-text);
  --bs-table-bg: #f8d7da;              /* soft pink */
  --bs-table-striped-bg: #f3cfcf;
  --bs-table-hover-bg: #efbebe;
}

/* ---------- Dark mode ---------- */
body.dark-mode .table-danger {
  --bs-table-color: var(--color-text);
  --bs-table-bg: #3a1f22;              /* deep muted red */
  --bs-table-striped-bg: #452529;
  --bs-table-hover-bg: #503035;
}





/* ---------------------------
   Forms
---------------------------- */
.form-control,
.form-select {
  background-color: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-text);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(167, 91, 85, 0.25);
  background-color: var(--color-white);
  color: var(--color-text);
}

.profile-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.profile-value {
    font-weight: 500;
    color: var(--color-text);
}


body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .profile-label  {
  background-color: var(--color-secondary);
  border-color: var(--color-border);
  color: var(--color-text);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(167, 91, 85, 0.25);
  color: var(--color-text);
}

.form-text {
  color: var(--color-muted);
}

body.dark-mode label,
body.dark-mode .form-check-label{
  color: var(--color-text);
}

body.dark-mode .form-label {
  color: var(--color-text);
}

body.dark-mode .form-check-input {
  background-color: var(--color-secondary);
  border-color: var(--color-border);
}

body.dark-mode .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}


/* ---------------------------
   Buttons
---------------------------- */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: #8e3a35;
  border-color: #8e3a35;
  color: var(--color-white);
}

.btn-outline-secondary {
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-outline-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

body.dark-mode .btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

body.dark-mode .btn-primary:hover {
  background-color: #b07065;
  border-color: #b07065;
}

body.dark-mode .btn-outline-secondary {
  color: var(--color-white);
  border-color: var(--color-white);
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* ---------------------------
   Dark mode: ALL outline buttons (GLOBAL FIX)
---------------------------- */

body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-success,
body.dark-mode .btn-outline-danger,
body.dark-mode .btn-outline-warning,
body.dark-mode .btn-outline-info {
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Hover / active states */
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-success:hover,
body.dark-mode .btn-outline-danger:hover,
body.dark-mode .btn-outline-warning:hover,
body.dark-mode .btn-outline-info:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Optional: focus visibility */
body.dark-mode .btn-outline-primary:focus,
body.dark-mode .btn-outline-secondary:focus,
body.dark-mode .btn-outline-danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(167, 91, 85, 0.4);
}



/* =========================
   ERP Footer
========================= */

.erp-footer {
  background-color: var(--color-secondary);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}

body.dark-mode .erp-footer {
  background-color: var(--color-secondary);
  border-color: var(--color-border);
}


/* ---------------------------
   Alerts & flash messages
---------------------------- */
.alert-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-border);
  color: var(--color-text);
}

.flash {
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text);
  box-shadow: 0 2px 6px var(--color-shadow);
  opacity: 0;
  animation: fadeIn 0.4s forwards;
}

.flash.success { border-left: 4px solid #2e7d32; }
.flash.info    { border-left: 4px solid #0277bd; }
.flash.danger  { border-left: 4px solid #c62828; }

body.dark-mode .flash {
  background-color: var(--color-secondary);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Notifications */
.notification-item {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.notification-unread {
  border-left: 4px solid var(--color-primary);
}

body.dark-mode .notification-item {
  background-color: var(--color-secondary);
  color: var(--color-text);
}

/* Navbar notifications dropdown */
.dropdown-menu {
  background-color: var(--color-secondary);
  color: var(--color-text);
}

.dropdown-menu .dropdown-header {
  color: var(--color-muted);
}

/* ---------------------------
   Dark mode: notification text
---------------------------- */
body.dark-mode .dropdown-menu strong,
body.dark-mode .dropdown-menu .small {
  color: var(--color-text);
}

/* ---------------------------
   Dark mode: dropdown borders
---------------------------- */
body.dark-mode .dropdown-menu li {
  border-color: var(--color-border);
}





/* ---------------------------
   Utility classes
---------------------------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

/* ---------------------------
   Animations
---------------------------- */
@keyframes fadeIn {
  to { opacity: 1; }
}

/* ---------------------------
   Dark mode: muted text fix
---------------------------- */
body.dark-mode .text-muted,
body.dark-mode .dropdown-header,
body.dark-mode .form-text {
  color: var(--color-muted) !important;
}

/* ---------------------------
   Dark mode: headings visibility
---------------------------- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--color-text);
}

/* ---------------------------
   Dark mode: List groups
---------------------------- */

body.dark-mode .list-group,
body.dark-mode .list-group-item {
  background-color: var(--color-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

body.dark-mode .list-group-item {
  border: 1px solid var(--color-border);
}

body.dark-mode .list-group-item + .list-group-item {
  border-top: none;
}

body.dark-mode .list-group-item:hover {
  background-color: rgba(255,255,255,0.05);
}

/* ===========================
   Dark mode: lists & contacts
   =========================== */

body.dark-mode .card-body ul,
body.dark-mode .card-body li {
  color: var(--color-text);
}

/* Ensure strong text is readable */
body.dark-mode .card-body strong {
  color: var(--color-text);
}

/* Slightly muted secondary text inside lists */
body.dark-mode .card-body li small,
body.dark-mode .card-body li .text-muted {
  color: var(--color-muted);
}

/* Optional: improve spacing & readability */
body.dark-mode .card-body ul {
  padding-left: 1.2rem;
}

body.dark-mode .card-body ul li {
  margin-bottom: 0.25rem;
}

/* ---------------------------
   Dark mode: modal fix
---------------------------- */
body.dark-mode .modal-content {
  background-color: var(--color-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: var(--color-border);
}

body.dark-mode .modal-title {
  color: var(--color-text);
}

body.dark-mode .modal-body label {
  color: var(--color-text);
}

body.dark-mode .btn-close {
  filter: invert(1);
}

.template-card {
  transition: all 0.15s ease;
}

.template-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

































/* ==================================================
   GRID (DESKTOP)
================================================== */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;

  /* ✅ headers auto-height, cells fixed height */
  grid-auto-rows: auto;
}

/* Weekday headers */
.calendar-header {
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  padding-bottom: 0.25rem;
}

/* ==================================================
   CALENDAR CELL
================================================== */

.calendar-cell {
  position: relative;
  height: 160px;                 /* ✅ uniform cube height */
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-secondary);

  display: flex;
  flex-direction: column;
  gap: 0.35rem;

  overflow: hidden;              /* ✅ no spill */
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

/* Stronger visible boundary */
.calendar-cell {
  border-color: color-mix(
    in srgb,
    var(--color-border) 85%,
    transparent
  );
}

/* Hover affordance */
@media (hover: hover) {
  .calendar-cell:hover {
    background-color: rgba(0, 0, 0, 0.025);
    box-shadow: 0 6px 16px var(--color-shadow);
    transform: translateY(-1px);
  }
}

/* ==================================================
   EMPTY / ADJACENT CELLS
================================================== */

.calendar-cell.empty,
.calendar-cell.is-adjacent {
  background: transparent;
  border-style: dashed;
  opacity: 0.45;
}

/* ==================================================
   DATE LABEL
================================================== */

.calendar-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
}

/* ==================================================
   TODAY
================================================== */

.calendar-cell.is-today {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.calendar-cell.is-today .calendar-date {
  color: var(--color-primary);
  font-weight: 700;
}

/* ==================================================
   DARK MODE
================================================== */

body.dark-mode .calendar-cell {
  background-color: var(--color-secondary);
  border-color: rgba(255, 255, 255, 0.12); /* ✅ visible */
}

@media (hover: hover) {
  body.dark-mode .calendar-cell:hover {
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  }
}


/* ==================================================
   CALENDAR ITEMS
================================================== */

.calendar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.25rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.25;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Hover lift (desktop only) */
@media (hover: hover) {
  .calendar-item:hover {
    transform: translateY(-1px);
  }
}

/* Dot indicator */
.calendar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Text container */
.calendar-item-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ==================================================
   STATUS STYLES (LIGHT MODE)
================================================== */

.calendar-item.status-pending {
  background-color: rgba(111, 29, 27, 0.10);
}
.calendar-item.status-pending .calendar-dot {
  background-color: var(--color-primary);
}

.calendar-item.status-done {
  background-color: rgba(46, 125, 50, 0.10);
}
.calendar-item.status-done .calendar-dot {
  background-color: #2e7d32;
}

.calendar-item.status-missed {
  background-color: rgba(198, 40, 40, 0.12);
}
.calendar-item.status-missed .calendar-dot {
  background-color: #c62828;
}


/* ==================================================
   QUICK ACTIONS (RIGHT SIDE)
================================================== */

.calendar-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  padding-left: 6px;
}

/* Buttons */
.calendar-action,
.calendar-action-mobile {
  border: none;
  background: transparent;
  font-size: 0.75rem;
  padding: 4px;
  border-radius: 6px;
  color: var(--color-muted);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.12s ease,
    color 0.15s ease;
}

/* Hover */
.calendar-action:hover,
.calendar-action-mobile:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-primary);
}

/* Click feedback (no layout shift) */
.calendar-action:active,
.calendar-action-mobile:active {
  transform: scale(1.15);
}

/* Intent colors */
.calendar-action.done {
  color: #2e7d32;
}

.calendar-action.reschedule {
  color: var(--color-primary);
}


/* ==================================================
   ADD BRING-UP BUTTON
================================================== */

.calendar-add-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-muted);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.calendar-cell:hover .calendar-add-btn {
  opacity: 1;
}

.calendar-add-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Mobile add */
.calendar-add-mobile {
  margin-top: 4px;
  width: 100%;
  font-size: 0.72rem;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-muted);
}


/* ==================================================
   "+ MORE" POPOVER
================================================== */

.calendar-more-btn {
  background: none;
  border: none;
  font-size: 0.7rem;
  color: var(--color-muted);
  padding: 2px 4px;
  cursor: pointer;
}

.calendar-more-btn:hover {
  text-decoration: underline;
}

/* =========================
   Calendar Floating Popover
========================= */

.calendar-popover {
  position: absolute;
  left: 6px;
  right: 6px;
  top: calc(100% + 6px); /* 👈 key: just below the cell */
  z-index: 50;

  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 10px 26px var(--color-shadow);

  padding: 6px;

  /* animation */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

/* Visible */
.calendar-popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================
   Header
========================= */

.calendar-popover-header {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  padding: 4px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

/* =========================
   Body
========================= */

.calendar-popover-body {
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
}

/* =========================
   Items
========================= */

.calendar-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--color-text);
  transition: background-color 0.15s ease;
}

.calendar-popover-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.dark-mode .calendar-popover-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Text */
.calendar-popover-item .calendar-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-popover-item .text-muted {
  color: var(--color-muted);
}

/* =========================
   Status Tint
========================= */

.calendar-popover-item.status-pending {
  background-color: rgba(111, 29, 27, 0.10);
}

.calendar-popover-item.status-done {
  background-color: rgba(46, 125, 50, 0.10);
}

.calendar-popover-item.status-missed {
  background-color: rgba(198, 40, 40, 0.12);
}

/* Dark mode tuning */
body.dark-mode .calendar-popover-item.status-pending {
  background-color: rgba(167, 91, 85, 0.22);
}

body.dark-mode .calendar-popover-item.status-done {
  background-color: rgba(76, 175, 80, 0.22);
}

body.dark-mode .calendar-popover-item.status-missed {
  background-color: rgba(239, 83, 80, 0.26);
}


/* ==================================================
   MOBILE LAYOUT (PROPOSAL A)
================================================== */

@media (max-width: 768px) {

  .calendar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-header {
    display: none;
  }

  .calendar-cell {
    min-height: auto;
    padding: 0.6rem;
  }

  .calendar-weekday {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
  }

  .calendar-date {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }
}


/* ==================================================
   DARK MODE OVERRIDES
================================================== */

body.dark-mode .calendar-cell {
  background-color: var(--color-secondary);
  border-color: var(--color-border);
}

body.dark-mode .calendar-header,
body.dark-mode .calendar-weekday,
body.dark-mode .calendar-date {
  color: var(--color-muted);
}

body.dark-mode .calendar-item {
  color: var(--color-text);
}

/* Status contrast */
body.dark-mode .calendar-item.status-pending {
  background-color: rgba(167, 91, 85, 0.22);
}

body.dark-mode .calendar-item.status-done {
  background-color: rgba(76, 175, 80, 0.22);
}

body.dark-mode .calendar-item.status-missed {
  background-color: rgba(239, 83, 80, 0.26);
}

/* Actions */
body.dark-mode .calendar-action:hover,
body.dark-mode .calendar-action-mobile:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Popover */
body.dark-mode .calendar-popover {
  background: var(--color-secondary);
  border-color: var(--color-border);
}

body.dark-mode .calendar-popover-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* =========================
   Mobile Calendar — Stacked Days
========================= */

@media (max-width: 768px) {

  /* Kill grid, go vertical */
  .calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Each day becomes a full-width card */
  .calendar-cell {
    width: 100%;
    min-height: unset;
    padding: 12px;
    border-radius: 10px;
  }

  /* Hide desktop weekday headers */
  .calendar-header {
    display: none;
  }

  /* Mobile day header */
  .calendar-weekday {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    margin-bottom: 2px;
  }

  .calendar-date {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
  }

  /* Calendar items breathe more */
  .calendar-item {
    padding: 8px 10px;
    font-size: 0.8rem;
    border-radius: 8px;
  }

  /* + Add bring-up full width */
  .calendar-add-mobile {
    margin-top: 10px;
    padding: 8px;
    font-size: 0.8rem;
    border-radius: 8px;
  }

  /* Popover: full width of day card */
  .calendar-popover {
    left: 0;
    right: 0;
    width: 100%;
  }
}





















.timeline {
  position: relative;
  margin-left: 20px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
  padding-left: 20px;
}

.timeline-dot {
  position: absolute;
  left: -2px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border-radius: 50%;
}

.timeline-content {
  background: var(--color-secondary);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px var(--color-shadow);
}


/* ===========================
   Bring-Ups Layout
=========================== */

.bringups-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bringups-actions {
  display: flex;
  gap: 0.5rem;
}

.bringups-bar {
  display: flex;
  align-items: center;
}

.bringups-datebar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ===========================
   Bring-Ups quick ranges
=========================== */

.bringups-range-group {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.bringups-range-group .btn {
  white-space: nowrap;
}

/* Mobile: allow horizontal scroll instead of wrap */
@media (max-width: 768px) {
  .bringups-range-group {
    overflow-x: auto;
  }

  .bringups-range-group::-webkit-scrollbar {
    height: 4px;
  }
}











/* =========================
   Dashboard polish
========================= */

.dashboard-widget .card {
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.dashboard-widget .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--color-shadow);
}

/* Better badge alignment */
.card-title {
  font-weight: 600;
}

/* KPI tile hover */
.dashboard-widget .border.rounded {
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.dashboard-widget .border.rounded:hover {
  background-color: rgba(0,0,0,0.03);
  box-shadow: 0 4px 10px var(--color-shadow);
}

body.dark-mode .dashboard-widget .border.rounded:hover {
  background-color: rgba(255,255,255,0.05);
}
.dashboard-container {
  margin-bottom: 2rem;
}


@media (max-width: 576px) {
  .dashboard-widget .border.rounded {
    padding: 1rem !important;
  }
}