/* Management Overview (public/js/management.js) and the page ⓘ help (public/js/page-help.js). */
.mg-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.mg-crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
.mg-crumb{display:inline-flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:4px 10px;font:inherit;font-size:13px;font-weight:600;color:var(--blue-600);cursor:pointer;line-height:1.2}
.mg-crumb small{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2)}
.mg-crumb:hover{border-color:var(--blue);background:var(--blue-050)}
.mg-crumb.cur{cursor:default;color:var(--text);background:var(--blue-050);border-color:var(--blue-100)}
.mg-sep{color:var(--muted-2);display:inline-flex}
.mg-tools{display:flex;align-items:center;gap:10px}
.mg-jump{max-width:260px;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:var(--panel);color:var(--text);font:inherit;font-size:13px}
.mg-asof{font-size:12px;color:var(--muted);white-space:nowrap}
.mg-title{display:flex;align-items:baseline;gap:12px;margin:10px 0 2px}
.mg-title h2{margin:0;font-size:22px;color:var(--navy)}
.mg-meta{color:var(--muted);font-size:13px}
.mg-tabs{margin:8px 0 14px}
.mg-kpis{margin-bottom:18px}
.mg-kpis.n6{grid-template-columns:repeat(6,minmax(0,1fr))}
.mg-kpis.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mg-kpis.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mg-kpis.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mg-kpis.n1,.mg-kpis.n2{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1280px){.mg-kpis.n6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1120px){.mg-kpis.n5,.mg-kpis.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.mg-kpis[class*=" n"]{grid-template-columns:repeat(2,minmax(0,1fr))}.mg-tools{flex-wrap:wrap;width:100%}.mg-jump{max-width:none;flex:1 1 100%}.mg-title{flex-wrap:wrap;gap:4px 10px}}
.mg-up{color:var(--good)} .mg-down{color:var(--warn)}
.mg-sec{display:flex;align-items:baseline;gap:10px;margin:4px 0 8px}
.mg-sec h3{margin:0;font-size:15px;color:var(--navy)}
.mg-hint{font-size:12px;color:var(--muted-2)}
.mg-table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}
.mg-table{width:100%;border-collapse:collapse;font-size:13px}
.mg-table th{position:sticky;top:0;background:#f8fafd;color:var(--muted);font-size:11.5px;font-weight:600;text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;line-height:1.25}
.mg-table th.mg-name{text-align:left}
.mg-table th.sortable{cursor:pointer;user-select:none}
.mg-table th.sortable:hover{color:var(--blue-600)}
.mg-table th.sorted{color:var(--navy)}
.mg-table th.sorted.desc::after{content:' ↓'} .mg-table th.sorted.asc::after{content:' ↑'}
.mg-table td{padding:9px 12px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mg-table td.mg-name{text-align:left;white-space:normal;min-width:150px}
.mg-table td.mg-name .sub{display:block;font-size:11.5px;color:var(--muted-2);font-weight:400}
.mg-table tbody tr.clickable{cursor:pointer}
.mg-table tbody tr.clickable:hover td{background:var(--blue-050)}
.mg-table tbody tr:hover .mg-go{color:var(--blue)}
.mg-go{color:var(--muted-2);width:24px;padding-left:0!important}
.mg-table tfoot td{background:#f8fafd;font-weight:700;border-top:2px solid var(--line);border-bottom:none}
.mg-g{font-weight:600;color:var(--muted)} .mg-g.up{color:var(--good)} .mg-g.down{color:var(--warn)}
.mg-share{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.mg-share i{display:inline-block;height:6px;width:0;max-width:70px;background:var(--blue);border-radius:3px;opacity:.75}
.mg-share{min-width:120px}
.mg-share i{flex:none}
.mg-req{color:var(--amber)} .mg-0{color:var(--muted-2)}
.mg-note{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;color:var(--muted);font-size:13.5px}
.mg-note.bad{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.mg-loading{display:flex;align-items:center;gap:10px;padding:28px 18px;color:var(--muted);font-size:13.5px}
.mg-loading .spin{display:inline-block;width:16px;height:16px;border:2px solid var(--blue-100);border-top-color:var(--blue);border-radius:50%;animation:mgspin .8s linear infinite}
@keyframes mgspin{to{transform:rotate(360deg)}}

/* ── Page help ⓘ ── */
.ph-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:6px;border:none;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.ph-btn:hover,.ph-btn:focus-visible{background:var(--blue-050);color:var(--blue)}
.ph-panel{position:fixed;z-index:1200;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 90px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:16px 18px;font-size:13px;color:var(--text);line-height:1.5}
.ph-panel h4{margin:0 0 6px;font-size:15px;color:var(--navy)}
.ph-panel h5{margin:14px 0 6px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ph-panel h5 small{text-transform:none;letter-spacing:0;font-weight:500}
.ph-panel p{margin:0;color:var(--text)}
.ph-panel ul{margin:0;padding-left:18px}
.ph-panel li{margin:3px 0}
.ph-roles{width:100%;border-collapse:collapse}
.ph-roles th{text-align:left;vertical-align:top;padding:5px 10px 5px 0;width:38%;font-weight:600;color:var(--navy)}
.ph-roles td{padding:5px 0;color:var(--text)}
.ph-roles tr+tr th,.ph-roles tr+tr td{border-top:1px solid var(--line-2)}
.ph-mine{list-style:none;padding-left:0!important}
.ph-mine li.ok{color:var(--good)} .ph-mine li.no{color:var(--muted-2)}
.ph-ro{color:var(--muted)!important}
.ph-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.ph-modal{position:fixed;inset:0;z-index:1300;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.ph-guide{width:min(820px,100%);background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px 24px;font-size:13px;line-height:1.5}
.ph-guide-head{display:flex;align-items:center;justify-content:space-between}
.ph-guide-head h3{margin:0;font-size:18px;color:var(--navy)}
.ph-lead{color:var(--muted);margin:6px 0 10px}
.ph-chip{display:inline-block;margin:2px 3px;padding:1px 8px;border-radius:10px;background:var(--blue-050);color:var(--blue-600);font-size:12px}
.ph-g{padding:10px 0;border-top:1px solid var(--line-2)}
.ph-g h4{margin:0 0 3px;font-size:14px;color:var(--navy)}
.ph-g p{margin:0 0 4px}
.ph-g b{color:var(--navy)}
.mg-kpis .k-sub,.mg-kpis .k-label{white-space:normal;overflow:visible;text-overflow:clip}
/* Narrow screens: the title (now with its ⓘ) gives way instead of pushing the top bar wider than the screen. */
@media(max-width:640px){.topbar .page-title{min-width:0;max-width:calc(100vw - 250px);flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .user-chip .uc-meta,.topbar .env-badge{display:none}.ph-btn{flex:none}
  .topbar .logout-btn{font-size:0;padding:8px;gap:0}}