/* ===============================
   RESET & BASE
================================ */
* {
  box-sizing: border-box;
}

/* Ensure document can scroll on all devices (allow smooth touch scrolling) */
html, body {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #1f2937;
  line-height: 1.6;
} 

/* Theme variables */
:root{
  --primary: #0f6fff; /* main blue */
  --accent-green: #10b981; /* green accent */
  --muted-bg: #f3f6fb; /* soft light gray background */
  --card-bg: rgba(255,255,255,0.96);
  --radius: 12px;
}

/* Page background (soft gradient + subtle radial) */
.site-bg{
  background: linear-gradient(180deg, var(--muted-bg) 0%, #eef6ff 40%, #f8fbff 100%);
  min-height:100vh; position:relative; overflow: visible;
}
..site-bg::before{
  content:''; position:fixed; inset:-10% -5% auto -5%; height:380px; background: radial-gradient(circle at 10% 20%, rgba(15,111,255,0.06), transparent 20%), radial-gradient(circle at 90% 80%, rgba(16,185,129,0.03), transparent 18%); z-index:0; pointer-events:none; filter: blur(40px); opacity:.9;
}

/* Fancy form background variant (soft blue with subtle blobs) */
.fancy-bg{ background: linear-gradient(180deg,#f8fbff 0%, #eef7ff 40%, #f2f9ff 100%); min-height:100vh; position:relative; overflow: visible; }
.bg-overlay{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg-blob{ position:absolute; border-radius:50%; filter: blur(40px); opacity:.95; }
.bg-blob.b1{ width:420px; height:420px; left:-80px; top:-80px; background: radial-gradient(circle at 20% 20%, rgba(15,111,255,0.11), transparent 30%); }
.bg-blob.b2{ width:320px; height:320px; right:-60px; bottom:-40px; background: radial-gradient(circle at 80% 80%, rgba(16,185,129,0.06), transparent 30%); }
.fancy-bg > *{ position:relative; z-index:1; }

/* Ensure content sits above background */
.site-bg > * { position:relative; z-index: 1; }

/* Cards should stay white/semi-white */
.card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid rgba(2,6,23,0.04); }

/* Consistent radius and spacing */
.card, .btn, .form-control{ border-radius: calc(var(--radius) - 4px); }

/* Hero card */
.hero-card{ background: var(--card-bg); padding: 2.25rem; border-radius: calc(var(--radius) + 2px); box-shadow: 0 12px 30px rgba(2,6,23,0.06); }
.hero-card .h1{ color: #06202a; }
.hero-card .lead{ color: #374151; }

/* Light glass card for forms */
.light-card{ background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.88)); backdrop-filter: blur(6px); border: 1px solid rgba(15,23,36,0.04); box-shadow: 0 18px 40px rgba(2,6,23,0.06); border-radius: calc(var(--radius) - 2px); }
.small-help{ font-size:.92rem; color:#6b7280; }

/* Modern input styles */
.form-label{ color:#6b7280; font-weight:600; }
.input-modern{ padding:.75rem .9rem; border-radius:10px; border:1px solid rgba(15,23,36,0.06); background:#fff; box-shadow:none; transition: box-shadow .12s, transform .08s, border-color .12s; }
.input-modern:focus{ outline:none; box-shadow: 0 10px 28px rgba(47,84,235,0.08); border-color: rgba(15,23,36,0.12); transform: translateY(-1px); }
.file-preview img{ max-width:160px; max-height:120px; border-radius:8px; box-shadow: 0 6px 20px rgba(2,6,23,0.06); }
.alert{ border-radius:8px; }

/* Feature cards */
.feature-card{ background: var(--card-bg); border-radius: calc(var(--radius) - 4px); padding: 1rem; display:flex; gap: .75rem; align-items:center; box-shadow: 0 8px 20px rgba(2,6,23,0.04); }
.feature-card i{ font-size:22px; color: var(--primary); }

/* Buttons palette alignment */
.btn-primary{ background: linear-gradient(180deg, var(--primary), #3f8fff); color:#fff; border:none; }
.btn-outline-success{ border-color: rgba(16,185,129,0.12); color: var(--accent-green); background:#fff; }
.btn-primary:hover{ filter:brightness(1.03); }
.btn-outline-success:hover{ background: #f3fff8; }

/* subtle form action sizing */
.form-actions { display:flex; gap:.6rem; align-items:center; }
.form-actions .btn-lg{ padding:.6rem 1.15rem; }
.form-actions .btn-outline-secondary{ background:#fff; border:1px solid rgba(15,23,36,0.06); color:#6b7280; }
.form-actions .btn-outline-secondary:hover{ background:#f8fafc }

/* Chart color defaults (used in inline JS) */
.chart-primary{ color: var(--primary); }
.chart-accent{ color: var(--accent-green); }

/* spacing helpers */
.section-pad{ padding-top:2.5rem; padding-bottom:2.5rem; }

/* Keep tables readable on cards */
.table thead th{ color:#475569; font-weight:600 }


/* ===============================
   BACKGROUND DASHBOARD
================================ */
body.admin-dashboard-bg {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    #f8fafc 0%,
    #eef2f7 45%,
    #e2e8f0 100%
  );
  position: relative;
  overflow-x: hidden;
}

/* light blobs */
body.admin-dashboard-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(59,130,246,0.10), transparent 20%),
    radial-gradient(circle at 85% 70%, rgba(16,185,129,0.08), transparent 22%);
  pointer-events: none;
  z-index: 0;
}

/* ensure content on top */
body.admin-dashboard-bg > * {
  position: relative;
  z-index: 1;
}

/* ===============================
   NAVBAR
================================ */
.admin-navbar {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-radius: .6rem;
  padding: .35rem 1rem;
  box-shadow: 0 8px 30px rgba(3,10,30,0.12);
  position: relative; z-index: 70; margin-bottom: 1.25rem;
}

/* Site-wide improved navbar used on public pages */
.site-navbar{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: .4rem 1rem;
  box-shadow: 0 14px 40px rgba(2,6,23,0.08);
  transition: transform .12s, box-shadow .12s, background .12s;
  position: relative; z-index: 70; margin-bottom: 1.25rem;
}
.site-navbar .navbar-brand{ display:flex; gap:.6rem; align-items:center; color:var(--primary); font-weight:700; }
.site-navbar .nav-link{ color:#475569; padding:.45rem .7rem; border-radius:.5rem; transition: background .12s, color .12s, transform .08s; }
.site-navbar .nav-link:hover{ background: rgba(15,23,36,0.04); color:var(--primary); transform: translateY(-1px); }
.site-navbar .nav-link.active{ color:var(--primary); font-weight:700; position:relative; }
.site-navbar .nav-link.active::after{ content:''; position:absolute; left:15%; bottom:-6px; height:3px; width:70%; border-radius:3px; background: linear-gradient(90deg,var(--primary), var(--accent-green)); box-shadow:0 8px 20px rgba(15,23,36,0.06); }
.site-navbar .btn-outline-primary{ border:1px solid rgba(15,23,36,0.06); color:var(--primary); background:#fff; box-shadow:0 10px 0 rgba(2,6,23,0.04); }
.site-navbar .navbar-toggler{ border:none; background: rgba(2,6,23,0.03); padding:.25rem; border-radius:.45rem }
@media (max-width: 992px){ .site-navbar{ padding:.35rem .6rem } .site-navbar .brand-logo{ width:36px;height:36px } }

.admin-navbar .container{ display:flex; align-items:center; gap:1rem; }
.admin-navbar .navbar-brand{ display:flex; gap:.6rem; align-items:center; color:#06202a; font-weight:700; }
.brand-logo{ width:44px; height:44px; border-radius:8px; background:#fff; padding:4px; box-shadow:0 6px 18px rgba(2,6,23,0.08); display:inline-flex; align-items:center; justify-content:center; }
.admin-navbar .nav-link{ color:#06202a; padding:.55rem .8rem; border-radius:.5rem; transition: background .15s, color .15s, transform .08s; }
.admin-navbar .nav-link:hover{ background: rgba(14,165,169,0.06); color:#01445a; transform: translateY(-1px); }
.admin-navbar .nav-link.active{ color:#01445a; font-weight:700; position:relative; }
.admin-navbar .nav-link.active::after{ content:''; position:absolute; left:10%; bottom:-6px; height:3px; width:80%; border-radius:3px; background: linear-gradient(90deg,#0ea5a9,#60a5fa); box-shadow:0 6px 18px rgba(10,165,169,0.12); }
.admin-navbar .btn-outline-danger{ border-color: rgba(220,38,38,0.12); color: #dc2626; border-radius:.45rem; padding:.35rem .6rem }
.admin-navbar .navbar-toggler{ border: none; background: rgba(2,6,23,0.03); padding:.25rem; border-radius:.45rem }
@media (max-width: 992px){ .admin-navbar{ padding:.3rem .6rem } .brand-logo{ width:36px; height:36px } }

/* ===============================
   DASHBOARD HEADER
================================ */
.dashboard-header h3 {
  font-weight: 600;
}

.dashboard-clock {
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(37,99,235,0.08);
  color: #1d4ed8;
}

/* ===============================
   CARDS
================================ */
.card {
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

/* equal height cards */
.card-equal {
  height: 100%;
}

/* ===============================
   STAT CARDS
================================ */
.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 70%);
}

.stat-icon {
  width: 48px;
  height: 48px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.stat-green .stat-icon {
  background: linear-gradient(135deg, #059669, #10b981);
}

.stat-warn .stat-icon {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}

.stat-value {
  font-weight: 700;
}

/* ===============================
   BUTTONS (3D) 
   Modern raised buttons with hover/press states
================================ */
.btn {
  border-radius: 10px;
  font-weight: 600;
  position: relative;
  transition: transform .14s cubic-bezier(.2,.9,.2,1), box-shadow .14s, filter .12s;
  transform-style: preserve-3d;
}
.btn::after{
  content: '';
  position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; border-radius: inherit; z-index: -1;
  background: linear-gradient(180deg, rgba(2,6,23,0.10), rgba(2,6,23,0.04));
  transition: transform .14s, opacity .14s;
}
.btn:hover{ transform: translateY(-4px); }
.btn:active{ transform: translateY(1px); box-shadow: 0 6px 20px rgba(2,6,23,0.12); }
.btn:focus-visible{ outline: 3px solid rgba(14,165,169,0.12); outline-offset: 4px }

/* Primary (filled) */
.btn-primary{
  background: linear-gradient(180deg,#0ea5a9 0%, #0891b2 100%);
  color: #fff; border: none; box-shadow: 0 12px 0 rgba(6,117,121,0.12);
}
.btn-primary::after{ background: linear-gradient(180deg, rgba(6,117,121,0.16), rgba(6,117,121,0.06)); height: 12px; bottom: -12px }
..btn-primary:hover{ filter: brightness(1.04); }
.btn-primary:active{ box-shadow: 0 6px 0 rgba(6,117,121,0.12); }

/* helper 3D shadow */
.shadow-3d { box-shadow: 0 12px 0 rgba(2,6,23,0.06) !important; }
.shadow-3d:hover { box-shadow: 0 16px 0 rgba(2,6,23,0.06) !important; }

/* Outline variant (raised white with colored border) */
.btn-outline-primary{
  background: #fff; color: #0ea5a9; border:1px solid rgba(14,165,169,0.14); box-shadow: 0 10px 0 rgba(2,6,23,0.06);
}
.btn-outline-primary::after{ background: linear-gradient(180deg, rgba(2,6,23,0.06), rgba(2,6,23,0.02)); height: 10px; bottom: -10px }
.btn-outline-primary:hover{ background: #f8ffff; color:#0a8f86 }

.btn-outline-success{
  background: #fff; color:#059669; border:1px solid rgba(4,120,87,0.08); box-shadow: 0 10px 0 rgba(2,6,23,0.05);
}
.btn-outline-success::after{ height: 10px; bottom: -10px }
.btn-outline-success:hover{ background: #f3fff6; color:#047857 }

/* small button adjustments */
.btn-sm{ padding:.35rem .7rem; font-size:.9rem }
.admin-navbar .btn{ box-shadow: 0 8px 0 rgba(2,6,23,0.06); }

/* outline light / secondary 3D variants */
.btn-outline-light{ background:#fff; color:#111827; border:1px solid rgba(0,0,0,0.06); box-shadow:0 8px 0 rgba(2,6,23,0.05); }
.btn-outline-secondary{ background:#fff; color:#6b7280; border:1px solid rgba(0,0,0,0.06); box-shadow:0 8px 0 rgba(2,6,23,0.05); }

/* utility: subtle 3D disabled look */
.btn:disabled, .btn.disabled{
  transform: none; opacity: .7; box-shadow: none; }


/* ===============================
   TABLE
================================ */
.table th {
  font-weight: 600;
  color: #374151;
}

.table td {
  vertical-align: middle;
}

.table tbody tr:hover {
  background: rgba(37,99,235,0.04);
}

/* Responsive table with expandable height */
.table-responsive.custom-scroll {
  max-height: 420px;
  overflow: auto;
  transition: max-height .18s ease;
}
.table-responsive.custom-scroll.expanded {
  max-height: 800px; /* expanded view */
}

/* small helper for the expand button */
.btn-toggle-view { min-width:140px; }


/* ===============================
   CHART AREA
================================ */
.chart-wrap {
  position: relative;
  height: auto; /* allow natural resizing */
  min-height: 160px;
}

.chart-lg {
  height: auto;
  min-height: 260px;
}

.chart-side canvas {
  max-height: 160px;
}

/* Ensure modals can scroll on small screens */
.modal-dialog { max-height: calc(100vh - 120px); display:flex; align-items:flex-start; }
.modal-content { max-height: calc(100vh - 160px); overflow: auto; }

/* Add safe bottom padding for main containers to avoid fixed elements overlapping */
.container { padding-bottom: 3.5rem; }

/* ===============================
   FOOTER LINK
================================ */
a.btn-link {
  color: #6b7280;
}

a.btn-link:hover {
  color: #111827;
  text-decoration: underline;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }

  .chart-lg {
    height: 240px;
  }
}