/* ── app.css — ESG portal design tokens & components (Bootstrap 5.3) ───────── */

/* Design system per UI/UX Pro Max "Trust & Authority" (enterprise/compliance):
   professional blue primary, emerald accent, Fira Sans/Fira Code pairing. */
:root {
  --app-bg: #F8FAFC;
  --surface: #ffffff;
  --ink: #0F172A;
  --border-soft: #E4ECFC;
  --radius: .75rem;
  --shadow-sm: 0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 8px 24px rgba(16,24,40,.10);
  --accent: #2563EB;            /* primary blue default */
  --accent-soft: #EFF6FF;
  --font-sans: 'Fira Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, monospace;
  --transition: .2s ease;
}
body.module-env { --accent:#059669; --accent-soft:#ECFDF5; }  /* emerald */
body.module-gov { --accent:#2563EB; --accent-soft:#EFF6FF; }  /* blue    */
body.module-soc { --accent:#475569; --accent-soft:#eef2f6; }  /* slate   */

body {
  background: var(--app-bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* Data/numeric surfaces read best in the mono pairing (tabular figures) */
.tile .fs-2, #titleNewTrans {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
#responser td, #responser2 td {
  font-variant-numeric: tabular-nums;
}

/* Accent helpers */
.bg-accent-soft { background: var(--accent-soft); }
.text-accent { color: var(--accent); }
.card-accent { border-top: 3px solid var(--accent); }
.navbar .nav-link.active {
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* Icon chip (welcome / module cards) */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.4rem;
  transition: background-color var(--transition);
}

/* ── Tiles (waste.php count cards — renamed from legacy .card) ─────────────── */
.tile {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  padding: 1rem 1.15rem;
  height: 100%;
  border-left: 4px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.tile-danger  { border-left-color: #dc3545; }
.tile-danger  .bi { color: #dc3545; }
.tile-info    { border-left-color: #0dcaf0; }
.tile-info    .bi { color: #0aa2c0; }
.tile-success { border-left-color: #198754; }
.tile-success .bi { color: #198754; }
.tile-primary { border-left-color: #0d6efd; }
.tile-primary .bi { color: #0d6efd; }
.tile-warning { border-left-color: #ffc107; }
.tile-warning .bi { color: #cc9a06; }

/* Hover-lift for welcome/module cards */
.card-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── AJAX target shells: card look only when populated ─────────────────────── */
#responser:not(:empty), #responser2:not(:empty) {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  overflow-x: auto;             /* injected tables must scroll, not break layout */
}

/* Auto entry animation on every AJAX inject */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#responser > *, #responser2 > *, .fade-in {
  animation: fadeInUp .25s ease-out;
}

/* ── New-transport state banner (#titleNewTrans keeps its ID contract) ─────── */
#titleNewTrans {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: .5rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
}

/* ── Waste-code live search results ────────────────────────────────────────── */
.divRez {
  cursor: pointer;
  border-radius: .375rem;
  padding: .25rem .5rem;
  transition: background-color var(--transition);
}
.divRez:hover { background: var(--accent-soft); }

/* Input flash feedback (changeDriver/changePlate) — keep text readable in BS5 */
input.bg-success {
  background-color: var(--bs-success-bg-subtle) !important;
  color: inherit !important;
}
input.bg-warning {
  background-color: var(--bs-warning-bg-subtle) !important;
  color: inherit !important;
}

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login-card { animation: fadeInUp .4s ease-out; }

/* ── Print (anexaunu regulatory form must print plain) ─────────────────────── */
@media print {
  .navbar, .btn, .toast-container { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none !important; border: 0; }
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tile, .card-lift, .divRez, .icon-chip { transition: none; }
  #responser > *, #responser2 > *, .fade-in, .login-card { animation: none; }
}