/* O2 Consulting — матрица компетенций. Фирменный минимализм. */
:root{
  --cyan:#00A3E0;        /* Process Cyan C */
  --cyan-light:#5BC2E7;  /* 2985 C */
  --graphite:#5B6770;    /* 431 C */
  --teal-dark:#003B49;   /* 309 C */
  --gray-light:#D0D3D4;  /* 427 C 50% */
  --ink:#25282A;         /* 426 C */
  --bg:#ffffff;
  --bg-soft:#f5f7f8;
  --line:#e3e8ea;
  --cell:34px;
  --radius:8px;
  --shadow:0 1px 3px rgba(37,40,42,.08),0 1px 2px rgba(37,40,42,.06);
  --font:"Fira Sans","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg-soft);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}

/* ---- Логотип ---- */
.logo{display:flex;align-items:baseline;font-weight:600;letter-spacing:-.02em;
  color:var(--graphite);font-size:22px;user-select:none}
.logo .o{color:var(--graphite)}
.logo .two{color:var(--cyan);font-size:15px;position:relative;top:3px;margin:0 1px}
.logo .word{color:var(--graphite);font-weight:400;margin-left:4px}
.logo .shield{display:inline-block;width:22px;height:26px;margin-left:10px;
  background:
    linear-gradient(var(--cyan),var(--cyan)) ,
    radial-gradient(var(--cyan-light),var(--cyan-light));
  -webkit-mask:var(--shield-mask);mask:var(--shield-mask);position:relative;top:4px}

/* ---- Шапка ---- */
header{position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.bar{display:flex;align-items:center;gap:18px;padding:12px 22px;flex-wrap:wrap}
.bar .spacer{flex:1}
.org-switch{display:inline-flex;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;padding:3px}
.org-switch button{border:0;background:transparent;color:var(--graphite);
  padding:6px 18px;border-radius:999px;font-weight:500;font-size:13px;transition:.15s}
.org-switch button.active{background:var(--cyan);color:#fff}
.org-switch button:not(.active):hover{color:var(--ink)}

.btn{border:1px solid var(--line);background:var(--bg);color:var(--graphite);
  padding:8px 14px;border-radius:var(--radius);font-weight:500;font-size:13px;transition:.15s}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn.primary:hover{background:#0090c7;color:#fff}
.btn.ghost{border-color:transparent;background:transparent}
.btn.danger{color:#c0392b;border-color:#f0d4cf}
.btn.danger:hover{background:#fbeae7;border-color:#c0392b;color:#c0392b}
.btn.on{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.btn.small{padding:5px 10px;font-size:12px}

/* ---- Панель инструментов ---- */
.toolbar{display:flex;align-items:center;gap:12px;padding:12px 22px;flex-wrap:wrap;
  background:var(--bg);border-bottom:1px solid var(--line)}
.toolbar input[type=search],.toolbar select{
  border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;
  background:var(--bg);color:var(--ink);min-width:200px}
.toolbar input[type=search]:focus,.toolbar select:focus{outline:2px solid var(--cyan-light);border-color:var(--cyan)}
.toolbar .lbl{color:var(--graphite);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.legend{display:flex;align-items:center;gap:16px;color:var(--graphite);font-size:12px}
.legend .swatch{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:5px}
.legend .swatch.has{background:var(--cyan)}
.legend .swatch.flag{background:#fff;border:1px solid var(--line);position:relative}
.legend .swatch.flag::after{content:"";position:absolute;top:1px;right:1px;width:5px;height:5px;border-radius:50%;background:#e74c3c}

/* ---- Матрица ---- */
.matrix-wrap{overflow:auto;max-height:calc(100vh - 150px);margin:0;background:var(--bg)}
table.matrix{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
table.matrix th,table.matrix td{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

/* углы и заголовки */
.corner{position:sticky;left:0;top:0;z-index:25;background:var(--bg);
  min-width:340px;max-width:340px;text-align:left;padding:10px 14px;
  border-bottom:2px solid var(--graphite)!important;vertical-align:bottom}
.corner .title{font-weight:600;color:var(--teal-dark);font-size:15px}
.corner .sub{color:var(--graphite);font-size:11px;margin-top:2px}

thead .practice-row th{position:sticky;top:0;z-index:20;background:var(--graphite);color:#fff;
  font-weight:500;font-size:12px;padding:8px 10px;text-align:center;border-right:1px solid #6f7a82;
  white-space:nowrap}
thead .practice-row th.sticky-corner{z-index:26}

thead .emp-row th{position:sticky;top:34px;z-index:20;background:var(--bg-soft);
  color:var(--ink);font-weight:500;font-size:12px;vertical-align:bottom;
  height:150px;padding:8px 4px;text-align:center}
.emp-name{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  display:inline-block;max-height:130px;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.emp-row th{min-width:var(--cell);max-width:var(--cell);width:var(--cell)}
.emp-row th.partner .emp-name{color:var(--cyan);font-weight:600}
.emp-row th.unnamed .emp-name{color:var(--ink)}
.emp-tools{display:flex;justify-content:center;gap:3px;margin-top:6px}
.emp-tools button{border:0;background:transparent;color:var(--graphite);font-size:12px;padding:1px 3px;border-radius:3px}
.emp-tools button:hover{color:var(--cyan)}

/* строки компетенций */
.comp-cell{position:sticky;left:0;z-index:10;background:var(--bg);
  min-width:340px;max-width:340px;padding:7px 14px;text-align:left;vertical-align:middle}
tbody tr:nth-child(even) .comp-cell{background:var(--bg)}
.comp-ru{color:var(--ink);font-size:13px;line-height:1.35}
.comp-en{color:var(--graphite);font-size:11px;margin-top:2px}
.comp-tools{float:right;display:flex;gap:2px;opacity:0;transition:.1s}
tr:hover .comp-tools{opacity:1}
.comp-tools button{border:0;background:transparent;color:var(--graphite);font-size:12px;padding:1px 4px;border-radius:3px}
.comp-tools button:hover{color:var(--cyan)}

td.cell{width:var(--cell);min-width:var(--cell);max-width:var(--cell);height:var(--cell);
  text-align:center;padding:0;position:relative;background:var(--bg)}
tbody tr:nth-child(even) td.cell{background:var(--bg)}
.dot{width:18px;height:18px;border-radius:4px;display:inline-block;vertical-align:middle;transition:.1s}
td.cell.has .dot{background:var(--cyan)}
td.cell.has.partner-col .dot{background:var(--teal-dark)}
td.cell .flag{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;
  background:#e74c3c;box-shadow:0 0 0 1px #fff}
.edit-on td.cell{cursor:pointer}
.edit-on td.cell:hover{outline:2px solid var(--cyan-light);outline-offset:-2px}
.col-hi{background:#eef9fd!important}

.empty-note{padding:60px 24px;text-align:center;color:var(--graphite)}
.empty-note h3{color:var(--teal-dark);font-weight:600;margin:0 0 8px}

/* ---- Модальные окна ---- */
.overlay{position:fixed;inset:0;background:rgba(37,40,42,.45);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:60px 16px;overflow:auto}
.modal{background:var(--bg);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);
  width:100%;max-width:560px;overflow:hidden}
.modal.wide{max-width:780px}
.modal header{position:static;box-shadow:none;border-bottom:1px solid var(--line)}
.modal .mhead{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal .mhead h2{margin:0;font-size:16px;color:var(--teal-dark);font-weight:600;flex:1}
.modal .mbody{padding:20px;max-height:60vh;overflow:auto}
.modal .mfoot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:var(--bg-soft)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--graphite);margin-bottom:5px;font-weight:500}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);
  border-radius:var(--radius);padding:9px 12px;background:var(--bg);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan-light);border-color:var(--cyan)}
.field textarea{min-height:90px;resize:vertical}
.checkbox{display:flex;align-items:center;gap:8px}
.checkbox input{width:auto}
.x{border:0;background:transparent;font-size:20px;color:var(--graphite);line-height:1;padding:0 4px}
.x:hover{color:var(--ink)}

/* списки управления */
.mgmt-list{list-style:none;margin:0;padding:0}
.mgmt-list li{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.mgmt-list li .grow{flex:1;min-width:0}
.mgmt-list li .grow .pr{font-size:11px;color:var(--graphite)}
.mgmt-list li .nm{color:var(--ink)}
.mgmt-list li .nm.empty{color:#b3bcc1;font-style:italic}
.tag{display:inline-block;background:#eef9fd;color:var(--cyan);border-radius:999px;
  font-size:10px;padding:1px 8px;margin-left:6px}

/* ---- Логин ---- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:var(--bg);border-radius:14px;box-shadow:var(--shadow);
  padding:38px 34px;width:100%;max-width:380px;text-align:center}
.login-card .logo{justify-content:center;margin-bottom:8px}
.login-card p{color:var(--graphite);margin:0 0 22px;font-size:13px}
.login-card .field{text-align:left}
.login-card .err{color:#c0392b;font-size:13px;min-height:18px;margin-top:4px}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--teal-dark);color:#fff;padding:11px 20px;border-radius:999px;
  font-size:13px;z-index:200;box-shadow:var(--shadow);opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1}
.note-pop{position:absolute;z-index:60;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:12px;min-width:240px;max-width:320px}
.note-pop .nt{font-size:13px;color:var(--ink);white-space:pre-wrap;margin-bottom:8px}
.note-pop .nl{font-size:11px;color:var(--graphite);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.hidden{display:none!important}


/* ---- Логотип Stream в переключателе ---- */
.org-switch button{display:inline-flex;align-items:center;gap:7px}
.stream-mark{width:16px;height:16px;display:inline-block;flex:none}
.org-switch button.active .stream-mark path{stroke:#fff}

/* ---- Тумблер «безымянные» ---- */
.toolbar .toggle{display:inline-flex;align-items:center;gap:7px;color:var(--graphite);font-size:13px;cursor:pointer;user-select:none}
.toolbar .toggle input{width:auto;margin:0}

/* ---- «Мне нужно»: глобальный поиск по двум компаниям ---- */
.btn.find{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.btn.find:hover{background:#00505f;color:#fff}
.find-input{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-size:15px;background:var(--bg);color:var(--ink)}
.find-input:focus{outline:2px solid var(--cyan-light);border-color:var(--cyan)}
.find-hint{color:var(--graphite);font-size:12px;margin:8px 2px 0}
.find-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.find-chips button{border:1px solid var(--line);background:var(--bg-soft);color:var(--graphite);border-radius:999px;padding:4px 12px;font-size:12px}
.find-chips button:hover{border-color:var(--cyan);color:var(--cyan)}
.find-results{margin-top:16px}
.find-block{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.find-block h4{margin:0 0 2px;font-size:14px;color:var(--teal-dark);font-weight:600}
.find-block .en{color:var(--graphite);font-size:11px;margin-bottom:8px}
.find-org{margin-top:8px}
.find-org .lbl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--graphite);margin-bottom:5px}
.find-org .lbl .badge{width:9px;height:9px;border-radius:3px}
.find-org .lbl .badge.o2{background:var(--cyan)}
.find-org .lbl .badge.stream{background:#3e5fd9}
.person{display:inline-flex;flex-direction:column;gap:1px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin:0 6px 6px 0}
.person .pn{font-size:13px;color:var(--ink)}
.person .pp{font-size:11px;color:var(--graphite)}
.person.partner .pn{color:var(--cyan);font-weight:600}
.person .pnote{font-size:11px;color:#c0392b;margin-top:2px}
.find-empty{color:var(--graphite);padding:24px 4px;text-align:center}


/* ---- Чек-лист компетенций в карточке сотрудника ---- */
.cmp-list{border:1px solid var(--line);border-radius:var(--radius);max-height:240px;overflow:auto;padding:4px}
.cmp-row{display:flex;align-items:flex-start;gap:9px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--ink)}
.cmp-row:hover{background:var(--bg-soft)}
.cmp-row input{width:auto;margin:2px 0 0}

/* ---- «Мне нужно»: секции и компетенции сотрудника ---- */
.find-section{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--graphite);margin:18px 2px 8px}
.find-section:first-child{margin-top:4px}
.find-block .en .badge{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:0}
.find-block .en .badge.o2{background:var(--cyan)}
.find-block .en .badge.stream{background:#3e5fd9}
.skill-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.skill{background:#eef9fd;color:var(--teal-dark);border-radius:6px;padding:4px 9px;font-size:12px}
.skill-note{color:#c0392b}

/* ---- Фикс «серого»: угол и шапка ---- */
thead .practice-row th{background:var(--teal-dark)!important;border-right-color:#0a4a59!important}
thead .practice-row th.corner{background:#fff!important}
thead .emp-row th{background:#fff!important}
.corner{background:#fff!important}