:root {
  --ps-primary: #2c3e50;
  --ps-accent:  #3498db;
}

body {
  background-color: #f4f6f9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Navbar */
.navbar {
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.navbar-brand {
  font-size: 1.15rem;
  letter-spacing: .02em;
}

/* Cards */
.card {
  border-radius: .75rem;
  transition: transform .15s, box-shadow .15s;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08) !important;
}

/* Tables */
.table thead th {
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.table tbody tr:hover td {
  background-color: rgba(52,152,219,.04);
}

/* Login page */
body.bg-dark {
  background: linear-gradient(135deg, #1a252f 0%, #2c3e50 100%) !important;
}
body.bg-dark .card {
  border-radius: 1rem;
}

/* Badges */
.badge {
  font-size: .75em;
  font-weight: 500;
  letter-spacing: .02em;
}

/* Footer */
.footer {
  margin-top: auto;
}

/* KPI cards */
.card .display-6 {
  font-size: 2rem;
}

/* Responsive table */
@media (max-width: 576px) {
  .table-responsive .table td,
  .table-responsive .table th {
    font-size: .8rem;
  }
}

/* Modal */
.modal-content {
  border-radius: .75rem;
  border: 0;
}
.modal-header {
  border-bottom: 1px solid #eee;
}

/* Form controls */
.form-control:focus,
.form-select:focus {
  border-color: var(--ps-accent);
  box-shadow: 0 0 0 .2rem rgba(52,152,219,.18);
}

/* Scrollbar thin */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: #f1f1f1; }
::-webkit-scrollbar-thumb  { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* PWA install banner (hidden by default, shown via JS) */
#pwa-install-banner {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 280px;
  max-width: 400px;
}