/* Container workspace: compact list, resource cards and contextual detail panel. */
.container-manager { min-width: 0; }
.containers-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 22px; }
.containers-heading-main { display:flex; align-items:center; gap:16px; }
.containers-heading-icon { color:#8735ef; display:grid; place-items:center; }
.containers-heading-icon .ui-icon { width:37px; height:37px; stroke-width:1.8; }
.containers-heading h1 { margin:0 0 6px; color:#1b2945; font-size:28px; letter-spacing:-.8px; }
.containers-heading p { margin:0; color:#7b89a0; font-size:12px; line-height:1.5; }
.new-container-button { display:flex; align-items:center; gap:7px; flex-shrink:0; padding:10px 13px; border:1px solid #d8e4fc; border-radius:7px; background:#edf3ff; color:#728ec1; font-size:11px; }
.new-container-button:disabled { cursor:not-allowed; opacity:1; }
.new-container-button .ui-icon { width:14px; height:14px; }
.new-container-button span { font-size:8px; margin-left:5px; color:#8ba0c3; }
.container-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.container-summary-card { display:flex; align-items:center; gap:15px; padding:18px; background:linear-gradient(120deg,#fff,var(--pale)); border:1px solid #e5eaf4; border-radius:10px; min-width:0; }
.container-summary-icon { display:grid; place-items:center; width:43px; height:43px; background:var(--tint); color:var(--accent); border-radius:10px; flex-shrink:0; }
.container-summary-icon .ui-icon { width:25px; height:25px; }
.container-summary-card h2 { font-size:11px; color:#63738d; font-weight:500; margin:0 0 6px; }
.container-summary-card strong { font-size:24px; color:#22324d; font-weight:650; line-height:1; }
.container-summary-card p { font-size:9px; color:#8a98ae; margin:7px 0 0; }
.container-browser { padding:12px 12px 0; min-width:0; }
.container-toolbar { display:flex; align-items:center; gap:10px; padding:0 0 12px; }
.container-local-search { position:relative; flex:1; min-width:160px; }
.container-local-search>.ui-icon { position:absolute; left:11px; top:10px; width:15px; height:15px; color:#8395b1; }
.container-local-search input { height:35px; border:1px solid #edf1f8; background:#f3f6fc; border-radius:6px; padding:0 12px 0 33px; font-size:11px; box-shadow:none; }
.filter-control { position:relative; margin:0; width:130px; flex-shrink:0; }
.filter-control select { appearance:none; width:100%; height:35px; padding:0 28px 0 10px; border:1px solid #e4eaf5; border-radius:6px; color:#526583; background:#fff; font:inherit; font-weight:500; font-size:11px; cursor:pointer; }
.filter-control>.ui-icon { position:absolute; right:10px; top:13px; width:10px; height:10px; transform:rotate(90deg); color:#5683d5; pointer-events:none; }
.filter-control select:focus-visible { outline:2px solid #87b2ff; outline-offset:2px; }
.container-view-toggle { display:flex; gap:4px; margin-left:8px; }
.container-view-toggle button { width:33px; height:33px; border:0; border-radius:6px; background:#f1f5fb; color:#8395b1; display:grid; place-items:center; }
.container-view-toggle button.selected { color:#2468e8; background:#e5efff; }
.container-view-toggle .ui-icon { width:17px; height:17px; }
.containers-table { width:100%; text-align:left; border-collapse:collapse; white-space:nowrap; }
.containers-table th { background:#f5f8fd; color:#6f83a2; padding:11px 9px; font-size:10px; font-weight:500; letter-spacing:0; text-transform:none; border-bottom:1px solid #eaf0fa; }
.containers-table td { padding:12px 9px; font-size:10px; color:#596f91; border-bottom:1px solid #eff3f9; vertical-align:middle; }
.containers-table tr:hover { background:#fafcff; }
.containers-table tr.selected-container { background:#f1f6ff; }
.check-cell { width:28px; }
.container-manager input[type="checkbox"] { width:12px; height:12px; margin:0; padding:0; border-radius:3px; box-shadow:none; accent-color:#2468e8; cursor:pointer; }
.container-name-button { display:flex; align-items:center; gap:9px; background:none; border:0; padding:0; text-align:left; color:#2b4167; font:inherit; }
.container-name-button strong { display:block; font-size:11px; font-weight:600; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.container-name-button small { display:block; margin-top:4px; color:#9aa8bd; font-size:9px; }
.container-tile { display:grid; place-items:center; width:30px; height:31px; flex-shrink:0; border-radius:7px; color:#1383f8; background:linear-gradient(135deg,#d4edff,#edf6ff); border:1px solid #d7eaff; }
.container-tile .ui-icon { width:19px; height:19px; }
.container-image { max-width:165px; overflow:hidden; text-overflow:ellipsis; }
.container-state { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:20px; font-size:9px; line-height:1; background:#eff2f7; color:#74849e; text-transform:capitalize; white-space:nowrap; }
.container-state::before { content:""; width:5px; height:5px; background:currentColor; border-radius:50%; }
.state-running { background:#e3f8ec; color:#169766; }
.state-exited,.state-dead { background:#fff0f2; color:#db526e; }
.state-paused,.state-restarting { background:#fff6e2; color:#b58319; }
.container-stat { min-width:64px; font-size:9px; color:#778baa; }
.container-stat span { white-space:nowrap; }
.container-stat progress { display:block; width:64px; height:4px; border:0; border-radius:4px; overflow:hidden; margin-top:6px; appearance:none; background:#e6ecf5; }
.container-stat progress::-webkit-progress-bar { background:#e6ecf5; border-radius:4px; }
.container-stat progress::-webkit-progress-value { background:#34bc8b; border-radius:4px; }
.container-stat progress::-moz-progress-bar { background:#34bc8b; border-radius:4px; }
.container-tags { display:flex; flex-wrap:wrap; gap:4px; max-width:170px; }
.container-tag { display:inline-block; background:#eaf2ff; color:#4380da; border-radius:4px; padding:3px 5px; font-size:8px; white-space:nowrap; }
.container-network-cell { max-width:90px; white-space:normal; overflow-wrap:anywhere; }
.container-uptime { max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.actions-header { text-align:right; }
.container-row-actions { display:flex; justify-content:flex-end; gap:5px; }
.row-action { display:grid; place-items:center; width:28px; height:28px; padding:0; border:1px solid #e5edf8; background:#f5f8fd; color:#6e89b2; border-radius:6px; }
.row-action .ui-icon { width:14px; height:14px; }
.row-action:hover:not(:disabled) { color:#286fe8; border-color:#bfd5f8; background:#eaf2ff; }
.row-action:disabled { opacity:.35; cursor:not-allowed; }
.row-action.action-stop { color:#ed4466; background:#fff0f3; border-color:#ffe4ea; }
.row-action.action-start { color:#10ad76; background:#e5f9ef; border-color:#d3f2e2; }
.row-action.action-stop .ui-icon { fill:currentColor; stroke-width:0; }
.container-action-menu { position:fixed; z-index:90; width:190px; padding:6px; border:1px solid #e0e8f5; background:white; border-radius:9px; box-shadow:0 12px 30px #23385624; }
.container-menu-item { width:100%; display:flex; align-items:center; gap:9px; padding:10px; border:0; background:white; text-align:left; border-radius:5px; color:#5b7396; font-size:11px; }
.container-menu-item .ui-icon { width:15px; height:15px; }
.container-menu-item:hover:not(:disabled) { background:#f1f6ff; color:#326ccb; }
.container-menu-item.danger { color:#d4576c; border-top:1px solid #eff2f7; }
.container-menu-item:disabled { cursor:not-allowed; color:#a9b4c5; opacity:1; }
.container-pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 2px; color:#8b9bb3; font-size:9px; }
.container-pagination>div { display:flex; align-items:center; gap:9px; }
.container-pagination button { border:1px solid #e5edf8; background:#f9fbff; border-radius:4px; width:25px; height:25px; color:#6c87ad; }
.container-pagination button:disabled { opacity:.35; cursor:not-allowed; }
.stats-note { color:#a6b2c4; font-size:8px; }
.container-bulk { display:flex; align-items:center; gap:8px; padding:10px 7px; border-top:1px solid #edf2fa; color:#526d96; font-size:10px; }
.container-bulk button { display:flex; align-items:center; gap:4px; border:1px solid #e2eafa; border-radius:5px; padding:5px 8px; background:white; color:#5277af; font-size:10px; }
.container-bulk button:disabled { cursor:not-allowed; opacity:.4; }
.container-bulk .ui-icon { width:12px; height:12px; }
.container-bulk .danger { color:#d85b72; }
.container-bulk .bulk-clear { margin-left:auto; border:0; }
.container-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-bottom:10px; }
.container-grid-card { padding:15px; border:1px solid #e6edf8; border-radius:9px; min-width:0; }
.grid-card-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.grid-container-name { border:0; background:none; padding:0; color:#2e4b75; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.container-grid-card .container-image { font-size:10px; max-width:100%; white-space:nowrap; margin:12px 0 4px; }
.container-muted { color:#8b9cb4; font-size:10px; line-height:1.7; }
.grid-card-resources { display:flex; gap:20px; margin:15px 0; }
.container-grid-card .container-row-actions { border-top:1px solid #edf2f9; padding-top:10px; margin-top:12px; }
.container-detail-panel { display:grid; grid-template-columns:145px minmax(0,1fr); margin-top:15px; overflow:hidden; }
.container-detail-tabs { display:flex; flex-direction:column; gap:4px; padding:12px 9px; background:#fafcff; border-right:1px solid #eaf0fa; }
.container-detail-tabs button { display:flex; align-items:center; gap:9px; background:transparent; border:0; padding:10px 9px; border-radius:6px; text-align:left; color:#7589a8; font-size:10px; white-space:nowrap; }
.container-detail-tabs .ui-icon { width:14px; height:14px; }
.container-detail-tabs [aria-selected="true"] { color:#2873ee; background:#e6f0ff; }
.container-detail-main { min-width:0; }
.container-detail-header { display:flex; align-items:center; gap:12px; padding:15px 17px; border-bottom:1px solid #eaf0f9; }
.detail-cube { display:grid; place-items:center; height:36px; width:36px; border:1px solid #dceaff; background:#edf5ff; border-radius:8px; color:#2489fc; flex-shrink:0; }
.detail-cube .ui-icon { width:23px; height:23px; }
.detail-identity { flex:1; min-width:0; }
.detail-identity>div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.detail-identity h2 { font-size:15px; color:#2d446b; margin:0; overflow-wrap:anywhere; }
.detail-identity p { font-size:9px; color:#8196b6; margin:6px 0 0; overflow-wrap:anywhere; }
.container-tab-content { min-height:190px; padding:18px; font-size:11px; color:#7890b1; }
.container-detail-columns { display:grid; grid-template-columns:1.1fr 1.1fr .8fr; gap:22px; }
.container-definitions { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 14px; align-content:start; margin:0; font-size:10px; }
.container-definitions dt { color:#8d9fb9; }
.container-definitions dd { margin:0; color:#577098; overflow-wrap:anywhere; line-height:1.55; }
.mount-preview { display:flex; flex-direction:column; gap:5px; }
.mount-chip { font-size:8px; background:#f2f6fb; padding:4px 5px; border-radius:4px; color:#8297b6; overflow-wrap:anywhere; }
.container-info-table { white-space:normal; }
.container-info-table th { font-size:9px; text-transform:none; background:#f6f9fe; color:#8195b4; }
.container-info-table td { font-size:10px; color:#6681a5; overflow-wrap:anywhere; max-width:300px; }
.container-log-output,.container-inspect-output { max-height:330px; overflow:auto; padding:16px; border-radius:8px; font:11px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; margin:12px 0 0; white-space:pre; }
.container-log-output { color:#c2d5ee; background:#15253b; }
.container-inspect-output { color:#527197; background:#f3f7fc; }
.container-sensitive-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.container-text-button { background:#f2f7ff; border:1px solid #dfeafb; color:#4280df; padding:7px 10px; border-radius:5px; font-size:10px; }
.container-detail-main>.error { margin:10px 16px; }
.container-feedback { padding:12px 14px; border:1px solid #dbe7fa; background:#eff5ff; color:#4e709f; border-radius:7px; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.container-footnote { color:#97a7be; font-size:9px; margin:16px 2px 0; }
.container-confirm { width:min(440px,calc(100vw - 32px)); border:1px solid #e2eaf6; border-radius:15px; padding:25px; color:#345071; box-shadow:0 25px 90px #10243a40; }
.container-confirm::backdrop { background:#0e203a70; backdrop-filter:blur(3px); }
.confirm-icon { display:grid; place-items:center; width:39px; height:39px; border-radius:10px; background:#eef4ff; color:#447bc7; margin-bottom:15px; }
.container-confirm h2 { color:#263e62; font-size:20px; margin:0 0 12px; overflow-wrap:anywhere; }
.container-confirm p { font-size:12px; line-height:1.65; color:#7c90ac; }
.container-confirm ul { max-height:120px; overflow:auto; padding:10px 12px 10px 28px; background:#f5f8fd; border-radius:6px; font-size:11px; line-height:1.8; overflow-wrap:anywhere; }
.container-confirm .infrastructure-warning { background:#fff7e8; color:#a27b36; padding:10px; border-radius:6px; }
#ct-confirm-label { margin:15px 0; font-size:11px; color:#7187a6; }
#ct-confirm-text { margin-top:8px; height:38px; padding:0 10px; font-size:12px; }
.confirm-buttons { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.confirm-buttons button { padding:9px 15px; border:1px solid #e2eaf6; border-radius:6px; color:#637b9e; background:white; font-size:12px; }
#ct-confirm-action { background:#276ce4; border-color:#276ce4; color:white; }
#ct-confirm-action:disabled { opacity:.4; cursor:not-allowed; }
@media(max-width:1250px) { .container-toolbar { gap:8px; } .filter-control { width:110px; } .container-local-search { min-width:130px; } .container-detail-columns { grid-template-columns:1fr 1fr; gap:20px; } .container-detail-columns>dl:last-child { grid-column:1/-1; grid-template-columns:repeat(4,auto minmax(0,1fr)); } .container-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1050px) { .container-toolbar { flex-wrap:wrap; } .container-local-search { flex-basis:100%; } .container-view-toggle { margin-left:auto; } .containers-heading { align-items:flex-start; } .new-container-button span { display:none; } .container-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .container-detail-panel { grid-template-columns:120px minmax(0,1fr); } .container-detail-columns { grid-template-columns:1fr; } .container-detail-columns>dl:last-child { grid-column:auto; grid-template-columns:auto minmax(0,1fr); } }
@media(max-width:760px) { .containers-heading { flex-direction:column; gap:13px; } .containers-heading h1 { font-size:25px; } .containers-heading p { font-size:11px; } .containers-heading-main { gap:12px; } .containers-heading-icon .ui-icon { width:30px; height:30px; } .new-container-button { font-size:10px; padding:8px 11px; } .new-container-button span { display:inline; } .container-summary-grid { gap:9px; } .container-summary-card { padding:14px 10px; gap:10px; } .container-summary-icon { width:32px; height:35px; } .container-summary-icon .ui-icon { width:20px; height:20px; } .container-summary-card h2 { font-size:10px; } .container-summary-card strong { font-size:22px; } .container-summary-card p { font-size:8px; } .container-browser { padding:10px 8px 0; } .filter-control { flex:1; width:auto; min-width:84px; } .filter-control select { font-size:9px; padding-left:7px; } .container-view-toggle { margin-left:0; } .container-view-toggle button { width:29px; height:29px; } .container-toolbar { gap:6px; } .container-local-search { min-width:100%; } .container-pagination { font-size:8px; } .stats-note { display:none; } .container-bulk { flex-wrap:wrap; } .container-grid { grid-template-columns:1fr; } .container-detail-panel { grid-template-columns:1fr; } .container-detail-tabs { flex-direction:row; overflow:auto; padding:8px; border-right:0; border-bottom:1px solid #eaf0fa; } .container-detail-tabs button { padding:8px; font-size:9px; gap:5px; } .container-detail-header { padding:12px 10px; flex-wrap:wrap; gap:9px; } .detail-identity { flex-basis:60%; } #ct-detail-actions { margin-left:auto; } .container-tab-content { padding:13px; } .container-sensitive-controls { align-items:flex-start; flex-direction:column; } .container-definitions { font-size:9px; gap:10px; } .container-log-output,.container-inspect-output { font-size:10px; } }

/* Docker workspace reference layout. */
[data-current-view="containers"] .update-bar { margin:0 0 10px; }
.containers-heading { margin:0 0 23px; align-items:center; }
.containers-heading-main { gap:18px; }
.containers-heading-icon { color:#344f97; }
.containers-heading-icon .ui-icon { width:52px; height:52px; stroke-width:2.3; }
.containers-heading h1 { color:#0b1738; font-size:32px; letter-spacing:-.8px; margin-bottom:4px; }
.containers-heading p { font-size:16px; color:#566eab; }
.new-container-button { padding:12px 17px; gap:11px; background:#0678ff; border-color:#0678ff; color:#fff; font-size:14px; border-radius:6px; }
.new-container-button .ui-icon { width:20px; height:20px; }
.new-container-button .ui-icon:last-child { width:12px; height:12px; transform:rotate(90deg); }
.new-container-button span { color:#dceaff; font-size:9px; }
.container-summary-grid { grid-template-columns:1.12fr .88fr 1fr 1fr; gap:14px; margin-bottom:14px; }
.container-summary-card { min-height:134px; align-items:flex-start; padding:16px 18px; gap:22px; background:#ffffffd9; border:1px solid #e2eafb; border-radius:6px; }
.container-summary-icon { width:66px; height:65px; border-radius:10px; }
.container-summary-icon .ui-icon { width:35px; height:35px; stroke-width:2; }
.container-summary-card h2 { margin:8px 0 8px; color:#0b204f; font-size:14px; }
.container-summary-card strong { font-size:30px; color:#0b1945; }
.container-summary-card p { color:#6a7bae; font-size:11px; line-height:1.5; margin-top:12px; }
.total-containers-card { display:grid; grid-template-columns:66px 1fr; column-gap:24px; row-gap:15px; }
.container-state-totals { grid-column:1 / -1; display:flex; justify-content:space-between; gap:12px; font-size:12px; white-space:nowrap; }
.container-state-totals > span { display:flex; align-items:center; gap:5px; }
.container-state-totals i { width:10px; height:10px; border-radius:50%; display:inline-block; background:currentColor; margin-right:3px; }
.running-total { color:#00ac71; }.stopped-total { color:#6578a8; }.paused-total { color:#e99c16; }
.container-resource-tabs { display:flex; gap:4px; border-bottom:1px solid #e1eafb; margin:0 0 20px; }
.container-resource-tabs button { background:none; border:0; border-bottom:2px solid transparent; border-radius:0; padding:15px 25px; font:inherit; font-size:15px; color:#4860a1; }
.container-resource-tabs button.active { color:#007aff; border-bottom-color:#007aff; }
.container-resource-tabs button:disabled { cursor:not-allowed; }
.container-resource-tabs small { margin-left:5px; font-size:8px; color:#9aa9c8; }
.container-browser { padding:0; }
.container-toolbar { padding:0 0 20px; gap:14px; align-items:center; }
.container-local-search { flex:0 1 350px; min-width:200px; margin-right:14px; }
.container-local-search input { background:#fff; border:1px solid #dfe8fa; height:40px; border-radius:5px; padding-left:49px; font-size:13px; }
.container-local-search input::placeholder { color:#7a8fc0; }
.container-local-search > .ui-icon { width:20px; height:20px; top:10px; left:17px; color:#526ca6; }
.filter-control { width:168px; }
.filter-control select { height:40px; font-size:14px; color:#102653; border-color:#dfe8fa; border-radius:5px; padding-left:14px; }
.filter-control > .ui-icon { top:15px; right:15px; color:#415c98; width:11px; height:11px; }
.container-toolbar-actions { display:flex; gap:10px; align-items:center; margin-left:auto; }
.container-tool-button,.container-options summary { display:flex; justify-content:center; align-items:center; height:40px; padding:0 15px; border:1px solid #dfe8fa; background:#fff; border-radius:5px; gap:10px; color:#112552; font:inherit; font-size:14px; }
.container-tool-button .ui-icon,.container-options summary .ui-icon { width:20px; height:20px; }
.prune-button:disabled { cursor:not-allowed; color:#94a2bc; }
.container-options { position:relative; }
.container-options summary { cursor:pointer; list-style:none; }
.container-options summary::-webkit-details-marker { display:none; }
.container-options-popover { position:absolute; right:0; top:calc(100% + 8px); padding:15px; border:1px solid #dfe8fa; background:#fff; border-radius:8px; box-shadow:0 8px 30px #0a234c20; z-index:15; width:210px; display:flex; flex-direction:column; gap:13px; }
.container-options-popover .filter-control { width:100%; }
.container-options-popover .container-view-toggle { margin:0; }
.container-view-toggle button { width:40px; height:36px; }
#ct-table-wrap { border:1px solid #e0eafb; border-radius:6px; }
.containers-table { table-layout:fixed; min-width:980px; }
.containers-table th { background:#f6f9ff; color:#12254f; font-size:14px; font-weight:500; padding:15px 14px; }
.containers-table td { padding:12px 14px; height:59px; font-size:14px; color:#425da0; border-bottom-color:#edf2fb; }
.containers-table th:first-child { width:4.5%; }
.containers-table th:nth-child(2) { width:19%; }
.containers-table th:nth-child(3) { width:16%; }
.containers-table th:nth-child(4) { width:11%; }
.containers-table th:nth-child(5) { width:12%; }
.containers-table th:nth-child(6) { width:9%; }
.containers-table th:nth-child(7) { width:7%; }
.containers-table th:nth-child(8) { width:11%; }
.containers-table th:last-child { width:10.5%; }
.containers-table td:nth-child(2),.containers-table td:nth-child(5),.containers-table td:nth-child(8) { border-right:1px solid #f3f6fc; }
.container-manager input[type="checkbox"] { width:16px; height:16px; accent-color:#007aff; }
.container-name-button { gap:15px; max-width:100%; }
.container-name-button > span:last-child { min-width:0; }
.container-name-button strong { font-size:15px; color:#0d1e48; max-width:100%; }
.container-name-button small { margin-top:3px; font-size:13px; color:#6d7faa; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.container-tile { width:32px; height:35px; border:0; background:none; color:#007aff; }
.container-tile .ui-icon { width:30px; height:30px; stroke-width:2.2; }
.tile-database { color:#277ca1; }.tile-network { color:#00a66d; }
.container-state { padding:8px 10px; font-size:13px; border-radius:6px; gap:7px; }
.container-state::before { width:9px; height:9px; }
.state-running { color:#00a567; background:#e2fbef; }
.state-exited,.state-dead { background:#ffedf0; color:#f4163e; }
.container-tags { display:block; max-width:100%; }
.container-tag { display:block; padding:0; font-size:13px; color:#40599a; background:none; line-height:1.6; }
.container-uptime { font-size:13px!important; }
.container-stat { font-size:13px; min-width:0; color:#142752; }
.container-stat progress { width:100%; max-width:112px; height:6px; margin-top:6px; background:#e0e7f3; }
.container-stat[data-stat-kind="cpu"] progress { display:none; }
.container-row-actions { gap:9px; }
.row-action { width:30px; height:31px; background:#fff; color:#516895; border-color:#dfe8fa; border-radius:5px; }
.row-action .ui-icon { width:17px; height:17px; }
.row-action.action-stop,.row-action.action-start { color:#526995; background:#fff; border-color:#dfe8fa; }
.row-action:last-child { border-color:transparent; }
.container-pagination { padding:14px 2px; font-size:11px; color:#6d82a7; }
.stats-note { font-size:9px; color:#8495b2; }
.container-footnote { font-size:10px; line-height:1.6; }
.container-grid-card { background:#fff; }
.container-grid-card .container-stat progress { width:90px; }
.container-detail-header .row-action { flex-shrink:0; }
.container-detail-panel .container-state { font-size:11px; }
@media(max-width:1250px) {
 .container-toolbar { flex-wrap:wrap; }
 .container-local-search { flex:1; margin-right:0; }
 .container-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .container-summary-card { min-height:125px; }
 .container-toolbar-actions { margin-left:auto; }
 .new-container-button span { display:none; }
 .containers-heading p { font-size:14px; }
}
@media(max-width:760px) {
 .containers-heading { align-items:flex-start; gap:15px; }
 .containers-heading-icon .ui-icon { width:39px; height:39px; }
 .containers-heading-main { gap:12px; }
 .containers-heading h1 { font-size:27px; }
 .containers-heading p { font-size:12px; }
 .new-container-button { font-size:12px; padding:10px 13px; }
 .new-container-button span { display:inline; }
 .container-summary-grid { gap:9px; }
 .container-summary-card { padding:13px 10px; gap:10px; min-height:132px; }
 .container-summary-icon { width:39px; height:45px; }
 .container-summary-icon .ui-icon { width:25px; height:25px; }
 .container-summary-card h2 { font-size:11px; }
 .container-summary-card strong { font-size:25px; }
 .container-summary-card p { font-size:9px; }
 .total-containers-card { grid-template-columns:39px 1fr; row-gap:8px; }
 .container-state-totals { flex-wrap:wrap; gap:6px 10px; font-size:9px; justify-content:flex-start; }
 .container-state-totals i { width:6px; height:6px; margin-right:0; }
 .container-resource-tabs { justify-content:space-between; gap:0; }
 .container-resource-tabs button { padding:12px 8px; font-size:12px; }
 .container-resource-tabs small { display:none; }
 .container-local-search { flex-basis:100%; min-width:100%; }
 .filter-control { min-width:110px; flex:1; }
 .filter-control select { font-size:12px; }
 .container-toolbar { gap:9px; }
 .container-toolbar-actions { width:100%; justify-content:flex-end; }
 .container-options-popover { width:190px; }
 .container-options-popover .filter-control { flex:none; }
 .container-pagination { font-size:10px; flex-wrap:wrap; }
 .container-detail-panel .container-state { font-size:10px; }
}
/* Containers content status; the application shell is shared. */
[data-current-view="containers"] .update-bar { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* Full-page container overview. */
.container-manager.detail-open > :not(#ct-detail-panel):not(#ct-feedback):not(.container-action-menu) { display:none; }
.container-detail-panel { display:block; margin:0; overflow:visible; border:0; background:none; }
.container-breadcrumb { display:flex; gap:12px; align-items:center; font-size:15px; color:#4c64a0; margin:0 0 24px; }
.container-breadcrumb button { padding:0; background:none; border:0; color:#2854a2; font:inherit; }
.container-breadcrumb .ui-icon { width:13px; height:13px; }
.container-detail-header { align-items:flex-start; padding:0 10px 23px; gap:24px; border:0; }
.detail-cube { width:61px; height:65px; margin-top:6px; border:0; background:#e6f1ff; color:#006eff; }
.detail-cube .ui-icon { width:45px; height:45px; }
.detail-cube.nginx-emblem { background:#00ac62; color:white; font-size:32px; font-weight:700; border-radius:0; clip-path:polygon(50% 0,94% 23%,94% 77%,50% 100%,6% 77%,6% 23%); }
.detail-identity > div { gap:20px; }
.detail-identity h2 { font-size:32px; color:#0b1536; letter-spacing:-.5px; }
.detail-identity p { margin:9px 0 5px; font-size:16px; color:#536aab; }
.container-id-line { display:flex; align-items:center; gap:8px!important; color:#536aab; font-size:15px; }
.copy-id-button { border:0; background:none; color:#5770ae; padding:3px; display:grid; place-items:center; }
.copy-id-button .ui-icon { width:17px; height:17px; }
#ct-copy-status { font-size:11px; color:#00a86b; }
.container-detail-header .container-state { padding:9px 12px; font-size:14px; }
.container-detail-header .container-state::before { display:none; }
.container-detail-actions { display:flex; gap:13px; margin-left:auto; padding-top:5px; }
.detail-action { display:flex; align-items:center; gap:10px; padding:11px 15px; border:1px solid #d3e0ff; border-radius:5px; background:#fff; color:#006fff; font:inherit; font-size:14px; }
.detail-action .ui-icon { width:19px; height:19px; }
.detail-action-remove { color:#f01932; border-color:#fa7380; }
.detail-action:disabled { color:#91a4cb; border-color:#e3ebfa; background:#ecf2ff; cursor:not-allowed; }
.detail-action-remove:disabled { background:#fff8f9; color:#d59da5; border-color:#f2d8dd; }
.container-detail-tabs { display:flex; flex-direction:row; align-items:center; gap:3px; padding:0; margin:0 0 21px; background:none; border:0; border-bottom:1px solid #e0e9fa; overflow:auto; }
.container-detail-tabs button { padding:15px 22px; background:none; border:0; border-bottom:2px solid transparent; border-radius:0; font-size:15px; color:#4f65a0; }
.container-detail-tabs [aria-selected="true"] { background:none; color:#007aff; border-bottom-color:#007aff; }
.container-detail-tabs button:disabled { cursor:not-allowed; }
.container-detail-tabs small { font-size:8px; color:#9baacf; margin-left:3px; }
.container-tab-content { padding:0; color:#233d72; }
.container-detail-panel > .error { margin:0 0 16px; }
.detail-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:15px; }
.detail-metric-card { display:flex; gap:18px; align-items:flex-start; padding:15px; border:1px solid #e1eafa; border-radius:7px; background:#fff; min-height:116px; min-width:0; }
.detail-metric-icon { display:grid; place-items:center; width:59px; height:59px; border-radius:10px; background:var(--tint); color:var(--accent); flex-shrink:0; }
.detail-metric-icon .ui-icon { width:31px; height:31px; stroke-width:2; }
.detail-metric-copy { min-width:0; flex:1; }
.detail-metric-copy h3 { margin:5px 0 9px; font-size:14px; font-weight:500; color:#0c214f; }
.detail-metric-copy strong { display:block; font-size:22px; line-height:1.4; color:#0b1940; overflow-wrap:anywhere; }
#ct-overview-memory { font-size:17px; }
#ct-overview-ports { font-size:14px; font-weight:500; }
#ct-overview-uptime { font-size:20px; }
.detail-metric-copy progress { appearance:none; display:block; width:100%; height:9px; margin-top:12px; border:0; border-radius:6px; overflow:hidden; background:#e6edf8; }
.detail-metric-copy progress::-webkit-progress-bar { background:#e6edf8; }
.detail-metric-copy progress::-webkit-progress-value { background:#00b578; border-radius:6px; }
.detail-metric-copy progress::-moz-progress-bar { background:#00b578; }
.detail-overview-middle { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:14px; margin-bottom:15px; }
.detail-overview-right { display:flex; flex-direction:column; gap:15px; min-width:0; }
.detail-surface { background:#fff; border:1px solid #e1eafa; border-radius:7px; padding:17px 18px; min-width:0; }
.detail-surface h3 { color:#0c1b42; font-size:18px; margin:0 0 15px; font-weight:650; }
.detail-data-table { width:100%; border-collapse:collapse; table-layout:fixed; color:#163366; font-size:14px; white-space:normal; }
.detail-data-table td,.detail-data-table th { padding:10px 12px; border:1px solid #edf2fb; text-align:left; overflow-wrap:anywhere; line-height:1.4; }
.detail-data-table th { background:#f4f7fc; font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; }
.container-definition-panel .detail-data-table td:first-child { width:35%; background:#f7f9fc; color:#4a629b; }
.detail-full-id { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.detail-data-table .container-state { font-size:13px; background:none; padding:0; }
.detail-overview-bottom { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.detail-section-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.detail-section-header h3 { margin:0; }
.detail-chart-controls { display:flex; align-items:center; gap:0; font-size:12px; }
.detail-live-label { color:#00a66d; margin-right:12px; }
.detail-chart-controls button { padding:8px 11px; color:#8393b3; background:#fbfcff; border:1px solid #e1eafa; border-right:0; font:inherit; cursor:not-allowed; }
.detail-chart-controls button:last-child { border-right:1px solid #e1eafa; border-radius:0 5px 5px 0; }
.detail-resource-charts { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.detail-chart-card { border:1px solid #edf2fa; border-radius:6px; padding:14px 10px 5px; min-width:0; }
.detail-chart-card h4 { color:#0e224c; margin:0 0 6px; font-size:13px; }
.detail-chart-card svg { display:block; width:100%; height:auto; }
.detail-chart-grid { stroke:#edf2fb; stroke-width:1; }
.detail-chart-axis { fill:#5975a7; font-size:10px; }
.detail-chart-empty { fill:#8196b7; font-size:11px; }
.detail-chart-line { fill:none; stroke-width:2; stroke:#0080ff; }
.detail-chart-line.memory { stroke:#00b67b; }
.detail-chart-area { fill:#007aff10; }
.detail-chart-area.memory { fill:#00b67b20; }
.detail-chart-note { font-size:9px; color:#8393af; margin:8px 0 0; }
.container-detail-panel .container-sensitive-controls { padding:10px 0; }
.container-detail-panel .container-log-output,.container-detail-panel .container-inspect-output { max-height:65vh; font-size:13px; }
.container-detail-panel .container-info-table { min-width:600px; }
@media(max-width:1250px) {
 .container-detail-actions { flex-wrap:wrap; gap:7px; max-width:250px; }
 .detail-action { padding:9px 12px; font-size:12px; }
 .detail-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .detail-overview-middle { grid-template-columns:1fr; }
 .container-detail-tabs button { padding:14px 17px; }
}
@media(max-width:760px) {
 .container-breadcrumb { margin-bottom:17px; font-size:13px; }
 .container-detail-header { padding:0 0 15px; gap:13px; flex-wrap:wrap; }
 .detail-cube { width:45px; height:51px; }
 .detail-cube.nginx-emblem { font-size:25px; }
 .detail-identity { flex-basis:calc(100% - 65px); }
 .detail-identity h2 { font-size:27px; }
 .detail-identity p { font-size:13px; }
 .container-id-line { font-size:12px; }
 .container-detail-actions { max-width:none; width:100%; margin-left:0; }
 .detail-action { font-size:11px; padding:9px; gap:5px; }
 .detail-action .ui-icon { width:15px; height:15px; }
 .container-detail-tabs { gap:0; margin-bottom:15px; }
 .container-detail-tabs button { padding:12px 14px; font-size:12px; }
 .detail-metric-card { padding:11px; gap:10px; min-height:118px; }
 .detail-metric-icon { width:34px; height:40px; }
 .detail-metric-icon .ui-icon { width:23px; height:23px; }
 .detail-metric-copy h3 { font-size:11px; }
 .detail-metric-copy strong,#ct-overview-uptime { font-size:17px; }
 #ct-overview-memory { font-size:13px; }
 #ct-overview-ports { font-size:11px; }
 .detail-overview-bottom,.detail-resource-charts { grid-template-columns:1fr; }
 .detail-surface { padding:14px 12px; }
 .detail-surface h3 { font-size:16px; }
 .detail-data-table { font-size:12px; }
 .detail-data-table td,.detail-data-table th { padding:9px 8px; }
 .detail-chart-controls { flex-wrap:wrap; }
 .detail-live-label { font-size:10px; }
 .detail-chart-controls button { padding:7px 9px; font-size:10px; }
}
/* Details page finishing spacing and metric accents. */
.container-breadcrumb { margin-bottom:12px; }
.container-detail-header { padding-bottom:17px; }
.detail-data-table td { font-size:14px; }
.detail-data-table th { font-size:13px; color:#142952; }
.detail-metric-copy { position:relative; }
#ct-overview-cpu-sparkline { display:block; width:100%; height:25px; margin-top:9px; }
#ct-overview-memory-progress { width:calc(100% - 37px); }
.detail-memory-percent { position:absolute; right:0; bottom:-1px; font-size:11px; color:#5972a7; }
@media(max-width:760px) { .detail-data-table td { font-size:12px; } .detail-data-table th { font-size:11px; } .detail-memory-percent { font-size:9px; } }
.detail-chart-controls .detail-chart-refresh { padding:6px 8px; margin-right:8px; border:1px solid #e1eafa; border-radius:4px; color:#007aff; cursor:pointer; }
.detail-chart-refresh .ui-icon { width:16px; height:16px; }
/* Creation uses the same application shell as every other view. */
.container-manager.create-open > :not(#container-create-view) { display:none!important; }
.create-heading { display:flex; align-items:center; gap:20px; margin:16px 0 20px; }
.create-heading h1 { margin:0 0 5px; font-size:29px; color:#091b40; }
.create-heading p { margin:0; color:#5570a5; }
.create-heading-icon { display:grid; place-items:center; width:60px; height:60px; border-radius:50%; background:#eaf3ff; color:#007aff; }
.create-heading-icon .ui-icon { width:38px; height:38px; }
.create-tabs { display:flex; gap:8px; border-bottom:1px solid #e3ecf8; margin-bottom:15px; overflow:auto; }
.create-tabs button,.create-preview-tabs button { background:none; border:0; padding:14px 25px; white-space:nowrap; color:#526aa0; cursor:pointer; border-bottom:2px solid transparent; }
.create-tabs [aria-selected=true],.create-preview-tabs .active { color:#007aff; border-bottom-color:#007aff; }
.create-columns { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr); gap:14px; }
.create-main,.create-side { min-width:0; }
.create-panel { padding:16px 18px; border:1px solid #e1eafa; border-radius:7px; background:#fff; margin-bottom:10px; }
.create-panel h2 { margin:0 0 12px; font-size:16px; color:#0b1b40; }
.create-panel h3 { margin:16px 0 8px; font-size:14px; }
.create-panel label { font-size:13px; font-weight:600; display:block; color:#0c2149; }
.create-panel input:not([type=checkbox]):not([type=range]),.create-panel select,.create-panel textarea { width:100%; min-width:0; padding:8px 11px; border:1px solid #d9e4f5; border-radius:5px; background:#fff; color:#263c6b; font:inherit; font-size:13px; }
.create-panel label > input,.create-panel label > select,.create-panel label > textarea { margin-top:6px; }
.create-panel textarea { resize:vertical; line-height:1.6; }
.create-panel small,.create-hint { font-size:12px; color:#5b73a8; font-weight:400; line-height:1.5; }
.create-panel label small { display:block; margin-top:4px; }
.create-hint { margin:7px 0; }
.required { color:#ef414f; }.optional { color:#6078ad; font-weight:400; font-size:13px; }
.create-two-fields,.create-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.create-methods button { display:flex; align-items:center; gap:14px; text-align:left; padding:12px; background:#fff; border:1px solid #e0e9f8; border-radius:5px; color:#0b2149; cursor:pointer; }
.create-methods button.selected { border-color:#007aff; background:#eef5ff; }
.create-methods .ui-icon { width:38px; height:38px; color:#007aff; flex-shrink:0; }
.create-methods span { flex:1; }.create-methods strong,.create-image-choice strong,.create-template strong { display:block; font-size:13px; }
.create-methods small { display:block; margin-top:4px; }.create-methods i { width:15px; height:15px; border:2px solid #cedbf0; border-radius:50%; flex-shrink:0; }.create-methods .selected i { border:5px solid #007aff; }
.create-popular-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.create-image-choice,.create-template { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #e1eafa; border-radius:6px; background:#fff; text-align:left; cursor:pointer; min-width:0; }
.create-image-choice:hover,.create-template:hover { border-color:#007aff; background:#f4f9ff; }
.create-image-choice small,.create-template small { display:block; margin-top:5px; overflow-wrap:anywhere; }.create-image-emblem { display:grid; place-items:center; width:30px; height:34px; border-radius:6px; background:#e3f8ef; color:#00a76c; font-size:22px; font-weight:700; flex-shrink:0; }
.create-row-labels,.create-port-row { display:grid; grid-template-columns:1.2fr 1fr .9fr 32px; gap:12px; }
.create-env-labels,.create-environment-row { display:grid; grid-template-columns:1fr 1fr 32px; gap:12px; }
.create-volume-labels,.create-mount-row { display:grid; grid-template-columns:1.3fr 1fr 90px 32px; gap:12px; }
.create-row-labels,.create-env-labels,.create-volume-labels { font-size:12px; padding:8px 10px; background:#f5f8fc; color:#172d52; }
.create-port-row,.create-environment-row,.create-mount-row { margin:7px 0; align-items:center; }
.create-remove-row { width:32px; height:32px; border:0; border-radius:5px; background:#fff0f1; color:#ff3047; cursor:pointer; font-size:23px; }
.create-add-button { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid #d9e4f5; border-radius:4px; color:#007aff; background:#fff; cursor:pointer; font-size:12px; margin-top:3px; }
.create-add-button:disabled { opacity:.5; cursor:default; }.create-add-button .ui-icon { width:15px; height:15px; }
.create-panel-divider { border-top:1px solid #e5edf8; margin:14px -18px; }
.create-readonly { display:flex!important; align-items:center; gap:6px; font-weight:400!important; white-space:nowrap; }
.create-resource-field { display:flex; align-items:center; justify-content:space-between; margin:18px 0 9px; }
.create-resource-field > div { display:flex; align-items:center; gap:8px; font-size:12px; color:#6179ad; }
.create-resource-field input { max-width:80px; }.create-panel input[type=range] { width:100%; accent-color:#007aff; }
.create-range-labels { display:flex; justify-content:space-between; color:#6078ad; font-size:11px; }
.create-preview-tabs { display:flex; justify-content:center; border-bottom:1px solid #e3ecf8; }.create-preview-tabs button { padding:10px 18px; }
.create-preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:9px 0; }
#create-preview { font-size:12px; line-height:1.6; color:#174b88; padding:12px; margin:0; min-height:235px; max-height:420px; overflow:auto; background:#f7faff; border:1px solid #e7eef9; border-radius:5px; }
#create-yaml { font-family:monospace; }.create-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.create-launch-options label { display:flex; align-items:center; gap:8px; margin:7px 0; font-weight:400; }
.create-form-actions { display:flex; align-items:center; justify-content:space-between; padding:7px 0 15px; gap:15px; }
.create-cancel { background:#fff; border:1px solid #d9e4f5; border-radius:5px; padding:10px 24px; color:#10244b; cursor:pointer; }
.create-submit { display:flex; align-items:center; gap:10px; color:#fff; background:#007aff; border:0; border-radius:5px; padding:13px 28px; cursor:pointer; }.create-submit .ui-icon { width:18px; height:18px; }
.create-submit:disabled { opacity:.6; cursor:wait; }
@media(min-width:1450px) { .create-popular-images { grid-template-columns:repeat(6,minmax(0,1fr)); }.create-image-choice { gap:6px; padding:9px 6px; }.create-image-choice strong { font-size:11px; }.create-image-choice small { font-size:10px; } }
@media(max-width:1100px) { .create-columns { grid-template-columns:1fr; }.create-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.create-preview-panel { grid-column:1/-1; } }
@media(max-width:760px) { .create-heading { gap:12px; }.create-heading h1 { font-size:23px; }.create-heading p { font-size:12px; }.create-tabs button { padding:12px; font-size:12px; }.create-panel { padding:13px 12px; }.create-two-fields,.create-methods,.create-side { grid-template-columns:1fr; }.create-volume-labels { display:none; }.create-mount-row { grid-template-columns:1fr 32px; }.create-mount-row input:first-child { grid-column:1; }.create-mount-row input:nth-child(2) { grid-column:1; }.create-mount-row .create-remove-row { grid-column:2; grid-row:1; }.create-row-labels,.create-port-row { gap:6px; grid-template-columns:1fr 1fr 65px 28px; }.create-env-labels,.create-environment-row { gap:6px; grid-template-columns:1fr 1fr 28px; }.create-remove-row { width:28px; }.create-popular-images { grid-template-columns:repeat(2,minmax(0,1fr)); }.create-panel-divider { margin:14px -12px; }.create-submit { padding:12px 16px; } }
.create-panel input:not([type=checkbox]):not([type=range]),.create-panel select { min-height:32px; height:32px; font-weight:400; }
.create-panel input[type=range] { min-height:18px; height:18px; padding:0; border:0; box-shadow:none; }
.create-panel input[type=checkbox] { min-height:0; width:16px; height:16px; padding:0; margin:0; accent-color:#007aff; }
.create-resource-field { margin:13px 0 6px; }
#create-preview { min-height:235px; max-height:280px; }