/* =====================================================
   LAYOUT.CSS — Topbar, Ticker, Sidebar, Main Area
   ===================================================== */

/* ---- Ticker ---- */
.ticker-wrap {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:28px;
  background:var(--yellow);
  border-bottom:2px solid var(--ink);
  overflow:hidden;
  display:flex; align-items:center;
}
.ticker-track {
  display:flex; white-space:nowrap;
  animation: ticker 24s linear infinite;
}
.ticker-track:hover { animation-play-state:paused; }
.ticker-item {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0 2rem;
  font-family:var(--mono); font-size:0.72rem; font-weight:800;
  color:var(--ink); letter-spacing:0.06em; text-transform:uppercase;
}
.ticker-dot { width:6px; height:6px; background:var(--ink); border-radius:50%; }

/* ---- Topbar ---- */
.topbar {
  position:fixed; top:28px; left:0; right:0; z-index:199;
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:var(--border-thick);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.25rem;
  box-shadow: 0 3px 0 var(--ink);
}
.topbar-left { display:flex; align-items:center; gap:0.85rem; }
.topbar-right { display:flex; align-items:center; gap:0.6rem; }

.hamburger {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-alt);
  border:var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  transition:transform 0.15s var(--ease-bounce), box-shadow 0.15s var(--ease-bounce);
  color:var(--ink);
}
.hamburger:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-md); }
.hamburger:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }

.brand { display:flex; align-items:center; gap:0.6rem; }
.brand-icon {
  width:36px; height:36px;
  background:var(--yellow); border:var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.1rem; color:var(--ink);
}
.brand-name { font-weight:900; font-size:1.1rem; letter-spacing:-0.03em; color:var(--ink); }
.brand-tag {
  font-family:var(--mono); font-size:0.65rem; font-weight:800;
  background:var(--surface-deep); color:var(--txt-inverse);
  padding:2px 8px; border-radius:30px;
}

/* Search bar in topbar */
.topbar-search {
  position:relative; display:flex; align-items:center;
}
.topbar-search input {
  width:220px; height:36px;
  background:var(--surface-alt);
  border:var(--border); border-radius:var(--radius-sm);
  padding:0 2.2rem 0 0.85rem;
  font-size:0.85rem; font-weight:600; color:var(--txt-primary);
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.15s, transform 0.15s;
}
.topbar-search input:focus {
  outline:none; box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}
.topbar-search input::placeholder { color:var(--txt-muted); }
.topbar-search .search-ico {
  position:absolute; right:0.65rem;
  color:var(--txt-muted); pointer-events:none;
  width:16px; height:16px;
}
.search-results {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:var(--border-thick);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  max-height:320px; overflow-y:auto; z-index:300;
  display:none;
}
.search-results.active { display:block; animation:popIn 0.2s var(--ease-out); }
.search-item {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.65rem 1rem; cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,0.07);
  transition:background 0.1s;
}
.search-item:last-child { border-bottom:none; }
.search-item:hover { background:var(--yellow-lt); }
.search-item-icon {
  width:32px; height:32px; border-radius:var(--radius-sm);
  border:var(--border); display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; flex-shrink:0;
}
.search-item-name { font-weight:700; font-size:0.88rem; }
.search-item-path { font-size:0.75rem; color:var(--txt-muted); font-family:var(--mono); }
.search-item-size { margin-left:auto; font-size:0.75rem; font-family:var(--mono); color:var(--txt-muted); }
.search-empty { padding:1rem; text-align:center; color:var(--txt-muted); font-size:0.88rem; }

/* Live pill */
.live-pill {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:var(--lime-lt); border:var(--border); border-radius:30px;
  padding:0.3rem 0.75rem; font-size:0.75rem; font-weight:800;
  color:var(--ink); box-shadow:var(--shadow-sm);
}
.live-dot {
  width:8px; height:8px; background:var(--lime);
  border-radius:50%; border:1px solid var(--ink);
  animation:pulseDot 1.6s infinite;
}

/* ---- Sidebar ---- */
.sidebar {
  position:fixed;
  top:calc(28px + var(--topbar-h));
  left:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:var(--border-thick);
  display:flex; flex-direction:column;
  z-index:198;
  transform:translateX(-100%);
  transition:transform 0.28s var(--ease-out);
  box-shadow:3px 0 0 var(--ink);
  overflow:hidden;
}
.sidebar.open { transform:translateX(0); }

@media(min-width:1024px) {
  .sidebar { transform:translateX(0); }
  .main { padding-left:var(--sidebar-w); }
  .hamburger { display:none !important; }
}

.sidebar-header {
  padding:1.15rem 1rem;
  border-bottom:2px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; gap:0.75rem;
  flex-shrink:0;
}
.sidebar-avatar {
  width:38px; height:38px; border-radius:var(--radius-sm);
  background:var(--yellow); border:var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:var(--ink); font-size:1rem;
}
.sidebar-user-name { font-weight:800; font-size:0.9rem; color:var(--txt-inverse); }
.sidebar-user-role { font-family:var(--mono); font-size:0.68rem; color:var(--sidebar-muted); font-weight:700; text-transform:uppercase; }
.sidebar-close {
  margin-left:auto; width:28px; height:28px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  border-radius:4px; color:var(--sidebar-text);
  display:flex; align-items:center; justify-content:center;
}
.sidebar-close:hover { background:rgba(255,255,255,0.15); }

.sidebar-nav { flex:1; padding:0.75rem 0.65rem; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:2px; }

.sidebar-section {
  padding:0.85rem 0.5rem 0.3rem;
  font-family:var(--mono); font-size:0.65rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--sidebar-muted);
  flex-shrink:0;
}

.sidebar-link {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.65rem 0.85rem; border-radius:var(--radius-sm);
  font-size:0.9rem; font-weight:700; color:var(--sidebar-text);
  background:transparent; border:2px solid transparent; width:100%;
  transition:all 0.15s var(--ease-bounce); flex-shrink:0;
}
@media (hover: hover) {
  .sidebar-link:hover {
    background:rgba(255,255,255,0.07);
    border-color:rgba(255,255,255,0.12);
    color:var(--txt-inverse);
    transform:translateX(3px);
  }
}
.sidebar-link.active {
  background:var(--yellow);
  color:var(--ink);
  border:var(--border);
  box-shadow:var(--shadow-sm);
}
.sidebar-link.active i { color:var(--ink); }
.sidebar-link i { width:20px; font-size:1rem; }

/* Sidebar Accordion Sub-navigation */
.sidebar-subnav {
  display:none; flex-direction:column; gap:2px;
  padding-left:0.85rem; margin-top:4px; flex-shrink:0;
}
.sidebar-subnav.open { display:flex; }
.sidebar-sublink {
  position:relative;
  display:flex; align-items:center; gap:0.65rem;
  padding:0.5rem 0.75rem; border-radius:var(--radius-sm);
  font-size:0.85rem; font-weight:600; color:var(--sidebar-text);
  background:transparent; width:100%; transition:all 0.15s ease;
}
.sidebar-sublink-dot {
  width:6px; height:6px; background:var(--sidebar-muted); border-radius:50%;
  opacity:0; transition:opacity 0.2s ease; position:absolute; left:-0.2rem;
}
.sidebar-sublink.active .sidebar-sublink-dot { opacity:1; background:var(--yellow); }
@media (hover: hover) {
  .sidebar-sublink:hover { background:rgba(255,255,255,0.07); color:var(--txt-inverse); }
}
.sidebar-sublink.active { color:var(--yellow); font-weight:600; background:transparent; }
.sidebar-sublink i { width:16px; font-size:0.9rem; color:var(--sidebar-muted); }

.sidebar-footer {
  padding:0.85rem;
  border-top:2px solid rgba(255,255,255,0.1);
}
.sidebar-version {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-sm);
  padding:0.5rem 0.75rem;
  font-family:var(--mono); font-size:0.72rem; color:var(--sidebar-muted);
}
.sidebar-version span:last-child { color:var(--yellow); font-weight:800; }

/* Overlay */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); z-index:197;
}
.sidebar-overlay.active { display:block; }

@media(min-width:1024px) {
  .sidebar-overlay.active, .sidebar-overlay { display:none !important; }
}

/* ---- Main Content ---- */
.main {
  padding-top:calc(28px + var(--topbar-h) + 1.5rem);
  padding-bottom:4rem; min-height:100vh;
}
.main-inner {
  padding:0 1.5rem;
  max-width:1400px; margin:0 auto;
}

/* ---- Page Header ---- */
.page-header {
  margin-bottom:1.75rem;
  padding-bottom:1.25rem;
  border-bottom:var(--border);
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.page-title { font-size:1.6rem; font-weight:900; letter-spacing:-0.03em; color:var(--ink); }
.page-subtitle { font-size:0.88rem; color:var(--txt-secondary); margin-top:0.2rem; font-weight:500; }
.page-actions { display:flex; gap:0.6rem; align-items:center; flex-shrink:0; }