/* ═══════════════════════════════════════════════════════
   wireframe-base.css — ResearchMate Wireframe Shared Base
   Included by all wireframe pages.
   ═══════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Zoom-proof full-height anchor: % chains beat vh under css zoom */
html,body{height:100%}

/* ── CSS Variables ── */
:root{
  --orange:#EB5D2F; --od:#C74720; --ol:#FEF1EC; --om:#FAB195;
  --teal:#3EB1C8;   --tl:#EAF7FB; --gold:#FFC72C; --gl:#FFFBEB;
  --brown:#584446;  --bd:#261D1E; --bm:#8A838E;
  --silver:#E5E1E6; --sl:#F8F6F9; --border:#EDE9EE;
  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:20px;
}

/* ══════════════════════════════════════
   LEFT SIDEBAR
   Used by: 10-my-projects, 12-project-activity, 13-task-details
   ══════════════════════════════════════ */
.sidebar{
  width:220px; flex-shrink:0; background:#fff;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden; height:100%;
  transition:transform .28s cubic-bezier(.4,0,.2,1), width .25s ease, min-width .25s ease;
  z-index:80;
}
/* nav scrolls on its own; header + user/sign-out stay pinned */
.sb-nav{flex:1; overflow-y:auto; min-height:0; scrollbar-width:thin; scrollbar-color:var(--border) transparent}
.sb-collapse{
  width:26px; height:26px; border-radius:7px; border:none; background:var(--sl);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--bm); transition:.15s; flex-shrink:0;
}
.sb-collapse:hover{background:var(--ol); color:var(--orange)}
.sb-reveal{
  display:none; position:fixed; top:12px; left:12px; z-index:75;
  width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:#fff; cursor:pointer; align-items:center; justify-content:center;
  color:var(--bm); box-shadow:0 2px 10px rgba(88,68,70,.12); transition:.15s;
}
.sb-reveal:hover{color:var(--orange); border-color:var(--orange)}
/* Desktop collapse */
@media(min-width:821px){
  body.sb-hidden .sidebar{
    width:0; min-width:0; border-right:none;
    visibility:hidden; overflow:hidden; padding:0;
  }
  body.sb-hidden .sb-reveal{display:flex}
  /* keep page titles clear of the floating reveal button */
  body.sb-hidden .main > .topbar{padding-left:56px !important}
}
.sb-header{
  padding:14px 10px 12px; border-bottom:1px solid var(--border);
  margin-bottom:6px; display:flex; align-items:center;
  justify-content:space-between; gap:8px; flex-shrink:0;
}
.sb-logo-left{display:flex; align-items:center; gap:8px}
.sb-logo-mark{
  width:28px; height:28px; background:var(--orange); border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sb-brand{font-size:14px; font-weight:800; color:var(--orange)}
.sb-close{
  display:none; width:26px; height:26px; border-radius:7px;
  border:none; background:var(--sl); cursor:pointer;
  align-items:center; justify-content:center;
  font-size:16px; color:var(--bm); transition:.15s; flex-shrink:0;
}
.sb-close:hover{background:var(--ol); color:var(--orange)}
.sb-section{
  font-size:9px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#C8C2CB; padding:12px 12px 4px; flex-shrink:0;
}
.sb-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; margin:1px 4px; border-radius:9px;
  font-size:13px; font-weight:600; color:var(--bm);
  cursor:pointer; transition:.15s; text-decoration:none; flex-shrink:0;
}
.sb-item svg{width:15px; height:15px; flex-shrink:0}
.sb-item:hover{background:var(--ol); color:var(--orange)}
.sb-item.on{background:var(--ol); color:var(--orange)}
.sb-badge-pill{
  margin-left:auto; font-size:10px; font-weight:800;
  padding:1px 6px; border-radius:20px; background:var(--orange); color:#fff;
}
.sb-divider{height:1px; background:var(--border); margin:5px 14px}
.sb-bottom{
  margin-top:auto; padding:10px 4px 14px;
  border-top:1px solid var(--border); flex-shrink:0;
}
.sb-user{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:9px; cursor:pointer;
}
.sb-user:hover{background:var(--sl)}
.sb-av{
  width:30px; height:30px; border-radius:50%; background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#fff; flex-shrink:0;
}
.sb-uname{font-size:12px; font-weight:700; color:var(--bd)}
.sb-urole{font-size:10px; color:var(--bm); font-weight:400}

/* ── Sidebar Overlay ── */
#sb-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(38,29,30,.45); z-index:70;
  backdrop-filter:blur(2px); opacity:0; transition:opacity .28s;
}
#sb-overlay.show{display:block; opacity:1}

/* ── Hamburger Button ── */
.ham-btn{
  display:none; width:34px; height:34px; border-radius:8px;
  background:var(--sl); border:none; cursor:pointer;
  align-items:center; justify-content:center;
  flex-direction:column; gap:4px; padding:8px;
  transition:.15s; flex-shrink:0;
}
.ham-btn:hover{background:var(--ol)}
.ham-btn span{
  display:block; height:2px; background:var(--bd);
  border-radius:2px; width:100%; transition:.25s; transform-origin:center;
}
.ham-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ham-btn.open span:nth-child(2){opacity:0; transform:scaleX(0)}
.ham-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ══════════════════════════════════════
   RESPONSIVE — Sidebar slide-over (≤ 820px)
   ══════════════════════════════════════ */
@media(max-width:820px){
  .sb-collapse{display:none}
  .sb-reveal{display:none !important}
  .sidebar{
    position:fixed; top:0; left:0; bottom:0;
    transform:translateX(-100%);
    box-shadow:4px 0 24px rgba(38,29,30,.15);
  }
  .sidebar.open{transform:translateX(0)}
  .sb-close{display:flex}
  .ham-btn{display:flex}
  .main{padding-top:54px}
  .topbar{position:fixed; top:0; left:0; right:0; z-index:60; padding:0 14px}
  /* iOS zooms the page when a focused field is under 16px — keep phone inputs at 16px */
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="number"], input:not([type]), textarea, select { font-size:16px !important; }
}

/* ── Global comfort zoom: the wireframe-derived sizes read small on laptop
     screens, so scale the whole UI ~125% on desktop widths. Mobile
     breakpoints (≤900px) are untouched — zoom only kicks in above them. ── */
@media (min-width: 1000px) {
  html { zoom: 1.25; }
}

/* ── Real profile photo inside any initials circle ── */
.av-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;flex-shrink:0}

/* ── Tiny inline spinner (AI buttons etc.) ── */
.rm-spin{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:rmSpinB .7s linear infinite;flex-shrink:0}
@keyframes rmSpinB{to{transform:rotate(360deg)}}