/* =============================================================
   RAM Board — микро-CRM (crm.ramsystemlab.ru)
   Mobile-first. Основная проверка — телефон: ничего не наезжает,
   не обрезается, тач-зоны ≥44px.
   ============================================================= */

:root{
  --bg:#0B0E13; --bg-2:#0F131A; --surface:#141924; --surface-2:#1A2130;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#EDF1F7; --muted:#97A3B6; --muted-2:#6B7789;
  --accent:#4DA3FF; --accent-2:#7C5CFF; --accent-soft:rgba(77,163,255,.12);
  --ok:#3ED598; --warn:#FFB84D; --danger:#FF6B6B;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --header-h:58px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{ font:inherit; color:inherit; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.2; font-weight:600; letter-spacing:-.01em; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

/* ---------------------------- Header ---------------------------- */

.topbar{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
  background:rgba(11,14,19,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.brand__mark{
  width:28px; height:28px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid; place-items:center;
  font-family:var(--mono); font-size:10px; font-weight:700; color:#08111F;
}
.brand__txt{ font-size:14px; font-weight:600; white-space:nowrap; }
.brand__txt small{ display:block; font-size:9.5px; color:var(--muted-2); font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; }

.topbar__spacer{ flex:1 1 auto; min-width:0; }

.rolepick{
  display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:4px; flex:0 0 auto;
}
.rolepick button{
  border:0; background:transparent; color:var(--muted);
  padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:500;
  transition:.16s; white-space:nowrap;
}
.rolepick button.is-active{
  background:var(--accent-soft); color:var(--accent);
}

.iconbtn{
  width:38px; height:38px; flex:0 0 auto;
  border:1px solid var(--line); background:transparent;
  border-radius:10px; display:grid; place-items:center;
  color:var(--muted); transition:.16s;
}
.iconbtn:hover{ color:var(--text); border-color:var(--line-2); }

/* ---------------------------- Tabs ---------------------------- */

.viewtabs{
  display:flex; gap:6px; padding:10px 14px 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.viewtabs::-webkit-scrollbar{ display:none; }
.viewtabs button{
  flex:0 0 auto; border:1px solid var(--line); background:transparent;
  color:var(--muted); border-radius:999px; padding:9px 16px;
  font-size:13px; white-space:nowrap; transition:.16s;
}
.viewtabs button.is-active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:500; }

.view{ display:none; padding:14px; }
.view.is-active{ display:block; }

/* ---------------------------- Kanban ---------------------------- */

.board{
  display:flex; gap:12px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:10px;
  scroll-snap-type:x proximity;
}
.board::-webkit-scrollbar{ height:6px; }
.board::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }

.col{
  flex:0 0 268px; width:268px;
  scroll-snap-align:start;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column;
  max-height:calc(100vh - 190px);
}
.col__head{
  display:flex; align-items:center; gap:8px;
  padding:13px 14px; border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.col__dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.col__name{ font-size:13px; font-weight:600; }
.col__count{
  margin-left:auto; font-family:var(--mono); font-size:11px;
  color:var(--muted-2); background:rgba(255,255,255,.05);
  padding:2px 8px; border-radius:999px;
}
.col__body{
  padding:10px; display:flex; flex-direction:column; gap:9px;
  overflow-y:auto; flex:1 1 auto; min-height:60px;
}
.col__empty{
  color:var(--muted-2); font-size:12.5px; text-align:center;
  padding:18px 8px; border:1px dashed var(--line); border-radius:var(--r-md);
}

/* Карточка заявки */
.tcard{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:13px;
  cursor:pointer; transition:.16s; text-align:left; width:100%;
  display:block; color:inherit;
}
.tcard:hover{ border-color:var(--line-2); transform:translateY(-1px); }
.tcard.is-drag{ opacity:.4; }
.tcard__top{ display:flex; align-items:flex-start; gap:8px; margin-bottom:7px; }
.tcard__name{ font-size:14px; font-weight:600; flex:1 1 auto; word-break:break-word; }
.tcard__src{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent-soft); background:var(--accent-soft);
  padding:2px 7px; border-radius:999px; flex:0 0 auto;
}
.tcard__need{
  font-size:12.5px; color:var(--muted); margin-bottom:9px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tcard__meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11.5px; color:var(--muted-2); font-family:var(--mono);
}
.tcard__meta b{ color:var(--muted); font-weight:500; }
.tcard__tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:9px; }
.tag{
  font-size:10.5px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--muted);
}
.tag--hot{ border-color:rgba(255,107,107,.4); color:var(--danger); }
.tag--ok{ border-color:rgba(62,213,152,.4); color:var(--ok); }

/* ---------------------------- Card detail ---------------------------- */

.sheet{
  position:fixed; inset:0; z-index:120;
  display:none; justify-content:flex-end;
  background:rgba(6,8,12,.7); backdrop-filter:blur(4px);
}
.sheet.is-open{ display:flex; }
.sheet__box{
  width:100%; max-width:620px; height:100%;
  background:var(--bg-2); border-left:1px solid var(--line-2);
  display:flex; flex-direction:column; overflow:hidden;
}
.sheet__head{
  padding:14px 16px; border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; gap:12px; flex:0 0 auto;
}
.sheet__head h2{ font-size:17px; flex:1 1 auto; word-break:break-word; }
.sheet__body{ overflow-y:auto; flex:1 1 auto; padding:16px; -webkit-overflow-scrolling:touch; }

.dfield{ margin-bottom:16px; }
.dfield label{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:7px;
}
.dfield input, .dfield textarea, .dfield select{
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 12px; font-size:14px;
  outline:none; transition:.16s;
}
.dfield input:focus, .dfield textarea:focus, .dfield select:focus{ border-color:var(--accent); }
.dfield textarea{ resize:vertical; min-height:76px; line-height:1.5; }
.drow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.stagebar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.stagebar button{
  border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:999px; padding:8px 13px; font-size:12px; transition:.16s;
}
.stagebar button.is-active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:500; }

/* Чат внутри карточки */
.chat{ display:flex; flex-direction:column; gap:10px; }
.msg{ display:flex; gap:9px; align-items:flex-start; }
.msg__av{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:700;
  background:var(--surface-2); color:var(--muted);
}
.msg__av--ceo{ background:rgba(77,163,255,.18); color:var(--accent); }
.msg__av--svp{ background:rgba(124,92,255,.18); color:#B9A6FF; }
.msg__bubble{
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:9px 12px; font-size:13.5px;
  max-width:100%; word-break:break-word;
}
.msg__meta{ font-size:10.5px; color:var(--muted-2); font-family:var(--mono); margin-top:5px; }
.msg__bubble b{ color:var(--accent); font-weight:500; }

.chat__input{
  display:flex; gap:8px; align-items:flex-end;
  padding:12px 16px; border-top:1px solid var(--line);
  background:var(--bg-2); flex:0 0 auto;
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}
.chat__input textarea{
  flex:1 1 auto; min-height:42px; max-height:120px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 12px; font-size:14px;
  outline:none; resize:none; line-height:1.4;
}
.chat__input textarea:focus{ border-color:var(--accent); }
.chat__send{
  width:44px; height:44px; flex:0 0 auto; border-radius:12px; border:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#08111F; font-size:17px; font-weight:700;
  display:grid; place-items:center;
}

/* ---------------------------- Calendar ---------------------------- */

.cal__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; flex-wrap:wrap;
}
.cal__nav{ display:flex; align-items:center; gap:8px; }
.cal__title{ font-size:16px; font-weight:600; min-width:150px; text-align:center; }
.cal__grid{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px;
  margin-bottom:6px;
}
.cal__dow{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2); text-align:center; padding:4px 0;
}
.cal__cell{
  min-height:74px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(255,255,255,.015); padding:6px;
  display:flex; flex-direction:column; gap:4px; overflow:hidden;
}
.cal__cell--out{ opacity:.35; }
.cal__cell--today{ border-color:var(--accent); }
.cal__dayn{ font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.cal__cell--today .cal__dayn{ color:var(--accent); }
.cal__ev{
  font-size:10.5px; background:var(--accent-soft); color:var(--accent);
  border-radius:5px; padding:3px 5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.cal__ev--svp{ background:rgba(124,92,255,.16); color:#B9A6FF; }

/* ---------------------------- General chat ---------------------------- */

.gchat{
  display:flex; flex-direction:column; height:calc(100vh - 190px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg-2); overflow:hidden;
}
.gchat__body{ flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
.gchat__daynote{
  text-align:center; font-family:var(--mono); font-size:10px;
  color:var(--muted-2); letter-spacing:.14em; text-transform:uppercase;
}
.msg--mine .msg__bubble{ border-color:var(--line-2); }

/* ---------------------------- Table (все заявки) ---------------------------- */

.tablewrap{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--bg-2);
}
table{ border-collapse:collapse; width:100%; min-width:720px; font-size:13.5px; }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); font-weight:500; white-space:nowrap;
}
tbody tr:hover{ background:rgba(255,255,255,.02); }
td:first-child{ font-weight:500; }

/* ---------------------------- Modal / forms ---------------------------- */

.modal{
  position:fixed; inset:0; z-index:140; display:none;
  align-items:flex-start; justify-content:center;
  background:rgba(6,8,12,.78); backdrop-filter:blur(5px);
  overflow-y:auto; padding:14px;
}
.modal.is-open{ display:flex; }
.modal__box{
  width:100%; max-width:520px; margin-block:auto;
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:20px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; border:1px solid transparent;
  padding:12px 20px; font-size:13.5px; font-weight:500; transition:.16s;
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#08111F; font-weight:600;
}
.btn--ghost{ border-color:var(--line-2); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--block{ width:100%; }
.btn--danger{ border-color:rgba(255,107,107,.4); color:var(--danger); background:transparent; }

.syncnote{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--muted-2); font-family:var(--mono);
  padding:0 14px 10px; flex-wrap:wrap;
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); flex:0 0 auto; }
.dot--on{ background:var(--ok); }
.dot--off{ background:var(--warn); }

.empty-state{
  text-align:center; padding:44px 20px; color:var(--muted-2);
  border:1px dashed var(--line); border-radius:var(--r-lg);
}

/* ---------------------------- Mobile ---------------------------- */

@media (max-width:900px){
  .brand__txt small{ display:none; }
}

@media (max-width:680px){
  :root{ --header-h:54px; }
  body{ font-size:14.5px; }

  /* Канбан: одна колонка на экран, свайп между стадиями.
     Паддинги кратны .view, чтобы не появлялся паразитный скролл. */
  .board{
    scroll-snap-type:x mandatory;
    gap:10px;
    padding-inline:12px;
  }
  .view[data-view="board"]{ padding-inline:0; }
  .col{
    flex:0 0 calc(100vw - 38px);
    width:calc(100vw - 38px);
    max-height:none;
  }
  .col__body{ max-height:none; overflow:visible; }

  /* Детальная карточка — полноэкранная, без боковых полей */
  .sheet{ align-items:stretch; }
  .sheet__box{
    max-width:none; border-left:0; border-top:1px solid var(--line-2);
  }
  .sheet__head{ position:sticky; top:0; background:var(--bg-2); z-index:2; }

  .drow{ grid-template-columns:1fr; }

  .gchat{ height:calc(100vh - 235px); }

  .modal{ padding:0; align-items:flex-end; }
  .modal__box{
    max-width:none; border-radius:var(--r-lg) var(--r-lg) 0 0;
    max-height:92vh; overflow-y:auto;
    padding-bottom:max(20px, env(safe-area-inset-bottom));
  }

  .cal__cell{ min-height:58px; padding:4px; }
  .cal__ev{ font-size:9.5px; }
  .cal__title{ min-width:auto; font-size:14px; }
  .view{ padding:12px; }
}

@media (max-width:420px){
  .rolepick button{ padding:6px 10px; font-size:12px; }
  .col{ flex:0 0 calc(100vw - 28px); width:calc(100vw - 28px); }
  .cal__grid{ gap:3px; }
  .cal__cell{ min-height:52px; border-radius:7px; }
}