/**
 * =========================================================
 * SHELL.CSS — Shared layout + component styles
 * =========================================================
 *
 * This file contains ALL shared styles for the Ethan app.
 * Page-specific styles go inside each page's <style> block.
 *
 * SECTIONS:
 *   1. Reset + Base — body, typography, colors
 *   2. Layout — app-shell, sidebar, main content area
 *   3. Sidebar — nav links, logo, active states, icons
 *   4. Login Gate — password overlay
 *   5. Mobile — hamburger menu, responsive breakpoints
 *   6. Components — panels, cards, badges, buttons
 *   7. Dashboard — billing hero, card grid, pulse strip
 *   8. Forms — inputs, selects, settings controls
 *   9. Lists — task items, pipeline items, inbox accordion
 *  10. Social — platform icons, badges
 *  11. Chat — SMS bubbles
 *
 * BRAND COLORS (canonical, do not drift):
 *   Dark Base:   #0E1319
 *   Dark Gray:   #8C8C8C
 *   Medium Gray: #B5B5B5
 *   Light Gray:  #D9D9D9
 *   Off-White:   #EDEDEE
 *   Ecto Green:  #A8F06A  (primary accent)
 *   Orange:      #F9A03F  (secondary accent)
 *   Purple:      #8B2FE8  (secondary accent)
 *   Cyan:        #00FFFF  (secondary accent)
 *
 * ========================================================= */


/* ---------------------------------------------------------
   1. RESET + BASE
   --------------------------------------------------------- */

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

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

body {
  background: #0E1319;
  color: #F2F2F2;
  font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}


/* ---------------------------------------------------------
   2. LAYOUT
   --------------------------------------------------------- */

.app-shell {
  display: flex;
  height: 100vh;
}

.main {
  flex: 1;
  overflow-y: auto;
  /* Extra bottom padding so the floating chat bubble in the lower-right
     never obscures the end of a page's live content (metrics, tables, etc). */
  padding: 32px 40px 120px;
}

.page-content { }


/* ---------------------------------------------------------
   3. SIDEBAR
   --------------------------------------------------------- */

.sidebar {
  width: 220px;
  background: #0A0E14;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-logo {
  display: block;
  width: 100px;
  height: 37px;
  margin-top: 14px;
  margin-bottom: 24px;
  margin-left: 12px;
  background-color: #D9D8D6;
  -webkit-mask-image: url(branding/ghost_logo.svg);
  mask-image: url(branding/ghost_logo.svg);
  font-size: 0;
  overflow: hidden;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #D9D8D6;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s;
}

.sidebar-nav a:hover { background: rgba(255,255,255,0.04); }
.sidebar-nav a.active { background: rgba(255,255,255,0.08); color: #F2F2F2; }

/* Nav icon masks — each link uses an SVG mask for its icon */
.sidebar-nav .nav-icon {
  width: 19px;
  height: 19px;
  background-color: #9F9FA0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  opacity: 0.85;
}

.sidebar-nav a[data-page="social"] .nav-icon { position: relative; top: -1px; }
.sidebar-nav a.active .nav-icon { opacity: 1; }

/* Active icon colors — one per tab */
.sidebar-nav a.active[data-page="dashboard"] .nav-icon { background-color: #A8F06A; }
.sidebar-nav a.active[data-page="chat"] .nav-icon      { background-color: #00FFFF; }
.sidebar-nav a.active[data-page="inbox"] .nav-icon     { background-color: #8B2FE8; }
.sidebar-nav a.active[data-page="calendar"] .nav-icon  { background-color: #F9A03F; }
.sidebar-nav a.active[data-page="pipeline"] .nav-icon  { background-color: #A8F06A; }
.sidebar-nav a.active[data-page="tasks"] .nav-icon     { background-color: #00FFFF; }
.sidebar-nav a.active[data-page="social"] .nav-icon    { background-color: #8B2FE8; }
.sidebar-nav a.active[data-page="traffic"] .nav-icon   { background-color: #F9A03F; }
.sidebar-nav a.active[data-page="googleads"] .nav-icon { background-color: #00FFFF; }
.sidebar-nav a.active[data-page="sms"] .nav-icon       { background-color: #A8F06A; }
.sidebar-nav a.active[data-page="guide"] .nav-icon     { background-color: #00FFFF; }
.sidebar-nav a.active[data-page="settings"] .nav-icon  { background-color: #8B2FE8; }


/* ---------------------------------------------------------
   4. LOGIN GATE
   --------------------------------------------------------- */

.login-gate {
  position: fixed;
  inset: 0;
  background: #0A0E14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-gate.hidden { display: none; }

.login-gate h2 {
  font-size: 24px;
  font-weight: 300;
  color: #D9D8D6;
  margin-bottom: 24px;
  letter-spacing: 1px;
}

.login-gate input {
  width: 260px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #F2F2F2;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.login-gate input:focus {
  border-color: rgba(168,240,106,0.3);
}

.login-error {
  color: #f87171;
  font-size: 13px;
  margin-top: 12px;
  min-height: 20px;
}


/* ---------------------------------------------------------
   5. MOBILE
   --------------------------------------------------------- */

.hamburger {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1001;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #D9D8D6;
  font-size: 22px;
  padding: 8px 12px;
  cursor: pointer;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: #0A0E14;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 70px 20px 20px;
  z-index: 1000;
  flex-direction: column;
  gap: 4px;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #D9D8D6;
  text-decoration: none;
  font-size: 14px;
}

.mobile-menu a.active { background: rgba(255,255,255,0.08); color: #F2F2F2; }

.menu-logo {
  font-size: 18px;
  font-weight: 300;
  color: #D9D8D6;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

@media (max-width: 1080px) {
  .sidebar { display: none; }
  .hamburger { display: block; }
  .mobile-menu { display: flex; }
  .main { padding: 20px 16px 110px; padding-top: 60px; }

  /* Header — stack greeting + date vertically */
  .header { flex-direction: column; gap: 4px; }
  .header h1 { font-size: 24px; }
  .header-meta { white-space: normal; font-size: 10px; }
  .header-affirmation { font-size: 22px !important; }

  /* Billing hero — stack amount + bar vertically */
  .billing-hero { flex-direction: column; gap: 16px; padding: 20px; }
  .billing-hero .amount { font-size: 32px; }
  .billing-bar-container { width: 100%; }

  /* Card grid — single column */
  .card-grid { grid-template-columns: 1fr; }
  .stats-left { grid-template-columns: 1fr; }

  /* Two-column layout — single column */
  .two-col { grid-template-columns: 1fr !important; }

  /* Card values — smaller on mobile */
  .card-value { font-size: 28px; }

  /* Panels — tighter padding */
  .panel { padding: 16px; }

  /* Pulse strip — wrap tighter */
  .pulse-strip { padding: 14px 16px; gap: 10px; }
  .pulse-systems { justify-content: flex-start; }

  /* Page labels and headers — allow wrapping */
  .page-label { flex-wrap: wrap; gap: 8px; }
  .page-label h2 { font-size: 18px; }

  /* Pipeline items — stack on small screens */
  .pipeline-item { flex-wrap: wrap; gap: 4px; font-size: 13px; }

  /* Task items — tighter */
  .task-date { font-size: 16px; }
}

@media (max-width: 480px) {
  .main { padding: 12px 10px 100px; padding-top: 52px; }
  .header h1 { font-size: 20px; }
  .header-affirmation { font-size: 18px !important; }
  .billing-hero .amount { font-size: 26px; }
  .card-value { font-size: 22px; }
  .panel { padding: 12px 10px; }
  .card { padding: 12px 14px; }
  .page-label h2 { font-size: 16px; }
}


/* ---------------------------------------------------------
   6. COMPONENTS — Panels, cards, badges, buttons
   --------------------------------------------------------- */

.panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px 24px;
}

.panel-title {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: #9F9FA0;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: 'Space Mono', monospace;
  letter-spacing: 1px;
}

.panel-title .badge {
  background: rgba(248,113,113,0.15);
  color: #f87171;
}

.card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px 20px;
}

.card-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: #9F9FA0;
  margin-bottom: 12px;
}

.card-value {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #F2F2F2;
}

.card-sub {
  font-size: 12px;
  color: #9F9FA0;
  margin-top: 4px;
}

.card-value.green { color: #4ade80; }
.card-value.amber { color: #fbbf24; }
.card-value.red   { color: #f87171; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}


/* ---------------------------------------------------------
   7. DASHBOARD — Billing hero, pulse strip, card grid
   --------------------------------------------------------- */

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.header h1 {
  font-size: 36px;
  font-weight: 300;
  color: #D9D8D6;
  letter-spacing: -0.3px;
}

.header-affirmation {
  font-size: 36px;
  font-weight: 300;
  color: #D9D8D6;
  margin-top: 4px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.header-meta {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: #9F9FA0;
  padding-top: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Pulse strip — system health bar at top of dashboard */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,240,106,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(168,240,106,0); }
}

.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #A8F06A;
  animation: pulse-glow 2s ease-in-out infinite; flex-shrink: 0;
}
.pulse-dot.warn  { background: #F9A03F; animation-name: none; }
.pulse-dot.error { background: #E74C3C; animation-name: none; }

.pulse-strip {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 24px; flex-wrap: wrap;
}

.pulse-label {
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 2.24px; text-transform: uppercase; color: #A8F06A;
}

.pulse-systems { display: flex; gap: 12px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.pulse-sys { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9F9FA0; }
.pulse-sys-dot { width: 6px; height: 6px; border-radius: 50%; background: #A8F06A; }
.pulse-sys-dot.off  { background: #666; }
.pulse-sys-dot.warn { background: #F9A03F; }

.pulse-activity { width: 100%; font-size: 12px; color: #9F9FA0; }
.pulse-activity-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.pulse-activity-item { display: flex; align-items: center; gap: 6px; }
.pulse-activity-item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #9F9FA0; flex-shrink: 0; }

/* Billing hero card */
.billing-hero {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.billing-hero .amount { font-size: 42px; font-weight: 600; letter-spacing: -1px; }
.billing-hero .target { color: #9F9FA0; font-size: 14px; margin-top: 4px; }
.billing-hero .target span { color: #F2F2F2; }

.billing-bar-container { width: 280px; }
.billing-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: #9F9FA0; margin-bottom: 8px; }
.billing-bar { height: 10px; background: rgba(255,255,255,0.08); border-radius: 5px; overflow: hidden; }
.billing-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #00FFFF, #8B2FE8); width: 68%; transition: width 0.6s ease; }
.billing-bar-gap { font-size: 13px; color: #D9D8D6; margin-top: 8px; text-align: right; }

/* Card grid — dashboard top section */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; align-items: start; }
.stats-left { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.card-recap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px 20px;
  max-height: 160px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-recap .recap-list { flex: 1; overflow-y: auto; font-size: 12px; line-height: 1.6; color: #b0b0b0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
.card-recap .recap-item { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.card-recap .recap-item:last-child { border-bottom: none; }
.recap-status-ok   { color: #4ade80; }
.recap-status-fail { color: #f87171; }

/* Page label — icon + title at top of each page */
.page-label { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.page-label-icon {
  width: 28px; height: 28px;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  flex-shrink: 0;
}
.page-label h2 { font-size: 20px; font-weight: 400; margin: 0; }


/* ---------------------------------------------------------
   8. FORMS
   --------------------------------------------------------- */

.settings-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #8B2FE8;
  font-size: 13px;
  font-family: inherit;
  padding: 4px 10px;
  cursor: pointer;
  appearance: auto;
}
.settings-select:focus { outline: none; border-color: #8B2FE8; }

.settings-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #8B2FE8;
  font-size: 13px;
  font-family: inherit;
  padding: 4px 10px;
}
.settings-input:focus { outline: none; border-color: #8B2FE8; }


/* ---------------------------------------------------------
   9. LISTS — Tasks, pipeline, inbox
   --------------------------------------------------------- */

.task-list { list-style: none; }

.task-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px;
}
.task-item:last-child { border-bottom: none; }

.task-check {
  width: 16px; height: 16px; border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 4px; flex-shrink: 0; margin-top: 2px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.task-check:hover { border-color: #A8F06A; }
.task-check.done  { background: #A8F06A; border-color: #A8F06A; }

.task-meta { font-size: 12px; color: #9F9FA0; margin-top: 2px; }
.task-meta .overdue { color: #f87171; }
.task-meta .job-id  { color: #8B2FE8; font-weight: 500; }

.task-date {
  font-size: 21px; font-weight: 400; color: #9F9FA0;
  white-space: nowrap; flex-shrink: 0; align-self: center;
}
.task-date.overdue { color: #f87171; }

.pipeline-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px;
}
.pipeline-item:last-child { border-bottom: none; }

.pipeline-stage {
  font-size: 11px; padding: 3px 10px; border-radius: 10px;
  font-family: 'Space Mono', monospace; letter-spacing: 0.5px;
}

/* Inbox accordion */
.inbox-accordion-item.open .inbox-accordion-body { display: block !important; }
.inbox-accordion-item.open .inbox-accordion-header > div:last-child { transform: rotate(180deg); }


/* ---------------------------------------------------------
   10. SOCIAL — Platform icons + badges
   --------------------------------------------------------- */

/* Platform icon masks — colored via background-color */
.plat-icon {
  display: inline-block; width: 14px; height: 14px;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.plat-icon-fb { background-color: #00FFFF; -webkit-mask-image: url(icons/facebook.svg); mask-image: url(icons/facebook.svg); }
.plat-icon-ig { background-color: #F9A03F; -webkit-mask-image: url(icons/instagram.svg); mask-image: url(icons/instagram.svg); }
.plat-icon-li { background-color: #8B2FE8; -webkit-mask-image: url(icons/linkedin.svg); mask-image: url(icons/linkedin.svg); }
.plat-icon-yt { background-color: #A8F06A; -webkit-mask-image: url(icons/youtube.svg); mask-image: url(icons/youtube.svg); }

.plat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
}
.plat-badge-fb { background: rgba(0,255,255,0.15); }
.plat-badge-ig { background: rgba(249,160,63,0.15); }
.plat-badge-li { background: rgba(139,47,232,0.15); }
.plat-badge-yt { background: rgba(168,240,106,0.15); }


/* ---------------------------------------------------------
   11. CHAT — SMS bubbles
   --------------------------------------------------------- */

.sms-bubble { max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.sms-bubble.outgoing { background: rgba(168,240,106,0.06); color: #F2F2F2; border-bottom-right-radius: 4px; margin-left: auto; }
.sms-bubble.incoming { background: rgba(255,255,255,0.08); color: #F2F2F2; border-bottom-left-radius: 4px; }