/* Modern, responsive theme for Transport App
   Brand highlight: #F50057 (used sparingly for emphasis)
   Focus on readability, spacing, and accessibility.
*/

:root{
  --brand: #F50057;         /* highlight color */
  --brand-600: #d4004c;
  --bg: #f7f8fb;            /* app background */
  --card: #ffffff;          /* cards and tables header */
  --text: #1f2937;          /* main text */
  --muted: #6b7280;         /* subtle text */
  --border: #e5e7eb;        /* borders */
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f59e0b;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow-lg: 0 12px 30px rgba(0,0,0,.08);
  --shadow-md: 0 8px 22px rgba(0,0,0,.06);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.05);
}

*{ box-sizing: border-box; }

html, body{
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Navbar */
.navbar{
  background: var(--card) !important;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border);
}
.navbar-brand img{
  height: 28px;
  width: auto;
}
.nav-link{
  font-weight: 600;
  color: var(--text) !important;
  opacity: .85;
}
.nav-link:hover,
.nav-link:focus{ opacity: 1; color: var(--brand) !important; }

/* Page wrap spacing */
.page-wrap{
  padding-top: clamp(16px, 2vw, 28px);
  padding-bottom: clamp(36px, 4vw, 56px);
}

/* Cards */
.card{
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.card .card-title{
  font-weight: 700;
}
.form-card .form-label{ font-weight: 600; }
.form-control, .form-select{
  border-radius: var(--radius-md);
  border-color: var(--border);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 0.2rem rgba(245, 0, 87, 0.12);
  border-color: #f7a0bd;
}

/* Buttons */
.btn{
  border-radius: 12px;
  font-weight: 600;
}
.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover{
  background: var(--brand-600);
  border-color: var(--brand-600);
}
.btn-outline-primary{
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-primary:hover{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-outline-secondary{
  color: #374151;
  border-color: var(--border);
}
.btn-outline-secondary:hover{
  background: #fff;
  border-color: var(--brand);
  color: var(--brand);
}

/* Tables */
.table{
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.table thead th{
  background: var(--card);
  border-bottom: 1px solid var(--border);
  color: #111827;
  font-weight: 700;
}
.table td, .table th{
  vertical-align: middle;
}
.table-hover tbody tr:hover{
  background: #fafafa;
}
.table tfoot th{
  background: #fafafa;
}

/* Badges for status */
.badge-due{
  background: rgba(220, 38, 38, .10);
  border: 1px solid rgba(220, 38, 38, .25);
  color: var(--danger);
  font-weight: 700;
}
.badge-advance{
  background: rgba(22, 163, 74, .10);
  border: 1px solid rgba(22, 163, 74, .25);
  color: var(--success);
  font-weight: 700;
}

/* Helpers */
.helper-muted{ color: var(--muted); }
.helper-strong{ color: #0f172a; font-weight: 700; }
.hr-muted{ border-color: var(--border); opacity: 1; }

/* Toast / alerts */
.alert-success{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Make forms & tables compress gracefully on mobile */
@media (max-width: 768px){
  .container{ padding-left: 10px; padding-right: 10px; }
  .table{ font-size: 15px; }
  .table th, .table td{ padding: .6rem; }
}

/* Extra small phones */
@media (max-width: 420px){
  .table{ font-size: 14px; }
  .btn{ padding: .5rem .8rem; }
}

/* Print-friendly tweaks for PDF visual parity (optional; does not affect FPDF output) */
@media print{
  .navbar, .btn, .form-select, .form-control, .alert{ display: none !important; }
  .card{ box-shadow: none; }
}