/* Каркас: сайдбар, топбар, контент. Перенесено из legacy/index.original.html, строки 43–103. */
/* Layout */
#app{display:flex;min-height:100vh;}
.sidebar{
  width:236px;flex:none;background:var(--navy);color:#DCE6EE;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar .brand{
  padding:22px 20px 16px;border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar .brand .logo{
  font-weight:800;font-size:15px;letter-spacing:0.3px;color:#fff;
  display:flex;align-items:center;gap:8px;
}
.sidebar .brand .logo .mark{
  width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--teal),#16867c);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex:none;
}
.sidebar .brand .sub{font-size:11.5px;color:#8FA4B8;margin-top:6px;}
.nav-group{padding:14px 10px;}
.nav-group .label{font-size:10.5px;color:#6E8AA1;padding:8px 12px 4px;font-weight:700;letter-spacing:0.4px;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:#C7D6E2;margin-bottom:2px;transition:background .12s, color .12s;
}
.nav-item .ic{width:17px;height:17px;flex:none;opacity:0.85;}
.nav-item:hover{background:rgba(255,255,255,0.06);color:#fff;cursor:pointer;}
.nav-item.active{background:var(--teal);color:#fff;}
.nav-item.active .ic{opacity:1;}
.nav-item .count{
  margin-left:auto;background:rgba(255,255,255,0.12);color:#fff;border-radius:20px;
  font-size:10.5px;padding:1px 7px;font-weight:700;
}
.nav-item.active .count{background:rgba(255,255,255,0.28);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  height:64px;flex:none;background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:20;
}
.topbar .greet{font-size:16px;font-weight:700;}
.topbar .greet-sub{font-size:12px;color:var(--muted);font-weight:500;}
.topbar .search{
  flex:1;max-width:420px;margin:0 24px;position:relative;
}
.topbar .search input{
  width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:8px;background:var(--bg);outline:none;
}
.topbar .search input:focus{border-color:var(--teal);background:#fff;}
.topbar .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);width:15px;height:15px;}
.topbar .user{display:flex;align-items:center;gap:10px;}
.topbar .avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.topbar .role-toggle{
  display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);background:var(--bg);border:1px solid var(--border);
  padding:6px 10px;border-radius:20px;cursor:pointer;user-select:none;
}
.topbar .role-toggle b{color:var(--navy);}

.content{padding:24px 26px 60px;max-width:1400px;width:100%;margin:0 auto;}
.page-title{font-size:20px;font-weight:800;margin:0 0 2px;}
.page-sub{font-size:13px;color:var(--muted);margin:0 0 20px;}


/* Шапка на планшете и телефоне (22.10.2026). На компьютере шапка как в макете.
   До 860 px: поиск ближе к соседям. До 640 px: приветствие обрезается многоточием,
   поиск сворачивается в кнопку-лупу и раскрывается на всю ширину шапки при нажатии. */
@media(max-width:860px){
  .topbar{padding:0 14px;gap:10px;}
  .topbar .search{margin:0 8px;}
}
@media(max-width:640px){
  .topbar{padding:0 12px;gap:8px;}
  .topbar > div:nth-child(2){flex:1;min-width:0;}
  .topbar .greet,.topbar .greet-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar .greet{font-size:14px;line-height:1.3;}
  .topbar .greet-sub{font-size:11px;}
  .topbar .search{flex:none;width:38px;max-width:none;margin:0;position:static;}
  .topbar .search input{height:38px;padding:0 0 0 38px;cursor:pointer;color:transparent;}
  .topbar .search input::placeholder{color:transparent;}
  .topbar .search svg{left:auto;margin-left:12px;pointer-events:none;}
  .topbar .search:focus-within{position:absolute;left:12px;right:12px;top:13px;width:auto;z-index:5;}
  .topbar .search:focus-within input{padding-left:34px;color:var(--text);cursor:text;background:#fff;}
  .topbar .search:focus-within input::placeholder{color:var(--muted);}
  .topbar .search:focus-within svg{margin-left:0;left:11px;}
  .topbar .search .gs-results{left:0;right:0;width:auto;}
  .topbar .user{gap:6px;flex:none;}
  .topbar .user .btn-sm{padding:6px 9px;}
  .topbar .bell-btn{width:36px;height:36px;}
  .topbar .avatar{width:32px;height:32px;font-size:12px;}
  .topbar .bell-panel{position:fixed;left:12px;right:12px;top:68px;width:auto;}
}

/* Таблицы на планшете и телефоне: прокручиваются вбок внутри своего блока, страница не расползается. */
@media(max-width:860px){
  .table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
}

/* Таблицы на телефоне (до 640 px, 22.10.2026): каждая строка — карточка, значения в две колонки
   с подписями из заголовков (подписи ставит labelTableCells в shell.js). Первая колонка (имя,
   номер) — заголовок карточки на всю ширину. Таблицы без заголовков остаются с прокруткой вбок. */
@media(max-width:640px){
  .table.table-cards{display:block;overflow:visible;white-space:normal;background:none;border:none;border-radius:0;}
  .table.table-cards thead{display:none;}
  .table.table-cards tbody{display:block;}
  .table.table-cards tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:11px 12px;margin-bottom:8px;box-shadow:var(--shadow);}
  .table.table-cards td{display:block;padding:0;border:none;font-size:12.5px;min-width:0;overflow-wrap:anywhere;}
  .table.table-cards td::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:600;color:var(--muted);margin-bottom:1px;}
  .table.table-cards td:first-child{grid-column:1 / -1;font-size:13.5px;font-weight:700;}
  .table.table-cards td:first-child::before{display:none;}
  .table.table-cards td.no-label{grid-column:1 / -1;}
  .table.table-cards td.no-label::before,.table.table-cards td[data-label=""]::before{display:none;}
  .table.table-cards td:empty{display:none;}
}