/* ============================================
   THE SOVEREIGN ECONOMY — Platform Styles
   Coffee Palette — Feb 24, 2026
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
  /* Coffee Palette */
  --linen: #F5F1EA;
  --latte: #F3E9D7;
  --khaki: #D7C9B8;
  --cappuccino: #D6BFA6;
  --camel: #B2967D;
  --caramel: #B08968;
  --cocoa: #7D5A44;
  --mocha: #7A553A;
  --espresso: #3B2A22;
  --gold: #C49A3C;
  --card-bg: #FEFCF9;

  /* Legacy aliases (keep for app.html compatibility) */
  --brown: #3B2A22;
  --cream: #F3E9D7;
  --parch: #F5F1EA;
  --parch-deep: #D7C9B8;
  --parch-warm: #D6BFA6;
  --ink: #3B2A22;
  --ink-soft: #7D5A44;
  --ink-muted: #7A553A;
  --cream-soft: #D6BFA6;
  --cream-faded: #B2967D;

  /* Accents */
  --sage: #4A6E4A;
  --copper: #B06830;

  /* Sizing */
  --sidebar-w: 220px;
  --topbar-h: 54px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: var(--linen);
  color: var(--espresso);
  min-height: 100vh;
}

/* ---- LAYOUT ---- */
.app-layout { display: flex; min-height: 100vh; }

/* ---- SIDEBAR ---- */
.sidebar {
  width: var(--sidebar-w);
  background: var(--linen);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  flex-shrink: 0; z-index: 50;
  border-right: 1px solid var(--khaki);
}

.sidebar-logo {
  padding: 28px 22px 24px;
  border-bottom: 1px solid var(--khaki);
  background: var(--latte);
}
.sidebar-logo .the {
  font: 600 9px/1 'Raleway', sans-serif; letter-spacing: 3.5px;
  text-transform: uppercase; color: var(--caramel); margin-bottom: 3px;
}
.sidebar-logo .name {
  font: 600 17px/1.25 'Cinzel', serif; color: var(--espresso); letter-spacing: 1px;
}

.sidebar-profile {
  padding: 16px 22px; border-bottom: 1px solid var(--khaki);
  display: flex; gap: 10px; align-items: center;
}
.sidebar-profile .user-name { font: 500 13px/1.3 'Raleway', sans-serif; color: var(--espresso); }
.sidebar-profile .user-tier { font: 600 10px/1 'Raleway', sans-serif; color: var(--caramel); margin-top: 2px; letter-spacing: 1px; }

/* Nav */
.sidebar-nav { padding: 16px 8px; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  background: transparent; border: none; padding: 9px 18px; border-radius: 6px;
  display: flex; align-items: center; width: 100%; color: var(--espresso);
  cursor: pointer; font: 400 13px/1 'Raleway', sans-serif; text-align: left; transition: all 0.15s;
}
.nav-item:hover { color: var(--caramel); background: rgba(176,137,104,0.08); }
.nav-item.active { color: var(--espresso); background: rgba(176,137,104,0.12); font-weight: 600; }
.nav-item .count {
  margin-left: auto; background: var(--caramel); color: white;
  font-size: 8px; padding: 1px 6px; border-radius: 8px; font-weight: 700;
}

.sidebar-businesses { padding: 12px 18px; border-top: 1px solid var(--khaki); }
.sidebar-businesses .label {
  font: 600 9px/1 'Raleway', sans-serif; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--mocha); margin-bottom: 8px;
}
.sidebar-businesses .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.biz-tag {
  font: 600 9px/1 'Raleway', sans-serif; padding: 3px 9px; border-radius: 4px;
  background: rgba(178,150,125,0.12); color: var(--cocoa); border: 1px solid var(--khaki);
}

/* ---- MAIN ---- */
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Top bar */
.topbar {
  height: var(--topbar-h); background: var(--latte); border-bottom: 1px solid var(--khaki);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  position: sticky; top: 0; z-index: 40;
}
.topbar-title { font: 600 17px/1 'Cinzel', serif; color: var(--mocha); letter-spacing: 0.5px; }
.topbar-search {
  padding: 6px 16px; background: var(--linen); border-radius: 20px;
  border: 1px solid var(--khaki); font: 400 12px/1 'Raleway', sans-serif;
  color: var(--mocha); cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.topbar-bell { position: relative; cursor: pointer; font-size: 16px; }
.topbar-bell .dot {
  position: absolute; top: -4px; right: -6px; background: var(--caramel);
  width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font: 700 8px/1 'Raleway', sans-serif; color: white;
}

/* Page content area */
.page-content { padding: 24px 28px; max-width: 1100px; }
.page-grid { display: grid; grid-template-columns: 1fr 290px; gap: 22px; }

/* ---- COMPONENTS ---- */

/* Avatar */
.avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 'Cormorant Garamond', serif; flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; font-size: 11px; }
.avatar-md { width: 38px; height: 38px; font-size: 13px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-dark { background: var(--espresso); color: var(--cappuccino); }
.avatar-light { background: var(--cocoa); color: var(--latte); }
.avatar-caramel { background: var(--caramel); color: white; }

/* Badge */
.badge {
  font: 600 9px/1 'Raleway', sans-serif; padding: 2px 8px; border-radius: 4px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.badge-default { background: rgba(122,85,58,0.08); color: var(--mocha); }
.badge-business { background: rgba(176,104,48,0.1); color: var(--copper); }
.badge-success { background: rgba(74,110,74,0.1); color: var(--sage); }

/* Cards */
.card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--khaki); }
.card-brown { background: var(--espresso); border-radius: 8px; color: var(--latte); }

/* Welcome banner */
.welcome-banner { background: var(--espresso); border-radius: 8px; padding: 22px 28px; margin-bottom: 22px; }
.welcome-title { font: 600 22px/1.2 'Cinzel', serif; color: var(--latte); margin-bottom: 4px; }
.welcome-sub { font: italic 400 14px/1.5 'Cormorant Garamond', serif; color: var(--cappuccino); }

/* Stat cards */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--card-bg); border-radius: 8px; padding: 16px 18px; border: 1px solid var(--khaki); }
.stat-label { font: 600 10px/1 'Raleway', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mocha); margin-bottom: 6px; }
.stat-value { font: 600 28px/1 'Cormorant Garamond', serif; color: var(--espresso); }
.stat-sub { font: 500 11px/1 'Raleway', sans-serif; color: var(--sage); margin-top: 4px; }

/* Section labels */
.section-label { font: 700 10px/1 'Raleway', sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cocoa); }
.section-sub { font: italic 400 12px/1.4 'Cormorant Garamond', serif; color: var(--mocha); margin-top: 2px; }
.section-header { margin-bottom: 12px; }

/* Post cards */
.post-card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--khaki); margin-bottom: 12px; overflow: hidden; }
.post-header { padding: 14px 18px 0; display: flex; gap: 10px; }
.post-author { font: 600 14px/1.3 'Cormorant Garamond', serif; color: var(--espresso); }
.post-role { font: 400 11px/1 'Raleway', sans-serif; color: var(--mocha); }
.post-time { font: 400 10px/1 'Raleway', sans-serif; color: var(--camel); margin-top: 3px; }
.post-body { padding: 10px 18px 14px; font: 400 15px/1.7 'Cormorant Garamond', serif; color: var(--cocoa); }
.post-actions { padding: 10px 18px 12px; display: flex; gap: 18px; border-top: 1px solid var(--khaki); }
.post-action { background: none; border: none; font: 400 12px/1 'Raleway', sans-serif; color: var(--camel); cursor: pointer; padding: 0; }
.post-action:hover { color: var(--caramel); }

/* Match cards */
.match-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--khaki); }
.match-row:last-child { border-bottom: none; }
.match-name { font: 600 12px/1.3 'Cormorant Garamond', serif; color: var(--espresso); }
.match-role { font: 400 10px/1 'Raleway', sans-serif; color: var(--mocha); }
.match-reason { font: 600 10px/1.2 'Raleway', sans-serif; color: var(--cocoa); margin-top: 1px; }

/* Buttons */
.btn-brown, .btn-caramel {
  background: var(--caramel); color: white; border: none; padding: 5px 12px;
  border-radius: 5px; font: 600 10px/1 'Raleway', sans-serif; cursor: pointer; transition: opacity 0.15s;
}
.btn-brown:hover, .btn-caramel:hover { opacity: 0.88; }
.btn-cream {
  background: var(--latte); color: var(--espresso); border: none; padding: 7px 18px;
  border-radius: 5px; font: 600 10px/1 'Raleway', sans-serif; cursor: pointer;
}

/* Progress bars */
.progress-track { flex: 1; height: 4px; background: var(--khaki); border-radius: 2px; }
.progress-fill { height: 100%; background: var(--caramel); border-radius: 2px; transition: width 0.4s ease; }

/* Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.text-right { text-align: right; }
.flex-wrap { flex-wrap: wrap; }
.ml-auto { margin-left: auto; }

/* Hide modules by default */
.module { display: none; }
.module.active { display: block; }

/* Loading state */
.loading-placeholder {
  background: linear-gradient(90deg, var(--khaki) 25%, var(--linen) 50%, var(--khaki) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; height: 20px; margin-bottom: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Responsive */
@media (max-width: 1024px) { .page-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .sidebar { display: none; } .page-content { padding: 16px; } }