:root { --bg:#f4f5f7; --card:#fff; --line:#e3e5e8; --text:#1f2328; --muted:#6b7280; --accent:#1e6fd9; --ok:#1a9d5a; --warn:#d97706; --err:#dc2626; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); display:flex; min-height:100vh; }
#nav { width:190px; background:#1b2530; color:#cfd6de; display:flex; flex-direction:column; padding:14px 0 36px; position:sticky; top:0; height:100vh; box-sizing:border-box; }
#nav .brand { font-weight:700; color:#fff; font-size:18px; padding:6px 18px 16px; }
#nav a { color:#cfd6de; text-decoration:none; padding:9px 18px; }
#nav a:hover, #nav a.active { background:#2a3745; color:#fff; }
#app { flex:1; padding:22px 26px 48px; max-width:1500px; }
h1 { font-size:20px; margin:0 0 16px; }
h2 { font-size:15px; margin:18px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:14px; }
.grid { display:grid; gap:12px; }
.grid.kpi { grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); }
.kpi .card { padding:12px 14px; }
.kpi .n { font-size:26px; font-weight:700; }
.kpi .l { color:var(--muted); font-size:12px; }
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { text-align:start; padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; color:var(--muted); font-weight:600; background:#fafbfc; position:sticky; top:0; }
tr:hover td { background:#f8fafc; }
tr.row-active td { background:#ecfdf5; }
.tbl { border:1px solid var(--line); border-radius:8px; overflow:auto; max-height:75vh; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.toolbar .spacer { flex:1; }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid #cfd4da; border-radius:6px; background:#fff; }
input[type=checkbox] { width:auto; }
textarea { width:100%; min-height:120px; font-family: ui-monospace, Consolas, monospace; font-size:12px; }
button, .btn { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid #cfd4da; background:#fff; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.danger { color:var(--err); border-color:#f3b4b4; }
button.sm { padding:3px 8px; font-size:12px; }
button:disabled { opacity:.5; cursor:default; }
.badge { display:inline-block; padding:2px 7px; border-radius:10px; font-size:11px; font-weight:600; background:#e5e7eb; color:#374151; white-space:nowrap; }
.badge.ok { background:#dcfce7; color:#166534; } .badge.warn { background:#fef3c7; color:#92400e; } .badge.err { background:#fee2e2; color:#991b1b; } .badge.info { background:#dbeafe; color:#1e40af; }
.muted { color:var(--muted); } .mono { font-family: ui-monospace, Consolas, monospace; font-size:12px; }
.right { text-align:end; }
.hidden { display:none !important; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; z-index:50; }
.modal-box { background:#fff; border-radius:10px; padding:20px 22px; width:min(1000px, 100%); position:relative; }
.modal-close { position:absolute; inset-inline-end:10px; top:8px; border:none; background:none; font-size:22px; cursor:pointer; }
#toast { position:fixed; inset-inline-end:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:99; }
#toast div { background:#1f2328; color:#fff; padding:10px 14px; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.2); }
#toast div.err { background:var(--err); }
.form { display:grid; grid-template-columns: 260px 1fr; gap:10px 14px; align-items:start; }
.form label { padding-top:7px; font-size:13px; }
.form .help { grid-column:2; color:var(--muted); font-size:12px; margin-top:-6px; }
details.advanced { margin-top:18px; border-top:1px dashed var(--line); padding-top:10px; }
details.advanced summary { cursor:pointer; font-weight:600; color:var(--muted); }
details.advanced[open] summary { margin-bottom:8px; }
.form input[type=text], .form input[type=number], .form input[type=password], .form select { width:100%; max-width:560px; }
pre { background:#f6f8fa; border:1px solid var(--line); border-radius:6px; padding:10px; overflow:auto; font-size:12px; max-height:400px; }
.tree td.child { padding-inline-start:34px; color:#374151; }
.pager { display:flex; gap:8px; align-items:center; margin-top:10px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sug { position:absolute; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.12); max-height:260px; overflow:auto; z-index:20; width:520px; }
.sug div { padding:7px 10px; cursor:pointer; }
.sug div:hover { background:#f1f5f9; }
.rel { position:relative; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.tabs button { border:none; border-bottom:2px solid transparent; border-radius:0; background:none; padding:8px 12px; }
.tabs button.active { border-bottom-color:var(--accent); color:var(--accent); font-weight:600; }

/* language switcher in the sidebar */
#nav .nav-spacer { flex:1; }
#nav .nav-lang { padding:10px 18px 4px; display:flex; flex-direction:column; gap:4px; font-size:12px; color:#9aa5b1; }
#nav .nav-lang select { background:#2a3745; color:#fff; border-color:#3b4a5a; padding:5px 8px; }
/* RTL: mirror the few directional glyphs */
[dir=rtl] .tree td.child { direction:rtl; }
[dir=rtl] .mono, [dir=rtl] code, [dir=rtl] pre, [dir=rtl] textarea { direction:ltr; text-align:left; unicode-bidi:isolate; }

/* ---- user block in the sidebar */
#nav .nav-user { padding:10px 18px; border-top:1px solid #2a3745; font-size:12px; color:#cfd6de; }
#nav .nav-user-name { font-weight:600; color:#fff; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#nav .nav-user-role { color:#9aa5b1; margin-bottom:8px; }
#nav .nav-user-actions { display:flex; flex-wrap:wrap; gap:6px; }
#nav .nav-user-actions button { background:#2a3745; color:#fff; border-color:#3b4a5a; }
#nav .nav-user-actions button:hover { background:#354556; }

/* ---- login page */
.login { position:fixed; inset:0; background:linear-gradient(160deg, #1b2530 0%, #24303c 60%, #2f3b48 100%); display:flex; align-items:center; justify-content:center; padding:24px; z-index:60; }
.login-box { background:#fff; border-radius:12px; padding:30px 32px 26px; width:min(400px, 100%); box-shadow:0 20px 50px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:8px; }
.login-brand { font-weight:800; font-size:22px; color:var(--accent); letter-spacing:.5px; }
.login-box h1 { margin:6px 0 0; font-size:18px; }
.login-box p { margin:0 0 12px; }
.login-box label { font-size:12px; color:var(--muted); margin-top:6px; }
.login-box input { width:100%; padding:9px 10px; font-size:14px; }
.login-box button.primary { margin-top:14px; padding:10px; font-size:14px; font-weight:600; }
.login-error { background:#fee2e2; color:#991b1b; border-radius:6px; padding:8px 10px; font-size:13px; margin-top:6px; }
.login-lang { margin-top:14px; display:flex; justify-content:center; }
.login-lang select { font-size:12px; padding:4px 8px; }
/* viewer role: hide mutating controls */
body.readonly button.primary, body.readonly button.danger, body.readonly .toolbar button:not(.sm):not([onclick*="Filter"]):not([onclick*="route"]), body.readonly .tbl button.sm { display:none; }

.about-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0; }

#footer { position:fixed; left:0; right:0; bottom:0; z-index:70; background:#1b2530; color:#cfd6de; border-top:1px solid #2a3745;
  padding:6px 18px; font-size:11px; line-height:1.5; text-align:center; }
#footer .footer-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#footer a { color:#fff; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .muted { color:#9aa6b2; }
#footer .footer-name { color:#e6ebf0; }
#footer .footer-sep { margin:0 6px; }
@media (max-width: 720px) { #footer .footer-line { white-space:normal; } #app { padding-bottom:70px; } }

.about-card { max-width: 640px; }
.about-card h1 { margin-bottom: 4px; }
.about-card .ver { color: var(--muted); margin-bottom: 18px; }
.about-card .about-grid { grid-template-columns: max-content 1fr; }
.about-card .copy { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }