/* Independent sidebar edition. The original frontend is intentionally untouched. */
:root {
  --accent:#f5c400; --accent-hover:#dfb200; --accent-soft:#fff7d5; --accent-ink:#725600;
  --bg:#f2f4f1; --line:#e3e7e1; --muted:#73786f; --sidebar:220px;
}
html { scrollbar-gutter:stable; }
body { padding-left:var(--sidebar); background:#eef1ed; font-size:13px; line-height:20px; }
body > .app-header { position:fixed; inset:0 auto 0 0; width:var(--sidebar); min-height:100dvh; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:24px 16px 16px; background:#171815; border:0; z-index:20; }
.brand { gap:10px; font-size:22px; line-height:30px; letter-spacing:-.8px; }
.brand svg { width:34px; height:34px; }
.workspace-label { margin:4px 0 24px 44px; font-size:10px; line-height:16px; text-align:left; color:#96988e; letter-spacing:1.5px; text-transform:uppercase; }
header .sub { order:2; margin-top:auto; overflow-wrap:anywhere; }
#hUser { order:3; margin-top:auto; padding:16px 0 0; border-top:1px solid #30312b; display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; font-size:12px; }
#hUser:empty { display:none; }
#hUser > span { max-width:100%; white-space:normal; overflow-wrap:anywhere; font-weight:700; }
header .hbtn { padding:4px 10px; border-color:#3d3f36; font-size:11px; }
.app-nav { position:fixed; left:0; top:126px; bottom:120px; width:var(--sidebar); display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:4px; padding:0 10px; background:none; border:0; z-index:21; overflow:auto; scrollbar-width:thin; }
.app-nav a { flex-shrink:0; min-height:40px; padding:10px 12px; gap:12px; border-radius:7px; color:#d7d8d1; font-size:12px; line-height:20px; white-space:normal; }
.app-nav a::after { display:none; }
.app-nav a:hover { background:#252620; color:#fff; }
.app-nav a[aria-current=page] { background:#30312a; color:#fff; }
.app-nav a[aria-current=page] .icon { color:var(--accent); }
.app-nav a:hover .icon { color:#fff; }
.app-nav .icon { width:18px; height:18px; }
main { max-width:none; margin:0; padding:12px; min-height:calc(100dvh - 44px); }
.workspace-starting main { visibility:hidden; }
.page-heading { min-height:64px; margin:-12px -12px 12px; padding:16px 24px; gap:16px; background:white; border-bottom:1px solid var(--line); }
.page-heading h1,.document-heading h1 { font-size:25px; line-height:32px; letter-spacing:-.8px; margin:0; }
.page-heading h1.sr-only { position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; white-space:normal; }
.page-heading p:not(.eyebrow) { font-size:11px; line-height:18px; }
.document-heading { margin:0 0 4px; }
section,.panel { border-radius:12px; padding:16px; margin-bottom:12px; border-color:#e0e5dc; box-shadow:0 3px 12px #26302104; }
h2,.section-details > summary { font-size:13px; line-height:20px; font-weight:700; }
h2 { margin-bottom:16px; }
.section-heading { margin-bottom:16px; }
.btn,main button,.bar button { font-size:12px; min-height:36px; line-height:18px; border-radius:7px; }
.btn.primary,main button.primary { border-radius:24px; }
input,select,textarea { font-size:13px; min-height:36px; border-radius:7px; }
th { background:#f2f2ed; color:#65665f; font-size:10px; letter-spacing:.6px; }
td { font-size:12px; }
th,td { padding:12px 10px; border-color:#eeeee9; }
tbody tr:hover { background:#fafaf6; }
.num { font-variant-numeric:tabular-nums; }
.badge { border-radius:20px; font-size:10px; padding:4px 8px; }
.b-draft { background:#fff2b7; color:#705300; }
.b-approved,.b-sent,.b-won { background:#e4efe6; color:#2d6547; }
.cards { gap:12px; margin-bottom:16px; padding:0; background:transparent; }
.cards .card { padding:20px 24px; border:1px solid #e0e5dc; border-radius:12px; background:#fff; box-shadow:0 3px 12px #26302104; }
.cards .card:first-child { background:#fff9e5; border-color:#eddfae; }
.cards .card:nth-child(2) { border:1px solid #e0e5dc; }
.cards .card:last-child { background:#fff; border:1px solid #e0e5dc; }
.cards .card span { color:#666e60; }
.cards .card b,.cards .card.attn b { font-size:32px; line-height:40px; color:#252d22; margin:8px 0; }
.cards .card:hover { transform:translateY(-2px); box-shadow:0 7px 20px #2630210a; }
.registry-panel { min-height:60vh; }
.tabs { gap:4px; padding:5px; background:#e9ede6; border:1px solid #dfe5da; border-radius:11px; width:fit-content; max-width:100%; margin:0 0 20px; flex-wrap:wrap; }
.tabs button { display:inline-flex; align-items:center; justify-content:center; flex:0 1 auto; min-height:36px; padding:8px 16px; margin:0; border:1px solid transparent; border-radius:7px; font-size:12px; line-height:20px; color:#646d5d; white-space:nowrap; }
.tabs button:hover { background:#ffffff9c; color:#252d22; }
.tabs button[aria-pressed=true],.tabs button[aria-selected=true] { background:#fff; color:#252d22; border:1px solid #dce2d6; box-shadow:0 2px 5px #2630210a; }
.tabs.rule-kinds { background:transparent; border:0; padding:0; gap:8px; }
.tabs.rule-kinds button { border:1px solid #e1e6dc; border-radius:8px; background:#f6f8f4; padding:8px 14px; }
.tabs.rule-kinds button[aria-pressed=true] { background:#fff4c9; border-color:#ead37c; color:#5f4b0e; box-shadow:none; }
.management-page .tabs button { min-height:36px; }
.rule-filters { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:20px; border:1px solid #e7ebe2; border-radius:10px; background:#f8faf6; }
.rule-filters .field { align-self:start; display:grid; align-content:start; gap:8px; }
.rule-filters .field:has(#filterClient) { grid-column:span 2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.rule-filters .field:has(#filterClient) > span { grid-column:1/-1; }
.rule-filters input,.rule-filters select { margin:0; width:100%; min-width:0; background:#fff; }
.filters { gap:8px; }
.filters input { border-radius:24px; background:#f5f5f0; }
.profile-page main { max-width:none; }
.profile-page #profileForm { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.profile-section { min-width:0; padding:24px; background:#f8faf6; border:1px solid #e5eade; border-radius:12px; }
.profile-section:first-child { grid-column:1/-1; }
.profile-section .subsection-title { margin-top:0; padding-top:0; border-top:0; }
.profile-section .form-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.profile-section .muted { font-size:12px; line-height:20px; }
.profile-actions { grid-column:1/-1; display:flex; justify-content:flex-end; padding-top:4px; }
.help-panel { margin:0 0 16px; border:1px solid #e3e7df; border-radius:8px; background:#f8faf6; color:#64705b; font-size:12px; line-height:20px; }
.help-panel > summary { padding:10px 14px; cursor:pointer; font-size:11px; font-weight:600; }
.help-panel > summary::marker { color:#8c967f; }
.help-panel .help-content { padding:0 14px 12px; }
.help-panel .help-content p { padding:0; margin:0; border:0; background:none; color:inherit; font-size:12px; line-height:20px; max-width:none; }
.help-panel .help-content p + p { margin-top:8px; }
.help-note,p.hint,.note { margin:8px 0 12px; color:#747e6d; font-size:11px; line-height:18px; }
.manual-sender { min-width:0; }
#manualMessage #senderHint { margin:8px 0 0; max-width:none; }
.profile-section .help-note { font-size:11px; line-height:18px; }
.help-panel.warning-help { background:#fff8e5; border-color:#efdfae; color:#7b641f; }
.help-panel.warning-help .alert { padding:0 14px 12px; margin:0; border:0; border-radius:0; background:none; color:inherit; font-size:12px; line-height:20px; }
.alert { padding:12px 14px; margin-bottom:16px; border-radius:8px; }
.language-toolbar { background:#fff; max-width:none; }
.workspace-notification-slot { min-width:0; }
.mail-notifications { position:relative; margin:0; padding:0; border:0; border-radius:0; background:none; font-size:11px; }
.mail-notifications summary { min-height:30px; padding:5px 10px; border:1px solid #eadb9f; border-radius:16px; background:#fff9e6; color:#75601a; line-height:18px; cursor:pointer; white-space:nowrap; }
.mail-notification-panel { position:absolute; top:38px; left:0; width:360px; max-width:calc(100vw - 96px); max-height:65dvh; overflow:auto; padding:16px; background:#fff; border:1px solid #e1e5dc; border-radius:10px; box-shadow:0 8px 32px #0002; }
.mail-notification-panel ul { margin:0 0 12px; padding-left:16px; }
.mail-notification-panel li { margin-bottom:8px; overflow-wrap:anywhere; }
.inbox-page main { display:grid; grid-template-columns:300px minmax(0,1fr); grid-template-rows:auto 1fr; gap:12px; padding:0 12px 12px 0; }
.inbox-page .page-heading { grid-column:1/-1; margin:0 -12px 0 0; min-height:68px; }
.inbox-list { margin:0; border-radius:0 10px 10px 0; padding:20px 12px; align-self:stretch; min-height:calc(100dvh - 92px); }
.inbox-list h2 { font-size:22px; line-height:28px; margin:0 8px 16px; }
.inbox-search { width:100%; border-radius:24px; background:#f2f2ed; margin:0 0 12px; }
.inbox-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.inbox-filters button { border-radius:20px; min-height:30px; font-size:10px; padding:4px 10px; }
.inbox-filters button[aria-pressed=true] { background:#171815; border-color:#171815; color:#fff; }
.message-list { display:flex; flex-direction:column; gap:4px; }
.message-list > button { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; text-align:left; justify-content:stretch; align-items:start; width:100%; border:0; padding:14px 10px; background:#fff; border-radius:9px; font-weight:400; flex-shrink:0; }
.message-list:empty::after { content:none; }
.message-list > button:hover { background:#f5f5f0; }
.message-list > button[aria-pressed=true] { background:#eeeee7; box-shadow:inset 3px 0 var(--accent); }
.message-avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#e5eee6; color:#42674e; font-size:11px; font-weight:700; }
.message-list > button:nth-child(3n+2) .message-avatar { background:#e5eaf3; color:#486388; }
.message-list > button:nth-child(3n) .message-avatar { background:#faf0d9; color:#926d2b; }
.message-copy { min-width:0; }
.message-copy strong { display:block; overflow-wrap:anywhere; font-size:12px; margin-bottom:3px; }
.message-copy small { display:block; font-size:10px; color:#777870; overflow-wrap:anywhere; line-height:16px; }
.message-copy .badge { display:inline-block; margin-top:6px; padding:1px 7px; background:#e3eee5; color:#316347; font-size:9px; }
.inbox-work { min-width:0; display:flex; flex-direction:column; gap:12px; }
.inbox-work section { margin:0; }
.inbox-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.inbox-stats > div { background:#e4eee6; padding:12px; border-radius:7px; }
.inbox-stats > div:first-child { background:#171815; color:#fff; }
.inbox-stats > div:last-child { background:#fff0d4; }
.inbox-stats b { display:block; font-size:28px; line-height:34px; }
.inbox-stats span { display:block; font-size:10px; line-height:16px; }
.message-panel { flex:1; min-height:380px; }
.message-panel #subject { font-size:17px; line-height:24px; overflow-wrap:anywhere; }
.message-panel #sender { color:#777870; font-size:11px; overflow-wrap:anywhere; }
.message-panel pre { padding:20px; background:#fafaf7; border:1px solid #e7e7e0; border-radius:6px; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/22px Manrope,system-ui,sans-serif; max-height:44vh; overflow:auto; }
#attachments { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
#attachments a { display:inline-flex; align-items:center; gap:8px; border:1px solid #deded6; border-radius:20px; padding:6px 12px; color:#262720; font-size:11px; text-decoration:none; overflow-wrap:anywhere; max-width:100%; }
.inbox-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; text-align:center; color:#777870; padding:24px; }
.inbox-empty .icon { width:40px; height:40px; color:#b9bbae; margin-bottom:16px; }
.inbox-empty h2 { color:#262720; margin-bottom:8px; }
.message-footer { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:16px; margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.message-footer label { font-size:11px; width:280px; max-width:100%; }
.message-footer input { margin-top:6px; }
#build { background:var(--accent); border-color:var(--accent); border-radius:24px; padding:10px 20px; }
.inbox-result { grid-column:1/-1; margin:0 12px; }
.inbox-result:empty { display:none; }
.document-workspace { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; align-items:start; }
.document-content,.document-rail { min-width:0; }
.document-rail { position:sticky; top:12px; }
.document-rail .row { gap:8px; }
.document-rail .row > .btn { flex:1 1 120px; }
.document-rail .grid { grid-template-columns:1fr; }
.document-rail .fld { min-width:0; }
.document-rail .fld > div { overflow-wrap:anywhere; }
.document-rail h2 { border-bottom:1px solid var(--line); padding-bottom:12px; }
.document-tabs { display:flex; gap:4px; padding:0 4px; background:#fff; border-radius:9px; margin-bottom:12px; overflow:auto; }
.document-tabs a { flex-shrink:0; padding:14px 12px; border-bottom:3px solid transparent; color:#777870; text-decoration:none; font-size:11px; font-weight:700; }
.document-tabs a[aria-current=true] { color:#181818; border-bottom-color:var(--accent); }
.document-content > section { scroll-margin-top:16px; }
.specification-panel { min-height:55vh; }
.editor-page main { padding-bottom:28px; }
.editor-page .specification-panel .muted { font-size:10px; line-height:16px; }
.editor-page .totals { width:100%; margin:0; background:#10110e; border-radius:7px; color:#d7d8d1; padding:8px; }
.editor-page .totals > div { font-size:11px; padding:8px; }
.editor-page .totals .grand { background:none; color:#fff; border-top:1px solid #3b3c35; border-radius:0; margin-top:0; }
.editor-page .totals .grand b { font-size:24px; line-height:32px; }
.editor-page .totals .grand > span { color:var(--accent); }
.editor-page .bar { position:static; display:flex; flex-direction:column; align-items:stretch; padding:0; border:0; background:none; backdrop-filter:none; gap:8px; }
.editor-page .bar > * { grid-column:auto; grid-row:auto; }
.editor-page .bar .status { text-align:left; margin:4px 0 0; max-width:none; }
.editor-page #btnApprove { order:-2; background:var(--accent); border-color:var(--accent); }
.editor-page #btnSave { order:-1; background:white; border-color:#b5b6ab; border-radius:7px; }
.editor-page #tbl { min-width:1450px; }
main input[type=file] { min-width:0; max-width:100%; width:100%; }
.steps { padding:12px 16px; background:#fff; border-radius:8px; gap:12px; margin-bottom:12px; }
.steps li { min-width:0; flex:1; }
.steps li > span:only-child { display:block; width:auto; height:auto; border:0; border-radius:0; }
#changes h3 { overflow-wrap:anywhere; }
.editor-page #tbl th,.editor-page #tbl td { padding:10px 8px; }
.editor-page #tbl .onreq { background:#fff8dc; }
.editor-page #docFields,.editor-page #termFields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.login-page body { padding-left:var(--sidebar); background:#f4f4ef; }
.login-page main { min-height:calc(100dvh - 60px); margin:0; max-width:none; padding:48px; }
.login-page .login-intro { min-width:0; }
.login-page .login-form-wrap { min-width:0; }
.login-page .login-intro h1 { font-size:44px; line-height:52px; }
.login-page footer { margin:0; }
@media (min-width:1600px) { .inbox-page main { grid-template-columns:340px minmax(0,1fr); } .document-workspace { grid-template-columns:minmax(0,1fr) 340px; } }
@media (max-width:1100px) {
  :root { --sidebar:184px; }
  .brand { font-size:19px; }
  .document-workspace { grid-template-columns:minmax(0,1fr); }
  .document-rail { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .document-rail > section { margin:0; }
  .inbox-page main { grid-template-columns:260px minmax(0,1fr); }
  .inbox-stats { gap:6px; }
  .inbox-stats > div { padding:10px 8px; }
  .login-page main { padding:24px; }
  .login-page .login-intro h1 { font-size:32px; line-height:40px; }
  .rule-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-section .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  body,.login-page body { padding-left:0; }
  body > .app-header { position:relative; inset:auto; width:auto; min-height:64px; flex-direction:row; align-items:center; padding:12px 16px; gap:12px; }
  .brand { font-size:20px; }
  .brand svg { width:28px; height:28px; }
  .workspace-label { display:none; }
  #hUser { margin:0 0 0 auto; padding:0; width:auto; border:0; align-items:flex-end; gap:4px; font-size:10px; }
  #hUser > span { max-width:120px; }
  header .hbtn { padding:2px 8px; font-size:10px; }
  header .sub { display:none; }
  .app-nav { position:relative; inset:auto; width:auto; display:flex; flex-direction:row; overflow:auto; gap:4px; padding:6px 8px; background:#171815; }
  .app-nav a { min-height:38px; padding:8px 10px; font-size:11px; gap:6px; white-space:nowrap; }
  .app-nav .icon { width:16px; height:16px; }
  main { padding:8px; min-height:calc(100dvh - 114px); }
  .page-heading { min-height:76px; margin:-8px -8px 8px; padding:16px; flex-wrap:wrap; gap:12px; }
  .page-heading h1,.document-heading h1 { font-size:22px; line-height:28px; }
  .page-heading > .btn { min-height:34px; }
  section,.panel { padding:14px; margin-bottom:8px; border-radius:8px; }
  input,select,textarea { font-size:16px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .cards .card { padding:12px; }
  .cards .card b { font-size:26px; line-height:34px; }
  .cards .card span { font-size:11px; }
  .tabs { width:100%; }
  .tabs button { flex:1 1 auto; padding:8px 10px; }
  .tabs.rule-kinds button { padding:8px 10px; }
  .rule-filters { grid-template-columns:1fr; padding:12px; gap:12px; }
  .rule-filters .field:has(#filterClient) { grid-column:auto; grid-template-columns:1fr; }
  .profile-page #profileForm,.profile-section .form-grid { grid-template-columns:1fr; }
  .profile-section { padding:16px; }
  .inbox-page main { display:flex; flex-direction:column; padding:0 8px 8px; gap:8px; }
  .inbox-page .page-heading { margin:0 -8px; }
  .inbox-list { min-height:0; border-radius:8px; padding:16px 12px; }
  .message-list { max-height:340px; overflow:auto; }
  .message-list > button { padding:12px 8px; }
  .inbox-work { gap:8px; }
  .inbox-stats span { font-size:9px; }
  .message-panel pre { padding:12px; }
  .message-footer label { width:100%; }
  .message-footer button { width:100%; }
  .document-workspace { gap:8px; }
  .document-rail { display:flex; flex-direction:column; gap:8px; }
  .document-tabs { margin-bottom:8px; }
  .document-tabs a { padding:12px 10px; }
  .editor-page #docFields,.editor-page #termFields { grid-template-columns:1fr; }
  .editor-page .bar { display:flex; }
  .editor-page main { padding-bottom:16px; }
  .login-page main { padding:24px 16px; }
  .login-page .login-intro h1 { font-size:32px; line-height:40px; }
  .mail-notifications { padding:0; margin:0; }
}