Template:Form styles.css

/* Page Forms Dark Mode Styles */
/* Fixes visibility issues for form inputs in night mode */

/* ===== LIGHT MODE BASE STYLES ===== */

/* Form table styling */
.formtable {
    background-color: #ffffff;
}

.formtable th {
    color: #333333;
}

.formtable td {
    color: #333333;
}

/* Section headers in forms */
.formtable td[style*="background:#f0f0f0"],
.formtable td[style*="background: #f0f0f0"] {
    background-color: #f0f0f0 !important;
    color: #333333 !important;
}

/* Token input fields (used for file selection) */
.pfTokens {
    background-color: #ffffff !important;
    border-color: #a2a9b1 !important;
}

.pfTokens .token {
    background-color: #f0f0f5 !important;
    color: #333333 !important;
    border-color: #c0c0c5 !important;
}

.pfTokens .token .close {
    color: #666666 !important;
}

.pfTokens input[type="text"] {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Combobox inputs */
.pfComboBox,
.pfComboBox input {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Standard text inputs */
.formtable input[type="text"],
.formtable input[type="url"],
.formtable input[type="number"],
.formtable textarea,
.formtable select {
    background-color: #ffffff;
    color: #333333;
    border-color: #a2a9b1;
}

/* Dropdown/select styling */
.formtable select {
    background-color: #ffffff;
    color: #333333;
}

/* Autocomplete dropdown */
.ui-autocomplete,
.ui-menu {
    background-color: #ffffff !important;
    border-color: #a2a9b1 !important;
}

.ui-autocomplete .ui-menu-item,
.ui-menu .ui-menu-item {
    color: #333333 !important;
}

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-state-focus,
.ui-menu .ui-menu-item:hover,
.ui-menu .ui-state-focus {
    background-color: #e8e8e8 !important;
    color: #333333 !important;
}

/* ===== DARK MODE STYLES ===== */

/* User preference: night mode */
html.skin-theme-clientpref-night .formtable {
    background-color: #1e1e2e;
}

html.skin-theme-clientpref-night .formtable th {
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .formtable td {
    color: #cdd6f4;
}

/* Section headers - override inline styles */
html.skin-theme-clientpref-night .formtable td[style*="background:#f0f0f0"],
html.skin-theme-clientpref-night .formtable td[style*="background: #f0f0f0"] {
    background-color: #45475a !important;
    color: #cdd6f4 !important;
}

/* Token input fields */
html.skin-theme-clientpref-night .pfTokens {
    background-color: #313244 !important;
    border-color: #45475a !important;
}

html.skin-theme-clientpref-night .pfTokens .token {
    background-color: #45475a !important;
    color: #cdd6f4 !important;
    border-color: #585b70 !important;
}

html.skin-theme-clientpref-night .pfTokens .token .close {
    color: #bac2de !important;
}

html.skin-theme-clientpref-night .pfTokens input[type="text"] {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
}

/* Combobox inputs */
html.skin-theme-clientpref-night .pfComboBox,
html.skin-theme-clientpref-night .pfComboBox input {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
    border-color: #45475a !important;
}

/* Standard text inputs */
html.skin-theme-clientpref-night .formtable input[type="text"],
html.skin-theme-clientpref-night .formtable input[type="url"],
html.skin-theme-clientpref-night .formtable input[type="number"],
html.skin-theme-clientpref-night .formtable textarea,
html.skin-theme-clientpref-night .formtable select {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
    border-color: #45475a !important;
}

/* Dropdown/select styling */
html.skin-theme-clientpref-night .formtable select {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
}

html.skin-theme-clientpref-night .formtable select option {
    background-color: #313244;
    color: #cdd6f4;
}

/* Autocomplete dropdown */
html.skin-theme-clientpref-night .ui-autocomplete,
html.skin-theme-clientpref-night .ui-menu {
    background-color: #313244 !important;
    border-color: #45475a !important;
}

html.skin-theme-clientpref-night .ui-autocomplete .ui-menu-item,
html.skin-theme-clientpref-night .ui-menu .ui-menu-item {
    color: #cdd6f4 !important;
}

html.skin-theme-clientpref-night .ui-autocomplete .ui-menu-item:hover,
html.skin-theme-clientpref-night .ui-autocomplete .ui-state-focus,
html.skin-theme-clientpref-night .ui-menu .ui-menu-item:hover,
html.skin-theme-clientpref-night .ui-menu .ui-state-focus {
    background-color: #45475a !important;
    color: #cdd6f4 !important;
}

/* Checkboxes and radio buttons labels */
html.skin-theme-clientpref-night .formtable label {
    color: #cdd6f4;
}

/* Small help text */
html.skin-theme-clientpref-night .formtable small {
    color: #a6adc8;
}

/* Links in forms */
html.skin-theme-clientpref-night .formtable a {
    color: #89b4fa;
}

/* Form buttons */
html.skin-theme-clientpref-night input[type="submit"],
html.skin-theme-clientpref-night button {
    background-color: #45475a;
    color: #cdd6f4;
    border-color: #585b70;
}

html.skin-theme-clientpref-night input[type="submit"]:hover,
html.skin-theme-clientpref-night button:hover {
    background-color: #585b70;
}

/* Placeholder text */
html.skin-theme-clientpref-night .formtable input::placeholder,
html.skin-theme-clientpref-night .formtable textarea::placeholder {
    color: #6c7086 !important;
}

/* ===== OS DARK MODE PREFERENCE ===== */

@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .formtable {
        background-color: #1e1e2e;
    }

    html.skin-theme-clientpref-os .formtable th {
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .formtable td {
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .formtable td[style*="background:#f0f0f0"],
    html.skin-theme-clientpref-os .formtable td[style*="background: #f0f0f0"] {
        background-color: #45475a !important;
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os .pfTokens {
        background-color: #313244 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .pfTokens .token {
        background-color: #45475a !important;
        color: #cdd6f4 !important;
        border-color: #585b70 !important;
    }

    html.skin-theme-clientpref-os .pfTokens .token .close {
        color: #bac2de !important;
    }

    html.skin-theme-clientpref-os .pfTokens input[type="text"] {
        background-color: #313244 !important;
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os .pfComboBox,
    html.skin-theme-clientpref-os .pfComboBox input {
        background-color: #313244 !important;
        color: #cdd6f4 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .formtable input[type="text"],
    html.skin-theme-clientpref-os .formtable input[type="url"],
    html.skin-theme-clientpref-os .formtable input[type="number"],
    html.skin-theme-clientpref-os .formtable textarea,
    html.skin-theme-clientpref-os .formtable select {
        background-color: #313244 !important;
        color: #cdd6f4 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .formtable select option {
        background-color: #313244;
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .ui-autocomplete,
    html.skin-theme-clientpref-os .ui-menu {
        background-color: #313244 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .ui-autocomplete .ui-menu-item,
    html.skin-theme-clientpref-os .ui-menu .ui-menu-item {
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os .ui-autocomplete .ui-menu-item:hover,
    html.skin-theme-clientpref-os .ui-autocomplete .ui-state-focus,
    html.skin-theme-clientpref-os .ui-menu .ui-menu-item:hover,
    html.skin-theme-clientpref-os .ui-menu .ui-state-focus {
        background-color: #45475a !important;
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os .formtable label {
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .formtable small {
        color: #a6adc8;
    }

    html.skin-theme-clientpref-os .formtable a {
        color: #89b4fa;
    }

    html.skin-theme-clientpref-os input[type="submit"],
    html.skin-theme-clientpref-os button {
        background-color: #45475a;
        color: #cdd6f4;
        border-color: #585b70;
    }

    html.skin-theme-clientpref-os input[type="submit"]:hover,
    html.skin-theme-clientpref-os button:hover {
        background-color: #585b70;
    }

    html.skin-theme-clientpref-os .formtable input::placeholder,
    html.skin-theme-clientpref-os .formtable textarea::placeholder {
        color: #6c7086 !important;
    }
}