/* TDC TECH — Main Stylesheet */
:root {
  --cyan: #00f2ff;
  --gold: #f5c518;
  --dark: #0a0d14;
  --surface: #111622;
  --surface-light: #171d2e;
  --border: rgba(255,255,255,0.08);
  --text: #ffffff;
  --muted: rgba(255,255,255,0.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--dark);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,242,255,0.3); }

/* Sidebar active state on desktop */
@media (min-width: 1024px) {
  #sidebar { transform: translateX(0) !important; }
  #pageWrapper { padding-left: 256px; }
  #hamburgerBtn { display: none; }
  #sidebarOverlay { display: none !important; }
}

/* Stat card glow */
.stat-card { transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-2px); }
.stat-card.cyan { box-shadow: 0 0 30px rgba(0,242,255,0.08); }
.stat-card.gold  { box-shadow: 0 0 30px rgba(245,197,24,0.08); }
.stat-card.purple{ box-shadow: 0 0 30px rgba(168,85,247,0.08); }
.stat-card.green { box-shadow: 0 0 30px rgba(34,197,94,0.08); }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* Gradient border trick */
.grad-border {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(135deg, rgba(0,242,255,0.4), rgba(245,197,24,0.2)) border-box;
}

/* Buttons */
.btn-primary {
  background: var(--cyan);
  color: #000;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  font-family: 'Outfit', sans-serif;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-gold {
  background: var(--gold);
  color: #000;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-gold:hover { opacity: 0.9; }

.btn-outline {
  background: transparent;
  color: var(--cyan);
  border: 1px solid rgba(0,242,255,0.3);
  padding: 10px 24px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}
.btn-outline:hover { background: rgba(0,242,255,0.08); }

/* Input */
.form-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #fff;
  padding: 10px 14px;
  width: 100%;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  transition: border-color 0.2s;
}
.form-input:focus { outline: none; border-color: rgba(0,242,255,0.4); }
.form-input::placeholder { color: rgba(255,255,255,0.3); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}
.badge-pending    { background: rgba(245,197,24,0.15); color: var(--gold); }
.badge-completed  { background: rgba(34,197,94,0.15);  color: #22c55e; }
.badge-processing { background: rgba(0,242,255,0.15);  color: var(--cyan); }
.badge-cancelled  { background: rgba(239,68,68,0.15);  color: #ef4444; }
.badge-failed     { background: rgba(239,68,68,0.1);   color: #f87171; }
.badge-partial    { background: rgba(249,115,22,0.15); color: #f97316; }
.badge-waiting    { background: rgba(168,85,247,0.15); color: #a855f7; }
.badge-active     { background: rgba(34,197,94,0.15);  color: #22c55e; }
.badge-inactive   { background: rgba(100,116,139,0.2); color: #94a3b8; }

/* Alert flash */
.flash-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; border-radius: 12px; padding: 12px 16px; }
.flash-error   { background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.3);  color: #ef4444; border-radius: 12px; padding: 12px 16px; }
.flash-info    { background: rgba(0,242,255,0.08); border: 1px solid rgba(0,242,255,0.2);  color: var(--cyan); border-radius: 12px; padding: 12px 16px; }

/* Table */
.tdc-table { width: 100%; border-collapse: collapse; }
.tdc-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.tdc-table td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px; vertical-align: middle; }
.tdc-table tr:last-child td { border-bottom: none; }
.tdc-table tr:hover td { background: rgba(255,255,255,0.02); }

/* Service cards */
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,242,255,0.25);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* Gradient text */
.text-gradient { background: linear-gradient(135deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Landing hero */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; }

/* Animation */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.animate-in { animation: fadeIn 0.35s ease forwards; }

@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(0,242,255,0); } 50% { box-shadow: 0 0 20px 4px rgba(0,242,255,0.15); } }
.pulse-glow { animation: pulse-glow 2.5s infinite; }

/* ═══════════════════════════════════════════════
   ADMIN FULL-SCREEN LAYOUT
   Body fills viewport, main content scrolls inside
═══════════════════════════════════════════════ */
body:has(.admin-main) {
  height: 100vh;
  overflow: hidden;
}
body:has(.admin-main) > div {
  height: 100vh;
  overflow: hidden;
}
.admin-main {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sticky table headers inside scrollable cards */
.tdc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Scrollable table wrapper — caps height to viewport */
.admin-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 17rem);
}