/* Реестр ссылок ЭЗЗ/ЭТрН — фронт v1 (задача etrn-registry-v1, Виктор, 04.09.2026)
 * Дизайн — прямое продолжение мокапа owners-inbox/etrn-link-registry-mockup.html:
 * та же палитра, та же сетка таблицы, те же модалки. Правки при переносе в рабочий
 * фронт: добавлены состояния "нет данных"/"ошибка сети"/"загрузка", роль observer
 * (только чтение) и экран обязательной смены пароля (must_change_password). */

:root{
  --bg:#f6f6f4;
  --card:#ffffff;
  --border:#e4e3df;
  --border-strong:#d6d5cf;
  --text:#1f2328;
  --text-muted:#6b7280;
  --text-faint:#9aa0a6;
  --accent:#2f5aa3;
  --accent-hover:#254a87;
  --blue:#2563eb; --blue-bg:#eaf1fd; --blue-border:#c8dbf7;
  --amber:#a3610a; --amber-bg:#fdf3e2; --amber-border:#f1ddb0;
  --green:#15803d; --green-bg:#eaf7ee; --green-border:#c6e8cf;
  --red:#b91c1c; --red-bg:#fdecec; --red-border:#f4c6c6;
  --grey:#57534e; --grey-bg:#f1f0ee; --grey-border:#dedcd7;
  --radius:8px;
  --shadow:0 2px 10px rgba(20,20,20,.06), 0 1px 2px rgba(20,20,20,.05);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important;}
button{font-family:inherit;font-size:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:inherit;}
a{color:var(--accent);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;border-radius:6px;border:1px solid var(--border-strong);
  background:#fff;color:var(--text);font-weight:500;line-height:1.2;
  transition:background .12s,border-color .12s;white-space:nowrap;
}
.btn:hover{background:#f2f2ef;}
.btn:active{background:#e9e9e4;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-primary:disabled{background:#a9bcd8;border-color:#a9bcd8;cursor:not-allowed;}
.btn-danger{background:#fff;border-color:var(--red-border);color:var(--red);}
.btn-danger:hover{background:var(--red-bg);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted);}
.btn-ghost:hover{background:#eeeeea;color:var(--text);}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:5px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- Loading / error ---------- */
.page-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13.5px;}
.banner{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;}
.banner-error{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red);}
.banner-info{background:var(--blue-bg);border:1px solid var(--blue-border);color:var(--blue);}

/* ---------- Login / auth screens ---------- */
#screen-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:32px 28px;}
.login-card h1{font-size:19px;margin:0 0 4px;letter-spacing:-.01em;}
.login-card .sub{color:var(--text-muted);margin:0 0 22px;font-size:13px;}
.tabs{display:flex;gap:4px;background:#efefec;border-radius:8px;padding:3px;margin-bottom:20px;}
.tab-btn{flex:1;border:none;background:transparent;padding:8px 10px;border-radius:6px;color:var(--text-muted);font-weight:500;}
.tab-btn.active{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--text-muted);margin-bottom:5px;font-weight:500;}
.field input{width:100%;padding:9px 11px;border:1px solid var(--border-strong);border-radius:6px;background:#fff;color:var(--text);}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,90,163,.12);}
.form-error{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red);padding:8px 10px;border-radius:6px;font-size:12.5px;margin-bottom:14px;}
.form-success{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);padding:10px 12px;border-radius:6px;font-size:12.5px;margin-top:14px;}
.form-success .note{color:var(--text-muted);display:block;margin-top:4px;}
.demo-hint{margin-top:18px;padding-top:14px;border-top:1px dashed var(--border-strong);color:var(--text-faint);font-size:11.5px;line-height:1.6;}
.login-card .full-btn{width:100%;margin-top:4px;}

/* ---------- Registry screen ---------- */
#screen-registry{min-height:100vh;}
header.topbar{
  position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--border);
  padding:12px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
header.topbar h1{font-size:15.5px;margin:0;font-weight:600;letter-spacing:-.01em;}
.who{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:13px;}
.who .role-badge{background:#eef1ee;border:1px solid var(--border-strong);color:var(--text);padding:3px 9px;border-radius:100px;font-size:12px;font-weight:500;}
.container{max-width:1360px;margin:0 auto;padding:20px 24px 60px;}

.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.summary .card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.summary .card .label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);margin-bottom:8px;font-weight:500;}
.summary .card .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dot-new{background:var(--blue);} .dot-progress{background:var(--amber);} .dot-signed{background:var(--green);} .dot-rejected{background:var(--red);}
.summary .card .numbers{display:flex;align-items:baseline;gap:8px;}
.summary .card .today{font-size:24px;font-weight:600;letter-spacing:-.02em;}
.summary .card .total{font-size:12.5px;color:var(--text-faint);}

details.howto{background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:18px;padding:2px 4px;}
details.howto summary{cursor:pointer;padding:12px 14px;font-weight:500;font-size:13.5px;list-style:none;display:flex;align-items:center;gap:8px;}
details.howto summary::-webkit-details-marker{display:none;}
details.howto summary:before{content:"▸";color:var(--text-faint);transition:transform .15s;}
details.howto[open] summary:before{transform:rotate(90deg);}
.howto-body{padding:0 16px 16px 34px;color:var(--text-muted);font-size:13px;}
.howto-body ol{margin:0;padding-left:18px;}
.howto-body li{margin-bottom:6px;}

.filters{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;margin-bottom:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
}
.filters .f{display:flex;flex-direction:column;gap:4px;min-width:130px;}
.filters .f.grow{flex:1;min-width:180px;}
.filters label{font-size:11.5px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.02em;}
.filters select,.filters input{padding:7px 9px;border:1px solid var(--border-strong);border-radius:6px;background:#fff;color:var(--text);}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--accent);}
.period-row{display:flex;gap:6px;align-items:center;}
.period-row input{width:130px;}
.scope-toggle{display:flex;border:1px solid var(--border-strong);border-radius:6px;overflow:hidden;}
.scope-toggle button{border:none;background:#fff;padding:7px 12px;color:var(--text-muted);font-weight:500;}
.scope-toggle button.active{background:var(--accent);color:#fff;}
.filters .spacer{flex:1;}

.table-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;flex-wrap:wrap;}
.table-toolbar h2{font-size:14.5px;margin:0;font-weight:600;color:var(--text);}
.table-toolbar .count{color:var(--text-faint);font-weight:400;}

.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;min-width:1100px;table-layout:fixed;}
thead th:nth-child(1),tbody td:nth-child(1){width:42px;}
thead th:nth-child(2),tbody td:nth-child(2){width:112px;}
thead th:nth-child(3),tbody td:nth-child(3){width:122px;}
thead th:nth-child(4),tbody td:nth-child(4){width:62px;}
tbody td:nth-child(4){white-space:nowrap;}
thead th:nth-child(5),tbody td:nth-child(5){width:128px;}
thead th:nth-child(6),tbody td:nth-child(6){width:80px;}
thead th:nth-child(7),tbody td:nth-child(7){width:112px;}
thead th:nth-child(8),tbody td:nth-child(8){width:128px;}
thead th:nth-child(9),tbody td:nth-child(9){width:150px;}
thead th:nth-child(10),tbody td:nth-child(10){width:150px;}
thead th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);
  padding:10px 12px;border-bottom:1px solid var(--border);background:#fbfbfa;white-space:nowrap;user-select:none;position:sticky;top:0;
  overflow:hidden;text-overflow:ellipsis;
}
thead th.sortable{cursor:pointer;}
thead th.sortable:hover{color:var(--text);}
thead th .arrow{margin-left:3px;color:var(--text-faint);font-size:10px;}
tbody td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;font-size:13px;overflow-wrap:break-word;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#fafaf8;}
td.num{color:var(--text-faint);font-variant-numeric:tabular-nums;}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--text-muted);}
td.nowrap{white-space:nowrap;}
td.link-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comment-cell{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comment-cell .empty{color:var(--text-faint);}
.changed-cell{color:var(--text-muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.changed-cell .who-name{color:var(--text);}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:100px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap;}
.badge-new{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-border);}
.badge-progress{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-border);}
.badge-signed{background:var(--green-bg);color:var(--green);border-color:var(--green-border);}
.badge-rejected{background:var(--red-bg);color:var(--red);border-color:var(--red-border);}
.badge-withdrawn{background:var(--grey-bg);color:var(--grey);border-color:var(--grey-border);}
.notify-note{display:block;margin-top:4px;font-size:11px;color:var(--text-faint);white-space:normal;}
.cycle-note{display:block;margin-top:4px;font-size:11px;color:var(--amber);font-weight:600;white-space:normal;cursor:help;}

.actions-cell{display:flex;gap:4px;flex-wrap:nowrap;}
.btn-icon{width:26px;height:26px;padding:0;font-size:13px;border-radius:6px;flex-shrink:0;}

.empty-state{padding:56px 20px;text-align:center;}
.empty-state .title{font-size:14.5px;font-weight:600;margin-bottom:4px;}
.empty-state .sub{color:var(--text-muted);font-size:13px;margin-bottom:14px;}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(20,20,18,.4);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal{background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.2);width:100%;max-width:460px;max-height:88vh;display:flex;flex-direction:column;}
.modal.modal-wide{max-width:640px;}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-head h3{margin:0;font-size:15px;font-weight:600;}
.modal-head .x{border:none;background:transparent;color:var(--text-faint);font-size:18px;line-height:1;padding:4px;}
.modal-body{padding:18px 20px;overflow-y:auto;}
.modal-body label{display:block;font-size:12.5px;color:var(--text-muted);font-weight:500;margin-bottom:6px;}
.modal-body textarea{width:100%;border:1px solid var(--border-strong);border-radius:6px;padding:9px 10px;resize:vertical;min-height:88px;color:var(--text);}
.modal-body textarea:focus{outline:none;border-color:var(--accent);}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
.field-error{color:var(--red);font-size:12px;margin-top:6px;}
.row-meta{color:var(--text-muted);font-size:12.5px;margin-bottom:12px;padding:10px 12px;background:#fafaf8;border-radius:6px;border:1px solid var(--border);}

.parse-summary{font-size:12.5px;color:var(--text-muted);margin-bottom:10px;}
.parse-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;}
.parse-item{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:12.5px;}
.parse-item input[type=checkbox]{margin-top:3px;}
.parse-item .pi-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding:2px 6px;border-radius:4px;flex-shrink:0;}
.pi-ok{background:var(--green-bg);color:var(--green);}
.pi-dup{background:var(--amber-bg);color:var(--amber);}
.pi-err{background:var(--red-bg);color:var(--red);}
.pi-reopen{background:var(--blue-bg);color:var(--blue);}
.pi-signed{background:var(--green-bg);color:var(--green);}
.parse-item .pi-text{color:var(--text);}
.parse-item .pi-url{color:var(--text-faint);font-family:ui-monospace,monospace;font-size:11px;word-break:break-all;}
.parse-item .pi-resend{margin-top:4px;}
.example-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.example-links button{font-size:11.5px;padding:4px 8px;}

/* Toast */
#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1f2328;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200;
  max-width:90vw;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width: 820px){
  .container{padding:16px;}
  header.topbar{padding:10px 16px;}
  .summary{grid-template-columns:repeat(2,1fr);}
  .filters{padding:10px;}
  .filters .f{min-width:46%;flex:1 1 46%;}
  .filters .f.grow{flex:1 1 100%;}
  .period-row input{width:100%;}
}
@media (max-width: 480px){
  .summary{grid-template-columns:1fr 1fr;}
  .login-card{padding:24px 18px;}
}