/* Foreman application component layer.
   New screens should compose Tabler primitives first. These rules normalize
   legacy templates until they are migrated and define stable responsive
   behavior for desktop, tablet, and large phones. */

/* Page heading: title/description on the left, actions on the right. */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.page-head h1, .page-head .page-title { margin:0; font-size:1.5rem; font-weight:700; }
.page-head p { margin:.25rem 0 0; color:var(--tblr-secondary-color); }
.page-head > .flex, .page-head > .d-flex { margin-left:auto; }

/* Legacy card anatomy mapped to Tabler spacing. Prefer .card-body in new markup. */
.card-pad { padding:var(--tblr-card-spacer-y,1rem) var(--tblr-card-spacer-x,1rem); }
.notice { padding:.75rem 1rem; border:1px solid var(--tblr-success-border-subtle,#b7dfc8); border-radius:var(--tblr-border-radius); background:var(--tblr-success-bg-subtle,#eaf7ef); color:var(--tblr-body-color); }
.error { padding:.75rem 1rem; border:1px solid var(--tblr-danger-border-subtle,#efc2c2); border-radius:var(--tblr-border-radius); background:var(--tblr-danger-bg-subtle,#fbecec); }

/* Legacy data tables receive the same behavior as .table-responsive/card-table. */
.table-wrap { width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
table.data { width:100%; margin:0; border-collapse:collapse; vertical-align:middle; }
table.data th { padding:.65rem .75rem; border-bottom:1px solid var(--tblr-border-color); color:var(--tblr-secondary-color); font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
table.data td { padding:.75rem; border-bottom:1px solid var(--tblr-border-color); }
table.data tbody tr:last-child td { border-bottom:0; }
table.data tbody tr:hover td { background:var(--tblr-bg-surface-secondary); }

/* Standard responsive content split. */
.two-col { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr); gap:1rem; align-items:start; }
.content > * { min-width:0; }
.card, .card-body, .table-responsive { min-width:0; }

/* Toolbars and forms should wrap before they overflow. */
.content .flex, .content .between { min-width:0; }
.content input, .content select, .content textarea { max-width:100%; }
.content img, .content svg, .content canvas { max-width:100%; }
.content .alert, .content .mono { overflow-wrap:anywhere; word-break:break-word; }
.studio, .studio-refs, .studio-stage, .studio-refs form,
.catalog-accordion, .catalog-accordion .accordion-item,
.catalog-accordion .accordion-collapse, .catalog-accordion .accordion-body {
  min-width:0; max-width:100%;
}
.studio-refs { overflow:hidden; }
.catalog-accordion .accordion-button { min-width:0; flex-wrap:wrap; }
.catalog-accordion .accordion-body { padding:.9rem; }
.refitem { min-width:0; max-width:100%; overflow:hidden; }
.refstrip { width:100%; min-width:0; max-width:100%; overflow-x:auto !important; overflow-y:hidden; contain:inline-size; }
.error-brand .brand-art img { width:64px; height:64px; }
.billing-config-alert { display:grid; grid-template-columns:max-content 1fr; gap:.2rem .75rem; align-items:baseline; }
.billing-config-alert strong, .billing-config-alert span { grid-column:1 / -1; }
.billing-config-alert code { grid-column:1 / -1; width:max-content; max-width:100%; padding:.15rem .4rem; border-radius:.25rem; background:var(--tblr-bg-surface-secondary); color:inherit; }

@media (max-width: 1199.98px) {
  .two-col { grid-template-columns:minmax(0,1fr); }
  .maskwrap { grid-template-columns:minmax(0,1fr); }
  .mask-stage-wrap { position:sticky; top:0; z-index:30; order:-1; background:var(--bg); padding-bottom:.4rem; }
  .mask-sections { max-height:none; overflow:visible; }
  .page-wrapper .content { padding-inline:1.1rem; }
}
@media (max-width: 991.98px) {
  .page-wrapper .content { padding:1rem .9rem 3rem; }
  .page-head { align-items:flex-start; }
  .page-head > .flex, .page-head > .d-flex { width:100%; margin-left:0; }
  .page-head > .flex .btn, .page-head > .d-flex .btn { flex:1 1 auto; justify-content:center; }
  .card-header { min-height:auto; flex-wrap:wrap; gap:.5rem; }
  .card-actions { margin-left:0; }
}
@media (max-width: 575.98px) {
  .page-wrapper .content { padding:.8rem .7rem 2.5rem; }
  .page-head { margin-bottom:1rem; }
  .page-head h1, .page-head .page-title { font-size:1.3rem; }
  .card-pad, .card-body { padding:.85rem; }
  .btn { min-height:2.5rem; }
  .page-head > .flex, .page-head > .d-flex { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .page-head > .flex > :last-child:nth-child(odd), .page-head > .d-flex > :last-child:nth-child(odd) { grid-column:1 / -1; }
  table.data th, table.data td, .card-table th, .card-table td { padding:.6rem; }
  /* Tabler owns dialog margins, including zero-margin mobile fullscreen. */
  table.responsive-cards, table.responsive-cards tbody,
  table.responsive-cards tr, table.responsive-cards td { display:block; width:100%; }
  table.responsive-cards thead { display:none; }
  table.responsive-cards tbody { padding:.45rem; }
  table.responsive-cards tbody tr { margin-bottom:.55rem; padding:.35rem .7rem; border:1px solid var(--tblr-border-color); border-radius:var(--tblr-border-radius); background:var(--tblr-bg-surface); }
  table.responsive-cards tbody tr:last-child { margin-bottom:0; }
  table.responsive-cards tbody td { display:grid; grid-template-columns:minmax(5.5rem,36%) minmax(0,1fr); gap:.65rem; padding:.45rem 0; border-bottom:1px solid var(--tblr-border-color-translucent); overflow-wrap:anywhere; }
  table.responsive-cards tbody td:last-child { border-bottom:0; }
  table.responsive-cards tbody td::before { content:attr(data-label); color:var(--tblr-secondary-color); font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
  table.responsive-cards tbody td[colspan] { display:block; }
  table.responsive-cards tbody td[colspan]::before { content:none; }
}

/* Jobs composes Tabler card/form/button primitives; only page geometry lives here. */
.jobs-create .card-header, .jobs-create .card-footer { background:transparent; }
.jobs-create .card-header p { max-width:65ch; font-size:.875rem; }
.jobs-create fieldset { min-width:0; }
.jobs-create legend { float:none; width:auto; }
.jobs-create .seq-pill { min-height:2.75rem; }
.jobs-create .seq-num.hidden { display:none; }
.jobs-create .seq-pill.picked .seq-num { background:rgba(255,255,255,.18); color:inherit; }
.jobs-address-matches { top:100%; max-height:15rem; overflow-y:auto; }
.jobs-table .jobs-property { display:inline-block; max-width:30rem; }
.app-footer { padding-block:1.25rem; font-size:.8125rem; line-height:1.6; }
.app-footer nav a { display:inline-flex; align-items:center; min-height:2rem; }
.app-footer-note { font-size:.75rem; }
@media (max-width:767.98px) {
  .jobs-create .card-footer .btn { width:100%; }
  .jobs-table, .jobs-table tbody, .jobs-table tr, .jobs-table td { display:block; width:100%; }
  .jobs-table thead { display:none; }
  .jobs-table tbody tr { padding:1rem; border-bottom:1px solid var(--tblr-border-color); }
  .jobs-table tbody tr:last-child { border-bottom:0; }
  .jobs-table tbody td { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; padding:.25rem 0; border:0; }
  .jobs-table tbody td:first-child { display:block; padding:0 0 .5rem; font-size:1rem; }
  .jobs-table tbody td:not(:first-child)::before { content:attr(data-label); width:5.5rem; flex-shrink:0; color:var(--tblr-secondary-color); font-size:.8125rem; }
  .jobs-table tbody td[colspan] { display:block; }
  .jobs-table .jobs-property { overflow-wrap:anywhere; }
  .app-footer .content > .d-flex { align-items:flex-start !important; }
  .app-footer-note span { display:block; }
}

.notification-count { font-size:.65rem; padding:.05rem .35rem; position:absolute; top:-4px; right:-6px; }

.userbox-btn > img.avatar { object-fit:cover; }

/* Mobile shell controls sit on the dark sidebar in both color modes. */
.navbar-vertical[data-bs-theme="dark"] [data-theme-toggle] { color:#fff; }

/* The mobile header contains dropdowns; desktop-only sidebar scrolling must
   not clip their links below the header's collapsed height. */
@media (max-width: 991.98px) {
  .navbar.navbar-vertical.navbar-expand-lg {
    overflow: visible;
    z-index: 1030;
  }
}