/* Оформление панели управления jbt.1250098.ru.

   Вся косметика панели собрана здесь: разметка в шаблонах классы только называет.
   Стиль — выбор владельца 20.09.2026 (вариант «плашки модулей» из презентации
   panel-zoho-dorabotka-2026-09-20): шапка цвета Zoho, плашка департамента с двумя
   буквами и своим цветом, поиск справа в шапке.
   Цвета сняты пипеткой с интерфейса Zoho CRM, а не подобраны на глаз:
   шапка #213557, акцент кнопок #4a5ce8. */
:root{
  --navy:#213557;          /* шапка */
  --accent:#4a5ce8;        /* ссылки, наведение */
  --bg:#f4f5fa;
  --card:#fff;
  --ink:#1d2433;
  --ink-soft:#5a6375;
  --ink-faint:#8a91a2;
  --line:#e4e7ef;
  --line-soft:#eef0f5;
  --hover:#f4f6fd;
  --radius:12px;
  --maxw:1360px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14.5px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------------- шапка */
.p-head{background:var(--navy);color:#fff}
.p-head__inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;min-height:90px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.p-head__brand{display:flex;align-items:center;gap:14px}
.p-head__brand img{height:42px;width:auto;display:block}
.p-head__sub{font-size:15px;color:#a9b6cc}
.p-head__who{font-size:12.5px;color:#8b9ab4}

/* поиск — пилюля, как строка Search в интерфейсе Zoho */
.p-search{margin-left:auto;position:relative;width:340px}
.p-search input{width:100%;height:42px;border-radius:21px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);color:#fff;padding:0 36px 0 40px;font-size:14px;
  font-family:inherit;outline:none}
.p-search input::placeholder{color:#a9b4c8}
.p-search input::-webkit-search-cancel-button{display:none}
.p-search input:focus{background:#fff;color:var(--ink);border-color:#fff}
.p-search input:focus::placeholder{color:#98a0b0}
.p-search__icon{position:absolute;left:14px;top:12px;color:#a9b4c8;pointer-events:none}
.p-search input:focus ~ .p-search__icon{color:#6a7385}
.p-search__clear{position:absolute;right:13px;top:9px;font-size:19px;line-height:24px;
  color:#a9b4c8;cursor:pointer;display:none}
.p-search input:focus ~ .p-search__clear{color:#8a91a2}

/* ----------------------------------------------------------------- тело */
.p-main{max-width:var(--maxw);margin:0 auto;padding:22px 24px 50px}
.p-lede{margin:0 0 16px;color:var(--ink-soft);font-size:13.5px;max-width:760px}
.p-found{margin:0 0 14px;font-size:13.5px;color:var(--ink-soft);display:none}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:16px;align-items:start}

.p-dept{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(25,35,60,.04);overflow:hidden}
.p-dept__head{padding:15px 18px 12px;display:flex;gap:11px;align-items:flex-start}
/* плашка департамента: цвет свой, скругление 9px — приём Zoho */
.p-badge{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--c,var(--accent));color:#fff;font-size:13px;font-weight:700}
.p-dept__title{display:block;font-size:15.5px;font-weight:600}
.p-dept__title:hover{color:var(--accent)}
.p-dept__tagline{margin:3px 0 0;font-size:12.5px;color:var(--ink-faint);line-height:1.4}
.p-list{list-style:none;margin:0;padding:0 10px 6px}
.p-list li{margin:0}
.p-row{display:block;padding:7px 10px;border-radius:7px}
.p-row:hover{background:var(--hover)}
.p-row:hover .p-link{color:var(--accent)}
.p-link{display:block;font-size:14px}
.p-link--ext::after{content:" ↗";color:var(--ink-faint);font-size:12px}
.p-note{display:block;font-size:12px;color:var(--ink-faint);margin-top:1px}
.p-dept__more{display:block;padding:11px 18px;font-size:12.5px;color:var(--accent);
  border-top:1px solid var(--line-soft)}
.p-dept__more:hover{background:var(--hover)}

.p-unassigned{margin-top:24px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px}
.p-unassigned h2{margin:0 0 8px;font-size:14px;font-weight:600}
.p-unassigned .p-row{display:inline-block;padding:5px 8px}
.p-unassigned .p-link{font-size:13.5px;color:var(--ink-soft)}

/* --------------------------------------------------- страница департамента */
.p-crumbs{margin:0 0 6px;font-size:13px;color:var(--ink-faint)}
.p-crumbs a:hover{color:var(--accent)}
.p-titlebar{display:flex;gap:12px;align-items:center;margin:0 0 4px}
.p-title{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em}
.p-subtitle{margin:0 0 18px;color:var(--ink-soft);font-size:14px}
.p-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:16px;align-items:start} /* start — иначе короткая группа тянется на высоту соседней */
.p-group{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(25,35,60,.04);padding:14px 10px 10px}
.p-group__title{margin:0 0 6px;padding:0 8px;font-size:12px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.p-nav{margin-top:26px;font-size:13.5px;color:var(--ink-soft)}
.p-nav a{margin-left:12px;color:var(--accent)}

.p-foot{max-width:var(--maxw);margin:0 auto;padding:22px 0 0;font-size:12.5px;
  color:var(--ink-faint);border-top:1px solid var(--line);margin-top:28px}
.p-foot a{color:var(--accent)}

.is-hidden{display:none!important}
mark{background:#fff2b8;color:inherit;border-radius:3px;padding:0 1px}

@media(max-width:700px){
  .p-head__inner{padding:14px 16px;min-height:0}
  .p-search{width:100%;margin:0}
  .p-main{padding:18px 16px 40px}
  .p-grid,.p-groups{grid-template-columns:1fr}
}