/* Портал франч-отдела — тема «Хвоя и камень» (как в uchet.woodnext.ru) */
:root {
  --bg: #F4F3EF;
  --card: #FFFFFF;
  --border: #E4E2DB;
  --border2: #D6D3C9;
  --text: #2E2A24;
  --muted: #8A857B;
  --muted2: #6B665D;
  --brand: #1E6A4E;
  --brand-dark: #175540;
  --brand-light: #E7F1EC;
  --sidebar: #15201A;
  --sidebar-active: #1F3529;
  --green: #0E7A4F;
  --red: #B4373C;
  --amber: #9A6B12;
  --amber-bg: #FBF3E2;
  --green-bg: #E6F4EC;
  --red-bg: #FBEAEA;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system, 'Segoe UI', Roboto, sans-serif; background:var(--bg); color:var(--text); font-size:14px; }

.layout { display:flex; min-height:100vh; }

/* --- Сайдбар --- */
.sidebar { width:248px; background:var(--sidebar); color:#C8D2CB; flex-shrink:0; padding:20px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.logo { display:flex; align-items:center; gap:10px; padding:4px 10px 18px; }
.logo-badge { width:34px; height:34px; background:var(--brand); border-radius:8px; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:17px; }
.logo-text { font-weight:800; color:#fff; font-size:15px; line-height:1.15; }
.logo-text small { display:block; font-weight:500; color:#7E8F84; font-size:11px; }
.nav-group { margin-top:14px; }
.nav-group-title { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#5F6F65; padding:0 10px 6px; }
.nav a { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; color:#C8D2CB; text-decoration:none; font-weight:500; margin-bottom:2px; }
.nav a:hover { background:#1B2B22; color:#fff; }
.nav a.active { background:var(--sidebar-active); color:#fff; }
.nav a .ico { width:18px; text-align:center; opacity:.85; }

/* --- Контент --- */
.main { flex:1; min-width:0; padding:26px 32px 60px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
h1 { font-size:22px; font-weight:800; }
.page-sub { color:var(--muted); margin-top:3px; }
h2 { font-size:15px; font-weight:700; margin-bottom:10px; }

.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin-bottom:22px; }
.stat { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.stat .lbl { color:var(--muted); font-size:12px; }
.stat .val { font-size:21px; font-weight:800; margin-top:4px; }
.stat .hint { font-size:12px; color:var(--muted); margin-top:3px; }
.stat .val.pos { color:var(--green); } .stat .val.neg { color:var(--red); }

.panel { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:20px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }

.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; white-space:nowrap; }
th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--border2); position:sticky; top:0; background:var(--card); }
td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:hover td { background:#FAF9F6; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tfoot td { font-weight:700; border-top:2px solid var(--border2); background:#FAF9F6; }

.badge { display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600; }
.b-green { background:var(--green-bg); color:var(--green); }
.b-red { background:var(--red-bg); color:var(--red); }
.b-amber { background:var(--amber-bg); color:var(--amber); }
.b-gray { background:#EFEEE9; color:var(--muted2); }
.b-brand { background:var(--brand-light); color:var(--brand); }

.btn { display:inline-flex; align-items:center; gap:7px; background:var(--brand); color:#fff; border:none; border-radius:8px; padding:8px 14px; font-weight:600; font-size:13.5px; cursor:pointer; }
.btn:hover { background:var(--brand-dark); }
.btn.secondary { background:#fff; color:var(--text); border:1px solid var(--border2); }
.btn.secondary:hover { background:#F6F5F1; }
.btn.small { padding:5px 10px; font-size:12.5px; }

select, input[type=text], input[type=number], input[type=date] {
  border:1px solid var(--border2); border-radius:8px; padding:7px 10px; font-size:13.5px; background:#fff; color:var(--text);
}
select:focus, input:focus { outline:2px solid var(--brand-light); border-color:var(--brand); }

.tabs { display:flex; gap:4px; background:#EDECE6; border-radius:9px; padding:3px; width:fit-content; }
.tabs button { border:none; background:transparent; padding:6px 14px; border-radius:7px; font-weight:600; font-size:13px; color:var(--muted2); cursor:pointer; }
.tabs button.active { background:#fff; color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* Матрица роялти */
.royalty-cell { text-align:center; font-size:12px; border-radius:6px; padding:3px 4px; min-width:52px; display:inline-block; }
.rc-paid { background:var(--green-bg); color:var(--green); font-weight:600; }
.rc-unpaid { background:var(--red-bg); color:var(--red); font-weight:600; cursor:pointer; }
.rc-future { background:#F1F0EB; color:#B4AFA4; }
.rc-none { color:#D6D3C9; }
.rc-note { background:var(--amber-bg); color:var(--amber); font-weight:600; }

/* Карточка партнёра */
.drawer-bg { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; display:none; }
.drawer-bg.open { display:block; }
.drawer { position:fixed; top:0; right:-560px; width:540px; max-width:94vw; height:100vh; background:var(--card); z-index:50; box-shadow:-8px 0 30px rgba(0,0,0,.15); transition:right .25s ease; overflow-y:auto; padding:24px; }
.drawer.open { right:0; }
.drawer h3 { font-size:18px; font-weight:800; margin-bottom:2px; }
.drawer .close { position:absolute; top:16px; right:16px; background:#EFEEE9; border:none; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:15px; }
.kv { display:grid; grid-template-columns:170px 1fr; gap:6px 12px; margin:14px 0; }
.kv .k { color:var(--muted); }
.kv .v { font-weight:500; word-break:break-word; }

.note { background:var(--amber-bg); border:1px solid #EAD9B0; color:#6E5218; border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:16px; }
.note b { font-weight:700; }

.invoice { border:1px dashed var(--border2); border-radius:10px; padding:16px; margin-top:14px; background:#FBFAF7; max-width:420px; }
.invoice h4 { margin-bottom:8px; }
.invoice .row { display:flex; justify-content:space-between; padding:3px 0; }
.invoice .row.total { border-top:1px solid var(--border2); margin-top:6px; padding-top:8px; font-weight:800; }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:1100px){ .grid2 { grid-template-columns:1fr; } }

.muted { color:var(--muted); }
.right { text-align:right; }
.mt8 { margin-top:8px; } .mt16 { margin-top:16px; }

/* --- v2: модальные формы, вкладки месяцев, строки-статусы --- */
.page-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60; display:none; align-items:flex-start; justify-content:center; padding:6vh 16px; overflow-y:auto; }
.modal-bg.open { display:flex; }
.modal-box { background:var(--card); border-radius:14px; padding:22px 24px; width:640px; max-width:100%; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal-box h3 { font-size:17px; font-weight:800; margin-bottom:14px; }
.f-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
@media (max-width:700px){ .f-grid { grid-template-columns:1fr; } }
.f-lbl { display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted2); font-weight:600; }
.f-lbl input, .f-lbl select { width:100%; }
.f-check { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text); padding-top:18px; }
.f-actions { display:flex; gap:10px; margin-top:18px; align-items:center; }
.btn.danger { background:var(--red); }
.btn.danger:hover { background:#93292E; }

.month-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.mtab { border:1px solid var(--border2); background:#fff; color:var(--muted2); border-radius:99px; padding:6px 14px; font-weight:600; font-size:13px; cursor:pointer; }
.mtab:hover { border-color:var(--brand); color:var(--brand); }
.mtab.on { background:var(--brand); border-color:var(--brand); color:#fff; }

tr.row-paid td { background:#F3FAF6; }
tr.row-debt td { background:#FDF4F4; }
tr.row-paid:hover td { background:#EAF6F0; }
tr.row-debt:hover td { background:#FBEAEA; }
tr.row-muted td { opacity:.55; }
tr.row-total td { font-weight:700; background:#FAF9F6; border-top:2px solid var(--border2); }

th.cur-month, td.cur-month { background:var(--brand-light) !important; }
th.cur-month { color:var(--brand); }

.badge-btn { border:none; cursor:pointer; font-family:inherit; }
.badge-btn:hover { filter:brightness(.93); }

/* --- вход и футер пользователя --- */
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:80vh; }
.login-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:30px 32px; width:360px; box-shadow:0 10px 40px rgba(0,0,0,.08); }
.user-foot { margin-top:18px; padding:12px 10px; border-top:1px solid #24352B; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#C8D2CB; }
code { background:#EFEEE9; border-radius:5px; padding:1px 6px; font-size:12.5px; }

.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }

/* --- график телемостов --- */
.barchart { display:flex; align-items:flex-end; gap:6px; padding:8px 4px 0; overflow-x:auto; }
.bar-col { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:34px; }
.bar { width:26px; background:var(--brand); border-radius:5px 5px 0 0; }
.bar-val { font-size:11px; font-weight:700; color:var(--brand); }
.bar-lbl { font-size:10.5px; color:var(--muted); }

/* --- календарь телемостов --- */
.legend { display:flex; gap:18px; align-items:center; margin-bottom:12px; font-size:13px; flex-wrap:wrap; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.cal-head { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; font-size:11.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; text-align:center; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-day { border:1px solid var(--border); border-radius:10px; padding:7px 8px; min-height:64px; cursor:pointer; background:#fff; }
.cal-day:hover { border-color:var(--brand); }
.cal-empty { border:none; background:transparent; cursor:default; }
.cal-past { opacity:.55; }
.cal-today { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.cal-sel { background:var(--brand-light); }
.cal-num { font-weight:700; font-size:13px; margin-bottom:5px; display:flex; justify-content:space-between; align-items:center; }
.cal-cnt { background:var(--brand); color:#fff; border-radius:99px; font-size:10px; padding:0 6px; font-weight:700; }
.cal-sqs { display:flex; flex-wrap:wrap; gap:3px; }
.sq { width:12px; height:12px; border-radius:3px; display:inline-block; cursor:pointer; }
.sq-free { background:#DCE9E0; border:1px solid #BFD4C6; }
.sq-free:hover { background:var(--green); }
.sq-booked { background:#E8B84B; border:1px solid #C99B2E; }
.sq-busy { background:#D96C6C; border:1px solid #B84A4A; }
.tm-day { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.tm-sq { border-radius:10px; padding:10px 12px; cursor:pointer; border:1.5px solid transparent; min-height:66px; }
.tm-sq:hover { filter:brightness(.96); }
.tm-free { background:#EDF5EF; border-color:#CFE2D5; }
.tm-booked { background:#FBF0D8; border-color:#E8C878; }
.tm-busy { background:#F9E3E3; border-color:#E3A9A9; }
.tm-time { font-weight:800; font-size:14px; margin-bottom:3px; }
.tm-info { font-size:12px; color:var(--muted2); word-break:break-word; }
.tm-mgr { font-size:11px; color:var(--muted); }

/* --- канбан продаж --- */
.kanban { display:grid; grid-template-columns:repeat(5,minmax(210px,1fr)); gap:12px; overflow-x:auto; align-items:start; }
@media (max-width:1200px){ .kanban { grid-template-columns:repeat(5,240px); } }
.kb-col { border-radius:12px; padding:10px; background:#F1F0EB; min-height:120px; border:2px solid transparent; }
.kb-col.kb-b-brand { background:#EAF1EE; } .kb-col.kb-b-amber { background:#F8F1E0; }
.kb-col.kb-b-gray { background:#EFEEE9; } .kb-col.kb-b-green { background:#E4F2EA; } .kb-col.kb-b-red { background:#F8E8E8; }
.kb-col.kb-over { border-color:var(--brand); }
.kb-head { font-weight:800; font-size:13.5px; margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; }
.kb-cnt { background:#fff; border-radius:99px; font-size:11.5px; padding:1px 8px; font-weight:700; color:var(--muted2); }
.kb-cards { display:flex; flex-direction:column; gap:8px; max-height:560px; overflow-y:auto; }
.kb-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:9px 11px; cursor:grab; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.kb-card:hover { border-color:var(--brand); }
.kb-title { font-weight:700; font-size:13px; margin-bottom:5px; }
.kb-meta { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:5px; }
.kb-line { font-size:11.5px; color:var(--muted2); margin-top:2px; }
.kb-overdue { color:var(--red); font-weight:600; }

.cred-box { background:#F6F5F1; border:1px solid var(--border2); border-radius:10px; padding:14px; font-size:13px; white-space:pre-wrap; font-family:inherit; margin-bottom:14px; }