:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #182230;
  background: #f5f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  --brand: #246b59;
  --muted: #778493;
  --line: #e8edf2;
  --panel: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f5f7fb; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; width: 246px; display: flex; flex-direction: column; padding: 22px 14px; background: #fff; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 9px 30px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 22px; font-weight: 800; }
.brand-logo { display:block; flex:0 1 170px; width:min(170px,48vw); height:44px; object-fit:contain; object-position:left center; }
.brand b { display: block; font-size: 17px; letter-spacing: -.4px; }
.brand small { display: block; margin-top: 3px; color: #829087; font-size: 8px; letter-spacing: 1.5px; }
.nav-label, .eyebrow { color: #87938f; font-size: 10px; font-weight: 700; letter-spacing: 1.15px; }
.nav-label { padding: 0 12px 10px; }
.nav-label.spaced { margin-top: 24px; }
.nav-item { display: flex; align-items: center; gap: 12px; margin: 2px 0; padding: 11px 12px; border-radius: 8px; color: #687587; font-size: 13px; transition: background .15s, color .15s; }
.nav-item:hover, .nav-item.active { color: var(--brand); background: #edf4f1; }
.nav-item.active { font-weight: 600; }
.nav-item.muted { color: #8b96a4; }
.sidebar-bottom { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 16px 5px 0; border-top: 1px solid #edf0f3; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e6f0ec; color: var(--brand); font-weight: 700; }
.profile { flex: 1; min-width: 0; }
.profile b, .profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile b { font-size: 11px; }
.profile small { margin-top: 3px; color: #8793a0; font-size: 9px; }
.logout, .text-button { border: 0; background: none; color: #778492; cursor: pointer; }
.logout { padding: 7px; font-size: 17px; }
.logout:hover, .text-button:hover { color: var(--brand); }
.main { max-width: 1600px; margin-left: 246px; padding: 31px 38px 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 27px; }
.topbar h1 { margin: 6px 0 0; font-size: 25px; letter-spacing: -.7px; }
.live, .date-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #e5eaf0; border-radius: 20px; background: #fff; color: #536273; font-size: 11px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #41a77d; }
.welcome-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; }
.welcome-row h2 { margin: 0 0 5px; font-size: 17px; }
.welcome-row p, .panel-head p { margin: 0; color: #84909e; font-size: 11px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.stat-card, .panel { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.stat-card { display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: 10px; padding: 16px; }
.stat-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
.green { background: #eaf4ee; color: #32805d; }
.blue { background: #edf2fb; color: #5876b2; }
.amber { background: #fff5e6; color: #b9852d; }
.violet { background: #f2edfb; color: #8064ad; }
.stat-label { color: #768393; font-size: 11px; }
.stat-card strong { grid-column: 2; margin: 4px 0 0; font-size: 23px; }
.stat-card small { grid-column: 2; margin-top: 2px; color: #99a3af; font-size: 9px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr); gap: 16px; }
.panel { margin-top: 16px; padding: 18px 18px 10px; }
.content-grid .panel { margin-top: 0; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.panel-head h3 { margin: 0 0 5px; font-size: 14px; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 10px 13px; border: 0; border-radius: 7px; background: var(--brand); color: #fff; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s; }
.primary:hover { transform: translateY(-1px); background: #1d594a; }
.primary.small { min-height: 32px; padding: 8px 11px; }
.secondary { background: #f0f3f6; color: #526070; }
.secondary:hover { background: #e5eaee; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { padding: 11px 8px; border-bottom: 1px solid #edf0f3; color: #9aa4af; font-size: 9px; font-weight: 600; letter-spacing: .5px; }
td { padding: 12px 8px; border-bottom: 1px solid #f0f2f5; color: #687587; font-size: 11px; }
td b { color: #364252; font-weight: 600; }
.badge { padding: 4px 8px; border-radius: 20px; font-size: 9px; }
.badge.success { background: #eaf4ee; color: #37815f; }
.badge.neutral { background: #f0f2f5; color: #7a8490; }
.text-button { padding: 4px; font-size: 10px; }
.empty { padding: 27px; color: #98a2ae; text-align: center; }
.upload-panel { align-self: start; }
.form-stack { display: grid; gap: 13px; }
.form-stack label { display: grid; gap: 6px; color: #5c6877; font-size: 11px; font-weight: 600; }
.form-stack label small { display: inline; color: #96a1ac; font-weight: 400; }
.form-stack input, .form-stack select, .form-stack textarea, .reply-form input, .inline-form input { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #dfe5eb; border-radius: 7px; outline: none; background: #fff; color: #344151; font-family: inherit; font-size: 12px; }
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus, .reply-form input:focus { border-color: #76a796; box-shadow: 0 0 0 3px #246b5914; }
.form-stack input[type=file] { padding: 7px; font-size: 10px; }
.form-stack textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compact { gap: 12px; }
.auth-wrap { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.auth-card { width: min(100%, 460px); padding: 42px; border: 1px solid #e7ecf1; border-radius: 20px; background: #fff; box-shadow: 0 22px 70px #172b3d0c; }
.auth-brand { justify-content:center; width:100%; margin-bottom:30px; padding:0; }
.auth-brand .brand-logo { flex:0 1 180px; width:min(100%,180px); height:56px; object-position:center; }
.auth-card h1 { margin: 8px 0; font-size: 24px; letter-spacing: -.6px; }
.muted-text { margin: 0 0 23px; color: #788595; font-size: 12px; line-height: 1.7; }
.auth-card .form-stack { gap: 16px; }
.auth-card .primary { margin-top: 3px; padding: 12px; }
.security-note { margin: 18px 0 0; color: #9aa4af; font-size: 10px; text-align: center; }
dialog { width: min(100% - 30px, 520px); max-height: calc(100vh - 36px); overflow: auto; padding: 25px; border: 1px solid #e4e9ef; border-radius: 14px; background: #fff; color: #182230; box-shadow: 0 25px 90px #12202b30; }
dialog::backdrop { background: #101b2b66; backdrop-filter: blur(2px); }
dialog h2 { margin: 8px 0 22px; font-size: 19px; }
.dialog-close { position: absolute; top: 14px; right: 17px; }
.dialog-close button { border: 0; background: none; color: #84909e; font-size: 25px; cursor: pointer; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.wide-dialog { max-width: 760px; }
.item-table { min-width: 600px; }
.item-table input { width: 100%; padding: 8px !important; }
.request-card { padding: 12px 0; border-top: 1px solid #edf0f3; }
.request-card h4 { margin: 8px 0 4px; font-size: 12px; }
.request-card p { margin: 0; color: #758293; font-size: 11px; line-height: 1.5; }
.reply-form { display: flex; gap: 8px; margin-top: 11px; }
.inline-form { display: flex; align-items: center; gap: 6px; }
.inline-form select { max-width: 150px; padding: 6px; border: 1px solid #dfe5eb; border-radius: 6px; color: #526070; font-size: 10px; }
.inline-form input { max-width: 140px; padding: 6px; font-size: 10px; }
.document-panel { margin-top: 16px; }
.error-wrap { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
.error-code { color: var(--brand); font-size: 56px; font-weight: 800; }
.error-wrap h1 { margin: 0 0 20px; font-size: 18px; font-weight: 500; }
.link-button { display: inline-flex; }
.mobile-menu { display: none; }
.language-form { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:20px 8px 0; color:#798697; font-size:11px; }
.language-form select { max-width:145px; padding:8px; border:1px solid var(--line); border-radius:7px; background:#fff; color:#344151; }
.check-row { display:flex !important; grid-template-columns:22px 1fr; align-items:center; cursor:pointer; }
.check-row input { width:18px !important; height:18px; accent-color:var(--brand); }
[data-client-fields] { display:grid; gap:12px; padding:14px; border:1px solid #e7ecef; border-radius:10px; background:#f8faf9; }
[data-client-fields][hidden] { display:none; }
.form-hint { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.form-alert,.status-alert { margin:12px 0; padding:12px 14px; border:1px solid #f0c7c3; border-radius:10px; background:#fff3f1; color:#9b3025; font-size:13px; line-height:1.5; }
.status-alert { border-color:#bfe2ce; background:#eff9f3; color:#246746; }
.badge.blue { background:#edf2fb; color:#5876b2; }
.navigation { display:flex; flex-direction:column; align-items:stretch; }
img, svg, video, canvas { max-width:100%; }
input, select, textarea, button { max-width:100%; }
dialog { overscroll-behavior:contain; }
dialog form, .panel, .content-grid, .main { min-width:0; }
.table-wrap { max-width:100%; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.table-wrap:has(table) { scrollbar-width:thin; scrollbar-color:#c9d3db transparent; }
select, input, textarea { min-height:40px; }
button { min-height:38px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid #246b5940; outline-offset:2px; }

@media (max-width: 1100px) {
  .main { padding: 27px 24px; }
  .sidebar { width: 220px; }
  .main { margin-left: 220px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { min-width:320px; overflow-x:hidden; }
  .shell { display:block; }
  .sidebar { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto; align-items:center; width:100%; height:auto; padding:10px max(12px,env(safe-area-inset-left)); border-right:0; border-bottom:1px solid var(--line); }
  .brand { padding:0; }
  .brand-mark { width:35px; height:35px; flex-basis:35px; }
  .brand-logo { width:min(150px,52vw); height:38px; flex-basis:150px; }
  .mobile-menu { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#455365; }
  .navigation { display:none; grid-column:1 / -1; padding-top:10px; }
  .navigation.is-open { display:flex; }
  .sidebar .nav-label { display:block; padding:10px 10px 5px; }
  .sidebar .nav-item { display:flex; margin:1px 0; padding:10px; }
  .sidebar-bottom { display:none; }
  .language-form { margin:12px 8px 4px; }
  .main { width:100%; margin:0; padding:18px 12px calc(24px + env(safe-area-inset-bottom)); }
  .topbar { align-items:flex-start; margin-bottom:18px; }
  .topbar h1 { font-size: 22px; }
  .live { padding: 9px; font-size: 0; }
  .live i { width: 8px; height: 8px; }
  .welcome-row { align-items: flex-start; }
  .date-pill { padding: 7px 9px; font-size: 9px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .stat-card { column-gap: 7px; padding: 12px 10px; }
  .stat-card strong { font-size: 20px; }
  .stat-label { font-size: 10px; }
  .content-grid { gap: 12px; }
  .panel { padding: 15px 12px 8px; }
  .panel-head h3 { font-size: 13px; }
  .panel-head p { font-size: 10px; }
  .panel-head .primary { font-size: 10px; }
  .form-row { grid-template-columns:1fr; gap:9px; }
  .panel-head { flex-wrap:wrap; }
  .panel-head > div { min-width:0; }
  dialog { width:calc(100% - 20px); max-width:none; max-height:calc(100dvh - 20px); padding:22px 15px 16px; border-radius:12px; }
  .dialog-actions { flex-direction:column-reverse; }
  .dialog-actions > button { width:100%; min-height:44px; }
  .auth-wrap { padding:12px; }
  .auth-card { padding:32px 22px; border-radius:16px; }
  .auth-brand { margin-bottom:24px; }
  .auth-brand .brand-logo { flex-basis:150px; width:min(100%,150px); height:48px; }
  .table-wrap { margin:0 -4px; }
  .table-wrap table { min-width:600px; }
  .item-table { min-width:580px !important; }
  .reply-form { align-items:stretch; flex-direction:column; }
  .reply-form button { min-height:42px; }
  button, .nav-item, select { touch-action:manipulation; }
}
@media(max-width:380px){.main{padding-right:9px;padding-left:9px}.stats-grid{grid-template-columns:1fr}.stat-card{grid-template-columns:36px 1fr}.topbar h1{font-size:20px}.date-pill{max-width:105px}.panel{padding-right:10px;padding-left:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ESoft app shell refresh */
:root { --brand:#1260bd; --brand-dark:#0b4b9b; --sidebar:#14243a; --sidebar-muted:#a8b6c9; --line:#e6ebf1; }
.sidebar { width:264px; padding:22px 16px 16px; background:var(--sidebar); border-right:0; color:#f5f8fc; box-shadow:5px 0 24px #12253a0d; }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin:0 2px 25px; padding:10px; border:1px solid #ffffff18; border-radius:14px; background:#ffffff0c; }
.brand-logo { width:100%; height:66px; flex:0 0 66px; padding:5px 12px; border-radius:9px; background:#fff; object-fit:contain; object-position:center; }
.brand-subtitle, .brand small { margin:0 2px; color:#aebbd0; font-size:9px; font-weight:700; letter-spacing:1.4px; }
.navigation { flex:1; min-height:0; }
.nav-label, .eyebrow { color:#8ea0b8; }
.nav-label { padding:10px 12px 8px; }
.nav-label-spaced { margin-top:18px; }
.nav-item { min-height:43px; margin:3px 0; padding:10px 12px; border:1px solid transparent; color:var(--sidebar-muted); border-radius:9px; }
.nav-item:hover { color:#fff; background:#ffffff10; }
.nav-item.active { color:#fff; background:#246cc21f; border-color:#4b90e244; box-shadow:inset 3px 0 #5da5f6; }
.nav-item:active { transform:translateY(1px); }
.nav-icon { display:inline-grid; place-items:center; width:22px; color:#90a5c0; font-size:15px; }
.nav-item.active .nav-icon { color:#8fc3ff; }
.language-form { display:grid; gap:8px; margin:auto 3px 15px; padding:13px; border:1px solid #ffffff20; border-radius:11px; background:#ffffff0a; color:#d9e3f0; font-size:11px; }
.language-form label { display:flex; align-items:center; gap:8px; color:#d4deeb; font-size:11px; font-weight:600; }
.language-icon { color:#8fc3ff; font-size:17px; }
.language-form select { width:100%; max-width:none; min-height:40px; padding:8px 10px; border:1px solid #ffffff24; border-radius:8px; background:#1d304a; color:#f4f7fb; font-size:12px; }
.sidebar-bottom { margin-top:0; padding:13px 4px 0; border-top-color:#ffffff20; }
.avatar { flex:0 0 34px; width:34px; height:34px; background:#244d79; color:#d8eaff; }
.profile b { color:#f5f8fc; }
.profile small { color:#9eafc5; }
.logout { color:#c3d0df; }
.main { max-width:none; margin-left:264px; padding:32px clamp(20px,3vw,48px) 52px; }
.topbar { padding-bottom:19px; border-bottom:1px solid #e9edf2; }
.topbar h1 { color:#15263b; font-size:27px; letter-spacing:-.8px; }
.eyebrow { color:#75859a; }
.live { border-color:#dce6f0; color:#56687d; }
.live i { background:#39a978; box-shadow:0 0 0 4px #39a9781a; }
.panel, .stat-card { border-color:#e5ebf1; border-radius:14px; box-shadow:0 5px 18px #1e3b5908; }
.primary { background:#1766bd; }
.primary:hover { background:#0e54a2; }
.nav-item:focus-visible { outline-color:#8fc3ff; }
@media(max-width:1100px){.sidebar{width:238px}.main{margin-left:238px}}
@media(max-width:760px){
  .sidebar { position:sticky; display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; padding:9px 12px; background:var(--sidebar); }
  .brand { flex-direction:row; align-items:center; width:max-content; max-width:60vw; margin:0; padding:4px 7px; border:0; background:transparent; }
  .brand-logo { width:138px; max-width:48vw; height:38px; flex:0 1 138px; padding:3px 7px; }
  .brand-subtitle { display:none; }
  .mobile-menu { border-color:#ffffff2b; background:#ffffff10; color:#f5f8fc; }
  .navigation { grid-column:1/-1; flex:initial; max-height:min(72dvh,620px); overflow-y:auto; padding:8px 3px 3px; }
  .navigation.is-open { display:flex; }
  .sidebar .nav-label { color:#91a5bf; }
  .sidebar .nav-item { color:#c2cede; }
  .sidebar .nav-item.active { color:#fff; }
  .language-form { margin:14px 5px 5px; padding:12px; }
  .sidebar-bottom { display:none; }
  .main { margin:0; padding:18px 12px calc(24px + env(safe-area-inset-bottom)); }
}
