/* Finland — стили.
   Имена CSS-переменных — те же, что в RM-менеджере (--bg, --s1, --s2,
   --bdr, --txt, --accent, ...), чтобы секция .fin-* при переносе на
   этапе 1 легла без правок. */

:root{
  --bg:#f5f6f8; --s1:#ffffff; --s2:#eef0f3;
  --bdr:#d9dce1; --bdr2:#c4c9d0;
  --txt:#1c2026; --txt2:#5a6270; --txt3:#8a92a0;
  --accent:#2f6fdb; --green:#2e9e5b; --red:#d3455b;
  --adim:#e3ecfb; --gdim:#e2f3e9; --rdim:#fbe5e9;
}
[data-theme="dark"]{
  --bg:#16181d; --s1:#1f232a; --s2:#262b33;
  --bdr:#333944; --bdr2:#414855;
  --txt:#e8eaee; --txt2:#a7aeba; --txt3:#727a88;
  --accent:#5b93ea; --green:#4cba79; --red:#e06378;
  --adim:#24303f; --gdim:#223529; --rdim:#3a252b;
}

*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--txt)}

/* ── Логин ── */
#login-view{display:flex;min-height:100vh;align-items:center;justify-content:center}
#login-form{background:var(--s1);border:1px solid var(--bdr);border-radius:10px;
  padding:32px;width:320px;display:flex;flex-direction:column;gap:12px}
#login-form h1{margin:0 0 8px;font-size:20px;text-align:center}
#login-form input{padding:9px 12px;border:1px solid var(--bdr);border-radius:6px;
  background:var(--bg);color:var(--txt);font:inherit}
#login-form button{padding:9px;border:0;border-radius:6px;background:var(--accent);
  color:#fff;font:inherit;cursor:pointer}
#login-err{color:var(--red);font-size:13px;min-height:16px}

/* ── Каркас приложения ── */
/* Флекс-колонка на всю высоту — #finance-view растягивается через flex:1,
   как в RM (там ту же роль играет контейнер views). */
#app-view{display:none}
#app-view.shown{display:flex;flex-direction:column;height:100vh}
.topbar{flex-shrink:0}
#board-view{display:none}
#board-view.shown{display:flex;justify-content:center}
#login-view.hidden{display:none}
.topbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding:10px 16px;background:var(--s1);border-bottom:1px solid var(--bdr)}
.topbar button{padding:6px 12px;border:1px solid var(--bdr);border-radius:6px;
  background:var(--s2);color:var(--txt);cursor:pointer}
.placeholder{padding:48px;text-align:center;color:var(--txt3)}


/* ── Общие элементы (копии из RM-менеджера main.css) ── */

.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;
  font-family:'Martian Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.04em;
  cursor:pointer;border:1px solid;transition:all .15s;white-space:nowrap}

.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}

.btn-primary:hover{opacity:.85}

.btn-primary:disabled{opacity:.4;cursor:not-allowed}

.btn-ghost{background:transparent;color:var(--txt2);border-color:var(--bdr2)}

.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.btn-sm{padding:4px 10px;font-size:9px}

#toast{position:fixed;bottom:18px;right:18px;z-index:10300;padding:9px 15px;
  border-radius:7px;font-size:12px;font-weight:600;opacity:0;
  transform:translateY(5px);transition:opacity .3s,transform .3s;
  pointer-events:none;background:var(--s1);
  box-shadow:0 6px 18px rgba(0,0,0,.28);max-width:min(420px,calc(100vw - 36px));
  white-space:pre-wrap;word-break:break-word}

#toast.show{opacity:1;transform:none;pointer-events:auto}

#toast.show:hover{box-shadow:0 8px 22px rgba(0,0,0,.35)}

#toast.ok{color:var(--green);border:1px solid rgba(54,201,142,.55)}

#toast.err{color:var(--red);border:1px solid rgba(230,50,68,.55)}

#toast.info{color:var(--accent);border:1px solid rgba(76,142,245,.55)}

.cal-confirm-row{display:flex;gap:8px;align-items:center;
  font-size:12px;color:var(--txt2)}

.cal-confirm-row b{color:var(--txt)}

.staff-head-icon{color:var(--orange,#b38600);margin-right:3px;font-size:11px}


/* ════════════════════════════════════════════════════════════
   FINANCE MODULE (FINANCE-PHASE-0)
   Подробнее — docs/finance-module-design.md
   Префикс класса .fin-*
   ════════════════════════════════════════════════════════════ */

#finance-view{display:none;flex:1;flex-direction:column;overflow:hidden}
#finance-view.shown{display:flex}

.fin-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:var(--s1);border-bottom:1px solid var(--bdr);flex-shrink:0}
.fin-title{font-size:16px;font-weight:600;color:var(--txt)}
.fin-title-pill{font-size:11px;color:var(--txt3);background:var(--adim);
  padding:2px 8px;border-radius:4px;margin-left:8px}

.fin-body{display:flex;flex:1;overflow:hidden}
/* WHY: .fin-noaccess/.fin-body имеют display:flex — это перебивает дефолтное
   [hidden]{display:none}, и атрибут hidden из JS не работает.
   Двухатрибутный селектор повышает специфичность до (0,2,0) — выигрывает. */
.fin-noaccess[hidden],
.fin-body[hidden]{display:none}
.fin-sidebar{width:200px;background:var(--s2);border-right:1px solid var(--bdr);
  overflow-y:auto;padding:8px 0;flex-shrink:0}
.fin-side-item{display:flex;align-items:center;gap:8px;padding:10px 16px;
  cursor:pointer;color:var(--txt2);border-left:3px solid transparent;font-size:14px}
.fin-side-item:hover{background:var(--adim);color:var(--txt)}
.fin-side-item.active{background:var(--bg);color:var(--accent);
  border-left-color:var(--accent);font-weight:500}
.fin-side-icon{font-size:16px;width:20px;text-align:center}
.fin-side-sep{height:1px;background:var(--bdr);margin:8px 12px}
.fin-side-label{font-size:11px;color:var(--txt3);text-transform:uppercase;
  letter-spacing:.5px;padding:4px 16px}

.fin-main{flex:1;overflow-y:auto;padding:20px 24px;background:var(--bg)}
.fin-section-title{font-size:18px;font-weight:600;color:var(--txt);
  margin:0 0 16px;display:flex;align-items:center;gap:10px}
.fin-section-hint{color:var(--txt3);font-size:13px;line-height:1.5;
  margin-bottom:16px}

.fin-card{background:var(--s1);border:1px solid var(--bdr);
  border-radius:8px;padding:16px;margin-bottom:16px}
.fin-card-h{font-weight:600;color:var(--txt);margin-bottom:10px;
  display:flex;align-items:center;gap:8px}

.fin-table{width:100%;border-collapse:collapse;font-size:13px}
.fin-table th{text-align:left;padding:8px 10px;background:var(--s2);
  color:var(--txt2);font-weight:500;border-bottom:1px solid var(--bdr)}
.fin-table td{padding:8px 10px;border-bottom:1px solid var(--bdr);color:var(--txt)}
.fin-table tr:hover td{background:var(--adim)}
.fin-table .fin-td-num{text-align:right;font-variant-numeric:tabular-nums}
.fin-table .fin-td-actions{text-align:right;white-space:nowrap}
.fin-table-empty{padding:20px;text-align:center;color:var(--txt3)}

.fin-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.fin-row label{color:var(--txt2);font-size:13px;min-width:140px}
.fin-row input,.fin-row select{background:var(--bg);border:1px solid var(--bdr2);
  border-radius:5px;padding:6px 10px;color:var(--txt);font-size:13px;min-width:180px}
.fin-row input:focus,.fin-row select:focus{outline:none;border-color:var(--accent)}
.fin-row .fin-num{text-align:right;font-variant-numeric:tabular-nums;min-width:120px}

.fin-muted{color:var(--txt3);font-size:12px}
.fin-error{color:var(--red);font-size:13px;margin-top:8px}
.fin-ok{color:var(--green);font-size:13px;margin-top:8px}

/* ── Модалки финраздела (вход / setup / change-passphrase) ── */
.fin-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;z-index:1500}
.fin-modal-overlay[hidden]{display:none}
.fin-modal{background:var(--bg);border:1px solid var(--bdr);border-radius:10px;
  width:520px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 8px 32px rgba(0,0,0,.4)}
.fin-modal-hdr{display:flex;align-items:center;padding:14px 18px;
  border-bottom:1px solid var(--bdr)}
.fin-modal-title{font-size:15px;font-weight:600;color:var(--txt);flex:1}
.fin-modal-body{padding:18px;overflow-y:auto;flex:1}
.fin-modal-foot{display:flex;gap:8px;justify-content:flex-end;
  padding:12px 18px;border-top:1px solid var(--bdr)}

.fin-modal p{color:var(--txt2);margin:0 0 12px;line-height:1.5;font-size:13px}
.fin-modal label{display:block;margin-bottom:4px;color:var(--txt2);font-size:13px}
.fin-modal input[type="password"],
.fin-modal input[type="month"],
.fin-modal input[type="text"]{width:100%;padding:8px 12px;
  background:var(--s1);border:1px solid var(--bdr2);border-radius:6px;
  color:var(--txt);font-size:14px;font-family:inherit;box-sizing:border-box}
.fin-modal input[type="password"]:focus,
.fin-modal input[type="month"]:focus,
.fin-modal input[type="text"]:focus{outline:none;border-color:var(--accent)}

/* ── Постоянная кнопка-глаз для всех password-полей финраздела ──
   Нативная Edge-иконка ::-ms-reveal видна только на фокусе — пропадает
   при переходе к следующему полю. Заменяем своей, перманентной. */
.fin-pw-wrap{position:relative;display:block;width:100%}
.fin-pw-wrap > input{padding-right:36px !important}
.fin-pw-wrap > input::-ms-reveal,
.fin-pw-wrap > input::-ms-clear{display:none}
.fin-pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;background:none;border:none;cursor:pointer;
  color:var(--txt3);font-size:14px;padding:0;display:flex;
  align-items:center;justify-content:center;border-radius:4px}
.fin-pw-eye:hover{color:var(--txt);background:var(--adim)}

.fin-modal-warn{background:rgba(255,180,60,.1);border-left:3px solid #ffb43c;
  padding:10px 12px;margin:12px 0;border-radius:0 5px 5px 0;
  color:var(--txt2);font-size:12px;line-height:1.5}

.fin-modal-section{margin-bottom:16px;padding-bottom:16px;
  border-bottom:1px solid var(--bdr)}
.fin-modal-section:last-child{border-bottom:none;padding-bottom:0}
.fin-modal-section-h{font-weight:600;color:var(--txt);margin-bottom:10px;
  font-size:13px}

.fin-busy{color:var(--txt3);font-style:italic}

/* ── Виджет «нет доступа» ── */
.fin-noaccess{flex:1;display:flex;align-items:center;justify-content:center;
  padding:60px 20px;text-align:center;color:var(--txt2);font-size:14px;
  line-height:1.6}
.fin-noaccess-box{max-width:480px}
.fin-noaccess-icon{font-size:40px;margin-bottom:16px;opacity:.6}

/* ── Кнопки финраздела ── */
.fin-btn-danger{background:var(--rdim);color:var(--red);
  border:1px solid rgba(239,83,80,.3);padding:6px 12px;border-radius:5px;
  cursor:pointer;font-size:12px}
.fin-btn-danger:hover{background:rgba(239,83,80,.2)}

/* ── Таблица сотрудников: группировка/подсветка по отделу ── */
.fin-emp-table{table-layout:auto}
.fin-emp-table tr:hover td{background:transparent}  /* отключаем глобальный hover из .fin-table */

.fin-emp-grp td{font-size:10px;font-weight:700;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.5px;
  padding:10px 12px 4px;background:var(--s2);border-bottom:1px solid var(--bdr)}
.fin-emp-grp-c td{border-left:3px solid var(--dept-color);padding-left:9px;
  color:color-mix(in srgb, var(--dept-color) 80%, var(--txt2))}
.fin-emp-grp-partner td{border-left:3px solid #6b4fb0;padding-left:9px;
  color:color-mix(in srgb, #6b4fb0 80%, var(--txt2))}
.fin-emp-grp-inner{display:flex;align-items:baseline;gap:12px;width:100%}
.fin-emp-grp-name{flex:1}
.fin-emp-grp-sum{font-size:11px;font-weight:600;color:var(--txt2);
  font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.fin-emp-grp-share{font-size:10px;color:var(--txt3);font-weight:500;
  letter-spacing:0;text-transform:none;min-width:46px;text-align:right}

.fin-emp-total td{padding:12px 12px;border-top:2px solid var(--bdr);
  background:var(--s2);font-size:13px}
/* Внутри tfoot — переиспользуем flex .fin-emp-grp-inner с группами, но
   подписи и сумма должны выделяться, поэтому переопределяем размеры/цвет. */
.fin-emp-total .fin-emp-grp-name{font-size:13px;color:var(--txt)}
.fin-emp-total .fin-emp-grp-sum{font-size:14px;color:var(--accent)}
.fin-emp-total .fin-emp-grp-share{font-size:11px}

.fin-emp-row-c td:first-child{border-left:4px solid var(--dept-color)}
.fin-emp-row-c:hover td{background:color-mix(in srgb, var(--dept-color) 10%, transparent)}
.fin-emp-row:hover td{background:var(--adim)}
.fin-emp-name-c{font-weight:500}

.fin-emp-sal{width:140px;padding:5px 8px;background:var(--bg);
  border:1px solid var(--bdr2);border-radius:5px;color:var(--txt);
  font-size:13px;font-variant-numeric:tabular-nums;text-align:right}
.fin-emp-sal:focus{outline:none;border-color:var(--accent)}
.fin-emp-sal-dirty{border-color:#ffb43c;background:rgba(255,180,60,.06)}
.fin-emp-savebtn{min-width:32px}
.fin-emp-savebtn:disabled{opacity:.35;cursor:default}

/* Колонка «В компании» в таблице финансов */
.fin-emp-since{font-size:12px;color:var(--txt2);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* USD-сотрудник в таблице: RUB-инпут readonly, рядом плашка с $-суммой */
.fin-emp-sal-foreign{background:var(--s2);color:var(--txt2);cursor:help}
.fin-emp-sal-foreign:focus{outline:none;border-color:var(--bdr2)}
.fin-emp-sal-usd-wrap{display:flex;align-items:center;gap:6px}
.fin-emp-sal-usd-wrap .fin-emp-sal{flex:0 0 auto}
.fin-emp-sal-usd-hint{font-size:11px;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap;cursor:help}

/* Секция «валюта + оклад» в модалке */
.fin-emp-dlg-section select{width:100%;padding:8px 12px;
  background:var(--s1);border:1px solid var(--bdr2);border-radius:6px;
  color:var(--txt);font-size:14px;font-family:inherit;box-sizing:border-box}
.fin-emp-dlg-section select:focus{outline:none;border-color:var(--accent)}

/* ── Ретро-CRT-индикатор «процесс идёт» (finCrtLoader) ──
   Терминал с печатающимися строками: новые внизу, старые уплывают вверх
   и обрезаются за верхней кромкой. Никаких подробностей о шифровании в
   тексте — только нейтрально-ретро. */
.fin-crt{font-family:'Consolas','Courier New',monospace;
  background:#020806;color:#39ff8c;border:1px solid #115d2f;
  border-radius:6px;padding:14px 18px 18px;
  margin:32px auto;max-width:560px;
  overflow:hidden;position:relative;line-height:1.6;font-size:13px;
  letter-spacing:.5px;
  text-shadow:0 0 4px rgba(57,255,140,.6);
  box-shadow:inset 0 0 24px rgba(57,255,140,.12),
             0 0 28px rgba(57,255,140,.06)}
.fin-crt-title{position:relative;z-index:2;font-weight:700;font-size:14px;
  padding-bottom:6px;margin-bottom:8px;
  border-bottom:1px dashed rgba(57,255,140,.3);
  letter-spacing:1px}
/* Лента строк: flex-end → новая строка появляется снизу, при добавлении
   следующей предыдущие сдвигаются вверх, выходящие за высоту просто
   обрезаются (overflow:hidden). */
.fin-crt-stream{position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  height:calc(1.6em * 6);overflow:hidden}
.fin-crt-line{white-space:nowrap}
.fin-crt-cursor{display:inline-block;width:.55em;margin-left:1px;
  animation:fin-crt-blink 1s steps(2,start) infinite}
@keyframes fin-crt-blink{50%{opacity:0}}
/* Тонкие сканлинии для CRT-эффекта */
.fin-crt-scan{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(to bottom,
    transparent 0,transparent 2px,
    rgba(57,255,140,.05) 2px,rgba(57,255,140,.05) 3px)}

/* ── END FINANCE MODULE ── */