/* ============================================
   UMES Dark Mode
   Applied via body.dark-mode OR html.dark-mode class
   html.dark-mode is set early by dark-mode-init.js
   to prevent flash of light theme (FOUC).
   body.dark-mode is then synced by header.js.
   ============================================ */

/* ============================================
   EARLY BASE — html.dark-mode selectors
   These fire before body.dark-mode is applied,
   preventing the white flash on page load.
   ============================================ */

html.dark-mode {
    background: #1a1a1a !important;
    color-scheme: dark;
}

html.dark-mode body {
    background: #1a1a1a !important;
    color: #b0b8bf !important;
}

html.dark-mode #wrapper {
    background: #1a1a1a !important;
}

html.dark-mode #main {
    background: #1e1e1e !important;
}

html.dark-mode #main > .inner {
    background: #1e1e1e !important;
}

html.dark-mode #banner {
    background-color: transparent !important;
}

/* ============================================
   BASE — body.dark-mode (kept for toggle support)
   ============================================ */

body.dark-mode {
    background: #1a1a1a !important;
    color: #b0b8bf !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    color: #b0b8bf !important;
}

body.dark-mode #wrapper {
    background: #1a1a1a !important;
}

body.dark-mode #main {
    background: #1e1e1e !important;
}

body.dark-mode #main > .inner {
    background: #1e1e1e !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e0e5e8 !important;
}

body.dark-mode p {
    color: #b0b8bf !important;
}

body.dark-mode strong,
body.dark-mode b {
    color: #d0d8df !important;
}

body.dark-mode small {
    color: #888f95 !important;
}

/* Section dividers */
body.dark-mode #main > .inner > section {
    border-top-color: rgba(80, 85, 90, 0.75) !important;
}

body.dark-mode header.major > :last-child {
    border-bottom-color: #BA141A !important; /* keep red accent */
}

/* ============================================
   LINKS
   ============================================ */

body.dark-mode a {
    color: #d01a20 !important;
    border-bottom-color: rgba(208, 26, 32, 0.3) !important;
}

body.dark-mode a:hover {
    color: #e83038 !important;
    border-bottom-color: #d01a20 !important;
}

/* ============================================
   HEADER
   ============================================ */

body.dark-mode #header {
    background: #1e1e1e !important;
    border-bottom-color: #BA141A !important;
}

body.dark-mode #header .logo,
body.dark-mode #header .logo span {
    color: #e0e5e8 !important;
    border-bottom: none !important;
}

body.dark-mode #header .logo:hover,
body.dark-mode #header .logo:hover span {
    color: #ffffff !important;
}

body.dark-mode #header .icons a {
    color: #b0b8bf !important;
    border-bottom: none !important;
}

body.dark-mode #header .icons a:hover {
    color: #ffffff !important;
}

/* Dark mode toggle icon */
body.dark-mode #dark-mode-toggle {
    color: #b0b8bf !important;
    cursor: pointer !important;
}

body.dark-mode #dark-mode-toggle:hover {
    color: #ffffff !important;
}

#dark-mode-toggle {
    color: #7f888f;
    cursor: pointer;
    border-bottom: none !important;
}

#dark-mode-toggle:hover {
    color: #3d4449;
}

/* ============================================
   BANNER / HERO SECTION
   ============================================ */

body.dark-mode #banner {
    background-color: transparent !important;
}

body.dark-mode #banner h1,
body.dark-mode #banner h2,
body.dark-mode #banner p {
    color: #e0e5e8 !important;
}

/* Section borders — darken the light grey template borders */
body.dark-mode #main > .inner > section,
html.dark-mode #main > .inner > section {
    border-top-color: rgba(80, 85, 90, 0.4) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

body.dark-mode .button,
body.dark-mode button,
body.dark-mode input[type="submit"],
body.dark-mode input[type="reset"],
body.dark-mode input[type="button"] {
    color: #d01a20 !important;
    box-shadow: inset 0 0 0 2px #d01a20 !important;
    background: transparent !important;
}

body.dark-mode .button:hover,
body.dark-mode button:hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode input[type="reset"]:hover,
body.dark-mode input[type="button"]:hover {
    background-color: rgba(208, 26, 32, 0.1) !important;
}

body.dark-mode .button.primary,
body.dark-mode button.primary,
body.dark-mode input[type="submit"].primary {
    background-color: #BA141A !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Ensure any link inside a red-background element stays white */
body.dark-mode .card-contact a,
body.dark-mode .president-info a,
body.dark-mode .contact-cta a,
body.dark-mode .contacts-table thead a {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode .button.primary:hover,
body.dark-mode button.primary:hover {
    background-color: #d11820 !important;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode input[type="number"],
body.dark-mode select,
body.dark-mode textarea {
    background: #2a2a2a !important;
    border-color: rgba(80, 85, 90, 0.5) !important;
    color: #b0b8bf !important;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="tel"]:focus,
body.dark-mode input[type="search"]:focus,
body.dark-mode input[type="url"]:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #BA141A !important;
    box-shadow: 0 0 0 1px #BA141A !important;
}

body.dark-mode label {
    color: #d01a20 !important;
}

/* ============================================
   TABLES (contact page, admin, etc.)
   ============================================ */

body.dark-mode table thead {
    background: #252525 !important;
}

body.dark-mode table thead th {
    color: #e0e5e8 !important;
    border-bottom-color: rgba(80, 85, 90, 0.75) !important;
}

body.dark-mode table tbody tr:nth-child(even) {
    background: #252525 !important;
}

body.dark-mode table tbody tr:hover {
    background: #2a2a2a !important;
}

body.dark-mode table tbody td {
    color: #b0b8bf !important;
    border-bottom-color: rgba(80, 85, 90, 0.4) !important;
}

body.dark-mode table tbody td a {
    color: #d01a20 !important;
}

/* Contacts-table specific (colored header) */
body.dark-mode .contacts-table thead th {
    background: #BA141A !important;
    color: #ffffff !important;
    border-bottom-color: #BA141A !important;
}

/* Contact boxes (contact page) */
body.dark-mode .contact-box {
    background: #252525 !important;
    border-left-color: #BA141A !important;
}

body.dark-mode .contact-box h3 {
    color: #e0e5e8 !important;
}

body.dark-mode .contact-box p {
    color: #888f95 !important;
}

body.dark-mode .contact-icon {
    color: #d01a20 !important;
}

/* .box element (template default — used on advocacy, operating docs, etc.) */
body.dark-mode .box {
    background: #252525 !important;
    border-color: rgba(80, 85, 90, 0.4) !important;
    color: #b0b8bf !important;
}

body.dark-mode .box h3 {
    color: #e0e5e8 !important;
}

body.dark-mode .box p,
body.dark-mode .box li {
    color: #b0b8bf !important;
}

/* document-list items (operating documents page) */
body.dark-mode .document-list li {
    background: #252525 !important;
    border-left-color: #BA141A !important;
    color: #b0b8bf !important;
}

body.dark-mode .document-list li h4 {
    color: #e0e5e8 !important;
}

body.dark-mode .document-list li .meta {
    color: #888f95 !important;
}

/* ============================================
   CARDS — .group-card, .event-card, .council-member-card
   (Other card dark mode is now in umes-cards.css)
   ============================================ */

body.dark-mode .group-card,
body.dark-mode .event-card,
body.dark-mode .council-member-card {
    background: #252525 !important;
    border-color: rgba(80, 85, 90, 0.4) !important;
}

body.dark-mode .group-card:hover,
body.dark-mode .event-card:hover,
body.dark-mode .council-member-card:hover {
    box-shadow: 0 4px 12px rgba(208, 26, 32, 0.2) !important;
}

body.dark-mode .event-card .card-header {
    background: #1e1e1e !important;
    border-bottom-color: rgba(80, 85, 90, 0.4) !important;
}

body.dark-mode .group-card h3,
body.dark-mode .event-card h3 {
    color: #e0e5e8 !important;
}

body.dark-mode .group-card p {
    color: #888f95 !important;
}

body.dark-mode .sponsor-logo-container,
body.dark-mode .tech-soc-logo {
    background: #1e1e1e !important;
}

body.dark-mode .contact-cta a,
body.dark-mode .card-contact a {
    color: #ffffff !important;
}

/* ============================================
   CONTACT PAGE — info boxes
   ============================================ */

body.dark-mode .contact-box {
    background: #252525 !important;
    border-left-color: #BA141A !important;
}

body.dark-mode .contact-box h3 {
    color: #e0e5e8 !important;
}

body.dark-mode .contact-box p {
    color: #888f95 !important;
}

body.dark-mode .contact-icon {
    color: #d01a20 !important;
}

/* ============================================
   TECH SOCS PAGE — extra items not in components
   (Tab + info-item dark mode is now in umes-tabs.css / umes-cards.css)
   ============================================ */

body.dark-mode .tech-soc-info {
    background: #252525 !important;
    border-color: rgba(80, 85, 90, 0.4) !important;
}

/* ============================================
   SPONSORS PAGE
   ============================================ */

body.dark-mode .sponsor-tier-section {
    background: #252525 !important;
}

body.dark-mode .tier-header {
    color: #e0e5e8 !important;
}

/* INFO BOX dark mode is now in umes-cards.css */

/* ============================================
   ERROR / LOADING MESSAGES
   ============================================ */

body.dark-mode .error-message,
body.dark-mode .error {
    background: #2d1a1b !important;
    color: #e57373 !important;
    border-left-color: #c62828 !important;
}

body.dark-mode .loading-message,
body.dark-mode .loading {
    color: #888f95 !important;
}

body.dark-mode .spinner {
    border-color: rgba(255,255,255,0.1) !important;
    border-top-color: #BA141A !important;
}

/* ============================================
   POSTS / GRID LAYOUT (events, groups, etc.)
   ============================================ */

body.dark-mode .posts article {
    background: transparent !important;
}

/* Grid separator lines between posts */
body.dark-mode .posts article:before,
body.dark-mode .posts article:after {
    background: rgba(80, 85, 90, 0.4) !important;
}

body.dark-mode .posts article h3,
body.dark-mode .posts article h3 a {
    color: #e0e5e8 !important;
}

body.dark-mode .posts article p {
    color: #888f95 !important;
}

body.dark-mode .posts article footer {
    border-top-color: rgba(80, 85, 90, 0.4) !important;
}

/* Sponsor/post logo images — rounded white container so logos look clean */
body.dark-mode .posts article .image {
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem;
}

body.dark-mode .posts article .image img {
    border-radius: 4px;
}

/* ============================================
   SIDEBAR — events/mini-posts white card
   ============================================ */

body.dark-mode #sidebar > .inner > section:has(#events-list),
body.dark-mode #sidebar > .inner > section:has(.mini-posts) {
    background: #252525 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode #sidebar > .inner > section:has(#events-list) header.major h2,
body.dark-mode #sidebar > .inner > section:has(.mini-posts) header.major h2 {
    color: #e0e5e8 !important;
}

body.dark-mode #events-loading {
    color: #888f95 !important;
}

body.dark-mode #events-error {
    background: #2d1a1b !important;
    color: #e57373 !important;
}

body.dark-mode .mini-posts article {
    border-top-color: rgba(80, 85, 90, 0.4) !important;
}

body.dark-mode .mini-posts article h3,
body.dark-mode .mini-posts article h4 {
    color: #d01a20 !important;
}

body.dark-mode .mini-posts article p {
    color: #888f95 !important;
}

body.dark-mode .mini-posts article p strong {
    color: #e0e5e8 !important;
}

body.dark-mode .mini-posts article p small {
    color: #666d73 !important;
}

body.dark-mode #sidebar section:has(#events-list) .actions .button,
body.dark-mode #sidebar section:has(.mini-posts) .actions .button {
    color: #d01a20 !important;
    box-shadow: inset 0 0 0 2px #d01a20 !important;
}

/* ============================================
   ADMIN PANEL
   ============================================ */

body.dark-mode .admin-container,
body.dark-mode .main-content {
    background: #1a1a1a !important;
}

body.dark-mode .header {
    background: #252525 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .content-section {
    background: #252525 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .section-title {
    color: #e0e5e8 !important;
}

body.dark-mode .stat-card {
    background: #252525 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .stat-label {
    color: #888f95 !important;
}

body.dark-mode .stat-value {
    color: #e0e5e8 !important;
}

body.dark-mode .modal-content {
    background: #252525 !important;
    color: #b0b8bf !important;
}

body.dark-mode .close {
    color: #888f95 !important;
}

body.dark-mode .close:hover {
    color: #ffffff !important;
}

body.dark-mode .form-label {
    color: #b0b8bf !important;
}

body.dark-mode .form-control {
    background: #2a2a2a !important;
    border-color: rgba(80, 85, 90, 0.5) !important;
    color: #b0b8bf !important;
}

body.dark-mode .form-control:focus {
    border-color: #BA141A !important;
}

body.dark-mode th {
    color: #b0b8bf !important;
    background: #1e1e1e !important;
    border-bottom-color: rgba(80, 85, 90, 0.5) !important;
}

body.dark-mode td {
    border-bottom-color: rgba(80, 85, 90, 0.3) !important;
    color: #b0b8bf !important;
}

body.dark-mode tr:hover {
    background: #2a2a2a !important;
}

body.dark-mode .upload-hint {
    color: #888f95 !important;
}

body.dark-mode .current-file-link {
    background: #1e1e1e !important;
    color: #b0b8bf !important;
}

body.dark-mode .file-preview {
    background: #1e1e1e !important;
}

/* ============================================
   SIDEBAR SEARCH — early dark mode
   Prevents white flash before search.js loads
   ============================================ */

html.dark-mode #sidebar > .inner > #search.alt,
body.dark-mode #sidebar > .inner > #search.alt {
    background-color: #252525 !important;
}

html.dark-mode #search #query,
body.dark-mode #search #query {
    background: #1e1e1e !important;
    border-color: #3a3a3a !important;
    color: #b0b8bf !important;
}

html.dark-mode #search #query::placeholder,
body.dark-mode #search #query::placeholder {
    color: #666 !important;
}