/* ==========================================================================
   Zakir OS — Shell layout, navigation, page frame, palette, modal.
   ========================================================================== */

/* --- App frame ----------------------------------------------------------- */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:"sidebar topbar" "sidebar main";
  height:100vh;
  height:100dvh;
  transition:grid-template-columns var(--base) var(--ease);
}
.app[data-sidebar="collapsed"]{grid-template-columns:var(--sidebar-w-collapsed) 1fr}

/* --- Sidebar ------------------------------------------------------------- */
.sidebar{
  grid-area:sidebar;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  min-height:0;
  z-index:var(--z-shell);
}
.sidebar__head{
  height:var(--topbar-h);
  display:flex;align-items:center;
  padding:0 var(--s3);
  border-bottom:1px solid var(--line);
  flex:none;
}

/* Workspace switcher */
.ws{
  display:flex;align-items:center;gap:var(--s2);
  width:100%;height:34px;padding:0 var(--s2);
  border-radius:var(--r-md);
  transition:background var(--fast) var(--ease);
}
.ws:hover{background:var(--hover)}
.ws__mark{
  width:22px;height:22px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;flex:none;
  font-family:var(--font-mono);font-size:var(--t-xs);font-weight:700;
}
.ws__name{font-weight:600;font-size:var(--t-md)}
.ws__chevron{color:var(--text-3);margin-left:auto}

.sidebar__nav{flex:1;overflow-y:auto;padding:var(--s3) var(--s2)}
.sidebar__foot{
  padding:var(--s2);
  border-top:1px solid var(--line);
  flex:none;
}

.nav-section{margin-bottom:var(--s4)}
.nav-section__title{
  padding:0 var(--s2) var(--s2);
  font-family:var(--font-mono);
  font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-3);
}

.nav-item{
  display:flex;align-items:center;gap:var(--s3);
  height:31px;padding:0 var(--s2);
  border-radius:var(--r-md);
  color:var(--text-2);
  font-size:var(--t-md);font-weight:500;
  position:relative;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item[aria-current="page"]{background:var(--active);color:var(--text)}
.nav-item[aria-current="page"]::before{
  content:"";position:absolute;left:-8px;
  top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:var(--r-full);
  background:var(--accent);
}
.nav-item__icon{width:16px;height:16px;flex:none}
.nav-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item__tag{
  font-family:var(--font-mono);font-size:var(--t-2xs);
  color:var(--text-3);letter-spacing:var(--tracking-label);
}

/* Collapsed sidebar */
.app[data-sidebar="collapsed"] .ws__name,
.app[data-sidebar="collapsed"] .ws__chevron,
.app[data-sidebar="collapsed"] .nav-item__label,
.app[data-sidebar="collapsed"] .nav-item__tag,
.app[data-sidebar="collapsed"] .nav-section__title{display:none}
.app[data-sidebar="collapsed"] .nav-item{justify-content:center;padding:0}
.app[data-sidebar="collapsed"] .nav-section{margin-bottom:var(--s2)}

/* --- Topbar -------------------------------------------------------------- */
.topbar{
  grid-area:topbar;
  display:flex;align-items:center;gap:var(--s3);
  padding:0 var(--s4);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  z-index:var(--z-shell);
}

/* The Command Bar — signature element. Mono, scoped, always present. */
.cmdbar{
  display:flex;align-items:center;gap:var(--s2);
  flex:1;max-width:620px;height:32px;
  padding:0 var(--s2) 0 var(--s3);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--text-3);
  font-family:var(--font-mono);font-size:var(--t-sm);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.cmdbar:hover{border-color:var(--line-strong);background:var(--raised)}
.cmdbar__scope{display:flex;align-items:center;gap:var(--s1);color:var(--text-2);white-space:nowrap}
.cmdbar__sep{color:var(--text-3);opacity:.6}
.cmdbar__hint{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdbar__keys{display:flex;gap:2px;margin-left:auto}

/* --- Main ---------------------------------------------------------------- */
.main{
  grid-area:main;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--bg);
}

.page{
  max-width:1280px;
  margin:0 auto;
  padding:var(--s5) var(--s5) var(--s8);
}
.page__head{
  display:flex;align-items:flex-start;gap:var(--s4);
  margin-bottom:var(--s5);
}
.page__eyebrow{margin-bottom:var(--s1)}
.page__title{font-size:var(--t-2xl)}
.page__sub{color:var(--text-2);margin-top:var(--s1);font-size:var(--t-base)}
.page__actions{margin-left:auto;display:flex;gap:var(--s2);flex:none}

/* --- Card ---------------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s4);
}
.card__head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.card__title{font-size:var(--t-base);font-weight:600}

.grid{display:grid;gap:var(--s4)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* Metric tile */
.metric-tile__label{margin-bottom:var(--s2)}
.metric-tile__value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-3xl);font-weight:600;line-height:1;
  letter-spacing:-.02em;
}
.metric-tile__foot{margin-top:var(--s2);display:flex;align-items:center;gap:var(--s2)}

/* --- Empty state --------------------------------------------------------- */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:var(--s8) var(--s5);
  border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);
  background:
    radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 55%),
    var(--surface);
}
.empty__mark{
  width:38px;height:38px;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--overlay);border:1px solid var(--line);
  color:var(--text-2);
  margin-bottom:var(--s4);
}
.empty__title{font-size:var(--t-lg);font-weight:600}
.empty__body{color:var(--text-2);margin-top:var(--s2);max-width:44ch}
.empty__actions{margin-top:var(--s4);display:flex;gap:var(--s2)}
.empty__milestone{margin-top:var(--s4)}

/* --- Command palette ----------------------------------------------------- */
.palette-backdrop{
  position:fixed;inset:0;z-index:var(--z-palette);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:14vh;
  animation:fade var(--fast) var(--ease);
}
.palette{
  width:min(640px,calc(100vw - 32px));
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line-strong);
  border-radius:var(--r-xl);
  box-shadow:var(--e3);
  overflow:hidden;
  animation:rise var(--base) var(--ease);
}
.palette__input-row{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4);
  border-bottom:1px solid var(--line);
}
.palette__scope{
  font-family:var(--font-mono);font-size:var(--t-xs);
  padding:3px var(--s2);border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent-line);
  white-space:nowrap;flex:none;
}
.palette__input{
  flex:1;background:none;border:none;outline:none;
  font-size:var(--t-lg);color:var(--text);
}
.palette__input::placeholder{color:var(--text-3)}
.palette__list{max-height:min(52vh,420px);overflow-y:auto;padding:var(--s2)}
.palette__group-title{
  padding:var(--s3) var(--s2) var(--s2);
  font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-3);
}
.palette__item{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;height:38px;padding:0 var(--s3);
  border-radius:var(--r-md);
  color:var(--text-2);text-align:left;
  font-size:var(--t-base);
}
.palette__item[data-active="true"]{background:var(--accent-soft);color:var(--text)}
.palette__item-icon{width:16px;height:16px;flex:none;opacity:.8}
.palette__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette__item-meta{
  font-family:var(--font-mono);font-size:var(--t-2xs);
  color:var(--text-3);letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.palette__foot{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s2) var(--s4);
  border-top:1px solid var(--line);
  background:var(--surface);
  font-size:var(--t-xs);color:var(--text-3);
}
.palette__foot span{display:flex;align-items:center;gap:var(--s1)}
.palette__none{padding:var(--s6) var(--s4);text-align:center;color:var(--text-2)}

/* --- Modal --------------------------------------------------------------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(0,0,0,.5);
  display:grid;place-items:center;padding:var(--s4);
  animation:fade var(--fast) var(--ease);
}
.modal{
  width:min(520px,100%);
  background:var(--raised);
  border:1px solid var(--line-strong);
  border-radius:var(--r-xl);
  box-shadow:var(--e3);
  animation:rise var(--base) var(--ease);
}
.modal__head{padding:var(--s5) var(--s5) var(--s3)}
.modal__body{padding:0 var(--s5) var(--s5)}
.modal__foot{
  display:flex;justify-content:flex-end;gap:var(--s2);
  padding:var(--s4) var(--s5);
  border-top:1px solid var(--line);
}

/* --- Toast --------------------------------------------------------------- */
.toasts{
  position:fixed;bottom:var(--s5);right:var(--s5);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--s2);
}
.toast{
  display:flex;align-items:center;gap:var(--s3);
  min-width:260px;padding:var(--s3) var(--s4);
  background:var(--raised);border:1px solid var(--line-strong);
  border-radius:var(--r-md);box-shadow:var(--e2);
  font-size:var(--t-md);
  animation:slide-in var(--base) var(--ease);
}
.toast--error{border-color:rgba(240,68,56,.45)}
.toast--success{border-color:rgba(18,183,106,.45)}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .app{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
  .app .ws__name,.app .ws__chevron,.app .nav-item__label,
  .app .nav-item__tag,.app .nav-section__title{display:none}
  .app .nav-item{justify-content:center;padding:0}
}
@media (max-width:720px){
  .app{
    grid-template-columns:1fr;
    grid-template-rows:var(--topbar-h) 1fr auto;
    grid-template-areas:"topbar" "main" "sidebar";
  }
  .sidebar{
    flex-direction:row;
    border-right:none;border-top:1px solid var(--line);
    padding:var(--s1) var(--s2);
  }
  .sidebar__head,.sidebar__foot{display:none}
  .sidebar__nav{display:flex;gap:var(--s1);overflow-x:auto;padding:var(--s1)}
  .nav-section{display:flex;gap:var(--s1);margin:0}
  .nav-item{width:42px;height:38px;justify-content:center}
  .nav-item[aria-current="page"]::before{display:none}
  .page{padding:var(--s4) var(--s3) var(--s6)}
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .page__head{flex-direction:column}
  .page__actions{margin-left:0;width:100%}
  .cmdbar__scope{display:none}
}

/* --- Empty-state detail list --------------------------------------------- */
.empty__list{
  margin-top:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);
  text-align:left;
  max-width:52ch;
}
.empty__list-item{
  display:flex;align-items:flex-start;gap:var(--s3);
  color:var(--text-2);font-size:var(--t-md);
}
.empty__list-item svg{margin-top:6px;color:var(--accent);opacity:.7}

/* --- Timeline (build plan) ----------------------------------------------- */
.timeline{display:flex;flex-direction:column}
.timeline__row{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
}
.timeline__row:last-child{border-bottom:none}
.timeline__id{
  width:30px;flex:none;
  font-size:var(--t-sm);font-weight:600;
  color:var(--text-3);
}
.timeline__row[data-state="done"] .timeline__id{color:var(--up)}
.timeline__row[data-state="next"] .timeline__id{color:var(--accent)}
.timeline__body{display:flex;flex-direction:column;flex:1;min-width:0}
.timeline__name{font-size:var(--t-md);font-weight:500}
.timeline__note{font-size:var(--t-sm);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Checklist ------------------------------------------------------------ */
.checklist{display:flex;flex-direction:column;gap:var(--s2)}
.checklist__row{
  display:flex;align-items:flex-start;gap:var(--s3);
  font-size:var(--t-md);color:var(--text-2);
}
.checklist__row svg{margin-top:4px;color:var(--up);flex:none}

/* --- Shortcut grid -------------------------------------------------------- */
.shortcut-grid{
  margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2) var(--s4);
}
.shortcut-grid__row{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm)}

/* --- Icon ----------------------------------------------------------------- */
.icon{flex:none}

/* --- Dashboard tiles and greeting ----------------------------------------- */
.greet__emoji{font-size:.8em;margin-left:2px}
.tile{display:flex;flex-direction:column;gap:var(--s1)}
.tile__value{font-size:var(--t-2xl);font-weight:600;line-height:1.1}
.tile__foot{font-size:var(--t-sm)}
@media (max-width:900px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
}