/* ==========================================================
   Apple‑modern UI layer (lightweight)
   - Works with Bootstrap 5
   - Keeps your theme colors via CSS variables
   ========================================================== */

:root{
  --brand: #b11116;
  --brand-2:#dc3545;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f6f7fb;
  --card:#ffffff;
  --border: rgba(15,23,42,.08);
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --radius: 16px;
}

html,body{ height:100%; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
}

/* Smooth cards */
.card, .modal-content, .dropdown-menu{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
}

.btn{
  border-radius: 12px;
}

.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover{ filter: brightness(.95); }

/* Inputs */
.form-control, .form-select{
  border-radius: 12px;
  border-color: var(--border);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(177,17,22,.4);
  box-shadow: 0 0 0 .25rem rgba(177,17,22,.12);
}

/* Tables */
.table{
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}
.table thead th{
  background: rgba(15,23,42,.03);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
}

/* Navbar tweaks (works with your existing navbar markup) */
.navbar{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(12px);
}

/* Utility: compact cards on mobile */
@media (max-width: 576px){
  .container, .container-fluid{ padding-left: 12px; padding-right: 12px; }
  .card-body{ padding: 14px !important; }
  .btn{ padding: .55rem .85rem; }
}

/* Offline badge helper */
.net-badge{
  font-size: .75rem;
  padding: .25rem .55rem;
  border-radius: 999px;
}

/* Print */
@media print{
  .navbar{ display:none !important; }
  .sidebar{ display:none !important; }
  body{ padding-top:0 !important; }
}