/* Resets (unchanged) */
html, body, div, span, h1, h2, h3, p, a, form, input, button, table, th, td, ul, li, label, select {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
body { line-height: 1; }
table { border-collapse: collapse; border-spacing: 0; }

/* General Page Layout (unchanged) */
html {
    width: 100%;
    height: 100%;
    background: #161813 url('../images/bgRepeat.jpg') 0 0 repeat-y;
}
body {
    width: 100%;
    height: 100%;
    font-family: 'Roboto Condensed', 'Verdana', sans-serif;
    font-size: 100%;
    color: #dddddd;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* Header (unchanged) */
header {
    display: block;
    width: 100%;
    height: 325px;
    background: transparent url('../images/bgHeader.jpg') 0 0 no-repeat;
    background-size: cover;
    text-align: center;
    position: relative;
}
header h1 {
    position: absolute;
    top: 11px;
    left: 50px;
    width: 315px;
    height: 107px;
    background: url('../images/logo.png') 0 0 no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
}
header h1 span {
    display: none;
    visibility: hidden;
}
header nav {
    position: absolute;
    top: 50px;
    right: 125px;
    font: normal 30px 'Droid Serif', 'Georgia', serif;
}
header nav ul {
    display:flex;
    list-style: none;
}
header nav ul li {
    float: right;
    padding: 2px;
    margin-right: 12px;
}
header nav ul li a {
    color: #c2c2c2;
    text-decoration: none;
    border-left: 8px solid transparent;
    padding-left: 8px;
    display: block;
}
header nav ul li a.active,
header nav ul li a:hover {
    color: #8cce87;
    border-left: 6px solid #ffffff;
    text-decoration: underline;
}
header .header-text {
    position: absolute;
    top: 72px;
    left: 220px;
    width: 722px;
    padding-left: 28px;
    height: 218px;
    background: url('../images/tape.png') 0 0 no-repeat;
    background-size: contain;
    font: normal 36px 'Droid Serif', 'Georgia', serif;
    text-align: left;
    color: #dddddd;
}
header .header-text p:nth-child(1) {
    padding-top: 69px;
    transform: rotate(3deg);
}
header .header-text p:nth-child(2) {
    padding-top: 8px;
    padding-left: 34px;
    font-size: 32px;
    transform: rotate(3deg);
}
header .header-text p strong {
    color: #8cce87;
    font-weight: normal;
}
header .header-text p em {
    color: #ffffff;
    font-style: normal;
    font-weight: bold;
}

/* Main Content (unchanged for general layout) */
main {
    width: 85%;
    max-width: 1300px;
    min-width: 1048px;
    margin: 16px auto;
    background-color: #11120f;
    padding: 24px;
    color: #999999;
    box-shadow: rgba(0,0,0,0.4) 0 0 20px;
    border-radius: 8px;
}
main h2 {
    font-size: 150%;
    font-weight: bold;
    color: #8cce87;
    margin-bottom: 24px;
    text-align: center;
}
main p, main form {
    font-size: 115%;
    line-height: 24px;
    text-indent: 15px;
    margin-bottom: 24px;
}
main .form-group {
    margin-bottom: 15px;
}
main .form-group label {
    display: block;
    color: #ffffff;
    margin-bottom: 5px;
    font-weight: bold;
}
main .form-group input,
main .form-group select {
    width: 100%;
    padding: 8px;
    background-color: #161813;
    color: #dddddd;
    border: 1px solid #8cce87;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}
main .form-group input:focus,
main .form-group select:focus {
    border-color: #ffffff;
    box-shadow: 0 0 5px rgba(140, 206, 135, 0.5);
}
main .form-group p.help-text {
    font-size: 85%;
    color: #999999;
    margin-top: 5px;
    text-indent: 0;
}

main .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #11120f;
    color: #8cce87;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #8cce87;
    transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.2s ease;
    opacity: 0.9;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font-family: 'Consolas', 'Monaco', monospace; /* Monospace for coder aesthetic */
}
main .btn:hover {
    background-color: #8cce87;
    color: #11120f;
    opacity: 1;
    transform: translateY(-2px); /* Subtle lift effect */
}
main .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
main .alert {
    background-color: #161813;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 115%;
    color: #ffffff;
    box-shadow: rgba(0,0,0,0.4) 0 0 10px;
    border-radius: 4px;
}
main .alert-success {
    border-left: 4px solid #8cce87;
}
main .alert-danger {
    border-left: 4px solid #ff3333;
}
main .alert-info {
    border-left: 4px solid #3399ff;
}

/* Updated Table Styling (unchanged from previous) */
main table {
    width: 100%;
    margin-bottom: 24px;
    border-collapse: separate;
    border-spacing: 0;
    background: linear-gradient(180deg, #161813 0%, #11120f 100%);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(140, 206, 135, 0.1);
    overflow: hidden;
}
main th, main td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(140, 206, 135, 0.2);
    transition: background-color 0.2s ease;
}
main th {
    background: #1a1b18;
    color: #8cce87;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.08em;
    font-family: 'Consolas', 'Monaco', monospace;
    position: sticky;
    top: 0;
    z-index: 10;
}
main td {
    color: #dddddd;
    background-color: #11120f;
    font-size: 0.95em;
    font-family: 'Roboto Condensed', 'Verdana', sans-serif;
}
main tr:nth-child(even) td {
    background-color: #1c1d1a;
}
main tr:last-child td {
    border-bottom: none;
}
main tr:first-child th:first-child { border-top-left-radius: 12px; }
main tr:first-child th:last-child { border-top-right-radius: 12px; }
main tr:last-child td:first-child { border-bottom-left-radius: 12px; }
main tr:last-child td:last-child { border-bottom-right-radius: 12px; }

/* Client Summary Row (unchanged) */
.client-summary {
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.client-summary:hover {
    background-color: #2a2b28;
    transform: translateY(-2px);
}
.client-summary td {
    position: relative;
}
.client-summary td a {
    color: #66ccff;
    text-decoration: none;
}
.client-summary td a:hover {
    text-decoration: underline;
    color: #3399ff;
}
.client-summary .status-active {
    color: #4CAF50;
    font-weight: bold;
}
.client-summary .status-suspended {
    color: #F44336;
    font-weight: bold;
}
.client-summary .status-unknown {
    color: #FFC107;
}

/* Client Details Row (updated for button group) */
.client-details {
    background-color: #1a1b18;
    animation: slideDown 0.3s ease-out;
}
.client-details td {
    padding: 20px;
    border-top: 1px solid rgba(140, 206, 135, 0.3);
}
.client-details-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 15px;
    background: #0b0c0a;
    border-radius: 8px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}
.client-details-column {
    padding: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
}
.client-details-column p {
    margin-bottom: 8px;
    text-indent: 0;
    line-height: 1.5;
    font-size: 0.95em;
}
.client-details-column strong {
    color: #8cce87;
    display: inline-block;
    min-width: 140px;
    font-weight: bold;
}
.client-details-column a {
    color: #66ccff;
    text-decoration: underline;
    word-break: break-all;
}
.client-details-column a:hover {
    color: #3399ff;
}

/* New Action Buttons Section */
.action-buttons {
    display: flex;
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: flex-start;
    margin-bottom: 20px;
    padding: 10px;
    background: #0b0c0a; /* Dark background to match theme */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.action-buttons button {
    flex: 1 1 auto; /* Allow buttons to grow but not shrink too much */
    min-width: 120px; /* Minimum width for readability */
    max-width: 200px; /* Prevent buttons from getting too wide */
    padding: 10px 15px;
    font-size: 0.9em;
    font-family: 'Consolas', 'Monaco', monospace;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.action-buttons button:hover:not(:disabled) {
    transform: translateY(-2px);
}
.action-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.action-buttons .btn-primary {
    background-color: #8cce87;
    color: #11120f;
    border: none;
}
.action-buttons .btn-primary:hover:not(:disabled) {
    background-color: #7bbd76;
}
.action-buttons .btn-danger {
    background-color: #ff3333;
    color: #ffffff;
    border: none;
}
.action-buttons .btn-danger:hover:not(:disabled) {
    background-color: #cc0000;
}
.action-buttons .btn-warning {
    background-color: #FFC107;
    color: #11120f;
    border: none;
}
.action-buttons .btn-warning:hover:not(:disabled) {
    background-color: #e0a800;
}
.action-buttons .btn-success {
    background-color: #4CAF50;
    color: #ffffff;
    border: none;
}
.action-buttons .btn-success:hover:not(:disabled) {
    background-color: #45a049;
}

/* Container Info Section (unchanged) */
.container-info-section {
    background: linear-gradient(180deg, #0b0c0a 0%, #11120f 100%);
    border: 1px solid rgba(140, 206, 135, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.container-info-section h3 {
    color: #8cce87;
    font-size: 1.3em;
    margin-bottom: 15px;
    text-align: left;
    font-family: 'Consolas', 'Monaco', monospace;
}
.container-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}
.container-info-card {
    background: #1a1b18;
    border: 1px solid rgba(140, 206, 135, 0.2);
    border-radius: 6px;
    padding: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.container-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}
.container-info-card h4 {
    color: #8cce87;
    font-size: 1.1em;
    margin-bottom: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
}
.container-info-card p {
    margin-bottom: 8px;
    text-indent: 0;
    line-height: 1.5;
    font-size: 0.95em;
    font-family: 'Consolas', 'Monaco', monospace;
}
.container-status-text-running { color: #3399ff; }
.container-status-text-unknown, .container-status-text-N\/A { color: #FFC107; }
.container-status-text-stopped, .container-status-text-exited, .container-status-text-error { color: #F44336; }
.container-status-text-restarting { color: #66ccff; }

/* Logs Section (unchanged) */
.logs-section {
    background: #0b0c0a;
    border: 1px solid rgba(140, 206, 135, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.logs-section h3 {
    color: #8cce87;
    font-size: 1.3em;
    margin-bottom: 15px;
    font-family: 'Consolas', 'Monaco', monospace;
}
.log-controls {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.log-controls .form-group {
    margin-bottom: 0;
    flex-grow: 1;
    min-width: 150px;
}
.log-controls .form-group label {
    font-size: 0.9em;
    font-family: 'Consolas', 'Monaco', monospace;
}
.log-controls .form-input {
    min-width: 100px;
    padding: 6px 8px;
    font-size: 0.9em;
    font-family: 'Consolas', 'Monaco', monospace;
}
.log-controls .log-fetch-button {
    height: 38px;
    min-width: 120px;
    padding: 8px 12px;
    font-size: 0.9em;
    background-color: #8cce87;
    color: #11120f;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.log-controls .log-fetch-button:hover {
    background-color: #7bbd76;
    transform: translateY(-2px);
}
.log-controls .log-type-select { flex: 2; max-width: 250px; }
.log-controls .log-lines-input { flex: 1; max-width: 100px; }
.log-output-box {
    background: #11120f;
    border: 1px solid #8cce87;
    border-radius: 6px;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    color: #dddddd;
}
.log-line {
    margin-bottom: 5px;
    line-height: 1.5;
    word-break: break-all;
}
.no-logs-message {
    color: #999999;
    text-align: center;
    padding: 20px;
    font-style: italic;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Button Styles (unchanged) */
main .btn-danger {
    background-color: #ff3333;
    color: #ffffff;
    border: none;
}
main .btn-danger:hover:not(:disabled) {
    background-color: #cc0000;
}
main .btn-warning {
    background-color: #FFC107;
    color: #11120f;
    border: none;
}
main .btn-warning:hover:not(:disabled) {
    background-color: #e0a800;
}
main .btn-success {
    background-color: #4CAF50;
    color: #ffffff;
    border: none;
}
main .btn-success:hover:not(:disabled) {
    background-color: #45a049;
}

/* Modal Styling (unchanged) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: #1a1b18;
    margin: auto;
    padding: 20px;
    border: 1px solid #8cce87;
    border-radius: 8px;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    text-align: center;
    color: #dddddd;
}
.modal-content h3 {
    color: #8cce87;
    margin-bottom: 15px;
    font-size: 1.2em;
}
.modal-content input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    background-color: #11120f;
    color: #dddddd;
    border: 1px solid #8cce87;
    border-radius: 4px;
}
.modal-buttons {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}
.modal-buttons .btn {
    flex-grow: 1;
}
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-button:hover,
.close-button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* Footer (unchanged) */
footer {
    position: relative;
    clear: both;
    display: block;
    width: 100%;
    height: 200px;
    margin-top: 16px;
    background: url('../images/bgFooter.jpg') 0 0 no-repeat;
    background-size: cover;
    background-position: bottom center;
}
footer div {
    width: 85%;
    max-width: 1300px;
    min-width: 1048px;
    height: 100px;
    background-color: #11120f;
    margin: 0 auto;
    text-align: left;
    box-shadow: rgba(0,0,0,0.4) 0 0 40px;
    border-radius: 8px;
    padding: 20px;
}
footer p {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    color: #999999;
    width: 100%;
    text-align: center;
}

/* Status Log Styles (unchanged) */
.status-log {
    background-color: #0b0c0a;
    border: 1px solid #8cce87;
    border-radius: 4px;
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 90%;
    color: #dddddd;
    margin-bottom: 20px;
}
.status-log div {
    margin-bottom: 5px;
    line-height: 1.4;
}
.status-log .task-name {
    color: #8cce87;
    font-weight: bold;
}
.status-log .status-ok {
    color: #4CAF50;
}
.status-log .status-changed {
    color: #FFC107;
}
.status-log .status-failed {
    color: #F44336;
    font-weight: bold;
}
.status-log .log-message {
    color: #999999;
}
.status-indicator {
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}
.status-indicator.deployment_failed, .status-indicator.deploying, .status-indicator.deleting{
    font-size: 100%;
}
.status-indicator.running, .status-indicator.deploying {
    color: #3399ff;
}
.status-indicator.completed {
    color: #4CAF50;
}
.status-indicator.failed, .status-indicator.deployment_failed, .status-indicator.deleting {
    color: #F44336;
}
.final-messages {
    margin-top: 20px;
}

/* Keyframe for Slide-Down Animation (unchanged) */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design (updated for action buttons) */
@media screen and (max-width: 1048px) {
    main, footer div {
        width: 95%;
        min-width: 0;
    }
    header .header-text {
        width: 80% !important;
        left: 10%;
        top: 120px;
        padding-left: 20px;
        background-size: cover;
        font-size: 28px;
    }
    header .header-text p:nth-child(2) {
        font-size: 24px;
    }
    header h1 {
        top: 10px;
        left: 10px;
        width: 200px;
        height: 68px;
        background-size: contain;
    }
    header nav {
        top: 80px;
        right: 10px;
        font-size: 20px;
        display: flex;
        justify-content: flex-end;
        width: auto;
    }
    header nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    header nav ul li {
        margin-right: 8px;
        padding: 2px;
    }
    header nav ul li a {
        padding-left: 6px;
        border-left: 4px solid transparent;
    }
    header nav ul li a.active,
    header nav ul li a:hover {
        border-left: 4px solid #ffffff;
    }
    main table {
        font-size: 0.9em;
    }
    .client-details-content {
        grid-template-columns: 1fr;
    }
    .container-info-grid {
        grid-template-columns: 1fr;
    }
    .action-buttons {
        gap: 8px;
        padding: 8px;
    }
    .action-buttons button {
        min-width: 100px;
        max-width: 150px;
        padding: 8px 12px;
        font-size: 0.85em;
    }
}
@media screen and (max-width: 768px) {
    header {
        height: 250px;
    }
    header h1 {
        top: 10px;
        left: 10px;
        width: 150px;
        height: 50px;
        background-size: contain;
    }
    header nav {
        top: 70px;
        right: 10px;
        font-size: 16px;
        display: flex;
        justify-content: flex-end;
    }
    header nav ul {
        display: flex;
        flex-wrap: wrap;
    }
    header nav ul li {
        margin-right: 5px;
        padding: 2px;
    }
    header nav ul li a {
        padding-left: 4px;
        border-left: 3px solid transparent;
    }
    header nav ul li a.active,
    header nav ul li a:hover {
        border-left: 3px solid #ffffff;
    }
    header .header-text {
        width: 90% !important;
        left: 5%;
        top: 120px;
        padding-left: 10px;
        height: 120px;
        background-size: cover;
        font-size: 24px;
    }
    header .header-text p:nth-child(1) {
        padding-top: 20px;
    }
    header .header-text p:nth-child(2) {
        padding-left: 10px;
        font-size: 20px;
    }
    main {
        width: 90%;
        padding: 16px;
        margin-top: 10px;
        min-width: unset;
    }
    main h2 {
        font-size: 130%;
        margin-bottom: 16px;
    }
    main p, main form {
        font-size: 100%;
        line-height: 20px;
        text-indent: 10px;
        margin-bottom: 16px;
    }
    main .btn {
        padding: 10px 15px;
    }
    main th, main td {
        padding: 12px 14px;
        font-size: 0.85em;
    }
    .container-info-card {
        padding: 12px;
    }
    .log-controls .form-group {
        min-width: 120px;
    }
    .log-controls .log-fetch-button {
        min-width: 100px;
    }
    .action-buttons {
        flex-direction: column; /* Stack buttons vertically on small screens */
        gap: 10px;
        align-items: stretch;
    }
    .action-buttons button {
        min-width: 100%;
        max-width: none;
        padding: 10px;
        font-size: 0.9em;
    }
    footer div {
        min-width: unset;
    }
    footer p {
        position: static;
        transform: none;
        padding: 10px;
    }
}

@import "../chroma/dark.css";
@import "../codemirror/dark.css";
@import "../markup/dark.css";

:root {
  /* Steel Scale - Map to existing darks and grays from index.css */
  --steel-900: #0b0c0a; /* Darkest sections (logs, action bars) */
  --steel-850: #11120f; /* Main content background */
  --steel-800: #161813; /* HTML background, darker sections, form inputs, alerts */
  --steel-750: #1a1b18; /* Table header, client details, container info card background, modal content bg */
  --steel-700: #1a1b18; /* Reusing 750 or similar as it's a common dark background */
  --steel-650: #1c1d1a; /* Even table row background */
  --steel-600: #2a2b28; /* Client summary hover background */
  --steel-550: #999999; /* Dimmer gray for help text, etc. */
  --steel-500: #999999; /* Secondary text color */
  --steel-450: #c2c2c2; /* Secondary primary text color */
  --steel-400: #c2c2c2;
  --steel-350: #c2c2c2;
  --steel-300: #c2c2c2;
  --steel-250: #dddddd; /* Primary text color */
  --steel-200: #dddddd;
  --steel-150: #dddddd;
  --steel-100: #dddddd;

  --is-dark-theme: true;

  /* Primary Accent - Muted light green */
  --color-primary: #8cce87;
  --color-primary-contrast: #11120f; /* Main content background for contrast */
  --color-primary-dark-1: #7bbd76; /* Based on btn-primary hover */
  --color-primary-dark-2: #7bbd76;
  --color-primary-dark-3: #7bbd76;
  --color-primary-dark-4: #7bbd76;
  --color-primary-dark-5: #7bbd76;
  --color-primary-dark-6: #7bbd76;
  --color-primary-dark-7: #7bbd76;
  --color-primary-light-1: #8cce87; /* Same as primary */
  --color-primary-light-2: #8cce87;
  --color-primary-light-3: #8cce87;
  --color-primary-light-4: #8cce87;
  --color-primary-light-5: #8cce87;
  --color-primary-light-6: #8cce87;
  --color-primary-light-7: #8cce87;
  --color-primary-alpha-10: rgba(140, 206, 135, 0.1);
  --color-primary-alpha-20: rgba(140, 206, 135, 0.2);
  --color-primary-alpha-30: rgba(140, 206, 135, 0.3);
  --color-primary-alpha-40: rgba(140, 206, 135, 0.4);
  --color-primary-alpha-50: rgba(140, 206, 135, 0.5);
  --color-primary-alpha-60: rgba(140, 206, 135, 0.6);
  --color-primary-alpha-70: rgba(140, 206, 135, 0.7);
  --color-primary-alpha-80: rgba(140, 206, 135, 0.8);
  --color-primary-alpha-90: rgba(140, 206, 135, 0.9);
  --color-primary-hover: #7bbd76;
  --color-primary-active: #7bbd76;

  /* Secondary - Based on steel scale / dark backgrounds */
  --color-secondary: var(--steel-700); /* Table header background */
  --color-secondary-dark-1: var(--steel-550); /* Dimmer grey */
  --color-secondary-dark-2: var(--steel-500);
  --color-secondary-dark-3: var(--steel-450);
  --color-secondary-dark-4: var(--steel-400);
  --color-secondary-dark-5: var(--steel-350);
  --color-secondary-dark-6: var(--steel-300);
  --color-secondary-dark-7: var(--steel-250);
  --color-secondary-dark-8: var(--steel-200);
  --color-secondary-dark-9: var(--steel-150);
  --color-secondary-dark-10: var(--steel-100);
  --color-secondary-dark-11: var(--steel-100);
  --color-secondary-dark-12: var(--steel-100);
  --color-secondary-dark-13: var(--steel-100);
  --color-secondary-light-1: var(--steel-650); /* Even table row background */
  --color-secondary-light-2: var(--steel-700);
  --color-secondary-light-3: var(--steel-750);
  --color-secondary-light-4: var(--steel-800);
  --color-secondary-alpha-10: rgba(26, 27, 24, 0.1);
  --color-secondary-alpha-20: rgba(26, 27, 24, 0.2);
  --color-secondary-alpha-30: rgba(26, 27, 24, 0.3);
  --color-secondary-alpha-40: rgba(26, 27, 24, 0.4);
  --color-secondary-alpha-50: rgba(26, 27, 24, 0.5);
  --color-secondary-alpha-60: rgba(26, 27, 24, 0.6);
  --color-secondary-alpha-70: rgba(26, 27, 24, 0.7);
  --color-secondary-alpha-80: rgba(26, 27, 24, 0.8);
  --color-secondary-alpha-90: rgba(26, 27, 24, 0.9);
  --color-secondary-hover: var(--color-secondary-light-1);
  --color-secondary-active: var(--color-secondary-light-2);

  /* Console colors - used for actions console and console files */
  --color-console-fg: #dddddd; /* Primary text */
  --color-console-fg-subtle: #999999; /* Dimmer gray */
  --color-console-bg: #0b0c0a; /* Darkest sections */
  --color-console-border: #8cce87; /* Accent green (from log-output-box border) */
  --color-console-hover-bg: #1a1b18; /* Slightly lighter dark for hover */
  --color-console-active-bg: #161813;
  --color-console-menu-bg: #1a1b18;
  --color-console-menu-border: #8cce87;

  /* Specific colors - Using direct matches from index.css */
  --color-red: #F44336; /* Danger/Error/Failed */
  --color-orange: #FF9800; /* Warning/Pending orange */
  --color-yellow: #FFC107; /* Warning/Pending yellow */
  --color-olive: #4CAF50; /* No direct olive, using success green */
  --color-green: #4CAF50; /* Success/OK */
  --color-teal: #3399ff; /* No direct teal, using darker link blue */
  --color-blue: #3399ff; /* Link hover, info alerts */
  --color-violet: #66ccff; /* No direct violet, using lighter link blue */
  --color-purple: #66ccff; /* No direct purple, using lighter link blue */
  --color-pink: #ff3333; /* No direct pink, using danger red */
  --color-brown: #999999; /* No direct brown, using dimmer gray */
  --color-grey: #999999; /* Dimmer gray */
  --color-black: #11120f; /* Main content background */

  /* Light variants - Map to closest from index.css */
  --color-red-light: #ff3333; /* Danger/Error/Failed */
  --color-orange-light: #FFC107; /* Warning/Pending yellow */
  --color-yellow-light: #FFC107;
  --color-olive-light: #4CAF50;
  --color-green-light: #4CAF50;
  --color-teal-light: #66ccff; /* Links & Info */
  --color-blue-light: #66ccff;
  --color-violet-light: #8cce87; /* Using accent green for positive attention-like color */
  --color-purple-light: #8cce87;
  --color-pink-light: #F44336;
  --color-brown-light: #dddddd; /* Primary text */
  --color-grey-light: #c2c2c2; /* Secondary text */
  --color-black-light: #161813; /* HTML background, darker sections */

  /* Dark 1 variants - Map to hover/active states or darker shades from index.css */
  --color-red-dark-1: #cc0000; /* btn-danger hover */
  --color-orange-dark-1: #e0a800; /* btn-warning hover */
  --color-yellow-dark-1: #e0a800;
  --color-olive-dark-1: #45a049; /* btn-success hover */
  --color-green-dark-1: #45a049;
  --color-teal-dark-1: #3399ff;
  --color-blue-dark-1: #3399ff;
  --color-violet-dark-1: #8cce87;
  --color-purple-dark-1: #8cce87;
  --color-pink-dark-1: #cc0000;
  --color-brown-dark-1: #999999;
  --color-black-dark-1: #0b0c0a; /* Darkest section */

  /* Dark 2 variants - Further darker shades from index.css */
  --color-red-dark-2: #cc0000;
  --color-orange-dark-2: #e0a800;
  --color-yellow-dark-2: #e0a800;
  --color-olive-dark-2: #45a049;
  --color-green-dark-2: #45a049;
  --color-teal-dark-2: #3399ff;
  --color-blue-dark-2: #3399ff;
  --color-violet-dark-2: #8cce87;
  --color-purple-dark-2: #8cce87;
  --color-pink-dark-2: #cc0000;
  --color-brown-dark-2: #999999;
  --color-black-dark-2: #0b0c0a;

  /* Ansi colors (console) - Map to existing palette */
  --color-ansi-black: #0b0c0a;
  --color-ansi-red: #ff3333;
  --color-ansi-green: #4CAF50;
  --color-ansi-yellow: #FFC107;
  --color-ansi-blue: #66ccff;
  --color-ansi-magenta: #ff3333; /* Using red, no direct magenta in index.css */
  --color-ansi-cyan: #66ccff; /* Using link blue, no direct cyan in index.css */
  --color-ansi-white: #999999;
  --color-ansi-bright-black: #11120f;
  --color-ansi-bright-red: #F44336;
  --color-ansi-bright-green: #4CAF50;
  --color-ansi-bright-yellow: #FFC107;
  --color-ansi-bright-blue: #3399ff;
  --color-ansi-bright-magenta: #F44336;
  --color-ansi-bright-cyan: #3399ff;
  --color-ansi-bright-white: #dddddd;

  /* Other colors */
  --color-gold: #FFC107; /* Using warning yellow */
  --color-white: #ffffff;
  --color-pure-black: #000000;
  /* Diff colors - No direct mapping, use logical shades of existing colors */
  --color-diff-removed-word-bg: rgba(255,51,51,0.4); /* Based on danger color with alpha */
  --color-diff-added-word-bg: rgba(76,175,80,0.4); /* Based on success color with alpha */
  --color-diff-removed-row-bg: rgba(255,51,51,0.2); /* Darker red shade */
  --color-diff-moved-row-bg: rgba(255,152,0,0.2); /* Darker orange shade */
  --color-diff-added-row-bg: rgba(76,175,80,0.2); /* Darker green shade */
  --color-diff-removed-row-border: #ff3333; /* Darker red border */
  --color-diff-moved-row-border: #FF9800; /* Darker orange border */
  --color-diff-added-row-border: #4CAF50; /* Darker green border */
  --color-diff-inactive: var(--steel-650); /* Even table row background for inactive diff */

  /* Error/Success/Warning/Info Banners - Map to existing alert styles from index.css */
  --color-error-border: #ff3333;
  --color-error-bg: #161813; /* Alert background */
  --color-error-bg-active: #F44336; /* Danger color for active/hover */
  --color-error-bg-hover: #F44336;
  --color-error-text: #ffffff;
  --color-success-border: #8cce87; /* Accent green border */
  --color-success-bg: #161813;
  --color-success-text: #ffffff;
  --color-warning-border: #FFC107;
  --color-warning-bg: #161813;
  --color-warning-text: #ffffff;
  --color-info-border: #3399ff;
  --color-info-bg: #161813;
  --color-info-text: #ffffff;

  /* Badge colors - Map to status colors and derived alpha */
  --color-red-badge: #ff3333;
  --color-red-badge-bg: rgba(255,51,51,0.13);
  --color-red-badge-hover-bg: rgba(255,51,51,0.2);
  --color-green-badge: #4CAF50;
  --color-green-badge-bg: rgba(76,175,80,0.13);
  --color-green-badge-hover-bg: rgba(76,175,80,0.2);
  --color-yellow-badge: #FFC107;
  --color-yellow-badge-bg: rgba(255,193,7,0.13);
  --color-yellow-badge-hover-bg: rgba(255,193,7,0.2);
  --color-orange-badge: #FF9800;
  --color-orange-badge-bg: rgba(255,152,0,0.13);
  --color-orange-badge-hover-bg: rgba(255,152,0,0.2);

  /* Icon colors (PR/Issue/...) - Map to status/accent colors */
  --color-icon-green: #8cce87; /* Primary accent */
  --color-icon-red: #ff3333;
  --color-icon-purple: #66ccff; /* Using lighter link blue */

  /* Target-based colors - Map to primary palette and component colors from index.css */
  --color-body: #161813; /* html background */
  --color-box-header: #1a1b18; /* table th background */
  --color-box-body: #11120f; /* main background */
  --color-box-body-highlight: #1c1d1a; /* even table row background */
  --color-text-dark: #dddddd;
  --color-text: #dddddd;
  --color-text-light: #c2c2c2;
  --color-text-light-1: #c2c2c2;
  --color-text-light-2: #999999;
  --color-text-light-3: #999999;
  --color-footer: #11120f;
  --color-timeline: #1a1b18; /* Using similar to box header */
  --color-input-text: #dddddd;
  --color-input-background: #161813;
  --color-input-toggle-background: #161813;
  --color-input-border: #8cce87;
  --color-input-border-hover: #ffffff;
  --color-header-wrapper: #161813; /* Similar to body background */
  --color-header-wrapper-transparent: rgba(22, 24, 19, 0); /* Transparent version of header-wrapper */
  --color-light: rgba(0,0,0,0.4); /* Shadow color */
  --color-light-mimic-enabled: rgba(0, 0, 0, 0.4); /* Reusing shadow color */
  --color-light-border: rgba(255,255,255,0.15); /* Light border for elements that have a general light border */
  --color-hover: #2a2b28; /* client-summary hover */
  --color-active: #1a1b18; /* client-details background */
  --color-menu: #1a1b18; /* similar to table header */
  --color-card: #1a1b18; /* container-info-card background */
  --fancy-card-bg: #1a1b18;
  --fancy-card-border: rgba(140, 206, 135, 0.2); /* container-info-card border */
  --color-markup-table-row: rgba(255,255,255,0.02); /* Very subtle white tint for table rows within markup */
  --color-markup-code-block: #11120f; /* Log output box background */
  --color-markup-code-inline: #161813; /* Slightly lighter dark for inline code */
  --color-button: #11120f; /* main .btn background */
  --color-code-bg: #11120f; /* Log output box background */
  --color-shadow: rgba(0,0,0,0.4);
  --color-secondary-bg: #11120f; /* main content background */
  --color-text-focus: #ffffff;
  --color-expand-button: #1a1b18; /* Use a dark background color */
  --color-placeholder-text: #999999;
  --color-editor-line-highlight: #1a1b18; /* Table header bg or similar */
  --color-project-board-bg: #11120f; /* Main content background */
  --color-project-board-dark-label: #999999;
  --color-caret: #dddddd;
  --color-reaction-bg: rgba(0,0,0,0.1); /* Very subtle dark for reaction background */
  --color-reaction-active-bg: rgba(140, 206, 135, 0.3);
  --color-reaction-hover-bg: rgba(140, 206, 135, 0.4);
  --color-tooltip-text: #ffffff;
  --color-tooltip-bg: rgba(0,0,0,0.9);
  --color-nav-bg: #0b0c0a; /* Darkest */
  --color-nav-hover-bg: #1a1b18; /* Client summary hover or similar */
  --color-nav-text: #c2c2c2;
  --color-secondary-nav-bg: #11120f;
  --color-label-text: #ffffff;
  --color-label-bg: #11120f;
  --color-label-hover-bg: #161813;
  --color-label-active-bg: #1a1b18;
  --color-label-bg-alt: #161813;
  --color-accent: #8cce87;
  --color-small-accent: #8cce87;
  --color-highlight-fg: #8cce87;
  --color-highlight-bg: rgba(140, 206, 135, 0.2);
  --color-overlay-backdrop: rgba(0,0,0,0.7);
  --checkerboard-color-1: #474747; /* Keeping original for checkerboard pattern */
  --checkerboard-color-2: #313131; /* Keeping original for checkerboard pattern */
  accent-color: var(--color-accent);
  color-scheme: dark;
}

/* invert emojis that are hard to read otherwise */
.emoji[aria-label="check mark"],.emoji[aria-label="currency exchange"],.emoji[aria-label="TOP arrow"],.emoji[aria-label="END arrow"],.emoji[aria-label="ON! arrow"],.emoji[aria-label="SOON arrow"],.emoji[aria-label="heavy dollar sign"],.emoji[aria-label="copyright"],.emoji[aria-label="registered"],.emoji[aria-label="trade mark"],.emoji[aria-label="multiply"],.emoji[aria-label="plus"],.emoji[aria-label="minus"],.emoji[aria-label="divide"],.emoji[aria-label="curly loop"],.emoji[aria-label="double curly loop"],.emoji[aria-label="wavy dash"],.emoji[aria-label="paw prints"],.emoji[aria-label="musical note"],.emoji[aria-label="musical notes"] {
  filter: invert(100%) hue-rotate(180deg);
}
i.grey.icon.icon.icon.icon {
  color: var(--steel-350) !important;
}
.ui.secondary.vertical.menu {
  border-radius: 0.28571429rem !important;
  overflow: hidden;
}
.ui.basic.primary.button.item {
  background-color: var(--color-active) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}
.ui.red.label.notification_count,.ui.primary.label,.ui.primary.labels .label {
  background-color: var(--color-primary-light-3) !important;
}
.repository.view.issue .comment-list .code-comment + .code-comment {
  margin: 1.25rem 0 !important;
  padding-top: 1.25rem !important;
  border-top-color: var(--steel-650) !important;
}
.ui.labeled.icon.buttons > .button > .icon,.ui.labeled.icon.button > .icon {
  background-color: var(--color-light) !important;
}
#review-box .review-comments-counter {
  background-color: var(--color-shadow) !important;
  color: var(--color-white) !important;
  margin-left: 0.5em;
}
.ui.basic.labels .primary.label,.ui.ui.ui.basic.primary.label {
  color: var(--color-text-dark) !important;
}
.ui.yellow.label.pending-label {
  color: var(--color-warning-text) !important;
}
::selection {
  background: var(--steel-100) !important;
  color: var(--color-pure-black) !important;
}
strong.attention-important, svg.attention-important {
  color: var(--color-violet-light);
}
strong.attention-note, svg.attention-note {
  color: var(--color-blue-light);
}
strong.attention-caution, svg.attention-caution {
  color: var(--color-red-light);
}
.ui.basic.red.button {
  background-color: var(--color-red);
  color: var(--color-white);
}
.ui.basic.red.button:hover,.ui.basic.red.button:focus {
  background-color: var(--color-red-dark-1);
  color: var(--color-white);
}
.ui.basic.red.button:active {
  background-color: var(--color-red-dark-2);
  color: var(--color-white);
}