/* Page-specific styles of the business screens (tenants, users, numbers, telephony, billing,
   accounts, audit...). Loaded by base.html after app.css. No inline style anywhere (CSP
   style-src 'self'). Uses the tokens of app.css (--fg, --muted, --line, --bg, --surface,
   --surface-2, --accent (backgrounds), --on-accent (text on it), --accent-ink (accent text), --bad/--ok/--warn and their *-bg, --radius, --shadow);
   every use has a fallback so that the page stays readable with an older app.css.
   Building blocks (templates/_ui.html): page header, breadcrumb, cards, folded creation panels,
   scrollable tables with sticky headers, status badges, destructive actions with confirmation. */

/* Page header: title, one-line description, main action. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1.5rem; margin: .25rem 0 1rem; }
.page-head > div { flex: 1 1 28rem; min-width: 0; }
.page-head h1 { margin: 0 0 .25rem; font-size: 1.6rem; line-height: 1.25; }
.page-head .lead { margin: 0; color: var(--muted, #6b7280); max-width: 60rem; }
.page-head .page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.page-head .meta { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--muted, #6b7280); font-size: .92rem; }
.page-head .meta strong { color: var(--fg, #1d2330); font-weight: 600; }

/* Breadcrumb of the detail pages. */
.crumbs { font-size: .9rem; margin: 0 0 .35rem; color: var(--muted, #6b7280); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: .25rem; color: var(--muted, #6b7280); }
.crumbs a { color: var(--accent-ink, #1f5fae); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--fg, #1d2330); }

/* Link styled as a button (main action of a page). */
a.btn, summary.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: var(--radius, 4px); background: var(--accent, #1f5fae); color: var(--on-accent, #fff); text-decoration: none; font-weight: 600; cursor: pointer; border: 1px solid transparent; line-height: 1.3; }
a.btn.secondary, summary.btn.secondary { background: var(--surface, #fff); color: var(--accent-ink, #1f5fae); border-color: var(--line, #d9dde5); }
a.btn:hover, summary.btn:hover { filter: brightness(.95); }

/* Cards: one section of a page. */
.card { background: var(--surface, #fff); border: 1px solid var(--line, #d9dde5); border-radius: var(--radius, 6px); box-shadow: var(--shadow, none); padding: 1rem 1.1rem; margin: 0 0 1.25rem; }
.card > h2, .card > .card-head h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.card > .card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: .5rem; }
.card > .card-head h2 { margin: 0; }
.card > .card-head p, .card > .hint { margin: .1rem 0 .6rem; color: var(--muted, #6b7280); font-size: .92rem; }
.card .grid, .card table { border: 0; margin: 0; padding: 0; background: transparent; }
.card .grid { padding: 0; }
.card + h2 { margin-top: 1.5rem; }
.card.danger-zone { border-color: var(--bad, #a12a2a); }
.card.danger-zone > h2 { color: var(--bad, #a12a2a); }

/* Folded creation (or secondary) form: <details class="panel">. */
details.panel { background: var(--surface, #fff); border: 1px solid var(--line, #d9dde5); border-radius: var(--radius, 6px); box-shadow: var(--shadow, none); margin: 0 0 1.25rem; }
details.panel > summary { list-style: none; cursor: pointer; padding: .7rem 1rem; font-weight: 600; color: var(--accent-ink, #1f5fae); display: flex; align-items: center; gap: .5rem; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent, #1f5fae); color: var(--on-accent, #fff); font-weight: 700; line-height: 1; }
details.panel[open] > summary::before { content: "−"; }
details.panel[open] > summary { border-bottom: 1px solid var(--line, #d9dde5); }
details.panel > .panel-body { padding: 1rem; }
details.panel > .panel-body > .grid, details.panel > .panel-body > form > .grid { border: 0; padding: 0; background: transparent; }
details.panel .grid { border: 0; padding: 0; background: transparent; }
details.panel .hint { color: var(--muted, #6b7280); font-size: .9rem; margin: 0 0 .75rem; }

/* Grouped fields of a long form. */
.form-sections { display: grid; gap: 1rem; }
fieldset.group { border: 1px solid var(--line, #d9dde5); border-radius: var(--radius, 6px); padding: .75rem 1rem 1rem; margin: 0; min-width: 0; }
fieldset.group > legend { font-weight: 600; padding: 0 .35rem; }
fieldset.group .grid { border: 0; padding: 0; background: transparent; }
fieldset.group label { display: grid; gap: .2rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem 1rem; }
.checks label { display: flex !important; gap: .45rem; align-items: center; font-size: .92rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.form-actions .hint { margin: 0; }
.field-hint { color: var(--muted, #6b7280); font-size: .82rem; font-weight: normal; }

/* Filters bar above a list. */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; background: var(--surface, #fff); border: 1px solid var(--line, #d9dde5); border-radius: var(--radius, 6px); padding: .7rem 1rem; margin: 0 0 .75rem; }
.toolbar.grid { display: flex; }
.toolbar label { flex: 1 1 12rem; max-width: 22rem; }
.toolbar button { flex: 0 0 auto; }
.toolbar .reset { font-size: .9rem; align-self: center; }

/* Tables: horizontal scroll on narrow screens, sticky header on wide ones, readable cells. */
.table-wrap { background: var(--surface, #fff); border: 1px solid var(--line, #d9dde5); border-radius: var(--radius, 6px); margin: 0 0 1.25rem; }
.table-wrap > table { margin: 0; background: transparent; }
.table-wrap thead th { position: sticky; top: var(--sticky-top, 0); z-index: 1; background: var(--surface-2, #eef0f4); font-size: .85rem; font-weight: 600; color: var(--muted, #4b5563); white-space: nowrap; border-bottom: 1px solid var(--line, #d9dde5); }
.table-wrap td, .table-wrap th { padding: .5rem .65rem; }
.table-wrap tbody tr:hover td { background: var(--surface-2, #f6f7f9); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap td.empty { text-align: center; padding: 1.4rem .75rem; color: var(--muted, #6b7280); }
.card > .table-wrap { border: 0; margin: 0 -1.1rem -1rem; border-radius: 0 0 var(--radius, 6px) var(--radius, 6px); }
.nowrap { white-space: nowrap; }
td.actions { white-space: nowrap; text-align: right; width: 1%; }
td.actions > * { vertical-align: middle; }
td.actions form { display: inline-block; margin: 0 0 0 .25rem; }
td.actions > a { margin-right: .35rem; }
td small, .small { font-size: .82rem; }
.id-short { font-size: .8rem; color: var(--muted, #6b7280); }
@media (max-width: 60rem) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap thead th { position: static; }
  td.actions { white-space: normal; text-align: left; }
}

/* Status badges: <span class="badge ok|bad|warn|neutral">. */
.badge.ok, .badge.bad, .badge.warn, .badge.neutral { display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1.5; padding: 0 .5rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.badge.ok { color: var(--ok, #1d6b35); background: var(--ok-bg, #e6f4ea); }
.badge.bad { color: var(--bad, #a12a2a); background: var(--bad-bg, #fbeaea); }
.badge.warn { color: var(--warn, #8a5a00); background: var(--warn-bg, #fdf3dc); }
.badge.neutral { color: var(--muted, #4b5563); background: var(--surface-2, #eef0f4); }

/* Destructive actions: a <details class="confirm"> reveals the real submit button. */
details.confirm { display: inline-block; vertical-align: middle; text-align: left; }
details.confirm[open] { display: block; margin: .25rem 0; }
td.actions details.confirm[open] > .confirm-box { margin-left: auto; }
details.confirm > summary { list-style: none; cursor: pointer; display: inline-block; padding: .3rem .65rem; border-radius: var(--radius, 4px); border: 1px solid var(--bad, #a12a2a); color: var(--bad, #a12a2a); background: var(--surface, #fff); font-size: .9rem; line-height: 1.3; white-space: nowrap; }
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm > summary:hover { background: var(--bad-bg, #fbeaea); }
details.confirm[open] > summary { background: var(--bad-bg, #fbeaea); }
details.confirm > .confirm-box { margin-top: .4rem; padding: .6rem .75rem; border: 1px solid var(--bad, #a12a2a); border-radius: var(--radius, 4px); background: var(--bad-bg, #fff6f6); max-width: 22rem; white-space: normal; font-size: .9rem; }
details.confirm > .confirm-box p { margin: 0 0 .5rem; }
details.confirm > .confirm-box form { margin: 0; display: block; }
details.confirm.caution > summary { border-color: var(--warn, #8a5a00); color: var(--warn, #8a5a00); }
details.confirm.caution[open] > summary, details.confirm.caution > summary:hover { background: var(--warn-bg, #fdf3dc); }
details.confirm.caution > .confirm-box { border-color: var(--warn, #8a5a00); background: var(--warn-bg, #fffaf0); }
details.confirm.caution > .confirm-box button { background: var(--warn, #8a5a00); color: var(--surface, #fff); }

/* Secondary small button (non destructive row action). */
button.secondary { background: var(--surface, #fff); color: var(--accent-ink, #1f5fae); border: 1px solid var(--line, #d9dde5); }
button.small, .btn.small { font-size: .85rem; padding: .25rem .55rem; }

/* Key/value description of an object (detail pages). */
dl.facts { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .45rem 1.25rem; margin: 0; }
dl.facts dt { color: var(--muted, #6b7280); font-size: .92rem; }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) { dl.facts { grid-template-columns: 1fr; gap: .1rem; } dl.facts dd { margin-bottom: .45rem; } }

/* Tenant tree. */
.card .tree { margin: 0; padding-left: 0; }
.card .tree ul { border-left: 1px dashed var(--line, #d9dde5); margin-left: .5rem; padding-left: 1rem; }
.card .tree li { margin: .3rem 0; }
.card .tree .kind { margin-right: .35rem; background: var(--surface-2, #eef0f4); }

/* Users: SIP accounts of a row. */
.account { gap: .4rem; }
.account details.inline-panel { display: inline-block; }
details.inline-panel > summary { cursor: pointer; color: var(--accent-ink, #1f5fae); font-size: .85rem; }
details.inline-panel > form, details.inline-panel > .confirm-box { margin-top: .35rem; }
details.inline-panel form.inline { flex-wrap: wrap; }
.links { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }

/* Secrets shown once. */
dl.secret { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .5rem 1.25rem; background: var(--surface, #fff); border: 1px solid var(--line, #d9dde5); border-radius: var(--radius, 6px); padding: 1rem 1.1rem; }
dl.secret dt { color: var(--muted, #6b7280); }
dl.secret dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) { dl.secret { grid-template-columns: 1fr; gap: .15rem; } dl.secret dd { margin-bottom: .5rem; } }

/* Notes and callouts in a page. */
.note { color: var(--muted, #6b7280); font-size: .9rem; margin: .5rem 0 1rem; }
.callout { padding: .6rem .85rem; border-left: 4px solid var(--warn, #8a5a00); background: var(--warn-bg, #fffaf0); border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0; margin: 0 0 1rem; font-size: .92rem; }
.empty-state { text-align: center; padding: 1.5rem 1rem; color: var(--muted, #6b7280); }
.empty-state strong { display: block; color: var(--fg, #1d2330); margin-bottom: .25rem; }

/* Tariff grid editing and voice menu keys. */
.card table.rates input { width: 100%; min-width: 6rem; }
.digits label { font-size: .85rem; }
.pager { margin: -.5rem 0 1.25rem; }
.pager a { padding: .3rem .7rem; border: 1px solid var(--line, #d9dde5); border-radius: var(--radius, 4px); background: var(--surface, #fff); text-decoration: none; color: var(--accent-ink, #1f5fae); }

.page-head > .page-actions { flex: 0 0 auto; }
.card > .table-wrap:not(:last-child) { margin-bottom: 1rem; }
.card > form + form { margin-top: .9rem; }
.grid > button[type="submit"] { justify-self: start; min-width: 9rem; }
.card > form + .table-wrap, .card > details.panel + .table-wrap { margin-top: .9rem; }
.card > .table-wrap + form { margin-top: 1rem; }
.card > .card-head + .table-wrap { margin-top: 0; }
details.inline-panel > summary { list-style: none; }
details.inline-panel > summary::-webkit-details-marker { display: none; }

/* Long single-column forms (voice menus) inside a card or a panel: no second frame. */
.card .stack.wide, details.panel .stack.wide { background: transparent; border: 0; padding: 0; max-width: 48rem; }
.toolbar details.inline-panel { flex: 1 1 100%; }
.toolbar details.inline-panel .grid { border: 0; padding: .5rem 0 0; background: transparent; }

/* Narrow screens: forms one column, page actions full width. */
@media (max-width: 40rem) {
  .page-head h1 { font-size: 1.35rem; }
  .page-head .page-actions { width: 100%; }
  .toolbar label { max-width: none; flex-basis: 100%; }
  .toolbar button { width: 100%; }
  .card { padding: .85rem; }
  .card > .table-wrap { margin: 0 -.85rem -.85rem; }
}