/* ???????????????????????????????????????????????????????????????????
   site3.css  –  Cork-inspired Admin Dashboard Theme
   Deep navy dark theme with electric blue accent, compact radius,
   Nunito font, structured/corporate feel.
   ??????????????????????????????????????????????????????????????????? */

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

/* ?? Cork palette override (aligned to logo: red #DC3535 + blue #2D5284) ?? */
:root {
  --alfa-bg:         #060818;
  --alfa-border:     rgba(255, 255, 255, 0.05);
  --alfa-text:       #e0e6ed;
  --alfa-text-muted: rgba(255, 255, 255, 0.40);
  --alfa-red:        #dc3535;
  --alfa-red-soft:   rgba(220, 53, 53, 0.15);

  --c-bg:            #060818;
  --c-bg-card:       #0e1726;
  --c-bg-sidebar:    #0e1726;
  --c-border:        rgba(255, 255, 255, 0.05);
  --c-border-light:  rgba(255, 255, 255, 0.08);
  --c-text:          #e0e6ed;
  --c-text-white:    #ebedf2;
  --c-text-muted:    #888ea8;
  --c-primary:       #dc3535;
  --c-primary-rgb:   220, 53, 53;
  --c-primary-soft:  rgba(220, 53, 53, 0.15);
  --c-secondary:     #2D5284;
  --c-success:       #00ab55;
  --c-danger:        #e7515a;
  --c-warning:       #e2a03f;
  --c-info:          #2D5284;
  --c-sidebar-w:     255px;
  --c-topbar-h:      56px;
  --c-radius:        6px;
  --c-radius-md:     8px;
  --c-radius-lg:     12px;
  --c-font:          'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --c-shadow:        0 1px 4px rgba(0,0,0,0.30);
  --c-shadow-lg:     0 6px 24px rgba(0,0,0,0.40);
}

/* ?? Body ?? */
html, body {
  background: var(--c-bg) !important;
  font-family: var(--c-font) !important;
  color: var(--c-text);
}

.alfa-body::before,
.alfa-body::after {
  display: none !important;
}

/* ?? Neural canvas ?? */
#neuralCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.c-sidebar { z-index: 60; }
.c-topbar  { z-index: 50; }
.c-main    { position: relative; z-index: 1; }

/* ?? Glass panels (Cork = more solid, subtle glass) ?? */
.glass-panel {
  background: rgba(14, 23, 38, 0.55);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-shadow);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  padding: 20px;
}

/* ?? Cork sidebar glass ?? */
.c-sidebar {
  background: rgba(14, 23, 38, 0.60) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

/* ?? Cork topbar glass ?? */
.c-topbar {
  background: rgba(6, 8, 24, 0.50) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
}

/* ?? Glass cards ?? */
.stat-card,
.tarot-form-panel,
.astral-panel,
.reading-interpretation,
.reading-chat-panel,
.resonance-panel,
.designer-config,
.designer-preview,
.unified-interp,
.summary-guidance,
.card-detail-inner {
  background: rgba(14, 23, 38, 0.45) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: var(--c-radius-md) !important;
}

/* ?? Hero card ?? */
.hero-card {
  background: rgba(14, 23, 38, 0.40) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: var(--c-radius-lg) !important;
  border: 1px solid var(--c-border) !important;
}

/* ?? Glass form inputs ?? */
.tarot-field input,
.tarot-field select,
.tarot-field textarea,
input, select, textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: var(--c-radius) !important;
  font-family: var(--c-font) !important;
  color: #e2e8f0 !important;
}

/* Ensure dropdowns are readable */
select option,
.tarot-field select option {
  background: #0e1726 !important;
  color: #e2e8f0 !important;
}

select optgroup,
.tarot-field select optgroup {
  background: #060818 !important;
  color: var(--c-text-muted) !important;
  font-weight: 700;
  font-style: normal;
}

/* ?? Form focus ?? */
input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus,
.form-control:hover, .form-control:focus,
.tarot-field input:focus,
.tarot-field select:focus,
.tarot-field textarea:focus {
  border-color: var(--c-primary) !important;
  background: var(--c-primary-soft) !important;
  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.12) !important;
}

/* ?? Hover states ?? */
.alfa-menu-item:hover,
.alfa-menu-item:focus,
.zodiac-btn.selected,
.date-range-pill.active,
.login-tab.active,
.couples-tab.active {
  border-color: var(--c-primary) !important;
  background: var(--c-primary-soft) !important;
}

/* ?? Accent text ?? */
.accent,
.tarot-header h2 .accent,
.field-accent,
.tarot-field .field-accent {
  color: var(--c-primary) !important;
}

/* ?? Buttons ?? */
.tarot-btn-primary,
.hero-btn-primary {
  background: var(--c-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: var(--c-radius) !important;
  font-weight: 600 !important;
}
.tarot-btn-primary:hover,
.hero-btn-primary:hover {
  box-shadow: 0 2px 12px rgba(var(--c-primary-rgb), 0.40) !important;
  filter: brightness(1.08);
}

.tarot-btn-secondary,
.hero-btn-ghost {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: var(--c-radius) !important;
}
.tarot-btn-secondary:hover,
.hero-btn-ghost:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--c-primary) !important;
}

/* ?? Astral board ?? */
.astral-sign-card {
  border-radius: var(--c-radius-md) !important;
}
.astral-sign-card:hover {
  border-color: var(--c-primary) !important;
  background: var(--c-primary-soft) !important;
}
.astral-detail-row .big-num { color: var(--c-primary) !important; }
.astral-sign-card .sign-value { font-family: var(--c-font) !important; font-weight: 700; }
.astral-panel h2 { font-family: var(--c-font) !important; font-weight: 800; font-size: 18px !important; }
.astral-panel { border-radius: var(--c-radius-lg) !important; }

/* ?? Override all Cinzel to Nunito ?? */
.alfa-title,
.tarot-header h2,
.tarot-form-panel h3,
.features-header h2,
.activity-feed-header h3,
.hero-copy h1,
.reading-interpretation h3,
.reading-question h3,
.compat-box .compat-value,
.sign-badge .badge-info h3,
.unified-interp h4,
.designer-config h3,
.summary-guidance h3,
.stat-card .stat-value,
.card-back .card-name-overlay h4,
.astral-sign-card .sign-value,
.astral-detail-row span:last-child,
.reading-compat-bar .compat-sign .name {
  font-family: var(--c-font) !important;
  font-weight: 700 !important;
}

.tarot-header h2 {
  font-size: 26px !important;
  letter-spacing: 0.01em !important;
}

/* Hero italic gradient */
.hero-copy h1 { font-size: 46px !important; }
.hero-copy h1.italic {
background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}

/* ?? Chat ?? */
.chat-bubble.user {
  background: var(--c-primary) !important;
  border-radius: var(--c-radius-md) !important;
}
.chat-bubble.model {
  border-radius: var(--c-radius-md) !important;
}
.reading-chat-input button {
  background: var(--c-primary) !important;
  border-radius: var(--c-radius) !important;
}
.reading-chat-input button:hover {
  background: #B02A2A !important;
}

/* ?? Card detail modal ?? */
.card-detail-inner {
  background: var(--c-bg-card) !important;
  border-radius: var(--c-radius-lg) !important;
}

/* ?? Summary guidance ?? */
.summary-guidance {
  background: var(--c-primary-soft) !important;
  border-color: rgba(var(--c-primary-rgb), 0.18) !important;
  border-radius: var(--c-radius-md) !important;
}
.summary-guidance h3 { color: var(--c-primary) !important; }

/* ?? Gallery card ?? */
.gallery-card { border-radius: var(--c-radius-md) !important; }
.gallery-card:hover { border-color: rgba(var(--c-primary-rgb), 0.30) !important; }

/* ?? Glow ?? */
.glow-green { box-shadow: var(--c-shadow), 0 0 14px rgba(0,171,85,0.10) !important; }
.glow-blue  { box-shadow: var(--c-shadow), 0 0 14px rgba(45,82,132,0.10) !important; }
.glow-amber { box-shadow: var(--c-shadow), 0 0 14px rgba(226,160,63,0.10) !important; }
.glow-red   { box-shadow: var(--c-shadow), 0 0 14px rgba(231,81,90,0.10) !important; }

/* ?? Tarot form ?? */
.tarot-form-panel {
  border-radius: var(--c-radius-lg) !important;
  padding: 24px !important;
}
.tarot-form-panel h3 {
  font-size: 20px !important;
  margin-bottom: 18px !important;
}
.tarot-form-panel h3 .italic { color: var(--c-primary) !important; }

/* ?? Tarot fields compact ?? */
.tarot-field {
  margin-bottom: 12px !important;
}
.tarot-field label {
  font-size: 11px !important;
  color: var(--c-text-muted) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}
.tarot-field input,
.tarot-field select,
.tarot-field textarea {
  padding: 10px 14px !important;
  border-radius: var(--c-radius) !important;
  font-size: 13px !important;
}

/* ?? Autocomplete ?? */
.tarot-autocomplete {
  border-radius: var(--c-radius) !important;
  background: rgba(14, 23, 38, 0.95) !important;
}

/* ?? Login ?? */
.login-tab { border-radius: var(--c-radius) !important; }
.login-tab.active { background: var(--c-primary) !important; color: #fff !important; }

/* ?? Card flip compact radius ?? */
.card-front, .card-back { border-radius: var(--c-radius-md) !important; }

/* ?? Zodiac compact ?? */
.zodiac-btn { border-radius: var(--c-radius-md) !important; }
.zodiac-btn.selected {
  border-color: var(--c-primary) !important;
  background: var(--c-primary-soft) !important;
  box-shadow: 0 0 12px rgba(var(--c-primary-rgb), 0.15) !important;
}

/* ?? Date range ?? */
.date-range-pill { border-radius: var(--c-radius) !important; }
.date-range-pill.active {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

/* ?? Admin table ?? */
.admin-row:hover {
  background: rgba(220, 53, 53, 0.04) !important;
}
.admin-action-btn {
  border-radius: var(--c-radius) !important;
}
.admin-action-btn:hover {
  background: var(--c-primary-soft) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}
.admin-action-danger:hover {
  background: rgba(231,81,90,0.08) !important;
  border-color: rgba(231,81,90,0.30) !important;
  color: var(--c-danger) !important;
}

/* ???????????????????????????????????????????????????????
   CORK LAYOUT — Persistent sidebar + compact topbar
   ??????????????????????????????????????????????????????? */

/* ?? Topbar ?? */
.c-topbar {
  position: fixed;
  top: 0;
  left: var(--c-sidebar-w);
  right: 0;
  height: var(--c-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(6, 8, 24, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
  z-index: 50;
  transition: left 0.25s ease;
}

.c-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.c-hamburger {
  width: 34px;
  height: 34px;
  border-radius: var(--c-radius);
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.c-hamburger img { width: 18px; height: 18px; filter: brightness(0) invert(1); opacity: 0.5; }
.c-hamburger:hover { background: rgba(255,255,255,0.06); }
.c-hamburger:hover img { opacity: 0.8; }

/* Topbar search */
.c-topbar-search {
  position: relative;
  width: 260px;
}
.c-topbar-search input {
  width: 100%;
  padding: 8px 12px 8px 36px !important;
  border-radius: var(--c-radius) !important;
  border: 1px solid var(--c-border) !important;
  background: rgba(255,255,255,0.04) !important;
  font-size: 12px !important;
  color: var(--c-text) !important;
}
.c-topbar-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--c-text-muted);
  pointer-events: none;
}

.c-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-topbar-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  position: relative;
}
.c-topbar-icon:hover { background: rgba(255,255,255,0.06); color: var(--c-text); }
.c-topbar-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
}

.c-language-select {
  padding: 5px 10px;
  border-radius: var(--c-radius);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid var(--c-border);
  outline: none;
  cursor: pointer;
  font-family: var(--c-font);
}
.c-language-select:hover { border-color: var(--c-primary); color: var(--c-text); }

.c-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--c-primary);
  background: var(--c-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  overflow: hidden;
}

.c-user-avatar:hover {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 0 14px rgba(var(--c-primary-rgb), 0.30);
}

/* ?? Sidebar ?? */
.c-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--c-sidebar-w);
  height: 100vh;
  background: var(--c-bg-sidebar);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  z-index: 60;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.25s ease;
}

.c-sidebar::-webkit-scrollbar { width: 3px; }
.c-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }

/* Sidebar brand */
.c-brand {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--c-topbar-h);
  border-bottom: 1px solid var(--c-border);
}

.c-brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(220,53,53,0.35));
}

.c-brand-text {
  display: flex;
  flex-direction: column;
}
.c-brand-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  font-family: var(--c-font);
}
.c-brand-sub {
  font-size: 9px;
  color: var(--c-text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 1px;
  font-weight: 600;
}

/* Sidebar menu */
.c-menu {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.c-menu-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: 18px 14px 6px;
}

.c-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--c-radius);
  color: var(--c-text-muted);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.12s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  text-decoration: none;
  width: 100%;
  position: relative;
}
.c-menu-item:hover {
  background: rgba(220, 53, 53, 0.06);
  color: var(--c-text);
}
.c-menu-item.active {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}
.c-menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--c-primary);
}

.c-menu-item img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  opacity: 0.40;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.c-menu-item:hover img { opacity: 0.65; }
.c-menu-item.active img { opacity: 0.80; filter: brightness(0) invert(0.6) sepia(1) hue-rotate(330deg) saturate(5); }

.c-menu-icon {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  opacity: 0.40;
}
.c-menu-item:hover .c-menu-icon { opacity: 0.65; }
.c-menu-item.active .c-menu-icon { opacity: 1; }

/* Submenu */
.c-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.c-chevron {
  font-size: 9px;
  transition: transform 0.2s ease;
  opacity: 0.3;
}
.c-submenu-toggle.open .c-chevron { transform: rotate(90deg); opacity: 0.6; }

.c-submenu {
  display: none;
  padding-left: 28px;
  margin-top: 1px;
}
.c-submenu.open { display: flex; flex-direction: column; gap: 0; }

.c-submenu .c-menu-item {
  font-size: 12px;
  padding: 7px 14px;
  font-weight: 500;
  position: relative;
}
.c-submenu .c-menu-item::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-border-light);
  transform: translateY(-50%);
}
.c-submenu .c-menu-item.active::after {
  background: var(--c-primary);
}
.c-submenu .c-menu-item.active::before { display: none; }

/* Sidebar footer */
.c-sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--c-border);
  margin-top: auto;
}

.c-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--c-radius);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid var(--c-border);
  transition: all 0.15s ease;
  text-decoration: none;
  font-family: var(--c-font);
}
.c-logout:hover {
  color: var(--c-danger);
  background: rgba(231,81,90,0.06);
  border-color: rgba(231,81,90,0.20);
}

/* ?? Main content ?? */
.c-layout {
  display: flex;
  min-height: 100vh;
}

.c-main {
  flex: 1;
  margin-left: var(--c-sidebar-w);
  padding-top: var(--c-topbar-h);
  transition: margin-left 0.25s ease;
}

.c-content {
  padding: 20px;
  width: 80%;
  max-width: none;
  margin: 0 auto;
  min-height: calc(100vh - var(--c-topbar-h) - 50px);
}

.c-footer {
  padding: 14px 20px;
  font-size: 12px;
  color: var(--c-text-muted);
  text-align: center;
  border-top: 1px solid var(--c-border);
  font-weight: 600;
}

/* ?? Responsive ?? */
@media (max-width: 1024px) {
  .c-sidebar { transform: translateX(-100%); }
  .c-sidebar-open .c-sidebar { transform: translateX(0); }
  .c-topbar { left: 0; }
  .c-main { margin-left: 0; }
}

/* ?? Desktop sidebar collapse ?? */
.c-sidebar-collapsed .c-sidebar {
  transform: translateX(-100%);
}
.c-sidebar-collapsed .c-topbar {
  left: 0;
}
.c-sidebar-collapsed .c-main {
  margin-left: 0;
}

@media (max-width: 640px) {
  .c-content { padding: 14px; }
  .c-topbar-search { display: none; }
}

/* Hide original layout elements */
.c-sidebar .alfa-brand-wrap,
.c-sidebar .alfa-title,
.c-sidebar .alfa-subtitle-wrap { display: none; }

.pb-3 { padding-bottom: 1rem; }

/* ?? Variable mapping for existing components ?? */
.c-main {
  --alfa-bg: var(--c-bg);
  --alfa-border: var(--c-border);
  --alfa-text: var(--c-text);
  --alfa-text-muted: var(--c-text-muted);
  --alfa-red: var(--c-primary);
  --alfa-red-soft: var(--c-primary-soft);
}