/* =========================================================
   Sistema de Controle de Veículos — Grupo ATR
   Paleta: #000 / #fff / #00d084
   ========================================================= */

:root {
  --black: #000;
  --white: #fff;
  --accent: #00d084;
  --accent-dark: #00a86a;
  --accent-soft: rgba(0, 208, 132, .08);
  --accent-soft-2: rgba(0, 208, 132, .14);
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.10);

  /* Override Bootstrap */
  --bs-body-color: var(--black);
  --bs-body-bg: var(--white);
  --bs-link-color: var(--accent-dark);
  --bs-link-hover-color: var(--black);
  --bs-border-color: var(--gray-200);
  --bs-primary-rgb: 0, 208, 132;
  --bs-success-rgb: 0, 208, 132;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body { height: 100%; }
body {
  background: var(--white);
  color: var(--black);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.01em;
  font-size: 15px;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
}

a { color: var(--black); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-dark); }

code { background: var(--gray-100); color: var(--black); padding: 1px 6px; border-radius: 4px; font-size: .85em; }

/* ---- Ícones SVG ---- */
.ic {
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
  stroke: currentColor;
}
.btn .ic, a .ic { vertical-align: -3px; }

/* ---- Navbar ---- */
.navbar {
  background: var(--black) !important;
  border-bottom: 1px solid var(--black);
  padding: .75rem 0;
}
.navbar .container-fluid { padding-inline: 1.5rem; }
.navbar-brand {
  color: var(--white) !important;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-brand .ic { color: var(--accent); }
.navbar-brand .brand-logo { display: block; max-width: 140px; height: 26px; }
@media (max-width: 575px) {
  .navbar-brand .brand-logo { height: 22px; }
}
.navbar-nav .nav-link {
  color: rgba(255,255,255,.7) !important;
  font-weight: 500;
  font-size: .92rem;
  padding: .45rem .85rem !important;
  border-radius: var(--radius-sm);
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.navbar-nav .nav-link:hover { color: var(--white) !important; background: rgba(255,255,255,.06); }
.navbar-nav .nav-link.active { color: var(--white) !important; background: rgba(255,255,255,.10); }

/* CTA na navbar */
.navbar .btn-cta {
  background: var(--accent);
  color: var(--black) !important;
  font-weight: 600;
  border: none;
  padding: .5rem 1rem !important;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: var(--radius-sm);
}
.navbar .btn-cta:hover { background: var(--white); color: var(--black) !important; }

.navbar-toggler { border-color: rgba(255,255,255,.2); padding: .35rem .55rem; }
.navbar-toggler:focus { box-shadow: none; }

.dropdown-menu {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .35rem;
  margin-top: .35rem !important;
}
.dropdown-item {
  border-radius: var(--radius-sm);
  font-size: .9rem;
  padding: .5rem .65rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.dropdown-item:hover { background: var(--gray-100); color: var(--black); }
.dropdown-item.text-danger:hover { background: #fef2f2; color: #b91c1c; }
.dropdown-header { font-size: .8rem; color: var(--gray-500); }

/* ---- Centro de notificações (sininho) ---- */
.notif-bell {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: .5rem !important;
  position: relative;
}
.notif-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: .65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  background: #ef4444;
  color: white;
  border-radius: 9px;
  border: 2px solid var(--black);
}
.notif-menu {
  width: 360px;
  max-width: calc(100vw - 1.5rem);
  max-height: 80vh;
  overflow-y: auto;
  padding: 0 !important;
}
.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.notif-item {
  display: flex !important;
  gap: .75rem;
  padding: .8rem 1rem !important;
  border-bottom: 1px solid var(--gray-100);
  color: var(--black);
  text-decoration: none;
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
}
.notif-item:hover { background: var(--gray-50); }
.notif-item:last-child { border-bottom: none; }
.notif-item.notif-danger { border-left-color: #ef4444 !important; }
.notif-item.notif-warning { border-left-color: #f59e0b !important; }
.notif-item.notif-info { border-left-color: var(--accent) !important; }
.notif-item.notif-success { border-left-color: var(--accent) !important; }
.notif-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-item.notif-danger .notif-icon { background: #fef2f2; color: #b91c1c; }
.notif-item.notif-warning .notif-icon { background: #fff7ed; color: #c2410c; }
.notif-item.notif-info .notif-icon { background: var(--accent-soft); color: var(--accent-dark); }
.notif-body { flex: 1; min-width: 0; }
.notif-title {
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .15rem;
}
.notif-msg {
  font-size: .8rem;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-when {
  font-size: .72rem;
  color: var(--gray-400);
  margin-top: .15rem;
}
.notif-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--gray-500);
  font-size: .9rem;
}

/* Badge accent */
.badge-accent {
  background: var(--accent);
  color: var(--black);
  font-weight: 600;
}

/* ---- Buttons ---- */
.btn {
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: .55rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: all .15s ease;
  border: 1px solid transparent;
  font-size: .9rem;
}
.btn-lg { padding: .75rem 1.25rem; font-size: 1rem; }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }

.btn-primary, .btn-accent {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover, .btn-accent:hover, .btn-primary:focus, .btn-accent:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--white);
}

.btn-dark {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.btn-dark:hover { background: var(--gray-800); border-color: var(--gray-800); color: var(--white); }

.btn-outline-secondary, .btn-outline-primary {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--gray-200);
}
.btn-outline-secondary:hover, .btn-outline-primary:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--black);
}
.btn-outline-primary.active, .btn-outline-primary:active {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
}

.btn-outline-danger {
  background: var(--white);
  color: #dc2626;
  border-color: var(--gray-200);
}
.btn-outline-danger:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

.btn-outline-success {
  background: var(--white);
  color: var(--accent-dark);
  border-color: var(--gray-200);
}
.btn-outline-success:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }

.btn-outline-info {
  background: var(--white);
  color: var(--gray-600);
  border-color: var(--gray-200);
}
.btn-outline-info:hover { background: var(--gray-100); color: var(--black); }

.btn-success { background: var(--accent); color: var(--black); border-color: var(--accent); font-weight: 600; }
.btn-success:hover { background: var(--accent-dark); color: var(--white); border-color: var(--accent-dark); }

.btn-warning { background: var(--accent); color: var(--black); border: none; font-weight: 600; }
.btn-warning:hover { background: var(--accent-dark); color: var(--white); }

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: none;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--gray-200);
  font-weight: 600;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.card-body { padding: 1.25rem; }

/* ---- Stat cards ---- */
.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  transition: all .2s ease;
  height: 100%;
}
.stat-card:hover { border-color: var(--black); }
.stat-card .stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--black);
  flex-shrink: 0;
}
.stat-card.accent .stat-icon { background: var(--accent-soft); color: var(--accent-dark); }
.stat-card.dark .stat-icon { background: var(--black); color: var(--accent); }
.stat-card .stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.stat-card .stat-label {
  color: var(--gray-500);
  font-size: .82rem;
  margin-top: .25rem;
  font-weight: 500;
}

/* ---- Login ---- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-soft-2), transparent 70%);
  border-radius: 50%;
  top: -200px;
  right: -100px;
  pointer-events: none;
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
.login-card .login-logo {
  width: 56px;
  height: 56px;
  background: var(--black);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--accent);
}
.login-card .login-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin: 0 auto 1.25rem;
  max-width: 260px;
}
.login-card .login-logo-img { display: block; }
.login-card h1 {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: .25rem;
}
.login-card .subtitle {
  text-align: center;
  color: var(--gray-500);
  font-size: .85rem;
  margin-bottom: 2rem;
}

/* ---- Forms ---- */
.form-label {
  font-weight: 500;
  font-size: .85rem;
  margin-bottom: .35rem;
  color: var(--gray-700);
}
.form-control, .form-select {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  font-size: .92rem;
  color: var(--black);
  background: var(--white);
  transition: all .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px var(--accent-soft-2);
  outline: none;
}
.form-control-lg { padding: .75rem 1rem; font-size: 1rem; }

.form-text { color: var(--gray-500); font-size: .8rem; }

.form-check-input { border: 1px solid var(--gray-300); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-soft-2); border-color: var(--black); }
.form-switch .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ---- Tables ---- */
.table {
  margin-bottom: 0;
  --bs-table-hover-bg: var(--gray-50);
  --bs-table-striped-bg: transparent;
}
.table > :not(caption) > * > * {
  padding: .85rem 1rem;
  border-bottom-color: var(--gray-200);
}
.table thead th {
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-500);
  background: var(--gray-50) !important;
  border-bottom: 1px solid var(--gray-200);
}
.table-responsive { border-radius: var(--radius); }

/* Linha clicável (tr[data-href]) */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background-color: var(--gray-50); }

/* ---- Badges ---- */
.badge {
  font-weight: 500;
  font-size: .72rem;
  padding: .3em .65em;
  border-radius: var(--radius-sm);
  letter-spacing: .01em;
}
.status-badge { font-size: .78rem; padding: .35em .7em; }

/* Badge clicável (dropdown de status) */
button.badge {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
button.badge::after { font-size: .65em; opacity: .7; }
button.badge:focus { box-shadow: 0 0 0 3px var(--accent-soft-2); outline: none; }

/* Garante que o dropdown não seja cortado pelo overflow da tabela */
.table .dropdown-menu { z-index: 1080; }
.badge.bg-success, .badge.bg-success-subtle {
  background: var(--accent-soft) !important;
  color: var(--accent-dark) !important;
  border: 1px solid var(--accent-soft-2);
}
.badge.bg-warning, .badge.bg-warning.text-dark {
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1px solid #fed7aa;
}
.badge.bg-danger {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca;
}
.badge.bg-secondary {
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
  border: 1px solid var(--gray-200);
}
.badge.bg-info, .badge.bg-info.text-dark {
  background: #e0f2fe !important;
  color: #075985 !important;
  border: 1px solid #bae6fd;
}
.badge.bg-primary {
  background: var(--black) !important;
  color: var(--accent) !important;
  border: 1px solid var(--black);
}

/* ---- Alerts ---- */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-size: .9rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.alert-success {
  background: var(--accent-soft);
  border-color: var(--accent-soft-2);
  color: var(--accent-dark);
}
.alert-warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.alert-info {
  background: var(--gray-50);
  border-color: var(--gray-200);
  color: var(--gray-700);
}
.alert-light {
  background: var(--gray-50);
  border-color: var(--gray-200);
  color: var(--black);
}

/* ---- Page header ---- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--gray-200);
}
.page-header h1 {
  font-size: 1.75rem;
  margin: 0;
}
.page-header .subtitle {
  color: var(--gray-500);
  font-size: .9rem;
  margin-top: .25rem;
}

/* ---- Calendar (FullCalendar) ---- */
#calendar {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  padding: 1.25rem;
}
.fc {
  --fc-border-color: var(--gray-200);
  --fc-today-bg-color: var(--accent-soft);
  --fc-page-bg-color: var(--white);
  --fc-neutral-bg-color: var(--gray-50);
  --fc-list-event-hover-bg-color: var(--gray-50);
}
.fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.fc .fc-button {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--black);
  font-weight: 500;
  font-size: .85rem;
  padding: .4rem .85rem;
  border-radius: var(--radius-sm);
  text-transform: capitalize;
  box-shadow: none !important;
}
.fc .fc-button:hover { background: var(--gray-100); border-color: var(--gray-300); color: var(--black); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
}
.fc-event {
  cursor: pointer;
  font-size: .78rem;
  padding: 2px 6px;
  border: none !important;
  border-radius: 4px;
  font-weight: 500;
}
.fc .fc-col-header-cell-cushion {
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-500);
  padding: .5rem;
}
.fc .fc-daygrid-day-number {
  color: var(--black);
  font-weight: 500;
  padding: .35rem .5rem;
  font-size: .85rem;
}

/* ---- Timeline (table view) ---- */
.timeline-table {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: auto;
}
.timeline-table table {
  margin-bottom: 0;
  min-width: 800px;
}
.timeline-table th {
  background: var(--gray-50);
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-500);
  padding: .65rem .25rem;
  border-bottom: 1px solid var(--gray-200);
}
.timeline-table .vehicle-col {
  position: sticky;
  left: 0;
  background: var(--white);
  z-index: 3;
  font-weight: 600;
  min-width: 180px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: .85rem;
  color: var(--black);
  padding: .85rem 1rem;
  border-right: 1px solid var(--gray-200);
}
.timeline-table th.vehicle-col { z-index: 4; background: var(--gray-50); }
.timeline-table .day-cell {
  width: 80px;
  height: 52px;
  vertical-align: middle;
  text-align: center;
  font-size: .75rem;
  position: relative;
  border-color: var(--gray-100);
}
.timeline-table .day-cell.busy {
  background: var(--accent);
  color: var(--black);
  font-weight: 600;
  cursor: pointer;
  border-color: var(--accent);
}
.timeline-table .day-cell.pending {
  background: #fff7ed;
  color: #9a3412;
  font-weight: 500;
  cursor: pointer;
}
.timeline-table .day-cell.today { box-shadow: inset 0 0 0 2px var(--black); }

/* Linha de veículo indisponível (manutenção/limpeza/inativo) */
.timeline-table tr.vehicle-unavailable .vehicle-col {
  background: #fef3c7;
}
.timeline-table tr.vehicle-unavailable .day-cell:not(.busy):not(.pending) {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(245, 158, 11, .12) 6px,
    rgba(245, 158, 11, .12) 12px
  );
}

/* ---- Reservation list items ---- */
.reservation-list-item {
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-300);
  background: var(--white);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  transition: all .15s ease;
}
.reservation-list-item:hover { border-color: var(--gray-300); }
.reservation-list-item.aprovada { border-left-color: var(--accent); }
.reservation-list-item.pendente { border-left-color: #f59e0b; }
.reservation-list-item.recusada { border-left-color: #ef4444; }
.reservation-list-item.cancelada { border-left-color: var(--gray-400); }
.reservation-list-item.agendada { border-left-color: #0ea5e9; }
.reservation-list-item.concluida { border-left-color: #10b981; }

/* ---- Legend ---- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: .82rem;
  margin-bottom: 1rem;
  color: var(--gray-600);
}
.legend-item { display: flex; align-items: center; gap: .45rem; }
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

/* ---- Pagination ---- */
.pagination .page-link {
  border: 1px solid var(--gray-200);
  color: var(--black);
  font-size: .85rem;
  padding: .4rem .75rem;
}
.pagination .page-link:hover { background: var(--gray-100); border-color: var(--gray-300); }
.pagination .page-item.active .page-link {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.pagination .page-item.disabled .page-link { color: var(--gray-400); }

/* ---- Modal ---- */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--gray-200); padding: 1.25rem; }
.modal-title { font-weight: 700; }
.modal-footer { border-top: 1px solid var(--gray-200); padding: 1rem 1.25rem; }

/* ---- DL ---- */
dl.row dt { color: var(--gray-500); font-weight: 500; font-size: .85rem; }
dl.row dd { font-weight: 500; color: var(--black); }

/* ---- Footer ---- */
footer.app-footer {
  border-top: 1px solid var(--gray-200);
  padding: 1.5rem 0;
  margin-top: 3rem;
  color: var(--gray-500);
  font-size: .82rem;
  text-align: center;
}
footer.app-footer .footer-logo {
  /* Logo é branca/verde — invertemos para ficar visível em fundo claro */
  filter: invert(1) hue-rotate(180deg);
  opacity: .6;
}

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-500);
}
.empty-state .empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background: var(--gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  body { font-size: 14px; }
  .page-header h1 { font-size: 1.4rem; }
  .stat-card .stat-value { font-size: 1.5rem; }
  .navbar-brand { font-size: .95rem; }
  .navbar .container-fluid { padding-inline: 1rem; }
  .fc .fc-toolbar { flex-direction: column; gap: .5rem; }
  .fc .fc-toolbar-chunk { display: flex; flex-wrap: wrap; gap: .25rem; }
  .login-card { padding: 2rem 1.5rem; }
  .timeline-table .day-cell { width: 60px; }
}

/* Utility */
.text-accent { color: var(--accent-dark) !important; }
.bg-accent { background: var(--accent) !important; }
.text-black { color: var(--black) !important; }
.text-muted { color: var(--gray-500) !important; }
hr { border-color: var(--gray-200); opacity: 1; }