/* ============================================================
   STAR WARS EPISODE I — Sith Theme
   Uses Mini-Rigs layout but replaces colours with TPM palette
   ============================================================ */

/* Override Mini-Rigs colour variables */
:root {
    --sw-bg: #0b0b0b;          /* deep black */
    --sw-panel: #1a0a0a;       /* dark red-black */
    --sw-grid-line: #b30000;   /* Sith red */
    --sw-accent: #ff1a1a;      /* bright Maul red */
    --sw-text: #f2f2f2;        /* light grey */
    --sw-header: #ff1a1a;      /* panel title red */
    --sw-rare: #ffcc66;        /* gold highlight */
    --sw-common: #ff6666;      /* soft red */
}

/* Page background (full width, Sith gradient) */
body.ep1 {
    background: linear-gradient(180deg, #2b0000 0%, #000000 70%) fixed !important;
    color: var(--sw-text);
   font-family: 'Segoe UI', Arial, sans-serif;
}
	
/* Panels — Sith red borders */
body.ep1 .sw-panel {
    background: var(--sw-panel);
    border: 1px solid var(--sw-grid-line);
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.25);
}

/* Panel header */
body.ep1 .sw-panel__header {
    border-bottom: 1px solid var(--sw-grid-line);
}

body.ep1 .sw-panel__title {
    color: var(--sw-header);
    text-shadow: 0 0 6px rgba(255, 0, 0, 0.5);
}

body.ep1 .sw-panel__subtitle {
    color: #ffcc66;
}

/* Tables */
body.ep1 .sw-table th {
    background: #330000;
    color: #ffcc66;
    border-bottom: 1px solid var(--sw-grid-line);
}

body.ep1 .sw-table td {
    border-bottom: 1px solid #2a0a0a;
	   font-family: 'Segoe UI', Arial, sans-serif;
}

body.ep1 .sw-table tr:nth-child(even) {
    background: #140000;
}

/* Buttons */
body.ep1 .sw-button {
    background: var(--sw-accent);
    color: #000;
}

body.ep1 .sw-button:hover {
    background: #ff4d4d;
}

/* Back button */
body.ep1 .sw-back {
    background: var(--sw-grid-line);
}

/* Form fields */
body.ep1 .sw-form input,
body.ep1 .sw-form select,
body.ep1 .sw-form textarea {
    background: #1a0a0a;
    border: 1px solid var(--sw-grid-line);
    color: var(--sw-text);
}

body.ep1 .sw-form button {
    background: var(--sw-accent);
    color: #000;
}
body.ep1 .sw-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

}
/* Episode I wrapper background */
body.ep1 .sw-wrapper {
    background: #0b0b0b !important; /* or var(--sw-bg) */
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 20px;
}
body.ep1 .sw-panel {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   EPISODE I — Sith Form Container (Option A)
   Matches panel colours and Maul-era palette
   ============================================================ */

body.ep1 .form-container {
    background: #1a0a0a;                 /* Sith panel red-black */
    border: 1px solid #b30000;           /* Sith red */
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.25);
    border-radius: 6px;
}

/* Form labels */
body.ep1 .form-container label {
    color: var(--sw-text);
    font-weight: bold;
}

/* Inputs, selects, textareas */
body.ep1 .form-container input,
body.ep1 .form-container select,
body.ep1 .form-container textarea {
    background: #0f0505;                 /* deeper Sith black */
    border: 1px solid #b30000;           /* Sith red border */
    color: #f2f2f2;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* Buttons */
body.ep1 .form-container button {
    background: #ff1a1a;                 /* Maul red */
    color: #000;
    border: none;
    padding: 8px 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}

body.ep1 .form-container button:hover {
    background: #ff4d4d;                 /* lighter Sith red */
}