/* Task-specific page layouts: operations, records, configuration and planning. */
#view-feedback .data-table { min-width: 1060px; table-layout: fixed; }
#view-feedback .data-table :is(th,td):nth-child(1) { width: 140px; }
#view-feedback .data-table th:nth-child(3) { width: 26%; }
#view-feedback .data-table :is(th,td):nth-child(4) { width: 21%; }
#view-feedback .data-table :is(th,td):nth-child(2) { width: 90px; white-space: nowrap; }
#view-feedback .data-table :is(th,td):nth-child(7) { width: 184px; white-space: nowrap; }
#view-feedback .data-table td:nth-child(3) { line-height: 1.65; }
#view-feedback .data-table :is(th,td):nth-child(6) { width: 82px; }
#view-feedback .data-table :is(th,td):last-child { width: 76px; }
.feedback-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#view-feedback .filter-bar { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,340px); }
/* These ticket/provider colors are inline in the existing renderer; override only their dark text. */
[data-theme="dark"] #view-feedback .data-table td:first-child { color: var(--tblr-link-color) !important; }
/* Environment details remain in the existing feedback detail dialog. */
#view-feedback .data-table :is(th,td):nth-child(5) { display: none; }
.feedback-status { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.status-pending { background: var(--warning-dim); color: var(--warning); }
.status-processing { background: var(--info-dim); color: var(--info); }
.status-resolved { background: var(--success-dim); color: var(--success); }
.status-closed { background: var(--surface-3); color: var(--quiet); }
#feedbackDetailModal .modal-box { width: min(100%,820px); }
#fbModalContent { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.8; margin: 0 0 20px; padding: 0; }
.feedback-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 20px 0; font-size: 12px; color: var(--muted); }
.feedback-meta > div { display: flex; flex-direction: column; gap: 4px; }
.feedback-meta b { font-size: 14px; font-weight: 400; overflow-wrap: anywhere; color: var(--text); }
.status-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.status-choices button[aria-pressed=true] { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); }
#fbAttachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#fbThread .ui-notice { padding: 14px 16px; border-left: 2px solid var(--line-strong); margin: 12px 0; background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
#fbThread .ui-notice p { margin: 6px 0; }
#fbThread form { display: grid; gap: 12px; margin: 20px 0; }
#fbThread form label { display: grid; gap: 8px; }
#fbThread textarea { width: 100%; min-height: 96px; }
#fbThread form button { justify-self: end; }
#fbThread .btn-secondary, #fbAttachments .btn-secondary { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.feedback-footer { padding-top: 20px; border-top: 1px solid var(--line); }
#view-keys .data-table { min-width: 960px; table-layout: fixed; }
#view-keys .data-table th:first-child { width: 106px; }
#view-keys .data-table th:nth-child(2) { width: 23%; }
#view-keys .data-table th:nth-child(3) { width: 23%; }
#view-keys .data-table th:nth-child(4) { width: 120px; }
#view-keys .data-table th:nth-child(5) { width: 80px; }
#view-keys .data-table th:last-child { width: 200px; }
#view-keys .data-table td { padding-block: 20px; }
.key-channel-name { font-size: 14px; font-weight: 600; color: var(--heading); line-height: 1.6; }
.key-model, .key-endpoint { margin-top: 6px; color: var(--muted); font: 12px/1.65 var(--font-mono); overflow-wrap: anywhere; }
.key-probe-time, .key-probe-error { margin-top: 6px; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.key-probe-time { color: var(--muted); }
.key-probe-error { color: var(--danger); }
#view-keys .data-table td:last-child > div { display: flex; flex-wrap: nowrap; gap: 6px; }
[data-theme="dark"] #view-keys .data-table td:first-child .badge[style*="#3b82f6"] { color: var(--tblr-primary-text-emphasis) !important; }
[data-theme="dark"] #view-keys .data-table td:first-child .badge[style*="#10b981"] { color: var(--tblr-success-text-emphasis) !important; }
[data-theme="dark"] #view-keys .data-table td:first-child .badge[style*="#f59e0b"] { color: var(--tblr-warning-text-emphasis) !important; }
[data-theme="dark"] #view-keys .data-table td:first-child .badge[style*="#ef4444"] { color: var(--tblr-danger-text-emphasis) !important; }
[data-theme="dark"] #view-keys .data-table td:first-child .badge[style*="#a855f7"] { color: color-mix(in srgb, var(--tblr-purple), #fff 40%) !important; }
[data-theme="dark"] #view-keys .data-table td:first-child .badge[style*="#f97316"] { color: color-mix(in srgb, var(--tblr-orange), #fff 40%) !important; }
[data-theme="dark"] #view-keys .badge.success { color: var(--tblr-success-text-emphasis); }
#view-keys .filter-bar { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,310px); }
#view-keys .search-input { width: 100%; }
#keyModal .modal-box { width: min(100%,800px); }
#keyModal .key-connection-fields { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
#keyModal .form-group:has(#keyApiKeyInput) { padding: 18px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-2); }
#keyModal .modal-form-actions { margin-top: 20px; }
#keyModal .admin-select-trigger { width: 100%; max-width: none; }
#keyApiKeyHint { line-height: 1.7; }
#keyProbeAlert { border: 1px solid var(--line); }
#diagnosticsFilters { display: grid; grid-template-columns: minmax(180px,1.5fr) minmax(100px,.7fr) repeat(2,minmax(150px,1fr)) auto; align-items: end; gap: 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
#diagnosticsFilters > .ui-actions { justify-content: flex-end; }
#view-diagnostics .data-table { min-width: 980px; table-layout: fixed; }
#view-diagnostics .data-table th:nth-child(1) { width: 180px; }
#view-diagnostics .data-table th:nth-child(2) { width: 36%; }
#view-diagnostics .data-table th:nth-child(3) { width: 20%; }
#view-diagnostics .data-table th:nth-child(4) { width: 178px; }
#view-diagnostics .data-table th:last-child { width: 104px; }
#view-diagnostics .data-table td:first-child { min-width: 180px; }
#view-logs .ops-filters { display: grid; grid-template-columns: minmax(240px,1.7fr) repeat(2,minmax(150px,1fr)) auto; align-items: end; gap: 12px; border-bottom: 1px solid var(--line); }
#view-logs .ops-filters > .ui-actions { justify-content: flex-end; }
#view-logs .data-table { min-width: 880px; table-layout: fixed; }
#view-logs .data-table th:first-child { width: 180px; }
#view-logs .data-table th:last-child { width: 108px; }
#view-logs .data-table th:nth-child(3) { width: 26%; }
:is(#view-logs,#view-diagnostics) .data-table td { padding-block: 16px; line-height: 1.65; }
:is(#view-logs,#view-diagnostics) .panel > .panel-head { padding-block: 12px; }
#view-diagnostics .data-table td:nth-child(4), #view-logs .data-table td:nth-child(4) { font: 12px/1.65 var(--font-mono); color: var(--muted); }
#view-logs .data-table td:nth-child(4) { min-width: 180px; }
.idea-create-form { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); background: var(--surface); margin-bottom: 24px; }
.idea-create-form .form-input { flex: 1; width: auto; min-width: min(260px,100%); }
.roadmap-management { border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); overflow: hidden; background: var(--surface); }
.roadmap-management:empty { border: 0; }
.roadmap-management .drawer-card-box { display: grid; grid-template-columns: minmax(200px,1fr) 170px 132px 100px 64px; gap: 20px; align-items: center; margin: 0; padding: 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.roadmap-management .drawer-card-box:last-child { border-bottom: 0; }
.roadmap-management h3 { margin: 0; font-size: 15px; font-weight: 500; color: var(--heading); overflow-wrap: anywhere; }
.roadmap-management label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.roadmap-management label:has(select) { display: grid; gap: 7px; }
.roadmap-management .admin-select-trigger { width: 100%; }
.roadmap-management label:has(input[type="checkbox"]) { align-self: end; min-height: var(--control-height); }
.roadmap-management .btn-primary:disabled { background: var(--surface-2); border-color: var(--line); color: var(--quiet); opacity: 1; }
.roadmap-management .btn-secondary { color: var(--danger); border-color: transparent; }
.roadmap-management > p { padding: 20px; color: var(--muted); }
#view-settings > .panel { display: grid; grid-template-columns: 220px minmax(0,1fr); }
#view-settings > .panel > .panel-head { padding: 20px; border-bottom: 0; border-right: 1px solid var(--line); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; background: var(--surface-2); }
#view-settings > .panel > .panel-body { padding: 20px; }
#view-settings .ops-stack { gap: 20px; }
#translationPolicyForm { padding: 16px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-2); }
.compact-setting { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.compact-setting > label { flex: 0 1 320px; }
.setting-explanation h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.setting-explanation p { max-width: 85ch; font-size: 14px; line-height: 1.8; margin: 8px 0; }
#view-settings [role=status] { font-size: 14px; color: var(--muted); margin: 0; }
.danger-zone { padding-top: 20px; border-top: 1px solid var(--line); }
.danger-zone button { color: var(--danger); }
.system-details { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 0; margin: 0; }
.system-details dt,.system-details dd { border-bottom: 1px solid var(--line); padding: 12px 0; margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.system-details dt { color: var(--muted); }
.system-snapshot { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--section-gap); align-items: start; }
.system-column { display: grid; align-content: start; gap: var(--section-gap); min-width: 0; }
.system-status-panel { margin: 0; padding: 20px; min-width: 0; }
.system-status-panel h2 { font-size: 16px; font-weight: 500; color: var(--heading); margin: 0 0 20px; }
.system-status-panel h3 { font-size: 14px; margin: 24px 0 12px; }
.system-health { grid-column: 1 / -1; }
.status-summary { font-size: 20px; color: var(--heading); font-weight: 600; margin: 0 0 24px; }
.status-facts { margin: 0 0 16px; }
.system-status-panel > :last-child { margin-bottom: 0; }
.status-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.status-facts > div { display: grid; grid-template-columns: 138px minmax(0,1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.status-facts > div:first-child { padding-top: 0; }
.status-facts dt { color: var(--muted); font-size: 14px; }
.status-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.status-facts dd p,.status-note { color: var(--quiet); font-size: 12px; line-height: 1.8; margin: 8px 0 0; }
.status-note { margin: 0 0 20px; }
.status-links { display: flex; flex-wrap: wrap; gap: 8px; }
.system-health .status-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.system-health .status-facts > div { display: block; padding: 16px; border: 0; border-radius: var(--control-radius); background: var(--surface-2); }
.system-health .status-facts dd { margin-top: 8px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
#systemSnapshotStatus { color: var(--muted); font-size: 12px; margin: -8px 0 20px; }
@media (max-width: 1270px) { #view-keys .filter-bar { grid-template-columns: 1fr; } #view-keys .search-input { max-width: none; } }
@media (max-width: 1100px) { .roadmap-management .drawer-card-box { grid-template-columns: minmax(160px,1fr) 160px 110px; } .roadmap-management .btn-primary { grid-column: 2; } .system-snapshot { grid-template-columns: minmax(0,1fr); } .system-column { display: contents; } .system-column-location > :first-child { order: 1; } .system-column-resources > :first-child { order: 2; } .system-column-location > :last-child { order: 3; } .system-column-resources > :last-child { order: 4; }  #diagnosticsFilters,#view-logs .ops-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } #diagnosticsFilters > .ui-actions,#view-logs .ops-filters > .ui-actions { grid-column: 1 / -1; } }
@media (max-width: 760px) { #view-feedback .filter-bar { grid-template-columns: 1fr; } #view-feedback .search-input { max-width: none; width: 100%; } #view-settings > .panel { display: block; } #view-settings > .panel > .panel-head { flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--line); padding: 18px; } #view-settings > .panel > .panel-body { padding: 18px; } .system-health .status-facts { grid-template-columns: 1fr; gap: 20px; } #view-logs .ops-filters { grid-template-columns: 1fr 1fr; } #view-logs .ops-filters > label:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { #keyModal .key-connection-fields { grid-template-columns: minmax(0,1fr); } #diagnosticsFilters,#view-logs .ops-filters { grid-template-columns: minmax(0,1fr); } .roadmap-management .drawer-card-box { grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 18px; } .roadmap-management h3 { grid-column: 1/-1; } .roadmap-management .btn-primary { grid-column: 1; } .feedback-meta { grid-template-columns: 1fr; } .feedback-footer { flex-wrap: wrap; gap: 12px; } .system-status-panel { padding: 18px; } .status-facts > div { grid-template-columns: 1fr; gap: 5px; } .system-details { grid-template-columns: 110px minmax(0,1fr); } }