:root {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #0f172a;
  background: #f6f8fb;
  font-size: 16px;
  --navy: #0f172a;
  --blue: #2563d9;
  --blue-light: #4a7dea;
  --surface: #ffffff;
  --canvas: #f6f8fb;
  --muted: #6b7a90;
  --line: #e5eaf1;
  --success: #10b981;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: #1d4ed8; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(37, 99, 235, .28); outline-offset: 2px; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.brand-mark { display: inline-flex; width: 42px; height: 42px; flex: 0 0 42px; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-name { color: #0f172a; font-size: 28px; font-weight: 750; letter-spacing: -1.1px; line-height: 1; }
.brand-name span { color: var(--blue); }
.brand-light .brand-name { color: #fff; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 260px; display: flex; flex-direction: column; overflow-y: auto; padding: 27px 18px 20px; color: var(--navy); background: #fff; border-right: 1px solid var(--line); }
.sidebar-head { padding: 0 10px; }
.aside-caption { margin: 13px 0 0 53px; color: #8290a3; font-size: 12px; line-height: 1.5; }
nav { display: grid; flex: 0 0 auto; gap: 5px; margin-top: 20px; }
nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 13px; border-radius: 9px; color: #526178; font-size: 14px; font-weight: 560; transition: background .16s ease, color .16s ease; }
nav a:hover { color: #1e4f9c; background: #f3f7fd; }
nav a.active { color: #164ba5; background: #eaf2ff; font-weight: 680; }
nav a.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--blue); border-radius: 0 3px 3px 0; }
.nav-icon { display: grid; place-items: center; width: 22px; height: 22px; color: #71839a; }
.nav-icon svg { display: block; width: 20px; height: 20px; }
nav a.active .nav-icon { color: var(--blue); }
.account { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px 9px; align-items: center; padding: 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.account-top { margin-top: 22px; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #174a9b; background: #e7f0ff; font-weight: 750; }
.account-copy { min-width: 0; }
.account strong, .account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account strong { color: #243247; font-size: 13px; }
.account small { margin-top: 3px; color: #8491a3; font-size: 12px; }
.account form { grid-column: auto; margin: 0; }
.logout { gap: 5px; width: auto; min-height: 36px; margin: 0; padding: 7px 9px; color: #526178; background: #fff; border: 1px solid var(--line); box-shadow: none; font-size: 12px; }
.logout > span:first-child { font-size: 17px; line-height: 1; transform: rotate(180deg); }
.logout:hover { color: #334155; background: #f1f5f9; border-color: #d7dee8; box-shadow: none; transform: none; }
.workspace { max-width: 1600px; margin-left: 260px; padding: 36px clamp(24px, 4vw, 58px); }
header { margin-bottom: 28px; }
.dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
h1 { margin: 7px 0 7px; color: var(--navy); font-size: clamp(28px, 2.5vw, 35px); font-weight: 740; letter-spacing: -.75px; line-height: 1.2; }
h2 { margin: 6px 0 12px; color: var(--navy); font-size: 22px; font-weight: 720; letter-spacing: -.35px; }
.eyebrow { margin: 0; color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: 1.6px; }
.eyebrow.light { color: #93c5fd; }
.muted { color: var(--muted); line-height: 1.65; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.card { margin-bottom: 22px; padding: 25px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .025); }
.stat-card { position: relative; display: flex; gap: 18px; align-items: flex-start; overflow: hidden; }
.stat-card .muted { margin: 0 0 8px; }
.stat-accent { width: 10px; height: 74px; border-radius: 8px; background: #dbeafe; }
.stat-accent.blue { background: linear-gradient(#60a5fa, #2563eb); }
.stat-accent.green { background: linear-gradient(#34d399, #10b981); }
.number { margin: 0 0 8px; font-size: 42px; font-weight: 760; letter-spacing: -1.5px; }
.documents-card { margin-top: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.section-head > div { min-width: 0; }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 19px; border: 0; border-radius: 9px; color: #fff; background: var(--blue); box-shadow: 0 4px 12px rgba(37, 99, 217, .15); font: inherit; font-weight: 650; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
button:hover, .button:hover { color: #fff; background: #1d55bd; box-shadow: 0 6px 16px rgba(37,99,217,.2); transform: translateY(-1px); }
.form-card { max-width: 790px; }
.staff-filters { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 14px; align-items: end; max-width: none; }
.staff-filters p { margin: 0; }
.staff-filters label { margin: 0; }
.staff-filters input, .staff-filters select { min-height: 42px; }
.staff-filter-card { max-width: none; }
.staff-filter-card h2 { margin: 0 0 18px; font-size: 18px; }
.staff-filter-actions { display: flex; gap: 8px; }
.staff-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.staff-actions form { margin: 0; }
.staff-actions button { min-height: 34px; padding: 7px 10px; font-size: 12px; }
@media (max-width: 980px) { .staff-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .staff-filters { grid-template-columns: 1fr; } .staff-filters .button, .staff-filters button { width: 100%; } }
label { display: block; margin-bottom: 8px; color: #1e293b; font-size: 15px; font-weight: 650; }
input, textarea, select { width: 100%; min-height: 46px; padding: 11px 13px; color: var(--navy); background: #fff; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
input:hover, textarea:hover, select:hover { border-color: #94a3b8; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,.09); outline: none; }
textarea { resize: vertical; }
form p { margin: 0 0 21px; }
.help, .helptext { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.help { margin-top: 25px; font-size: 14px; }
.helptext ul { padding-left: 20px; }
.error, .errorlist { color: #b42318; font-size: 14px; line-height: 1.55; }
.error-box { margin: 18px 0; padding: 13px 15px; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; }
.notice { margin-bottom: 22px; padding: 15px 17px; color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
th { color: #69798d; background: #f8fafc; font-weight: 650; }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover { background: #f8fbff; }
.status { display: inline-flex; padding: 5px 9px; color: #13725a; background: #e5f7f1; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.search { max-width: 790px; margin-bottom: 22px; }
.search-row { display: flex; gap: 10px; }
.search-row button { white-space: nowrap; }
.empty { padding: 38px 12px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 15px; color: var(--blue); background: #eff6ff; border-radius: 14px; font-size: 24px; }
.details dl { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; margin: 0; }
.details dl div { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.details .wide { grid-column: 1 / -1; }
.details dt { margin-bottom: 7px; color: var(--muted); font-size: 13px; }
.details dd { margin: 0; line-height: 1.6; }
.record-meta { margin: 28px 0 0; color: var(--muted); font-size: 13px; }
.page-kicker { margin: 0; color: #55708f; font-size: 12px; font-weight: 720; letter-spacing: .9px; text-transform: uppercase; }
.dashboard-head { margin-bottom: 27px; }
.dashboard-head h1 { margin-top: 8px; }
.dashboard-org { margin: 0; color: #718096; font-size: 15px; line-height: 1.5; }
.dashboard-primary { min-height: 46px; padding: 10px 17px 10px 12px; }
.button-icon { display: grid; place-items: center; width: 27px; height: 27px; margin-right: 9px; background: rgba(255,255,255,.15); border-radius: 7px; font-size: 20px; font-weight: 400; line-height: 1; }
.overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.summary-card { display: grid; grid-template-columns: 54px 1fr; gap: 17px; align-items: center; min-height: 150px; padding: 23px; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.025); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
a.summary-card:hover { color: inherit; border-color: #ccd9eb; box-shadow: 0 8px 24px rgba(37,73,118,.07); transform: translateY(-1px); }
.summary-icon { display: grid; place-items: center; align-self: start; width: 52px; height: 52px; border-radius: 13px; }
.summary-icon svg { width: 25px; height: 25px; }
.summary-icon-blue { color: #245fd1; background: #eaf1ff; }
.summary-icon-teal { color: #0d8d83; background: #e5f6f3; }
.summary-copy { min-width: 0; }
.summary-copy small, .summary-copy strong, .summary-copy > span { display: block; }
.summary-copy small { color: #6f7f92; font-size: 14px; }
.summary-copy strong { margin: 5px 0 7px; color: #172033; font-size: 34px; font-weight: 740; letter-spacing: -1px; line-height: 1.1; }
.summary-copy > span { color: #3566b5; font-size: 13px; font-weight: 600; }
.summary-copy > span b { margin-left: 3px; font-size: 15px; }
.recent-panel { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.025); }
.recent-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.recent-head h2 { margin: 5px 0 0; font-size: 21px; }
.text-link { color: #3566b5; font-size: 13px; font-weight: 620; white-space: nowrap; }
.text-link span { margin-left: 4px; }
.recent-list { display: grid; }
.document-row { display: grid; grid-template-columns: 40px minmax(200px, 1.25fr) minmax(160px, .9fr) 86px auto 18px; gap: 14px; align-items: center; min-height: 76px; padding: 12px 24px; color: #273449; border-bottom: 1px solid #edf0f4; transition: background .15s ease; }
.document-row:last-child { border-bottom: 0; }
.document-row:hover { color: #273449; background: #f9fbfe; }
.document-file-icon { display: grid; place-items: center; width: 38px; height: 38px; color: #3569c8; background: #eef4ff; border-radius: 10px; }
.document-file-icon svg { width: 20px; height: 20px; }
.document-main, .document-sender { min-width: 0; }
.document-main strong, .document-main small, .document-sender strong, .document-sender small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-main strong { color: #2358b6; font-size: 13px; }
.document-main small { margin-top: 5px; color: #44536a; font-size: 14px; }
.document-sender small { color: #8a97a8; font-size: 11px; }
.document-sender strong { margin-top: 4px; color: #516074; font-size: 13px; font-weight: 560; }
.document-row time { color: #69798c; font-size: 13px; }
.row-arrow { color: #9aa8b9; font-size: 22px; }
.dashboard-empty { padding: 44px 20px 48px; }
.dashboard-empty h2 { margin-bottom: 4px; }
.auth-body { background: #fff; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(560px, 1.08fr) minmax(460px, .92fr); margin: 0; padding: 0; }
.login-story { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 100vh; padding: clamp(30px, 3.6vw, 58px); background: #eef8ff url("hatdocs-kazakhstan-skyline-v1.webp") center bottom / cover no-repeat; }
.login-story::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(224,242,254,.3) 54%, rgba(239,248,255,.12)); }
.login-story-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.login-logo .brand-mark { width: 45px; height: 45px; flex-basis: 45px; }
.login-logo .brand-name { font-size: 30px; }
.login-story-label { color: #55708f; font-size: 12px; font-weight: 650; letter-spacing: .3px; }
.login-story-copy { width: min(100%, 690px); margin-top: clamp(58px, 9vh, 108px); }
.login-story-copy h2 { margin: 0; color: #0b3567; font-size: clamp(44px, 4.8vw, 68px); font-weight: 780; line-height: 1.03; letter-spacing: -2.4px; }
.login-story-copy h2 span { color: #113f75; }
.login-story-copy p { width: min(100%, 590px); margin: 22px 0 0; color: #4e6b8c; font-size: clamp(17px, 1.35vw, 20px); font-weight: 520; line-height: 1.5; }
.document-flow { position: relative; width: min(100%, 680px); height: 230px; margin-top: clamp(34px, 7vh, 76px); }
.flow-line { position: absolute; inset: 42px 2% auto; width: 96%; height: 112px; overflow: visible; }
.flow-line path { fill: none; stroke: #12b8bb; stroke-width: 3; stroke-linecap: round; }
.flow-line circle { fill: #fff; stroke: #12b8bb; stroke-width: 3; }
.flow-card { position: absolute; width: 178px; min-height: 168px; padding: 20px 18px 17px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.92); border-radius: 14px; box-shadow: 0 16px 38px rgba(54,106,153,.14); backdrop-filter: blur(8px); }
.flow-card-one { left: 0; top: 0; }
.flow-card-two { left: 50%; top: 52px; transform: translateX(-50%); }
.flow-card-three { right: 0; top: 0; }
.flow-doc-icon { position: relative; display: block; width: 42px; height: 49px; margin-bottom: 14px; background: linear-gradient(145deg, #f2f7fb, #dceafa); border-radius: 5px; box-shadow: 0 5px 12px rgba(58,104,149,.08); }
.flow-doc-icon::after { content: ""; position: absolute; right: 0; top: 0; border-top: 11px solid #fff; border-left: 11px solid transparent; }
.flow-doc-icon i { position: relative; display: block; top: 16px; width: 23px; height: 3px; margin: 0 0 5px 9px; background: #a7bed6; border-radius: 2px; }
.flow-doc-icon i:nth-child(2) { width: 18px; }
.flow-card strong, .flow-card small { display: block; }
.flow-card strong { color: #123e70; font-size: 15px; }
.flow-card small { margin-top: 7px; color: #7790aa; font-size: 12px; line-height: 1.35; }
.flow-card > b { position: absolute; right: 16px; top: 24px; display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: #11b9b7; border: 4px solid #e1faf9; border-radius: 50%; font-size: 12px; }
.login-story-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 22px; color: #52718f; border-top: 1px solid rgba(31,97,151,.15); font-size: 12px; letter-spacing: .4px; }
.login-story-footer span:first-child { color: #0b3567; font-weight: 750; }
.login-form-panel { display: grid; min-height: 100vh; padding: clamp(30px, 4vw, 64px); background: #fff; }
.login-form-wrap { width: min(100%, 520px); min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; margin: 0 auto; }
.login-form-top { display: flex; justify-content: flex-end; align-items: center; min-height: 42px; }
.secure-label { display: inline-flex; align-items: center; gap: 8px; color: #64748b; font-size: 12px; font-weight: 600; }
.secure-label > span { display: grid; place-items: center; width: 23px; height: 23px; color: #047857; background: #d1fae5; border-radius: 50%; font-size: 12px; }
.login-card { width: 100%; margin: 48px 0; }
.login-card-heading { margin-bottom: 33px; }
.login-card h1 { margin: 10px 0 8px; color: #0b3567; font-size: clamp(34px, 3.2vw, 45px); letter-spacing: -1.3px; }
.login-card-heading .muted { margin: 0; color: #667c95; font-size: 15px; }
.login-form { display: grid; gap: 22px; }
.login-field label { margin-bottom: 9px; color: #173d69; font-size: 14px; }
.login-input-wrap { position: relative; }
.login-input-wrap input { min-height: 54px; padding: 13px 15px 13px 49px; background: #fff; border-color: #c6d5e3; border-radius: 8px; }
.login-input-wrap input::placeholder { color: #9aabbc; }
.login-input-wrap input:hover { border-color: #8facC7; }
.login-input-wrap input:focus { border-color: #1686c9; box-shadow: 0 0 0 4px rgba(20,134,201,.1); }
.login-input-icon { position: absolute; z-index: 1; left: 16px; top: 50%; width: 21px; height: 21px; color: #7890a9; transform: translateY(-50%); pointer-events: none; }
.login-input-icon svg { display: block; width: 100%; height: 100%; }
.login-field:focus-within .login-input-icon { color: #1686c9; }
.login-field .errorlist { margin: 7px 0 0; padding: 0; list-style: none; }
.login-submit { width: 100%; min-height: 54px; justify-content: center; gap: 14px; margin-top: 3px; padding: 13px 20px; background: linear-gradient(135deg, #0b457f, #0c5598); border-radius: 8px; box-shadow: 0 9px 22px rgba(11,69,127,.18); }
.login-submit:hover { background: linear-gradient(135deg, #083b6e, #0b4b89); }
.login-submit span:last-child { font-size: 18px; transition: transform .16s ease; }
.login-submit:hover span:last-child { transform: translateX(3px); }
.login-access-help { margin: 26px 0 0; color: #7890a9; font-size: 13px; text-align: center; }
.login-access-help strong { color: #139ca4; font-weight: 650; }
.login-form-footer { display: flex; justify-content: center; gap: 14px; color: #94a3b8; font-size: 11px; }
.login-form-footer span:first-child { padding-right: 14px; color: #48637e; border-right: 1px solid #cbd5e1; font-weight: 700; }
.mobile-brand { display: none; }
.login-card .error-box { margin: 0 0 22px; }
.login-card .error-box .errorlist { margin: 0; padding-left: 18px; }
@media (max-width: 1100px) {
  .login-shell { grid-template-columns: minmax(480px, 1fr) minmax(420px, .9fr); }
  .flow-card { width: 154px; }
}
@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-story { min-height: 330px; padding: 27px; background-position: center bottom; }
  .login-story-copy { margin-top: 48px; }
  .login-story-copy h2 { font-size: 42px; }
  .login-story-copy p { max-width: 570px; margin-top: 14px; font-size: 16px; }
  .document-flow, .login-story-footer { display: none; }
  .login-form-panel { min-height: auto; padding: 32px 22px; }
  .login-form-top { justify-content: space-between; }
  .mobile-brand { display: inline-flex; }
  .mobile-brand .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .mobile-brand .brand-name { font-size: 24px; }
  .login-card { margin: 34px 0 30px; }
}
@media (max-width: 540px) {
  .login-story { min-height: 250px; padding: 21px 19px; background-position: 54% bottom; }
  .login-story-label { display: none; }
  .login-logo .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .login-logo .brand-name { font-size: 27px; }
  .login-story-copy { margin-top: 35px; }
  .login-story-copy h2 { font-size: 33px; letter-spacing: -1.3px; }
  .login-story-copy p { display: none; }
  .login-form-panel { padding: 24px 18px; }
  .secure-label { font-size: 11px; }
  .login-card { margin: 28px 0 24px; }
  .login-card-heading { margin-bottom: 27px; }
  .login-card h1 { font-size: 32px; }
  .login-form-footer { display: block; text-align: center; }
  .login-form-footer span:first-child { margin-right: 10px; }
}
.mail-filters { display: flex; gap: 8px; margin: 0 0 18px; overflow-x: auto; }
.mail-filters a { flex: 0 0 auto; padding: 9px 13px; color: #53657a; background: #fff; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; font-weight: 650; }
.mail-filters a.active { color: #245fd1; background: #edf4ff; border-color: #c9daf8; }
.mail-body { max-width: 880px; overflow-wrap: anywhere; line-height: 1.65; }
.attachment-block { margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--line); }
.attachment-block h2 { margin: 0 0 12px; font-size: 18px; }
.attachment-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.attachment-list li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 13px; background: #f7f9fc; border-radius: 9px; }
.attachment-list span { color: #78879a; font-size: 12px; white-space: nowrap; }
.attachment-name { display: grid; min-width: 0; gap: 4px; overflow-wrap: anywhere; }
.attachment-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.preview-header { align-items: flex-end; }
.preview-header h1 { max-width: 820px; font-size: 30px; overflow-wrap: anywhere; }
.preview-card { min-height: 480px; padding: 18px; }
.preview-frame { width: 100%; min-height: 72vh; border: 0; border-radius: 10px; background: #eef2f7; }
.image-preview { display: grid; min-height: 440px; place-items: center; padding: 16px; background: #eef2f7; border-radius: 10px; }
.image-preview img { max-width: 100%; max-height: 76vh; object-fit: contain; box-shadow: 0 6px 24px rgba(23,43,77,.12); }
.text-preview, .office-preview { max-width: 980px; margin: 0 auto; padding: 38px 46px; color: #1d2b3d; background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.office-preview p { margin: 0 0 1em; }
.office-preview .table-wrap, .spreadsheet-preview .table-wrap { margin: 22px 0; }
.office-preview td, .spreadsheet-preview td { min-width: 100px; padding: 8px 10px; border: 1px solid var(--line); vertical-align: top; }
.spreadsheet-preview section + section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.spreadsheet-preview h2 { margin: 0; font-size: 18px; }
.preview-unavailable { max-width: 560px; margin: 80px auto; text-align: center; }
.preview-unavailable p { margin-bottom: 24px; color: #6f7f91; }
.settings-head { align-items: center; }
.integration-grid { display: grid; gap: 16px; }
.integration-card, .audit-panel, .settings-form-card, .empty-state { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 5px 18px rgba(31,53,81,.05); }
.integration-card-head { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 14px; }
.provider-mark { display: grid; place-items: center; width: 46px; height: 46px; color: #245fd1; background: #edf4ff; border-radius: 13px; font-size: 20px; font-weight: 800; }
.integration-card h2 { margin: 0 0 4px; font-size: 19px; }
.integration-card-head p { margin: 0; color: #728197; font-size: 13px; }
.connection-status { padding: 7px 10px; color: #53657a; background: #f2f5f8; border-radius: 999px; font-size: 12px; font-weight: 750; }
.status-работает { color: #18794e; background: #e9f8f0; }
.status-ошибка { color: #b42318; background: #fff0ee; }
.status-приостановлено { color: #795b17; background: #fff7df; }
.integration-meta { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 22px 0; }
.integration-meta div { padding: 13px; background: #f7f9fc; border-radius: 10px; }
.integration-meta dt { color: #7b899a; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.integration-meta dd { margin: 6px 0 0; color: #23364d; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.integration-error { margin: -5px 0 18px; padding: 12px 14px; color: #9f271d; background: #fff3f1; border-radius: 9px; font-size: 13px; overflow-wrap: anywhere; }
.integration-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.integration-actions form { margin: 0; }
.secondary-button, .text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 13px; color: #2b4e76; background: #fff; border: 1px solid #d9e2ec; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.text-button { color: #6b7788; border-color: transparent; }
.audit-panel { margin-top: 22px; }
.audit-list { display: grid; margin-top: 16px; }
.audit-list > div { display: grid; grid-template-columns: 130px 170px 130px minmax(0,1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; }
.audit-list time, .audit-list small { color: #738298; }
.settings-form-card { max-width: 860px; }
.integration-form { display: grid; gap: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.integration-form label { display: block; margin-bottom: 7px; color: #334a64; font-size: 13px; font-weight: 700; }
.integration-form small { display: block; margin-top: 6px; color: #77869a; }
.advanced-settings { padding: 14px 16px; background: #f7f9fc; border-radius: 11px; }
.advanced-settings summary { color: #3b5878; font-size: 13px; font-weight: 750; cursor: pointer; }
.advanced-settings .form-grid { margin-top: 16px; }
.security-note { padding: 15px 17px; color: #28556b; background: #edf8fa; border-radius: 11px; }
.security-note p { margin: 5px 0 0; font-size: 13px; }
.empty-state { text-align: center; }
.empty-state h2 { margin-top: 0; }
.empty-state .primary-button { margin-top: 10px; }
@media (min-width: 761px) and (max-width: 1120px) {
  .document-row { grid-template-columns: 40px minmax(190px, 1fr) 86px auto 18px; }
  .document-sender { display: none; }
}
@media (max-width: 760px) {
  .sidebar { position: static; width: auto; min-height: auto; padding: 16px 17px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-head { padding: 0 2px; }
  .sidebar .brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
  .sidebar .brand-name { font-size: 23px; }
  .aside-caption { display: none; }
  nav { display: flex; gap: 5px; margin-top: 14px; overflow-x: auto; padding-bottom: 3px; }
  nav a { flex: 0 0 auto; min-height: 40px; padding: 8px 10px; font-size: 13px; }
  .nav-icon { display: none; }
  .account { grid-template-columns: 34px 1fr auto; margin-top: 13px; padding: 10px; }
  .avatar { width: 34px; height: 34px; }
  .account form { grid-column: auto; }
  .logout { width: auto; margin: 0; }
  .workspace { margin-left: 0; padding: 27px 17px; }
  .dashboard-head, .section-head { align-items: flex-start; flex-direction: column; }
  .dashboard-primary { width: 100%; }
  .overview { grid-template-columns: 1fr; gap: 12px; }
  .summary-card { min-height: 118px; padding: 19px; }
  .recent-head { align-items: flex-start; flex-direction: column; gap: 12px; padding: 20px; }
  .document-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; min-height: 74px; padding: 11px 18px; }
  .document-sender, .document-row .status, .row-arrow { display: none; }
  .document-row time { grid-column: 3; grid-row: 1; }
  .grid { grid-template-columns: 1fr; gap: 0; }
  .card { padding: 20px; border-radius: 12px; }
  .search-row { align-items: stretch; flex-direction: column; }
  .details dl { grid-template-columns: 1fr; }
  .details .wide { grid-column: auto; }
  h1 { overflow-wrap: anywhere; }
  .settings-head { align-items: flex-start; }
  .integration-card { padding: 18px; }
  .integration-card-head { grid-template-columns: 42px minmax(0,1fr); }
  .connection-status { grid-column: 1 / -1; width: fit-content; }
  .integration-meta, .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .integration-actions { align-items: stretch; flex-direction: column; }
  .integration-actions form, .integration-actions button, .integration-actions a { width: 100%; }
  .audit-list > div { grid-template-columns: 1fr; gap: 3px; }
}

/* Workflow and assignments */
.workflow-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(340px,.65fr); gap: 20px; align-items: start; }
.workflow-card, .decision-card { min-width: 0; }
.workflow-steps { display: grid; gap: 0; margin-top: 22px; }
.workflow-step { position: relative; display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 13px; padding: 0 0 25px; }
.workflow-step:not(:last-child)::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: #e1e8f1; }
.workflow-step strong, .workflow-step small { display: block; }
.workflow-step small { margin-top: 5px; color: #748399; font-size: 12px; }
.workflow-step p { margin: 9px 0 0; color: #46566c; line-height: 1.55; }
.step-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 3px; background: #c6d0dd; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #c6d0dd; }
.step-approved, .step-completed { background: #15a36d; box-shadow: 0 0 0 2px #15a36d; }
.step-returned { background: #d94841; box-shadow: 0 0 0 2px #d94841; }
.step-pending, .step-assigned { background: #2f6dde; box-shadow: 0 0 0 2px #2f6dde; }
.decision-card form { margin-top: 20px; }
.return-box { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.return-box summary { color: #a13a33; font-weight: 650; cursor: pointer; }
.danger-button { background: #c63f38; }
.danger-button:hover { background: #ac332e; }
.workflow-status-returned, .overdue-label { color: #a72f29; background: #fff0ef; }
.workflow-status-in_progress { color: #2454a5; background: #eaf2ff; }
.completion-result { padding: 10px 12px; background: #eef9f4; border-radius: 8px; }
.audit-card { margin-top: 0; }
.workflow-audit { display: grid; margin-top: 18px; }
.workflow-audit > div { display: grid; grid-template-columns: 125px 180px 180px minmax(0,1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; }
.workflow-audit time, .workflow-audit span { color: #738298; }
.workflow-audit p { margin: 0; overflow-wrap: anywhere; }
.task-list { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.task-row { display: grid; grid-template-columns: 38px minmax(0,1fr) 125px; gap: 15px; align-items: center; padding: 18px 21px; color: #273449; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { color: #273449; background: #f9fbfe; }
.task-row > span { min-width: 0; }
.task-row strong, .task-row small, .task-row em { display: block; }
.task-row small { margin-top: 4px; color: #7a899c; font-size: 12px; }
.task-row p { margin: 8px 0 0; color: #536379; font-size: 13px; }
.task-row em { margin-top: 5px; color: #2d69cd; font-size: 11px; font-style: normal; }
.task-check { display: grid; place-items: center; width: 34px; height: 34px; color: #2b67d0; background: #edf4ff; border-radius: 50%; font-weight: 800; }
.task-overdue { box-shadow: inset 3px 0 #d94841; }
.task-overdue em { color: #b7352f; }
@media (max-width: 900px) {
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-audit > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 620px) {
  .task-row { grid-template-columns: 34px minmax(0,1fr); }
  .task-row > span:last-child { grid-column: 2; }
}

/* Staff account administration */
.staff-settings-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr); gap: 20px; align-items: start; }
.staff-profile-card { max-width: none; }
.staff-security-column { min-width: 0; }
.reset-card form { margin-top: 20px; }
.password-warning { margin: 16px 0; padding: 12px 14px; color: #80561c; background: #fff7df; border-radius: 9px; font-size: 13px; }
.password-flag { display: block; margin-top: 5px; color: #8a641e; }
.status-blocked { color: #a72f29; background: #fff0ef; }
.setting-block + .setting-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.checkbox-row { display: flex; align-items: center; gap: 10px; }
.checkbox-row input { width: 20px; min-height: 20px; }
.checkbox-row label { margin: 0; }
.number-preview { margin: 18px 0; padding: 16px; background: #edf4ff; border-radius: 11px; }
.number-preview small, .number-preview strong { display: block; }
.number-preview small { color: #63748a; }
.number-preview strong { margin-top: 6px; color: #174da6; font-size: 21px; }
.numbering-warning { color: #80561c; font-size: 13px; line-height: 1.55; }
.annulled-banner { margin-bottom: 22px; padding: 18px 20px; color: #8f2925; background: #fff1f0; border: 1px solid #f2c4c1; border-radius: 12px; }
.annulled-banner p { margin: 8px 0; }
.annulled-banner small { color: #9f5a56; }
.workflow-status-annulled { color: #a72f29; background: #fff0ef; }
.rich-editor-shell { border: 1px solid #c9d6e8; border-radius: 14px; overflow: hidden; background: #fff; margin-bottom: 14px; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; background: #f5f8fc; border-bottom: 1px solid #dbe5f1; }
.rich-toolbar button, .rich-toolbar select { width: auto; min-height: 34px; padding: 6px 9px; border: 1px solid #c8d6e8; border-radius: 7px; background: #fff; color: #17345c; font-size: 13px; box-shadow: none; }
.rich-toolbar span { width: 1px; height: 24px; background: #d4dfec; }
.rich-editor { min-height: 400px; padding: 48px 68px; outline: none; color: #111827; font-family: Calibri, Arial, sans-serif; font-size: 11pt; line-height: 1.15; }
.rich-editor table, .rich-document table, .document-preview table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.rich-editor td, .rich-editor th, .rich-document td, .rich-document th, .document-preview td, .document-preview th { border: 1px solid #8290a2; padding: 7px; }
.rich-help { display:block; margin: -8px 0 8px; }
.document-preview { min-height: 250px; max-width: 794px; margin: 0 auto 22px; padding: 54px 68px; background: #fff; color: #111827; box-shadow: 0 1px 8px rgba(24,43,75,.12); font-family: Calibri, Arial, sans-serif; font-size: 11pt; line-height: 1.15; }
.rich-document { display:block; white-space: normal; }
@media (max-width: 700px) { .rich-editor { padding: 25px; min-height: 300px; } .document-preview { padding: 28px; } .rich-toolbar span { display:none; } }
.row-annulled td { color: #8b7a7a; background: #fffafa; }
.row-annulled a { color: #a64a45; text-decoration: line-through; }
.annul-card summary { color: #9b312c; font-weight: 700; cursor: pointer; }
.settings-muted { opacity: .55; }
.employee-overview { max-width: 980px; }
.upload-zone { margin: 4px 0 24px; padding: 18px; background: #f7f9fc; border: 1px dashed #b9c7da; border-radius: 12px; }
.upload-list { display: grid; gap: 7px; margin-top: 12px; }
.upload-list > div { padding: 8px 10px; color: #43556d; background: #fff; border-radius: 8px; font-size: 13px; }
.upload-progress { margin-top: 14px; padding: 11px 12px; background: #edf4ff; border-radius: 9px; }
.upload-progress-head { display: flex; justify-content: space-between; gap: 12px; color: #285aa9; font-size: 13px; }
.upload-progress-track { height: 8px; margin-top: 8px; overflow: hidden; background: #d7e3f5; border-radius: 99px; }
.upload-progress-track i { display: block; height: 100%; background: #2e73dc; border-radius: inherit; transition: width .15s ease; }
.incoming-attachments { display: grid; }
.incoming-attachments > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); }
.incoming-attachments strong, .incoming-attachments small { display: block; overflow-wrap: anywhere; }
.incoming-attachments small { margin-top: 4px; color: var(--muted); }
@media (max-width: 760px) { .incoming-attachments > div { align-items: stretch; flex-direction: column; } .attachment-actions { display: grid; grid-template-columns: 1fr 1fr; } }
.staff-audit { display: grid; margin-top: 18px; }
.staff-audit > div { display: grid; grid-template-columns: 125px 210px 180px minmax(0,1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; }
.staff-audit time, .staff-audit span { color: #738298; }
.staff-audit p { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .staff-settings-grid { grid-template-columns: 1fr; }
  .staff-audit > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Secretary workspace */
.secretary-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.secretary-actions { display: flex; gap: 9px; }
.secretary-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.secretary-kpi { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 13px; align-items: center; min-height: 126px; padding: 19px; color: #25364b; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.025); }
.secretary-kpi:hover { color: #25364b; box-shadow: 0 8px 22px rgba(32,65,105,.07); transform: translateY(-1px); }
.secretary-kpi small, .secretary-kpi strong, .secretary-kpi em { display: block; }
.secretary-kpi small { color: #627288; font-size: 12px; font-weight: 680; }
.secretary-kpi strong { margin: 5px 0; color: #122137; font-size: 31px; line-height: 1; }
.secretary-kpi em { color: #8794a5; font-size: 11px; font-style: normal; }
.secretary-kpi-icon { display: grid; place-items: center; width: 48px; height: 48px; color: #2464d8; background: #eaf2ff; border-radius: 14px; font-size: 20px; font-weight: 750; }
.secretary-kpi-today .secretary-kpi-icon { color: #168158; background: #e9f8f1; }
.secretary-kpi-total .secretary-kpi-icon { color: #7055c7; background: #f0ecff; }
.secretary-kpi-tasks .secretary-kpi-icon { color: #b56a14; background: #fff2df; }
.secretary-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.55fr); gap: 18px; align-items: start; }
.secretary-panel { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.025); }
.secretary-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 21px 15px; border-bottom: 1px solid #edf0f4; }
.secretary-panel-head h2 { margin: 3px 0 0; font-size: 19px; }
.secretary-panel-head > a { font-size: 12px; font-weight: 680; white-space: nowrap; }
.secretary-mail-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 15px; padding: 14px 19px; border-bottom: 1px solid #edf0f4; }
.secretary-mail-row:last-child { border-bottom: 0; }
.secretary-mail-row > a:first-child { min-width: 0; color: #26364b; }
.secretary-mail-row strong, .secretary-mail-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secretary-mail-row strong { font-size: 13px; }
.secretary-mail-row small { margin-top: 5px; color: #8190a3; font-size: 11px; }
.secretary-task-list a { display: block; padding: 15px 19px; color: #26364b; border-bottom: 1px solid #edf0f4; }
.secretary-task-list a:last-child { border-bottom: 0; }
.secretary-task-list strong, .secretary-task-list small { display: block; }
.secretary-task-list small { margin-top: 5px; color: #7b899b; font-size: 11px; }
.secretary-task-list p { margin: 8px 0 0; color: #5c6c80; font-size: 12px; }
.secretary-empty { display: grid; justify-items: center; gap: 5px; padding: 40px 22px; text-align: center; }
.secretary-empty > span { display: grid; place-items: center; width: 38px; height: 38px; color: #168158; background: #e9f8f1; border-radius: 50%; }
.secretary-empty p { margin: 3px 0 0; color: #8190a3; font-size: 12px; }
.secretary-recent { margin-top: 18px; }
.notification-panel { margin-bottom: 18px; border-color: #f0c46b; }
.notification-count { display: inline-grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; color: #fff; background: #d97706; border-radius: 99px; font-size: 13px; }
.notification-list a { display: block; padding: 13px 20px; color: #26364b; border-top: 1px solid #f2e4c8; }
.notification-list strong, .notification-list small { display: block; }
.notification-list small { margin-top: 4px; color: #7b899b; }
.notification-list p { margin: 6px 0 0; color: #5c6c80; font-size: 13px; }
@media (max-width: 1200px) {
  .secretary-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .secretary-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .secretary-head { align-items: flex-start; flex-direction: column; }
  .secretary-actions { width: 100%; }
  .secretary-actions a { flex: 1; }
  .secretary-kpis { grid-template-columns: 1fr; gap: 10px; }
  .secretary-kpi { min-height: 104px; }
  .secretary-mail-row { grid-template-columns: 1fr; }
  .secretary-mail-row .secondary-button { width: 100%; }
}

/* Director dashboard */
.director-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.director-head-actions { display: flex; align-items: center; gap: 9px; }
.director-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.director-kpi { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 132px; padding: 19px; color: #25364b; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.025); transition: transform .15s ease, box-shadow .15s ease; }
a.director-kpi:hover { color: #25364b; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(32,65,105,.07); }
.director-kpi > span:last-child { min-width: 0; }
.director-kpi small, .director-kpi em { display: block; }
.director-kpi small { color: #627288; font-size: 12px; font-weight: 680; }
.director-kpi strong { display: block; margin: 4px 0; color: #122137; font-size: 31px; line-height: 1; }
.director-kpi em { overflow: hidden; color: #8794a5; font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.kpi-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 20px; font-weight: 760; }
.kpi-blue .kpi-icon { color: #2464d8; background: #eaf2ff; }
.kpi-green .kpi-icon { color: #168158; background: #e9f8f1; }
.kpi-violet .kpi-icon { color: #7055c7; background: #f0ecff; }
.kpi-amber .kpi-icon { color: #b56a14; background: #fff2df; }
.director-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(310px, .75fr); gap: 18px; align-items: start; }
.director-main, .director-side { display: grid; gap: 18px; }
.director-panel { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.025); }
.director-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 21px 15px; border-bottom: 1px solid #edf0f4; }
.director-panel-head h2 { margin: 3px 0 0; font-size: 19px; }
.director-panel-head > a, .director-panel-head > span { flex: 0 0 auto; font-size: 12px; font-weight: 680; }
.director-document-row { display: grid; grid-template-columns: 35px minmax(220px, 1.25fr) minmax(145px, .75fr) 76px auto 12px; gap: 12px; align-items: center; min-height: 69px; padding: 10px 20px; color: #26364b; border-bottom: 1px solid #edf0f4; }
.director-document-row:last-child { border-bottom: 0; }
.director-document-row:hover { color: #26364b; background: #f9fbfe; }
.director-doc-icon { display: grid; place-items: center; width: 34px; height: 38px; color: #2b68d1; background: #edf4ff; border-radius: 8px; }
.director-doc-copy, .director-doc-recipient { min-width: 0; }
.director-doc-copy strong, .director-doc-copy small, .director-doc-recipient strong, .director-doc-recipient small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.director-doc-copy strong { color: #25364b; font-size: 13px; }
.director-doc-copy small, .director-doc-recipient small { margin-top: 4px; color: #8290a2; font-size: 11px; }
.director-doc-recipient strong { margin-top: 3px; color: #52647a; font-size: 12px; font-weight: 650; }
.director-document-row time { color: #66778b; font-size: 12px; }
.director-document-row > b { color: #9aa6b5; font-size: 18px; }
.director-empty { padding: 52px 24px; text-align: center; }
.director-empty p { margin: 7px 0 0; color: #7c8a9c; font-size: 13px; }
.director-mail-list a { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 19px; color: #26364b; border-bottom: 1px solid #edf0f4; }
.director-mail-list a:last-child { border-bottom: 0; }
.director-mail-list a:hover { color: #26364b; background: #f9fbfe; }
.mail-dot { width: 7px; height: 7px; background: #2f6de1; border-radius: 50%; }
.director-mail-list strong, .director-mail-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.director-mail-list strong { font-size: 12px; }
.director-mail-list small { margin-top: 4px; color: #8491a2; font-size: 10px; }
.director-mail-list em { color: #8190a3; font-size: 10px; font-style: normal; white-space: nowrap; }
.side-success { display: grid; justify-items: center; gap: 5px; padding: 35px 20px; text-align: center; }
.side-success > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 5px; color: #168158; background: #e9f8f1; border-radius: 50%; font-weight: 800; }
.side-success small { color: #8190a3; }
.director-integrations > div { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 19px; border-bottom: 1px solid #edf0f4; }
.director-integrations > div:last-child { border-bottom: 0; }
.director-integrations strong, .director-integrations small { display: block; }
.director-integrations strong { font-size: 12px; }
.director-integrations small { margin-top: 3px; color: #8190a3; font-size: 10px; }
.director-integrations em { color: #627288; font-size: 10px; font-style: normal; }
.integration-health { width: 8px; height: 8px; background: #aab4c2; border-radius: 50%; }
.health-ok { background: #18a56e; box-shadow: 0 0 0 4px #e7f8f0; }
.health-error { background: #dc4b4b; box-shadow: 0 0 0 4px #fff0f0; }
.director-chart-panel { min-height: 250px; }
.chart-legend { color: #6e7e92; }
.chart-legend::before { content: ''; display: inline-block; width: 14px; height: 3px; margin-right: 6px; background: #3677e6; border-radius: 2px; vertical-align: middle; }
.director-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; height: 190px; padding: 19px 24px 21px; }
.chart-column { display: grid; grid-template-rows: 18px 1fr 18px; justify-items: center; gap: 5px; min-width: 0; }
.chart-column strong { color: #53667e; font-size: 10px; }
.chart-column small { color: #8996a7; font-size: 10px; }
.chart-track { position: relative; display: block; width: min(26px, 60%); height: 100%; background: #f0f4f9; border-radius: 7px 7px 3px 3px; }
.chart-track i { position: absolute; inset: auto 0 0; min-height: 3px; background: #3677e6; border-radius: 7px 7px 3px 3px; }

@media (max-width: 1250px) {
  .director-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .director-layout { grid-template-columns: 1fr; }
  .director-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .director-head { align-items: flex-start; flex-direction: column; }
  .director-head-actions { width: 100%; }
  .director-head-actions a { flex: 1; }
  .director-kpis { grid-template-columns: 1fr; gap: 10px; }
  .director-kpi { min-height: 105px; }
  .director-side { grid-template-columns: 1fr; }
  .director-document-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 11px 15px; }
  .director-doc-recipient, .director-document-row time, .director-document-row .status { display: none; }
  .director-chart { gap: 7px; padding-inline: 12px; }
}

/* HatDocs 0.23 — рабочая лента */
.feed-grid{display:grid;grid-template-columns:minmax(0,850px);gap:20px}.feed-stream{display:grid;gap:16px}.feed-card{background:#fff;border:1px solid #e7ebf0;border-radius:18px;padding:22px;box-shadow:0 8px 24px rgba(15,23,42,.04);border-left:4px solid #d8dee8}.feed-card.feed-important{border-left-width:5px}.feed-card.feed-critical{border-left-width:6px}.feed-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:#667085}.feed-badge{background:#f1f4f8;border-radius:999px;padding:5px 9px;font-weight:700}.feed-card h2{margin:12px 0 8px;font-size:20px}.feed-body{line-height:1.65;color:#344054}.feed-action{border-top:1px solid #eef1f5;margin-top:18px;padding-top:16px}.ack-done{font-weight:700}.form-card{max-width:850px;padding:24px}.form-card label{display:grid;gap:7px;margin-bottom:18px;font-weight:600}.form-card input,.form-card textarea,.form-card select{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;font:inherit}.form-card select[multiple]{min-height:180px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-card .check-row{display:flex;grid-template-columns:none;align-items:center;gap:9px}.form-card .check-row input{width:auto}.form-actions{margin-top:8px}@media(max-width:760px){.form-row{grid-template-columns:1fr}.feed-card{padding:17px}}

/* HatDocs 0.24 — unified workspace and document composer */
:root{--sidebar-width:236px;--topbar-height:64px;--blue:#1769e8;--canvas:#f4f7fb;--line:#e3eaf3}
.sidebar{width:var(--sidebar-width);padding:18px 14px 16px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}
.sidebar-head{padding:0 7px}.sidebar .brand-mark{width:36px;height:36px;flex-basis:36px}.sidebar .brand-name{font-size:25px}.aside-caption{margin:8px 0 18px 2px;font-size:11px}.sidebar nav{margin-top:7px;gap:3px}.sidebar nav a{min-height:43px;padding:9px 11px;border-radius:9px;color:#334766}.sidebar nav a.active{color:#fff;background:linear-gradient(135deg,#397ff2,#1769e8);box-shadow:0 7px 18px rgba(23,105,232,.2)}.sidebar nav a.active::before{display:none}.sidebar nav a.active .nav-icon{color:#fff}.sidebar-footer{display:grid;gap:13px;margin-top:auto;padding:18px 5px 0;color:#8a98aa;font-size:10px}.support-card{display:flex;align-items:center;gap:10px;padding:11px;color:#2f4a6b;background:#fff;border:1px solid #e2eaf4;border-radius:10px}.support-card:hover{color:#1769e8}.support-icon{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px}.support-icon svg{width:23px;height:23px}.support-card strong,.support-card small{display:block}.support-card strong{font-size:11px}.support-card small{margin-top:3px;color:#1769e8;font-size:10px}
.workspace{max-width:none;min-height:100vh;margin-left:var(--sidebar-width);padding:0;background:var(--canvas)}.app-topbar{position:sticky;z-index:15;top:0;display:flex;align-items:center;gap:14px;height:var(--topbar-height);margin:0;padding:10px clamp(20px,2.7vw,42px);background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.top-search{position:relative;width:min(720px,65%);margin:0}.top-search>span{position:absolute;left:14px;top:50%;display:grid;place-items:center;width:20px;height:20px;color:#637891;transform:translateY(-50%)}.top-search>span svg{width:19px;height:19px}.top-search input{min-height:40px;padding:8px 70px 8px 43px;background:#f5f8fc;border-color:#dce6f2;border-radius:9px;font-size:13px}.top-search kbd{position:absolute;right:12px;top:50%;color:#8594a7;font:11px inherit;transform:translateY(-50%)}.top-notifications{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;margin-left:auto;color:#1769e8;background:#f2f7ff;border:1px solid #e2ecfb;border-radius:11px;transition:background .16s ease,color .16s ease}.top-notifications:hover{color:#fff;background:#1769e8}.top-notifications svg{width:21px;height:21px}.top-account{display:grid;grid-template-columns:38px minmax(158px,1fr) 34px;gap:10px;align-items:center;min-width:250px}.top-account .avatar{width:38px;height:38px;border-radius:50%;color:#fff;background:#1769e8}.top-account .account-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.15}.top-account .account-copy strong,.top-account .account-copy small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-account .account-copy strong{color:#0f1f39;font-size:12px;font-weight:750}.top-account .account-copy small{margin-top:4px;color:#718198;font-size:10px}.top-account form{margin:0}.top-logout{display:grid;place-items:center;width:34px;min-height:34px;padding:0;color:#62748b;background:#fff;border:1px solid #e2e8f0;box-shadow:none}.top-logout svg{width:18px;height:18px}.top-logout:hover{color:#174da6;background:#f3f7fd;box-shadow:none;transform:none}.workspace-content{padding:25px clamp(20px,2.7vw,42px) 46px}
.composer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:17px}.composer-head h1{margin:4px 0 4px}.composer-status{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.composer-status span{padding:8px 11px;color:#526781;background:#eaf0f8;border-radius:999px;font-size:11px;font-weight:700}.composer-status .status-warning{color:#b75b18;background:#fff0e4}.document-composer{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.85fr);gap:14px;align-items:start}.composer-main,.composer-side{display:grid;gap:13px}.composer-card{padding:18px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 5px 18px rgba(25,55,95,.035)}.composer-title{display:flex;align-items:center;gap:10px;margin-bottom:16px}.composer-title>span{display:grid;place-items:center;width:29px;height:29px;color:#1769e8;background:#e9f2ff;border-radius:50%;font-size:14px;font-weight:800}.composer-title h2{margin:0;font-size:16px}.composer-title small{margin-left:auto;color:#73869d;font-size:10px}.composer-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.composer-field-grid p{margin:0}.composer-field-grid label{font-size:12px}.composer-field-grid input{min-height:42px;font-size:13px}.document-hint{display:flex;align-items:center;gap:10px;margin-top:15px;padding:10px 12px;color:#34557a;background:#f5f9ff;border-radius:9px}.document-hint>span:first-child{display:grid;place-items:center;width:24px;height:24px;color:#168158;background:#e6f7ef;border-radius:50%}.document-hint strong,.document-hint small{display:block}.document-hint strong{font-size:11px}.document-hint small{margin-top:2px;color:#7d8da0;font-size:10px}.editor-card{padding-bottom:15px}.modern-editor{margin:0}.modern-editor .rich-toolbar{padding:8px;background:#f8faff}.modern-editor .rich-toolbar button,.modern-editor .rich-toolbar select{min-height:31px;padding:5px 8px;font-size:11px}.modern-editor .rich-editor{min-height:330px;padding:25px 28px;font-size:14px;line-height:1.65}.rich-editor:empty::before{content:attr(data-placeholder);color:#9aa8b9}.editor-counter{display:flex;justify-content:flex-end;gap:13px;padding:7px 12px;color:#8a98a9;border-top:1px solid #edf1f6;font-size:10px}.ai-helper{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:12px;padding:12px;color:#4c45c3;background:linear-gradient(135deg,#f5f2ff,#eef4ff);border-radius:10px}.ai-helper>span:first-child{font-size:23px}.ai-helper strong,.ai-helper small{display:block}.ai-helper strong{font-size:12px}.ai-helper small{margin-top:3px;color:#66728c;font-size:10px}.ai-helper button{min-height:34px;padding:7px 11px;color:#736fc2;background:#fff;border:1px solid #dddafa;box-shadow:none;font-size:10px;opacity:.75}.composer-actions{display:flex;gap:9px;align-items:center;padding:4px 0}.composer-actions button,.composer-actions a{min-height:42px}.primary-action{flex:1}.quiet-button{display:inline-flex;align-items:center;padding:8px 14px;color:#63758a;font-size:12px;font-weight:700}.preview-card{padding:0;overflow:hidden}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid #edf1f6}.preview-head h2{margin:0;font-size:14px}.preview-head button{min-height:31px;padding:6px 9px;color:#1769e8;background:#f1f6ff;box-shadow:none;font-size:10px}.official-preview{min-height:570px;margin:14px;padding:27px 30px;color:#162033;background:#fff;border:1px solid #dce4ee;box-shadow:0 5px 18px rgba(21,45,78,.07);font-family:"Times New Roman",serif;font-size:10px;line-height:1.5}.official-preview>header{display:grid;gap:3px;margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid #53647a;text-align:center}.official-preview>header strong{font-size:14px}.official-preview>header small{color:#607188}.preview-requisites{display:flex;justify-content:space-between;gap:12px;font-size:8px}.preview-recipient{width:45%;margin:18px 0 17px auto;font-weight:700}.official-preview h3{margin:0 0 16px;text-align:center;font-size:11px}.preview-body{min-height:290px;font-size:10px}.official-preview footer{display:flex;justify-content:space-between;gap:20px;margin:30px 0 0;font-size:9px}.preview-expanded{position:fixed;z-index:100;inset:20px;overflow:auto;background:#eef2f7}.preview-expanded .official-preview{width:794px;min-height:1123px;margin:25px auto;padding:70px 80px;font-size:14px}.preview-expanded .preview-body{min-height:630px;font-size:14px}.auto-card h2,.route-card h2{margin:0 0 12px;font-size:14px}.auto-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none;color:#546a83;font-size:11px}.auto-card li::before{content:'✓';margin-right:8px;color:#12a675;font-weight:800}.route-card>div{display:flex;align-items:flex-start;justify-content:space-between}.route-card span{display:grid;justify-items:center;gap:5px}.route-card b{display:grid;place-items:center;width:30px;height:30px;color:#174da6;background:#eaf2ff;border-radius:50%}.route-card small{font-size:9px}.route-card i{padding-top:8px;color:#8da0b7;font-style:normal}
@media(max-width:1180px){.document-composer{grid-template-columns:1fr}.composer-side{grid-template-columns:1.1fr .9fr}.preview-card{grid-row:span 2}.route-card{grid-column:2}.official-preview{min-height:520px}}
@media(max-width:760px){.sidebar{position:static;width:auto}.sidebar-footer{display:none}.workspace{margin-left:0;padding:0}.app-topbar{height:auto;padding:9px 14px}.top-search{width:auto;flex:1}.top-search kbd,.top-account .account-copy{display:none}.top-account{grid-template-columns:34px 30px;gap:7px;min-width:0}.top-account .avatar{width:34px;height:34px}.workspace-content{padding:20px 14px 35px}.composer-head{flex-direction:column}.composer-status{justify-content:flex-start}.composer-field-grid,.composer-side{grid-template-columns:1fr}.preview-card,.route-card{grid-column:auto;grid-row:auto}.composer-actions{align-items:stretch;flex-direction:column}.composer-actions>*{width:100%;justify-content:center}.official-preview{min-height:500px;margin:9px;padding:23px 18px}.ai-helper{grid-template-columns:28px 1fr}.ai-helper button{grid-column:1/-1}.preview-expanded{inset:5px}.preview-expanded .official-preview{width:auto;margin:10px;padding:35px 24px}}

/* HatDocs 0.28 — director workspace and collapsible navigation */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.document-journal .clickable-row{cursor:pointer;outline:none}.document-journal .clickable-row:hover td{background:#f4f8ff}.document-journal .clickable-row:focus-visible td{background:#edf5ff}.journal-action-heading,.journal-action{width:108px;text-align:right}.journal-open{display:inline-flex;align-items:center;gap:4px;padding:7px 10px;color:#1769e8;background:#edf4ff;border-radius:8px;font-size:12px;font-weight:720;white-space:nowrap}.journal-open:hover{color:#fff;background:#1769e8}@media(max-width:760px){.journal-action-heading,.journal-action{display:none}}
.sidebar-toggle{display:grid;place-items:center;width:40px;min-height:40px;padding:0;color:#48637f;background:#f5f8fc;border:1px solid #dce6f2;border-radius:9px;box-shadow:none}.sidebar-toggle svg{width:20px;height:20px}.sidebar-toggle:hover{color:#fff;background:#1769e8;box-shadow:none;transform:none}.sidebar,.workspace{transition:transform .2s ease,margin-left .2s ease}.sidebar-collapsed .sidebar{transform:translateX(calc(-1 * var(--sidebar-width)))}.sidebar-collapsed .workspace{margin-left:0}.director-decision-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.kpi-sky .kpi-icon{color:#19759d;background:#e8f7fc}.director-documents-compact .director-document-row{grid-template-columns:35px minmax(0,1fr) auto 12px;min-height:62px}.director-documents-compact .director-doc-copy strong{max-width:100%}.director-work-layout{grid-template-columns:minmax(0,1.55fr) minmax(360px,.9fr)}.director-control-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#edf1f6}.director-control-metrics a{display:grid;gap:5px;padding:17px 13px;color:#53677f;background:#fff}.director-control-metrics a:hover{color:#1769e8;background:#f9fbff}.director-control-metrics span{font-size:11px}.director-control-metrics strong{font-size:24px;line-height:1}.director-control-metrics .control-overdue strong{color:#c66b14}.director-category-section{margin-top:20px}.director-category-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 13px}.director-category-head h2{margin:4px 0 0;font-size:21px}.director-category-head>span{color:#78899c;font-size:12px}.director-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.director-category-grid .director-panel-head{min-height:83px}.director-category-grid .director-empty{min-height:106px;padding:34px 18px;font-size:12px}.director-category-grid .director-document-row{padding:10px 15px}.director-category-grid .director-doc-icon{width:32px;height:34px}.director-category-grid .status{padding:4px 7px;font-size:10px}@media(max-width:1350px){.director-decision-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.director-category-grid{grid-template-columns:1fr}.director-category-grid .director-panel-head{min-height:auto}}@media(max-width:1000px){.director-decision-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.director-work-layout{grid-template-columns:1fr}.director-side{grid-template-columns:1fr 1fr}}@media(max-width:760px){.sidebar-toggle{display:none}.director-decision-kpis{grid-template-columns:1fr}.director-side{grid-template-columns:1fr}.director-category-head{align-items:flex-start;flex-direction:column;gap:5px}.director-documents-compact .director-document-row{grid-template-columns:34px minmax(0,1fr) auto}.director-documents-compact .director-document-row .status{display:inline-flex}.director-category-grid .director-document-row .status{display:none}}

/* HatDocs 0.29 — конструктор маршрутов */
.workflow-guidance{display:flex;gap:12px;align-items:flex-start;color:#48607f;border-color:#dce8ff;background:#f7faff}.workflow-guidance strong{color:#1558cc;white-space:nowrap}.workflow-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}.route-kind-card{padding:0;overflow:hidden}.route-kind-head{display:flex;justify-content:space-between;align-items:center;padding:24px 26px 18px;border-bottom:1px solid #e8eef7}.route-kind-head h2{margin:2px 0 0;font-size:22px}.route-kind-count{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e9f1ff;color:#1660d9;font-weight:800}.route-summary{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px 26px;border-bottom:1px solid #edf1f7}.route-summary:last-child{border-bottom:0}.route-summary-title{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.route-summary p{margin:6px 0;color:#697f9f;font-size:14px}.route-summary small{color:#7f91aa}.route-disabled{opacity:.62}.route-empty{padding:28px 26px;color:#627794}.route-empty strong{display:block;color:#132d52;margin-bottom:5px}.route-empty p{margin:0}.workflow-builder{display:grid;gap:20px}.route-steps-card{padding:24px}.route-steps-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.route-steps-head h2{margin:3px 0 6px}.route-steps-head p{margin:0;color:#6b7f9d}.route-steps{display:grid;gap:12px}.route-step{display:grid;grid-template-columns:48px minmax(0,1fr) 90px;gap:14px;align-items:start;padding:16px;background:#f9fbfe;border:1px solid #e2eaf6;border-radius:14px}.route-step-number{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e5efff;color:#1460df;font-weight:800}.route-step-fields{display:grid;grid-template-columns:90px minmax(190px,1.2fr) minmax(180px,1fr) minmax(150px,1fr) 100px 110px;gap:10px}.route-field{margin:0;min-width:0}.route-field label{display:block;font-size:12px;margin:0 0 5px;color:#5c708d;font-weight:700}.route-field input,.route-field select{width:100%;box-sizing:border-box;min-height:38px}.route-field-requires_signature{display:flex;flex-direction:column;justify-content:flex-end}.route-field-requires_signature label{padding:11px 0;white-space:nowrap}.route-field-requires_signature input{width:auto;min-height:0;margin-right:6px}.route-remove{padding-top:29px;color:#a64542;font-size:13px;white-space:nowrap}.route-audit{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:20px}.route-audit h2{margin:4px 0}.route-audit p{margin:0;color:#667d9c}@media(max-width:1100px){.workflow-route-grid{grid-template-columns:1fr}.route-step-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:720px){.workflow-guidance,.route-steps-head,.route-audit{flex-direction:column}.route-step{grid-template-columns:38px 1fr}.route-remove{grid-column:2;padding-top:0}.route-step-fields{grid-template-columns:1fr}}

/* HatDocs 0.25 — informative organization feed */
.feed-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:17px}.feed-page-head h1{margin:3px 0 4px;font-size:34px;line-height:1}.feed-page-head .muted{margin:0}.feed-create-button{min-height:42px;padding:10px 18px;white-space:nowrap}.feed-tabs{display:flex;gap:25px;overflow-x:auto;margin-bottom:13px;border-bottom:1px solid #dfe7f1}.feed-tabs a{position:relative;display:flex;align-items:center;gap:7px;padding:10px 2px 13px;color:#49617f;font-size:13px;font-weight:650;white-space:nowrap}.feed-tabs a:hover,.feed-tabs a.active{color:#1769e8}.feed-tabs a.active::after{position:absolute;right:0;bottom:-1px;left:0;height:2px;background:#1769e8;border-radius:2px;content:""}.feed-tabs b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;color:#fff;background:#ef4444;border-radius:999px;font-size:10px}.feed-layout{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:18px;align-items:start}.feed-stream{display:grid;gap:11px}.feed-entry{display:grid;grid-template-columns:48px minmax(0,1fr) 205px;gap:14px;padding:16px;background:#fff;border:1px solid #dfe7f1;border-radius:13px;box-shadow:0 3px 12px rgba(22,49,82,.035)}.feed-entry-icon{display:grid;place-items:center;width:44px;height:44px;color:#1769e8;background:#eaf3ff;border-radius:12px}.feed-entry-icon svg{width:23px;height:23px}.feed-entry.feed-important .feed-entry-icon{color:#e77916;background:#fff3df}.feed-entry.feed-critical .feed-entry-icon{color:#fff;background:linear-gradient(145deg,#ff5b63,#ee3848)}.feed-entry-kicker{display:flex;align-items:center;gap:7px;min-height:22px;flex-wrap:wrap}.feed-type,.feed-priority,.feed-needs-action,.feed-status{display:inline-flex;align-items:center;min-height:21px;padding:3px 8px;border-radius:7px;font-size:10px;font-weight:750}.feed-type{color:#155dbf;background:#e8f2ff}.feed-priority.important{color:#a55200;background:#fff1d5}.feed-priority.critical{color:#c62532;background:#ffe4e6}.feed-needs-action{color:#b42318;background:#fee4e2}.feed-entry h2{margin:5px 0 4px;color:#10203b;font-size:16px;line-height:1.3}.feed-entry-body{display:-webkit-box;overflow:hidden;color:#314763;font-size:12px;line-height:1.48;-webkit-line-clamp:3;-webkit-box-orient:vertical}.feed-entry-footer{display:flex;gap:13px;margin-top:9px;color:#718198;font-size:10px}.feed-audience::before{margin-right:5px;content:"◦"}.feed-entry-side{display:flex;align-items:flex-end;flex-direction:column;gap:9px}.feed-entry-side time{color:#718198;font-size:10px}.feed-author{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;width:100%}.feed-author-avatar{display:grid;place-items:center;width:34px;height:34px;color:#174fa7;background:#e7f0ff;border-radius:50%;font-size:12px;font-weight:800}.feed-author strong,.feed-author small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feed-author strong{color:#14233d;font-size:11px}.feed-author small{margin-top:2px;color:#6f8199;font-size:9px}.feed-entry-side form{width:100%;margin:0}.feed-ack-button{width:100%;min-height:34px;padding:7px 10px;font-size:11px}.feed-status.done{margin-top:auto;color:#08764e;background:#dcf7ea}.feed-empty{display:grid;place-items:center;min-height:270px;padding:35px;text-align:center;background:#fff;border:1px dashed #cbd8e8;border-radius:14px}.feed-empty>span{display:grid;place-items:center;width:54px;height:54px;color:#1769e8;background:#edf5ff;border-radius:16px}.feed-empty svg{width:28px;height:28px}.feed-empty h2{margin:13px 0 2px}.feed-rail{display:grid;gap:13px}.feed-widget{padding:15px;background:#fff;border:1px solid #dfe7f1;border-radius:13px;box-shadow:0 3px 12px rgba(22,49,82,.035)}.feed-widget-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.feed-widget-head h2{margin:0;color:#12223b;font-size:14px}.feed-widget-head a{font-size:10px}.feed-task-row{display:grid;grid-template-columns:27px 1fr 24px;gap:8px;align-items:center;padding:7px 0;color:#263c5a;font-size:11px}.feed-task-row b{display:grid;place-items:center;min-width:22px;height:22px;color:#fff;background:#a8b7ca;border-radius:999px;font-size:10px}.task-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;font-weight:800}.task-icon.amber{color:#db7800;background:#fff0d8}.task-icon.blue{color:#1769e8;background:#e9f2ff}.task-icon.violet{color:#7c3aed;background:#f0eaff}.task-icon.red{color:#e13745;background:#ffe8ea}.feed-filter{display:grid;gap:10px}.feed-filter label{display:grid;gap:5px;color:#425875;font-size:10px;font-weight:700}.feed-filter input,.feed-filter select{min-height:36px;padding:7px 9px;border:1px solid #d7e1ed;border-radius:8px;background:#fff;font-size:11px}.feed-filter .button{min-height:36px;padding:7px;font-size:11px}.feed-filter>a{text-align:center;font-size:10px}.feed-summary div{display:flex;align-items:center;justify-content:space-between;color:#526985;font-size:11px}.feed-summary strong{color:#1769e8;font-size:22px}.feed-summary p{margin:8px 0 0;color:#7a899d;font-size:10px;line-height:1.5}
@media(max-width:1100px){.feed-layout{grid-template-columns:1fr}.feed-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.feed-summary{display:none}.feed-entry{grid-template-columns:44px minmax(0,1fr) 185px}}
@media(max-width:760px){.feed-page-head{align-items:stretch;flex-direction:column}.feed-create-button{justify-content:center}.feed-tabs{gap:18px}.feed-entry{grid-template-columns:40px minmax(0,1fr);padding:14px}.feed-entry-icon{width:38px;height:38px}.feed-entry-side{grid-column:2;align-items:flex-start}.feed-author{width:auto}.feed-entry-side form{width:auto}.feed-ack-button{width:auto}.feed-rail{grid-template-columns:1fr}}

/* HatDocs 0.26 — electronic signature */
.eds-sign-card,.eds-proof-card{margin-top:20px;padding:25px}.eds-sign-head{display:flex;gap:15px;align-items:flex-start}.eds-sign-head h2,.eds-proof-card h2{margin:3px 0 7px}.eds-sign-head p{margin:0}.eds-shield{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;color:#08764e;background:#e5f8ef;border-radius:15px}.eds-shield svg{width:27px;height:27px}.eds-checklist{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin:20px 0;padding:0;list-style:none}.eds-checklist li{position:relative;padding-left:23px;color:#435873;font-size:13px}.eds-checklist li::before{position:absolute;left:0;display:grid;place-items:center;width:16px;height:16px;color:#08764e;background:#def7eb;border-radius:50%;font-size:10px;content:"✓"}.eds-status{margin:14px 0;padding:12px 14px;color:#49617f;background:#f4f7fb;border:1px solid #e1e8f1;border-radius:10px}.eds-status.working{color:#155dbf;background:#eaf3ff;border-color:#cfe2fb}.eds-status.success{color:#08764e;background:#e5f8ef;border-color:#bfead7}.eds-status.error{color:#b42318;background:#fff0f0;border-color:#f6cece}.eds-sign-button{min-width:240px}.eds-proof-card{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:22px;align-items:center}.eds-proof-card code,.verify-card code{overflow-wrap:anywhere;color:#334766;font-size:11px}.eds-qr{display:grid;place-items:center;gap:10px}.eds-qr img{width:150px;height:150px;padding:7px;background:#fff;border:1px solid #dce5ef;border-radius:10px}.verify-body{min-height:100vh;margin:0;padding:30px;background:#f4f7fb}.verify-shell{width:min(960px,100%);margin:0 auto}.verify-shell>.brand{display:inline-flex;margin-bottom:24px}.verify-card{padding:30px;background:#fff;border:1px solid #dfe7f1;border-radius:18px;box-shadow:0 12px 35px rgba(18,48,84,.08)}.verify-result{display:flex;gap:15px;align-items:center;margin-bottom:24px;padding:18px;border-radius:14px}.verify-result>span{display:grid;place-items:center;width:45px;height:45px;flex:0 0 45px;color:#fff;border-radius:50%;font-size:24px;font-weight:800}.verify-result.ok{background:#e9f8f1}.verify-result.ok>span{background:#16a36f}.verify-result.bad{background:#fff0f0}.verify-result.bad>span{background:#dc3545}.verify-result h1{margin:3px 0 0;font-size:24px}.verify-card dl{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:#e4eaf1;border:1px solid #e4eaf1;border-radius:12px;overflow:hidden}.verify-card dl>div{padding:13px;background:#fff}.verify-card dl .wide{grid-column:1/-1}.verify-card dt{color:#77879b;font-size:10px}.verify-card dd{margin:4px 0 0;color:#172841;font-weight:650}.verify-document{margin-top:22px;padding:20px;background:#fafbfd;border:1px solid #e5ebf2;border-radius:12px}.verify-document h2{margin-top:0}.verify-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.verify-legal-note{margin:20px 0 0;padding-top:17px;color:#6e8096;border-top:1px solid #e5ebf2;font-size:11px;line-height:1.6}
@media(max-width:760px){.eds-checklist{grid-template-columns:1fr}.eds-proof-card{grid-template-columns:1fr}.verify-body{padding:15px}.verify-card{padding:18px}.verify-card dl{grid-template-columns:1fr}.verify-card dl .wide{grid-column:auto}.verify-actions>*{width:100%;justify-content:center}}

/* HatDocs 0.46 — account recovery by SMS. */
.password-reset-card{max-width:580px}.password-reset-card form{display:grid;gap:16px}.password-reset-card form p{display:grid;gap:7px;margin:0}.password-reset-card form label{color:#344966;font-size:13px;font-weight:650}.password-reset-card form input{width:100%;min-height:44px;box-sizing:border-box;padding:10px 12px;border:1px solid #cbd7e5;border-radius:9px;font:inherit}.password-reset-card form input:focus{outline:0;border-color:#2878ec;box-shadow:0 0 0 3px rgba(40,120,236,.13)}.password-reset-card .errorlist{margin:0;padding-left:18px;color:#b42318;font-size:12px}.password-reset-note{color:#687b93;font-size:12px}

/* Защита рабочего поля от вставленного из Word форматирования. */
.document-composer,.composer-main,.composer-side,.editor-card,.rich-editor-shell{min-width:0}
.rich-editor,.rich-editor *{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.rich-editor img{height:auto}
.rich-editor table{table-layout:fixed}
.rich-editor p{min-width:0}

/* HatDocs 0.32 — bilingual outgoing documents. */
.composer-field-single{display:grid;gap:7px;margin:14px 0 0;font-size:12px;font-weight:600}.composer-field-single input,.composer-field-single textarea{width:100%;box-sizing:border-box;border:1px solid #d5dfec;border-radius:9px;background:#fff;font:inherit}.composer-field-single input{min-height:42px;padding:9px 11px}.composer-field-single textarea{min-height:220px;padding:14px;line-height:1.6;resize:vertical}.document-language-hint{margin:10px 0 0;color:#607893;font-size:11px}.kz-version-card[hidden]{display:none}
.staff-header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.staff-create-panel{margin-top:18px}.staff-create-panel summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;padding:2px}.staff-create-panel summary::-webkit-details-marker{display:none}.staff-create-panel summary span{display:flex;flex-direction:column;gap:4px}.staff-create-panel summary strong{font-size:1.1rem}.staff-create-panel summary small{color:var(--muted,#64748b);font-weight:400}.staff-create-panel summary b{color:#1769e0;font-size:.9rem}.staff-create-panel[open] summary b{font-size:0}.staff-create-panel[open] summary b:after{content:'Скрыть форму';font-size:.9rem}.details-content{margin-top:18px;padding-top:18px;border-top:1px solid #e2e8f0}

/* HatDocs 0.43 — staff form stays readable before the employee list. */
.staff-create-panel summary{display:flex;align-items:center;justify-content:space-between;gap:24px}
.staff-create-panel summary .staff-create-title{display:flex;flex-direction:column;gap:6px;min-width:0}
.staff-create-panel summary .staff-create-action{display:inline-block;flex:none;color:#1769e0;font-size:.9rem;font-weight:700}
.staff-create-panel[open] summary .staff-create-action{font-size:0}
.staff-create-panel[open] summary .staff-create-action::after{content:'Скрыть форму';font-size:.9rem}
.staff-create-panel .details-content{margin-top:18px;padding-top:18px;border-top:1px solid #e2e8f0}

/* HatDocs 0.44 — personnel card and account actions. */
.staff-actions{flex-wrap:wrap;white-space:normal;min-width:210px;gap:8px 12px}
.staff-create-panel input[type=file]{display:block;max-width:100%;margin-top:8px}
.directory-list{columns:2;column-gap:32px;padding-left:20px}.directory-list li{break-inside:avoid;margin:0 0 8px}@media(max-width:800px){.directory-list{columns:1}}

/* Route builder: contained fields and real delete controls, 0.51.23. */
.workflow-builder .route-step{display:block;min-width:0;padding:18px}
.workflow-builder .route-step-header{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:0;background:none}
.workflow-builder .route-step-number{flex:0 0 32px;width:32px;height:32px;font-size:13px}
.workflow-builder .route-step-header strong{font-size:14px;color:#344966;min-width:0}
.workflow-builder .route-delete-button,.workflow-builder .route-restore-button{margin-left:auto;flex:0 0 auto;min-height:34px;padding:7px 12px;box-shadow:none;font-size:12px;border:1px solid #e7c9c8;background:#fff;color:#a3312c;border-radius:8px;cursor:pointer}
.workflow-builder .route-restore-button{color:#175acc;border-color:#c9daf2}
.workflow-builder .route-delete-button:hover{background:#fff0ef;transform:none}
.workflow-builder .route-step-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;min-width:0}
.workflow-builder .route-field-instruction{grid-column:span 2}
.workflow-builder .route-field input,.workflow-builder .route-field select{max-width:100%;min-width:0}
.workflow-builder .route-field input[type=checkbox],.workflow-builder .route-setting input[type=checkbox],.workflow-builder .route-scope input[type=radio]{width:18px;height:18px;min-height:18px;min-width:18px;padding:0;margin:0;vertical-align:middle;appearance:auto;accent-color:#2563eb;flex:0 0 18px}
.workflow-builder .route-field-requires_signature{justify-content:flex-start;gap:8px}
.workflow-builder .route-field-requires_signature label{padding:0;white-space:normal}
.workflow-builder .route-scope{border:0;margin:0;padding:0;min-width:0}
.workflow-builder .route-scope legend{font-weight:700;margin-bottom:12px}
.workflow-builder .route-scope>div{display:flex;flex-wrap:wrap;gap:14px}
.workflow-builder .route-scope label{display:flex;align-items:center;gap:9px;min-height:40px;margin:0;padding:10px 14px;border:1px solid #dce5f3;border-radius:9px;cursor:pointer}
.workflow-builder .route-scope label:has(input:checked){color:#175acc;border-color:#80aaff;background:#eef4ff}
.workflow-builder .route-setting{min-width:0}
.workflow-builder .route-choice-search{margin-bottom:8px;min-height:38px;font-size:13px}
.workflow-builder [hidden]{display:none!important}
.workflow-builder .route-step-deleted{background:#fafafa;border-style:dashed}
.workflow-builder .route-step-deleted .route-step-header{margin-bottom:0}
.workflow-builder .route-field-inactive{opacity:.6}
@media(max-width:900px){.workflow-builder .route-step-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-builder .route-field-instruction{grid-column:1/-1}}
@media(max-width:600px){.workflow-builder .route-step-fields{grid-template-columns:minmax(0,1fr)}.workflow-builder .route-step-header{gap:8px;flex-wrap:wrap}.workflow-builder .route-step-header strong{flex:1}.workflow-builder .route-field-instruction{grid-column:auto}.workflow-builder .route-scope>div{flex-direction:column}.workflow-builder .route-delete-button,.workflow-builder .route-restore-button{white-space:normal}}
@media(max-width:600px){.workflow-builder .form-grid{grid-template-columns:minmax(0,1fr)}.workflow-builder .form-grid .full{grid-column:auto}}