:root {
  --blue-900: #123a71;
  --blue-700: #1769c2;
  --blue-100: #eaf3ff;
  --green-700: #147a4b;
  --green-100: #e8f8ef;
  --slate-900: #172033;
  --slate-600: #60708a;
  --slate-200: #dfe7f1;
  --slate-100: #f4f7fb;
  --white: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--slate-100); color: var(--slate-900); font-family: "Prompt", "Tahoma", "Segoe UI", sans-serif; font-size: 16px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .5rem; font-size: clamp(1.85rem, 4.3vw, 2.8rem); line-height: 1.22; }
h2 { margin-bottom: .5rem; font-size: 1.2rem; }
.page-shell { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 2rem; }
.topbar { position: sticky; top: 0; z-index: 100; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 max(1rem, calc((100% - 1120px) / 2)); background: var(--white); border-bottom: 1px solid var(--slate-200); transition: box-shadow .18s ease; }.topbar.is-scrolled { box-shadow: 0 7px 18px rgba(20,58,94,.12); }
.brand { color: var(--blue-900); text-decoration: none; font-weight: 800; font-size: 1.15rem; }
.brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: .3rem; border-radius: 8px; background: var(--blue-700); color: var(--white); }
.topbar-actions { display: flex; align-items: center; gap: .7rem; }.topbar-actions .user-name { margin-right: .1rem; padding: .38rem .12rem; color: #2e4d70; font-size: .9rem; font-weight: 700; }.topbar-icon-button { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 2px 5px rgba(28,69,110,.04); }.topbar-icon-button:hover { box-shadow: 0 7px 14px rgba(25,91,151,.13); transform: translateY(-1px); }.notification-trigger.topbar-icon-button { border-color: #b5c9df; background: #f8fbff; }.notification-trigger.topbar-icon-button svg { stroke: #315f8d; }.notification-trigger.topbar-icon-button:hover svg, .theme-toggle.topbar-icon-button:hover svg { stroke: #1769c2; }
.notification-menu { position: relative; }
.notification-trigger { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e1e5ea; border-radius: 50%; background: #f5f6f8; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.notification-trigger:hover, .notification-trigger[aria-expanded="true"] { border-color: #c8ced6; background: #e9edf1; }
.notification-trigger:focus-visible { outline: 3px solid rgba(101,111,124,.22); outline-offset: 2px; }
.notification-trigger svg { display: block; width: 18px; height: 18px; fill: none; stroke: #596474; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.notification-trigger b { position: absolute; top: -4px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #fff; border-radius: 9px; background: #c43d3d; color: #fff; font-size: .62rem; }
.notification-popover { position: absolute; z-index: 40; top: 45px; right: 0; width: min(350px, calc(100vw - 2rem)); overflow: hidden; border: 1px solid #dce1e7; border-radius: 14px; background: #fff; box-shadow: 0 16px 38px rgba(37,45,57,.16); }
.notification-heading { display: flex; align-items: center; justify-content: space-between; padding: .85rem .95rem; border-bottom: 1px solid #e7eaee; background: #fafbfc; }
.notification-heading strong { color: #354052; font-size: .9rem; }
.notification-heading button { border: 0; padding: .2rem .3rem; border-radius: 5px; background: transparent; color: #596474; font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; }
.notification-heading button:hover { background: #e9edf1; }
.notification-popover a { display: grid; gap: .2rem; padding: .85rem .95rem; border-bottom: 1px solid #edf0f2; color: #354052; text-decoration: none; transition: background .16s ease; }
.notification-popover a:hover { background: #f6f7f8; }
.notification-popover a span, .notification-popover a small, .notification-popover p { color: #707987; font-size: .75rem; }
.notification-popover p { padding: 1rem .95rem; margin: 0; }
.user-name, .muted { color: var(--slate-600); }.muted { font-size: .98rem; line-height: 1.6; }
.profile-link { color: #0f579f; font-size: .88rem; font-weight: 700; text-decoration: none; }
.link-button { border: 0; padding: 0; background: none; color: #0f579f; cursor: pointer; font: inherit; font-weight: 700; }
.eyebrow { display: inline-block; margin-bottom: .55rem; color: var(--green-700); font-size: 1.3rem; font-weight: 800; letter-spacing: .02em; }
.card { padding: 1.5rem; border: 1px solid var(--slate-200); border-radius: 16px; background: var(--white); box-shadow: 0 12px 30px rgba(23, 32, 51, .05); }
.page-shell.login-shell { width: 100%; max-width: none; margin: 0; padding: 0; }
.login-page { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); width: 100%; min-height: 100vh; min-height: 100svh; background: #f7faff; }
.login-showcase { position: relative; overflow: hidden; min-height: 100vh; color: var(--white); background: radial-gradient(circle at 28% 6%, #3d9cff 0, transparent 30%), linear-gradient(145deg, #0b2860 0%, #0c4d9d 57%, #0b78b8 100%); }
.login-showcase::before, .login-showcase::after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; }
.login-showcase::before { width: 38rem; height: 38rem; right: -18rem; bottom: -20rem; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 0 4rem rgba(255,255,255,.035), 0 0 0 8rem rgba(255,255,255,.025); }
.login-showcase::after { width: 11rem; height: 11rem; left: -5rem; top: 42%; background: rgba(255,255,255,.055); }
.showcase-content { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; max-width: 700px; margin: 0 auto; padding: clamp(2rem, 5vw, 4.25rem) clamp(2rem, 7vw, 6rem) 2.5rem; }
.company-logo-wrap { display: inline-flex; align-self: flex-start; max-width: 290px; padding: .45rem .75rem; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 12px 32px rgba(0,20,58,.2); }
.company-logo { display: block; width: 100%; height: auto; }
.showcase-copy { margin-top: clamp(2.5rem, 8vh, 6rem); }
.showcase-kicker, .form-kicker { display: block; margin: 0 0 .7rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; }
.showcase-kicker { color: #9fe6ff; }
.showcase-copy h1 { margin: 0; max-width: 560px; color: #fff; font-size: clamp(2.25rem, 4.4vw, 4rem); font-weight: 500; line-height: 1.34; letter-spacing: -.04em; }
.showcase-copy h1 strong { color: #aaf4d1; font-weight: 700; }
.showcase-copy p { max-width: 480px; margin: 1rem 0 0; color: #d9ebff; font-size: 1rem; line-height: 1.85; }
.petty-cash-art { width: min(310px, 46%); min-width: 220px; align-self: flex-end; margin: auto 2% -1.25rem 0; filter: drop-shadow(0 22px 28px rgba(1, 20, 58, .32)); }
.showcase-trust { display: flex; align-items: center; gap: .55rem; margin-top: auto; color: #c5ddfb; font-size: .78rem; }
.trust-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #6ce4a2; box-shadow: 0 0 0 .25rem rgba(108,228,162,.18); }
.login-panel { display: grid; place-items: center; padding: 2rem; background: linear-gradient(155deg, #fff 0%, #f3f8ff 100%); }
.login-card { display: grid; width: min(100%, 410px); gap: 1.15rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-card-heading { display: flex; align-items: center; gap: .8rem; }
.mobile-brand-mark { display: none; }
.form-kicker { color: var(--blue-700); }
.login-card h2 { margin: 0; color: var(--blue-900); font-size: 2rem; font-weight: 700; line-height: 1.2; }
.login-description { margin: -.5rem 0 .3rem; color: var(--slate-600); font-size: .9rem; }
.login-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .35rem; border-radius: 11px; background: var(--blue-100); }.login-mode { border: 0; border-radius: 8px; padding: .58rem .4rem; background: transparent; color: var(--slate-600); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }.login-mode.is-active { background: #fff; color: var(--blue-900); box-shadow: 0 2px 7px rgba(18,58,113,.12); }.login-mode-help { min-height: 1.2rem; margin: -.7rem 0 0; color: var(--slate-600); font-size: .74rem; text-align: center; }
.field-group { display: grid; gap: .48rem; }
label { font-weight: 700; font-size: .96rem; }
.input-wrap { position: relative; }
.input-wrap svg { position: absolute; top: 50%; left: .9rem; width: 1.1rem; height: 1.1rem; color: #7e91ab; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; pointer-events: none; }
.input-wrap:has(.password-visibility-toggle) input { padding-right: 3rem; }.password-visibility-toggle { position: absolute; top: 50%; right: .45rem; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #6d86a1; cursor: pointer; transform: translateY(-50%); }.password-visibility-toggle:hover { background: #edf5ff; color: var(--blue-700); }.password-visibility-toggle:focus-visible { outline: 3px solid rgba(35,129,229,.22); outline-offset: 1px; }.password-visibility-toggle svg { position: static; width: 18px; height: 18px; transform: none; }.password-visibility-toggle .eye-closed { display: none; }.password-visibility-toggle[aria-pressed="true"] .eye-open { display: none; }.password-visibility-toggle[aria-pressed="true"] .eye-closed { display: block; }
input { width: 100%; padding: .88rem .95rem .88rem 2.7rem; border: 1px solid #cdd9e8; border-radius: 11px; background: #fff; color: var(--slate-900); font: inherit; transition: border-color .18s, box-shadow .18s; }
.login-page input { border-color: #aebfd4; }
input::placeholder, textarea::placeholder { color: #b5c1d0; opacity: 1; }
input:focus { outline: 0; border-color: #2381e5; box-shadow: 0 0 0 4px rgba(35,129,229,.13); }
.button { border: 0; border-radius: 9px; min-height: 42px; padding: .7rem 1rem; font: inherit; font-weight: 800; }.dashboard-header > .button, .dashboard-actions .button, .status-overview-heading > .button { min-height: 36px; padding: .45rem .78rem; border-radius: 8px; font-size: .86rem; }
.button-compact { min-height: 34px; padding: .38rem .66rem; font-size: .82rem; }
.print-document-button { min-height: 40px; padding: .58rem .9rem; font-size: .9rem; }
.settings-save { margin-top: 1.25rem; }
.settings-operations-link { display: flex; justify-content: flex-end; margin: 0 0 .35rem; }
.system-settings-header { margin-top: -.35rem; }
.button-primary { background: var(--blue-700); color: var(--white); cursor: pointer; }
.button-secondary { border: 1px solid var(--blue-700); background: var(--white); color: var(--blue-700); text-decoration: none; }
.button-danger { background: #b42318; color: var(--white); cursor: pointer; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 52px; margin-top: .3rem; border-radius: 11px; background: linear-gradient(135deg, #0c5cbd, #1684df); box-shadow: 0 11px 20px rgba(15,103,203,.22); transition: transform .18s, box-shadow .18s; }
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 24px rgba(15,103,203,.28); }
.login-submit svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.button:disabled { opacity: .6; cursor: not-allowed; }
.alert { padding: .85rem 1rem; border-radius: 10px; background: #fff0f0; color: #a12222; }
.login-alert { display: flex; align-items: center; gap: .6rem; font-size: .86rem; }
.login-alert svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.login-help { margin: .1rem 0 0; color: #8493a8; font-size: .76rem; text-align: center; }.login-credit { margin: .15rem 0 0; padding-top: .75rem; border-top: 1px solid #e3ebf5; color: #7f91a7; font-size: .67rem; letter-spacing: .01em; text-align: center; }.login-credit span { margin: 0 .25rem; color: #b1bfce; }.login-credit strong { color: #4d6f91; font-weight: 700; }
.alert-info { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.5rem; background: var(--blue-100); color: var(--blue-900); }
.toast-stack { position: fixed; z-index: 1300; top: calc(68px + 1rem); right: 1rem; display: grid; gap: .65rem; width: min(380px, calc(100vw - 2rem)); }.toast { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .9rem 1rem; border: 1px solid #d8dee6; border-radius: 11px; background: #fff; color: #344054; box-shadow: 0 12px 30px rgba(23,32,51,.13); animation: toast-in .25s ease-out; }.toast-error { border-color: #e8c7c7; color: #843434; }.toast button { border: 0; padding: 0; background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }.toast.is-leaving { animation: toast-out .22s ease-in forwards; }@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }@keyframes toast-out { to { opacity: 0; transform: translateX(18px); } }
.confirm-dialog { width: min(420px, calc(100vw - 2rem)); border: 0; border-radius: 16px; padding: 0; color: var(--slate-900); box-shadow: 0 24px 60px rgba(0,0,0,.25); }.confirm-dialog::backdrop { background: rgba(13,28,52,.45); backdrop-filter: blur(2px); }.confirm-dialog form { padding: 1.35rem; }.confirm-dialog h2 { color: var(--blue-900); }.confirm-dialog p { color: var(--slate-600); line-height: 1.6; }.confirm-dialog form > div { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.3rem; }.is-loading { position: relative; color: transparent !important; pointer-events: none; }.is-loading::after { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; content: ""; animation: spin .65s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.page-loading-overlay { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 1.25rem; background: rgba(8,28,54,.42); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .18s ease; }.page-loading-overlay.is-visible { opacity: 1; pointer-events: all; }.page-loading-card { display: grid; justify-items: center; width: min(320px,100%); gap: .55rem; padding: 1.55rem 1.4rem 1.4rem; border: 1px solid rgba(255,255,255,.7); border-radius: 20px; background: linear-gradient(145deg,#fff,#f1f8ff); box-shadow: 0 22px 55px rgba(6,35,72,.26); color: var(--blue-900); text-align: center; transform: translateY(8px) scale(.97); transition: transform .18s ease; }.page-loading-overlay.is-visible .page-loading-card { transform: translateY(0) scale(1); }.page-loading-mark { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: linear-gradient(145deg,#0966c6,#27a3eb); box-shadow: 0 9px 20px rgba(13,111,202,.28); color: #fff; }.page-loading-mark::before { position: absolute; width: 70px; height: 70px; border: 2px solid rgba(33,141,229,.24); border-top-color: #2a9be4; border-radius: 50%; content: ""; animation: spin 1s linear infinite; }.page-loading-mark span { position: relative; z-index: 1; font-size: 1.35rem; font-weight: 800; }.page-loading-card strong { margin-top: .25rem; font-size: 1.02rem; }.page-loading-card small { color: var(--slate-600); font-size: .78rem; line-height: 1.55; }.is-page-loading { cursor: progress; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }.dashboard-header .eyebrow { margin-bottom: .25rem; }.dashboard-header h1 { margin-bottom: .25rem; }
.page-navigation { margin-bottom: .5rem; }.page-back { border: 0; padding: .25rem 0; background: transparent; color: var(--slate-600); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: color .18s, transform .18s; }.page-back:hover { color: var(--blue-700); transform: translateX(-2px); }
.dashboard-actions { display: flex; gap: .65rem; flex-wrap: wrap; }
.dashboard-header h1 { font-size: clamp(1.6rem, 3.2vw, 1.72rem); line-height: 1.25; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.metric-completed { border-color: #b8dfc7; }.status-overview { margin-top: 1.25rem; }.status-overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }.status-overview-heading h2 { margin: 0; }.status-overview-heading .eyebrow { margin-bottom: .35rem; }.status-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }.status-card { display: grid; gap: .3rem; min-height: 88px; padding: .8rem; border: 1px solid var(--slate-200); border-radius: 11px; background: #fff; color: var(--slate-900); text-decoration: none; transition: box-shadow .18s, transform .18s; }.status-card:hover { box-shadow: 0 8px 18px rgba(23,32,51,.08); transform: translateY(-1px); }.status-card span { color: var(--slate-600); font-size: .72rem; }.status-card strong { font-size: 1.45rem; }.status-draft { border-top: 3px solid #94a3b8; }.status-pending { border-top: 3px solid #e2aa30; }.status-payment { border-top: 3px solid #3d89d9; }.status-completed { border-top: 3px solid #2e9a5a; }.status-returned { border-top: 3px solid #dd8333; }.status-rejected { border-top: 3px solid #c45b5b; }@media(max-width:1000px){.status-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}@media(max-width:700px){.status-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}@media(max-width:520px){.status-overview-heading{align-items:flex-start;flex-direction:column}.status-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.metric { display: grid; gap: .25rem; }
.metric span, .metric small { color: var(--slate-600); }
.metric strong { color: var(--blue-900); font-size: 2.25rem; }
.empty-state { margin-top: 1rem; text-align: center; padding: 3rem 1.5rem; }
.empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 1rem; border-radius: 50%; background: var(--green-100); color: var(--green-700); font-weight: 900; }
.signature-shell { width: min(100% - 2rem, 720px); padding-top: 3.5rem; }
.signature-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
.signature-card h1 { color: var(--blue-900); font-size: clamp(1.8rem, 4vw, 2.5rem); }
.signature-card h2 { color: var(--blue-900); }
.signature-intro { max-width: 580px; color: var(--slate-600); line-height: 1.8; }
.profile-details { margin-top: 1.75rem; padding: 1.25rem; border: 1px solid var(--slate-200); border-radius: 14px; background: #fbfdff; }.profile-section-heading h2 { margin-bottom: .2rem; font-size: 1.15rem; }.profile-section-heading p { margin: 0 0 1rem; color: var(--slate-600); font-size: .84rem; }.profile-readonly { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.15rem; }.profile-readonly div { display: grid; gap: .16rem; padding: .7rem .8rem; border-radius: 9px; background: var(--slate-100); }.profile-readonly span { color: var(--slate-600); font-size: .7rem; }.profile-readonly strong { font-size: .82rem; }.profile-form .form-grid { margin-bottom: 1rem; }.profile-divider { margin: 2rem 0; border: 0; border-top: 1px solid var(--slate-200); }.signature-section > h2 { margin-bottom: .25rem; }
.profile-password { margin-top: 1rem; padding: 1.25rem; border: 1px solid #d8e6f4; border-radius: 14px; background: linear-gradient(135deg, #f9fcff, #f4f9ff); }.password-single-field { max-width: 360px; margin-bottom: 1rem; }.password-change-form input { padding-left: .9rem; }
.saved-signature { display: grid; gap: .65rem; margin: 1.5rem 0 .5rem; padding: 1rem; border: 1px solid var(--slate-200); border-radius: 12px; background: var(--slate-100); color: var(--slate-600); font-size: .82rem; font-weight: 600; }
.saved-signature img { display: block; width: 100%; max-width: 340px; height: 120px; padding: .5rem; border-radius: 8px; background: #fff; object-fit: contain; object-position: left center; }
.signature-replace-note { margin: .75rem 0 0; color: var(--slate-600); font-size: .85rem; }
.signature-form-alert { margin:.7rem 0; padding:.55rem .75rem; font-size:.8rem; line-height:1.45; transition:opacity .22s ease,transform .22s ease; }.signature-form-alert ul { margin:0; padding-left:1.05rem; }.signature-form-alert.is-dismissing { opacity:0; transform:translateY(-4px); }
.signature-tabs { display: flex; gap: .5rem; margin: 1.75rem 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--slate-200); }
.signature-tab { border: 0; border-radius: 8px; padding: .6rem .85rem; background: transparent; color: var(--slate-600); font: inherit; font-weight: 600; cursor: pointer; }
.signature-tab.is-active { background: var(--blue-100); color: var(--blue-900); }
.signature-canvas-wrap { overflow: hidden; border: 1px dashed #91add1; border-radius: 12px; background: linear-gradient(#fff, #f8fbff); }
#signature-canvas { display: block; width: 100%; height: 230px; touch-action: none; cursor: crosshair; }
.signature-actions { display: flex; justify-content: space-between; gap: 1rem; margin: .65rem 0 1.5rem; color: var(--slate-600); font-size: .8rem; }
.text-action { border: 0; padding: 0; background: transparent; color: #a12222; font: inherit; font-weight: 600; cursor: pointer; }
.is-hidden { display: none; }
.upload-area { display: grid; gap: .3rem; place-items: center; min-height: 180px; margin-bottom: .6rem; padding: 1rem; border: 1px dashed #91add1; border-radius: 12px; color: var(--blue-900); cursor: pointer; text-align: center; }
.upload-area small { color: var(--slate-600); font-weight: 400; }
.upload-preview { display: block; max-width: min(100%, 300px); max-height: 110px; margin-top: .4rem; border-radius: 8px; background: #fff; object-fit: contain; }
#id_signature_upload { position: absolute; width: 1px; height: 1px; opacity: 0; }
.field-error { margin: .5rem 0; color: #a12222; font-size: .85rem; }
.form-error-summary { margin: 0 0 1rem; padding: 1rem 1.1rem; border: 1px solid #edcaca; border-radius: 12px; background: #fff7f7; color: #842b2b; }
.form-error-summary strong { display: block; margin-bottom: .2rem; }
.form-error-summary p { margin: 0; font-size: .84rem; }
.form-error-summary ul { margin: .55rem 0 0; padding-left: 1.25rem; font-size: .82rem; }
.signature-submit { width: 100%; min-height: 50px; margin-top: .5rem; background:#155aa7; }.signature-submit:hover { background:#104b8d; }
.user-table-wrap { overflow-x: auto; }
.table-filters { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.15rem; padding: 1rem; border: 1px solid var(--slate-200); border-radius: 12px; background: #f8fbff; }.table-filter-field { display: grid; min-width: 150px; gap: .3rem; }.table-filter-search { flex: 1 1 245px; }.table-filter-field label { color: var(--slate-600); font-size: .78rem; font-weight: 700; }.table-filter-field input, .table-filter-field select { width: 100%; min-height: 38px; padding: .45rem .6rem; border: 1px solid #cdd9e8; border-radius: 8px; background: #fff; color: var(--slate-900); font: inherit; font-size: .86rem; }.table-filter-field input:focus, .table-filter-field select:focus { outline: 0; border-color: #2381e5; box-shadow: 0 0 0 3px rgba(35,129,229,.12); }.table-filter-actions { display: flex; gap: .45rem; }.table-filter-actions .button { min-height: 38px; padding: .45rem .72rem; font-size: .84rem; }
html.dark-mode .table-filters:not(.audit-filters) { border-color:#2f526f; background:radial-gradient(circle at right top,rgba(42,92,137,.42),transparent 42%),linear-gradient(115deg,#142b44,#102137); box-shadow:inset 0 1px 0 rgba(164,210,250,.05); }html.dark-mode .table-filters:not(.audit-filters) .table-filter-field label { color:#b3cbe2; }html.dark-mode .table-filters:not(.audit-filters) .table-filter-field input,html.dark-mode .table-filters:not(.audit-filters) .table-filter-field select { border-color:#395d7f; background:#0d2036; color:#ecf4ff; }html.dark-mode .table-filters:not(.audit-filters) .table-filter-field input::placeholder { color:#7d9ab7; }html.dark-mode .table-filters:not(.audit-filters) .table-filter-field input:hover,html.dark-mode .table-filters:not(.audit-filters) .table-filter-field select:hover { border-color:#5a91c1; }html.dark-mode .table-filters:not(.audit-filters) .table-filter-actions .button-secondary { border-color:#3a6287; background:#193550; color:#d8ebfd; }
.button-export-excel { display:inline-flex; align-items:center; justify-content:center; gap:.32rem; width:80px; min-height:34px; padding:0; border:1px solid #145c38; border-radius:8px; background:#1d6f42; color:#eaf7ef; box-shadow:0 2px 4px rgba(17,79,47,.16); font-size:.72rem; font-weight:700; text-decoration:none; }.button-export-excel:hover { border-color:#104b2e; background:#145c38; color:#fff; }.button-export-excel svg { flex:0 0 18px; width:18px; height:18px; }.button-export-excel .excel-page { fill:#4f9d70; }.button-export-excel .excel-grid { fill:none; stroke:#d5f0df; stroke-linecap:round; stroke-width:1.2; }.button-export-excel .excel-mark { fill:#edf9f1; }.button-export-excel .excel-x { fill:none; stroke:#1b6b40; stroke-linecap:round; stroke-width:1.8; }
.table-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; color: var(--slate-600); font-size: .78rem; }.table-pagination form, .table-pagination nav { display: flex; align-items: center; gap: .5rem; margin: 0; }.page-size-label { color: var(--slate-600); font-weight: 600; }.page-size-options { display: inline-flex; overflow: hidden; border: 1px solid #cdd9e8; border-radius: 8px; background: #fff; }.page-size-options button { min-width: 36px; padding: .32rem .55rem; border: 0; border-right: 1px solid #dce5ef; background: transparent; color: var(--slate-600); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }.page-size-options button:last-child { border-right: 0; }.page-size-options button:hover { background: #f1f7ff; color: var(--blue-700); }.page-size-options button.is-active { background: var(--blue-700); color: #fff; }.table-pagination nav a { color: var(--blue-700); font-weight: 700; text-decoration: none; }.table-pagination nav strong { color: var(--slate-900); }.table-pagination-updating { opacity: .5; transition: opacity .14s; pointer-events: none; }
.user-list-card:has(input[name="audit_q"]) .user-table th:first-child, .user-list-card:has(input[name="audit_q"]) .user-table td:first-child { width: 145px; color: var(--slate-600); font-size: .78rem; font-weight: 500; white-space: nowrap; }
.user-identity-grid { align-items: start; }.user-identity-grid .form-field { align-content: start; }
.user-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: .94rem; }
.user-table th, .user-table td { padding: .95rem .65rem; border-bottom: 1px solid var(--slate-200); text-align: left; vertical-align: top; }
.user-table th { color: var(--slate-600); font-size: .82rem; font-weight: 700; }
.user-table td small { display: block; margin-top: .2rem; color: var(--slate-600); }
.user-management-table td:nth-child(4) { color: var(--slate-700); font-size: .82rem; white-space: nowrap; }
.user-management-table td:nth-child(4) .muted { font-size: .8rem; }
.role-chip, .status-active, .status-inactive { display: inline-block; margin: 0 .25rem .25rem 0; border-radius: 99px; padding: .22rem .54rem; font-size: .76rem; font-weight: 600; }
.role-chip { background: var(--blue-100); color: var(--blue-900); }.status-active { background: var(--green-100); color: var(--green-700); }.status-inactive { background: #fff0f0; color: #a12222; }
.table-link { color: var(--blue-700); font-weight: 700; text-decoration: none; }.table-actions { display: flex; align-items: center; gap: .8rem; }.table-actions form { margin: 0; }.table-delete { border: 0; padding: 0; background: transparent; color: #a12222; font: inherit; cursor: pointer; }.user-management-table th:last-child, .user-management-table td:last-child { width: 260px; }.user-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .38rem; }.user-actions form { margin: 0; }.user-action { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; border: 1px solid transparent; border-radius: 7px; padding: .32rem .55rem; font: inherit; font-size: .74rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background .16s, border-color .16s, color .16s; }.user-action-edit { background: #edf5ff; color: var(--blue-700); }.user-action-edit:hover { background: #dfeeff; }.user-action-toggle { border-color: #d8dee6; background: #fff; color: #566171; }.user-action-toggle:hover { border-color: #aeb8c5; background: #f5f7f9; color: #354052; }.user-action-delete { background: #fff1f1; color: #a12222; }.user-action-delete:hover { background: #ffe4e4; }.empty-table { color: var(--slate-600); text-align: center !important; }
.user-form-card { max-width: 920px; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.5rem; }.form-field { display: grid; gap: .45rem; }.form-field-wide { grid-column: 1 / -1; }.form-field input:not([type="checkbox"]), .form-field select, .form-field textarea { width: 100%; padding: .8rem .9rem; border: 1px solid #cdd9e8; border-radius: 11px; background: #fff; color: var(--slate-900); font: inherit; line-height: 1.5; transition: border-color .18s, box-shadow .18s; }.form-field select { min-height: 48px; cursor: pointer; }.form-field textarea { resize: vertical; min-height: 112px; }.form-field select:focus, .form-field textarea:focus { outline: 0; border-color: #2381e5; box-shadow: 0 0 0 4px rgba(35,129,229,.13); }.form-field select[multiple] { min-height: 132px; }.form-field small { color: var(--slate-600); font-size: .84rem; line-height: 1.55; }.form-field input[type="checkbox"] { width: auto; margin-right: .45rem; }.form-field-wide div { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.15rem; padding: 1rem 1.05rem; border: 1px solid #dfe6ee; border-radius: 12px; background: #fafcff; }.setting-row > div { display: grid; gap: .22rem; }.setting-row strong { color: var(--slate-900); font-size: .98rem; }.setting-row small { color: var(--slate-600); font-size: .84rem; line-height: 1.5; }.switch-control { position: relative; display: inline-flex; flex: 0 0 auto; width: 48px; height: 28px; cursor: pointer; }.switch-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }.switch-slider { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .18s; }.switch-slider::after { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.22); content: ""; transition: transform .18s; }.switch-control input:checked + .switch-slider { background: var(--blue-700); }.switch-control input:checked + .switch-slider::after { transform: translateX(20px); }.switch-control input:focus-visible + .switch-slider { outline: 3px solid rgba(35,129,229,.24); outline-offset: 2px; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }.required { color: #a12222; }
.claim-form { display: grid; gap: 1.25rem; }.claim-items-card { padding: clamp(1rem, 3vw, 1.5rem); }.items-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }.items-heading h2 { margin-bottom: .25rem; }.items-heading strong { color: var(--blue-900); white-space: nowrap; }.claim-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 180px) auto; gap: .8rem; align-items: end; padding: .8rem 0; border-top: 1px solid var(--slate-200); }.claim-line label { font-size: .78rem; }.claim-line input { padding: .72rem .8rem; }.line-actions { padding-bottom: .75rem; }.claim-line.is-removed { display: none; }.add-line { margin-top: 1rem; }.claim-save { justify-self: start; min-width: 180px; }.detail-card { margin-bottom: 1.25rem; }.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; margin: 0; }.detail-grid div { display: grid; gap: .3rem; }.detail-grid dt { color: var(--slate-600); font-size: .78rem; }.detail-grid dd { margin: 0; font-weight: 600; }.detail-wide { grid-column: 1 / -1; }
.attachment-card { margin-bottom: 1.25rem; }.attachment-card h2 { margin-bottom: .2rem; }.attachment-card h2 small { color: var(--slate-600); font-size: .78rem; font-weight: 500; }.attachment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.attachment-heading .muted { margin: 0; font-size: .82rem; }.attachment-count { flex: 0 0 auto; padding: .28rem .58rem; border-radius: 99px; background: #eef1f4; color: #566171; font-size: .75rem; font-weight: 700; }.attachment-picker { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed #aeb8c5; border-radius: 11px; background: #fafbfc; color: #354052; cursor: pointer; transition: border-color .18s ease, background .18s ease; }.attachment-picker:hover { border-color: #7f8a98; background: #f4f6f8; }.attachment-picker-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e9edf1; color: #566171; font-size: 1.3rem; line-height: 1; }.attachment-picker strong, .attachment-picker small { display: block; }.attachment-picker small { margin-top: .15rem; color: var(--slate-600); font-size: .74rem; font-weight: 400; }.selected-attachments, .existing-attachments { display: grid; gap: .5rem; margin-top: .75rem; }.existing-attachments > strong { color: #566171; font-size: .78rem; }.attachment-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 40px; padding: .55rem .7rem; border: 1px solid #e4e8ed; border-radius: 8px; background: #fff; color: #4d5868; font-size: .82rem; }.attachment-row span, .attachment-row a { overflow: hidden; color: #4d5868; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }.attachment-row a:hover { text-decoration: underline; }.attachment-row form { margin: 0; }.attachment-remove { flex: 0 0 auto; border: 0; padding: .25rem .4rem; border-radius: 5px; background: transparent; color: #a14646; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }.attachment-remove:hover { background: #fff0f0; }
.attachment-list { display: grid; gap: .7rem; margin-top: 1rem; }.attachment-item { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .8rem .9rem; border: 1px solid #d9e4ef; border-radius: 12px; background: linear-gradient(110deg,#f8fbff,#fff); transition: border-color .18s ease, box-shadow .18s ease; }.attachment-item:hover { border-color: #a9cae9; box-shadow: 0 6px 18px rgba(29,78,130,.08); }.attachment-file-icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #e7f1ff; color: var(--blue-700); font-size: 1.4rem; font-weight: 800; }.attachment-file-info { display: grid; min-width: 0; gap: .2rem; flex: 1; }.attachment-file-info strong { overflow: hidden; color: var(--blue-900); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }.attachment-file-info small { color: var(--slate-600); font-size: .75rem; }.attachment-actions { display: flex; flex: 0 0 auto; gap: .45rem; }.attachment-actions .button { text-decoration: none; }.attachment-empty { margin: 1rem 0 0; padding: .85rem .95rem; border: 1px dashed #ccd9e6; border-radius: 10px; color: var(--slate-600); font-size: .84rem; }
.approval-action-card, .approval-history { margin-top: 1.25rem; }.approval-action-card h2, .approval-history h2 { margin-bottom: .35rem; }.approval-action-card textarea { width: 100%; padding: .75rem .85rem; border: 1px solid #cdd9e8; border-radius: 11px; font: inherit; resize: vertical; }.history-row { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: .75rem; padding: .85rem 0; border-top: 1px solid var(--slate-200); }.history-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-top: .05rem; border-radius: 9px; background: #e7f2ff; color: #1769c2; font-size: 1rem; font-weight: 800; line-height: 1; }.history-content { display: grid; gap: .25rem; min-width: 0; }.history-content span, .history-content p { margin: 0; color: var(--slate-600); font-size: .82rem; }.history-returned .history-icon { background: #fff1dc; color: #b6650a; }.history-rejected .history-icon, .history-cancelled .history-icon { background: #ffeded; color: #bb4141; }.history-paid .history-icon, .history-supplemental_paid .history-icon { background: #e9f5ff; color: #1671bd; }.history-received .history-icon, .history-approved .history-icon, .history-completed .history-icon { background: #e5f7ed; color: #168155; }
html.dark-mode .history-icon { background: #18385a; color: #8dc7ff; }.dark-mode .history-returned .history-icon { background: #4a361c; color: #f4bf69; }.dark-mode .history-rejected .history-icon, .dark-mode .history-cancelled .history-icon { background: #49272e; color: #ff9e9e; }.dark-mode .history-paid .history-icon, .dark-mode .history-supplemental_paid .history-icon { background: #173c61; color: #8dc7ff; }.dark-mode .history-received .history-icon, .dark-mode .history-approved .history-icon, .dark-mode .history-completed .history-icon { background: #173e32; color: #86e2b3; }
.approval-action-card .dashboard-actions { margin-top: 1.15rem; }.approval-action-card form > .button { margin-top: 1.15rem; }
.actual-total-field { max-width: 330px; margin: 1rem 0; }.actual-total-field input { width: 100%; padding: .75rem .85rem; border: 1px solid #cdd9e8; border-radius: 11px; font: inherit; }.actual-total-field small { color: var(--slate-600); font-size: .75rem; }
.actual-total-field:has(#excess-reason) { display: none; }.actual-total-field:has(#excess-reason).is-excess-visible { display: grid; }
.clearance-attachment-field { max-width: 465px; margin-top: .8rem; }.clearance-attachment-field .attachment-picker { margin-top: .45rem; min-height: 64px; padding: .6rem .8rem; gap: .6rem; }.clearance-attachment-field .attachment-picker-icon { width: 26px; height: 26px; font-size: 1.05rem; }.clearance-attachment-field .attachment-picker small { font-size: .7rem; }.clearance-attachment-field > small { display: block; margin-top: .45rem; }
.claim-clearance-line + .claim-clearance-line { margin-top: 1rem; }.clearance-amount-field { max-width: 340px; margin-top: .55rem; }.clearance-document-field { margin-top: 1.25rem; }.clearance-document-field .attachment-picker { margin-top: .1rem; }.clearance-submit-button { min-height: 36px; padding: .42rem .75rem; font-size: .82rem; }
.accountant-review-card .refund-confirmation { align-items: center; gap: .65rem; font-size: .92rem; line-height: 1.5; }.accountant-review-card .refund-confirmation input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }.accountant-review-button { min-height: 38px; padding: .45rem .8rem; font-size: .82rem; }
.excess-receipt-input { width: 100%; padding: .38rem .45rem; border: 1px dashed #8fb6df; border-radius: 11px; background: #f7fbff; color: var(--slate-700); font: inherit; font-size: .82rem; cursor: pointer; }.excess-receipt-input::file-selector-button { margin-right: .65rem; padding: .48rem .75rem; border: 0; border-radius: 7px; background: var(--blue-700); color: #fff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; transition: background .18s; }.excess-receipt-input:hover { border-color: var(--blue-700); background: #f0f8ff; }.excess-receipt-input:hover::file-selector-button { background: #0958aa; }
.excess-selected-files { display: grid; gap: .35rem; margin-top: .55rem; }.excess-selected-file { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .38rem .5rem; border: 1px solid #dbe8f5; border-radius: 7px; background: #fff; color: var(--slate-700); font-size: .75rem; }.excess-selected-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.excess-selected-file button { flex: 0 0 auto; border: 0; border-radius: 5px; padding: .2rem .42rem; background: #fff0f0; color: #ad3434; font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; }
.actual-summary-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 1.25rem; padding: 0; overflow: hidden; background: var(--slate-200); }.actual-summary-card div { display: grid; gap: .35rem; padding: 1rem 1.25rem; background: #fff; }.actual-summary-card span { color: var(--slate-600); font-size: .78rem; }.actual-summary-card strong { color: var(--blue-900); font-size: 1.05rem; }@media(max-width:640px){.actual-summary-card{grid-template-columns:1fr;}}
.approval-flow-card { max-width: 1120px; }.section-heading h2 { margin: 0; }.flow-steps { display: flex; align-items: stretch; gap: .55rem; overflow-x: auto; padding: 1rem 0 .35rem; }.flow-node { display: grid; min-width: 185px; gap: .4rem; padding: .85rem; border: 1px solid var(--slate-200); border-radius: 12px; background: #fbfdff; }.flow-node span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-100); color: var(--blue-900); font-size: .75rem; font-weight: 700; }.flow-node label, .flow-node strong { color: var(--blue-900); font-size: .82rem; }.flow-node small { color: var(--slate-600); font-size: .72rem; }.flow-node select { width: 100%; min-height: 40px; padding: .5rem; border: 1px solid #cdd9e8; border-radius: 8px; background: #fff; font: inherit; }.flow-node.current { border-color: #86d9ae; background: var(--green-100); }.flow-node.executive { border-color: #f1d38c; background: #fffaf0; }.flow-arrow { align-self: center; color: var(--blue-700); font-size: 1.3rem; font-weight: 700; }.settings-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }.settings-columns h2 { margin-bottom: .4rem; }.telegram-field, .ad-field { margin-top: .9rem; }.ad-panel { padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, #edf6ff, #f9fcff); }.ad-panel > p { color: var(--slate-600); font-size: .85rem; line-height: 1.6; }.branch-field { display: none; }.branch-field.is-visible { display: grid; }
.ad-login-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; padding: 1rem; border: 1px solid #b9d8fb; border-radius: 12px; background: linear-gradient(135deg, #edf6ff, #f9fcff); }.ad-login-option > div { display: flex; align-items: center; gap: .75rem; }.ad-option-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--blue-700); color: #fff; font-size: .8rem; font-weight: 800; }.ad-login-option strong { color: var(--blue-900); }.ad-login-option p { margin: .18rem 0 0; color: var(--slate-600); font-size: .78rem; }.ad-toggle { display: flex; align-items: center; gap: .45rem; white-space: nowrap; color: var(--blue-900); cursor: pointer; }.ad-toggle input { width: 18px; height: 18px; padding: 0; accent-color: var(--blue-700); }.telegram-card { max-width: 640px; }.telegram-card .telegram-field { margin-top: 1rem; }.telegram-test { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--slate-200); }.telegram-test .button { min-height: 38px; }.telegram-test-success { color: var(--green-700); font-size: .82rem; font-weight: 600; }

.settings-retention-field { max-width: calc(50% - .6rem); margin: -.25rem 0 1.5rem; padding: .9rem 1rem; border: 1px solid #dce7f3; border-radius: 12px; background: #f8fbff; }.settings-retention-field input { max-width: 180px; }.form-grid > .form-field { align-content: start; }
.settings-auto-receive-field { margin-top: 1.25rem; }
@media (max-width: 720px) {
  .page-shell { width: min(100% - 1.25rem, 1120px); padding: 1.5rem 0; }
  .login-page { display: block; min-height: 100svh; }
  .login-showcase { min-height: 245px; }
  .showcase-content { min-height: 245px; padding: 1.5rem 1.4rem; }
  .company-logo-wrap { max-width: 185px; padding: .28rem .45rem; border-radius: 8px; }
  .showcase-copy { margin-top: 1.7rem; }
  .showcase-kicker { margin-bottom: .35rem; font-size: .61rem; }
  .showcase-copy h1 { max-width: 290px; font-size: 1.75rem; line-height: 1.35; }
  .showcase-copy p { display: none; }
  .petty-cash-art { position: absolute; right: -1.45rem; bottom: -1.7rem; width: 43%; min-width: 150px; margin: 0; }
  .showcase-trust { font-size: .64rem; }
  .login-panel { place-items: start center; min-height: calc(100svh - 245px); padding: 1.1rem 1.4rem 2.5rem; }
  .login-card { width: 100%; max-width: 430px; }
  .mobile-brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: linear-gradient(135deg, #0c5cbd, #23a0ee); color: #fff; font-size: 1.2rem; font-weight: 700; }
  .login-card h2 { font-size: 1.72rem; }
  .dashboard-header { align-items: flex-start; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }.settings-retention-field { max-width: none; }
  .claim-line { grid-template-columns: 1fr; gap: .55rem; }.line-actions { padding: 0; }.claim-save { width: 100%; }.detail-grid { grid-template-columns: 1fr; }
  .settings-columns { grid-template-columns: 1fr; }.flow-arrow { transform: rotate(90deg); }.flow-steps { align-items: center; flex-direction: column; }.flow-node { width: 100%; }.flow-arrow { align-self: center; }
  .ad-login-option { align-items: flex-start; flex-direction: column; }.ad-toggle { align-self: flex-start; }
  .summary-grid { grid-template-columns: 1fr; }
  .table-filters { align-items: stretch; }.table-filter-field, .table-filter-search { flex: 1 1 100%; }.table-filter-actions .button { flex: 1 1 auto; text-align: center; }
  .user-name { display: none; }
  .signature-shell { width: min(100% - 1.25rem, 720px); padding-top: 1.5rem; }
  #signature-canvas { height: 180px; }
  .profile-readonly { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .topbar { min-height: 60px; gap: .55rem; padding: 0 .7rem; }
  .brand { display: flex; align-items: center; white-space: nowrap; font-size: .98rem; }
  .brand-mark { width: 24px; height: 24px; margin-right: .25rem; border-radius: 7px; }
  .topbar-actions { flex: 1 1 auto; justify-content: flex-end; gap: .5rem; min-width: 0; }
  .profile-link, .link-button { font-size: .78rem; white-space: nowrap; }
  .notification-popover { position: fixed; top: 68px; right: .5rem; left: auto; width: min(290px, calc(100vw - 1rem)); max-height: min(62svh, 420px); overflow-y: auto; border-radius: 12px; }
  .notification-heading, .notification-popover a, .notification-popover p { padding-right: .8rem; padding-left: .8rem; }
  .notification-popover a strong, .notification-popover a span { overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
  .profile-link { display: none; }
  .topbar-actions { gap: .4rem; }
  .link-button { font-size: .74rem; }
  .notification-popover { width: calc(100vw - 1rem); }
}

/* Dashboard workspace */
.dashboard-hero { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 224px; overflow: hidden; margin-bottom: 1rem; padding: clamp(1.5rem, 4vw, 2.4rem); border-radius: 20px; background: linear-gradient(120deg, #093b78 0%, #0969c7 52%, #1589dd 100%); color: #fff; box-shadow: 0 18px 36px rgba(16,91,177,.22); }
.dashboard-hero::before, .dashboard-hero::after { position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; content: ""; }.dashboard-hero::before { right: 8%; bottom: -150px; width: 340px; height: 340px; }.dashboard-hero::after { right: 24%; top: -120px; width: 230px; height: 230px; }
.dashboard-hero-copy { position: relative; z-index: 1; max-width: 620px; }.dashboard-kicker, .panel-kicker { display: block; color: #70d9b3; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }.dashboard-hero h1 { margin: .4rem 0 .3rem; color: #fff; font-size: clamp(2rem, 4vw, 2.65rem); }.dashboard-hero p { max-width: 520px; margin: 0; color: rgba(255,255,255,.8); font-size: 1rem; }.dashboard-hero .dashboard-actions { margin-top: 1.35rem; }.dashboard-create { box-shadow: 0 8px 18px rgba(0,0,0,.18); }.dashboard-create span { margin-right: .3rem; font-size: 1.1rem; }.button-hero-secondary { border: 1px solid rgba(255,255,255,.46); border-radius: 9px; padding: .7rem 1rem; color: #fff; font-weight: 800; text-decoration: none; }.dashboard-hero-orb { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 112px; height: 112px; margin-right: 4%; border: 1px solid rgba(255,255,255,.3); border-radius: 34px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transform: rotate(11deg); }.dashboard-hero-orb span { font-size: 4.3rem; font-weight: 900; transform: rotate(-11deg); }
.dashboard-notice { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid #b8dbfb; border-radius: 13px; background: #f4f9ff; }.dashboard-notice-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1577d4; color: #fff; font-weight: 900; }.dashboard-notice div { flex: 1; }.dashboard-notice p { margin: .08rem 0 0; color: var(--slate-600); font-size: .82rem; }.dashboard-notice a { color: var(--blue-700); font-size: .84rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }.dashboard-metric { display: flex; gap: .75rem; min-height: 132px; padding: 1rem; border: 1px solid var(--slate-200); border-radius: 15px; background: #fff; color: var(--slate-900); text-decoration: none; box-shadow: 0 8px 20px rgba(23,32,51,.045); transition: transform .18s, box-shadow .18s; }.dashboard-metric:hover { box-shadow: 0 13px 24px rgba(23,32,51,.1); transform: translateY(-2px); }.metric-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; font-weight: 900; }.dashboard-metric div { display: grid; align-content: start; }.dashboard-metric small { color: var(--slate-600); font-size: .75rem; }.dashboard-metric strong { margin: .15rem 0; font-size: 2rem; line-height: 1; }.dashboard-metric em { color: var(--blue-700); font-size: .72rem; font-style: normal; font-weight: 700; }.metric-blue .metric-icon { background: #e6f1ff; color: #1267bc; }.metric-slate .metric-icon { background: #edf1f5; color: #59697b; }.metric-amber .metric-icon { background: #fff4d8; color: #bb7900; }.metric-green .metric-icon { background: #e5f8ef; color: #168155; }
.dashboard-workspace { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); gap: 1rem; margin-bottom: 1rem; }.dashboard-panel, .dashboard-status-panel { padding: 1.2rem; }.dashboard-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }.dashboard-panel-head h2 { margin: .17rem 0 0; font-size: 1.2rem; }.dashboard-panel-head > a { color: var(--blue-700); font-size: .8rem; font-weight: 800; text-decoration: none; }.panel-kicker { color: var(--green-700); font-size: .66rem; }.dashboard-task { display: grid; grid-template-columns: 28px minmax(0,1fr) auto 16px; align-items: center; gap: .65rem; padding: .7rem 0; border-top: 1px solid var(--slate-200); color: var(--slate-900); text-decoration: none; }.dashboard-task:hover strong, .dashboard-recent-row:hover strong { color: var(--blue-700); }.task-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: var(--blue-100); color: var(--blue-700); font-size: .72rem; font-weight: 800; }.dashboard-task div, .dashboard-recent-row div { min-width: 0; }.dashboard-task strong, .dashboard-recent-row strong { display: block; font-size: .83rem; }.dashboard-task small, .dashboard-recent-row small { display: block; overflow: hidden; margin-top: .15rem; color: var(--slate-600); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.dashboard-task b { color: var(--blue-900); font-size: .82rem; white-space: nowrap; }.dashboard-task b small { display: inline; font-size: .65rem; }.task-arrow { color: var(--blue-700); }.dashboard-recent-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .75rem 0; border-top: 1px solid var(--slate-200); color: var(--slate-900); text-decoration: none; }.dashboard-status { flex: 0 0 auto; padding: .22rem .45rem; border-radius: 99px; background: #eef3f9; color: #4a627d; font-size: .66rem; font-weight: 700; white-space: nowrap; }.status-completed { background: #e4f7ed; color: #168155; }.status-rejected { background: #fff0f0; color: #ae3e3e; }.status-returned { background: #fff3e3; color: #b2650a; }.dashboard-empty { display: grid; place-items: center; gap: .25rem; min-height: 164px; color: var(--slate-600); text-align: center; }.dashboard-empty > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #e6f7ee; color: #178557; font-size: 1.25rem; font-weight: 900; }.dashboard-empty strong { color: var(--slate-900); font-size: .88rem; }.dashboard-empty small { font-size: .76rem; }
.dashboard-status-panel { margin-bottom: .9rem; }.dashboard-status-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .65rem; }.dashboard-status-card { display: grid; gap: .25rem; min-height: 94px; padding: .75rem; border: 1px solid var(--slate-200); border-top: 3px solid #94a3b8; border-radius: 11px; background: #fff; color: var(--slate-900); text-decoration: none; transition: transform .18s, box-shadow .18s; }.dashboard-status-card:hover { box-shadow: 0 9px 18px rgba(23,32,51,.09); transform: translateY(-2px); }.dashboard-status-card span { color:#385776; font-size: .68rem; font-weight:600; line-height: 1.35; }.dashboard-status-card strong { font-size: 1.35rem; }.dashboard-status-card i { color: var(--blue-700); font-size: .64rem; font-style: normal; font-weight: 700; }.dashboard-status-card.status-pending { border-top-color: #e2aa30; }.dashboard-status-card.status-payment { border-top-color: #3d89d9; }.dashboard-status-card.status-completed { border-top-color: #2e9a5a; }.dashboard-status-card.status-returned { border-top-color: #dd8333; }.dashboard-status-card.status-rejected { border-top-color: #c45b5b; }.dashboard-admin-links { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .9rem; padding: .25rem .1rem; color: var(--slate-600); font-size: .78rem; }.dashboard-admin-links span { color: var(--green-700); font-weight: 800; }.dashboard-admin-links a { color: var(--slate-600); text-decoration: none; }.dashboard-admin-links a:hover { color: var(--blue-700); }
.dashboard-status-grid-requester { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1000px) { .dashboard-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }.dashboard-status-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 700px) { .dashboard-hero { min-height: 0; }.dashboard-hero-orb { display: none; }.dashboard-workspace { grid-template-columns: 1fr; }.dashboard-status-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }.dashboard-notice { align-items: flex-start; flex-wrap: wrap; }.dashboard-notice a { width: 100%; margin-left: 34px; } }
@media (max-width: 480px) { .dashboard-hero { padding: 1.35rem; border-radius: 16px; }.dashboard-hero h1 { font-size: 1.85rem; }.dashboard-metrics { grid-template-columns: 1fr; }.dashboard-metric { min-height: 98px; }.dashboard-status-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.dashboard-task { grid-template-columns: 26px minmax(0,1fr) 14px; }.dashboard-task b { display: none; } }
.dashboard-hero .dashboard-create { background: #fff; color: #0d62b4; }.dashboard-hero .dashboard-create:hover { background: #edf7ff; }.button-hero-secondary:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.dashboard-admin-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.15rem; border: 1px solid #cde2fb; border-radius: 15px; background: linear-gradient(100deg, #f5faff, #fff); }.dashboard-admin-panel h2 { margin: .16rem 0; color: var(--blue-900); font-size: 1.08rem; }.dashboard-admin-panel p { margin: 0; color: var(--slate-600); font-size: .8rem; }.dashboard-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }.dashboard-admin-actions a { display: grid; gap: .12rem; min-width: 120px; padding: .55rem .7rem; border: 1px solid #d6e6f6; border-radius: 10px; background: #fff; color: var(--blue-800); text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s; }.dashboard-admin-actions a:hover { border-color: #6caee8; box-shadow: 0 6px 13px rgba(20,99,180,.1); transform: translateY(-1px); }.dashboard-admin-actions b { font-size: .78rem; }.dashboard-admin-actions small { color: var(--slate-600); font-size: .67rem; }
.dashboard-admin-actions a { border-width: 1.5px; box-shadow: 0 4px 10px rgba(23,72,126,.06); }.dashboard-admin-actions a:nth-child(1) { border-color: #7ab5ee; background: #f7fbff; }.dashboard-admin-actions a:nth-child(2) { border-color: #71cba6; background: #f7fdf9; }.dashboard-admin-actions a:nth-child(3) { border-color: #e1ab54; background: #fffaf1; }.dashboard-admin-actions a:hover { box-shadow: 0 8px 16px rgba(23,72,126,.14); transform: translateY(-2px); }
.dashboard-admin-actions a:nth-child(4) { border-color:#7b8797; background:linear-gradient(135deg,#f8fafc,#e9eef4); }.dashboard-admin-actions a:nth-child(4) b { color:#334155; }.dashboard-admin-actions a:nth-child(4) small { color:#64748b; }.dashboard-admin-actions a:nth-child(4):hover { border-color:#475569; box-shadow:0 8px 17px rgba(51,65,85,.18); }
@media (max-width: 850px) { .dashboard-admin-panel { align-items: flex-start; flex-direction: column; }.dashboard-admin-actions { justify-content: flex-start; width: 100%; }.dashboard-admin-actions a { flex: 1 1 145px; } }
.metric-amber .metric-icon, .metric-green .metric-icon { font-size: 0; }.metric-amber .metric-icon::after { content: "◷"; font-size: 1.2rem; }.metric-green .metric-icon::after { content: "✓"; font-size: 1.15rem; }
.maintenance-setting { margin: 1.2rem 0; border: 1px solid #f1c879; border-radius: 14px; background: linear-gradient(135deg, #fffaf0, #fffdf8); overflow: hidden; }.maintenance-setting .setting-row { margin: 0; border: 0; border-radius: 0; background: transparent; }.maintenance-toggle strong { color: #805207; }.maintenance-message-field { padding: .95rem 1.05rem 1.1rem; border-top: 1px solid #f7dfaf; }.maintenance-message-field input { background: #fff; }.maintenance-message-field small { display: block; }
.theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #b5c9df; border-radius: 50%; background: #f7faff; color: #315f8d; cursor: pointer; transition: transform .18s, background .18s, border-color .18s, color .18s; }.theme-toggle:hover { border-color: #94bce3; background: #edf6ff; color: var(--blue-700); transform: translateY(-1px); }.theme-toggle:focus-visible { outline: 3px solid rgba(35,129,229,.24); outline-offset: 2px; }.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.theme-icon-moon { display: none; }
html.dark-mode { --blue-900: #d9ebff; --blue-700: #66b4ff; --blue-100: #172d49; --green-700: #75d9ac; --green-100: #133d31; --slate-900: #ecf4ff; --slate-600: #aebed1; --slate-200: #2a405c; --slate-100: #0d1929; --white: #14243a; color-scheme: dark; }html.dark-mode body { background: #0d1929; }html.dark-mode .topbar { background: #101f34; }html.dark-mode .notification-trigger, html.dark-mode .theme-toggle { border-color: #314966; background: #192b43; color: #b9d6f4; }html.dark-mode .notification-trigger.topbar-icon-button svg { stroke: #b9d6f4; }html.dark-mode .notification-trigger:hover, html.dark-mode .notification-trigger[aria-expanded="true"], html.dark-mode .theme-toggle:hover { border-color: #5d94ca; background: #233d5c; color: #8dc7ff; }html.dark-mode .notification-trigger.topbar-icon-button:hover svg { stroke: #8dc7ff; }html.dark-mode .theme-icon-sun { display: none; }html.dark-mode .theme-icon-moon { display: block; }html.dark-mode .notification-popover, html.dark-mode .notification-heading, html.dark-mode .notification-popover a, html.dark-mode .toast, html.dark-mode .attachment-row, html.dark-mode .excess-selected-file, html.dark-mode .actual-summary-card div, html.dark-mode .status-card, html.dark-mode .dashboard-metric, html.dark-mode .dashboard-status-card { background: #172940; color: var(--slate-900); }html.dark-mode .notification-heading, html.dark-mode .notification-popover a, html.dark-mode .attachment-row, html.dark-mode .dashboard-task, html.dark-mode .dashboard-recent-row, html.dark-mode .claim-line, html.dark-mode .history-row { border-color: #2b425e; }html.dark-mode input, html.dark-mode textarea, html.dark-mode select, html.dark-mode .form-field input:not([type="checkbox"]), html.dark-mode .actual-total-field input, html.dark-mode .approval-action-card textarea, html.dark-mode .flow-node select { border-color: #3a5575; background: #102137; color: var(--slate-900); }html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: #7890aa; }html.dark-mode .button-secondary { background: #172940; }html.dark-mode .dashboard-notice, html.dark-mode .ad-panel, html.dark-mode .ad-login-option, html.dark-mode .flow-node { background: #142942; border-color: #315275; }html.dark-mode .maintenance-setting { background: linear-gradient(135deg,#342b1d,#24251f); border-color: #81682d; }html.dark-mode .maintenance-message-field { border-color: #5c4b25; }html.dark-mode .attachment-picker, html.dark-mode .excess-receipt-input { background: #13253a; border-color: #3b5d80; color: var(--slate-900); }html.dark-mode .login-panel { background: linear-gradient(155deg,#12243b,#0d1929); }html.dark-mode .login-mode.is-active { background: #203853; color: var(--slate-900); }html.dark-mode .login-mode-switch { background: #172d49; }html.dark-mode .confirm-dialog { background: #172940; }html.dark-mode .dashboard-admin-panel { background: linear-gradient(100deg,#152942,#132239); border-color: #315779; }html.dark-mode .dashboard-admin-actions a { background: #182b42 !important; border-color: #3c6289 !important; }html.dark-mode .setting-row { background: #14243a; border-color: #2b4562; }html.dark-mode .dashboard-empty > span { background: #163d31; }
html.dark-mode .attachment-item { border-color: #2d4b69; background: linear-gradient(110deg,#142a43,#172940); }
html.dark-mode .page-loading-card { border-color: #345473; background: linear-gradient(145deg,#172c45,#102137); }
.add-line, .telegram-test .button { min-height: 34px; padding: .38rem .7rem; border-radius: 8px; font-size: .8rem; }
@media (max-width: 560px) { .attachment-item { align-items: flex-start; flex-wrap: wrap; }.attachment-file-info { min-width: calc(100% - 46px); }.attachment-actions { width: 100%; padding-left: 42px; }.attachment-actions .button { flex: 1; text-align: center; } }
.theme-toggle.topbar-icon-button { width: 38px; height: 38px; border-radius: 12px; }
html.dark-mode .settings-retention-field { border-color: #315275; background: #142942; }.other-location-field { display: none; }.other-location-field.is-visible { display: grid; }
.form-field[hidden] { display: none !important; }

/* Read-only system monitor */
.monitor-hero { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding:1.35rem 1.5rem; border:1px solid #c9e1fb; border-radius:18px; background:radial-gradient(circle at right top,#d8f1ff 0,transparent 34%),linear-gradient(115deg,#f9fcff,#eef7ff); }.monitor-hero h1 { margin:.2rem 0; color:var(--blue-900); font-size:2rem; }.monitor-hero p { margin:0; color:var(--slate-600); }.monitor-readonly { min-width:165px; padding:.7rem .85rem; border:1px solid #b9d9f6; border-radius:12px; background:rgba(255,255,255,.75); color:var(--green-700); font-size:.82rem; font-weight:800; text-align:center; }.monitor-readonly small { display:block; margin-top:.12rem; color:var(--slate-600); font-size:.66rem; font-weight:500; }.monitor-filter-card { margin-bottom:1rem; padding:1rem 1.1rem; }.monitor-filters { display:grid; grid-template-columns:1.4fr 1fr 1fr auto; align-items:end; gap:.75rem; }.monitor-filters label { display:grid; gap:.32rem; color:var(--slate-900); font-size:.72rem; font-weight:800; }.monitor-filter-dates { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }.monitor-filter-actions { display:flex; gap:.5rem; }.monitor-filter-actions .button { min-height:42px; white-space:nowrap; font-size:.78rem; }.monitor-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:1rem; }.monitor-metric { display:flex; align-items:flex-start; gap:.7rem; min-height:114px; padding:1rem; border:1px solid var(--slate-200); border-radius:15px; background:var(--white); box-shadow:0 8px 20px rgba(23,32,51,.045); }.monitor-metric>span { display:grid; place-items:center; flex:0 0 auto; width:35px; height:35px; border-radius:11px; background:#e7f2ff; color:#1970c6; font-size:1rem; font-weight:900; }.monitor-metric div { min-width:0; }.monitor-metric small { display:block; color:var(--slate-600); font-size:.68rem; }.monitor-metric strong { display:block; overflow:hidden; margin:.18rem 0 .1rem; color:var(--blue-900); font-size:1.45rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }.monitor-metric em { color:var(--blue-700); font-size:.65rem; font-style:normal; font-weight:700; }.monitor-metric.metric-indigo>span { background:#eee9ff; color:#7956c9; }.monitor-metric.metric-green>span { background:#e4f7ed; color:#168155; }.monitor-metric.metric-amber>span { background:#fff3d7; color:#b97800; }.monitor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }.monitor-main-grid { grid-template-columns:minmax(0,1.25fr) minmax(350px,.75fr); }.monitor-bottom-grid { grid-template-columns:1.05fr .95fr 1.1fr; }.monitor-panel { min-width:0; padding:1.15rem; }.monitor-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem; margin-bottom:1rem; }.monitor-panel-head h2 { margin:.16rem 0 0; color:var(--blue-900); font-size:1.05rem; }.monitor-panel-head small { color:var(--slate-600); font-size:.67rem; text-align:right; }.monitor-panel-head>a { color:var(--blue-700); font-size:.68rem; font-weight:800; text-decoration:none; white-space:nowrap; }.monitor-bar-chart { display:flex; align-items:end; gap:3px; height:194px; padding:17px 0 0; border-bottom:1px solid var(--slate-200); background:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,#edf2f7 48px); }.monitor-bar-wrap { display:flex; align-items:flex-end; justify-content:center; position:relative; flex:1 1 0; height:100%; min-width:0; }.monitor-bar { display:flex; align-items:flex-start; justify-content:center; position:relative; width:min(18px,78%); min-height:3px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#37a0ec,#1769c2); transition:height .25s ease,filter .18s ease; cursor:default; }.monitor-bar:hover { filter:brightness(1.12); }.monitor-bar b { position:absolute; top:-18px; color:#54708c; font-size:.58rem; }.monitor-bar-wrap small { position:absolute; bottom:-18px; color:var(--slate-600); font-size:.54rem; white-space:nowrap; }.monitor-chart-note { margin:1.6rem 0 0; color:var(--slate-600); font-size:.67rem; }.monitor-status-chart { display:flex; align-items:center; gap:1.2rem; min-height:210px; }.monitor-donut { display:grid; place-items:center; flex:0 0 auto; width:145px; height:145px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(31,72,110,.05); }.monitor-donut>div { display:grid; place-content:center; width:91px; height:91px; border-radius:50%; background:var(--white); text-align:center; }.monitor-donut strong { color:var(--blue-900); font-size:1.45rem; }.monitor-donut small { color:var(--slate-600); font-size:.64rem; }.monitor-legend { display:grid; flex:1; gap:.38rem; }.monitor-legend>div,.monitor-queue-list>div { display:grid; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:.45rem; color:var(--slate-600); font-size:.69rem; }.monitor-legend i,.monitor-queue-list i { width:8px; height:8px; border-radius:50%; }.monitor-legend b,.monitor-queue-list b { color:var(--slate-900); font-size:.72rem; }.monitor-queue-list { display:grid; gap:.7rem; min-height:129px; }.monitor-queue-list>div { padding-bottom:.55rem; border-bottom:1px solid var(--slate-200); }.monitor-ranking { display:grid; gap:.7rem; margin:0; padding-left:1.35rem; }.monitor-ranking li { padding-left:.05rem; color:var(--blue-700); }.monitor-ranking li::marker { font-weight:800; }.monitor-ranking span { display:block; overflow:hidden; color:var(--slate-900); font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }.monitor-ranking b { display:block; margin-top:.12rem; color:var(--blue-700); font-size:.78rem; }.monitor-ranking b small { color:var(--slate-600); font-size:.61rem; font-weight:500; }.monitor-empty { align-self:center; color:var(--slate-600) !important; font-size:.73rem !important; list-style:none; text-align:center; }.monitor-health-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }.monitor-health-grid>div { display:grid; gap:.1rem; min-height:76px; padding:.7rem; border:1px solid #dce8f4; border-radius:10px; background:#f8fbff; }.monitor-health-grid strong { color:var(--blue-900); font-size:1.25rem; }.monitor-health-grid span { color:var(--slate-600); font-size:.62rem; line-height:1.4; }.monitor-health-grid .has-warning { border-color:#f1ca7f; background:#fffaf1; }.monitor-health-grid .has-warning strong { color:#b87508; }.monitor-system-state { display:grid; gap:.65rem; }.monitor-system-state>div { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.62rem 0; border-bottom:1px solid var(--slate-200); color:var(--slate-600); font-size:.72rem; }.monitor-system-state b { padding:.18rem .42rem; border-radius:99px; font-size:.63rem; }.monitor-system-state .is-on { background:#e2f6eb; color:#177c4e; }.monitor-system-state .is-off { background:#f0f2f5; color:#64748b; }.monitor-system-state .is-warning { background:#fff0d4; color:#a96305; }.monitor-activity { display:grid; gap:.6rem; }.monitor-activity>div { display:grid; grid-template-columns:10px minmax(0,1fr); gap:.55rem; }.monitor-activity i { width:8px; height:8px; margin-top:.38rem; border-radius:50%; background:#5ca4e4; box-shadow:0 0 0 3px #e5f2ff; }.monitor-activity p { display:grid; gap:.08rem; margin:0; }.monitor-activity strong { overflow:hidden; color:var(--slate-900); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }.monitor-activity span { color:var(--slate-600); font-size:.61rem; }
html.dark-mode .monitor-hero { border-color:#315779; background:radial-gradient(circle at right top,#1e4261 0,transparent 34%),linear-gradient(115deg,#132a43,#102138); }.dark-mode .monitor-readonly,.dark-mode .monitor-metric,.dark-mode .monitor-donut>div,.dark-mode .monitor-health-grid>div { border-color:#31506f; background:#142941; }.dark-mode .monitor-bar-chart { background:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,#263e5a 48px); }.dark-mode .monitor-system-state .is-off { background:#29394d; color:#b8c7da; }
@media (max-width:1000px) { .monitor-filters { grid-template-columns:1fr 1fr; }.monitor-filter-actions { justify-content:flex-start; }.monitor-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.monitor-grid,.monitor-bottom-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.monitor-main-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .monitor-hero { align-items:flex-start; flex-direction:column; }.monitor-readonly { width:100%; }.monitor-filters,.monitor-grid,.monitor-bottom-grid,.monitor-metrics { grid-template-columns:1fr; }.monitor-filter-dates { grid-template-columns:1fr; }.monitor-filter-actions .button { flex:1; }.monitor-status-chart { align-items:flex-start; flex-direction:column; }.monitor-donut { margin:auto; }.monitor-bar-chart { gap:2px; }.monitor-bar-wrap small { display:none; } }
.monitor-filters input,.monitor-filters select { width:100%; height:44px; padding:.5rem .8rem; border:1px solid #c9d9ea; border-radius:10px; outline:0; background:#f9fcff; color:var(--slate-900); font:inherit; font-size:.82rem; font-weight:600; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }.monitor-filters select { padding-right:2.5rem; background-color:#f9fcff; background-image:linear-gradient(45deg,transparent 50%,#3771a9 50%),linear-gradient(135deg,#3771a9 50%,transparent 50%); background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; appearance:none; }.monitor-filters input:hover,.monitor-filters select:hover { border-color:#91bee8; background-color:#fff; }.monitor-filters input:focus,.monitor-filters select:focus { border-color:#2183de; box-shadow:0 0 0 3px rgba(33,131,222,.14); background-color:#fff; }.dark-mode .monitor-filters input,.dark-mode .monitor-filters select { border-color:#3a5575; background-color:#102137; color:var(--slate-900); }.dark-mode .monitor-filters select { background-image:linear-gradient(45deg,transparent 50%,#9cc6f1 50%),linear-gradient(135deg,#9cc6f1 50%,transparent 50%); }.dark-mode .monitor-filters input:hover,.dark-mode .monitor-filters select:hover,.dark-mode .monitor-filters input:focus,.dark-mode .monitor-filters select:focus { background-color:#132a43; }
/* Keep admin shortcuts and monitor controls legible in the dark theme. */
html.dark-mode .dashboard-admin-actions a { color:#d9ebff; }
html.dark-mode .dashboard-admin-actions a b { color:#d9ebff !important; }
html.dark-mode .dashboard-status-card span { color:#c1d5eb; }
.audit-filters { display:grid; grid-template-columns:minmax(220px,1.55fr) repeat(2,minmax(145px,1fr)) repeat(2,minmax(126px,.8fr)); align-items:end; gap:.65rem; padding:1.05rem; border-color:#d5e3f0; background:linear-gradient(115deg,#f8fbff,#eef6ff); }.audit-filters .table-filter-field,.audit-filters .table-filter-search { min-width:0; }.audit-filters .table-filter-actions { grid-column:1 / -1; flex-wrap:nowrap; white-space:nowrap; }.audit-filters .table-filter-actions .button { min-height:38px; border-radius:9px; }.audit-filters .table-filter-field label { color:#55708d; font-size:.72rem; }.audit-filters .table-filter-field input,.audit-filters .table-filter-field select { border-color:#c5d8ea; background:#fff; }.audit-filters .table-filter-field input:hover,.audit-filters .table-filter-field select:hover { border-color:#82b7e5; }
html.dark-mode .audit-filters { border-color:#315271; background:radial-gradient(circle at right top,#1b3d5c 0,transparent 42%),linear-gradient(115deg,#132b44,#102137); }html.dark-mode .audit-filters .table-filter-field label { color:#a9bfd5; }html.dark-mode .audit-filters .table-filter-field input,html.dark-mode .audit-filters .table-filter-field select { border-color:#385b7d !important; background-color:#0e2035 !important; color:#ecf4ff !important; }html.dark-mode .audit-filters .table-filter-field input::placeholder { color:#7895b1; }html.dark-mode .audit-filters .table-filter-actions .button-secondary { border-color:#3a5e82; background:#19314b; color:#cfe4f8; }
.audit-search-select { position:relative; }.audit-search-select-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:38px; padding:.45rem .7rem .45rem .6rem; border:1px solid #c5d8ea; border-radius:8px; background:#fff; color:var(--slate-900); font:inherit; font-size:.86rem; text-align:left; cursor:pointer; }.audit-search-select-trigger::after { width:7px; height:7px; margin:0 .15rem .22rem .6rem; border-right:1.5px solid #356c9c; border-bottom:1.5px solid #356c9c; content:""; transform:rotate(45deg); }.audit-search-select-trigger:hover { border-color:#82b7e5; }.audit-search-select.is-open .audit-search-select-trigger { border-color:#2381e5; box-shadow:0 0 0 3px rgba(35,129,229,.12); }.audit-search-select.is-open .audit-search-select-trigger::after { margin-bottom:-.18rem; transform:rotate(225deg); }.audit-search-select-panel { position:absolute; z-index:30; top:calc(100% + .3rem); left:0; width:100%; min-width:210px; padding:.45rem; border:1px solid #b8d0e7; border-radius:9px; background:#fff; box-shadow:0 10px 22px rgba(28,71,111,.18); }.audit-select-search { width:100%; min-height:34px; padding:.35rem .5rem; border:1px solid #c5d8ea; border-radius:6px; background:#f8fbff; color:var(--slate-900); font:inherit; font-size:.8rem; }.audit-select-search:focus { outline:0; border-color:#2381e5; box-shadow:0 0 0 2px rgba(35,129,229,.12); }.audit-select-options { display:grid; max-height:210px; margin-top:.35rem; overflow-y:auto; }.audit-select-options button { width:100%; padding:.42rem .5rem; border:0; border-radius:5px; background:transparent; color:var(--slate-800); font:inherit; font-size:.82rem; text-align:left; cursor:pointer; }.audit-select-options button:hover,.audit-select-options button.is-selected { background:#e7f2ff; color:#155aa7; }.audit-select-empty { margin:.45rem .5rem; color:var(--slate-500); font-size:.78rem; }html.dark-mode .audit-search-select-trigger { border-color:#385b7d; background:#0e2035; color:#ecf4ff; }html.dark-mode .audit-search-select-trigger::after { border-color:#a9d2fa; }html.dark-mode .audit-search-select-panel { border-color:#385b7d; background:#10263d; box-shadow:0 10px 22px rgba(0,0,0,.35); }html.dark-mode .audit-select-search { border-color:#385b7d; background:#0b1c30; color:#ecf4ff; }html.dark-mode .audit-select-options button { color:#d8e9fa; }html.dark-mode .audit-select-options button:hover,html.dark-mode .audit-select-options button.is-selected { background:#1d456b; color:#fff; }html.dark-mode .audit-select-empty { color:#9db5cc; }
@media(max-width:1100px){.audit-filters{grid-template-columns:repeat(3,minmax(0,1fr));}}@media(max-width:700px){.audit-filters{grid-template-columns:1fr 1fr;}.audit-filters .table-filter-search{grid-column:1 / -1;}.audit-filters .table-filter-actions{grid-column:1 / -1;}.audit-filters .table-filter-actions .button{flex:1;}}

/* Runtime status shown to system administrators only. */
.monitor-web-health { display:grid; gap:.65rem; margin-top:1rem; padding:.8rem; border:1px solid #d9e9f7; border-radius:12px; background:linear-gradient(135deg,#f8fbff,#f1f8ff); }.monitor-web-health-head,.monitor-web-db { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }.monitor-web-health-head>span { color:#1970c6; font-size:.62rem; font-weight:900; letter-spacing:.08em; }.monitor-web-health-head>b,.monitor-web-db>b { display:inline-flex; align-items:center; gap:.28rem; padding:.16rem .4rem; border-radius:99px; font-size:.6rem; }.monitor-web-health-head .is-on,.monitor-web-db .is-on { background:#e2f6eb; color:#177c4e; }.monitor-web-health-head .is-off,.monitor-web-db .is-off { background:#f0f2f5; color:#64748b; }.monitor-web-health-head i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(23,124,78,.12); }.monitor-web-stat { display:grid; gap:.36rem; }.monitor-web-stat>div { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }.monitor-web-stat span,.monitor-web-db span,.monitor-web-stat small { color:var(--slate-600); font-size:.64rem; }.monitor-web-stat strong { color:var(--blue-900); font-size:.78rem; }.monitor-web-stat small { margin-left:auto; }.monitor-progress { height:6px; overflow:hidden; border-radius:99px; background:#dceaf7; }.monitor-progress i { display:block; height:100%; min-width:2px; border-radius:inherit; background:linear-gradient(90deg,#2c9ae0,#1769c2); }.monitor-progress.memory i { background:linear-gradient(90deg,#33b991,#188362); }.monitor-web-db { padding-top:.55rem; border-top:1px dashed #d4e2ef; }
html.dark-mode .monitor-web-health { border-color:#31506f; background:linear-gradient(135deg,#132b45,#11243a); }html.dark-mode .monitor-progress { background:#284461; }html.dark-mode .monitor-web-db { border-color:#34516e; }html.dark-mode .monitor-web-health-head .is-off,html.dark-mode .monitor-web-db .is-off { background:#29394d; color:#b8c7da; }
html.dark-mode .monitor-filter-card .monitor-filters select { appearance:none !important; -webkit-appearance:none !important; border-color:#3a5575 !important; background-color:#102137 !important; background-image:linear-gradient(45deg,transparent 50%,#9cc6f1 50%),linear-gradient(135deg,#9cc6f1 50%,transparent 50%) !important; background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px !important; background-size:5px 5px,5px 5px !important; background-repeat:no-repeat !important; color:#ecf4ff !important; color-scheme:dark; }
.telegram-setting-copy>div { display:flex; align-items:center; gap:.48rem; }.telegram-bot-button { display:inline-flex; align-items:center; gap:.3rem; min-height:28px; border:1px solid #91bee8; border-radius:7px; padding:.28rem .5rem; background:#f7fbff; color:#1970c6; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }.telegram-bot-button:hover { border-color:#4f9cdb; background:#eaf5ff; color:#0958aa; }.telegram-bot-button img { width:16px; height:16px; }.telegram-bot-dialog { width:min(430px,calc(100vw - 2rem)); padding:0; border:0; border-radius:20px; color:var(--slate-900); background:var(--white); box-shadow:0 26px 70px rgba(9,28,53,.28); }.telegram-bot-dialog::backdrop { background:rgba(9,25,46,.52); backdrop-filter:blur(3px); }.telegram-bot-dialog-content { display:grid; justify-items:center; gap:.68rem; position:relative; padding:1.55rem 1.4rem 1.45rem; text-align:center; }.telegram-bot-close { display:grid; place-items:center; position:absolute; top:.7rem; right:.7rem; width:30px; height:30px; border:0; border-radius:50%; background:#edf3f9; color:#55708d; font-size:1.25rem; line-height:1; cursor:pointer; }.telegram-bot-close:hover { background:#dcebf7; color:var(--blue-700); }.telegram-bot-icon { width:42px !important; height:42px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:transparent !important; }.telegram-bot-dialog .eyebrow { margin:0; color:#168155; }.telegram-bot-dialog h2 { margin:-.28rem 0 0; color:var(--blue-900); font-size:1.22rem; }.telegram-bot-dialog p { max-width:330px; margin:0; color:var(--slate-600); font-size:.8rem; line-height:1.55; }.telegram-bot-dialog img { width:min(255px,72vw); height:auto; margin:.05rem 0; padding:.45rem; border:1px solid #d8e5f2; border-radius:16px; background:#fff; }.telegram-bot-dialog .telegram-bot-icon { width:42px !important; height:42px !important; }.telegram-bot-handle { color:var(--blue-700); font-size:.82rem; }.telegram-bot-dialog .button { text-decoration:none; }
html.dark-mode .telegram-bot-dialog { background:#172940; }html.dark-mode .telegram-bot-close { background:#28435f; color:#b9d6f4; }html.dark-mode .telegram-bot-close:hover { background:#345779; color:#d9ebff; }html.dark-mode .telegram-bot-dialog img:not(.telegram-bot-icon) { border-color:#365472; }
html.dark-mode .dashboard-admin-actions a small { color:#aebed1 !important; }
html.dark-mode .monitor-filters input,
html.dark-mode .monitor-filters select { border-color:#3a5575; background-color:#102137 !important; color:#ecf4ff !important; color-scheme:dark; }
html.dark-mode .monitor-filters select { appearance:none !important; -webkit-appearance:none !important; forced-color-adjust:none; background-image:linear-gradient(45deg,transparent 50%,#9cc6f1 50%),linear-gradient(135deg,#9cc6f1 50%,transparent 50%) !important; }
html.dark-mode .monitor-filters select option { background:#102137 !important; color:#ecf4ff !important; }
html.dark-mode .monitor-filters input:hover,
html.dark-mode .monitor-filters select:hover,
html.dark-mode .monitor-filters input:focus,
html.dark-mode .monitor-filters select:focus { border-color:#5d94ca; background-color:#17304c !important; }
/* Match monitor filter arrows to the refined chevron used elsewhere. */
.monitor-filters select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23356c9c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-position:calc(100% - 13px) 50% !important; background-size:16px 16px !important; }
html.dark-mode .monitor-filters select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%239cc6f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
.monitor-search-select .audit-search-select-trigger { min-height:44px; border-color:#c9d9ea; border-radius:10px; background:#f9fcff; font-size:.82rem; font-weight:600; }.monitor-search-select .audit-search-select-trigger:hover { border-color:#91bee8; background:#fff; }.monitor-search-select.is-open .audit-search-select-trigger { border-color:#2183de; box-shadow:0 0 0 3px rgba(33,131,222,.14); }.monitor-search-select .audit-search-select-panel { min-width:230px; }.monitor-filters label:has(.monitor-search-select) { min-width:0; }html.dark-mode .monitor-search-select .audit-search-select-trigger { border-color:#3a5575; background:#102137; color:#ecf4ff; }html.dark-mode .monitor-search-select.is-open .audit-search-select-trigger { border-color:#5d94ca; background:#17304c; }
.monitor-queue-list .monitor-empty { display:grid; grid-column:1 / -1; grid-template-columns:none; place-items:center; min-height:106px; padding:.9rem; border:1px dashed #cddceb; border-radius:10px; background:#f8fbff; color:#53708e !important; font-size:.75rem !important; line-height:1.55; }.monitor-queue-list .monitor-empty::first-letter { color:#18855a; font-size:1rem; font-weight:800; }.dark-mode .monitor-queue-list .monitor-empty { border-color:#3b5c7d; background:#132940; color:#a9c2d9 !important; }
.claim-cancel-panel { margin-top:1.1rem; border:1px solid #f0c6c6; border-radius:11px; background:#fff9f9; }.claim-cancel-panel summary { padding:.75rem .9rem; color:#a33434; font-size:.78rem; font-weight:800; cursor:pointer; }.claim-cancel-panel>div { padding:.1rem .9rem .95rem; border-top:1px solid #f4dada; }.claim-cancel-panel p { margin:.6rem 0 .8rem; color:#7b5c5c; font-size:.72rem; line-height:1.6; }.refund-confirmation { display:flex; align-items:flex-start; gap:.45rem; margin-bottom:.8rem; color:#8b3939; font-size:.73rem; font-weight:700; }.refund-confirmation input { width:16px; height:16px; margin:.05rem 0 0; accent-color:#bd2d2d; }.claim-cancel-panel .form-field { margin-bottom:.75rem; }.dark-mode .claim-cancel-panel { border-color:#754448; background:#2c2024; }.dark-mode .claim-cancel-panel>div { border-color:#59383d; }.dark-mode .claim-cancel-panel p { color:#d8b8b8; }
.dashboard-status.status-cancelled { background:#e9eef3; color:#5f6f82; }.status-cancelled { border-top:3px solid #75869a; }.dashboard-status-card.status-cancelled { border-top-color:#75869a; }
html.dark-mode .topbar-actions .user-name { color:#d4e7fb; }html.dark-mode .profile-link,html.dark-mode .link-button { color:#9dd1ff; }html.dark-mode .signature-submit { background:#317fc8; color:#fff; }html.dark-mode .signature-submit:hover { background:#4594dd; }

/* Keep the claim visible while comparing an attached document. */
.attachment-preview-panel { position:fixed; inset:1rem 1rem 1rem auto; width:min(760px,58vw); height:calc(100dvh - 2rem); max-width:none; max-height:none; margin:0; padding:0; overflow:hidden; border:1px solid #cddcec; border-radius:16px; background:#fff; color:var(--slate-900); box-shadow:0 18px 56px rgba(16,35,61,.28); z-index:1000; }
.attachment-preview-panel[open] { display:flex; flex-direction:column; }
.attachment-preview-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border-bottom:1px solid #e1eaf3; }
.attachment-preview-header div { min-width:0; }
.attachment-preview-header small { color:var(--slate-600); font-size:.73rem; }
.attachment-preview-header h2 { overflow:hidden; margin:.15rem 0 0; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.attachment-preview-close { flex:0 0 auto; width:36px; height:36px; border:0; border-radius:9px; background:#eef4fb; color:var(--slate-900); font:inherit; font-size:1.5rem; line-height:1; cursor:pointer; }
.attachment-preview-close:hover { background:#dcecfb; }
.attachment-preview-content { display:grid; flex:1; min-height:0; overflow:auto; place-items:center; background:#f3f7fb; }
.attachment-preview-content img { max-width:100%; max-height:100%; object-fit:contain; }
.attachment-preview-content iframe { width:100%; height:100%; min-height:0; border:0; background:#fff; }
.attachment-preview-content [hidden] { display:none; }
html.dark-mode .attachment-preview-panel { border-color:#365472; background:#172940; }
html.dark-mode .attachment-preview-header { border-color:#365472; }
html.dark-mode .attachment-preview-close { background:#28435f; color:#d9ebff; }
html.dark-mode .attachment-preview-content { background:#102137; }
@media (max-width:700px) { .attachment-preview-panel { inset:.5rem; width:calc(100vw - 1rem); height:calc(100dvh - 1rem); } }
.budget-link { display:grid; place-items:center; border:1px solid #b5c9df; background:#f7faff; color:#315f8d; font-size:1.08rem; font-weight:800; line-height:1; text-decoration:none; transition:transform .18s,background .18s,border-color .18s,color .18s; }.budget-link:hover { border-color:#94bce3; background:#edf6ff; color:#1769c2; transform:translateY(-1px); }.budget-link:focus-visible { outline:3px solid rgba(35,129,229,.24); outline-offset:2px; }.budget-card { width:min(100%,620px); }.budget-card-heading { display:flex; align-items:center; gap:.8rem; margin-bottom:1.3rem; }.budget-card-heading h2 { margin:0 0 .15rem; }.budget-card-heading p,.budget-updated { margin:0; color:var(--slate-600); font-size:.8rem; }.budget-card-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:#e8f2ff; color:#1769c2; font-size:1.4rem; font-weight:900; }.budget-form .form-grid { margin-bottom:1rem; }.budget-updated { margin-top:1rem; }.dark-mode .budget-link { border-color:#314966; background:#192b43; color:#b9d6f4; }.dark-mode .budget-link:hover { border-color:#5d94ca; background:#233d5c; color:#8dc7ff; }.dark-mode .budget-card-icon { background:#183c61; color:#9dd1ff; }
.budget-form-actions,.budget-row-actions { display:flex; align-items:center; gap:.5rem; }.budget-form-actions .button { min-height:38px; padding:.45rem .72rem; font-size:.8rem; }.budget-list-card { width:min(100%,760px); margin-top:1rem; }.budget-list-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.35rem; }.budget-list-heading h2 { margin:0; }.budget-list-heading span { padding:.24rem .5rem; border-radius:99px; background:#eef4fa; color:#58718b; font-size:.72rem; font-weight:700; }.budget-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; border-top:1px solid var(--slate-200); }.budget-row>div:first-child { display:grid; gap:.16rem; min-width:0; }.budget-row strong { color:var(--slate-900); }.budget-row small,.budget-empty { color:var(--slate-600); font-size:.78rem; }.budget-row-actions form { margin:0; }.budget-row-actions .button { min-height:34px; padding:.36rem .58rem; font-size:.75rem; }.budget-empty { margin:1.1rem 0 .2rem; }.dark-mode .budget-list-heading span { background:#1c3855; color:#b7d2ec; }
.budget-period-help { margin:-.4rem 0 1rem; color:var(--slate-600); font-size:.78rem; }
.budget-annual-summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.9rem 0 .2rem; padding:.9rem 1rem; border:1px solid #cfe1f7; border-radius:12px; background:#f5faff; }
.budget-annual-summary div { display:grid; gap:.1rem; }
.budget-annual-summary small,.budget-annual-summary span { color:var(--slate-600); font-size:.76rem; }
.budget-annual-summary strong { color:#1769c2; font-size:1.12rem; }
.dark-mode .budget-annual-summary { border-color:#315779; background:#172d49; }
.dark-mode .budget-annual-summary strong { color:#8dc7ff; }
@media (max-width:600px) { .budget-annual-summary { align-items:flex-start; flex-direction:column; gap:.4rem; } }
.budget-card { width:min(100%,900px); }
.budget-form .form-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.85fr); gap:1rem; }
@media (max-width:700px) { .budget-form .form-grid { grid-template-columns:1fr; } }
.budget-card { width:min(100%,1080px); }
.budget-form .form-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.claim-line { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; }
.claim-line > .form-field:first-of-type { grid-column:span 2; }
.claim-line > .line-actions { justify-self:end; }
.budget-approval-list { display:grid; gap:.55rem; margin-top:1rem; }
.budget-approval-list > div { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.55rem .75rem; border:1px solid var(--slate-200); border-radius:10px; }
.budget-approval-list small { margin-left:auto; color:var(--slate-600); }
@media (max-width:700px) { .budget-form .form-grid,.claim-line { grid-template-columns:1fr; } .claim-line > .form-field:first-of-type { grid-column:auto; } .claim-line > .line-actions { justify-self:start; } }
.payment-slip-field[hidden] { display: none; }
.budget-row[hidden] { display: none; }
.master-editor { margin-bottom:.75rem; padding:1rem 1.25rem; }.master-editor summary { cursor:pointer; color:var(--blue-700); font-weight:700; }.master-editor[open] summary { margin-bottom:1rem; }
.master-table-card { width:100%; }.master-table-card>.form-field { max-width:480px; margin:1rem 0; }.master-table-scroll { max-height:490px; overflow:auto; border:1px solid var(--slate-200); border-radius:10px; }.master-table { width:100%; margin:0; }.master-table th { position:sticky; top:0; background:var(--white); z-index:1; white-space:nowrap; }.master-table td { padding:.6rem .8rem; }.master-table tr[hidden],.master-table-scroll>[hidden] { display:none; }.master-table .button-compact { min-height:30px; padding:.3rem .6rem; font-size:.75rem; }.master-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; color:var(--slate-600); font-size:.78rem; }.master-pager>div { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }.master-pager select { width:auto; padding:.35rem .5rem; border:1px solid var(--slate-200); border-radius:7px; font:inherit; }.master-pager button:disabled { opacity:.4; cursor:default; }
.searchable-select { position:relative; width:100%; min-width:0; }.searchable-select .searchable-native { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:0!important; opacity:0; clip-path:inset(50%); overflow:hidden; }
.searchable-trigger { position:relative; width:100%; min-height:52px; padding:.8rem 2.2rem .8rem .9rem; border:1px solid #cdd9e8; border-radius:11px; background:var(--white); color:var(--slate-900); font:inherit; text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.searchable-trigger::after { content:'⌄'; position:absolute; right:.85rem; }.searchable-trigger:focus-visible,.searchable-trigger[aria-expanded=true] { outline:2px solid #85bbf2; outline-offset:1px; }.searchable-trigger.is-placeholder { color:#8b9db5; }.searchable-trigger:disabled { opacity:.6; cursor:default; }
.searchable-panel { position:absolute; z-index:70; top:calc(100% + 5px); left:0; right:0; min-width:210px; padding:.5rem; border:1px solid #cdd9e8; border-radius:11px; background:var(--white); box-shadow:0 10px 28px rgba(25,55,90,.18); }.searchable-panel[hidden] { display:none; }.searchable-panel .searchable-query { width:100%; min-height:38px; padding:.5rem .65rem; font:inherit; font-size:.82rem; }.searchable-options { max-height:230px; overflow-y:auto; margin-top:.4rem; }.searchable-options button { display:block; width:100%; padding:.6rem .65rem; border:0; border-radius:6px; background:transparent; color:var(--slate-900); font:inherit; font-size:.82rem; text-align:left; cursor:pointer; }.searchable-options button:hover,.searchable-options button.is-highlighted { background:var(--blue-100); }.searchable-options button[aria-selected=true] { color:var(--blue-700); font-weight:700; }.searchable-empty { padding:.5rem; color:var(--slate-600); font-size:.8rem; }.dark-mode .searchable-trigger,.dark-mode .searchable-panel { background:#14243a; border-color:#3a5575; }
@media(max-width:600px) { .master-table th,.master-table td { font-size:.75rem; }.master-pager>div { gap:.4rem; }.searchable-panel { min-width:0; } }
.approval-check-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.exposure-reference { border:1px solid var(--slate-200); border-radius:12px; margin-top:.8rem; overflow:hidden; }.exposure-reference summary { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; padding:1rem; background:var(--blue-100); cursor:pointer; }.exposure-reference summary>span { flex:1; min-width:150px; color:var(--slate-600); font-size:.78rem; }.exposure-reference-body { padding:1rem; }.exposure-reference-body p { overflow-wrap:anywhere; }.dark-mode .exposure-reference summary { background:#142942; }
.date-calendar-days button:disabled { opacity:.3; cursor:not-allowed; }
.approval-check-heading h2 { margin:0 0 .4rem; }.approval-check-heading p { margin:0; font-size:.85rem; }
.approval-check-count { flex-shrink:0; padding:.35rem .75rem; border-radius:999px; color:#9a4c0b; background:#fff3dc; font-size:.78rem; font-weight:600; }.approval-check-count.is-complete { color:#08765a; background:#e7f7ef; }
.approval-check-note { margin:1rem 0; padding:.75rem 1rem; border-radius:10px; background:var(--blue-100); color:var(--slate-600); font-size:.8rem; }
.approval-check-list { padding:0; margin:0; list-style:none; display:grid; gap:.7rem; }
.approval-check-row { display:grid; grid-template-columns:minmax(150px,1fr) minmax(200px,2fr) auto; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--slate-200); border-radius:12px; }
.approval-check-user { display:grid; gap:.2rem; min-width:0; overflow-wrap:anywhere; }.approval-check-row small { color:var(--slate-600); font-size:.76rem; }.approval-check-issues>div { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.approval-check-badge { padding:.3rem .6rem; border-radius:7px; background:#fff3dc; color:#9a4c0b; font-size:.78rem; overflow-wrap:anywhere; }
.approval-check-empty { display:flex; align-items:center; gap:.85rem; padding:1rem; border:1px solid #bfe5d6; border-radius:12px; background:#f1fbf6; color:#08765a; }.approval-check-empty>span { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; background:#d9f3e6; font-size:1.2rem; }.approval-check-empty p { margin:.3rem 0 0; font-size:.82rem; }
.dark-mode .approval-check-note { background:#142942; }.dark-mode .approval-check-badge,.dark-mode .approval-check-count { color:#ffd79b; background:#47351c; }.dark-mode .approval-check-empty,.dark-mode .approval-check-count.is-complete { color:#91e2c2; background:#14372d; border-color:#27654e; }.dark-mode .approval-check-empty>span { background:#215240; }
@media(max-width:650px) { .approval-check-row { grid-template-columns:minmax(0,1fr); gap:.85rem; }.approval-check-row>.button { justify-self:start; }.approval-check-heading { gap:.7rem; } }