/* ==========================================================================
   MyEvent Demo — Admin design system
   --------------------------------------------------------------------------
   Loaded LAST in every page's <head>, after Bootstrap and after each page's
   own inline <style> block, so equal-specificity rules win on source order and
   the nine pages share one visual language without their markup changing.

   Only presentation lives here. No selectors depend on JS hooks, so restyling
   cannot break behaviour.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ------------------------------------------------------------------
     Single-hue system. Everything brand-related is one blue (hue ~210)
     at different lightness — no second accent colour competing with it.
     Mirrors the mobile app's colorcode1/2/3 so both surfaces match.
     ------------------------------------------------------------------ */
  --brand-900: #0B1F35;
  --brand-800: #0E2A47;
  --brand-700: #16385D;
  --brand-600: #1D4A78;
  --brand-500: #2A6294;
  --brand-400: #4E85B5;
  --brand-300: #8FB3D1;
  --brand-200: #C4D8E8;
  --brand-100: #E4EDF5;
  --brand-50:  #F3F7FB;

  /* Semantic aliases so component rules read clearly */
  --ink:        var(--brand-800);
  --ink-soft:   var(--brand-700);
  --accent:     var(--brand-600);
  --accent-hi:  var(--brand-500);

  --bg:         #F4F7FA;
  --surface:    #FFFFFF;
  --border:     #DFE7F0;
  --text:       #16283D;
  --text-muted: #64748B;

  /* Status colours stay distinguishable but desaturated, so they read as
     state rather than as a second brand colour. */
  --ok:    #2F6B4F;
  --warn:  #8A6218;
  --err:   #9B3B34;
  --info:  var(--brand-600);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.04);
  --shadow-lg: 0 12px 20px -4px rgba(16,24,40,.10), 0 4px 8px -4px rgba(16,24,40,.05);

  --sidebar-w: 260px;
}

/* ---------- base ---------- */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

::selection { background: rgba(29,74,120,.28); }

/* Scrollbars — quiet, not default-chunky */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brand-200); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-300); }

/* ---------- shell ---------- */

.admin-container { background: var(--bg); }

.sidebar {
  width: var(--sidebar-w) !important;
  background: linear-gradient(180deg, var(--ink) 0%, var(--brand-900) 100%) !important;
  border-right: none !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.04);
  padding: 0 !important;
}

.sidebar-header {
  padding: 26px 22px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  margin-bottom: 14px !important;
}

.sidebar-header h2 {
  color: #fff !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.02em;
}

.sidebar-header p {
  color: rgba(255,255,255,.55) !important;
  font-size: .78rem !important;
  margin: 0 0 12px !important;
}

.admin-badge {
  display: inline-block;
  background: rgba(143,179,209,.22) !important;
  color: var(--brand-300) !important;
  border: 1px solid rgba(143,179,209,.22);
  border-radius: 99px !important;
  padding: 3px 11px !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav-menu { padding: 0 12px; }

.nav-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.72) !important;
  padding: 11px 14px !important;
  margin-bottom: 3px;
  border-radius: var(--r-sm) !important;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
  border-left: none !important;
}

.nav-item i { width: 18px; text-align: center; font-size: .95rem; opacity: .9; }

.nav-item:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }

.nav-item.active {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(29,74,120,.28);
}

.main-content {
  background: var(--bg) !important;
  padding: 32px 36px !important;
}

/* ---------- page header ---------- */

.main-content > h1,
.main-content > .page-title,
.page-header h1 {
  font-size: 1.6rem !important;
  margin-bottom: 4px !important;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 14px 6px 6px;
  box-shadow: var(--shadow-sm);
  font-size: .88rem;
  font-weight: 500;
}

/* ---------- cards ---------- */

.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--brand-200) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 20px 20px 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.card-icon {
  width: 40px; height: 40px;
  min-width: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md) !important;
  color: #fff !important;
  font-size: 1rem;
  background: var(--accent) !important;
  box-shadow: 0 2px 6px rgba(29,74,120,.28);
}

/* Keep the per-card accent colours the markup already sets, but harmonise them */
.card-icon.theme    { background: var(--brand-500) !important; box-shadow: 0 2px 6px rgba(42,98,148,.3); }
.card-icon.users    { background: var(--accent) !important; }
.card-icon.sponsors { background: var(--brand-300) !important; box-shadow: 0 2px 6px rgba(143,179,209,.22); }
.card-icon.sessions { background: var(--brand-700) !important; box-shadow: 0 2px 6px rgba(22,56,93,.3); }

.card-body {
  padding: 12px 20px 16px !important;
  color: var(--text-muted);
  font-size: .89rem;
  line-height: 1.55;
}

.card-footer {
  background: transparent !important;
  border-top: none !important;
  padding: 0 20px 20px !important;
  display: flex;
  justify-content: flex-end;
}

.card-btn {
  background: var(--ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 18px !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  transition: background .16s ease, transform .12s ease;
}

.card-btn:hover { background: var(--accent) !important; transform: translateY(-1px); }

/* ---------- buttons ---------- */

.btn {
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  font-size: .875rem !important;
  padding: 8px 16px !important;
  transition: filter .16s ease, transform .12s ease, box-shadow .16s ease;
  border-width: 1px !important;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 1px 2px rgba(29,74,120,.28);
}
.btn-primary:hover { background: var(--accent-hi) !important; border-color: var(--accent-hi) !important; }

/* Non-destructive actions stay on the brand hue so the UI reads as one colour.
   Only genuinely destructive actions get a distinct colour — that difference is
   a safety affordance, not decoration. */
.btn-success { background: var(--accent) !important; border-color: var(--accent) !important; }
.btn-success:hover { background: var(--accent-hi) !important; border-color: var(--accent-hi) !important; }
.btn-danger  { background: var(--err) !important; border-color: var(--err) !important; }
.btn-warning { background: var(--brand-300) !important; border-color: var(--brand-300) !important; color: #FFFFFF !important; }
.btn-secondary { background: var(--brand-100) !important; border-color: var(--brand-100) !important; color: var(--text) !important; }

.btn-outline-primary { color: var(--accent) !important; border-color: var(--brand-200) !important; }
.btn-outline-primary:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

.btn-sm { padding: 5px 12px !important; font-size: .8rem !important; }

/* ---------- tables ---------- */

.table {
  --bs-table-bg: transparent;
  border-collapse: separate !important;
  border-spacing: 0;
  font-size: .885rem;
  margin-bottom: 0 !important;
}

.table thead th {
  background: var(--brand-50) !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  font-size: .74rem !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  padding: 12px 16px !important;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table tbody td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--brand-100) !important;
  border-top: none !important;
  vertical-align: middle !important;
  color: var(--text);
}

.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--brand-50) !important; }
.table tbody tr:last-child td { border-bottom: none !important; }

/* Wrap tables in a card-like surface even when the markup doesn't */
.table-responsive {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}

/* ---------- badges ---------- */

.badge {
  font-weight: 600 !important;
  font-size: .7rem !important;
  letter-spacing: .03em;
  padding: 5px 10px !important;
  border-radius: 99px !important;
}

.badge.bg-primary { background: rgba(29,74,120,.12) !important; color: var(--info) !important; }
.badge.bg-success { background: rgba(47,107,79,.12) !important; color: var(--ok) !important; }
.badge.bg-danger  { background: rgba(155,59,52,.12) !important; color: var(--err) !important; }
.badge.bg-warning { background: rgba(138,98,24,.12) !important; color: var(--warn) !important; }
.badge.bg-secondary { background: var(--brand-100) !important; color: var(--text-muted) !important; }

/* ---------- forms ---------- */

.form-control, .form-select {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 13px !important;
  font-size: .89rem !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(29,74,120,.28) !important;
  outline: none !important;
}

.form-control::placeholder { color: var(--brand-300) !important; }

.form-label {
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 5px !important;
}

.input-group-text {
  background: var(--brand-50) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: var(--r-sm) !important;
}

/* ---------- tabs ---------- */

.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
  gap: 2px;
}

.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  font-size: .89rem !important;
  padding: 10px 16px !important;
  transition: color .16s ease, border-color .16s ease;
}

.nav-tabs .nav-link:hover { color: var(--ink) !important; }

.nav-tabs .nav-link.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* ---------- modals ---------- */

.modal-content {
  border: none !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 24px 48px -12px rgba(16,24,40,.24) !important;
}

.modal-header { border-bottom: 1px solid var(--border) !important; padding: 18px 22px !important; }
.modal-title  { font-size: 1.05rem !important; font-weight: 600 !important; }
.modal-body   { padding: 22px !important; }
.modal-footer { border-top: 1px solid var(--border) !important; padding: 14px 22px !important; }

/* ---------- brand wordmark ---------- */

.brand-wordmark {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
}

.brand-wordmark span {
  font-weight: 400;
  opacity: .7;
  margin-left: 5px;
}

/* ---------- login page ---------- */

body.login-page {
  background: linear-gradient(140deg, var(--ink) 0%, var(--brand-800) 55%, var(--brand-700) 160%) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* .login-container is the CARD, not the page wrapper — keep it light. */
.login-container {
  background: var(--surface) !important;
  width: 100%;
  max-width: 420px !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.4) !important;
  border: none !important;
  overflow: hidden;
  padding: 0 !important;
}

.login-container .header {
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 130%) !important;
  padding: 32px 28px 26px !important;
  text-align: center;
  margin: 0 !important;
  border-radius: 0 !important;
}

.login-container form,
.login-container > *:not(.header) { padding-left: 28px; padding-right: 28px; }

.login-container > *:last-child { padding-bottom: 28px; }

.login-container .form-control { background: var(--brand-50) !important; }

.login-container .login-btn,
#loginBtn,
.login-container button[type="submit"],
.login-container .btn {
  width: 100%;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  padding: 11px !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
}

/* ---------- utility ---------- */

.text-muted { color: var(--text-muted) !important; }

hr { border-color: var(--border) !important; opacity: 1 !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* ---------- responsive ---------- */

@media (max-width: 992px) {
  :root { --sidebar-w: 220px; }
  .main-content { padding: 24px 20px !important; }
}

@media (max-width: 768px) {
  .sidebar { width: 100% !important; height: auto !important; position: static !important; }
  .admin-container { display: block !important; }
  .nav-menu { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav-item { flex: 1 1 auto; justify-content: center; }
  .main-content { padding: 18px 14px !important; }
  .table thead th, .table tbody td { padding: 10px 12px !important; }
}