/* Figma jZfN7HQLJyOWJIajDsYPTE: native Django components and real state. */
:root { --sidebar-width:224px; --simple-soft:#e6f4ef; }
.app-page .sidebar { padding:20px; gap:0; background:var(--nav); }
.app-page .sidebar .brand { padding:0; gap:10px; font-size:14px; line-height:22px; }
.app-page .brand small { font-size:14px; line-height:22px; margin:0; color:#fff; }
.figma-brand-mark { display:grid; place-items:center; width:28px; height:32px; flex:none; }
.figma-brand-mark img { max-width:none; }
.figma-icon { display:grid; place-items:center; width:20px; height:20px; flex:none; }
.figma-icon img { max-width:none; }
.app-page .sidebar .side-nav { margin-top:48px; padding:0; flex:1; }
.app-page .side-nav .nav-group { gap:12px; }
.app-page .side-nav .nav-link { min-height:46px; border:0; padding:12px; gap:12px; border-radius:8px; box-shadow:none; color:var(--nav-text); }
.app-page .side-nav .nav-link strong { font-size:14px; line-height:22px; font-weight:600; }
.app-page .sidebar .side-nav .nav-link[aria-current="page"], .app-page .settings-link[aria-current="page"] { background:var(--nav-active); color:#fff; box-shadow:none; }
.app-page .sidebar-bottom { padding:0; border:0; }
.app-page .settings-link { display:flex; align-items:center; min-height:46px; padding:12px; gap:12px; margin-bottom:20px; color:var(--nav-text); border-radius:8px; }
.app-page .account-row { padding:12px; border:1px solid #526d73; border-radius:16px; background:var(--nav-active); display:block; }
.app-page .account-row .operator { color:#fff; }
.app-page .operator-name { font-size:14px; max-width:100%; }
.app-page .operator-name small { color:var(--nav-text); font-size:12px; }
.app-page .avatar { display:none; }
.app-page .logout { margin:8px 0 0; }
.app-page .logout button { min-height:32px; font-size:12px; color:var(--nav-text); }
.app-page .nav-search { display:none; }
.app-page .topbar { height:64px; padding:16px 40px; }
.app-page .breadcrumb { color:var(--muted); }
.app-page .breadcrumb a,.app-page .breadcrumb [aria-current="page"] { color:var(--muted); }
.app-page .header-right { gap:16px; }
.app-page .header-journal { font-size:12px; color:var(--muted); }
.app-page .badge { border-radius:8px; font-weight:500; padding:8px; }
.app-page .dashboard { padding:32px 40px 40px; }
.app-page .page-heading h1 { line-height:40px; letter-spacing:-.4px; }
.simple-page { display:grid; gap:24px; }
.simple-page .page-heading,.simple-page .panel,.simple-page .metrics,.simple-page .observation { margin:0; }
.simple-page .panel { border-radius:16px; }
.simple-page .panel-body { padding:24px; }
.simple-card { min-width:0; border:1px solid var(--line); background:#fff; border-radius:16px; padding:24px; }
.simple-card > * + * { margin-top:16px; }
.simple-card h2,.simple-card h3 { font-weight:700; }
.simple-soft { background:var(--simple-soft); }
.simple-note { background:var(--bg); padding:16px; border:1px solid var(--line); border-radius:16px; color:var(--muted); }
.simple-note strong { color:var(--ink); }
.simple-note p+ p { margin-top:8px; }
.simple-columns { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:24px; align-items:start; }
.simple-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.simple-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.simple-metrics article { border:1px solid var(--line); background:white; border-radius:16px; padding:24px; display:grid; gap:8px; min-width:0; }
.simple-metrics span { font-size:12px; color:var(--muted); }
.simple-metrics strong { font-size:44px; line-height:56px; font-weight:700; letter-spacing:-1px; }
.simple-metrics small { font-size:12px; }
.simple-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.simple-mode { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:20px; display:grid; gap:12px; }
.simple-mode-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.simple-mode-head strong { font-size:18px; }
.simple-mode-head b { font-size:24px; font-weight:700; }
.simple-link { color:var(--accent); font-weight:600; min-height:44px; display:inline-flex; align-items:center; }
.simple-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.simple-heading .secondary { font-size:12px; }
.simple-facts { margin:0; display:grid; gap:12px; }
.simple-facts div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.simple-facts dt { color:var(--muted); }
.simple-facts dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.simple-facts strong { font-weight:600; }
.simple-table { font-size:14px; table-layout:fixed; }
.simple-table th { font-size:12px; background:var(--bg); padding:12px 20px; white-space:normal; }
.simple-table td { padding:16px 20px; overflow-wrap:anywhere; }
.simple-table td small { font-size:12px; }
.simple-table th:first-child { width:30%; }
.simple-table th:nth-child(2) { width:17%; }
.simple-table th:nth-child(3) { width:29%; }
.simple-table th:nth-child(4) { width:24%; }
.simple-table a strong { font-weight:600; }
.simple-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.simple-toolbar .search-form { margin:0; }
.simple-toolbar .search-form input { width:260px; }
.simple-chips { display:flex; flex-wrap:wrap; gap:8px; }
.simple-chip { min-height:44px; padding:10px 12px; font-size:12px; border:1px solid var(--line); border-radius:8px; background:transparent; }
.simple-chip[aria-pressed="true"] { color:var(--accent); background:var(--simple-soft); border-color:var(--simple-soft); }
.simple-steps { margin:0; padding:0; list-style:none; display:flex; gap:32px; font-size:14px; color:var(--muted); }
.simple-steps li { display:flex; gap:12px; align-items:center; }
.simple-steps span { font-size:12px; padding:8px; border-radius:8px; }
.simple-steps [aria-current="step"] { color:var(--accent); font-weight:600; }
.simple-steps [aria-current="step"] span { background:var(--simple-soft); }
.setup-form { padding:0; display:grid; gap:24px; }
.setup-fields { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.setup-fields > div { min-width:0; }
.setup-form label { display:block; font-size:12px; margin:0 0 8px; }
.setup-form p.help { color:var(--muted); font-size:12px; margin-top:8px; }
.setup-form details { margin-top:16px; }
.setup-form details summary { color:var(--muted); min-height:44px; display:flex; align-items:center; }
.setup-form details > .setup-fields { padding-top:16px; }
.setup-mode-choices { display:grid; grid-template-columns:1fr 1fr; gap:24px; border:0; margin:0; padding:0; }
.setup-mode-choices legend { font-size:24px; font-weight:700; margin-bottom:16px; }
.setup-choice { display:grid!important; gap:8px; position:relative; border:1px solid var(--line); border-radius:16px; background:#fff; padding:20px; min-width:0; font-size:14px!important; margin:0!important; cursor:pointer; }
.setup-choice:has(input:checked) { border-color:var(--accent); background:var(--simple-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.setup-choice:has(input:focus-visible) { outline:3px solid #53bcae; outline-offset:3px; }
.setup-choice input[type=radio] { position:absolute; right:20px; top:23px; width:18px; height:18px; min-height:18px; padding:0; border:0; background:none; accent-color:var(--accent); }
.setup-choice strong { font-size:18px; line-height:26px; padding-right:24px; }
.setup-choice small { font-size:12px; overflow-wrap:anywhere; }
.setup-choice > span { color:var(--muted); }
.setup-choice:has(input:disabled) { color:var(--muted); background:var(--bg); cursor:not-allowed; }
.setup-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; border:0; padding:0; margin:16px 0; }
.setup-choice-grid legend { margin-bottom:16px; font-weight:700; font-size:18px; }
.setup-actions { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.setup-status-heading { display:flex; align-items:center; gap:12px; }
.simple-progress { width:10px; height:10px; background:var(--accent); border-radius:50%; flex:none; }
.policy-card { display:flex; flex-direction:column; gap:16px; padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; min-width:0; }
.policy-card h2 { font-size:24px; line-height:32px; }
.policy-card > p { color:var(--muted); }
.policy-card .secondary { margin-top:auto; width:100%; }
.policy-rule-list { display:grid; gap:0; list-style:none; margin:16px 0; padding:0; }
.policy-rule { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:64px; padding:12px 0; }
.policy-rule + .policy-rule { border-top:1px solid var(--line); }
.policy-rule small { display:block; }
.policy-order { font-size:12px; color:var(--muted); }
.policy-version { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.policy-advanced { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
.simple-settings-list { margin:0; padding:0; list-style:none; }
.simple-settings-list a { display:flex; justify-content:space-between; align-items:center; min-height:64px; gap:16px; padding:12px 0; }
.simple-settings-list li + li { border-top:1px solid var(--line); }
.simple-settings-list small { display:block; margin-top:4px; }
.action-dialog .simple-page { padding:0; }
.action-dialog .setup-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.action-dialog .simple-columns { grid-template-columns:1fr; }
@media (hover:hover) and (pointer:fine) {
 .app-page .sidebar .nav-link:hover { background:var(--nav-active); color:white; }
 .setup-choice:not(:has(input:disabled)):hover { border-color:var(--accent); }
 .simple-chip:hover { background:var(--simple-soft); }
}
@media (min-width:801px) { .app-page .sidebar .brand { margin-bottom:0; } }
@media (max-width:1050px) and (min-width:801px) { .app-page .dashboard { padding:24px; } .simple-columns { grid-template-columns:1fr; } .simple-three { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:800px) {
 .app-page .topbar { height:64px; padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left)); position:relative; }
 .app-page .mobile-brand { display:flex; width:auto; gap:12px; font-size:14px; }
 .app-page .mobile-brand > span:last-child { font-size:14px; line-height:22px; }
 .app-page .header-journal,.app-page .observation-badge,.app-page .mobile-search-button { display:none; }
 .app-page .mobile-menu summary { border:0; padding:8px; color:var(--muted); }
 .app-page .mobile-menu summary span:last-child { display:none; }
 .app-page .dashboard { padding:20px 20px calc(100px + env(safe-area-inset-bottom)); }
 .app-page .page-heading { align-items:flex-start; gap:16px; flex-wrap:wrap; }
 .app-page .page-heading h1 { font-size:24px; line-height:32px; letter-spacing:0; }
 .app-page .bottom-nav { gap:0; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); border:0; background:#fff; }
 .app-page .bottom-nav a { min-height:60px; font-size:12px; border-radius:0; color:var(--muted); }
 .app-page .bottom-nav a[aria-current="page"] { background:transparent; color:var(--accent); }
 .simple-page { gap:16px; }
 .simple-page .page-heading > .primary,.simple-page .page-heading > .secondary { width:100%; }
 .simple-metrics { grid-template-columns:1fr 1fr; gap:14px; }
 .simple-metrics article { padding:16px; }
 .simple-metrics strong { font-size:32px; line-height:40px; }
 .simple-metrics .simple-metric-secondary { display:none; }
 .simple-columns,.simple-three,.simple-mode-grid { grid-template-columns:1fr; gap:16px; }
 .simple-card,.simple-page .panel-body,.policy-card { padding:20px; }
 .simple-mode { background:transparent; border:0; padding:0; }
 .simple-mode-grid { gap:12px; }
 .simple-mode p,.simple-mode .simple-link { display:none; }
 .simple-mode-head strong,.simple-mode-head b { font-size:14px; line-height:22px; }
 .simple-table thead { display:none; }
 .simple-table,.simple-table tbody { display:block; width:100%; }
 .simple-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:14px 16px; border-bottom:1px solid var(--line); }
 .simple-table tr:last-child { border-bottom:0; }
 .simple-table td { display:block; padding:0; border:0; min-width:0; font-size:13px; }
 .simple-table td:first-child { grid-column:1; }
 .simple-table td:nth-child(2) { grid-column:2; grid-row:1; text-align:right; color:var(--muted); font-size:12px; }
 .simple-table td:nth-child(3) { grid-column:1; grid-row:2; }
 .simple-table td:nth-child(4) { grid-column:2; grid-row:2; text-align:right; font-size:12px; }
 .simple-table td small { font-size:11px; margin-top:2px; }
 .simple-toolbar { gap:12px; }
 .simple-toolbar .search-form { width:100%; }
 .simple-toolbar .search-form input { width:100%; min-width:0; }
 .simple-steps { gap:8px; justify-content:space-between; font-size:12px; }
 .simple-steps li { gap:4px; }
 .simple-steps span { padding:5px; }
 .setup-fields,.setup-mode-choices,.setup-choice-grid,.action-dialog .setup-choice-grid { grid-template-columns:1fr; gap:14px; }
 .setup-mode-choices legend { font-size:18px; }
 .setup-choice { padding:20px; }
 .setup-actions { flex-wrap:wrap-reverse; }
 .setup-actions > * { width:100%; }
 .setup-form input:not([type=radio]):not([type=hidden]),.setup-form select,.setup-form textarea { font-size:16px; }
 .policy-rule { grid-template-columns:24px minmax(0,1fr); gap:10px; }
 .policy-rule > .badge { grid-column:2; justify-self:start; }
 .policy-version { align-items:flex-start; }
 .action-dialog .simple-page { padding:0; }
}
@media (prefers-reduced-motion:reduce) { .setup-choice,.simple-chip { transition:none; } }

.policy-row-menu { grid-column:2; font-size:12px; }
.policy-row-menu summary { min-height:44px; display:flex; align-items:center; color:var(--muted); }
.policy-row-menu .secondary { min-height:44px; font-size:12px; }

.simple-source-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; }
.simple-source-row + .simple-source-row { border-top:1px solid var(--line); }
.simple-source-row small { display:block; margin-top:4px; }
@media(max-width:800px) { .simple-source-row { align-items:stretch; flex-direction:column; } .simple-source-row button { width:100%; } }

/* Compact catalog rows stay usable in dialogs and on phones. */
.category-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; }
.category-catalog-item { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:12px; padding:12px; min-width:0; }
.category-catalog-item small { display:block; }
.category-catalog-item strong,.category-catalog-item small { overflow-wrap:anywhere; }
.category-catalog-item .secondary { flex-shrink:0; }
.category-catalog-item[hidden] { display:none; }
@media(max-width:800px) { .category-catalog-grid { grid-template-columns:1fr; } .category-catalog-item { padding:10px 12px; } }

/* Routes use the same vocabulary in client, profile and region dialogs. */
.simple-status { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.simple-status .simple-link { font-size:12px; min-height:32px; }
.simple-groups > .simple-heading { align-items:flex-start; }
.simple-groups .simple-heading p { margin:6px 0 0; }
.simple-groups .actions { flex-shrink:0; }
.group-search input { width:100%; }
.catalogue-picker-list { display:grid; margin-top:12px; }
.catalogue-picker-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; min-width:0; border-bottom:1px solid var(--line); }
.catalogue-picker-row small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.catalogue-add-form { display:flex; align-items:center; gap:8px; margin:0; }
.catalogue-add-form select { width:148px; min-width:0; }
.catalogue-add-form .secondary { min-height:44px; }
.simple-group-list { margin:0; }
.simple-group-row.policy-rule { grid-template-columns:minmax(0,1fr) auto auto; gap:16px; min-height:68px; }
.simple-group-name { min-width:0; }
.simple-group-name strong { overflow-wrap:anywhere; }
.simple-group-row > .secondary { min-width:100px; }
.simple-group-row[hidden] { display:none; }
.simple-default-route { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:16px; align-items:center; border-top:1px solid var(--line); padding-top:20px; }
.simple-default-route small { display:block; margin-top:4px; color:var(--muted); }
.simple-default-route > .secondary { min-width:100px; }
.simple-advanced > .actions { margin-top:16px; }
.simple-regions { margin-top:16px; }
.simple-regions .simple-card { padding:20px; }
.simple-regions .simple-card > .simple-link { width:100%; justify-content:center; }
.region-mark { font-size:11px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:4px 6px; }
.region-chain { list-style:none; padding:0; display:grid; gap:10px; }
.region-chain li { display:flex; align-items:center; gap:12px; }
.region-chain strong { font-size:14px; }
.region-chain small { display:block; color:var(--muted); font-size:12px; }
.region-priority { display:grid; place-items:center; width:24px; height:24px; flex:none; background:var(--bg); color:var(--muted); border-radius:6px; font-size:12px; font-variant-numeric:tabular-nums; }
.region-chain li:first-child .region-priority,.region-pool-active .region-server-list li:first-child .region-priority { color:var(--accent); background:var(--simple-soft); }
.region-chain-single { min-height:44px; display:flex; align-items:center; }
.region-pool-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.region-pool { border:1px solid var(--line); border-radius:12px; padding:16px; min-width:0; }
.region-pool h2 { font-size:16px; margin:0; }
.region-pool > .help { margin:6px 0 14px; }
.region-pool-active { background:var(--simple-soft); }
.region-server-list { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.region-server-list li { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; min-width:0; }
.region-server-list li > div:first-of-type { min-width:0; flex:1; }
.region-server-list strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.region-server-list small { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.region-server-list .secondary { padding:8px 10px; min-height:44px; font-size:12px; }
.region-order-actions { display:flex; gap:4px; flex:none; align-items:center; }
.region-server-list .region-icon-button { min-width:44px; width:44px; padding:0; font-size:18px; }
.region-order-actions button:focus-visible { outline:3px solid #53bcae; outline-offset:2px; }
.region-empty { padding:24px 12px; font-size:13px; color:var(--muted); text-align:center; }
.region-priority-feedback { min-height:20px; margin:12px 0 0; }
.simple-current-route { display:grid; gap:4px; }
.client-routing-link { display:flex; align-items:center; min-height:44px; color:var(--accent); font-size:12px; font-weight:600; width:max-content; }
.simple-current-route small { color:var(--muted); }
.simple-route-transition { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:16px; align-items:center; }
.simple-route-transition div { min-width:0; }
.simple-route-transition small { display:block; color:var(--muted); margin-bottom:6px; }
.simple-route-transition strong { overflow-wrap:anywhere; }
.action-dialog [data-region-priority-form] .setup-actions { position:sticky; bottom:-24px; margin:0 -24px -24px; padding:16px 24px; background:#fff; border-top:1px solid var(--line); z-index:1; }
@media(max-width:1100px) { .region-pool-grid { grid-template-columns:1fr; } }
@media(max-width:800px) {
 .catalogue-picker-row { flex-wrap:wrap; gap:10px; }
 .catalogue-add-form { width:100%; }
 .catalogue-add-form select { flex:1; font-size:16px; }
 .simple-groups > .simple-heading { display:grid; gap:12px; }
 .simple-groups > .simple-heading .actions { display:flex; gap:8px; }
 .simple-groups > .simple-heading .actions > .secondary { flex:1; }
 .simple-group-row.policy-rule { grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:12px 0; }
 .simple-group-row > .badge { grid-column:1; grid-row:2; justify-self:start; font-size:11px; padding:4px 6px; }
 .simple-group-row > .secondary { grid-column:2; grid-row:1 / span 2; min-width:96px; font-size:12px; }
 .simple-default-route { grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; }
 .simple-default-route > .badge { grid-column:1; grid-row:2; justify-self:start; font-size:11px; padding:4px 6px; }
 .simple-default-route > .secondary { grid-column:2; grid-row:1 / span 2; min-width:96px; font-size:12px; }
 .simple-regions .simple-card { padding:16px; }
 .region-pool { padding:12px; }
 .region-server-list li { flex-wrap:wrap; }
 .region-pool-active .region-server-list li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px 10px; }
 .region-pool-active .region-order-actions { grid-column:2; margin-left:0; }
 .region-server-list .region-icon-button { width:44px; }
 .simple-route-transition { grid-template-columns:1fr; gap:8px; }
 .simple-route-transition > span { display:none; }
 .action-dialog [data-region-priority-form] .setup-actions { bottom:-16px; margin:0 -16px -16px; padding:12px 16px; flex-wrap:nowrap; }
 .action-dialog [data-region-priority-form] .setup-actions > * { width:auto; flex:1; }
}