/* ============================================
   UMES Custom Color Overrides
   Place this file in: public_html/assets/css/
   Link after main.css in all HTML files
   ============================================ */

/* ============================================
   PRIMARY BRAND COLOR - UMES Red
   Replaces the default pink (#f56a6a) with #BA141A
   ============================================ */

/* Links and Accent Elements */
a {
    color: #BA141A !important;
    border-bottom-color: rgba(186, 20, 26, 0.3) !important;
}

a:hover {
    color: #8f0f14 !important;
    border-bottom-color: #BA141A !important;
}

/* Buttons - All States */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    box-shadow: inset 0 0 0 2px #BA141A !important;
    color: #BA141A !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
    background-color: rgba(186, 20, 26, 0.05) !important;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
    background-color: rgba(186, 20, 26, 0.15) !important;
}

/* Primary button variant */
.button.primary,
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary {
    background-color: #BA141A !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.button.primary:hover,
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover {
    background-color: #d11820 !important;
}

.button.primary:active,
input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active {
    background-color: #8f0f14 !important;
}

/* Header Border */
#header {
    border-bottom-color: #BA141A !important;
}

header.major > :last-child {
    border-bottom-color: #BA141A !important;
}

/* Form Elements */
label {
    color: #BA141A !important;
}

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

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
    background: #BA141A !important;
    border-color: #BA141A !important;
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
    border-color: #BA141A !important;
    box-shadow: 0 0 0 1px #BA141A !important;
}

/* Contact List Icons */
ul.contact li:before {
    color: #BA141A !important;
}

/* Features Icons */
.features article .icon:before {
    color: #BA141A !important;
}

/* Pagination */
ul.pagination li > .page.active {
    background-color: #BA141A !important;
}

ul.pagination li > .page.active:hover {
    background-color: #d11820 !important;
}

ul.pagination li > .page.active:active {
    background-color: #8f0f14 !important;
}

/* ============================================
   SIDEBAR STYLING - UMES Red with White Events
   ============================================ */

/* Main sidebar background - UMES Red */
#sidebar {
    background: #BA141A !important;
}

#sidebar > .inner {
    background: #BA141A !important;
}

/* ============================================
   SIDEBAR TEXT COLORS (Red Background)
   ============================================ */

/* All headings white on red background */
#sidebar h2,
#sidebar h3,
#sidebar h4,
#sidebar h5,
#sidebar h6 {
    color: #ffffff !important;
}

/* Paragraph text - light gray for readability */
#sidebar p {
    color: #f0f0f0 !important;
}

/* All links white with subtle underline */
#sidebar a {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.3) !important;
}

#sidebar a:hover {
    color: #ffeeee !important;
    border-bottom-color: rgba(255, 255, 255, 0.6) !important;
}

/* Menu text */
#menu ul a,
#menu ul span {
    color: #ffffff !important;
}

#menu ul a:hover,
#menu ul span:hover {
    color: #ffeeee !important;
}

/* Menu opener arrows */
#menu ul a.opener:before,
#menu ul span.opener:before {
    color: rgba(255, 255, 255, 0.6) !important;
}

#menu ul a.opener:hover:before,
#menu ul span.opener:hover:before {
    color: #ffffff !important;
}

/* Submenu text - slightly dimmed */
#menu > ul > li > ul {
    color: rgba(255, 255, 255, 0.8) !important;
}

#menu > ul > li > ul a,
#menu > ul > li > ul span {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Section borders - white with transparency */
#sidebar > .inner > * {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

/* Menu item borders */
#menu > ul > li {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   SEARCH BAR STYLING (Fix for red background)
   ============================================ */

/* Search form container */
#search form {
    position: relative;
}

/* Search input field - white background for visibility on red sidebar */
#search input[type="text"],
#search input[type="search"] {
    background: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: #333333 !important;
    padding-left: 2.5rem !important;
}

/* Remove disabled state - search is now functional */
#search input[type="text"]:focus,
#search input[type="search"]:focus {
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* Search icon - dark gray for contrast on white input */
#search form:before {
    color: #666666 !important;
    opacity: 0.6 !important;
    z-index: 2 !important;
}

/* ============================================
   CONTACT SECTION (Red Background)
   ============================================ */

/* Contact list items */
ul.contact li {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Contact icons - white */
ul.contact li:before {
    color: #ffffff !important;
}

/* Contact links */
ul.contact li a {
    color: #ffffff !important;
    border-bottom: dotted 1px rgba(255, 255, 255, 0.3) !important;
}

ul.contact li a:hover {
    color: #ffeeee !important;
    border-bottom-color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================
   FOOTER (Red Background)
   ============================================ */

#footer .copyright {
    color: rgba(255, 255, 255, 0.7) !important;
}

#footer .copyright a {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(255, 255, 255, 0.3) !important;
}

#footer .copyright a:hover {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   EVENTS SECTION - White Card Style
   ============================================ */

/* Target the section containing events using a more specific selector */
#sidebar > .inner > section {
    /* Keep normal red background for most sections */
}

/* Override ONLY for the section with events */
#sidebar > .inner > section:has(#events-list),
#sidebar > .inner > section:has(.mini-posts) {
    background: #ffffff !important;
    padding: 2em !important;
    border-radius: 8px !important;
    margin: 0 -2.22222em 3.5em -2.22222em !important;
    width: calc(100% + 4.44444em) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Events section header */
#sidebar > .inner > section:has(#events-list) header.major h2,
#sidebar > .inner > section:has(.mini-posts) header.major h2 {
    color: #2c3e50 !important;
    margin-bottom: 1.5em !important;
}

/* Events loading/error states */
#events-loading {
    color: #666666 !important;
}

#events-error {
    color: #c62828 !important;
    background: #ffebee !important;
}

/* Individual event articles */
.mini-posts article {
    border-top: solid 2px #efefef !important;
    padding: 1.5em 0 !important;
    margin-top: 1.5em !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.mini-posts article:first-child {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.mini-posts article:hover {
    transform: translateX(4px) !important;
}

/* Event titles */
.mini-posts article h3,
.mini-posts article h4 {
    color: #BA141A !important;
    margin-bottom: 0.5em !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
}

/* Event text */
.mini-posts article p {
    color: #666666 !important;
    margin-bottom: 0.75em !important;
    line-height: 1.6 !important;
}

/* Event date/location text */
.mini-posts article p strong {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 0.25em !important;
}

.mini-posts article p small {
    color: #999999 !important;
    font-size: 0.9em !important;
}

/* Event images */
.mini-posts article .image {
    margin-bottom: 1em !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.mini-posts article .image img {
    transition: transform 0.3s ease !important;
}

.mini-posts article .image:hover img {
    transform: scale(1.05) !important;
}

/* Event links */
.mini-posts article a {
    color: #BA141A !important;
    border-bottom: none !important;
}

.mini-posts article a:hover {
    color: #8f0f14 !important;
}

.mini-posts article a.image {
    border-bottom: none !important;
}

/* "More" button in events section */
#sidebar section:has(#events-list) .actions .button,
#sidebar section:has(.mini-posts) .actions .button {
    color: #BA141A !important;
    box-shadow: inset 0 0 0 2px #BA141A !important;
    background: transparent !important;
}

#sidebar section:has(#events-list) .actions .button:hover,
#sidebar section:has(.mini-posts) .actions .button:hover {
    background-color: rgba(186, 20, 26, 0.05) !important;
}

/* Scrollbar styling for events list (if enabled) */
#events-list::-webkit-scrollbar {
    width: 8px;
}

#events-list::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 4px;
}

#events-list::-webkit-scrollbar-thumb {
    background: #BA141A;
    border-radius: 4px;
}

#events-list::-webkit-scrollbar-thumb:hover {
    background: #8f0f14;
}

/* Firefox scrollbar */
#events-list {
    scrollbar-width: thin;
    scrollbar-color: #BA141A #f8f8f8;
}

/* ============================================
   SIDEBAR TOGGLE BUTTON
   ============================================ */

/* Toggle button (hamburger menu) */
#sidebar .toggle:before {
    color: #BA141A !important;
}

/* Mobile toggle button background */
@media screen and (max-width: 736px) {
    #sidebar .toggle:after {
        background: rgba(186, 20, 26, 0.15) !important;
    }
    
    #sidebar .toggle:before {
        color: #BA141A !important;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media screen and (max-width: 1680px) {
    #sidebar > .inner > section:has(#events-list),
    #sidebar > .inner > section:has(.mini-posts) {
        margin: 0 -1.66667em 3.33333em -1.66667em !important;
        width: calc(100% + 3.33333em) !important;
        padding: 1.66667em !important;
    }
}

@media screen and (max-width: 1280px) {
    /* Sidebar becomes fixed overlay - keep red background */
    #sidebar {
        background: #BA141A !important;
    }
}

/* ============================================
   UNIFIED CARD STYLING ACROSS ALL PAGES
   Ensures consistency for all card-based content
   ============================================ */

/* Base card styles - applies to all card variants */
.executive-card,
.directorship-card,
.sponsor-card,
.document-card,
.tech-soc-card,
.group-card,
.event-card,
.council-member-card {
    background: #ffffff !important;
    border: 1px solid #efefef !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Unified hover effect for all cards */
.executive-card:hover,
.directorship-card:hover,
.sponsor-card:hover,
.document-card:hover,
.tech-soc-card:hover,
.group-card:hover,
.event-card:hover,
.council-member-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(186, 20, 26, 0.15) !important;
}

/* Card headers - unified styling */
.executive-card .card-header,
.directorship-card .card-header,
.tech-soc-card .card-header,
.event-card .card-header {
    background: #f8f8f8 !important;
    padding: 1.5rem !important;
    border-bottom: 1px solid #efefef !important;
    text-align: center !important;
}

/* Card titles - unified across all card types */
.executive-name,
.directorship-card .card-title,
.tech-soc-card .card-title,
.sponsor-name,
.document-card h3,
.document-card h4,
.group-card h3,
.event-card h3 {
    color: #2c3e50 !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
}

/* Card subtitles/positions */
.executive-position,
.directorship-position,
.event-date {
    color: #BA141A !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

/* Card body text */
.executive-bio,
.card-description,
.sponsor-description,
.document-card p,
.group-card p {
    color: #666666 !important;
    line-height: 1.6 !important;
    font-size: 1rem !important;
}

/* Card logos - unified circular style */
.card-logo,
.executive-photo,
.sponsor-logo-container,
.tech-soc-logo {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    margin: 0 auto 1rem !important;
    overflow: hidden !important;
    border: 3px solid #BA141A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
}

/* No-logo placeholder - unified gradient */
.card-logo.no-logo {
    background: linear-gradient(135deg, #BA141A 0%, #8f0f14 100%) !important;
    color: #ffffff !important;
    font-size: 2.5rem !important;
    font-weight: bold !important;
}

/* Left border accent for cards (used in various card types) */
.executive-card {
    border-left: 4px solid #BA141A !important;
}

.directorship-card,
.tech-soc-card {
    border-left: 3px solid #BA141A !important;
}

.document-card {
    border-left: 3px solid #efefef !important;
}

.document-card:hover {
    border-left-color: #BA141A !important;
}

/* Loading spinners - unified style */
.spinner {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(0,0,0,.1) !important;
    border-radius: 50% !important;
    border-top-color: #BA141A !important;
    animation: spin 1s ease-in-out infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error messages - unified style */
.error,
.error-message {
    background: #ffebee !important;
    color: #c62828 !important;
    padding: 1rem !important;
    border-radius: 4px !important;
    border-left: 4px solid #c62828 !important;
}

/* Loading messages - unified style */
.loading,
.loading-message {
    text-align: center !important;
    padding: 2rem !important;
    color: #999999 !important;
}

/* ============================================
   CUSTOM PAGE-SPECIFIC OVERRIDES
   These update the inline styles already in your pages
   ============================================ */

/* Tech Societies Active Tab */
.tech-soc-tab.active {
    background: #BA141A !important;
    border-color: #BA141A !important;
}

/* Executive Cards */
.executive-card {
    border-left-color: #BA141A !important;
}

.executive-position {
    color: #BA141A !important;
}

.executive-photo {
    border-color: #BA141A !important;
}

/* Event Cards */
.event-card {
    border-left-color: #BA141A !important;
}

.event-date {
    color: #BA141A !important;
}

.event-image {
    border-color: #BA141A !important;
}

.registration-btn {
    background: #BA141A !important;
}

.registration-btn:hover {
    background: #8f0f14 !important;
}

/* Directorship Cards */
.card-logo {
    border-color: #BA141A !important;
}

.card-logo.no-logo {
    background: linear-gradient(135deg, #BA141A 0%, #8f0f14 100%) !important;
}

/* Info Boxes */
.info-box {
    border-left-color: #BA141A !important;
}

.info-box h3 {
    color: #BA141A !important;
}

/* Document Cards */
.document-card:hover {
    border-left: 3px solid #BA141A;
}

/* ============================================
   SPONSOR TIER BADGES
   ============================================ */
.badge-gold {
    background: #ffc107 !important;
    color: #000 !important;
}

.badge-silver {
    background: #c0c0c0 !important;
    color: #000 !important;
}

.badge-bronze {
    background: #cd7f32 !important;
    color: #fff !important;
}

/* ============================================
   ADMIN PANEL COLORS
   ============================================ */
#admin-panel .nav-item:hover,
#admin-panel .nav-item.active {
    background: #BA141A !important;
}

#admin-panel .logo {
    color: #BA141A !important;
}

#admin-panel .avatar {
    background: #BA141A !important;
}

#admin-panel .btn-edit {
    background: #BA141A !important;
}

#admin-panel .btn-edit:hover {
    background: #8f0f14 !important;
}