/* W12: full-width operational workspace with independently scrolling lists. */
body:not(.auth-mode) { height:100dvh; overflow:hidden; }
.app-shell { height:100dvh; min-height:0; grid-template-columns:220px minmax(0,1fr); }
.sidebar { width:220px; }
.app-main { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.app-main > .topbar { flex:0 0 54px; min-height:54px; padding:0 28px; }
.content { width:100%; max-width:none; flex:1; min-height:0; margin:0; padding:24px 28px 0; display:flex; flex-direction:column; overflow:hidden; }
.page-heading { flex-shrink:0; margin-bottom:22px; align-items:center; }
.page-heading h1 { font-size:24px; line-height:1.25; }
.page-heading .eyebrow { font-size:10px; margin-bottom:5px; }
.page-actions { font-size:12px; }
.app-view { min-height:0; overflow-y:auto; padding-bottom:24px; scrollbar-gutter:stable; }
.app-view[hidden] { display:none!important; }
#view-cards, #view-devices, #view-audit { display:flex; flex:1; flex-direction:column; overflow:hidden; padding-bottom:0; }
#view-cards > :not(.table-wrap), #view-devices > :not(.table-wrap), #view-audit > :not(.table-wrap) { flex-shrink:0; }
.scope-toolbar { margin-bottom:16px; }
.section-heading { margin-bottom:12px; }
.cards-heading .result-title { font-size:14px; }
.cards-heading .button, .export-tools select { min-height:36px; }
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:12px 0; }
.filter-bar > .search-field { flex:1 1 200px; min-width:160px; }
.filter-bar select { min-width:110px; max-width:180px; }
.filter-bar > input { width:145px; }
.filter-bar input, .filter-bar select, .filter-bar .button { min-height:36px; font-size:12px; }
.selection-bar { margin:0 0 10px; border-left:0; border:1px solid var(--line); background:#f0f4fa; border-radius:5px; min-height:42px; padding:6px 10px; }
.table-wrap { flex:1; min-height:100px; overflow:auto; border-radius:6px 6px 0 0; background:#fff; }
.table-wrap table { width:100%; }
.table-wrap thead { position:sticky; top:0; z-index:2; }
.table-wrap th { background:#f4f6fa; color:#536174; font-size:11px; font-weight:650; height:42px; }
.table-wrap td { height:60px; padding-top:10px; padding-bottom:10px; }
.list-footer, #devices-pagination, #audit-pagination { flex-shrink:0; min-height:56px; margin:0; padding:10px 0; border-top:1px solid var(--line); background:var(--bg); }
.list-footer { justify-content:center; }
.copy-code { display:inline-flex; align-items:center; gap:10px; padding:4px 0; border:0; background:none; text-align:left; font-family:monospace; font-size:13px; cursor:pointer; }
.copy-code svg { width:15px; height:15px; flex-shrink:0; }
.code-link:hover, .copy-code:hover { color:#194cb2; text-decoration:underline; text-underline-offset:3px; }
.clipboard-fallback { position:fixed; top:0; left:-9999px; width:1px; height:1px; }
.drawer { height:100dvh; max-height:100dvh; width:min(480px,100%); margin:0 0 0 auto; border-radius:0; border:0; border-left:1px solid var(--line); padding:24px; }
.drawer .modal-heading { position:sticky; top:-24px; z-index:2; padding:20px 0; margin-top:-20px; background:#fff; border-bottom:1px solid var(--line); }
#view-dialogs { display:grid; grid-template-columns:220px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:12px 24px; flex:1; overflow:hidden; padding-bottom:20px; }
#view-dialogs > .section-heading { grid-column:1; grid-row:1; margin:0; align-items:center; }
#view-dialogs > .section-heading .result-title { font-size:14px; }
#view-dialogs > .section-heading .button { min-height:32px; padding:0 8px; font-size:12px; }
.dialog-list { grid-column:1; grid-row:2; display:flex; flex-direction:column; gap:8px; overflow:auto; margin:0; padding-right:4px; }
.dialog-item { flex-shrink:0; min-height:100px; padding:14px; }
.dialog-workbench { grid-column:2; grid-row:1/3; grid-template-columns:minmax(320px,1fr) minmax(280px,.7fr); align-items:start; overflow-y:auto; min-height:0; margin:0; padding:0 0 0 24px; gap:24px; border:0; border-left:1px solid var(--line); }
.dialog-workbench .form-stack { padding-bottom:6px; gap:16px; }
.dialog-workbench .section-heading { min-height:32px; margin-bottom:6px; }
.dialog-workbench h2 { font-size:16px; }
.dialog-workbench .form-stack > .button { position:sticky; bottom:0; margin-top:8px; z-index:1; }
.preview-section { position:sticky; top:0; }
.preview-stage { min-height:490px; margin-top:8px; background:#eef1f6; padding:24px 0; }
.dialog-preview { width:min(380px,calc(100% - 28px)); padding:24px; border:1px solid #dfe5ed; border-radius:8px; }
.dialog-preview h4 { margin:0 0 9px; font-size:20px; line-height:1.25; }
.dialog-preview p { min-height:0; margin:0 0 18px; font-size:14px; line-height:1.6; white-space:pre-wrap; }
.preview-input { font-size:15px; height:52px; display:flex; align-items:center; margin-bottom:18px; }
.preview-buttons { gap:8px; }
.preview-buttons button { min-height:44px; font-size:14px; border-radius:6px; }
.dialog-preview.style-2 { padding-top:20px; border-top-width:5px; }
.dialog-preview.style-3 { border-radius:2px; }
.settings-band { max-width:none; }
#view-settings { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 32px; }
#view-settings > .settings-hint { grid-column:1/-1; }
#view-settings > .settings-band { margin-bottom:0; align-self:start; }
@media(max-width:1400px) {
    #view-dialogs { grid-template-columns:190px minmax(0,1fr); gap:12px 16px; }
    .dialog-workbench { grid-template-columns:minmax(0,1fr); padding-left:16px; }
    .preview-section { position:static; }
    .preview-stage { min-height:400px; }
    .content { padding:20px 22px 0; }
}
@media(max-width:860px) {
    .app-shell { display:block; }
    .content { padding:18px 16px 0; }
    .app-main > .topbar { padding:0 16px; }
    .page-heading { flex-direction:row; gap:12px; align-items:center; margin-bottom:18px; }
    .page-heading h1 { font-size:22px; }
    .page-actions { width:auto; }
    .page-actions #updated-at { display:none; }
    #view-settings { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
    .content { padding:14px 12px 0; }
    .cards-heading { gap:8px; margin-bottom:0; }
    .cards-heading > .result-title { display:none; }
    .cards-tools { justify-content:space-between; gap:6px; }
    .cards-tools .button { padding:0 9px; font-size:11px; }
    .export-tools { gap:5px; }
    .export-tools select { max-width:120px; padding:6px; font-size:11px; }
    .scope-toolbar { margin-bottom:10px; }
    .scope-toolbar > .muted { font-size:11px; }
    .filter-bar { gap:6px; padding:10px 0; }
    .filter-bar > .search-field { flex-basis:100%; }
    .filter-bar select, .filter-bar > input { flex:1 1 90px; max-width:none; width:90px; min-width:0; }
    .filter-bar > .button { flex:0 1 auto; }
    .selection-bar { flex-wrap:wrap; gap:7px; font-size:11px; padding:6px 8px; }
    .selection-bar select { min-width:100px; width:110px; }
    .table-wrap { min-height:80px; }
    #view-dialogs { display:flex; flex-direction:column; overflow-y:auto; gap:14px; }
    #view-dialogs > .section-heading { flex-shrink:0; }
    .dialog-list { flex-direction:row; flex:0 0 auto; max-height:150px; padding-bottom:8px; }
    .dialog-item { flex:0 0 190px; }
    .dialog-workbench { flex:0 0 auto; padding:16px 0; border-left:0; border-top:1px solid var(--line); overflow:visible; }
    .drawer { width:100%; padding:20px; }
}