/* shared/shell.css — Common layout: reset, nav, ad column */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1e1e2e; color: #cdd6f4; }
body { display: flex; flex-direction: column; }

/* App layout: nav + main content + ad column */
#app-layout { display: flex; flex: 1; min-height: 0; }
#app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Top nav bar */
#tool-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; background: #11111b; border-bottom: 1px solid #313244;
  font-size: 13px;
}
#tool-nav .nav-brand {
  color: #cdd6f4; font-weight: 700; text-decoration: none; margin-right: 16px;
}
#tool-nav .nav-brand:hover { color: #89b4fa; }
#tool-nav a {
  color: #6c7086; text-decoration: none; padding: 4px 8px; border-radius: 4px;
}
#tool-nav a:hover { color: #cdd6f4; background: #313244; }
#tool-nav a.active { color: #89b4fa; background: #1e1e2e; }
/* Nav spacer (pushes coffee button to the right) */
.nav-spacer { flex: 1; }

/* Page title bar */
#page-title-bar {
  position: relative;
  display: flex; align-items: center;
  padding: 8px 16px; background: #181825; border-bottom: 1px solid #313244;
}
#page-title-bar h1 {
  font-size: 16px; font-weight: 600; color: #cdd6f4;
  display: flex; align-items: center; gap: 6px;
}

/* Help button (inline next to page title) */
.nav-help-btn {
  background: none; border: none; color: #6c7086; cursor: pointer;
  padding: 2px; border-radius: 4px; display: inline-flex; align-items: center;
  vertical-align: middle;
}
.nav-help-btn:hover { color: #89b4fa; background: #313244; }
.nav-help-tooltip {
  position: absolute; top: 100%; left: 16px;
  background: #313244; color: #cdd6f4; font-size: 13px; line-height: 1.6;
  padding: 12px 16px; border-radius: 8px; border: 1px solid #45475a;
  max-width: 360px; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.nav-coffee {
  background: #ffdd00 !important;
  color: #000 !important; font-weight: 600; font-size: 12px !important;
  padding: 4px 12px !important; border-radius: 6px !important;
  display: inline-flex !important; align-items: center; gap: 6px;
}
.nav-coffee:hover { background: #e6c800 !important; color: #000 !important; }
.bmc-icon { width: 16px; height: 16px; }

/* Ad column */
#ad-column {
  width: 180px; background: #11111b; border-left: 2px solid #45475a;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 10px; gap: 16px;
}

/* GitHood self-promo card */
#ad-githood { text-decoration: none; display: block; width: 160px; }
.ad-card {
  background: linear-gradient(135deg, #2d1b4e, #1a1a2e);
  border: 1px solid #5a2a82; border-radius: 8px;
  padding: 16px 12px; text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.ad-card:hover { border-color: #8b5cf6; transform: translateY(-2px); }
.ad-card-badge {
  display: inline-block; background: #8b5cf6; color: white;
  font-size: 11px; font-weight: 700; padding: 2px 10px;
  border-radius: 4px; margin-bottom: 10px; letter-spacing: 0.5px;
}
.ad-card-text { color: #cdd6f4; font-size: 12px; line-height: 1.5; margin: 0 0 12px 0; }
.ad-card-cta { color: #8b5cf6; font-size: 11px; font-weight: 600; }
.ad-card:hover .ad-card-cta { color: #a78bfa; }

/* External ad slots */
.ad-slot-external { width: 160px; }
.ad-placeholder {
  width: 160px; height: 300px; border: 1px dashed #45475a; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: #45475a; font-size: 13px; background: #181825;
}

/* Lucide icons */
.icon { width: 14px; height: 14px; vertical-align: middle; display: inline-block; }

/* Utility */
.hidden { display: none !important; }