commander-ai-lab/unity-client/Assets/UI/CommanderLabShared.uss

/* ============================================================
   CommanderLabShared.uss  —  Global dark MTG theme
   Used as the base stylesheet across ALL Commander AI Lab screens
   ============================================================ */

/* ── Root / Background ── */
.lab-root {
    flex-direction: column;
    flex-grow: 1;
    background-color: rgb(13, 13, 20);
    color: rgb(220, 210, 190);
    font-size: 14px;
}

/* ── Top Navigation Bar ── */
.nav-bar {
    flex-direction: row;
    align-items: center;
    padding: 10px 18px;
    background-color: rgb(20, 16, 30);
    border-bottom-width: 2px;
    border-bottom-color: rgb(90, 60, 160);
    height: 54px;
}

.nav-title {
    font-size: 20px;
    color: rgb(180, 140, 255);
    -unity-font-style: bold;
    flex-grow: 1;
    letter-spacing: 1px;
}

/* ── Buttons ── */
.btn {
    background-color: rgb(60, 42, 100);
    color: rgb(220, 210, 190);
    border-width: 1px;
    border-color: rgb(100, 70, 180);
    border-radius: 6px;
    padding: 8px 16px;
    margin: 4px;
    font-size: 13px;
    cursor: auto;
    transition-duration: 0.15s;
}

.btn:hover {
    background-color: rgb(80, 55, 140);
    border-color: rgb(150, 110, 255);
}

.btn:active {
    background-color: rgb(50, 35, 85);
}

.btn-primary {
    background-color: rgb(80, 50, 170);
    border-color: rgb(150, 100, 255);
    color: rgb(255, 255, 255);
    -unity-font-style: bold;
}

.btn-primary:hover {
    background-color: rgb(100, 65, 210);
}

.btn-danger {
    background-color: rgb(120, 30, 40);
    border-color: rgb(200, 60, 70);
    color: rgb(255, 180, 180);
}

.btn-danger:hover {
    background-color: rgb(160, 40, 55);
}

.btn-success {
    background-color: rgb(30, 100, 50);
    border-color: rgb(60, 180, 90);
    color: rgb(180, 255, 190);
}

.btn-success:hover {
    background-color: rgb(40, 130, 65);
}

.btn-icon {
    padding: 6px 10px;
    font-size: 16px;
}

/* ── Panel / Cards ── */
.panel {
    background-color: rgb(20, 18, 32);
    border-width: 1px;
    border-color: rgb(60, 45, 100);
    border-radius: 10px;
    padding: 14px;
    margin: 6px;
}

.panel-header {
    font-size: 16px;
    color: rgb(180, 140, 255);
    -unity-font-style: bold;
    margin-bottom: 10px;
    border-bottom-width: 1px;
    border-bottom-color: rgb(60, 45, 100);
    padding-bottom: 6px;
}

/* ── Inputs & Dropdowns ── */
.input-field {
    background-color: rgb(28, 24, 44);
    border-width: 1px;
    border-color: rgb(80, 60, 130);
    border-radius: 6px;
    color: rgb(220, 210, 190);
    padding: 6px 10px;
    font-size: 13px;
    margin: 3px 0;
    height: 34px;
}

.input-field:focus {
    border-color: rgb(140, 100, 255);
}

.dropdown {
    background-color: rgb(28, 24, 44);
    border-width: 1px;
    border-color: rgb(80, 60, 130);
    border-radius: 6px;
    color: rgb(220, 210, 190);
    padding: 4px 8px;
    font-size: 13px;
    margin: 3px 0;
    height: 34px;
}

/* ── Labels ── */
.label {
    color: rgb(160, 150, 180);
    font-size: 13px;
    margin-bottom: 2px;
}

.label-bold {
    color: rgb(200, 190, 220);
    font-size: 13px;
    -unity-font-style: bold;
}

.stat-value {
    color: rgb(140, 200, 255);
    font-size: 22px;
    -unity-font-style: bold;
}

/* ── Error Panel ── */
.error-panel {
    background-color: rgb(60, 15, 20);
    border-width: 1px;
    border-color: rgb(180, 50, 60);
    border-radius: 8px;
    padding: 12px;
    margin: 8px;
}

.error-text {
    color: rgb(255, 140, 140);
    font-size: 13px;
}

/* ── Loading Spinner placeholder ── */
.spinner {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border-width: 3px;
    border-color: rgb(100, 70, 200);
    border-top-color: rgb(200, 160, 255);
    margin: 8px auto;
}

/* ── Scroll area ── */
.scroll-view {
    flex-grow: 1;
    background-color: rgb(16, 14, 26);
    border-radius: 6px;
}

/* ── Divider ── */
.divider {
    height: 1px;
    background-color: rgb(50, 40, 80);
    margin: 8px 0;
}

/* ── Badge / Chip ── */
.badge {
    background-color: rgb(60, 45, 100);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 11px;
    color: rgb(200, 180, 255);
    margin: 2px;
}

.badge-green  { background-color: rgb(20, 70, 35);  color: rgb(160, 255, 170); }
.badge-red    { background-color: rgb(70, 20, 25);  color: rgb(255, 150, 150); }
.badge-blue   { background-color: rgb(20, 45, 90);  color: rgb(140, 200, 255); }
.badge-gold   { background-color: rgb(70, 55, 10);  color: rgb(255, 215, 100); }

/* ── MTG color identity dots ── */
.color-w { background-color: rgb(248, 231, 185); border-radius: 8px; width:14px; height:14px; margin:1px; }
.color-u { background-color: rgb( 14, 104, 171); border-radius: 8px; width:14px; height:14px; margin:1px; }
.color-b { background-color: rgb( 21,  11,  0 ); border-radius: 8px; width:14px; height:14px; margin:1px; }
.color-r { background-color: rgb(211,  32,  42); border-radius: 8px; width:14px; height:14px; margin:1px; }
.color-g { background-color: rgb(  0, 115,  62); border-radius: 8px; width:14px; height:14px; margin:1px; }
.color-c { background-color: rgb(180, 180, 180); border-radius: 8px; width:14px; height:14px; margin:1px; }

/* ── Progress bar ── */
.progress-track {
    height: 12px;
    background-color: rgb(30, 25, 50);
    border-radius: 6px;
    border-width: 1px;
    border-color: rgb(70, 55, 110);
    overflow: hidden;
    margin: 4px 0;
}

.progress-fill {
    height: 12px;
    background-color: rgb(100, 70, 220);
    border-radius: 6px;
    transition-duration: 0.3s;
}

/* ── Toggle ── */
.toggle-label {
    color: rgb(180, 170, 200);
    font-size: 13px;
    flex-direction: row;
    align-items: center;
}