/**
 * Mobility Trailblazers Brand Fixes
 * Fixes alignment, padding, and color issues
 *
 * Official Brand Colors (STRICT):
 * - Primary Green: #00694E (buttons, logo, CTAs)
 * - Dark Teal: #084452 (navigation, hero sections)
 * - Secondary Green: #009879 (highlights, secondary buttons)
 * - Accent Blue: #0072BC (links, hover states)
 * - Text Gray: #333333 (body text)
 * - Light Gray: #F4F5F7 (backgrounds)
 * - White: #FFFFFF (content backgrounds)
 *
 * @since 2.5.12
 * @updated 2.5.43 - Brand color alignment
 */

/* ========================================
   Fix 1: Candidate Card Alignment & Padding
   ======================================== */

/* Fix text too close to borders - add proper padding */
.mt-candidate-card,
.mt-candidate-item,
body .mt-jury-dashboard .mt-candidate-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align content */
    margin-bottom: 20px;
    padding: 25px !important; /* Increased from 20px */
    text-align: center; /* Center text */
    background: #F4F5F7 !important; /* Use BG Beige instead of white */
    border: 2px solid #009879 !important; /* Use Blue Accent for borders */
}

/* Fix candidate name alignment */
.mt-candidate-card h3,
.mt-candidate-item h3,
.mt-candidate-card .mt-candidate-name {
    width: 100%;
    margin: 15px 0 10px !important; /* Better spacing */
    font-family: Poppins, sans-serif;
    font-weight: 600;
    text-align: center !important;
    color: #00694E !important; /* Primary color */
}

/* Fix organization text alignment and spacing */
.mt-candidate-card .mt-candidate-org,
.mt-candidate-card .mt-candidate-position,
.mt-candidate-meta {
    width: 100%;
    margin: 5px 0 !important;
    font-size: 0.95em;
    line-height: 1.5;
    text-align: center !important;
    color: #333333 !important; /* Body text color */
}

/* Fix button alignment in cards */
.mt-candidate-card .mt-evaluate-btn,
.mt-candidate-card .mt-btn {
    display: inline-block;
    margin-top: 20px !important; /* Add space above button */
    padding: 12px 30px !important;
    font-family: Poppins, sans-serif;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff !important;
    background-color: #0072BC !important; /* Accent color */
    border: none !important;
    border-radius: 6px !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mt-candidate-card .mt-evaluate-btn:hover,
.mt-candidate-card .mt-btn:hover {
    background-color: #009879 !important; /* Kupfer Soft on hover */
    box-shadow: 0 5px 15px rgb(193 105 60 / 30%);
    transform: translateY(-2px);
}

/* Status badges alignment */
.mt-candidate-card .mt-status-badge {
    display: inline-block;
    margin-top: 10px !important;
    padding: 5px 15px !important;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 20px;
}

.mt-status-badge.mt-status-completed {
    color: #00694E !important;
    background-color: #009879 !important; /* Blue Accent */
}

.mt-status-badge.mt-status-pending {
    color: #0072BC !important;
    background-color: #F4F5F7 !important;
    border: 2px solid #0072BC !important;
}

/* ========================================
   Fix 2: Candidate Links Color Fix
   ======================================== */

/* Fix link button colors - they should use brand colors */
.mt-candidate-links .mt-link-button,
.mt-candidate-links a,
.mt-link-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    font-size: 0.9em !important;
    text-decoration: none !important;
    color: #fff !important;
    background-color: #084452 !important; /* Secondary color */
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    gap: 8px !important;
}

.mt-candidate-links .mt-link-button:hover,
.mt-link-button:hover {
    background-color: #00694E !important; /* Primary on hover */
    border-color: #009879 !important; /* Blue Accent border */
    box-shadow: 0 4px 12px rgb(0 60 61 / 20%);
    transform: translateY(-2px);
}

/* Ensure icons in links are visible */
.mt-link-button .dashicons {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 18px !important;
    color: #fff !important;
}

/* LinkedIn specific styling */
.mt-link-button[href*="linkedin"] {
    background-color: #084452 !important;
}

.mt-link-button[href*="linkedin"]:hover {
    background-color: #00694E !important;
}

/* Website link styling */
.mt-link-button:not([href*="linkedin"]) {
    background-color: #0072BC !important; /* Accent for website links */
}

.mt-link-button:not([href*="linkedin"]):hover {
    background-color: #009879 !important; /* Kupfer Soft on hover */
}

/* ========================================
   Fix 3: Grid Item Padding & Alignment
   ======================================== */

.mt-candidate-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 25px !important; /* More padding for breathing room */
    overflow: hidden;
    text-align: center;
    background-color: #F4F5F7 !important; /* BG Beige */
    border: 2px solid #009879 !important; /* Blue Accent border */
    border-radius: 12px !important;
    transition: all 0.3s ease;
}

.mt-candidate-grid-item:hover {
    background-color: #fff !important;
    border-color: #0072BC !important; /* Accent on hover */
    box-shadow: 0 10px 25px rgb(193 105 60 / 15%);
    transform: translateY(-5px);
}

/* Candidate image in grid */
.mt-candidate-grid-item .mt-candidate-image {
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 20px !important;
    border: 3px solid #009879 !important;
    border-radius: 50% !important;
    object-fit: cover;
}

.mt-candidate-grid-item:hover .mt-candidate-image {
    border-color: #0072BC !important;
}

/* Grid item text */
.mt-candidate-grid-item h3 {
    margin: 10px 0 8px !important;
    font-family: Poppins, sans-serif;
    font-size: 1.1em !important;
    text-align: center !important;
    color: #00694E !important;
}

.mt-candidate-grid-item .mt-candidate-org {
    margin: 5px 0 !important;
    font-size: 0.9em !important;
    text-align: center !important;
    color: #333333 !important; /* Body text color */
}

/* ========================================
   Fix 4: Candidate Link Card Styling
   ======================================== */

/* Fix the candidate link card background and styling */
.mt-candidate-link {
    display: block !important;
    height: 100% !important;
    padding: 20px !important;
    text-decoration: none !important;
    background-color: #F4F5F7 !important; /* Cream background */
    border: 2px solid #009879 !important; /* Blue accent border */
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.mt-candidate-link:hover {
    text-decoration: none !important;
    background-color: #FFF !important; /* White on hover */
    border-color: #0072BC !important; /* Copper accent on hover */
    box-shadow: 0 8px 20px rgb(193 105 60 / 15%) !important;
    transform: translateY(-3px) !important;
}

/* Ensure proper text colors in candidate link */
.mt-candidate-link h3,
.mt-candidate-link .mt-candidate-name {
    margin-bottom: 8px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    color: #00694E !important; /* Deep teal for names */
}

.mt-candidate-link .mt-position,
.mt-candidate-link .mt-organization,
.mt-candidate-link .mt-candidate-meta {
    font-size: 0.95em !important;
    color: #333333 !important; /* Dark gray for meta text */
}

/* ========================================
   Fix 5: General Content Box Padding
   ======================================== */

/* Fix content too close to borders in various boxes */
.mt-criteria-stats,
.mt-evaluation-criteria,
.mt-stats-card,
.mt-criterion-card {
    padding: 25px !important; /* Consistent padding */
    background-color: #F4F5F7 !important;
    border: 2px solid #009879 !important;
    border-radius: 8px !important;
}

/* Headers within content boxes */
.mt-criteria-stats h3,
.mt-criterion-card h3 {
    margin-bottom: 20px !important; /* Space after headers */
    padding-bottom: 15px !important;
    color: #00694E !important;
    border-bottom: 2px solid #0072BC !important;
}

/* Content within boxes */
.mt-criteria-stats .mt-criterion-stat,
.mt-criterion-card .mt-criterion-content {
    margin-bottom: 15px !important;
    padding: 15px !important;
    background: #fff !important;
    border-radius: 4px !important;
    border-left: 4px solid #0072BC !important;
}

/* ========================================
   Fix 5: Winners Header Alignment
   ======================================== */

.mt-winners-header {
    margin-bottom: 30px !important;
    padding: 50px 30px !important; /* More padding */
    text-align: center !important;
    background: linear-gradient(135deg, #F4F5F7 0%, #fff 50%, #F4F5F7 100%) !important;
    border: 2px solid #009879 !important;
    border-radius: 12px !important;
}

.mt-winners-header h2 {
    margin-bottom: 20px !important;
    font-family: Poppins, sans-serif !important;
    font-size: 2.2em !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #00694E !important;
}

.mt-winners-header p {
    margin-top: 15px !important;
    font-size: 1.1em !important;
    line-height: 1.6 !important;
    color: #333333 !important; /* Body text color */
}

/* ========================================
   Fix 6: Responsive Adjustments
   ======================================== */

@media (width <= 768px) {
    .mt-candidate-card,
    .mt-candidate-item,
    .mt-candidate-grid-item {
        padding: 20px !important; /* Slightly less padding on mobile */
    }
    
    .mt-candidate-links {
        flex-direction: column;
        width: 100%;
    }
    
    .mt-link-button {
        justify-content: center;
        width: 100%;
    }
}

/* ========================================
   Fix 7: Jury Dashboard Title Styling
   ======================================== */

/* Style the Jury Dashboard page title header */
.mt-dashboard-header {
    position: relative !important;
    margin-bottom: 30px !important;
    padding: 40px 30px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #00694E 0%, #084452 100%) !important;
    border-radius: 12px !important;
}

/* Add subtle pattern overlay */
.mt-dashboard-header::before {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg,
        transparent,
        transparent 10px,
        rgb(255 255 255 / 3%) 10px,
        rgb(255 255 255 / 3%) 20px
    );
    content: '';
    pointer-events: none;
}

.mt-dashboard-header h1 {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 15px !important;
    font-family: Poppins, sans-serif !important;
    font-size: 2.2em !important;
    font-weight: 600 !important;
    color: #FFF !important;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 20%) !important;
}

.mt-dashboard-header p {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 20px !important;
    font-size: 1.1em !important;
    color: #F4F5F7 !important;
    opacity: 0.95 !important;
}

/* Progress bar within header */
.mt-dashboard-header .mt-progress-bar {
    position: relative !important;
    z-index: 1 !important;
    height: 30px !important;
    overflow: hidden !important;
    background-color: rgb(248 240 227 / 20%) !important;
    border: 2px solid rgb(248 240 227 / 30%) !important;
    border-radius: 15px !important;
}

.mt-dashboard-header .mt-progress-fill {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    background: linear-gradient(90deg, #0072BC 0%, #D17847 100%) !important;
    border-radius: 13px !important;
    transition: width 0.5s ease !important;
}

.mt-dashboard-header .mt-progress-text {
    font-size: 0.9em !important;
    font-weight: 600 !important;
    color: #FFF !important;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 30%) !important;
}

/* Add accent border at bottom */
.mt-dashboard-header::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #0072BC 0%, #F4F5F7 50%, #0072BC 100%);
    content: '';
}

/* ========================================
   Fix 8: Override Previous Styles
   ======================================== */

/* Ensure our fixes take precedence */
body .mt-candidate-card,
body .mt-candidate-item,
body .mt-candidate-grid-item,
#main .mt-candidate-card,
#main .mt-candidate-item,
#main .mt-candidate-grid-item {
    background-color: #F4F5F7 !important;
    border-color: #009879 !important;
}

/* Force correct text colors */
body .mt-candidate-card *,
body .mt-candidate-item *,
body .mt-candidate-grid-item * {
    color: #333333 !important; /* Default body text */
}

/* Except for headings */
body .mt-candidate-card h1,
body .mt-candidate-card h2,
body .mt-candidate-card h3,
body .mt-candidate-item h1,
body .mt-candidate-item h2,
body .mt-candidate-item h3,
body .mt-candidate-grid-item h1,
body .mt-candidate-grid-item h2,
body .mt-candidate-grid-item h3 {
    color: #00694E !important; /* Primary for headings */
}

/* Fix any remaining link colors */
a.mt-link-button,
.mt-candidate-links a,
.mt-social-link {
    color: #fff !important;
    background-color: #084452 !important;
}

a.mt-link-button:hover,
.mt-candidate-links a:hover,
.mt-social-link:hover {
    color: #fff !important;
    background-color: #00694E !important;
}