/* devrig-only rules on top of idp.css (the IDP stylesheet). */

/* .field and .btn set display, which beats the user-agent [hidden] rule */
[hidden] { display: none !important; }

.shell:has(.admin) { max-width: 88rem; gap: var(--space-6); }
.shell:not(:has(.admin)) { gap: var(--space-8); }

.navbar__email { font-size: var(--text-sm); color: var(--color-fg-muted); }

h2 { font-size: var(--text-lg); font-weight: 600; margin: 0; }

/* --- Recommendations box ----------------------------------- */
.notes { border: 1px solid var(--color-border); background: var(--color-surface); }
.notes__summary {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm); color: var(--color-fg-muted); cursor: pointer;
}
.notes[open] .notes__summary { border-bottom: 1px solid var(--color-border); }
.notes__list { margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8); font-size: var(--text-sm); }
.notes__list li + li { margin-top: var(--space-2); }
.notes__list li::marker { color: var(--color-warn-fg); }

/* --- Record table ------------------------------------------ */
.table-frame__meta {
    margin: 0; padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm); color: var(--color-fg-muted);
}
.table-frame__meta strong { color: var(--color-fg); }
.table-frame .table-footer { padding: var(--space-3) var(--space-4); border-top: 0; }
.table-scroll { overflow-x: auto; }
.records td { vertical-align: middle; }
.records__name { white-space: nowrap; }
.records__name strong { font-weight: 500; }
.records__suffix { color: var(--color-fg-subtle); }
.records__value { font-family: var(--font-mono); word-break: break-all; }
.records__comment { color: var(--color-fg-muted); max-width: 16rem; overflow-wrap: anywhere; }
.records__example {
    margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); overflow-x: auto;
    font-family: var(--font-mono); font-size: var(--text-sm);
    background: var(--color-surface-subtle); border: 1px solid var(--color-border);
}

/* --- Record dialog ----------------------------------------- */
.record-modal { width: min(46rem, calc(100vw - 2rem)); max-width: none; color: var(--color-fg); }
.record-modal::backdrop { background: rgb(0 0 0 / 0.55); }
/* idp.css makes the dialog a capped flex column that cannot scroll itself; the form scrolls instead */
.record-modal > form { flex: 1; min-height: 0; overflow: auto; }
.record-modal__preview { margin: 0 0 var(--space-4); font-size: var(--text-base); color: var(--color-fg-muted); overflow-wrap: anywhere; }
.record-modal__preview strong { color: var(--color-fg); font-weight: 600; }
.record-modal .alert { margin: 0 0 var(--space-4); }
.record-modal__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.record-modal__type { flex: 0 0 9rem; }
.record-modal__ttl { flex: 0 0 7rem; }
.record-modal__grow { flex: 1 1 14rem; }
.record-modal__attributes { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.record-modal__attributes[open] { display: flex; flex-direction: column; gap: var(--space-3); }
.record-modal__attributes-summary { cursor: pointer; font-size: var(--text-sm); font-weight: 500; }
.record-modal__attributes p { margin: 0; }
.record-modal__footer {
    display: flex; gap: var(--space-2); align-items: center;
    padding-top: var(--space-4); border-top: 1px solid var(--color-border);
}
.record-modal__delete { margin-left: auto; color: var(--color-danger-fg); }

/* --- Danger zone ------------------------------------------- */
.danger__form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-top: var(--space-3); }
.danger__form .field { flex: 0 1 20rem; }
.danger .alert { margin: var(--space-3) 0 0; }

/* --- Device approval and API grants ------------------------ */
.device-request { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-sm); }
.device-request dt { color: var(--color-fg-muted); }
.device-request dd { margin: 0; }
.scope { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; padding: var(--space-2) 0; font-size: var(--text-sm); }
.scope small { color: var(--color-fg-muted); }
.scope--danger small { color: var(--color-danger-fg); }
.scope--unused { opacity: 0.55; }

/* --- Forms in a toolbar ------------------------------------ */
.admin__main form.toolbar, main form.toolbar { align-items: flex-end; }
.device-code { flex: 0 1 16rem; }

/* --- API grants and admin ---------------------------------- */
.grant { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px dashed var(--color-border); }
.grant:first-child { border-top: 0; padding-top: 0; }
.grant__title { margin: 0; font-size: var(--text-base); font-weight: 600; }
.grant__revoke, .admin__suspend { color: var(--color-danger-fg); }

.panel__head { flex-wrap: wrap; }

/* on a phone the sidebar becomes one row of links above the page */
@media (max-width: 720px) {
    .shell { padding: var(--space-4); }
    .navbar__email { display: none; }
    .admin { grid-template-columns: 1fr; }
    .admin__nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--color-border); padding: var(--space-2); }
    .admin__nav-section, .admin__nav-sep { display: none; }
    .admin__nav-app { flex-basis: 100%; margin: 0; }
    .admin__nav-tabs { flex-direction: row; flex-wrap: wrap; }
    .admin__main { padding: var(--space-4); }
}