/* ==========================================================================
   heftos.css — Heftos CMS admin stylesheet
   Replaces vendored min.css + consolidates all template inline CSS.
   ========================================================================== */

/* ---------- Utility framework (ht- prefixed, reimplements mincss) -------- */

.ht-smooth { transition: all .2s; }

.ht-btn {
    background: #999; border-radius: 6px; border: 0; color: #fff;
    cursor: pointer; display: inline-block; margin: 2px 0;
    padding: 12px 30px 14px; text-decoration: none; font-size: 2em;
}
.ht-btn:hover { background: #888; }
.ht-btn:active, .ht-btn:focus { background: #777; }

.ht-btn-a { background: #0ae; }
.ht-btn-a:hover { background: #09d; }
.ht-btn-a:active, .ht-btn-a:focus { background: #08b; }

.ht-btn-b { background: #3c5; }
.ht-btn-b:hover { background: #2b4; }
.ht-btn-b:active, .ht-btn-b:focus { background: #2a4; }

.ht-btn-c { background: #d33; }
.ht-btn-c:hover { background: #c22; }
.ht-btn-c:active, .ht-btn-c:focus { background: #b22; }

.ht-btn-sm { border-radius: 4px; padding: 10px 14px 11px; font-size: 14px; }

.ht-row { margin: 1% 0; overflow: auto; }
.ht-col { float: left; }

.ht-table, .ht-c12 { width: 100%; }
.ht-c11 { width: 91.66%; }
.ht-c10 { width: 83.33%; }
.ht-c9  { width: 75%; }
.ht-c8  { width: 66.66%; }
.ht-c7  { width: 58.33%; }
.ht-c6  { width: 50%; }
.ht-c5  { width: 41.66%; }
.ht-c4  { width: 33.33%; }
.ht-c3  { width: 25%; }
.ht-c2  { width: 16.66%; }
.ht-c1  { width: 8.33%; }

.ht-table th, .ht-table td { padding: .5em; text-align: left; }
.ht-table tbody > :nth-child(2n-1) { background: rgba(0, 0, 0, 0.05); }
@media (prefers-color-scheme: dark) {
    .ht-table tbody > :nth-child(2n-1) { background: rgba(255, 255, 255, 0.07); }
}

.ht-ico { font: 33px Arial Unicode MS, Lucida Sans Unicode; }

.ht-addon { padding: 8px 12px; box-shadow: 0 0 0 1px #ccc; outline: 0; font-size: 14px; }

.ht-nav, .ht-nav .ht-current, .ht-nav a:hover { background: #000; color: #fff; }
.ht-nav {
    height: 24px; padding: 11px 0 15px;
}
.ht-nav a { color: #aaa; padding-right: 1em; position: relative; top: -1px; text-decoration: none; }
.ht-nav .ht-pagename { font-size: 22px; top: 1px; }

.ht-btn.ht-btn-close {
    background: #000; float: right; font-size: 25px;
    margin: -54px 7px; display: none;
}

.ht-msg { padding: 1.5em; background: #def; border-left: 5px solid #59d; }

.ht-container { margin: 0 20px; width: auto; }

@media (min-width: 1310px) {
    .ht-container { margin: auto; width: 1270px; }
}
@media (max-width: 870px) {
    .ht-row .ht-col { width: 100%; }
}
@media (max-width: 500px) {
    .ht-btn.ht-btn-close { display: block; }
    .ht-nav { overflow: hidden; }
    .ht-pagename { margin-top: -11px; }
    .ht-nav:active, .ht-nav:focus { height: auto; }
    .ht-nav div:before {
        background: #000; border-bottom: 10px double; border-top: 3px solid;
        content: ''; float: right; height: 4px; position: relative;
        right: 3px; top: 14px; width: 20px;
    }
    .ht-nav a { padding: .5em 0; display: block; width: 50%; }
}


/* ---------- Alert boxes -------------------------------------------------- */

.ht-alert {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}
.ht-alert h2 { margin-top: 0; }
.ht-alert p:last-child { margin-bottom: 0; }
.ht-alert ol { margin: 10px 0 0 0; padding-left: 20px; }

.ht-alert-info  { background: #d9edf7; border: 1px solid #bce8f1; color: #31708f; }
.ht-alert-success { background: #dff0d8; border: 1px solid #d6e9c6; color: #3c763d; }
.ht-alert-danger  { background: #f2dede; border: 1px solid #ebccd1; color: #a94442; }
.ht-alert-warning { background: #fcf8e3; border: 1px solid #faebcc; color: #8a6d3b; }

.ht-alert-mt { margin-top: 20px; margin-bottom: 0; }
.ht-alert-warning-text { color: #8a6d3b; }

/* ---------- Danger / link buttons ---------------------------------------- */

.ht-btn-danger, .ht-btn-danger-sm {
    background: #ba2121; color: white; border: none; cursor: pointer;
}
.ht-btn-danger { padding: 6px 15px; border-radius: 4px; }
.ht-btn-danger-sm { padding: 3px 12px; border-radius: 3px; font-size: 12px; }
.ht-btn-link {
    background: none; border: none; color: #31708f;
    cursor: pointer; text-decoration: underline; padding: 0;
}

/* ---------- Log pre blocks ----------------------------------------------- */

.ht-log-pre {
    max-height: 200px; overflow-y: auto; background: #f5f5f5;
    padding: 10px; border-radius: 3px; font-size: 12px; margin-top: 5px;
}
.ht-log-pre-tall { max-height: 300px; }

/* ---------- Text utilities ----------------------------------------------- */

.ht-text-right { text-align: right; }
.ht-text-center { text-align: center; }
.ht-text-muted { color: #666; }
.ht-text-dimmed { color: #999; }
.ht-text-italic { font-style: italic; }
.ht-text-no-content { color: #888; font-style: italic; }

/* ---------- Status indicators -------------------------------------------- */

.ht-status-ok { color: green; }
.ht-status-missing { color: #999; }
.ht-status-imported { color: #417690; }

/* ---------- Layout utilities --------------------------------------------- */

.ht-inline { display: inline; }
.ht-inline-right { display: inline; float: right; }
.ht-overflow-auto { overflow: auto; }
.ht-overflow-x-auto { overflow-x: auto; }
.ht-flex-row {
    padding: 10px 0; display: flex; gap: 15px;
    align-items: center;
}
.ht-flex-row-wrap { flex-wrap: wrap; }
.ht-float-left { float: left; }
.ht-opacity-half { opacity: 0.5; }
.ht-ml-auto { margin-left: auto; }
.ht-ml-10 { margin-left: 10px; }

/* ---------- Spacing ------------------------------------------------------ */

.ht-mt { margin-top: 20px; }
.ht-mb { margin-bottom: 15px; }
.ht-mb-20 { margin-bottom: 20px; }
.ht-mt-neg { margin-top: -5px; }

/* ---------- Form input sizes --------------------------------------------- */

.ht-input-xs { width: 100px; padding: 8px; margin: 10px 0; }
.ht-input-sm, .ht-input-md, .ht-input-lg, .ht-select-sm { padding: 6px; }
.ht-input-sm { width: 120px; }
.ht-input-md { width: 140px; }
.ht-input-lg { width: 300px; }
.ht-input-full { width: 100%; box-sizing: border-box; }

/* ---------- Specific table column widths --------------------------------- */

.ht-col-checkbox { width: 30px; }
.ht-selected-count { line-height: 40px; padding: 0 15px; color: #666; }
.ht-pagination { margin: 20px 0; text-align: center; }
.ht-pagination-text { padding: 0 15px; }

/* ---------- Details/summary ---------------------------------------------- */

details.ht-log-details { margin-bottom: 15px; }
details.ht-log-details > summary { cursor: pointer; color: #31708f; }

/* ---------- Admin base site ---------------------------------------------- */

.ht-pr-badge { font-size: 0.7em; margin-left: 10px; opacity: 0.8; }
.ht-pr-badge a { color: inherit; text-decoration: none; }
.ht-branch-badge {
    font-family: ui-monospace, monospace;
    font-size: 0.7em;
    margin-left: 8px;
    opacity: 0.85;
}
.ht-impersonation-stop { color: #ff6b6b; font-weight: bold; }
.ht-ask-bot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.ht-ask-bot-actions-row {
    flex-wrap: nowrap;
}
.ht-run-agent-select {
    min-width: 12rem;
    max-width: 100%;
}

.ht-checkbox-label {
    font-size: 13px; display: flex; align-items: center; gap: 4px;
}

/* Tool-content: shared by Files, Terminal, Containers, Images views */
.tool-content { max-width: 1200px; margin: 20px 0; }
.tool-content.narrow { max-width: 1000px; }
.tool-content table { border-collapse: collapse; width: 100%; font-size: 0.85em; }
.tool-content th, .tool-content td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #ddd; }
.tool-content th { background: #f8f8f8; font-weight: 600; }
.tool-content tr:hover { background: #f5f5f5; }
.tool-content a { color: #447e9b; text-decoration: none; }
.tool-content a:hover { text-decoration: underline; }
.tool-content .status-running { color: #28a745; }
.tool-content .status-exited { color: #dc3545; }
.tool-content .status-paused { color: #ffc107; }
.tool-content .status-restarting { color: #ff8c00; }
.tool-content .status-created { color: #888; }
.tool-content .health-healthy { color: #28a745; }
.tool-content .health-unhealthy { color: #dc3545; }
.tool-content .health-starting { color: #ffc107; }
.tool-content .error-box { background: #fff5f5; border: 1px solid #dc3545; padding: 15px; margin: 10px 0; white-space: pre-wrap; font-family: monospace; }
.tool-content .empty-message { text-align: center; color: #888; font-style: italic; padding: 40px; }
.tool-content pre { margin: 0; font-family: monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }

.mode-toggle { font-size: 0.85em; }
.mode-toggle a { margin-left: 10px; padding: 2px 8px; border-radius: 3px; }
.mode-toggle a.active { background: #417690; color: white; }

.ask-bot-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.ask-bot-editor { border: 1px solid #ccc; border-radius: 4px; }
.ask-bot-button {
    padding: 8px 16px; border-radius: 4px; cursor: pointer;
    font-size: 13px; white-space: nowrap;
}
.ask-bot-button-primary {
    background: #417690; color: #fff; border: none;
}
.ask-bot-button-primary:hover { background: #205067; }
.ask-bot-button-secondary {
    background: #fff; color: #417690; border: 1px solid #417690;
}
.ask-bot-button-secondary:hover { background: #f0f7fa; }

.tools-box { margin-bottom: 15px; }

#user-tools a.admin-tool-link,
#user-tools a.admin-tool-link:visited { color: #c44; }
#user-tools a.admin-tool-link:hover { color: #a33; }

/* ---------- Containers view (docker.html) -------------------------------- */

.host-info { color: #666; font-size: 0.85em; margin-bottom: 10px; }
.container-name { font-weight: 600; }
.container-name a { color: inherit; text-decoration: none; }
.container-name a:hover { text-decoration: underline; }
.container-id { font-family: monospace; color: #888; }
.container-image { color: #666; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.container-uptime { color: #666; }
.container-ports { font-family: monospace; font-size: 0.9em; }
.container-restarts { text-align: center; }
.container-labels { font-size: 0.8em; max-width: 400px; }
.container-volumes { font-family: monospace; font-size: 0.85em; max-width: 200px; }
.volume-count { color: #666; }
.volume-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.volume-type { font-size: 0.8em; color: #888; }
.volume-mode { font-size: 0.75em; padding: 1px 4px; border-radius: 2px; margin-left: 4px; }
.volume-mode.ro { background: #ffc107; color: #333; }
.volume-mode.rw { background: #28a745; color: #fff; }
.label-key { font-weight: 500; }
.current-container { background-color: #fff8dc !important; }
.current-badge {
    font-size: 0.7em; background: #ffc107; color: #333;
    padding: 2px 6px; border-radius: 3px; margin-left: 6px;
    font-weight: normal; vertical-align: middle;
}

/* ---------- Docker images view (docker_images.html) ---------------------- */

.image-summary { color: #666; font-size: 0.85em; margin-bottom: 10px; }
.image-repo { font-weight: 600; }
.image-tag { color: #666; }
.image-id { font-family: monospace; color: #888; }
.image-size { font-family: monospace; text-align: right; }
.image-id a { color: inherit; text-decoration: none; }
.image-id a:hover { text-decoration: underline; }
.image-none { color: #999; font-style: italic; }

/* ---------- Image detail view (docker_image_detail.html) ----------------- */

.image-command-section { background: #f8f8f8; padding: 12px 15px; border-radius: 6px; margin-bottom: 15px; }
.image-command-row { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.image-command-row:last-child { margin-bottom: 0; }
.image-command-label { font-size: 0.75em; color: #666; text-transform: uppercase; min-width: 80px; }
.image-command-value { font-family: monospace; font-size: 0.9em; word-break: break-all; }
.image-ports { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.image-port-badge { font-family: monospace; font-size: 0.85em; padding: 3px 8px; border-radius: 3px; background: #e9ecef; color: #495057; }
.image-label-key { font-family: monospace; font-weight: 500; word-break: break-all; }
.image-label-value { font-family: monospace; font-size: 0.9em; word-break: break-all; }
.image-env-key { font-family: monospace; font-weight: 500; white-space: nowrap; }
.image-env-value { font-family: monospace; font-size: 0.9em; word-break: break-all; }
.image-layer-cmd { font-family: monospace; font-size: 0.85em; word-break: break-all; }
.image-full-id { font-family: monospace; font-size: 0.85em; background: #f8f8f8; padding: 10px 15px; border-radius: 4px; word-break: break-all; user-select: all; }

/* ---------- Container detail view (docker_detail.html) ------------------- */

.container-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.container-header h2 { margin: 0; font-size: 1.4em; }

.status-badge { font-size: 0.85em; padding: 4px 10px; border-radius: 4px; font-weight: 500; }
.status-badge.running { background: #28a745; color: white; }
.status-badge.exited { background: #dc3545; color: white; }
.status-badge.paused { background: #ffc107; color: black; }
.status-badge.restarting { background: #ff8c00; color: white; }
.status-badge.created { background: #888; color: white; }

/* Reused from containers view; detail page overrides size */
.container-header .current-badge {
    font-size: 0.8em; padding: 4px 10px; border-radius: 4px; font-weight: 500;
}

.info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px; margin-bottom: 25px; background: #f8f8f8;
    padding: 15px; border-radius: 6px;
}
.info-item { display: flex; flex-direction: column; }
.info-label { font-size: 0.75em; color: #666; text-transform: uppercase; margin-bottom: 3px; }
.info-value { font-weight: 500; font-family: monospace; }

.section-title {
    font-size: 1.1em; font-weight: 600; margin: 25px 0 10px 0;
    padding-bottom: 5px; border-bottom: 1px solid #ddd;
}

.processes-table, .volumes-table { border-collapse: collapse; width: 100%; font-size: 0.85em; margin-bottom: 25px; }
.processes-table th, .processes-table td, .volumes-table th, .volumes-table td {
    padding: 6px 10px; text-align: left; border-bottom: 1px solid #ddd;
}
.processes-table th, .volumes-table th { background: #f0f0f0; font-weight: 600; }
.processes-table th, .processes-table td { font-family: monospace; }
.processes-empty, .volumes-empty { color: #888; font-style: italic; padding: 15px; text-align: center; }
.volumes-table .source, .volumes-table .destination { font-family: monospace; word-break: break-all; }

.volume-type-badge { font-size: 0.85em; padding: 2px 6px; border-radius: 3px; background: #e9ecef; color: #495057; }
.volume-type-badge.bind { background: #cce5ff; color: #004085; }
.volume-type-badge.volume { background: #d4edda; color: #155724; }
.volume-type-badge.tmpfs { background: #fff3cd; color: #856404; }

.volume-mode-badge { font-size: 0.8em; padding: 2px 5px; border-radius: 3px; }
.volume-mode-badge.ro { background: #ffc107; color: #333; }
.volume-mode-badge.rw { background: #28a745; color: #fff; }

.logs-controls {
    margin-bottom: 15px; padding: 10px 15px; background: #f8f8f8;
    border-radius: 4px; display: flex; gap: 20px;
    align-items: center; flex-wrap: wrap;
}
.logs-controls label { font-weight: 500; margin-right: 5px; }
.logs-controls select, .logs-controls input[type="number"] {
    padding: 4px 8px; border: 1px solid #ccc; border-radius: 3px;
}
.logs-controls button { padding: 6px 12px; background: #417690; color: white; border: none; border-radius: 3px; cursor: pointer; }
.logs-controls button:hover { background: #205067; }
.logs-controls .auto-refresh { display: flex; align-items: center; gap: 5px; }

.logs-output {
    background: #1e1e1e; color: #d4d4d4;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px; line-height: 1.4; padding: 15px; border-radius: 4px;
    overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;
    max-height: calc(100vh - 500px); min-height: 300px; overflow-y: auto;
}
.logs-output:empty::before { content: "No logs available"; color: #888; font-style: italic; }
.refresh-indicator { font-size: 0.85em; color: #666; margin-left: 10px; }

/* ---------- File browser view (browser.html) ----------------------------- */

.name-col { min-width: 300px; }
.name-col a { font-weight: 500; }
.dir-icon { color: #dca64b; margin-right: 5px; }
.file-icon { color: #888; margin-right: 5px; }
.size-col { font-family: monospace; text-align: right; white-space: nowrap; color: #666; }
.mtime-col { white-space: nowrap; color: #666; }
.note-col { color: #888; font-style: italic; }

.upload-section {
    margin-bottom: 20px; padding: 15px; background: #f8f8f8;
    border: 1px solid #ddd; border-radius: 4px;
}
.upload-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-label { font-weight: 600; }
.upload-form input[type="file"] { padding: 5px; }
.upload-form input[type="submit"] { padding: 8px 16px; cursor: pointer; }

.ht-storage-hint { color: #666; }

/* ---------- Email browser view (email_browser.html) ---------------------- */

.search-bar { margin-bottom: 20px; display: flex; gap: 10px; align-items: center; }
.search-bar input[type="text"] {
    flex: 1; padding: 8px 12px; font-size: 14px;
    border: 1px solid #ccc; border-radius: 4px;
}
.search-bar input[type="submit"] { padding: 8px 20px; cursor: pointer; }
.search-bar .button {
    padding: 8px 16px; font-size: 14px; text-decoration: none;
    color: #333; background: #e8e8e8; border: 1px solid #ccc;
    border-radius: 4px; white-space: nowrap;
}
.search-bar .button:hover { background: #ddd; }

.email-count { color: #666; font-size: 0.85em; margin-bottom: 10px; }

.email-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.email-table th {
    text-align: left; padding: 8px 12px; background: #f8f8f8;
    font-weight: 600; border-bottom: 2px solid #ddd;
}
.email-table td { padding: 8px 12px; border-bottom: 1px solid #eee; }
.email-table tr:hover { background: #f5f5f5; }
.email-table a { color: #447e9b; text-decoration: none; }
.email-table a:hover { text-decoration: underline; }

.col-date { width: 110px; white-space: nowrap; color: #666; }
.col-from { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.col-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 500px; }
.col-tags { width: 100px; }

.tag {
    display: inline-block; background: #e8f0fe; color: #1a73e8;
    padding: 2px 8px; border-radius: 3px; font-size: 0.8em; margin-right: 4px;
}

.search-hint { color: #888; font-size: 0.8em; margin-top: 5px; }
.search-hint code { background: #f0f0f0; padding: 1px 4px; border-radius: 2px; }

.email-empty-row { text-align: center; color: #888; font-style: italic; padding: 40px; }

/* ---------- Email detail view (email_detail.html) ------------------------ */

.email-header { margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 15px; }
.email-header h2 { margin: 0 0 10px 0; font-size: 1.4em; }

.email-meta { font-size: 0.9em; color: #555; line-height: 1.8; }
.email-meta strong { display: inline-block; width: 50px; color: #333; }

.email-body { margin-top: 15px; }
.email-body-text {
    white-space: pre-wrap; word-wrap: break-word; font-family: monospace;
    font-size: 13px; line-height: 1.5; padding: 15px;
    background: #f8f8f8; border: 1px solid #ddd; border-radius: 4px;
}
.email-body-html { padding: 15px; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
.email-body-html iframe { width: 100%; border: none; min-height: 300px; }

.body-tabs { display: flex; gap: 0; margin-bottom: 0; }
.body-tab {
    padding: 8px 16px; background: #e8e8e8; border: 1px solid #ddd;
    border-bottom: none; cursor: pointer; font-size: 0.85em;
    border-radius: 4px 4px 0 0; margin-right: 2px;
}
.body-tab.active {
    background: #f8f8f8; font-weight: 600;
    border-bottom: 1px solid #f8f8f8; margin-bottom: -1px;
    position: relative; z-index: 1;
}
.body-panel { display: none; }
.body-panel.active { display: block; }

.email-tags { margin-top: 10px; }
.back-link { margin-bottom: 15px; display: inline-block; }
.ht-back-link { margin-top: 20px; }

/* ---------- Terminal view (terminal.html) -------------------------------- */

#terminal-frame {
    border: none; width: 100%; height: calc(100vh - 120px);
    min-height: 400px; display: block;
    -ms-overflow-style: none; scrollbar-width: none;
}
#terminal-frame::-webkit-scrollbar { display: none; }

/* ---------- VS Code view (vscode.html) ----------------------------------- */

#vscode-frame {
    border: none; width: 100%; height: calc(100vh - 120px);
    min-height: 400px; display: block;
    -ms-overflow-style: none; scrollbar-width: none;
}
#vscode-frame::-webkit-scrollbar { display: none; }

/* ---------- Image pipeline test ------------------------------------------ */

.ht-pipeline-form { margin-bottom: 20px; }
.ht-result-preview {
    background: #f8f8f8; border: 1px solid #ddd;
    padding: 15px; text-align: center;
}
.ht-result-preview img { max-width: 100%; }

/* Models tab bar */
.models-tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 2px solid var(--border-color, #ccc); }
.models-tabs button {
    padding: 8px 16px; border: 1px solid transparent; border-bottom: none;
    background: transparent; cursor: pointer; color: var(--body-fg, inherit);
    font-size: 14px; margin-bottom: -2px; border-radius: 4px 4px 0 0;
}
.models-tabs button:hover:not(:disabled) { background: var(--darkened-bg, #f8f8f8); }
.models-tabs button:disabled {
    border-color: var(--border-color, #ccc); border-bottom-color: var(--body-bg, #fff);
    font-weight: bold; cursor: default;
}

/* ---------- Dark mode ---------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    /* Admin base */
    .tool-content th { background: #2d2d2d; color: #9cdcfe; }
    .tool-content td { border-bottom-color: #333; }
    .tool-content tr:hover { background: #2a2a2a; }
    .tool-content a { color: #9cdcfe; }
    .tool-content .error-box { background: #2d2020; border-color: #f14c4c; color: #d4d4d4; }
    .mode-toggle a.active { background: #264b5d; }
    .ask-bot-editor { border-color: #555; }
    .ht-run-agent-select {
        background: #1e1e1e;
        color: #d4d4d4;
        border: 1px solid #555;
        border-radius: 4px;
    }
    .ask-bot-button-primary { background: #264b5d; }
    .ask-bot-button-primary:hover { background: #1a3545; }
    .ask-bot-button-secondary {
        background: transparent; color: #9cdcfe; border-color: #9cdcfe;
    }
    .ask-bot-button-secondary:hover { background: #2a3a44; }
    #user-tools a.admin-tool-link,
    #user-tools a.admin-tool-link:visited { color: #f77; }
    #user-tools a.admin-tool-link:hover { color: #faa; }

    /* Containers */
    .host-info { color: #888; }
    .container-image { color: #ce9178; }
    .container-uptime { color: #b5cea8; }
    .current-container { background-color: #3d3d00 !important; }
    .current-badge { background: #b38600; color: #fff; }
    .volume-count { color: #888; }
    .volume-type { color: #aaa; }

    /* Docker images */
    .image-summary { color: #888; }
    .image-tag { color: #ce9178; }

    /* Image detail */
    .image-command-section { background: #2d2d2d; }
    .image-command-label { color: #888; }
    .image-port-badge { background: #3d3d3d; color: #d4d4d4; }
    .image-full-id { background: #2d2d2d; color: #d4d4d4; }

    /* Container detail */
    .info-grid { background: #2d2d2d; }
    .info-label { color: #888; }
    .processes-table th, .volumes-table th { background: #2d2d2d; }
    .processes-table td, .volumes-table td { border-bottom-color: #444; }
    .volume-type-badge { background: #3c3c3c; color: #d4d4d4; }
    .volume-type-badge.bind { background: #1a4a6e; color: #9ec5fe; }
    .volume-type-badge.volume { background: #1a4d2e; color: #a3cfbb; }
    .volume-type-badge.tmpfs { background: #4d3f00; color: #ffe69c; }
    .logs-controls { background: #2d2d2d; }
    .logs-controls select, .logs-controls input[type="number"] {
        background: #3c3c3c; color: #d4d4d4; border-color: #555;
    }

    /* File browser */
    .dir-icon { color: #dcdcaa; }
    .size-col, .mtime-col { color: #b5cea8; }
    .upload-section { background: #2a2a2a; border-color: #444; }
    .ht-storage-hint { color: #888; }

    /* Email browser */
    .search-bar input[type="text"] { background: #2a2a2a; color: #d4d4d4; border-color: #555; }
    .search-bar .button { background: #3a3a3a; color: #d4d4d4; border-color: #555; }
    .search-bar .button:hover { background: #444; }
    .email-table th { background: #2d2d2d; color: #9cdcfe; border-bottom-color: #444; }
    .email-table td { border-bottom-color: #333; }
    .email-table tr:hover { background: #2a2a2a; }
    .email-table a { color: #9cdcfe; }
    .col-date, .email-count { color: #999; }
    .tag { background: #264b5d; color: #9cdcfe; }
    .search-hint { color: #777; }
    .search-hint code { background: #333; }

    /* Email detail */
    .email-header { border-bottom-color: #444; }
    .email-meta { color: #aaa; }
    .email-meta strong { color: #d4d4d4; }
    .email-body-text { background: #1e1e1e; border-color: #444; color: #d4d4d4; }
    .email-body-html { background: #1e1e1e; border-color: #444; }
    .body-tab { background: #333; border-color: #444; color: #d4d4d4; }
    .body-tab.active { background: #1e1e1e; border-bottom-color: #1e1e1e; }

    /* Image pipeline */
    .ht-result-preview { background: #2a2a2a; border-color: #444; }
}