/* Скрытое скрыто всегда. Правило стоит первым и с !important, потому что
   раскладочные классы вроде .check-row и .combo__option задают display тоже
   через !important и дважды уже перебивали атрибут hidden. */
[hidden] { display: none !important; }

:root {
	--navy: #17233b;
	--navy-soft: #23324f;
	--ink: #172033;
	--muted: #68748a;
	--line: #e5e8ee;
	--surface: #ffffff;
	--canvas: #f3f5f8;
	--accent: #f36b3d;
	--accent-soft: #fff0ea;
	--green: #27a77a;
	--shadow: 0 14px 36px rgba(23, 35, 59, .08);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
select, textarea { font: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 20px 22px; color: #fff; background: var(--navy); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 28px; }
.brand__mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--accent); font-size: 21px; font-weight: 800; box-shadow: 0 10px 24px rgba(243,107,61,.28); }
.brand strong, .brand small, .navigation strong, .navigation small, .sidebar__footer span, .sidebar__footer small, .user-card strong, .user-card small { display: block; }
.brand strong { font-size: 18px; letter-spacing: .01em; }
.brand small { margin-top: 1px; color: #aeb8cc; font-size: 11px; }
.navigation { display: grid; gap: 6px; }
.navigation__item { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: center; min-height: 62px; padding: 10px 12px; border-radius: 12px; color: #d8deea; transition: background .18s ease, color .18s ease; }
.navigation__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.navigation__item.is-active { color: #fff; background: var(--navy-soft); box-shadow: inset 3px 0 var(--accent); }
.navigation__dot { width: 7px; height: 7px; border: 2px solid #78849b; border-radius: 50%; }
.navigation__item.is-active .navigation__dot { border-color: var(--accent); background: var(--accent); }
.navigation strong { font-size: 14px; }
.navigation small { color: #8f9ab0; font-size: 11px; }
.sidebar__footer { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 16px 12px 4px; color: #dfe5ef; font-size: 12px; }
.sidebar__footer small { color: #8793aa; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(39,167,122,.12); }

.workspace { min-width: 0; }
.topbar { height: 104px; display: flex; align-items: center; gap: 18px; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(12px); }
.topbar h1 { margin: 0; font-size: 24px; line-height: 1.15; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.user-card { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.user-card__avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: #e8edf5; font-weight: 800; }
.user-card strong { font-size: 13px; }
.user-card small { color: var(--muted); font-size: 11px; }
.logout-link { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.logout-link:hover { color: var(--accent); }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--navy); font-size: 22px; cursor: pointer; }
.content { max-width: 1500px; margin: 0 auto; padding: 34px 42px 56px; }
.content--timesheets { max-width: none; }
.alert { margin-bottom: 18px; padding: 13px 16px; border-radius: 12px; font-weight: 650; }
.alert--success { color: #146548; background: #e7f7f0; border: 1px solid #bce9d8; }
.alert--error { color: #9b2c2c; background: #fff0f0; border: 1px solid #ffcaca; }
.alert--warning { color: #8a5a00; background: #fff8e6; border: 1px solid #f2ddaa; }
.period-form, .filter-row { display: flex; align-items: center; gap: 8px; }
.period-form { margin-left: auto; }
.period-form input, .period-form button, .filter-row select, .filter-row button { height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); }
.period-form button, .filter-row button { cursor: pointer; font-weight: 700; }
.panel-copy { color: var(--muted); }
.button-link { display: inline-flex; margin-top: 12px; color: var(--accent); font-weight: 750; }
.money-value { font-size: 23px !important; white-space: nowrap; }

.hero { display: flex; justify-content: space-between; align-items: center; gap: 28px; min-height: 190px; padding: 34px 38px; border-radius: 20px; color: #fff; background: linear-gradient(125deg, #1a2946, #263858 65%, #32466b); box-shadow: var(--shadow); overflow: hidden; }
.hero h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; }
.hero p:not(.eyebrow) { max-width: 650px; margin: 0; color: #c6d0e2; }
.hero__date { width: 116px; height: 116px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: rgba(255,255,255,.08); }
.hero__date strong { display: block; font-size: 46px; line-height: 1; }
.hero__date span { color: #c6d0e2; text-transform: capitalize; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.metric-card { min-height: 142px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 24px rgba(23,35,59,.04); }
.metric-card > span, .metric-card small { display: block; color: var(--muted); }
.metric-card > span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.metric-card strong { display: block; margin: 10px 0 2px; font-size: 34px; line-height: 1; }
.metric-card small { font-size: 12px; }
.metric-card--accent { border-color: #ffd8c9; background: var(--accent-soft); }
.metric-card--accent strong { color: var(--accent); }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 8px 24px rgba(23,35,59,.04); }
.panel h2, .panel h3 { margin: 0; }
.panel__header { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.badge { padding: 6px 10px; border-radius: 999px; color: #956144; background: #fff0e8; font-size: 11px; font-weight: 800; }
.structure-list { margin: 22px 0 18px; border-top: 1px solid var(--line); }
.structure-list div { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.structure-list strong { color: var(--ink); font-size: 18px; }
.text-link { color: var(--accent); font-size: 13px; font-weight: 750; }
.panel--dark { color: #fff; background: var(--navy); border-color: var(--navy); }
.panel--dark p:not(.eyebrow) { color: #aab5c9; }
.text-link--light { color: #ff9b77; }
.empty-chart { height: 86px; display: flex; align-items: end; gap: 9px; margin: 22px 0 14px; }
.empty-chart span { width: 11%; min-height: 16px; border-radius: 6px 6px 2px 2px; background: #344868; }
.empty-chart span:nth-child(2) { height: 36%; }.empty-chart span:nth-child(3) { height: 62%; }.empty-chart span:nth-child(4) { height: 48%; }.empty-chart span:nth-child(5) { height: 78%; }.empty-chart span:nth-child(6) { height: 68%; }.empty-chart span:nth-child(7) { height: 92%; background: var(--accent); }

.next-steps { margin-top: 20px; }
.next-steps ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.next-steps li { display: flex; gap: 11px; padding: 16px; border-radius: 13px; background: #f6f7f9; }
.next-steps li > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #768197; background: #e5e9ef; font-weight: 800; }
.next-steps li.is-current { background: var(--accent-soft); }
.next-steps li.is-current > span { color: #fff; background: var(--accent); }
.next-steps strong, .next-steps small { display: block; }
.next-steps strong { font-size: 13px; }.next-steps small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.empty-state { min-height: calc(100vh - 194px); display: grid; justify-items: center; align-content: center; text-align: center; padding: 60px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.empty-state__mark { width: 72px; height: 72px; margin-bottom: 20px; border: 18px solid var(--accent-soft); border-radius: 24px; background: var(--accent); transform: rotate(8deg); }
.empty-state h2 { margin: 0 0 8px; font-size: 30px; }
.empty-state > p:not(.eyebrow) { max-width: 610px; margin: 0 0 24px; color: var(--muted); }
.button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; font-weight: 750; }
.button--primary { color: #fff; background: var(--accent); }
.button:disabled { cursor: not-allowed; opacity: .55; }
.empty-state__hint { margin-top: 9px; color: #97a0b0; font-size: 11px; }
.settings-panel { max-width: 820px; }
.settings-panel > p:not(.eyebrow) { color: var(--muted); }
.settings-links { display: grid; gap: 10px; margin-top: 24px; }
.settings-links > div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; }
.settings-links strong { font-size: 14px; }
.settings-links span { color: var(--muted); font-size: 12px; text-align: right; }

.login-page { min-height: 100vh; background: #edf1f6; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); }
.login-intro { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: clamp(32px, 5vw, 72px); color: #fff; background: radial-gradient(circle at 80% 18%, rgba(243,107,61,.32), transparent 30%), linear-gradient(145deg, #16223a 0%, #223451 58%, #2c4164 100%); overflow: hidden; }
.login-intro::after { content: ''; position: absolute; right: -160px; bottom: -210px; width: 560px; height: 560px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); }
.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; width: fit-content; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 21px; }
.login-brand small { color: #aeb9cd; font-size: 12px; }
.login-message { position: relative; z-index: 1; max-width: 760px; margin: auto 0; padding: 80px 0; }
.login-message h1 { max-width: 730px; margin: 0 0 24px; font-size: clamp(40px, 5vw, 74px); line-height: 1.02; letter-spacing: -.035em; }
.login-message > p:not(.eyebrow) { max-width: 650px; margin: 0; color: #bdc8d9; font-size: clamp(16px, 1.6vw, 21px); }
.login-features { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.login-features span { padding: 8px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #dbe2ed; background: rgba(255,255,255,.05); font-size: 12px; font-weight: 750; }
.login-panel { display: grid; place-items: center; padding: 36px; background: #f5f7fa; }
.login-form { width: min(460px, 100%); display: grid; gap: 18px; padding: clamp(30px, 4vw, 52px); border: 1px solid #e0e5ed; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(23,35,59,.12); }
.login-form h2 { margin: 0; font-size: 34px; letter-spacing: -.025em; }
.login-subtitle { margin: 8px 0 0; color: var(--muted); }
.login-form > label:not(.remember-field) { display: grid; gap: 7px; color: #4c576b; font-size: 13px; font-weight: 750; }
.login-form input:not([type]), .login-form input[type='text'], .login-form input[type='password'] { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #d7dde7; border-radius: 11px; color: var(--ink); background: #fff; }
.login-form input:focus { outline: 3px solid #ffe0d4; border-color: var(--accent); }
.remember-field { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; cursor: pointer; }
.remember-field input { width: 17px; height: 17px; accent-color: var(--accent); }
.login-submit { width: 100%; cursor: pointer; }
.login-help { margin: 0; color: #929bad; font-size: 11px; text-align: center; }

.page-grid { display: grid; gap: 20px; }
.page-grid--sidebar { grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); align-items: start; }
.page-stack { display: grid; gap: 20px; min-width: 0; }
.form-panel { position: sticky; top: 20px; }
.stack-form { display: grid; gap: 13px; margin-top: 20px; }
.stack-form label, .day-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.stack-form input, .stack-form select, .day-form input, .day-form select, .day-form textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #d9dee7; border-radius: 9px; color: var(--ink); background: #fff; }
.stack-form input:focus, .stack-form select:focus, .day-form input:focus, .day-form select:focus, .day-form textarea:focus { outline: 2px solid #ffd2c1; border-color: var(--accent); }
.form-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.data-list { display: grid; margin-top: 18px; }
.data-list article, .import-history article { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.data-list article > div, .import-history article > div { min-width: 0; flex: 1; }
.data-list strong, .data-list small, .import-history strong, .import-history small { display: block; }
.data-list small, .import-history small { color: var(--muted); font-size: 11px; }
.tag { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #eef1f5; color: #5b6678; font-size: 10px; font-weight: 800; }
.tag--unverified { color: #956144; background: #fff0e8; }
.empty-inline { padding: 24px 0; color: var(--muted); text-align: center; }
.manager-mark { display: inline-flex; margin-left: 6px; padding: 3px 7px; border-radius: 999px; color: #8e4b30; background: var(--accent-soft); font-size: 9px; text-transform: uppercase; }
.check-row { display: flex !important; align-items: center; gap: 9px !important; cursor: pointer; }
.check-row input { width: 18px !important; min-height: 18px !important; accent-color: var(--accent); }
.department-list { display: grid; margin-top: 14px; }
.department-list article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.department-list strong, .department-list small { display: block; }
.department-list small { color: var(--muted); font-size: 11px; }
.manager-form { display: grid; gap: 5px; min-width: 0; }
.manager-form__label { color: var(--muted); font-size: 11px; font-weight: 700; }
.manager-form__row { display: flex; align-items: start; gap: 8px; min-width: 0; }
.manager-form select, .manager-form button { min-height: 38px; padding: 7px 9px; border: 1px solid #d9dee7; border-radius: 8px; background: #fff; }
.manager-form select { width: 100%; min-width: 0; max-width: 100%; flex: 1 1 auto; }
.manager-form button { flex: 0 0 auto; cursor: pointer; font-weight: 750; }
.manager-form button { cursor: pointer; font-weight: 750; }

.assignment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.assignment-form { align-content: start; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfd; }
.assignment-form h3 { margin: 0 0 2px; }
.employee-picker { max-height: 310px; overflow: auto; padding: 5px 10px; border: 1px solid #d9dee7; border-radius: 10px; background: #fff; }
.employee-picker label { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #eef0f4; cursor: pointer; }
.employee-picker label:last-child { border-bottom: 0; }
.employee-picker input { width: 17px !important; min-height: 17px !important; flex: 0 0 auto; accent-color: var(--accent); }
.employee-picker strong, .employee-picker small { display: block; }
.employee-picker small { color: var(--muted); font-size: 10px; }
.employee-picker .picker-all { position: sticky; top: 0; z-index: 1; margin: 0 -10px; padding: 9px 12px; background: #f3f5f8; font-weight: 800; }
.schedule-template-panel { margin-top: 20px; }

.schedule-cards { display: grid; gap: 12px; margin-top: 22px; }
.schedule-cards article { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; }
.schedule-cards strong, .schedule-cards small { display: block; }
.schedule-cards small { color: var(--muted); }
.schedule-icon { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--accent); background: var(--accent-soft); font-weight: 850; }

.timesheet-panel { padding: 22px; }
.timesheet-scroll { max-width: 100%; overflow: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: 13px; }
.timesheet-grid { min-width: max-content; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.timesheet-grid th, .timesheet-grid td { min-width: 49px; height: 54px; padding: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; background: #fff; }
.timesheet-grid thead th { position: sticky; top: 0; z-index: 3; height: 48px; background: #f8f9fb; }
.timesheet-grid thead th.is-weekend { color: #bd5833; background: #fff5f1; }
.timesheet-grid th.employee-col { position: sticky; left: 0; z-index: 2; width: 250px; max-width: 250px; padding: 8px 12px; text-align: left; background: #fff; }
.timesheet-grid thead th.employee-col { z-index: 5; background: #f8f9fb; }
.timesheet-grid .employee-col strong, .timesheet-grid .employee-col small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timesheet-grid .employee-col small { color: var(--muted); font-weight: 400; }
.timesheet-grid thead span, .timesheet-grid thead small { display: block; }
.timesheet-grid thead small { color: var(--muted); font-size: 9px; }
.day-cell { width: 100%; height: 53px; display: grid; place-items: center; gap: 0; padding: 2px; border: 0; color: #7b8596; background: transparent; cursor: pointer; }
.day-cell:hover { outline: 2px solid #ffc4ad; outline-offset: -2px; }
.day-cell.has-plan { background: #f3f6fa; }
.day-cell.has-fact { color: #126646; background: #e9f8f1; font-weight: 800; }
.day-cell.type-absence { color: #9b5b13; background: #fff2d9; }
.day-cell.type-off { color: #68748a; background: #f0f2f5; }
.day-cell small { color: var(--accent); font-size: 9px; }
.row-total { min-width: 82px !important; padding: 0 8px !important; font-weight: 800; white-space: nowrap; }
.table-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; }

.financial-table { margin-top: 20px; overflow: auto; }
.financial-row { min-width: 720px; display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(110px, 1fr)); align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.financial-row > :first-child { text-align: left; }
.financial-row--head { color: var(--muted); background: #f7f8fa; font-size: 11px; font-weight: 750; }
.financial-row--total { border-top: 2px solid var(--navy); border-bottom: 0; background: #f7f8fa; }
.import-history { margin-top: 20px; }
.import-history article { flex-wrap: wrap; }
.import-history form { flex-basis: 100%; }
.text-button { padding: 0; border: 0; color: var(--accent); background: transparent; cursor: pointer; font-weight: 750; }

.day-dialog { width: min(620px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 28px 90px rgba(23,35,59,.3); }
.day-dialog::backdrop { background: rgba(13,21,36,.52); backdrop-filter: blur(3px); }
.day-form { display: grid; gap: 15px; padding: 24px; }
.dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.dialog-header h3 { margin: 0; }
.dialog-close { width: 36px; height: 36px; border: 0; border-radius: 9px; color: var(--muted); background: #f0f2f5; cursor: pointer; font-size: 22px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }

@media (max-width: 1100px) {
	.app-shell { grid-template-columns: 230px minmax(0, 1fr); }
	.sidebar { padding-inline: 14px; }
	.metric-grid { grid-template-columns: repeat(2, 1fr); }
	.next-steps ol { grid-template-columns: repeat(2, 1fr); }
	.page-grid--sidebar { grid-template-columns: 1fr; }
	.assignment-grid { grid-template-columns: 1fr; }
	.form-panel { position: static; }
}

@media (max-width: 760px) {
	.app-shell { display: block; }
	.sidebar { position: fixed; z-index: 10; width: 280px; transform: translateX(-102%); transition: transform .2s ease; }
	.sidebar.is-open { transform: translateX(0); box-shadow: 24px 0 60px rgba(0,0,0,.24); }
	.menu-toggle { display: block; }
	.topbar { height: 86px; padding: 0 18px; }
	.user-card span:not(.user-card__avatar) { display: none; }
	.content { padding: 20px 16px 40px; }
	.hero { padding: 28px 22px; }
	.hero__date { display: none; }
	.metric-grid, .dashboard-grid, .next-steps ol { grid-template-columns: 1fr; }
	.period-form { margin-left: auto; }
	.period-form button { display: none; }
	.form-cols { grid-template-columns: 1fr; }
	.department-list article { grid-template-columns: 1fr; }
	.manager-form { display: grid; }
	.timesheet-panel { padding: 14px; }
	.login-layout { display: block; min-height: 100vh; padding: 20px; background: linear-gradient(145deg, #16223a, #2c4164); }
	.login-intro { min-height: auto; padding: 8px 4px 28px; background: transparent; }
	.login-message, .login-features { display: none; }
	.login-panel { padding: 0; background: transparent; }
	.login-form { padding: 28px 22px; border-radius: 18px; }
}

/* Оргструктура: хлебные крошки, дерево и постраничный список */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 4px 4px; color: var(--muted); font-size: 13px; }
.breadcrumbs a { font-weight: 700; }
.breadcrumbs a:last-child { color: var(--ink); }
.breadcrumbs a:hover { color: var(--accent); }
.department-tree { display: grid; gap: 2px; }
/* Строка подразделения: название слева, назначение руководителя справа.
   Колонки заданы жёстко, а не flex-обтеканием: список сотрудников бывает
   длинным, и `select` растягивался по самой длинной фамилии, выталкивая
   строку за пределы панели. `minmax(0, …)` и `min-width: 0` ниже по дереву
   разрешают ему сжиматься. */
.department-node { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 12px; margin-left: calc(var(--level, 0) * 22px); border: 1px solid transparent; }
.department-node:nth-child(odd) { background: #fafbfd; }
.department-node.is-current { border-color: var(--accent); background: var(--accent-soft); }
.department-node__main { min-width: 0; }
.department-node__name { display: block; font-weight: 750; }
.department-node__name:hover { color: var(--accent); }
.department-node__main small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.department-node__actions { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.department-node__actions .manager-form { width: 100%; min-width: 0; }
.department-node__actions .text-link { font-size: 12px; }

@media (max-width: 900px) {
	.department-node { grid-template-columns: minmax(0, 1fr); }
}
.pager { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; }
.pager__item { min-width: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; text-align: center; font-size: 13px; font-weight: 700; }
.pager__item.is-active { border-color: var(--accent); color: #fff; background: var(--accent); }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 16px; }
.inline-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.inline-form select { min-width: 220px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; }

/* Табель в форме источника: четыре строки на сотрудника */
.sheet-grid { min-width: max-content; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.sheet-grid th, .sheet-grid td { min-width: 34px; height: 26px; padding: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; background: #fff; }
.sheet-grid thead th { position: sticky; top: 0; z-index: 3; background: #f8f9fb; font-size: 10px; }
.sheet-grid thead th.is-weekend { color: #bd5833; background: #fff5f1; }
.sheet-grid thead th.is-locked { color: #aab3c2; background: #f1f2f5; }
.sheet-grid thead span, .sheet-grid thead small { display: block; }
.sheet-grid thead small { color: var(--muted); font-size: 9px; font-weight: 400; }
.sheet-grid th.employee-col { position: sticky; left: 0; z-index: 2; width: 230px; max-width: 230px; padding: 6px 12px; text-align: left; vertical-align: top; background: #fff; }
.sheet-grid thead th.employee-col { z-index: 5; background: #f8f9fb; }
.sheet-grid .employee-col strong, .sheet-grid .employee-col small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-grid .employee-col small { color: var(--muted); font-weight: 400; font-size: 10px; }
.sheet-grid .is-half-end { border-right: 2px solid var(--navy-soft); }
.sheet-grid .total-col { min-width: 58px; background: #f8f9fb; color: var(--muted); font-size: 10px; }
.sheet-grid .total-col--value { color: var(--ink); font-weight: 800; font-size: 12px; }
.sheet-grid .total-col--value.is-month { background: var(--accent-soft); color: #a8431c; }
.sheet-grid__subhead th { top: 34px; }
.sheet-row--code td { background: #fcfcfd; }
.sheet-row--overtime td { background: #fbfaff; }
.sheet-row--hours .sheet-value { font-weight: 800; }
.sheet-value { display: inline-block; min-width: 14px; color: var(--ink); }
.sheet-value.is-zero { color: #c2c8d3; }
.sheet-value.has-value { color: #6a3fb5; font-weight: 800; }
.sheet-cell { width: 100%; height: 25px; border: 0; color: #7b8596; background: transparent; cursor: pointer; font-weight: 800; }
.sheet-cell:hover { outline: 2px solid #ffc4ad; outline-offset: -2px; }
.sheet-cell.has-value { color: #126646; }
.sheet-cell.is-locked { color: #ccd2dc; cursor: not-allowed; }
.extra-mark { color: var(--accent); font-size: 9px; vertical-align: super; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 14px; color: var(--muted); font-size: 12px; }
.legend strong { color: var(--ink); }

/* Переход между половинами месяца на экране табеля */
.period-switch { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px; }
.period-switch__form { margin: 0; }
.period-switch__item { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 12px; font-weight: 750; cursor: pointer; }
a.period-switch__item:hover { border-color: var(--accent); color: var(--accent); }
.period-switch__item.is-active { border-color: var(--navy); color: #fff; background: var(--navy); cursor: default; }
.period-switch__item--new { border-style: dashed; color: var(--accent); }
.period-switch__item--new:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Личный кабинет и согласования */
.personal-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 8px; margin-top: 16px; }
.personal-days article { display: grid; gap: 3px; min-height: 76px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; text-align: center; background: #fafbfd; }
.personal-days article span { color: var(--accent); font-size: 16px; font-weight: 800; }
.personal-days article small { color: var(--muted); }
.approval-list { display: grid; gap: 10px; margin-top: 16px; }
.approval-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fafbfd; }
/* Карточка премии выше и шире прочих: разбор занимает всю ширину, иначе он
   сжимается в узкую среднюю колонку и вытягивается на десять строк вниз. */
.approval-card--bonus { display: block; }
.approval-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.approval-card__head > div:first-child { display: grid; gap: 4px; min-width: 0; }
.approval-card > div:first-child { display: grid; gap: 4px; }
.approval-card small { color: var(--muted); }
.approval-actions { margin-left: auto; }
.decision-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.decision-form input { min-width: 220px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; }
.workflow-action { display: flex; justify-content: flex-end; margin: 0 0 16px; }
.alert--info { color: #31516e; background: #edf6ff; }
/* Назначение, потерявшее пользователя или подразделение: видно, что это мусор. */
.data-list article.is-orphan strong { color: var(--muted, #68748a); }
.data-list article.is-orphan small { color: #b45309; }

/* Учётные записи: кто, с какими ролями и в какой области. */
.access-list { display: grid; gap: 8px; margin-top: 16px; }
.access-row { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: center; gap: 12px 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.access-row.is-empty { border-style: dashed; background: #fcfcfd; }
.access-row__who strong { display: block; }
.access-row__who small { display: block; color: var(--muted); font-size: 11px; }
.access-row__roles { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.access-chip { display: grid; gap: 1px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 9px; background: #f8f9fb; }
.access-chip strong { font-size: 12px; }
.access-chip small { color: var(--muted); font-size: 10px; }
@media (max-width: 760px) { .access-row { grid-template-columns: minmax(0, 1fr); } }

.role-form label { flex: 1 1 180px; }

@media (max-width: 760px) {
	.approval-card { align-items: stretch; flex-direction: column; }
	.approval-actions { width: 100%; margin-left: 0; }
	.decision-form { justify-content: stretch; }
	.decision-form input { width: 100%; }
}

/* Сводная аналитика ФОТ: подразделения и сотрудники по месяцам */
.pivot-grid { min-width: max-content; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.pivot-grid th, .pivot-grid td { padding: 7px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: right; background: #fff; white-space: nowrap; }
.pivot-grid thead th { position: sticky; top: 0; z-index: 3; background: #f8f9fb; text-align: center; font-size: 11px; }
/* `white-space: normal` отменяет общий `nowrap` строки: длинное название
   подразделения иначе вылезает из колонки и налезает на первую сумму. */
.pivot-grid th.pivot-name { position: sticky; left: 0; z-index: 2; min-width: 300px; max-width: 340px; text-align: left; white-space: normal; background: #fff; font-weight: 600; }
.pivot-grid thead th.pivot-name { z-index: 5; background: #f8f9fb; }
.pivot-month { border-bottom: 0 !important; }
.pivot-sub { color: var(--muted); font-weight: 700; }
.pivot-sub--fact { color: #1c7a56; }
.pivot-plan { background: #fffdf6 !important; }
.pivot-fact { background: #f4fbf7 !important; color: #12513a; }
/* Переход по якорю не должен прятать строку под липкой шапкой таблицы. */
.pivot-row--department { scroll-margin-top: 96px; }
.pivot-row--department th.pivot-name { display: flex; align-items: center; gap: 8px; }
.pivot-row--department td { font-weight: 700; }
.pivot-toggle { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #fff; font-size: 13px; line-height: 1; }
.pivot-toggle:hover { border-color: var(--accent); color: var(--accent); }
.pivot-row--employee th.pivot-name { padding-left: 38px; font-weight: 400; }
.pivot-row--employee th.pivot-name small { display: block; color: var(--muted); font-size: 10px; }
.pivot-employee { color: var(--ink); }
.pivot-row--employee td { color: #4a5568; }
.pivot-row--total th, .pivot-row--total td { position: sticky; bottom: 0; border-top: 2px solid var(--navy-soft); background: #f8f9fb !important; font-weight: 800; }
.pivot-cell { padding: 2px 6px; border: 1px dashed transparent; border-radius: 6px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.pivot-cell:hover { border-color: var(--accent); color: var(--accent); }
.pivot-cell.is-manual { border-color: #c9a227; border-style: solid; background: #fff8e1; }

/* Расчёт выплаты: семь колонок и раскрытие подразделения до сотрудника */
.financial-table--payroll .financial-row { grid-template-columns: minmax(260px, 2.2fr) repeat(7, minmax(88px, 1fr)); align-items: start; }
.financial-table--payroll .financial-row span, .financial-table--payroll .financial-row strong:not(:first-child) { text-align: right; }
/* Заголовок первой колонки — тоже `span`, и без этого правила уезжает вправо. */
.financial-table--payroll .financial-row > :first-child { text-align: left; }
/* Имя и подпись под ним — двумя строками. Правило общее для всех денежных
   таблиц: иначе подразделение слипается с фамилией. */
.financial-table--payroll .financial-row strong:first-child,
.financial-table--people .financial-row strong:first-child,
.financial-table--reconcile .financial-row strong:first-child,
.financial-table--budget .financial-row strong:first-child { display: grid; gap: 3px; align-content: center; }
.financial-table--payroll .financial-row strong small,
.financial-table--people .financial-row strong small,
.financial-table--reconcile .financial-row strong small,
.financial-table--budget .financial-row strong small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.35; }
/* Подпись выравнивается по названию, а не по значку раскрытия: 17px + 8px зазор. */
.financial-row--group strong:first-child small { padding-left: 25px; }

/* Раскрытие подразделения. Класс свой, а не `pivot-toggle` сводной таблицы:
   там ссылка и есть значок, размером 18×18, здесь она несёт ещё и название.
   Пока класс был общим, фиксированная высота значка обрезала многострочное
   название, и «N чел.» ложилось поверх последней строки. */
.row-toggle { display: inline-flex; align-items: flex-start; gap: 8px; color: inherit; line-height: 1.35; text-decoration: none; }
.row-toggle:hover { color: var(--accent); }
.row-toggle__sign { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #fff; font-size: 12px; line-height: 1; }
.row-toggle:hover .row-toggle__sign { border-color: var(--accent); color: var(--accent); }
.financial-row--group { background: #fafbfd; }
.financial-row--child { padding-left: 18px; background: #fff; }
.financial-row--child strong:first-child { font-weight: 600; }
.financial-table--payroll .is-reference { color: var(--muted); }

/* Карточка-ссылка на вынесенный экран */
.panel--link .panel-copy { max-width: 640px; }

/* Панель быстрого заполнения табеля.
   Свёрнута по умолчанию у заполненного табеля и раскрыта у пустого:
   именно там она нужна в первую очередь. */
.fill-panel {
	margin: 0 0 18px;
	border: 1px solid var(--border, #e2e6ee);
	border-radius: 12px;
	background: var(--surface-soft, #f8fafc);
}
.fill-panel > summary {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;
}
.fill-panel > summary::-webkit-details-marker { display: none; }
.fill-panel > summary::before {
	content: "+";
	font-weight: 700;
	color: var(--accent, #f2683c);
}
.fill-panel[open] > summary::before { content: "−"; }
.fill-panel > summary small { color: var(--muted, #6b7280); }
.fill-form { padding: 0 18px 18px; }
.fill-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
}
.fill-form__row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.fill-form__row select,
.fill-form__row input[type="date"] { min-width: 170px; }
.fill-form__row .check-row { flex-direction: row; align-items: center; gap: 8px; }
.fill-hint { margin: 12px 0; color: var(--muted, #6b7280); font-size: 13px; max-width: 70ch; }
.fill-form__employees {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	max-height: 132px;
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid var(--border, #e2e6ee);
	border-radius: 8px;
	background: #fff;
}
.fill-form__employees label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.fill-form__employees .picker-all { width: 100%; font-weight: 600; }
.fill-form__actions { display: flex; gap: 10px; margin-top: 14px; }

/* Контекст решения по премии: CEO видит ФОТ сотрудника рядом с суммой,
   иначе непонятно, много это или мало. */
.bonus-context {
	margin: 10px 0 14px;
	padding: 12px 14px;
	border: 1px solid var(--border, #e2e6ee);
	border-radius: 10px;
	background: var(--surface-soft, #f8fafc);
}
.bonus-context__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px 20px;
}
.bonus-context__grid span { display: flex; flex-direction: column; gap: 2px; }
.bonus-context__grid small { color: var(--muted, #6b7280); font-size: 12px; }
.bonus-context__grid strong { font-size: 15px; }
/* Вторая подпись под значением — уточнение той же величины в других единицах. */
.bonus-context__grid strong + small { font-size: 11px; }
.bonus-context__grid .is-warning strong { color: #c2410c; }
.bonus-context__grid .is-reference strong { color: var(--muted, #6b7280); font-weight: 500; }
.bonus-context__history {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--muted, #6b7280);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}
.bonus-context__note { margin: 8px 0 0; font-size: 13px; color: #c2410c; }

/* Проверка табеля: полоса решения над таблицей и замечания к клеткам. */
.review-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid #f2ddaa;
	border-radius: 10px;
	background: #fff8e6;
}
.review-bar__text { flex: 1 1 260px; font-size: 13px; color: #8a5a00; }
.review-bar input[name="decision_comment"] { min-width: 220px; }
.sheet-cell.has-note { position: relative; box-shadow: inset 0 0 0 2px #f0a202; }
.sheet-cell.has-note::after {
	content: '';
	position: absolute;
	top: 1px;
	right: 1px;
	border: 4px solid transparent;
	border-top-color: #d97706;
	border-right-color: #d97706;
}
/* Снятое замечание оставляет тихий след: день выглядит обычным, но видно,
   что по нему был вопрос, и историю можно открыть. */
.sheet-cell.has-note-history { position: relative; }
.sheet-cell.has-note-history::after {
	content: '';
	position: absolute;
	top: 2px;
	right: 2px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #b6bec9;
}
/* Отклонённое в сводке премий не спорит за внимание с согласованным. */
.pivot-table td.is-muted { color: var(--muted, #68748a); }
.bonus-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.note-count { color: #b45309; font-weight: 600; }
.note-count--done { color: var(--muted, #6b7280); font-weight: 500; }
.dialog-note {
	margin: 10px 0 0;
	padding: 10px 12px;
	border: 1px solid #f2ddaa;
	border-radius: 8px;
	background: #fff8e6;
}
.dialog-note__title { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: #8a5a00; text-transform: uppercase; letter-spacing: .04em; }
.dialog-note__log { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.dialog-note__log li { font-size: 13px; color: #6b4a12; }
.dialog-note__log li.is-resolved { color: var(--muted, #6b7280); }
.dialog-note__check { font-size: 13px; color: #8a5a00; }
.dialog-note__reason { display: grid; gap: 5px; margin-top: 10px; font-size: 12px; font-weight: 700; color: #8a5a00; }
.notes-list__item form { display: flex; align-items: center; gap: 8px; }
.notes-list__item input[name="resolve_comment"] { min-width: 220px; min-height: 36px; padding: 7px 10px; border: 1px solid #d9dee7; border-radius: 8px; }
.notes-block { margin: 16px 0 0; }
.notes-block h3 { margin: 0 0 8px; font-size: 15px; }
.notes-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.notes-list__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid #f2ddaa;
	border-radius: 10px;
	background: #fffdf7;
}
.notes-list__item small { display: block; color: var(--muted, #6b7280); font-size: 12px; }
.notes-list__item p { margin: 6px 0 0; font-size: 13px; }
.notes-list__item.is-resolved { border-color: var(--border, #e2e6ee); background: #fafbfc; opacity: 0.7; }
.notes-list__resolution { margin: 4px 0 0; font-size: 12px; color: var(--muted, #6b7280); }
.notes-block--history { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line, #e5e8ee); border-radius: 12px; background: #fbfcfd; }
.notes-block--history summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; font-size: 14px; }
.notes-block--history summary small { color: var(--muted, #6b7280); font-size: 12px; }
.notes-block--history .notes-list { margin-top: 10px; }
.approval-card__link { font-weight: 600; color: var(--text, #1f2937); text-decoration: none; }
.approval-card__link:hover { color: var(--accent, #f2683c); text-decoration: underline; }

/* Кнопки выгрузки рядом с заголовками разделов. */
.panel__header-actions { display: flex; align-items: center; gap: 12px; }
.sheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
/* Удаление стоит в общем ряду, но отодвинуто вправо: попасть по нему случайно
   рядом с выгрузками не должно. */
.sheet-actions__danger { margin-left: auto; }
.button--danger {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid #f0c8c8;
	border-radius: 8px;
	background: #fff;
	color: #9b2c2c;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.button--danger:hover { border-color: #c53030; background: #fff5f5; }
.button--ghost {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--border, #e2e6ee);
	border-radius: 8px;
	background: #fff;
	color: var(--text, #1f2937);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}
.button--ghost:hover { border-color: var(--accent, #f2683c); color: var(--accent, #f2683c); }

/* Панель массового сохранения: появляется, когда есть несохранённые правки. */
.days-form { margin: 0 0 14px; }
.days-form__hint {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--muted, #6b7280);
	max-width: 90ch;
}
.days-form__bar {
	display: none;
	align-items: center;
	gap: 16px;
	padding: 10px 14px;
	border: 1px solid var(--accent, #f2683c);
	border-radius: 10px;
	background: #fff7ed;
}
.days-form.is-active .days-form__bar { display: flex; }
.days-form__bar strong { font-size: 16px; }

/* Клетка под клавиатурным вводом: видно, где курсор и что изменено. */
.sheet-cell:focus {
	outline: 2px solid var(--accent, #f2683c);
	outline-offset: -2px;
	border-radius: 4px;
}
.sheet-cell.is-changed {
	background: #fff7ed;
	font-weight: 700;
}

/* Список отклонений: цвет отражает срочность, а не украшает. */
.alerts-panel { margin-bottom: 20px; }
/* Карточка стала выше из-за формы разбора, поэтому колонка уже: на широком
   экране помещается четыре, на ноутбуке — три. */
.alerts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; align-items: start; }
.alert-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	border: 1px solid var(--border, #e2e6ee);
	border-left-width: 4px;
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	color: inherit;
}
.alert-card:hover { border-color: var(--accent, #f2683c); }
.alert-card strong { font-size: 14px; }
.alert-card small { color: var(--muted, #6b7280); font-size: 13px; }
.alert-card--danger { border-left-color: #dc2626; }
.alert-card--warning { border-left-color: #f59e0b; }
.alert-card--info { border-left-color: #3b82f6; }
.alerts-panel--clean .panel-copy { margin-bottom: 0; }

/* Поле фильтра над длинным выпадающим списком */
.select-search-wrap { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.select-search-wrap select { width: 100%; min-width: 0; max-width: 100%; }
.select-search { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; }
.select-search:focus { border-color: var(--accent); outline: none; }
.select-search::placeholder { color: #9aa3b2; }
.select-search__note { display: block; color: var(--muted); font-size: 11px; }
.select-search__note:empty { display: none; }
.inline-form .select-search, .filter-row .select-search { min-width: 200px; }

/* Экран ФОТ: расчёт во всю ширину, загрузка данных — свёрнутым блоком.
   Импорт нужен раз в месяц, а после перехода на автообновление из 1С:ЗУП
   станет и вовсе резервным путём, поэтому он не должен отнимать половину
   ширины у таблицы, ради которой экран открывают. */
.panel--wide { width: 100%; }
.panel--wide .financial-table { min-width: 100%; }

.tools-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.tools-panel__summary { display: flex; flex-direction: column; gap: 3px; padding: 16px 22px; color: var(--ink); font-weight: 750; cursor: pointer; list-style: none; }
.tools-panel__summary::-webkit-details-marker { display: none; }
.tools-panel__summary::before { content: "＋ "; color: var(--accent); font-weight: 800; }
.tools-panel[open] .tools-panel__summary::before { content: "− "; }
.tools-panel__summary small { color: var(--muted); font-size: 12px; font-weight: 400; }
.tools-panel__summary:hover { background: #fafbfd; }
.tools-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; padding: 0 22px 22px; }
.tools-panel__grid .panel { box-shadow: none; border: 1px solid var(--line); }

/* Журналы поставок прокручиваются: их читают редко, а растут они постоянно. */
.tools-panel .import-history .data-list { max-height: 260px; overflow-y: auto; }

@media (max-width: 900px) { .tools-panel__grid { grid-template-columns: 1fr; } }

/* Пять карточек вместо четырёх: они повторяют колонки таблицы расчёта. */
.metric-grid--payroll { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.metric-card--total { border-color: var(--navy); }
.metric-card--total .money-value { color: var(--navy); }

/* Выбор нескольких подразделений: раскрывающийся список с поиском.
   Развёрнутый список из четырёх десятков отделов занимал пол-экрана и читался
   сплошной строкой, поэтому он свёрнут и сужается по мере ввода. */
.filter-row--multi { flex-wrap: wrap; }
.combo { position: relative; min-width: 280px; }
.combo__toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; height: 38px; padding: 0 11px;
	border: 1px solid var(--line); border-radius: 9px; background: #fff;
	color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.combo__toggle:hover { border-color: #b9c2d0; }
.combo__caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__arrow { color: var(--muted); flex: 0 0 auto; }
.combo[data-open] .combo__arrow { transform: rotate(180deg); }
.combo__panel {
	position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
	width: 340px; max-width: 92vw; padding: 10px;
	border: 1px solid #d9dee7; border-radius: 12px; background: #fff;
	box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}
.combo__search {
	width: 100%; height: 36px; padding: 0 11px; margin-bottom: 8px;
	border: 1px solid var(--line); border-radius: 9px; font: inherit;
}
.combo__tools { display: flex; gap: 14px; padding: 0 2px 8px; border-bottom: 1px solid #eef0f4; }
.filter-row .combo__link, .combo__link {
	height: auto; padding: 0; border: 0; border-radius: 0; background: none;
	color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.combo__link:hover { text-decoration: underline; }
.combo__list { max-height: 300px; overflow-y: auto; margin-top: 6px; }
.combo__option {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 6px 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.combo__option:hover { background: #f3f5f8; }
/* Скрытие поиском: без этого display: flex перебивает атрибут hidden. */
.combo__option input { width: 16px !important; min-height: 16px !important; flex: 0 0 auto; accent-color: var(--accent); }
/* Одиночный список стоит в узкой колонке формы, поэтому панель равняется по
   полю, а не по фиксированной ширине фильтра. */
[data-combo-single] .combo__panel { width: 100%; min-width: 260px; }
.combo__option--single { align-items: center; }
/* Радиокнопке иначе достаётся `width: 100%` от полей формы: она распирает
   строку на всю ширину, и фамилия переносится под неё. */
.combo__option--single input[type="radio"] {
	flex: 0 0 auto;
	width: 16px !important;
	min-width: 16px;
	min-height: 16px !important;
	margin: 0;
	padding: 0;
	accent-color: var(--accent, #f36b3d);
}
.combo__option--single span { display: grid; gap: 1px; min-width: 0; }
.combo__option--single strong { color: var(--ink, #172033); font-size: 13px; font-weight: 600; }
.combo__option--single small { color: var(--muted, #68748a); font-size: 11px; font-weight: 400; }
.field { display: grid; gap: 5px; }
.field__label { color: var(--muted, #68748a); font-size: 12px; font-weight: 700; }
.combo__empty { margin: 10px 6px; color: var(--muted); font-size: 13px; }

/* Сверка с 1С: восемь колонок, последняя — разница со знаком. */
.financial-table--reconcile .financial-row { grid-template-columns: minmax(260px, 2.4fr) repeat(7, minmax(86px, 1fr)); align-items: start; }
.financial-table--reconcile .financial-row span,
.financial-table--reconcile .financial-row strong:not(:first-child) { text-align: right; }
.financial-table--reconcile .is-warning { color: var(--accent, #e8590c); }

.financial-table--budget .financial-row { grid-template-columns: minmax(280px, 2.4fr) repeat(4, minmax(100px, 1fr)); }
.financial-table--budget .financial-row span,
.financial-table--budget .financial-row strong:not(:first-child) { text-align: right; }
.financial-table--budget .is-warning { color: var(--accent, #e8590c); }

/* Состав прочих выплат подразделения: одна строка на всю ширину таблицы. */
.financial-row--note { display: block; padding: 10px 8px; background: #f7f8fa; color: var(--muted); font-size: 12px; text-align: left; }
.financial-row--note span { text-align: left; }
/* Раскрытая строка не должна прятаться под шапкой при переходе по якорю. */
.financial-row--group { scroll-margin-top: 90px; }

/* Показатель, из которого можно провалиться в список. */
a.metric-card { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.metric-card:hover { border-color: var(--accent, #e8590c); transform: translateY(-1px); }
.financial-table--people .financial-row { grid-template-columns: minmax(260px, 2.4fr) repeat(5, minmax(96px, 1fr)); }
.financial-table--people .financial-row span,
.financial-table--people .financial-row strong:not(:first-child) { text-align: right; }
#people { scroll-margin-top: 90px; }

.financial-table--budget .financial-row--group { scroll-margin-top: 90px; }

/* Разбор отклонения: причина обязательна, иначе список просто прячут. */
.alert-card { display: flex; flex-direction: column; gap: 8px; }
.alert-card > a { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.alert-card__form { display: flex; gap: 8px; align-items: center; }
.alert-card__form input[type="text"] { flex: 1; min-width: 0; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 12px; }
.alert-card__form button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent, #e8590c); white-space: nowrap; }
.alert-card__note { color: var(--muted); font-size: 11px; }
.alert-card--resolved { opacity: .62; }
.alerts-toggle { margin: 4px 0 0; font-size: 12px; }