/* ==========================================
   Hạ tầng: Tài khoản / Chi tiết tài khoản / Thiết bị (UI-REST, approved mockup 04/10/2026). Loaded after graphite.css and users.css:
   reuses the released server-detail pieces (sd-summary, sd-tabs, sd-table, sd-panel drawer/sheet, sd-seg, sd-status)
   and the Users pieces (us-head, us-alert, us-modal, us-toast). Colours only from --g-* tokens.
   ========================================== */

.ia .sd-summary { margin-bottom: 4px; }
.ia-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ia-sum5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ia-kpi-label { font-size: 12px; color: var(--g-muted); }
.ia-kpi-sub { display: block; font-size: 11.5px; color: var(--g-muted); }
.ia-kpi-sub.bad, .ia .sub.bad, .ia-group-stats .bad, .ia-devc small.bad { color: var(--g-bad); }
.ia-group-stats .ok { color: var(--g-ok); }
.ia .us-sub .sd-status { font-size: 12.5px; }
.ia .sd-seg .dot.bad { background: var(--g-bad); }
/* users.css centres every direct child up to 1320px; the fit-content tab bar sits in a full-width wrapper so it stays on the left edge of that column. */
.ia-tabbar { display: block; }

/* Links that open another object; a row click only selects */
.ia-link { color: var(--g-text); text-decoration: none; border-bottom: 1px solid transparent; }
.ia-link:hover { border-bottom-color: var(--g-coral); }
.ia-link:focus-visible { outline: 2px solid var(--g-coral); outline-offset: 2px; border-radius: 3px; }
.ia-inline { margin: 0; padding: 0; font: inherit; color: var(--g-text); }
.ia-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.ia .sub.ia-mono { font-size: 11px; }

/* Toolbar extras */
.ia-select select { height: 38px; max-width: 210px; padding: 0 10px; border: 1px solid var(--g-line); border-radius: 9px; background: var(--g-panel); color: var(--g-text); font: inherit; font-size: 13px; }
.ia-select select:focus-visible { outline: 2px solid var(--g-coral); outline-offset: 1px; }
.ia-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 11px; border: 1px solid var(--g-coral-line); border-radius: 8px; background: var(--g-coral-bg); color: var(--g-coral-ink); font-size: 12.5px; max-width: 100%; }
.ia-chip b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ia-chip button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.ia-chip button svg { width: 14px; height: 14px; }
.ia-chip button:hover { background: var(--g-hover); }

/* Tables */
.ia-table td.n, .ia-table th.n { font-variant-numeric: tabular-nums; }
.ia-acc { min-width: 760px; }
.ia-dev { min-width: 780px; }
.ia-dd, .ia-tx { min-width: 680px; }
.sd-work.has-panel .ia-acc, .sd-work.has-panel .ia-dev { min-width: 600px; }
.ia-table tr.off td:not(:first-child) { color: var(--g-muted); }
.ia-dev .ia-acc-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ia-devc b { font-weight: 550; }
.ia-devc small { display: block; font-size: 11.5px; }
.ia-auto { color: var(--g-ok); font-size: 12px; }
.ia-today { color: var(--g-text-2); }
.ia-table .m-cell { display: none; }

/* Server group rows (existing collapse-by-server, kept) */
.ia-group td { height: 40px; padding: 4px 12px; background: var(--g-sidebar); border-bottom: 1px solid var(--g-line-soft); cursor: default; }
.ia-group-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 2px; border: 0; border-radius: 6px; background: none; color: var(--g-text); font: inherit; font-size: 13px; cursor: pointer; }
.ia-group-btn svg { width: 14px; height: 14px; color: var(--g-muted); }
.ia-group-btn b { font-weight: 600; }
.ia-group-btn:focus-visible { outline: 2px solid var(--g-coral); outline-offset: 1px; }
.ia-group-stats { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 12px; font-size: 12px; color: var(--g-muted); font-variant-numeric: tabular-nums; }

/* Panel */
.ia-panel-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.ia-panel-actions .g-btn { text-decoration: none; }
.us-panel .sd-facts dd small { display: block; font-size: 11.5px; color: var(--g-muted); }
.us-panel .sd-facts dd { text-align: right; }
.g-btn.bad { color: var(--g-bad); }

/* Detail page */
.ia-back { display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 10px; padding: 4px 8px 4px 2px; border-radius: 7px; color: var(--g-muted); font-size: 13px; text-decoration: none; }
.ia-back:hover { color: var(--g-text); background: var(--g-hover); }
.ia-back svg { width: 16px; height: 16px; }
.ia-back:focus-visible { outline: 2px solid var(--g-coral); outline-offset: 1px; }
.ia-tabpanel { margin-top: 16px; }
.ia-tabhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.ia-tabhead h2, .ia-info h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--g-text); }
.ia-tabhead .g-btn { text-decoration: none; }
.ia-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ia-info section { padding: 16px 18px; border: 1px solid var(--g-line); border-radius: 11px; background: var(--g-panel); min-width: 0; }
.ia-info h2 { margin-bottom: 8px; }
.ia-info .sd-facts dd small { display: block; font-size: 11.5px; color: var(--g-muted); }
.ia-tabpanel > .sd-state { padding: 34px 16px; border: 1px solid var(--g-line-soft); border-radius: 11px; background: var(--g-panel); }

@media (max-width: 1150px) {
    .ia-sum5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ia-sum5 .sd-kpi:nth-child(4) { padding-left: 0; border-left: 0; }
    .ia-acc, .ia-dev, .sd-work.has-panel .ia-acc, .sd-work.has-panel .ia-dev { min-width: 620px; }
}
@media (max-width: 720px) {
    .ia-sum, .ia-sum5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ia-sum5 .sd-kpi:nth-child(4) { padding: 0 12px 14px; border-left: 1px solid var(--g-line); }
    .ia-sum5 .sd-kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
    .ia-acc, .ia-dev, .ia-dd, .ia-tx, .sd-work.has-panel .ia-acc, .sd-work.has-panel .ia-dev { min-width: 0; }
    .ia-table td.m-line > * + *::before { content: "·"; margin: 0 7px; color: var(--g-muted); }
    .ia-table td.m-line .sd-status { font-size: 12px; }
    .ia-group td { display: block; height: auto; padding: 8px 14px; }
    .ia-group-stats { margin: 2px 0 0; display: flex; }
    .ia-select, .ia-select select { width: 100%; max-width: none; }
    .ia-info { grid-template-columns: minmax(0, 1fr); }
    .ia-tabhead { flex-wrap: wrap; }
    .ia-chip { width: 100%; justify-content: space-between; }
    .ia-chip b { max-width: none; }
}

/* Blazor: the detail tabs are buttons inside the tab bar; the shared arrow-key handler moves between them. */
.ia-tabbar .sd-tab { cursor: pointer; }
.ia-link.ia-inline { border-bottom: 0; }
.ia-part-time { margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--g-muted); }