/* === Global Theme Vars =================================================== */
:root{
  --red: #e02424;
  --red-600: #d32b2b;
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --text: #111213;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e6e8eb;
}
:root.dark{
  --bg: #0b0c0e;
  --bg-soft: #14161a;
  --text: #f3f4f6;
  --muted: #a1a1aa;
  --card: #111317;
  --border: #23262b;
}

/* === Base ================================================================ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
.sep{height:1px;background:var(--border);margin:12px 0}

/* === App Layout ========================================================== */
.app{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh}
.app__body{display:grid;grid-template-columns:auto 1fr;min-height:0}
.app__main{min-height:0;display:flex;flex-direction:column}
.app__content{flex:1;min-height:0;overflow:auto;padding:16px;background:var(--bg-soft)}
.container{max-width:1440px;margin-inline:auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.shadow{box-shadow:0 6px 18px rgba(0,0,0,.06)}

/* === Header ============================================================= */
.header{position:sticky;top:0;z-index:40;background:var(--card);border-bottom:1px solid var(--border)}
.header__inner{display:flex;align-items:center;gap:12px;height:60px}
.header__logo{font-weight:700;letter-spacing:.3px}
.header__spacer{flex:1}
.icon-btn{border:1px solid var(--border);background:var(--card);width:40px;height:40px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{border-color:var(--red);color:var(--red)}
.pill-btn{border:1px solid var(--border);background:var(--card);height:36px;border-radius:999px;padding:0 12px;cursor:pointer}
.pill-btn:hover{border-color:var(--red);color:var(--red)}
.profile{position:relative}
.profile__btn{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--card);height:40px;border-radius:999px;padding:0 10px;cursor:pointer}
.profile__btn:hover{border-color:var(--red);color:var(--red)}
.profile__avatar{width:24px;height:24px;border-radius:50%;border:1px solid var(--border)}
.profile__menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--border);border-radius:12px;min-width:180px;box-shadow:0 12px 24px rgba(0,0,0,.08);padding:8px;display:flex;flex-direction:column}
.profile__menu a{padding:10px 12px;border-radius:8px}
.profile__menu a:hover{background:var(--bg-soft);color:var(--red)}

/* === Sidebar (icons-only collapse on desktop) =========================== */
.sidebar{border-right:1px solid var(--border);background:var(--card);min-height:0;display:flex;flex-direction:column;transition:width .2s ease}
.sidebar[data-state="expanded"]{width:260px}
.sidebar[data-state="collapsed"]{width:72px}
.sidebar__nav{padding:12px 8px;display:flex;flex-direction:column;gap:6px}
.sidebar .item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid transparent}
.sidebar .item:hover{border-color:var(--red);color:var(--red)}
.sidebar .item::before{content:attr(data-icon);font-size:18px;width:24px;text-align:center}
.sidebar[data-state="collapsed"] .item span{display:none}

/* === Footer & Mobile Bar =============================================== */
.footer{border-top:1px solid var(--border);background:var(--card)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;height:52px}
.mobile-nav{
  position:fixed;left:0;right:0;bottom:0;height:56px;background:var(--card);
  border-top:1px solid var(--border);
  /* visibility controlled by media queries */
  align-items:center;justify-content:space-around;z-index:50
}
.mobile-nav__link{width:48px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent}
.mobile-nav__link:hover{border-color:var(--red);color:var(--red)}

/* === Visibility (web vs mobile) ======================================== */
/* Default desktop: no mobile bar */
.mobile-nav{display:none}

/* Mobile: hide sidebar+desktop footer, show mobile bar, pad content bottom */
@media (max-width: 900px){
  #sidebar{display:none !important}
  .footer.desktop-only{display:none !important}
  .mobile-nav{display:flex !important}
  .app__body{grid-template-columns:1fr}
  .app__content{padding-bottom:76px}
}

/* Desktop: ensure mobile bar remains hidden */
@media (min-width: 901px){
  .mobile-nav{display:none !important}
}

/* === Accents & Focus ==================================================== */
.is-active,.active{color:var(--red)}
.hover-red:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}