Template:SS organizations/styles.css

/* Light mode defaults – gold theme */
.navbox-ss,
.navbox-ss .navbox-title,
.navbox-ss .navbox-group,
.navbox-ss .navbox-subgroup,
.navbox-ss th,
.navbox-ss td {
    background-color: #c48f2d;
    color: #000000;
    border-color: #a8741f;
}

/* Headers/groups/titles slightly darker gold for contrast */
.navbox-ss .navbox-title,
.navbox-ss caption,
.navbox-ss th[scope="col"],
.navbox-ss .navbox-group,
.navbox-ss .navbox-abovebelow {
    background-color: #b37c28;
    color: #000000;
}

/* Nested subgroups inside your navbox */
.navbox-ss .navbox-subgroup .navbox-group,
.navbox-ss .navbox-subgroup td {
    background-color: #c48f2d;
    color: #000000;
}

/* Links readable on gold background (dark colors) */
.navbox-ss a:link,
.navbox-ss a:visited {
    color: #001f3f; /* very dark navy */
}
.navbox-ss a.new {
    color: #800000; /* dark red */
}

/* Dark mode overrides – Automatic/OS preference */
@media (prefers-color-scheme: dark) {
    /* Gold elements stay gold */
    html.skin-theme-clientpref-os .navbox-ss,
    html.skin-theme-clientpref-os .navbox-ss .navbox-title,
    html.skin-theme-clientpref-os .navbox-ss .navbox-group,
    html.skin-theme-clientpref-os .navbox-ss .navbox-subgroup,
    html.skin-theme-clientpref-os .navbox-ss th,
    html.skin-theme-clientpref-os .navbox-ss td,
    html.skin-theme-clientpref-os .navbox-ss table.navbox th,
    html.skin-theme-clientpref-os .navbox-ss table.navbox td {
        background-color: #c48f2d !important;
        color: #000000 !important;
        border-color: #a8741f !important;
    }

    html.skin-theme-clientpref-os .navbox-ss .navbox-title,
    html.skin-theme-clientpref-os .navbox-ss caption,
    html.skin-theme-clientpref-os .navbox-ss th[scope="col"],
    html.skin-theme-clientpref-os .navbox-ss .navbox-group,
    html.skin-theme-clientpref-os .navbox-ss .navbox-abovebelow {
        background-color: #b37c28 !important;
        color: #000000 !important;
    }

    html.skin-theme-clientpref-os .navbox-ss .navbox-subgroup .navbox-group {
        background-color: #c48f2d !important;
        color: #000000 !important;
    }

    /* Force dark gray for main content areas (the "white" problem) */
    html.skin-theme-clientpref-os .navbox-ss td,
    html.skin-theme-clientpref-os .navbox-ss th:not(.navbox-group):not(.navbox-title):not([scope="col"]) {
        background-color: #252525 !important;   /* dark gray body */
        color: #e0e0e0 !important;             /* light gray text */
    }

    /* Alternating rows striping – very dark gray */
    html.skin-theme-clientpref-os .navbox-ss .navbox-odd,
    html.skin-theme-clientpref-os .navbox-ss .navbox-even {
        background-color: #1e1e1e !important;
    }

    /* Nested subgroup content cells */
    html.skin-theme-clientpref-os .navbox-ss .navbox-subgroup td,
    html.skin-theme-clientpref-os .navbox-ss .navbox-subgroup th {
        background-color: #252525 !important;
        color: #e0e0e0 !important;
    }

    /* Darker gold borders for better separation in dark mode */
    html.skin-theme-clientpref-os .navbox-ss,
    html.skin-theme-clientpref-os .navbox-ss th,
    html.skin-theme-clientpref-os .navbox-ss td {
        border-color: #8c6818 !important;
    }

    /* Links stay readable on dark gray */
    html.skin-theme-clientpref-os .navbox-ss a:link,
    html.skin-theme-clientpref-os .navbox-ss a:visited {
        color: #88ccff !important;  /* lighter blue for dark bg */
    }
    html.skin-theme-clientpref-os .navbox-ss a.new {
        color: #ff9999 !important;  /* lighter red for dark bg */
    }
}