/* TeamGuide — адаптивность: телефон (по умолчанию) → планшет (≥720 px) → компьютер (≥1024 px).
   На компьютере вместо шапки, пилюль и нижней панели — боковое меню,
   экраны раскладываются в несколько колонок, окна открываются по центру. */

/* Боковое меню: вид компонента. Скрыто на телефоне и планшете, показывается от 1024 px */
.side-nav{display:none;}
.side-nav{width:var(--side-w);flex-direction:column;gap:4px;
  padding:28px 16px 20px;background:var(--paper);border-right:1px solid var(--line);overflow-y:auto;}
.side-logo{display:flex;flex-direction:column;gap:6px;padding:0 10px 22px;text-decoration:none;color:inherit;}
.side-logo .brand-word{height:28px;}
.side-group{display:flex;flex-direction:column;gap:2px;}
.side-item{display:flex;align-items:center;gap:12px;width:100%;height:44px;padding:0 12px;border-radius:999px;text-align:left;
  font-family:var(--font-head);font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  transition:background .15s var(--ease),color .15s var(--ease);}
.side-item:hover{background:var(--clay-tint);color:var(--accent-dark);}
.side-item.active{background:var(--accent);color:var(--on-accent);}
.side-ico{display:flex;width:22px;height:22px;flex:none;}
.side-ico svg{width:22px;height:22px;}
.side-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-item kbd{font:600 11px/1 var(--font-body);color:var(--muted-label);border:1px solid var(--line);border-radius:6px;padding:3px 6px;}
.side-item.active kbd{color:inherit;border-color:currentColor;}
.side-sep{height:1px;background:var(--line);margin:12px 10px;}
.side-spacer{flex:1;}
.side-demo{margin:0 6px 10px;padding:8px 10px;border-radius:12px;background:var(--clay-tint);color:var(--accent-dark);font-size:12px;line-height:1.35;}
.side-user{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:16px;text-align:left;border:1px solid var(--line);background:var(--paper-2);}
.side-user:hover{border-color:var(--accent);}
.side-user .avatar{width:38px;height:38px;font-size:14px;}
.side-user-main{min-width:0;display:flex;flex-direction:column;}
.side-user-name{font-size:13.5px;font-weight:600;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-user-role{font-size:12px;color:var(--muted-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}



/* ================= ПЛАНШЕТ ================= */
@media (min-width:720px){
  #view{padding-left:28px;padding-right:28px;}
  .feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;}
  .quick-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wallet.open .wallet-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .wallet-deck .emp-card{margin-bottom:0;}
  .pers-search{max-width:420px;}
  .item-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start;}
  .item-media .item-photo,.item-media .item-photo-ph{margin-top:0;aspect-ratio:4/3;}
  .item-media{position:sticky;top:calc(var(--topbar-h) + var(--subnav-h) + 24px);}
  .item-cat{padding-right:48px;}
}

/* ================= КОМПЬЮТЕР ================= */
@media (min-width:1024px){
  .topbar,.subnav,.bottom-nav{display:none !important;}

  .side-nav:not([hidden]){display:flex;position:fixed;top:0;left:0;bottom:0;z-index:100;}
  /* рабочая область справа от меню */
  #view,body.no-subnav #view{margin-left:var(--side-w);max-width:none;padding:36px clamp(28px,4vw,64px) 72px;}
  #view > *{max-width:1120px;}
  .page-title{font-size:30px;}
  .toast{bottom:28px;}
  body.has-side .toast{left:calc(50% + var(--side-w) / 2);}

  /* окна — по центру экрана вместо нижнего листа */
  .sheet{top:50%;bottom:auto;left:50%;right:auto;width:min(640px,calc(100vw - 48px));
    max-height:84vh;border-radius:var(--radius-panel);transform:translate(-50%,-46%);opacity:0;
    transition:transform .24s var(--ease),opacity .24s var(--ease);}
  .sheet.open{transform:translate(-50%,-50%);opacity:1;}
  body.has-side .sheet{left:calc(50% + var(--side-w) / 2);width:min(640px,calc(100vw - var(--side-w) - 48px));}
  .sheet-grab{display:none;}
  .sheet-head{padding-top:18px;}

  /* главная: приветствие и плитки в одну строку, лента в 2–3 колонки */
  .home-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;align-items:stretch;margin-bottom:22px;}
  .home-head .welcome-card{margin:0;justify-content:center;padding:20px 22px;}
  .home-head .welcome-title{font-size:24px;}
  .home-head .quick-tiles{margin:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .feed-cover{height:210px;}
  .article{max-width:820px;}
  .article-cover{max-height:420px;}
  .article-in{padding:28px 36px 32px;}

  /* меню */
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
  .menu-search{max-width:560px;}
  .cat-block{max-width:900px;}
  .item-card{padding:32px 36px 36px;}
  .item-media{top:36px;}

  /* персонал */
  .pers{max-width:1120px;}
  .pers-stats{max-width:620px;}
  .wallet.open .wallet-deck{grid-template-columns:repeat(3,minmax(0,1fr));}
  .emp-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start;}
  .emp-side .block{position:sticky;top:24px;}
  #view .form{max-width:720px;}
  .row-btn{max-width:900px;}

  /* личный кабинет */
  .lk{max-width:1120px;margin:0;}
  .lk-layout{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start;}
  .lk-left{position:sticky;top:24px;}
  .lk-card{margin:0;}
  .lk-right .lk-sec-first{margin-top:0;}

  /* экран входа: панель бренда слева, форма справа */
  .auth-screen{padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1fr);align-items:stretch;background:var(--cream);}
  .auth-aside{display:flex;flex-direction:column;position:relative;overflow:hidden;padding:48px clamp(40px,5vw,72px);
    background:var(--brand);color:#FFFFFF;}
  .auth-aside .brand-word,.auth-aside .brand-mark{background:#FFFFFF;}
  .auth-aside .brand-word{height:36px;}
  .auth-aside .brand-name{color:#FFFFFF;}
  .auth-aside-main{margin-top:auto;margin-bottom:auto;position:relative;z-index:1;max-width:460px;}
  .auth-aside-title{font-family:var(--font-head);font-weight:500;font-size:clamp(34px,3.4vw,48px);line-height:1.08;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;}
  .auth-aside-list{margin-top:28px;display:flex;flex-direction:column;gap:14px;font-size:16px;}
  .auth-aside-list li{display:flex;align-items:center;gap:12px;}
  .auth-aside-list svg{width:22px;height:22px;flex:none;opacity:.9;}
  .auth-aside-org{position:relative;z-index:1;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;}
  .auth-aside-mark{position:absolute;right:-12%;bottom:-10%;width:72%;aspect-ratio:342/228;background:#FFFFFF;opacity:.08;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;}
  .auth-card{align-self:center;justify-self:center;box-shadow:none;border:0;background:transparent;max-width:440px;margin:40px;}
  .auth-card .auth-brand{display:none;}
}

/* Большие мониторы */
@media (min-width:1440px){
  .feed{grid-template-columns:repeat(3,minmax(0,1fr));}
  #view > *{max-width:1240px;}
}

/* Тёмная тема для панели бренда остаётся в цвете бренда — менять не нужно */