.elementor-kit-5{--e-global-color-primary:#ED202C;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#000000;--e-global-color-accent:#1F172F;--e-global-typography-primary-font-family:"proxima-nova";--e-global-typography-primary-font-weight:900;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-letter-spacing:0.3px;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"proxima-nova";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto Slab";--e-global-typography-accent-font-weight:500;--e-global-typography-accent-font-style:italic;--e-page-transition-entrance-animation:e-page-transition-slide-out-left;--e-page-transition-animation-duration:250ms;--e-preloader-animation-duration:250ms;--e-preloader-delay:0ms;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-text );font-family:"proxima-nova", Sans-serif;font-size:16px;font-weight:900;text-transform:uppercase;font-style:normal;text-decoration:none;letter-spacing:1.3px;color:var( --e-global-color-secondary );border-style:solid;border-width:5px 5px 5px 5px;border-color:var( --e-global-color-text );border-radius:30px 30px 30px 30px;padding:15px 30px 15px 30px;}.elementor-kit-5 e-page-transition{background-color:var( --e-global-color-primary );}.elementor-kit-5 a{font-family:"Roboto Slab", Sans-serif;font-weight:900;letter-spacing:1px;}.elementor-kit-5 h1{font-family:"proxima-nova", Sans-serif;}.elementor-kit-5 h2{font-family:"proxima-nova", Sans-serif;}.elementor-kit-5 h3{font-family:"Roboto Slab", Sans-serif;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{color:var( --e-global-color-primary );border-style:solid;border-width:5px 5px 5px 5px;border-color:var( --e-global-color-primary );border-radius:30px 30px 30px 30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1224px;}.e-con{--container-max-width:1224px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//**
 * DLHMS Consolidated Styles
 * Extracted from all PHP snippet files for use in WordPress Elementor Custom CSS
 * Organized: Universal elements first, then page-specific styles
 */

/* ========================================
   UNIVERSAL DLHMS ELEMENTS
   ======================================== */

/* Universal Typography - High Specificity to Override Theme Styles */
h1, h2, h3, h4, h5, h6,
.dlhms-accounts h1,
.dlhms-accounts h2,
.dlhms-accounts h3,
.dlhms-accounts h4,
.dlhms-accounts h5,
.dlhms-accounts h6,
.dlhms-section h1,
.dlhms-section h2,
.dlhms-section h3,
.dlhms-section h4,
.dlhms-section h5,
.dlhms-section h6 {
    font-family: proxima-nova, Sans-serif !important;
    font-weight: 900 !important;
    font-style: normal;
}

.elementor-heading-title {
    font-family: proxima-nova, Sans-serif !important;
                font-weight: 900 !important;
    font-style: normal;
    color: #fff;
    text-transform: uppercase;
}

.e-n-accordion-item-title {
        text-transform: uppercase;
        font-family: proxima-nova, Sans-serif !important;
            font-weight: 900 !important;
    font-style: normal;
    color: #fff !important;
}

.e-n-accordion-item-title-text {
    color:#fff;
}

.e-n-accordion-item-title {
    color: #ED202C;
}

.e-n-accordion-item-title-icon {
color: #ED202C;
    
}

p,
.dlhms-accounts p,
.dlhms-section p,
.member-info p,
.search-results p {
    font-family: proxima-nova, Sans-serif !important;
}

/* Search Results Typography - Override Roboto Slab */
.search-results,
.search-result-name,
.search-result-text,
.search-results .member-name,
.search-results h3,
.search-results h4,
.search-results .name,
.member-search-result .name,
.account-name,
.member-title,
.dlhms-accounts .search-results h4,
.dlhms-accounts .transaction-title,
#accounting-tab h4,
#tab-tab h4 {
    font-family: proxima-nova, Sans-serif !important;
}

/* Override specific Roboto Slab rules */
.dlhms-accounts h4,
.dlhms-accounts .transaction-title,
#accounting-tab h4,
#tab-tab h4 {
    font-family: proxima-nova, Sans-serif !important;
    font-weight: 900 !important;
}

/* Additional Typography Overrides for Common Elements */
.member-name,
.member-title,
.info-label,
.info-value,
.status-text,
.balance-amount,
.payment-amount,
.tab-amount,
.membership-status h3,
.membership-status p,
.member-detail-card h4,
.member-detail-card p,
.brutalist-card h3,
.brutalist-card h4,
.brutalist-card p,
.card-title,
.section-title,
.form-label,
label {
    font-family: proxima-nova, Sans-serif !important;
}

/* Roboto Slab Override Class - Use when you need Roboto Slab instead of Proxima Nova */
.roboto-slab,
.roboto-slab h1,
.roboto-slab h2,
.roboto-slab h3,
.roboto-slab h4,
.roboto-slab h5,
.roboto-slab h6,
.roboto-slab p,
.roboto-slab span,
.roboto-slab div,
.roboto-slab label,
.use-roboto-slab {
    font-family: "Roboto Slab", serif !important;
}

/* Specific Roboto Slab variants */
.roboto-slab-light {
    font-family: "Roboto Slab", serif !important;
    font-weight: 300 !important;
}

.roboto-slab-regular {
    font-family: "Roboto Slab", serif !important;
    font-weight: 400 !important;
}

.roboto-slab-bold {
    font-family: "Roboto Slab", serif !important;
    font-weight: 700 !important;
}

.roboto-slab-black {
    font-family: "Roboto Slab", serif !important;
    font-weight: 900 !important;
}

/* Roboto Slab Override Class - Use when you need Roboto Slab instead of Proxima Nova */
.roboto-slab,
.roboto-slab h1,
.roboto-slab h2,
.roboto-slab h3,
.roboto-slab h4,
.roboto-slab h5,
.roboto-slab h6,
.roboto-slab p,
.roboto-slab span,
.roboto-slab div,
.roboto-slab label,
.use-roboto-slab {
    font-family: "Roboto Slab", serif !important;
}

/* Specific Roboto Slab variants */
.roboto-slab-light {
    font-family: "Roboto Slab", serif !important;
    font-weight: 300 !important;
}

.roboto-slab-regular {
    font-family: "Roboto Slab", serif !important;
    font-weight: 400 !important;
}

.roboto-slab-bold {
    font-family: "Roboto Slab", serif !important;
    font-weight: 700 !important;
}

/* Universal Button Styles */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
button,
input[type="submit"],
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #000;
    border: 5px solid white;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-family: proxima-nova, Sans-serif;
    font-weight: 900;
    color: white;
    text-align: center;
    margin: 5px;
    transition: all 0.3s ease;
    min-height: 44px;
    box-sizing: border-box;
    text-transform: uppercase;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background: #000;
    border: 5px solid #000;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Button Size Variants */
.btn-small,
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    min-height: 32px;
}

.btn-mini {
    padding: 8px 12px;
    font-size: 12px;
    min-width: 32px;
    height: 32px;
    border-radius: 20px;
    border-width: 3px;
}

.btn-mini:hover {
    border: 3px solid #dc3545;
}

/* Submit button styles now handled by universal button styles above */

/* Search Form Specific Styles */
.search-input,
input[name="search_member"] {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px !important;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none !important;
    border: 1px solid #ddd !important;
    border-color: #ddd !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
}

.search-form {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Search form button styles now handled by universal button styles above */

/* Override any other input focus styles that might add red borders */
input[name="search_member"]:focus,
.search-input:focus,
input.search-input:focus,
.search-form input:focus,
.search-section input:focus {
    outline: none !important;
    border: 1px solid #ddd !important;
    border-color: #ddd !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
}

/* Remove any possible red outline or border from all search inputs */
input[type="text"]:focus,
input[type="search"]:focus {
    outline: none !important;
    border-color: #ddd !important;
}

/* Universal Status Indicators */
.status-active,
.member-at-shop-yes,
.shop-status-present,
.field-boolean-yes,
.payment-recurring-active,
.rate-non-lapsable,
.tab-status-good {
    color: #28a745;
    font-weight: bold;
}

.status-expired,
.member-at-shop-no,
.shop-status-absent,
.field-boolean-no,
.member-status-no-meta,
.member-status-not-found,
.tab-status-high {
    color: #dc3545;
    font-weight: bold;
}

.status-never,
.field-not-set,
.field-hours,
.field-zero-amount {
    color: #6c757d;
    font-style: italic;
}

.member-status-wp-only,
.member-status-mismatch,
.member-status-no-record,
.tab-status-balance {
    color: #d69e2e;
}

.field-hidden {
    color: #666;
    font-family: monospace;
}

/* Universal Link Styles */
.contact-link,
.social-link {
    color: #dc3545;
    text-decoration: none;
}

.contact-link:hover,
.social-link:hover {
    text-decoration: underline;
}

.social-link.instagram {
    color: #E4405F;
}

.social-link.facebook {
    color: #1877F2;
}

/* Universal Content Boxes */
.content-box,
.content-box.about-me,
.content-box.rate-notes {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
}

.content-box.tab-notes {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
}

.content-box.current-projects {
    background: #e7f3ff;
    border-left: 3px solid #007bff;
}

.content-box.admin-comments {
    background: #fff5f5;
    border-left: 3px solid #dc3545;
}

.content-box.meta-display {
    background: #f8f9fa;
    padding: 8px;
    border-radius: 4px;
    margin-top: 5px;
    max-height: 100px;
    overflow-y: auto;
}

/* Universal Search Results */
.search-no-results {
    background: #fff3cd;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

/* Universal Form Elements */
.form-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-field input,
.form-field textarea,
.form-field select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.form-field small {
    display: block;
    color: #666;
    margin-top: 5px;
}

/* Universal Grid Layouts */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.three-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .two-column-grid,
    .three-column-grid {
        grid-template-columns: 1fr;
    }
}

/* Universal Table Styles */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.data-table th {
    background: #f8f9fa;
    color: #495057;
    padding: 12px;
    font-weight: bold;
    border-bottom: 2px solid #dee2e6;
}

.data-table td {
    padding: 12px;
    color: #495057;
    border-bottom: 1px solid #f1f3f4;
}

/* ========================================
   PAGE-SPECIFIC BUTTON OVERRIDES
   ======================================== */

/* Button Size Variants */
.btn-small,
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    min-height: 32px;
}

.btn-mini {
    padding: 8px 12px;
    font-size: 12px;
    min-width: 32px;
    height: 32px;
    border-radius: 20px;
    border-width: 3px;
}

.btn-mini:hover {
    border: 3px solid #dc3545;
}

/* Page-Specific Button Classes */
.brutalist-card__button {
    display: block;
    width: 80%;
    max-width: 200px;
    margin: 0 auto 1rem auto;
    border-radius: 30px;
    text-align: center;
        font-family: proxima-nova, Sans-serif !important;
    font-weight: 900 !important;
    font-style: normal;
    padding: 10px;
    
}

/* Account Management Button Styling */
.account-top-section .btn,
.account-top-section .btn-primary,
.account-top-section .btn-success {
    color: white !important;
    font-family: "proxima-nova", Sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

/* RFID Code Display */
.rfid-code-display {
    font-family: "proxima-nova", Sans-serif !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    color: #495057 !important;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    margin-right: 10px;
}

/* Search Results Name Styling */
.search-result-member-name {
    font-family: "proxima-nova", Sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #495057 !important;
}

/* Page-specific button classes (.kiosk-button, .payment-method, .quantity-btn,
   .teacher-tab, .signin-nav-btn, .date-submit) inherit universal button styles */

/* ========================================
   ACCOUNTS MANAGEMENT LAYOUT STYLES
   ======================================== */

/* Top Section: Account Management and RFID side by side */
.account-top-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

/* Financial Overview and Rates & Tab Settings side by side */
.financial-rates-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

/* Full Width Complete DLHMS Member Data */
.complete-member-data-section {
    margin-bottom: 30px;
    width: 100%;
    display: block !important;
    grid-template-columns: none !important;
}

.complete-member-data-section .account-card {
    width: 100% !important;
    grid-column: unset !important;
}

.complete-member-data-section .member-info {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    grid-template-columns: none !important;
}

/* Membership Status Callout - Full Width */
.membership-status-section {
    width: 100%;
    margin-bottom: 20px;
}

.membership-status-callout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-radius: 8px;
    border: 2px solid;
    width: 100%;
}

.membership-status-callout.membership-active {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.membership-status-callout.membership-expired {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.membership-status-callout .info-label {
    font-weight: 900;
    font-size: 18px;
}

.membership-status-callout .info-value {
    font-weight: 600;
    font-size: 18px;
}

/* Emergency Contact - Full Width Callout */
.emergency-contact-section {
    width: 100%;
    margin-bottom: 25px;
}

.emergency-contact-callout {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 20px 24px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.emergency-contact-callout .info-label {
    font-weight: 900;
    color: #495057;
    margin-bottom: 0;
    font-size: 18px;
}

.emergency-contact-callout .info-value {
    color: #495057;
    display: flex;
    align-items: center;
    gap: 20px;
}

.emergency-name {
    font-size: 18px;
    font-weight: 700;
    color: #495057;
}

.emergency-phone .contact-link {
    color: #dc3545;
    font-weight: 700;
    text-decoration: none;
    font-size: 18px;
}

.emergency-phone .contact-link:hover {
    text-decoration: underline;
}

/* Four Column Member Data Layout */
.member-data-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 0;
}

.member-data-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
    gap: 5px;
}

.member-data-item .info-label {
    font-weight: bold;
    color: #495057;
    margin-bottom: 0;
    font-size: 14px;
    text-transform: none;
    flex-shrink: 0;
}

.member-data-item .info-value {
    color: #495057;
    font-size: 14px;
}

/* Responsive Design for Accounts Management */
@media (max-width: 1024px) {
    .account-top-section,
    .financial-rates-container {
        grid-template-columns: 1fr;
    }

    .member-data-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .member-data-grid {
        grid-template-columns: 1fr;
    }

    .emergency-contact-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .emergency-contact-callout .info-value {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* ========================================
   PAGE-SPECIFIC STYLES
   ======================================== */

/* ========================================
   EXECUTIVE DASHBOARD STYLES
   ======================================== */

/* Executive Dashboard Styles */
.executive-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
    font-family: 'Roboto', Arial, sans-serif;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, var(--e-global-color-primary, #dc3545) 0%, #c82333 100%);
    color: white !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.dashboard-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0 0 10px 0;
    font-family: proxima-nova, sans-serif;
    color: white !important;
    text-transform: uppercase;
}

.dashboard-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 300;
}

/* Date Selector Styles */
.date-.elementor-kit-5-container {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #000;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.date-.elementor-kit-5-form {
    padding: 20px;
}

.date-.elementor-kit-5-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.date-label {
    font-weight: bold;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input {
    padding: 8px 12px;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    font-size: 1rem;
    background: white;
}

.date-submit {
    padding: 12px 24px;
    background: #dc3545;
    color: white;
    border: 2px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: proxima-nova, Sans-serif;
    font-weight: 900;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.date-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

.date-info {
    text-align: right;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Quick Actions Bar */
.quick-actions-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* Button styles now handled by universal button classes above */

/* KPI Grid Layout */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.kpi-card {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.kpi-header {
    background: linear-gradient(135deg, var(--e-global-color-primary, #dc3545) 0%, #c82333 100%);
    color: white;
    padding: 15px 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kpi-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-family: proxima-nova, sans-serif;
    color: white !important;
    font-weight: 900;
    text-transform: uppercase;
}

.kpi-header i {
    margin-right: 8px;
}

.chart-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.chart-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.kpi-content {
    padding: 25px 20px;
}

.kpi-main-metric {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.metric-value {
    display: block;
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--e-global-color-primary, #dc3545);
    line-height: 1;
    margin-bottom: 5px;
}

.metric-label {
    display: block;
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Compact Comparison Styles */
.kpi-comparisons-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comparison-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.9rem;
}

.comparison-compact .comparison-label {
    font-weight: 500;
    color: #495057;
    min-width: 140px;
}

.comparison-compact .comparison-value {
    font-weight: bold;
    color: #333;
    min-width: 60px;
}

.comparison-compact .comparison-change {
    font-weight: bold;
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 3px;
    min-width: 50px;
    text-align: center;
}

.comparison-change.positive {
    color: #28a745;
    background: rgba(40, 167, 69, 0.1);
}

.comparison-change.negative {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* Legacy comparison styles for accordion */
.kpi-comparisons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comparison-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.comparison-label {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.comparison-value {
    font-weight: bold;
    font-size: 1rem;
}

.comparison-value.positive {
    color: #28a745;
}

.comparison-value.negative {
    color: #dc3545;
}

/* Performance Summary Section */
.performance-summary {
    margin-top: 50px;
}

.section-title {
    font-size: 2rem;
    color: var(--e-global-color-primary, #dc3545);
    text-align: center;
    margin-bottom: 30px;
    font-family: proxima-nova, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.summary-card {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.summary-card h3 {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    margin: 0;
    padding: 15px 20px;
    font-size: 1.1rem;
    font-family: proxima-nova, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

.summary-card h3 i {
    margin-right: 8px;
}

.summary-metrics {
    padding: 20px;
}

.summary-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.summary-metric:last-child {
    border-bottom: none;
}

.metric-name {
    font-weight: 500;
    color: #495057;
}

.metric-change {
    font-weight: bold;
    font-size: 1.1rem;
}

.metric-change.positive {
    color: #28a745;
}

.metric-change.negative {
    color: #dc3545;
}

.summary-metrics .metric-value {
    font-weight: bold;
    color: var(--e-global-color-primary, #dc3545);
    font-size: 1.1rem;
}

/* Modal Styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 0;
    border: 2px solid #000;
    width: 90%;
    max-width: 1000px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background: linear-gradient(135deg, var(--e-global-color-primary, #dc3545) 0%, #c82333 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-family: proxima-nova, sans-serif;
    color: white !important;
    font-weight: 900;
    text-transform: uppercase;
}

.close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    opacity: 0.7;
}

.modal-body {
    padding: 30px;
    height: 500px;
}

/* Modal Styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 0;
    border: 2px solid #000;
    width: 90%;
    max-width: 1000px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background: linear-gradient(135deg, var(--e-global-color-primary, #dc3545) 0%, #c82333 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-family: proxima-nova, sans-serif;
}

.close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    opacity: 0.7;
}

.modal-body {
    padding: 30px;
    height: 500px;
}

/* Accordion Styles */
.details-accordion {
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.accordion-header {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    padding: 20px;
}

.accordion-content {
    padding: 30px;
}

.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.breakdown-card {
    background: rgba(248, 249, 250, 0.8);
    border: 1px solid #dee2e6;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.breakdown-card h3 {
    margin: 0 0 15px 0;
    color: var(--e-global-color-primary, #dc3545);
    font-size: 1.1rem;
    font-family: proxima-nova, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

.breakdown-metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.breakdown-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.breakdown-metric:last-child {
    border-bottom: none;
}

.breakdown-metric .metric-name {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.breakdown-metric .metric-value {
    font-weight: bold;
    color: var(--e-global-color-primary, #dc3545);
}

.breakdown-metric .metric-change {
    font-weight: bold;
    font-size: 0.9rem;
}

.breakdown-metric .metric-change.positive {
    color: #28a745;
}

.breakdown-metric .metric-change.negative {
    color: #dc3545;
}

.breakdown-metric .metric-percentage {
    font-size: 0.8rem;
    color: #6c757d;
    margin-left: 8px;
}

/* Accordion Styles */
.details-accordion {
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.accordion-header {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    padding: 20px;
}

.accordion-content {
    padding: 30px;
}

.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.breakdown-card {
    background: rgba(248, 249, 250, 0.8);
    border: 1px solid #dee2e6;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.breakdown-card h3 {
    margin: 0 0 15px 0;
    color: var(--e-global-color-primary, #dc3545);
    font-size: 1.1rem;
    font-family: proxima-nova, sans-serif;
}

.breakdown-metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.breakdown-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.breakdown-metric:last-child {
    border-bottom: none;
}

.breakdown-metric .metric-name {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.breakdown-metric .metric-value {
    font-weight: bold;
    color: var(--e-global-color-primary, #dc3545);
}

.breakdown-metric .metric-change {
    font-weight: bold;
    font-size: 0.9rem;
}

.breakdown-metric .metric-change.positive {
    color: #28a745;
}

.breakdown-metric .metric-change.negative {
    color: #dc3545;
}

.breakdown-metric .metric-percentage {
    font-size: 0.8rem;
    color: #6c757d;
    margin-left: 8px;
}

/* Executive Dashboard Responsive Design */
@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .summary-grid, .breakdown-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dashboard-title {
        font-size: 2rem;
    }

    .metric-value {
        font-size: 2rem;
    }

    .executive-dashboard {
        padding: 15px;
    }

    .date-.elementor-kit-5-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .date-input, .date-submit {
        width: 100%;
    }

    .quick-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-content {
        width: 95%;
        margin: 10% auto;
    }

    .modal-body {
        padding: 20px;
        height: 400px;
    }

    .comparison-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .comparison-compact .comparison-label {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .dashboard-header {
        padding: 20px 15px;
    }

    .kpi-content {
        padding: 20px 15px;
    }

    .summary-metrics, .breakdown-metrics {
        padding: 15px;
    }

    .kpi-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .chart-btn {
        align-self: flex-end;
    }

    .modal-content {
        width: 98%;
        margin: 5% auto;
    }

    .modal-header {
        padding: 15px;
    }

    .modal-body {
        padding: 15px;
        height: 300px;
    }
}

/* Button styles now handled by universal button classes above */

/* Common Alert/Message Styles */
.alert {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.alert-info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.alert-danger {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert h4 {
    margin: 0 0 10px 0;
}

.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 4px;
    margin: 15px 0;
}

.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    margin: 15px 0;
}

/* Common Table Styles */
.dlhms-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
}

.dlhms-table th,
.dlhms-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.dlhms-table th {
    background: #f8f9fa;
    font-weight: bold;
}

.dlhms-table tr:hover {
    background: #f5f5f5;
}

/* Common Form Styles */
.dlhms-form {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}

.form-table {
    width: 100%;
    border-spacing: 0;
}

.form-table th,
.form-table td {
    padding: 15px 12px;
    vertical-align: top;
    border-bottom: 1px solid #f1f3f4;
}

.form-table th {
    text-align: right;
    width: 180px;
    font-weight: bold;
    color: #212529 !important;
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
}

/* Override any WordPress default table styles */
.dlhms-form .form-table th,
.dlhms-section .form-table th,
table.form-table th,
.dlhms-form table th,
.dlhms-section table th,
form table th,
tr th {
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
    color: #212529 !important;
    font-weight: bold !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Force override any gradient backgrounds on table cells */
.dlhms-form table tr th,
.dlhms-section table tr th,
form table tr th,
table tr th {
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
    background-attachment: initial !important;
    background-blend-mode: initial !important;
    background-clip: initial !important;
    background-origin: initial !important;
    background-position: initial !important;
    background-repeat: initial !important;
    background-size: initial !important;
}

/* Nuclear option - override ALL possible background properties */
*[class*="form"] table th,
*[class*="dlhms"] table th,
body table th,
html table th {
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
}

/* Specific targeting for the event form structure */
.dlhms-section form table.form-table tr th {
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Maximum specificity override for table headers */
html body .dlhms-section .dlhms-form form table.form-table tbody tr th,
html body .dlhms-section .dlhms-form form table.form-table tr th,
html body .dlhms-section form table.form-table tr th,
html body form table.form-table tr th,
html body table.form-table tr th {
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    background-position: 0% 0% !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    color: #212529 !important;
    font-weight: bold !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Try targeting the exact structure from the image */
th:contains("Event Title"),
th:contains("Event Type"),
th:contains("Organizer"),
th:contains("Associated Members"),
th:contains("Start Date"),
th:contains("Length") {
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Alternative approach - target by position */
table tr:first-child th,
table tr:nth-child(1) th,
table tr:nth-child(2) th,
table tr:nth-child(3) th,
table tr:nth-child(4) th,
table tr:nth-child(5) th,
table tr:nth-child(6) th {
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Ultimate override - highest specificity possible */
html body div.dlhms-section form.dlhms-form table.form-table tbody tr th,
html body div.dlhms-section form.dlhms-form table.form-table tr th,
html body div.dlhms-section form table.form-table tr th,
html body div form table.form-table tr th,
html body form table.form-table tr th,
html body table.form-table tr th,
html body div table tr th,
html body table tr th,
body table th,
table th {
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    background-position: 0% 0% !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    color: #212529 !important;
    font-weight: bold !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    align-items: end;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-table input,
.form-table select,
.form-table textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #495057 !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
    background: #ffffff;
}

/* Common Status/Badge Styles */
/* Status styles now handled by universal status classes above */

.status-expired {
    color: #dc3545;
    font-weight: bold;
}

.status-never {
    color: #6c757d;
    font-weight: bold;
}

.charge {
    color: #dc3545;
    font-weight: bold;
}

.payment {
    color: #28a745;
    font-weight: bold;
}

.balance-owed {
    color: #dc3545;
}

.balance-credit {
    color: #28a745;
}

.balance-zero {
    color: #6c757d;
}

/* Common Layout Styles */
.dlhms-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.dlhms-section {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}

.dlhms-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 40px;
    border: 1px solid #dee2e6;
}

.dlhms-header h1,
.dlhms-header h2 {
    color: #495057;
    margin-bottom: 10px;
}

.dlhms-header p {
    color: #6c757d;
    margin: 0;
}

/* Search Results - REMOVED CONFLICTING STYLES WITH display:none */

/* ========================================
   MEMBER PROFILE DISPLAY STYLES
   ======================================== */

/* Welcome Section for New Users */
.login-prompt {
    margin-top: 20px;
}

.welcome-title {
    margin: 0 0 20px 0;
    color: #495057;
}

.welcome-description {
    color: #495057;
    margin-bottom: 20px;
}

.welcome-info-box {
    background: #fff3cd;
    border: 2px solid #ffeaa7;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.welcome-info-title {
    margin: 0 0 15px 0;
    color: #856404;
}

.welcome-info-list {
    margin: 0;
    padding-left: 20px;
    color: #856404;
}

.welcome-note {
    color: #666;
    font-size: 14px;
    margin: 15px 0 0 0;
    text-align: center;
}

/* Profile Header Card */
.profile-header-card {
    margin-bottom: 30px;
}

/* Profile Header Section */
.profile-header-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.profile-info-section {
    flex: 1;
    min-width: 250px;
}

.profile-main-title {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 32px;
}

.profile-member-id {
    margin-bottom: 15px;
}

.profile-fob-connected {
    display: inline-block;
    background: #d4edda;
    color: #155724;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 10px;
    border: 1px solid #c3e6cb;
}

.profile-description {
    color: #666;
    margin: 10px 0;
}

.profile-image-section {
    flex-shrink: 0;
}

.profile-photo {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.profile-photo-placeholder {
    width: 200px;
    height: 200px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

.profile-photo-placeholder i {
    font-size: 48px;
}

/* Profile Form Sections */
.profile-form-section {
    margin-bottom: 30px;
}

.profile-section-title {
    margin: 0 0 15px 0;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 10px;
}

.profile-section-title.emergency {
    color: #dc3545;
    border-bottom-color: #dc3545;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.profile-form-grid.single-column {
    grid-template-columns: 1fr;
}

.profile-form-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.profile-form-field input,
.profile-form-field textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.profile-form-field small {
    display: block;
    color: #666;
    margin-top: 5px;
}

.profile-avatar-current {
    margin-bottom: 15px;
}

.profile-avatar-thumbnail {
    max-width: 100px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-top: 10px;
}

/* Membership Status Styles */
.membership-status-active {
    background: #d4edda;
    border: 2px solid #28a745;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.membership-status-active h3 {
    color: #155724;
    margin: 0 0 10px 0;
}

.membership-status-active p {
    color: #155724;
    margin: 0;
    font-size: 16px;
}

.membership-status-expired {
    background: #f8d7da;
    border: 2px solid #dc3545;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.membership-status-expired h3 {
    color: #721c24;
    margin: 0 0 10px 0;
}

.membership-status-expired p {
    color: #721c24;
    margin: 0;
    font-size: 16px;
}

.membership-status-none {
    background: #e2e3e5;
    border: 2px solid #6c757d;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.membership-status-none h3 {
    color: #383d41;
    margin: 0 0 10px 0;
}

.membership-status-none p {
    color: #383d41;
    margin: 0;
    font-size: 16px;
}

.membership-cancel-info {
    margin-top: 15px;
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
}

.membership-cancel-info h4 {
    margin: 0 0 10px 0;
    color: #856404;
}

.membership-cancel-info p {
    margin: 0 0 10px 0;
    color: #856404;
    font-size: 14px;
}

.membership-cancel-info ul {
    margin: 0;
    padding-left: 20px;
    color: #856404;
    font-size: 14px;
}

.membership-cancel-info a {
    color: #856404;
}

/* Member Details Grid */
.member-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.member-detail-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.member-detail-card h4 {
    margin: 0 0 15px 0;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 10px;
}

.member-detail-card .info-value a {
    color: #dc3545;
    text-decoration: none;
}

/* Status styles now handled by universal status classes above */

.member-at-shop-no {
    color: #6c757d;
}

/* Additional Information Section */
.additional-info-section {
    margin-top: 20px;
    background: #fff3cd;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ffeaa7;
}

.additional-info-title {
    margin: 0 0 15px 0;
    color: #856404;
    border-bottom: 2px solid #ffeaa7;
    padding-bottom: 10px;
}

.emergency-contact-card {
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 4px;
    border-left: 4px solid #dc3545;
}

.emergency-contact-card h5 {
    margin: 0 0 10px 0;
    color: #dc3545;
}

.emergency-contact-card .info-value a {
    color: #dc3545;
    text-decoration: none;
}

.personal-info-card {
    margin-bottom: 15px;
}

.personal-info-card h5 {
    margin: 0 0 10px 0;
    color: #856404;
}

.personal-info-content {
    background: white;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid #856404;
}

/* Scheduled Classes Section */
.scheduled-classes-section {
    background: #d1ecf1;
    border: 2px solid #bee5eb;
    padding: 20px;
    border-radius: 8px;
}

.scheduled-classes-title {
    margin: 0 0 15px 0;
    color: #0c5460;
}

.scheduled-class-item {
    margin-bottom: 10px;
    padding: 10px;
    background: white;
    border-radius: 4px;
    border-left: 4px solid #0c5460;
}

.scheduled-class-title {
    color: #0c5460;
}

.scheduled-class-time {
    color: #666;
    font-size: 14px;
}

/* Teacher Tools Section */
.teacher-tools-section {
    margin-bottom: 30px;
}

.teacher-tab-navigation {
    border-bottom: 2px solid #000;
    margin-bottom: 20px;
}

.teacher-tab {
    background: #666;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 5px;
}

.teacher-tab.active {
    background: #000;
}

.teacher-no-classes {
    color: #666;
    text-align: center;
    padding: 20px;
}

.teacher-class-card {
    margin-bottom: 30px;
    border: 2px solid #000;
    border-radius: 8px;
    overflow: hidden;
}

.teacher-class-header {
    background: #000;
    color: white;
    padding: 15px;
}

.teacher-class-header h4 {
    margin: 0;
    font-size: 18px;
}

.teacher-class-header p {
    margin: 5px 0 0 0;
    color: #ccc;
}

.teacher-class-content {
    padding: 15px;
    background: white;
}

.teacher-students-title {
    margin: 0 0 15px 0;
    color: #495057;
}

.teacher-no-students {
    color: #666;
    margin: 0;
    text-align: center;
}

.teacher-students-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
}

.teacher-students-table thead tr {
    background: #f8f9fa;
}

.teacher-students-table th {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
    font-weight: bold;
}

.teacher-students-table td {
    padding: 10px;
    color: #495057;
    border-bottom: 1px solid #f1f3f4;
}

.teacher-students-table td a {
    color: #dc3545;
    text-decoration: none;
}

.teacher-students-table .no-phone {
    color: #999;
}

.teacher-past-class-card {
    margin-bottom: 30px;
    border: 2px solid #666;
    border-radius: 8px;
    overflow: hidden;
}

.teacher-past-class-header {
    background: #666;
    color: white;
    padding: 15px;
}

.teacher-past-class-header h4 {
    margin: 0;
    font-size: 18px;
    color: white;
}

.teacher-past-class-header p {
    margin: 5px 0 0 0;
    color: #ddd;
}

.teacher-tools-basic {
    color: #495057;
    margin-bottom: 15px;
}

.teacher-tools-note {
    color: #666;
    font-size: 14px;
    margin: 10px 0 0 0;
}

/* Tab Balance Section */
.tab-balance-controls {
    margin-bottom: 20px;
}

.tab-balance-latest-note {
    color: #495057;
    margin-bottom: 10px;
}

.tab-balance-table-container {
    overflow-x: auto;
}

.tab-balance-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tab-balance-table th {
    background: #f8f9fa;
    color: #495057;
    padding: 12px;
    font-weight: bold;
    border-bottom: 2px solid #dee2e6;
}

.tab-balance-table td {
    padding: 12px;
    color: #495057;
    border-bottom: 1px solid #f1f3f4;
}

.tab-balance-table .no-entries {
    text-align: center;
    color: #666;
    padding: 20px;
    background: white;
}

.tab-entry-charge {
    background: #fff5f5;
}

.tab-entry-payment {
    background: #f0fff4;
}

.tab-amount-charge {
    color: #dc3545;
    font-weight: bold;
}

.tab-amount-payment {
    color: #28a745;
    font-weight: bold;
}

/* Tab Balance Summary */
.tab-balance-summary {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
}

.tab-balance-owed {
    background: #f8d7da;
    border: 2px solid #dc3545;
}

.tab-balance-owed h4 {
    margin: 0 0 10px 0;
    color: #721c24;
}

.tab-balance-owed p {
    margin: 0 0 10px 0;
    color: #721c24;
    font-size: 18px;
    font-weight: bold;
}

.tab-balance-owed .balance-note {
    margin: 0;
    color: #721c24;
}

.tab-balance-owed .balance-info {
    margin: 10px 0 0 0;
    color: #721c24;
    font-size: 14px;
}

.tab-balance-owed .admin-actions {
    margin-top: 15px;
}

.tab-balance-credit {
    background: #d4edda;
    border: 2px solid #28a745;
}

.tab-balance-credit h4 {
    margin: 0 0 10px 0;
    color: #155724;
}

.tab-balance-credit p {
    margin: 0;
    color: #155724;
    font-size: 18px;
    font-weight: bold;
}

.tab-balance-credit .balance-info {
    margin: 10px 0 0 0;
    color: #155724;
    font-size: 14px;
}

.tab-balance-zero {
    background: #e2e3e5;
    border: 2px solid #6c757d;
}

.tab-balance-zero h4 {
    margin: 0 0 10px 0;
    color: #383d41;
}

.tab-balance-zero p {
    margin: 0;
    color: #383d41;
    font-size: 18px;
    font-weight: bold;
}

.tab-balance-zero .balance-info {
    margin: 10px 0 0 0;
    color: #383d41;
    font-size: 14px;
}

/* Payment History Section */
.payment-history-controls {
    margin-bottom: 20px;
}

.payment-history-title {
    margin: 0 0 10px 0;
    color: #495057;
}

.payment-history-table-container {
    overflow-x: auto;
}

.payment-history-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.payment-history-table th {
    background: #f8f9fa;
    color: #495057;
    padding: 12px;
    font-weight: bold;
    border-bottom: 2px solid #dee2e6;
}

.payment-history-table td {
    padding: 12px;
    color: #495057;
    border-bottom: 1px solid #f1f3f4;
}

.payment-history-table .no-payments {
    text-align: center;
    color: #666;
    padding: 20px;
    background: white;
}

.payment-history-entry {
    background: #f0fff4;
}

/* Status styles now handled by universal status classes above */

.payment-details-small {
    color: #666;
}

/* ========================================
   ACCOUNTS MANAGEMENT STYLES
   ======================================== */

/* Search Results and Status Messages */
.search-no-results {
    background: #fff3cd;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

/* Member Status Indicators */
.member-status-wp-only {
    color: #d69e2e;
}

.member-status-mismatch {
    color: #d69e2e;
}

.member-status-no-meta {
    color: #e53e3e;
}

.member-status-no-record {
    color: #d69e2e;
}

.member-status-not-found {
    color: #dc3545;
    font-weight: bold;
}

/* Contact Links */
.contact-link {
    color: #dc3545;
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

/* Shop Status */
.shop-status-present {
    color: #28a745;
    font-weight: bold;
}

.shop-status-absent {
    color: #6c757d;
}

/* Social Media Links */
.social-link {
    color: #dc3545;
    text-decoration: none;
}

.social-link.instagram {
    color: #E4405F;
}

.social-link.facebook {
    color: #1877F2;
}

.social-link:hover {
    text-decoration: underline;
}

/* Content Display Boxes */
.content-box {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
}

.content-box.about-me {
    background: #f8f9fa;
}

.content-box.rate-notes {
    background: #f8f9fa;
}

.content-box.tab-notes {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
}

.content-box.current-projects {
    background: #e7f3ff;
    border-left: 3px solid #007bff;
}

.content-box.admin-comments {
    background: #fff5f5;
    border-left: 3px solid #dc3545;
}

.content-box.meta-display {
    background: #f8f9fa;
    padding: 8px;
    border-radius: 4px;
    margin-top: 5px;
    max-height: 100px;
    overflow-y: auto;
}

/* Field Value States */
.field-not-set {
    color: #999;
    font-style: italic;
}

.field-hidden {
    color: #666;
    font-family: monospace;
}

.field-hours {
    color: #999;
}

.field-zero-amount {
    color: #999;
}

.field-boolean-yes {
    color: #28a745;
    font-weight: bold;
}

.field-boolean-no {
    color: #dc3545;
}

/* Rate Information */
.rate-non-lapsable {
    color: #28a745;
}

.payment-recurring-active {
    color: #28a745;
    font-weight: bold;
}

/* Tab Balance Status */
.tab-status-high {
    color: #e53e3e;
}

.tab-status-balance {
    color: #d69e2e;
}

.tab-status-good {
    color: #38a169;
}

/* Meta Information Display */
.meta-details {
    margin-top: 5px;
}

.meta-summary {
    cursor: pointer;
    color: #667eea;
}

.meta-container {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 10px;
    font-size: 11px;
}

.meta-item {
    margin: 2px 0;
    padding: 2px;
    background: #f7fafc;
}

/* Tab Content */
.tab-content-hidden {
    display: none;
}

/* ========================================
   RESPONSIVE PROFILE SECTION CLASSES
   ======================================== */

/* Basic Information Section */
.basic-info-section {
    grid-column: span 2;
}

.contact-info-section {
    grid-column: span 1;
}

.emergency-contact-section {
    grid-column: span 1;
}

.personal-info-section {
    grid-column: span 2;
}

.avatar-section {
    grid-column: span 1;
}

/* Responsive Grid Containers */
.profile-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.profile-sections-grid.two-column {
    grid-template-columns: 1fr 1fr;
}

.profile-sections-grid.three-column {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Section-specific responsive behavior */
@media (max-width: 768px) {
    .profile-sections-grid,
    .profile-sections-grid.two-column,
    .profile-sections-grid.three-column {
        grid-template-columns: 1fr;
    }

    .basic-info-section,
    .contact-info-section,
    .emergency-contact-section,
    .personal-info-section,
    .avatar-section {
        grid-column: span 1;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .profile-sections-grid.three-column {
        grid-template-columns: 1fr 1fr;
    }

    .basic-info-section {
        grid-column: span 2;
    }
}

/* ========================================
   PAGE-SPECIFIC STYLES
   ======================================== */

/* ===== EVENTS MANAGEMENT STYLES ===== */
.dlhms-events-management {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.events-grid {
    display: grid;
    gap: 15px;
    margin-top: 15px;
}

.event-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.event-card.upcoming { border-left: 4px solid #28a745; }
.event-card.past { border-left: 4px solid #6c757d; }
.event-card.canceled { border-left: 4px solid #dc3545; opacity: 0.7; }

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.status-badge.upcoming { background: #d4edda; color: #155724; }
.status-badge.past { background: #e2e3e5; color: #383d41; }
.status-badge.canceled { background: #f8d7da; color: #721c24; }

.dlhms-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.dlhms-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 800px;
    max-height: 80%;
    overflow-y: auto;
    width: 90%;
}

.dlhms-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.event-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* Events Admin Table */
.events-table-container {
    overflow-x: auto;
    margin-top: 15px;
}

.events-admin-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.events-admin-table th {
    background: #f8f9fa;
    padding: 15px 12px;
    text-align: left;
    font-weight: bold;
    color: #212529;
    border-bottom: 2px solid #dee2e6;
    font-size: 14px;
}

.events-admin-table td {
    padding: 12px 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
    font-size: 14px;
    color: #495057;
}

.event-row:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.event-row.past {
    opacity: 0.6;
    background: #f8f9fa;
}

.event-row.canceled {
    background: #fff5f5;
    border-left: 4px solid #dc3545;
}

.status-cell {
    text-align: center;
    width: 50px;
}

.status-icon {
    font-size: 16px;
    cursor: help;
}

.id-cell {
    width: 60px;
    font-family: monospace;
    color: #666;
}

.title-cell {
    min-width: 200px;
}

.event-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: #212529;
    font-size: 15px;
}

.event-title.canceled-text {
    text-decoration: line-through;
    color: #6c757d;
    opacity: 0.7;
}

.event-meta {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
}

.type-cell {
    width: 80px;
}

.date-cell {
    width: 150px;
}

.event-date {
    font-weight: bold;
}

.event-time {
    font-size: 11px;
    color: #666;
}

.organizer-cell {
    width: 120px;
}

.cost-cell {
    width: 60px;
    text-align: right;
    font-family: monospace;
}

.signups-cell {
    width: 70px;
    text-align: center;
}

.signup-count {
    font-weight: bold;
}

.attendance-count {
    color: #666;
    font-size: 11px;
}

.actions-cell {
    width: 150px;
    text-align: center;
}

.actions-cell .btn-mini {
    display: inline-block;
    margin: 0 1px;
}

.btn-mini {
    padding: 8px 12px;
    border: 2px solid #000;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    background: #dc3545;
    color: white;
    position: relative;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    text-decoration: none;
    font-family: proxima-nova, Sans-serif;
    font-weight: 900;
}

.btn-mini:hover {
    background: #000;
    border: 2px solid #dc3545;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: white;
}

.btn-mini:active {
    transform: translateY(0);
}

.btn-mini.btn-primary {
    background: #dc3545;
    border: 2px solid #000;
}

.btn-mini.btn-primary:hover {
    background: #000;
    border: 2px solid #dc3545;
    color: #dc3545;
}

.btn-mini.btn-info {
    background: #17a2b8;
    border: 2px solid #000;
}

.btn-mini.btn-info:hover {
    background: #000;
    border: 2px solid #17a2b8;
    color: #17a2b8;
}

/* Tooltip styles */
.btn-mini[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
}

.btn-mini[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: 1px;
}

/* Additional styles for Font Awesome icons */
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-muted { color: #6c757d !important; }

.btn-outline {
    background: transparent;
    border: 1px solid #007cba;
    color: #007cba;
}

.btn-outline:hover {
    background: #007cba;
    color: white;
}

/* Events Management Responsive */
@media (max-width: 768px) {
    .form-row { flex-direction: column; align-items: stretch; }
    .events-grid { grid-template-columns: 1fr; }
    .event-details-grid { grid-template-columns: 1fr !important; }
    .dlhms-modal-content { width: 95%; padding: 15px; }

    .events-admin-table th,
    .events-admin-table td {
        padding: 8px 4px;
        font-size: 12px;
    }

    .title-cell {
        min-width: 150px; 
    }

    .event-meta {
        display: none;
    }

    .events-table-container {
        overflow-x: auto;
    }

    .dlhms-section > div:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .search-form {
        flex-direction: column;
    }

    .search-form > div {
        min-width: 100% !important;
    }
}

/* Events Management Page Specific Styles */
.events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filtered-results {
    color: #007cba;
}

.search-filter-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
}

.search-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: end;
}

.search-input-group {
    flex: 1;
    min-width: 250px;
}

.filter-group {
    min-width: 120px;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-input,
.form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-actions {
    display: flex;
    gap: 10px;
}

/* Pagination Styles */
.pagination-container {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pagination-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-pages {
    display: flex;
    gap: 5px;
}

.pagination-info {
    color: #666;
    font-size: 14px;
}

.pagination-ellipsis {
    padding: 5px;
}

.current-page {
    font-weight: bold;
}

.action-buttons {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

/* Change Edit Event button from blue to red */
.btn-mini.btn-info {
    background: #dc3545;
    border: 2px solid #000;
}

.btn-mini.btn-info:hover {
    background: #000;
    border: 2px solid #dc3545;
    color: #dc3545;
}

/* Additional icon spacing and color classes */
.text-info {
    color: #17a2b8 !important;
}

/* Events Edit Single Page Styles */
.event-title-input {
    width: 100%;
    max-width: 500px;
}

.event-select {
    width: 100%;
    max-width: 200px;
}

.event-number-input {
    width: 100%;
    max-width: 150px;
}

.event-cost-input {
    width: 100%;
    max-width: 200px;
}

.event-ages-input {
    width: 100%;
    max-width: 300px;
}

.event-takehome-input {
    width: 100%;
    max-width: 400px;
}

.member-search-container {
    margin-bottom: 10px;
}

.member-search-input {
    width: 100%;
    max-width: 500px;
    padding: 8px;
    color: #333;
    background: #fff;
}

.member-add-btn {
    margin-left: 10px;
}

.selected-members-section {
    margin-top: 10px;
}

.selected-members-label {
    color: #333;
}

.selected-members-list {
    margin-top: 5px;
    min-height: 30px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    background: #f9f9f9;
    color: #333;
}

.no-members-text {
    color: #666;
}

.member-help-text {
    color: #666;
    margin-top: 10px;
    display: block;
}

.selected-member-tag {
    display: inline-block;
    background: #dc3545;
    color: white;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 15px;
    font-size: 12px;
}

.member-remove-btn {
    cursor: pointer;
    margin-left: 5px;
    font-weight: bold;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    text-align: center;
    line-height: 14px;
}

.member-feedback {
    font-size: 12px;
    margin-top: 5px;
}

.feedback-success {
    color: #28a745;
}

.feedback-warning {
    color: #ffc107;
}

/* Image Upload Section */
.image-input-container {
    margin-bottom: 15px;
}

.event-image-input {
    width: 70%;
    max-width: 400px;
}

.image-upload-btn {
    margin-left: 10px;
}

.image-upload-btn:hover {
    background: #000 !important;
    color: white !important;
    border-color: #000 !important;
}

.image-remove-btn {
    margin-left: 5px;
}

.image-preview-container {
    margin-top: 10px;
}

.event-preview-image {
    max-width: 200px;
    max-height: 150px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: block;
    margin-top: 5px;
}

.image-error-text {
    display: none;
    color: #999;
    font-style: italic;
}

.no-image-text {
    color: #666;
}

.image-help-text {
    color: #666;
    margin-top: 10px;
    display: block;
}

/* Event Detail Page Sections */
.event-detail-exists {
    background: #e8f5e8;
    border: 1px solid #4caf50;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    color: #155724;
}

.event-detail-actions {
    margin-top: 10px;
}

.event-detail-view-btn {
    margin-left: 10px;
}

.event-detail-missing {
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    color: #856404;
}

.event-detail-description {
    margin: 10px 0;
}

.event-detail-help {
    display: block;
    margin-top: 5px;
    color: #666;
}

.event-detail-save-first {
    color: #856404;
    font-style: italic;
}

.description-legacy-notice {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.legacy-notice-text {
    color: #6c757d;
}

/* Form Actions */
.form-actions-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.event-save-btn {
    font-size: 16px;
    padding: 12px 24px;
}

.event-cancel-btn {
    margin-left: 10px;
}

.event-duplicate-btn {
    margin-left: 20px;
}

/* Event Detail Duplication Notices */
.event-detail-shared-notice {
    color: #856404;
    background: #fff3cd;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
}

.event-detail-duplicate-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    color: #856404;
}

.event-detail-duplicate-notice small {
    color: #856404;
}

/* Event Edit Header Styles */
.event-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.event-edit-nav {
    flex: 1;
}

.event-delete-section {
    flex-shrink: 0;
    margin-left: 20px;
}

.event-delete-btn {
    font-size: 16px;
    padding: 15px 25px;
    font-weight: bold;
    background: #dc3545;
    border: 2px solid #000;
    color: white;
}

.event-delete-btn:hover {
    background: #000 !important;
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
}

.event-id-number {
    font-size: 0.6em;
    color: #666;
    font-weight: normal;
}

/* Member Profile Display */
.dlhms-member-profile {
    max-width: 1200px;
    margin: 20px 0;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.member-info h2 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 32px;
}

.member-id {
    background: #ed202c;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 15px;
}

.profile-image {
    flex-shrink: 0;
}

.member-photo {
    max-height: 256px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.membership-status {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.membership-status h3 {
    margin: 0 0 15px 0;
    color: #333;
}

.scheduled-classes {
    margin-bottom: 30px;
}

.teacher-tools {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.financial-section {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tab-balance-section,
.payment-history-section {
    margin-bottom: 40px;
}

.tab-balance-section:last-child,
.payment-history-section:last-child {
    margin-bottom: 0;
}

.tab-table,
.payments-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.tab-table th,
.tab-table td,
.payments-table th,
.payments-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.tab-table th,
.payments-table th {
    background: #f8f9fa;
    font-weight: bold;
}

.payment-amount {
    color: #28a745;
    font-weight: bold;
}

.tab-balance-summary {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

/* Member Tab Management */
.dlhms-tab-management {
    max-width: 1400px;
    margin: 20px 0;
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.action-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.action-section h3 {
    margin: 0 0 20px 0;
    color: #333;
}

.tab-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.tab-form .form-group {
    flex: 1;
}

.tab-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.tab-form input,
.tab-form select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.tab-filters {
    background: #e9ecef;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.filter-form {
    display: flex;
    align-items: center;
    gap: 15px;
}

.balances-table {
    overflow-x: auto;
}

.balances-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.balances-table th,
.balances-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.balances-table th {
    background: #f8f9fa;
    font-weight: bold;
}

.balance-positive {
    background: #fff5f5;
}

.balance-negative {
    background: #f0fff4;
}

.balance-zero {
    background: #f8f9fa;
}

.balance-amount {
    font-weight: bold;
    font-family: monospace;
}

.totals-row {
    background: #e9ecef;
    font-weight: bold;
}

.tab-entries-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.tab-entries-table th,
.tab-entries-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.tab-entries-table th {
    background: #f8f9fa;
}

.entry-charge {
    background: #fff5f5;
}

.entry-payment {
    background: #f0fff4;
}

.amount,
.balance {
    font-family: monospace;
    font-weight: bold;
}

/* Members At Shop */
.dlhms-members-at-shop {
    max-width: 1000px;
    margin: 20px 0;
}

.shop-status-controls {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.status-form {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.status-form input[type="number"] {
    width: 100px;
}

.members-list {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.member-item:last-child {
    border-bottom: none;
}

.member-info {
    flex: 1;
}

.member-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}

.member-details {
    color: #666;
    font-size: 14px;
}

.member-actions {
    display: flex;
    gap: 10px;
}

.check-in-time {
    background: #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

/* Cash Register */
.dlhms-cash-register {
    max-width: 1200px;
    margin: 20px 0;
}

.register-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.register-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.register-section h3 {
    margin: 0 0 20px 0;
    color: #333;
    border-bottom: 2px solid #007cba;
    padding-bottom: 10px;
}

.donation-form,
.payment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.donation-form input,
.payment-form input,
.donation-form select,
.payment-form select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.material-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    text-align: center;
}

.material-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.material-price {
    color: #28a745;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.quantity-btn {
    background: #007cba;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.quantity-display {
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

.cart-summary {
    background: #e9ecef;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.cart-total {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 15px;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.payment-method {
    background: #28a745;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

.payment-method:hover {
    background: #218838;
}

/* Member Registration/Signup */
.dlhms-member-signup {
    max-width: 800px;
    margin: 20px auto;
}

.registration-form {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.registration-form h2 {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.form-section {
    margin-bottom: 30px;
}

.form-section h3 {
    color: #007cba;
    border-bottom: 2px solid #007cba;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-item input[type="checkbox"] {
    width: auto;
}

/* News Management */
.dlhms-news {
    max-width: 1000px;
    margin: 20px 0;
}

.news-form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.news-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.news-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.news-meta {
    color: #666;
    font-size: 14px;
}

.news-content {
    line-height: 1.6;
    margin-bottom: 15px;
}

.news-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 10px 0;
}

.comments-section {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 15px;
}

.comment {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.comment-header {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.comment-content {
    color: #555;
}

.comment-form {
    margin-top: 15px;
}

.comment-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

/* Events Widget */
.dlhms-events {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.events-header {
    background: transparent;
    color: inherit;
    padding: 15px 20px;
    font-weight: bold;
    font-size: 18px;
}

.event-item {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.event-item:last-child {
    border-bottom: none;
}

.event-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.event-date {
    color: #007cba;
    font-weight: bold;
    margin-bottom: 5px;
}

.event-details {
    color: #666;
    font-size: 14px;
}

.event-signup {
    margin-top: 10px;
}

.signup-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.signup-available {
    background: #d4edda;
    color: #155724;
}

.signup-full {
    background: #f8d7da;
    color: #721c24;
}

.signup-closed {
    background: #e2e3e5;
    color: #6c757d;
}

/* Event Cards (Elementor Custom CSS) */
.event-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute cards evenly */
}

.event-card {
    width: calc(33.33% - 10px); /* Three cards per row with spacing */
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden; /* Ensure content doesn't overflow */
}

.event-image {
    height: 200px; /* Fixed height for all images */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.event-card .event-details {
    padding: 10px;
}

.event-card .event-details h3 {
    margin-top: 0;
    font-size: 1.2em;
}

.event-card .event-details .event-date {
    color: red;
    font-size: 0.9em;
}

/* Member Badges */
.dlhms-badges {
    max-width: 1000px;
    margin: 20px 0;
}

.badge-assignment {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.badge-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}

.badge-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.badge-level {
    background: #007cba;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

.badge-instructor {
    color: #28a745;
    font-size: 14px;
    margin-bottom: 10px;
}

.badge-date {
    color: #666;
    font-size: 12px;
}

/* Equipment Management */
.dlhms-equipment {
    max-width: 1200px;
    margin: 20px 0;
}

.equipment-form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.equipment-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.equipment-name {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.equipment-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
}

.status-operational {
    background: #d4edda;
    color: #155724;
}

.status-maintenance {
    background: #fff3cd;
    color: #856404;
}

#service_notes {
    height: 200px;
}

.status-broken {
    background: #f8d7da;
    color: #721c24;
}

.equipment-details {
    color: #666;
    margin-bottom: 15px;
}

/* Kiosk Interface */
.dlhms-kiosk {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-size: 18px;
}

.kiosk-header {
    text-align: center;
    background: #007cba;
    color: white;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.kiosk-header h1 {
    margin: 0;
    font-size: 36px;
}

.kiosk-section {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    text-align: center;
}

.kiosk-button {
    display: inline-block;
    background: #28a745;
    color: white;
    padding: 20px 40px;
    border: none;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    margin: 10px;
    text-decoration: none;
}

.kiosk-button:hover {
    background: #218838;
}

/* Fee Grid Layout - Two Column Balanced */
.fee-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 20px 0;
    align-items: start;
}

.fee-category {
    background: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.fee-category h3 {
    color: var(--e-global-color-primary, #ed202c);
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--e-global-color-primary, #ed202c);
    font-size: 18px;
    font-weight: 900;
}

.fee-category .member-button {
    display: block;
    margin: 8px 0;
    width: 100%;
    box-sizing: border-box;
}

/* Heat Demand Buttons - Red Styling */
.heat-demand-btn {
    background: var(--e-global-color-primary, #ed202c) !important;
    border: 5px solid white;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 16px;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
}

.heat-demand-btn:hover {
    background: #c41e3a !important;
    color: white !important;
    text-decoration: none;
    transform: scale(1.05);
}

.heat-demand-btn:active,
.heat-demand-btn:focus {
    background: var(--e-global-color-primary, #ed202c) !important;
    color: white !important;
    text-decoration: none;
    outline: none;
}

/* Sign In/Out Interface Styles */
.dlhms-signin-interface {
    font-family: "proxima-nova", Sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: transparent;
}

.signin-header {
    background: var(--e-global-color-primary, #ed202c);
    color: white;
    padding: 20px 15px 15px 15px;
    border-radius: 0;
    margin-bottom: 20px;
    text-align: center;
}

.signin-header-logo {
    margin-bottom: 15px;
}

.signin-header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.signin-nav-btn {
    background: black;
    color: white;
    border: 5px solid white;
    padding: 15px 20px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 900;
    font-size: 14px;
    margin: 5px;
    display: inline-block;
    text-align: center;
    min-width: 100px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.signin-nav-btn:hover {
    background: #333;
    color: white;
    text-decoration: none;
    transform: scale(1.05);
}

.signin-nav-btn:active,
.signin-nav-btn:focus {
    background: black !important;
    color: white !important;
    text-decoration: none;
    outline: none;
    border: 5px solid white;
}

.signin-nav-btn:visited {
    background: black;
    color: white;
    text-decoration: none;
}

.signin-nav-btn i {
    display: block;
    font-size: 24px;
    margin-bottom: 5px;
}

.signin-logo {
    max-height: 50px;
    margin: 0 auto;
    display: block;
}

.number-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 300px;
    margin: 20px auto;
}

.number-btn {
    background: black;
    border: 5px solid white;
    color: white;
    font-size: 32px;
    font-weight: bold;
    padding: 20px;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: all 0.3s ease;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.number-btn:hover {
    background: #333;
    transform: scale(1.05);
}

.number-btn:active {
    transform: scale(0.95);
    background: black !important;
    color: white !important;
}

.number-btn:focus {
    background: black !important;
    color: white !important;
    outline: none;
}

.money-btn {
    background: #006600;
    border: 5px solid white;
    color: white;
    font-size: 28px;
    font-weight: bold;
    padding: 15px;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: all 0.3s ease;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.money-btn:hover {
    background: #008800;
    transform: scale(1.05);
}

.money-btn:active {
    transform: scale(0.95);
    background: #006600 !important;
    color: white !important;
}

.money-btn:focus {
    background: #006600 !important;
    color: white !important;
    outline: none;
}

.member-input-container {
    position: relative;
    max-width: 400px;
    margin: 20px auto;
}

.member-input {
    width: 100%;
    padding: 20px;
    font-size: 24px;
    border: 5px solid #333;
    border-radius: 30px;
    box-shadow: inset 0px 1px 4px 0px rgba(0,0,0,0.20);
    background: white;
    color: black;
    text-align: center;
    font-weight: bold;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.member-input:focus {
    outline: none;
    box-shadow: inset 0px 1px 6px 0px rgba(0,0,0,0.30), 0 0 0 3px rgba(237, 32, 44, 0.5);
    background: #f9f9f9;
    border-color: var(--e-global-color-primary, #ed202c);
}

.member-input::placeholder {
    color: #999;
    font-weight: normal;
}

.autocomplete-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 3px solid var(--e-global-color-primary, #ed202c);
    border-bottom: none;
    border-radius: 15px 15px 0 0;
    max-height: 300px;
    overflow-y: auto;
    z-index: 9999;
    display: none;
    box-shadow: 0 -4px 8px rgba(0,0,0,0.2);
    margin-bottom: 5px;
}

.autocomplete-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 16px;
}

.autocomplete-item:hover {
    background: #f0f0f0;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item mark {
    background: var(--e-global-color-primary, #ed202c);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}

.member-button {
    background: #e6e6e6;
    border: 2px solid #999;
    color: #666;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    margin: 8px 5px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 1px 1px 2px 0px #666;
}

.member-button:hover {
    background: #666;
    color: white;
    text-decoration: none;
}

.member-button.signout {
    background: #ffeeee;
    border-color: #ff6666;
}

.member-button.signout:hover {
    background: #ff6666;
    color: white;
}

.member-button:active,
.member-button:focus {
    background: #666 !important;
    color: white !important;
    text-decoration: none;
    outline: none;
}

.member-button.signout:active,
.member-button.signout:focus {
    background: #ff6666 !important;
    color: white !important;
    text-decoration: none;
    outline: none;
}

.signin-section {
    text-align: center;
    margin: 20px 0;
}

.signin-section h2 {
    color: var(--e-global-color-primary, #ed202c);
    margin-bottom: 20px;
}

.maintenance-item {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
}

.maintenance-item.overdue {
    background: #ffeeee;
    border-color: #ff6666;
}

.maintenance-item.critical {
    background: #ffe0e0;
    border-color: #ff0000;
}

/* Maintenance Task Buttons - White Text, All Caps, Proxima Nova */
.member-button.critical,
.member-button.overdue {
    color: white !important;
    font-family: "proxima-nova", Sans-serif !important;
}

.member-button.critical strong,
.member-button.overdue strong,
.member-button strong {
    color: white !important;
    text-transform: uppercase !important;
    font-family: "proxima-nova", Sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
}

.member-button.critical small,
.member-button.overdue small,
.member-button small {
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: "proxima-nova", Sans-serif !important;
}

/* Ensure maintenance buttons have proper styling */
a.member-button.critical,
a.member-button.overdue {
    text-decoration: none !important;
}

a.member-button.critical:hover,
a.member-button.overdue:hover {
    color: white !important;
    text-decoration: none !important;
}

a.member-button.critical:hover strong,
a.member-button.overdue:hover strong {
    color: white !important;
}

.temp-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0f8ff;
    border: 1px solid #4a90e2;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
}

.temp-info {
    font-size: 18px;
    font-weight: bold;
}

.temp-controls {
    display: flex;
    gap: 10px;
}

/* Thermostat Zone Grid - Two Column Layout */
.thermostat-zones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
}

.thermostat-zone-card {
    background: #f0f8ff !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 0 !important;
    text-align: center;
    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.2);
}

.thermostat-zone-info {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    font-weight: bold;
}

.thermostat-zone-info strong {
    color: #333;
}

.thermostat-zone-buttons {
    text-align: center !important;
    margin-top: 10px;
}

.thermostat-zone-buttons .heat-demand-btn {
    font-size: 14px !important;
    padding: 8px 12px !important;
    margin: 3px !important;
    border-radius: 20px !important;
    border-width: 3px !important;
    display: inline-block;
    min-width: 80px;
}

/* Toast Notification System */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
}

.toast {
    background: white;
    border-radius: 15px;
    padding: 20px 25px;
    margin-bottom: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    border-left: 6px solid;
    max-width: 400px;
    min-width: 300px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    transform: translateX(450px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
    position: relative;
}

.toast.show {
    transform: translateX(0);
}

.toast.success {
    border-left-color: #4caf50;
    color: #2e7d32;
}

.toast.error {
    border-left-color: #f44336;
    color: #c62828;
}

.toast.warning {
    border-left-color: #ff9800;
    color: #ef6c00;
}

.toast.info {
    border-left-color: var(--e-global-color-primary, #ed202c);
    color: #333;
}

.toast-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    color: #666;
}

.toast-icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 18px;
}

/* Legacy status messages (hidden by default) */
.status-message {
    display: none;
}

/* Sign-in Interface Responsive Styles */
@media (max-width: 768px) {
    .signin-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .number-pad {
        grid-template-columns: repeat(3, 1fr);
        max-width: 280px;
        gap: 12px;
    }

    .number-btn {
        font-size: 28px;
        padding: 18px;
        min-height: 70px;
    }

    .signin-nav-btn {
        font-size: 12px;
        padding: 12px 16px;
        min-width: 90px;
        margin: 3px;
    }

    .signin-nav-btn i {
        font-size: 20px;
        margin-bottom: 3px;
    }

    .member-input {
        font-size: 22px;
        padding: 18px;
    }

    .member-input-container {
        margin: 15px auto;
    }

    .autocomplete-dropdown {
        font-size: 18px;
    }

    .autocomplete-item {
        padding: 12px;
    }

    .dlhms-signin-interface {
        padding: 10px;
    }

    .signin-section h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }
}

/* iPad Optimizations - Portrait and Landscape */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Main Container - No box */
    .dlhms-signin-interface {
        max-width: 100%;
        padding: 10px;
        margin: 0 auto;
        background: transparent;
    }

    /* Header Navigation - iPad Optimized Layout */
    .signin-header {
        padding: 15px 10px 12px 10px;
        border-radius: 0;
        margin-bottom: 12px;
        min-height: auto;
    }

    .signin-header-logo {
        margin-bottom: 12px;
    }

    .signin-header-nav {
        gap: 8px;
        justify-content: space-evenly;
    }

    .signin-nav-btn {
        font-size: 11px;
        padding: 10px 14px;
        min-width: 85px;
        margin: 0;
        border-radius: 20px;
        border-width: 2px;
        flex: 1;
        max-width: 140px;
    }

    .signin-nav-btn i {
        font-size: 18px;
        margin-bottom: 3px;
    }

    .signin-logo {
        max-height: 40px;
        margin: 0 auto;
    }

    /* Number Pad - Appropriately sized for iPad */
    .number-pad {
        max-width: 320px;
        gap: 15px;
        margin: 20px auto;
    }

    .number-btn {
        font-size: 32px;
        padding: 18px;
        min-height: 75px;
        border-radius: 25px;
        border-width: 4px;
    }

    .money-btn {
        font-size: 24px;
        padding: 15px;
        min-height: 65px;
        border-radius: 25px;
        border-width: 4px;
    }

    /* Members Currently at Shop - Compact */
    #members-at-shop {
        margin-bottom: 15px !important;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 2px solid #dee2e6;
    }

    #members-at-shop h3 {
        font-size: 18px !important;
        margin: 0 0 10px 0 !important;
        color: #495057;
        text-align: center;
    }

    #members-at-shop .member-button {
        font-size: 14px !important;
        padding: 8px 12px !important;
        margin: 4px 3px !important;
        border-radius: 8px !important;
        min-height: auto !important;
        display: inline-block;
    }

    #members-at-shop .member-button.signout {
        background: #f8d7da !important;
        border-color: #f5c6cb !important;
        color: #721c24 !important;
    }

    /* Input Fields - Properly sized for iPad */
    .member-input {
        font-size: 22px;
        padding: 18px;
        border-radius: 25px;
        border-width: 4px;
        margin-bottom: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    .member-input-container {
        max-width: 90%;
        width: 90%;
        margin: 15px auto;
        padding: 0;
    }

    .member-input-container label {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
        display: block;
    }

    /* Fee Grid - Optimized for iPad */
    .fee-grid {
        gap: 25px;
        margin: 25px 0;
    }

    .fee-category {
        padding: 25px;
        border-radius: 15px;
        border-width: 3px;
    }

    .fee-category h3 {
        font-size: 22px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom-width: 3px;
    }

    .fee-category .member-button {
        font-size: 20px;
        padding: 16px 24px;
        margin: 10px 0;
        border-radius: 12px;
        border-width: 3px;
    }

    /* Member Buttons */
    .member-button {
        font-size: 20px;
        padding: 16px 24px;
        margin: 10px 8px;
        border-radius: 12px;
        border-width: 3px;
    }

    /* Section Headers - Compact for iPad */
    .signin-section h2 {
        font-size: 24px;
        margin-bottom: 15px;
        margin-top: 10px;
    }

    .signin-section h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    /* Autocomplete Dropdown */
    .autocomplete-dropdown {
        border-radius: 20px 20px 0 0;
        border-width: 4px;
        max-height: 350px;
    }

    .autocomplete-item {
        padding: 15px;
        font-size: 18px;
    }

    /* Heat Demand Buttons */
    .heat-demand-btn {
        font-size: 20px;
        padding: 16px 24px;
        margin: 8px;
        border-radius: 35px;
        border-width: 6px;
    }

    /* Toast Notifications */
    .toast-container {
        top: 15px;
        right: 15px;
        left: 15px;
    }

    .toast {
        max-width: none;
        min-width: auto;
        margin-bottom: 12px;
        padding: 18px 24px;
        font-size: 16px;
        border-radius: 18px;
        border-left-width: 8px;
    }

    /* Success/Error Messages */
    .signin-section > div[style*="background"] {
        font-size: 20px !important;
        padding: 25px !important;
        margin: 25px 0 !important;
        border-radius: 15px !important;
    }
}

/* iPad Landscape Specific Optimizations */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Utilize horizontal space better */
    .dlhms-signin-interface {
        max-width: 100%;
        padding: 8px;
    }

    /* Header - Ultra compact in landscape */
    .signin-header {
        padding: 10px 8px 8px 8px;
        margin-bottom: 8px;
    }

    .signin-header-logo {
        margin-bottom: 8px;
    }

    .signin-header-nav {
        gap: 6px;
    }

    .signin-nav-btn {
        font-size: 10px;
        padding: 8px 12px;
        min-width: 75px;
        margin: 0;
        border-width: 2px;
        flex: 1;
        max-width: 120px;
    }

    .signin-nav-btn i {
        font-size: 16px;
        margin-bottom: 2px;
    }

    .signin-logo {
        max-height: 32px;
        margin: 0 auto;
    }

    /* Number Pad - Compact for landscape */
    .number-pad {
        max-width: 350px;
        gap: 12px;
        margin: 15px auto;
    }

    .number-btn {
        font-size: 28px;
        padding: 15px;
        min-height: 65px;
    }

    /* Members at Shop - Very compact in landscape */
    #members-at-shop {
        margin-bottom: 10px !important;
        padding: 10px !important;
    }

    #members-at-shop h3 {
        font-size: 16px !important;
        margin: 0 0 8px 0 !important;
    }

    #members-at-shop .member-button {
        font-size: 12px !important;
        padding: 6px 10px !important;
        margin: 2px !important;
    }

    /* Fee Grid - Better use of horizontal space */
    .fee-grid {
        gap: 30px;
    }

    .fee-category {
        padding: 20px;
    }

    .fee-category h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .fee-category .member-button {
        font-size: 18px;
        padding: 14px 20px;
        margin: 8px 0;
    }

    /* Section spacing - Very compact for landscape */
    .signin-section {
        margin: 8px 0;
        padding: 5px;
    }

    .signin-section h2 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .signin-section h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    /* Input containers - Compact for landscape */
    .member-input-container {
        max-width: 85%;
        width: 85%;
        margin: 12px auto;
        padding: 0;
    }

    .member-input {
        font-size: 20px;
        padding: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Toast notifications - Smaller in landscape */
    .toast {
        font-size: 15px;
        padding: 16px 20px;
    }

    /* Thermostat zones - Compact for landscape */
    .thermostat-zones-grid {
        gap: 10px;
        margin: 12px 0;
    }

    .thermostat-zone-card {
        padding: 8px !important;
    }

    .thermostat-zone-info {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .thermostat-zone-buttons .heat-demand-btn {
        font-size: 12px !important;
        padding: 6px 8px !important;
        margin: 2px !important;
        min-width: 70px;
    }
}

/* iPad Portrait Specific Optimizations */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Header optimized for portrait */
    .signin-header {
        padding: 18px 12px 15px 12px;
        margin-bottom: 15px;
    }

    .signin-header-logo {
        margin-bottom: 15px;
    }

    .signin-header-nav {
        gap: 10px;
        flex-wrap: wrap;
    }

    .signin-nav-btn {
        font-size: 12px;
        padding: 12px 16px;
        min-width: 90px;
        margin: 0;
        flex: 1;
        max-width: 160px;
    }

    .signin-nav-btn i {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .signin-logo {
        max-height: 45px;
    }

    /* Appropriately sized touch targets in portrait */
    .number-btn {
        font-size: 36px;
        padding: 20px;
        min-height: 80px;
    }

    .money-btn {
        font-size: 26px;
        padding: 16px;
        min-height: 70px;
    }

    /* Members at Shop - Compact in portrait too */
    #members-at-shop {
        margin-bottom: 18px !important;
        padding: 12px !important;
    }

    #members-at-shop h3 {
        font-size: 17px !important;
        margin: 0 0 10px 0 !important;
    }

    /* Fee grid - Ensure good spacing */
    .fee-category {
        padding: 30px;
        margin-bottom: 25px;
    }

    .fee-category h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .fee-category .member-button {
        font-size: 22px;
        padding: 18px 26px;
        margin: 12px 0;
    }

    /* Input fields - Properly sized for portrait */
    .member-input {
        font-size: 24px;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .member-input-container {
        max-width: 92%;
        width: 92%;
        margin: 18px auto;
        padding: 0;
    }

    .member-input-container label {
        font-size: 20px;
    }

    /* Section headers - Compact even in portrait */
    .signin-section h2 {
        font-size: 26px;
        margin-bottom: 18px;
    }

    .signin-section h3 {
        font-size: 22px;
        margin-bottom: 16px;
    }
}

/* iPad Touch and Interaction Improvements */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Improve touch targets and feedback */
    .number-btn, .money-btn, .signin-nav-btn, .member-button, .heat-demand-btn {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    /* Enhanced hover/active states for iPad */
    .number-btn:active, .money-btn:active {
        transform: scale(0.95);
        box-shadow: inset 0 4px 8px rgba(0,0,0,0.3);
    }

    .signin-nav-btn:active {
        transform: scale(0.96);
        box-shadow: inset 0 3px 6px rgba(0,0,0,0.2);
    }

    .member-button:active {
        transform: scale(0.97);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    }

    /* Prevent zoom on input focus - No scaling needed with proper sizing */
    .member-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        /* No transform needed - input is properly sized */
    }

    /* Container properly sized for iPad */
    .member-input-container {
        padding: 0;
        min-height: auto;
        margin: 15px auto;
        max-width: 90%;
        width: 90%;
    }

    /* Better spacing for touch */
    .fee-category .member-button {
        min-height: 60px;
        margin: 15px 0;
    }

    /* Improved autocomplete for touch */
    .autocomplete-item {
        min-height: 50px;
        display: flex;
        align-items: center;
        padding: 18px;
    }

    .autocomplete-item:active {
        background: #e0e0e0;
    }

    /* Better visual hierarchy - No background for main signin */
    .signin-section {
        background: transparent;
        border-radius: 0;
        padding: 10px;
        margin: 10px 0;
        box-shadow: none;
    }

    /* Add background only for non-main sections */
    .signin-section:not(:first-child) {
        background: rgba(255,255,255,0.95);
        border-radius: 20px;
        padding: 25px;
        margin: 20px 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* Improved contrast for readability */
    .signin-section h2 {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }

    /* Better button grouping */
    .signin-nav-btn + .signin-nav-btn {
        margin-left: 15px;
    }

    /* Improved status messages */
    .signin-section > div[style*="background: #d4edda"] {
        border-left: 8px solid #28a745 !important;
        box-shadow: 0 4px 12px rgba(40,167,69,0.2) !important;
    }

    .signin-section > div[style*="background: #f8d7da"] {
        border-left: 8px solid #dc3545 !important;
        box-shadow: 0 4px 12px rgba(220,53,69,0.2) !important;
    }

    /* Thermostat zones - iPad optimized grid */
    .thermostat-zones-grid {
        gap: 12px;
        margin: 15px 0;
    }

    .thermostat-zone-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    .thermostat-zone-info {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    .thermostat-zone-buttons .heat-demand-btn {
        font-size: 13px !important;
        padding: 7px 10px !important;
        margin: 2px !important;
        min-width: 75px;
    }

    /* Heat demand buttons - Better spacing */
    .heat-demand-btn + .heat-demand-btn {
        margin-left: 15px;
    }
}

/* Maintenance Prompt Section - Fun and Engaging */
.maintenance-prompt {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 25px;
    margin: 20px 0;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(238, 90, 36, 0.3);
    border: 3px solid #ffffff;
    position: relative;
    overflow: hidden;
}

.maintenance-prompt::before {
    content: "🔧";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 60px;
    opacity: 0.2;
    transform: rotate(15deg);
}

.maintenance-prompt h3 {
    font-size: 24px;
    margin: 0 0 15px 0;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.maintenance-prompt .witty-message {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.maintenance-task-card {
    background: rgba(255,255,255,0.95);
    color: #333;
    padding: 20px;
    border-radius: 12px;
    margin: 15px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.maintenance-task-card h4 {
    color: var(--e-global-color-primary, #ed202c);
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 900;
}

.maintenance-task-card .task-details {
    font-size: 16px;
    margin-bottom: 15px;
    color: #555;
}

.maintenance-task-card .task-time {
    font-size: 14px;
    color: #666;
    font-style: italic;
    margin-bottom: 15px;
}

.maintenance-prompt-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.maintenance-prompt-btn {
    background: #ffffff;
    color: var(--e-global-color-primary, #ed202c);
    border: 3px solid #ffffff;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.maintenance-prompt-btn:hover {
    background: var(--e-global-color-primary, #ed202c);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    text-decoration: none;
}

.maintenance-prompt-btn.secondary {
    background: transparent;
    color: white;
    border-color: white;
}

.maintenance-prompt-btn.secondary:hover {
    background: white;
    color: var(--e-global-color-primary, #ed202c);
}

/* iPad Optimizations for Maintenance Prompt */
@media (min-width: 768px) and (max-width: 1024px) {
    .maintenance-prompt {
        padding: 20px;
        margin: 15px 0;
    }

    .maintenance-prompt h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .maintenance-prompt .witty-message {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .maintenance-task-card {
        padding: 15px;
    }

    .maintenance-task-card h4 {
        font-size: 18px;
    }

    .maintenance-prompt-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Landscape - More compact */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .maintenance-prompt {
        padding: 15px;
        margin: 10px 0;
    }

    .maintenance-prompt h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .maintenance-prompt .witty-message {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .maintenance-task-card {
        padding: 12px;
    }

    .maintenance-prompt-buttons {
        gap: 10px;
    }

    .maintenance-prompt-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .toast {
        padding: 12px 15px;
        font-size: 13px;
    }

    .toast-icon {
        font-size: 16px;
        margin-right: 8px;
    }
}

.kiosk-input {
    font-size: 24px;
    padding: 15px;
    border: 2px solid #ccc;
    border-radius: 8px;
    width: 300px;
    text-align: center;
}

/* Payment Store Interface */
.dlhms-payment-store {
    max-width: 800px;
    margin: 20px 0;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
}

.payment-option.tab-payment {
    background: #ffeeee;
}

.payment-option.recurring-membership {
    background: #eeeeff;
}

.payment-form {
    flex-shrink: 0;
}

.payment-details {
    flex-grow: 1;
}

.payment-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.payment-button img {
    display: block;
}

.payment-error {
    color: #d63638;
    background: #fcf0f1;
    border: 1px solid #d63638;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

/* Payment Success Page */
.payment-success-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

.success-message {
    background: #f0f8f0;
    border: 2px solid #4caf50;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
}

.success-message h2 {
    color: #2e7d32;
    margin-bottom: 20px;
    font-size: 24px;
}

.success-details {
    text-align: left;
    margin: 20px 0;
}

.processing-info {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
    border-left: 4px solid #2196f3;
}

.processing-info h3 {
    color: #1976d2;
    margin-top: 0;
}

.processing-info ul {
    margin: 10px 0;
    padding-left: 20px;
}

.echeck-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    color: #856404;
}

.next-steps {
    margin: 30px 0;
}

.next-steps h3 {
    color: #333;
    margin-bottom: 15px;
}

.action-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.button {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
}

.button-primary {
    background-color: #0073aa;
    color: white;
}

.button-primary:hover {
    background-color: #005a87;
    color: white;
}

.button-secondary {
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid #ccc;
}

.button-secondary:hover {
    background-color: #e1e1e1;
    color: #333;
}

.support-info {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
    margin-top: 30px;
    text-align: left;
}

.support-info h3 {
    color: #333;
    margin-top: 0;
}

.support-info ul {
    list-style-type: none;
    padding-left: 0;
}

.support-info li {
    margin: 8px 0;
    padding: 5px 0;
}

.support-info a {
    color: #0073aa;
    text-decoration: none;
}

.support-info a:hover {
    text-decoration: underline;
}

/* Thermostat Control System */
.dlhms-thermostat-control {
    max-width: 1400px;
    margin: 20px 0;
}

.system-status {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 4px solid #007cba;
}

.system-status h3 {
    margin: 0 0 15px 0;
    color: #007cba;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.status-item {
    background: white;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.thermostats-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.thermostat-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.thermostat-header {
    background: #f8f9fa;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
}

.thermostat-status h3 {
    margin: 0 0 10px 0;
    font-size: 24px;
}

.status-heating {
    color: #dc3545;
}

.status-off {
    color: #6c757d;
}

.temperature-display {
    display: flex;
    gap: 20px;
    margin: 10px 0;
    font-size: 18px;
    font-weight: bold;
}

.current-temp {
    color: #007cba;
}

.target-temp {
    color: #28a745;
}

.thermostat-description {
    color: #666;
    margin: 10px 0 0 0;
    font-style: italic;
}

.forced-on-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    font-weight: bold;
}

.permission-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.permission-notice h3 {
    margin: 0 0 10px 0;
}

.thermostat-form {
    padding: 20px;
}

.override-section {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.override-section h4 {
    margin: 0 0 15px 0;
    color: #333;
}

.override-controls {
    display: flex;
    gap: 20px;
    align-items: center;
}

.override-controls label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
}

.temp-input {
    width: 80px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}

.time-input {
    width: 100px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}

.schedule-section {
    margin-bottom: 20px;
}

.schedule-section h4 {
    margin: 0 0 15px 0;
    color: #333;
}

.schedule-table-container {
    overflow-x: auto;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.schedule-table th,
.schedule-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.schedule-table th {
    background: #f8f9fa;
    font-weight: bold;
    color: #333;
}

.schedule-table .current-day {
    background: #e7f3ff;
}

.schedule-table .weekend-day {
    background: #f5f5f5;
}

.day-cell {
    font-weight: bold;
    min-width: 60px;
}

.time-select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-actions {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.schedule-readonly {
    padding: 20px;
    background: #f8f9fa;
}

.schedule-readonly h4 {
    margin: 0 0 15px 0;
    color: #333;
}

.schedule-summary {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.schedule-day {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.schedule-day:last-child {
    border-bottom: none;
}

.schedule-day.current {
    background: #e7f3ff;
    padding: 10px;
    border-radius: 4px;
    font-weight: bold;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    /* Profile Header */
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .member-info h2 {
        font-size: 24px;
    }

    /* Tables */
    .tab-table,
    .payments-table,
    .dlhms-table {
        font-size: 14px;
    }

    .tab-table th,
    .tab-table td,
    .payments-table th,
    .payments-table td,
    .dlhms-table th,
    .dlhms-table td {
        padding: 8px;
    }

    /* Grid Layouts */
    .quick-actions,
    .register-sections {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .materials-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .badges-grid,
    .equipment-grid {
        grid-template-columns: 1fr;
    }

    /* Event Cards */
    .event-card {
        width: calc(50% - 10px); /* Two cards per row on smaller screens */
    }

    /* Forms */
    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .status-form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* Member Items */
    .member-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .member-actions {
        justify-content: center;
    }

    /* Kiosk */
    .kiosk-input {
        width: 100%;
        max-width: 300px;
    }

    .kiosk-button {
        padding: 15px 30px;
        font-size: 20px;
    }

    /* Payment Options */
    .payment-option {
        flex-direction: column;
        text-align: center;
    }

    .action-buttons {
        flex-direction: column;
    }

    .button {
        width: 100%;
        margin: 5px 0;
    }

    /* Containers */
    .dlhms-container {
        padding: 0 10px;
    }

    .dlhms-member-profile,
    .dlhms-tab-management,
    .dlhms-cash-register,
    .dlhms-equipment,
    .dlhms-badges,
    .dlhms-news,
    .dlhms-payment-store,
    .dlhms-thermostat-control {
        margin: 10px 0;
    }

    .payment-success-container {
        margin: 10px;
        padding: 10px;
    }

    .success-message {
        padding: 20px;
    }

    /* Thermostat Controls */
    .status-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .override-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .override-controls label {
        justify-content: space-between;
    }

    .temperature-display {
        flex-direction: column;
        gap: 5px;
    }

    .schedule-table {
        font-size: 14px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 8px 4px;
    }

    .temp-input,
    .time-input,
    .time-select {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    /* Further mobile optimizations */
    .dlhms-section,
    .dlhms-header {
        padding: 15px;
    }

    .registration-form {
        padding: 20px;
    }

    .checkbox-group {
        grid-template-columns: 1fr;
    }

    .payment-methods {
        grid-template-columns: 1fr;
    }

    /* Event Cards */
    .event-card {
        width: 100%; /* One card per row on even smaller screens */
    }

    /* Thermostat Controls */
    .thermostat-header,
    .thermostat-form {
        padding: 15px;
    }

    .schedule-table-container {
        font-size: 12px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 6px 2px;
    }

    .temp-input,
    .time-input {
        width: 60px;
        font-size: 12px;
    }

    .time-select {
        font-size: 12px;
    }

    .kiosk-header h1 {
        font-size: 28px;
    }

    .kiosk-button {
        padding: 12px 24px;
        font-size: 18px;
    }
}

/* ========================================
   ELEMENTOR TABS STYLES - ALL TAB WIDGETS
   ======================================== */

/* Elementor Tabs - Universal Styling for All Tab Widgets */
.elementor-tabs ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

/* Higher specificity .elementor-kit-5s to override Elementor defaults */
.elementor-widget-tabs .elementor-tabs-wrapper,
.elementor-tabs .elementor-tabs-wrapper {
    display: flex !important;
    justify-content: space-between !important;
}

.elementor-widget-tabs .elementor-tabs-content-wrapper,
.elementor-tabs .elementor-tabs-content-wrapper {
    border: 2px solid #000000 !important;
    box-shadow: 10px 10px 0 #000000 !important;
}

/* Tab Titles - All States */
.elementor-tabs .elementor-tab-title,
.elementor-widget-tabs .elementor-tab-title,
.elementor-tab-title.elementor-tab-desktop-title {
    font-family: proxima-nova, "Arial Black", sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    border: none !important;
}

/* Active Tab Styling */
.elementor-tab-title.elementor-tab-desktop-title.elementor-active,
.elementor-tabs .elementor-tab-title.elementor-active,
.elementor-widget-tabs .elementor-tab-title.elementor-active {
    background-color: #ED202C !important;
    color: white !important;
    font-family: proxima-nova, "Arial Black", sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    border: 2px solid #000000 !important;
    border-bottom: none !important;
}

.elementor-tabs-wrapper,
.elementor-widget-tabs .elementor-tabs-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

.elementor-tabs-content-wrapper,
.elementor-widget-tabs .elementor-tabs-content-wrapper {
    border: 2px solid #000000 !important;
    border-color: #000000 !important;
    box-shadow: 10px 10px 0 #000000 !important;
    border-top: 2px solid #000000 !important;
}

/* Force font loading and fallbacks */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

/* Additional fallback styling */
.elementor-tab-title {
    font-family: proxima-nova, "Roboto", "Arial Black", sans-serif !important;
    font-weight: 900 !important;
}

/* Shop Tabs Container Layout */
.shop-tabs-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.shop-tabs-left-column {
    flex: 0 0 33%;
}

.shop-tabs-right-column {
    flex: 0 0 66%;
}

.shop-tabs-responsive-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border: none;
}

/* Mobile responsive - stack columns */
@media (max-width: 768px) {
    .shop-tabs-container {
        flex-direction: column;
        gap: 15px;
    }

    .shop-tabs-left-column,
    .shop-tabs-right-column {
        flex: 1 1 100%;
    }

    .elementor-tabs ul {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
}

/* ========================================
   ACCOUNTS MANAGEMENT BRUTALIST CARDS
   ======================================== */

/* Account Management Cards - Brutalist Style - SPECIFIC CARDS ONLY */
.dlhms-accounts .account-card,
.dlhms-accounts .search-result-item,
.dlhms-accounts .membership-status,
.dlhms-accounts .no-data,
.dlhms-accounts .member-overview,
.dlhms-accounts .financial-overview,
.dlhms-accounts .transaction-card,
.dlhms-accounts .info-card,
.dlhms-accounts .details-card {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    box-shadow: 10px 10px 0 #000000 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Account Overview Container - 2x2 Grid Layout */
.dlhms-accounts .account-overview-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Mobile responsive - single column on small screens */
@media (max-width: 768px) {
    .dlhms-accounts .account-overview-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
}

/* Exclude other containers and inner elements from brutalist styling */
.dlhms-accounts .member-info,
.dlhms-accounts .search-results {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Account titles should not have borders or shadows */
.dlhms-accounts .account-title {
    border: none !important;
    box-shadow: none !important;
}

/* Card Headers - Proxima Nova, All-caps, 900 Weight */
.dlhms-accounts .account-header h3,
.dlhms-accounts .account-header .account-title,
.dlhms-accounts .card-header h3,
.account-header h3,
.account-header .account-title {
    font-family: proxima-nova, "Arial Black", sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    background: var(--e-global-color-primary) !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 15px 20px !important;
}

/* Search Results - Remove ALL Borders and Shadows */
.dlhms-accounts .search-results {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

/* Override any global search-results styling */
.search-results {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Search Results Header */
.dlhms-accounts .search-results h4,
.search-results h4 {
    background: transparent !important;
    color: #333333 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}

/* Individual Search Result Items */
.dlhms-accounts .search-result-item,
.search-result-item {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    box-shadow: 10px 10px 0 #000000 !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
}

/* Card Content Areas - No borders or shadows for inner content */
.dlhms-accounts .member-info,
.dlhms-accounts .thermostat-card .member-info,
.dlhms-accounts .account-info,
.dlhms-accounts .financial-info {
    padding: 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Info Rows in Cards */
.dlhms-accounts .info-row,
.info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #eeeeee !important;
}

.dlhms-accounts .info-label,
.info-label {
    font-weight: bold !important;
    color: #333333 !important;
}

.dlhms-accounts .info-value,
.info-value {
    color: #666666 !important;
}

/* Transaction Tabs */
.dlhms-accounts .transactions-tabs,
.transactions-tabs {
    display: flex !important;
    background: #f8f9fa !important;
    border-bottom: 2px solid #000000 !important;
    padding: 10px;
}

.dlhms-accounts .tab-btn,
.tab-btn {
    background: var(--e-global-color-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-right: 1px solid #000000 !important;
    padding: 12px 20px !important;
    font-family: proxima-nova, "Arial Black", sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

.dlhms-accounts .tab-btn.active,
.tab-btn.active {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Transaction History Title */
.dlhms-accounts h4,
.dlhms-accounts .transaction-title,
#accounting-tab h4,
#tab-tab h4 {
    font-family: "Roboto Slab", serif !important;
    color: var(--e-global-color-primary) !important;
    font-weight: bold !important;
}

/* Fix White on White Text Issues */
.dlhms-accounts .info-value,
.dlhms-accounts .info-label,
.dlhms-accounts td,
.dlhms-accounts th,
.dlhms-accounts p,
.dlhms-accounts span,
.info-value,
.info-label {
    color: #000000 !important;
}

/* Balance Colors */
.dlhms-accounts .balance-negative,
.balance-negative {
    color: var(--e-global-color-primary) !important;
}

.dlhms-accounts .balance-positive,
.balance-positive {
    color: #28a745 !important;
}

.dlhms-accounts .balance-zero,
.balance-zero {
    color: #6c757d !important;
}

/* Membership Status Colors */
.dlhms-accounts .status-active,
.status-active {
    color: #28a745 !important;
    font-weight: bold !important;
}

.dlhms-accounts .status-expired,
.status-expired {
    color: var(--e-global-color-primary) !important;
    font-weight: bold !important;
}

.dlhms-accounts .status-inactive,
.status-inactive {
    color: #6c757d !important;
    font-weight: bold !important;
}

/* Accounts Management Specific Class Overrides */
.dlhms-accounts .account-overview-card,
.dlhms-accounts .financial-summary-card,
.dlhms-accounts .transaction-history-card {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    box-shadow: 10px 10px 0 #000000 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Rename thermostat classes to account classes for clarity */
.dlhms-accounts .account-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.dlhms-accounts .account-header {
    background: var(--e-global-color-primary) !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 15px 20px !important;
    border: none !important;
    box-shadow: none !important;
}

.dlhms-accounts .account-content {
    padding: 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ========================================
   MEMBER PROFILE DETAILED INFO STYLES
   ======================================== */

/* Info Grid Layout for Member Details */
.info-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: bold;
    color: #495057;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-label i {
    width: 16px;
    color: #6c757d;
}

.info-value {
    color: #212529;
    font-size: 14px;
    margin-left: 24px;
}

.info-value a {
    color: #dc3545 !important;
    text-decoration: none;
}

.info-value a:hover {
    text-decoration: underline;
}

/* Responsive adjustments for member details */
@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
        gap: 2px;
    }

    .info-value {
        margin-left: 0;
    }
}

/* Member Profile Grid Layout */
.dlhms-member-profile .brutalist-card__message > div[style*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

@media (max-width: 768px) {
    .dlhms-member-profile .brutalist-card__message > div[style*="grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* Emergency Contact Styling */
.emergency-contact {
    background: #fff5f5 !important;
    border: 1px solid #fed7d7 !important;
    border-left: 4px solid #e53e3e !important;
    padding: 15px !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
}

.emergency-contact h5 {
    color: #e53e3e !important;
    margin: 0 0 10px 0 !important;
}

/* ========================================
   COMPACT FORM STYLES
   ======================================== */

/* Form Grid Layouts */
.dlhms-form div[style*="grid"] {
    display: grid !important;
}

/* 2-Column Grid */
.dlhms-form div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

/* 3-Column Grid (City, State, Zip) */
.dlhms-form div[style*="grid-template-columns: 2fr 1fr 1fr"] {
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 20px !important;
}

/* Form Field Styling */
.form-field {
    display: flex !important;
    flex-direction: column !important;
}

.form-field label {
    display: block !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
    color: #495057 !important;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100% !important;
    padding: 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: #dc3545 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2) !important;
}

.form-field small {
    display: block !important;
    color: #666 !important;
    margin-top: 5px !important;
    font-size: 12px !important;
}

/* Section Headers */
.dlhms-form h4 {
    margin: 0 0 15px 0 !important;
    color: #495057 !important;
    border-bottom: 2px solid #dee2e6 !important;
    padding-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dlhms-form h4 i {
    color: #6c757d !important;
}

/* Emergency Contact Section */
.dlhms-form h4[style*="color: #dc3545"] {
    color: #dc3545 !important;
    border-bottom-color: #dc3545 !important;
}

.dlhms-form h4[style*="color: #dc3545"] i {
    color: #dc3545 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Stack all grid columns on mobile */
    .dlhms-form div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Reduce spacing on mobile */
    .dlhms-form > div {
        margin-bottom: 20px !important;
    }

    .form-field input,
    .form-field textarea,
    .form-field select {
        padding: 10px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

@media (max-width: 480px) {
    /* Even more compact on very small screens */
    .dlhms-form div[style*="gap: 20px"] {
        gap: 10px !important;
    }

    .dlhms-form > div {
        margin-bottom: 15px !important;
    }
}

/* ========================================
   ACCOUNTS MANAGEMENT COMPACT LAYOUT
   ======================================== */

/* Compact Grid Layout for Account Overview */
.account-overview-container.compact-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Account Information spans full width on top */
.account-overview-container.compact-grid .account-card:first-child {
    grid-column: 1 / -1 !important;
}

/* Personal Information spans full width if present */
.account-overview-container.compact-grid .account-card:has(.info-row.full-width) {
    grid-column: 1 / -1 !important;
}

/* Enhanced Member Info Layout */
.member-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    align-items: start !important;
}

/* Full width info rows */
.member-info .info-row.full-width {
    grid-column: 1 / -1 !important;
}

/* Info row styling for compact layout */
.member-info .info-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #e9ecef !important;
}

.member-info .info-row:last-child {
    border-bottom: none !important;
}

/* Info labels and values */
.member-info .info-label {
    font-weight: bold !important;
    color: #495057 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.member-info .info-value {
    color: #212529 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.member-info .info-value a {
    color: #dc3545 !important;
    text-decoration: none !important;
}

.member-info .info-value a:hover {
    text-decoration: underline !important;
}

/* Status indicators */
.status-active {
    color: #28a745 !important;
    font-weight: bold !important;
}

.status-expired {
    color: #dc3545 !important;
    font-weight: bold !important;
}

/* Emergency contact highlighting */
.member-info .info-row:has(.info-label:contains("Emergency")) {
    background: #fff5f5 !important;
    border: 1px solid #fed7d7 !important;
    border-radius: 4px !important;
    padding: 10px !important;
    margin: 5px 0 !important;
}

/* Personal information styling */
.member-info .info-value div[style*="background: #f8f9fa"] {
    background: #f8f9fa !important;
    padding: 10px !important;
    border-radius: 4px !important;
    margin-top: 5px !important;
    border-left: 3px solid #dc3545 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .account-overview-container.compact-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .member-info {
        gap: 10px !important;
    }

    .member-info .info-row {
        padding: 6px 0 !important;
    }

    .member-info .info-label {
        font-size: 12px !important;
    }

    .member-info .info-value {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .account-overview-container.compact-grid {
        gap: 10px !important;
    }

    .member-info {
        gap: 8px !important;
    }
}

/* Account Card Enhancements for Compact Layout */
.account-overview-container.compact-grid .account-card {
    min-height: auto !important;
    height: fit-content !important;
}

.account-overview-container.compact-grid .account-header {
    padding: 15px 20px 10px 20px !important;
}

.account-overview-container.compact-grid .member-info {
    padding: 10px 20px 20px 20px !important;
}

/* Balance indicators */
.balance-positive {
    color: #28a745 !important;
    font-weight: bold !important;
}

.balance-negative {
    color: #dc3545 !important;
    font-weight: bold !important;
}

.balance-zero {
    color: #6c757d !important;
}

/* Social Media & Website Links */
.member-info .info-value a[href*="instagram"] {
    color: #E4405F !important;
}

.member-info .info-value a[href*="facebook"] {
    color: #1877F2 !important;
}

.member-info .info-value a[href*="http"] i.fas.fa-external-link-alt {
    color: #6c757d !important;
    margin-right: 5px !important;
}

.member-info .info-value a i.fab {
    margin-right: 5px !important;
    font-size: 16px !important;
}

/* Rate and Tab Information Styling */
.member-info .info-value div[style*="background: #fff3cd"] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107 !important;
}

.member-info .info-value div[style*="background: #e7f3ff"] {
    background: #e7f3ff !important;
    border-left: 3px solid #007bff !important;
}

.member-info .info-value div[style*="background: #fff5f5"] {
    background: #fff5f5 !important;
    border-left: 3px solid #dc3545 !important;
}

/* Recurring Payment Indicator */
.member-info .info-value i.fa-sync-alt {
    margin-right: 5px !important;
    animation: spin 2s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Card Layout for Additional Sections */
.account-overview-container.compact-grid .account-card:has(.info-label:contains("Online Presence")),
.account-overview-container.compact-grid .account-card:has(.info-label:contains("Rates & Tab")),
.account-overview-container.compact-grid .account-card:has(.info-label:contains("Comments & Projects")) {
    grid-column: 1 / -1 !important;
}

/* Compact display for rates and financial info */
.member-info .info-row:has(.info-label:contains("Monthly Rate")),
.member-info .info-row:has(.info-label:contains("Tab Limit")) {
    background: #f8f9fa !important;
    padding: 10px !important;
    border-radius: 4px !important;
    margin: 5px 0 !important;
}

/* Non-lapsable indicator */
.member-info .info-value small[style*="color: #28a745"] {
    background: #d4edda !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-weight: bold !important;
}

/* Admin comments styling */
.member-info .info-row:has(.info-label:contains("Admin Comments")) {
    border: 2px solid #dc3545 !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    background: #fff5f5 !important;
}

/* Current projects styling */
.member-info .info-row:has(.info-label:contains("Current Projects")) {
    border: 2px solid #007bff !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    background: #e7f3ff !important;
}

/* ========================================
   MODERN ENHANCED STYLES
   ======================================== */

/* Font Awesome Icon Colors - Modern Red/Grey Theme */
.text-success { color: #dc3545 !important; }
.text-danger { color: #dc3545 !important; }
.text-muted { color: #6c757d !important; }
.text-primary { color: #dc3545 !important; }
.text-info { color: #6c757d !important; }
.text-warning { color: #ffc107 !important; }

/* Modern Outline Buttons */
.btn-outline {
    background: transparent;
    border: 5px solid #dc3545;
    color: #dc3545;
    transition: all 0.2s ease;
    font-weight: 500;
}

.btn-outline:hover {
    background: #dc3545;
    border: 5px solid #dc3545;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* Enhanced Typography */
h1, h2, h3, h4, h5, h6 {
    color: #495057;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Enhanced Card Styles */
.card, .dlhms-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.card:hover, .dlhms-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Enhanced Input Focus States */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

/* Modern Badge Styles */
.badge {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary { background: #dc3545; color: white; }
.badge-secondary { background: #6c757d; color: white; }
.badge-success { background: #dc3545; color: white; }
.badge-danger { background: #dc3545; color: white; }
.badge-warning { background: #ffc107; color: #212529; }
.badge-info { background: #6c757d; color: white; }

/* Enhanced Table Styles */
.table-modern {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}

.table-modern th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.875rem;
    padding: 1rem;
    border: none;
}

.table-modern td {
    padding: 1rem;
    border-bottom: 1px solid #f1f3f4;
    color: #495057;
}

.table-modern tr:hover {
    background: #f8f9fa;
}

/* Enhanced Alert Styles */
.alert-modern {
    border-radius: 12px;
    border: none;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.alert-modern.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-left: 4px solid #28a745;
}

.alert-modern.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.alert-modern.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border-left: 4px solid #ffc107;
}

.alert-modern.alert-info {
    background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
    color: #383d41;
    border-left: 4px solid #6c757d;
}

/* ========================================
   THERMOSTAT CONTROL STYLES - COMPACT
   ======================================== */

/* Compact System Status */
.system-status-compact {
    background: #333;
    color: white;
    padding: 8px 15px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
}

/* Compact Thermostat Container */
.thermostat-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 15px;
    margin: 10px 0;
}

/* Individual Thermostat Card - Compact */
.thermostat-card {
    background: #ff4444;
    border: 2px solid #cc0000;
    border-radius: 8px;
    padding: 12px;
    color: white;
    font-family: Arial, sans-serif;
}

.thermostat-header {
    text-align: center;
    margin-bottom: 10px;
    background: #cc0000;
    padding: 10px;
    border-radius: 5px;
}

.thermostat-name {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 5px 0;
    color: white;
}

.thermostat-temp {
    font-size: 18px;
    margin: 0 0 5px 0;
    color: white;
}

.thermostat-desc {
    font-size: 12px;
    margin: 0 0 8px 0;
    font-style: italic;
    color: white;
}

/* Compact Override Controls */
.override-controls {
    text-align: center;
    margin: 8px 0;
    font-size: 14px;
}

.override-controls input[type="number"] {
    width: 40px;
    padding: 2px;
    margin: 0 3px;
    text-align: center;
}

/* Compact Schedule Table */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 8px 0;
}

.schedule-table th {
    background: #cc0000;
    color: white;
    padding: 4px 2px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
}

.schedule-table td {
    padding: 2px;
    text-align: center;
    border: 1px solid #cc0000;
}

.schedule-table .day-label {
    background: #ff6666;
    font-weight: bold;
    width: 40px;
    padding: 4px 2px;
}

/* Compact Input Fields with Aligned °F Labels */
.temp-input-group {
    display: inline-flex;
    align-items: center;
    margin: 1px;
}

.temp-input-group input {
    width: 45px;
    padding: 3px;
    text-align: center;
    border: 1px solid #ccc;
    margin-right: 2px;
    font-size: 12px;
}

.temp-input-group .degree-label {
    font-size: 10px;
    color: white;
    margin-left: 1px;
    vertical-align: middle;
}

.time-input-group {
    display: inline-flex;
    align-items: center;
    margin: 1px;
}

.time-input-group input {
    width: 55px;
    padding: 3px;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 12px;
}

/* Compact Save Button */
.save-button {
    background: #006600;
    color: white;
    border: 1px solid #004400;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    margin: 8px auto;
    display: block;
}

.save-button:hover {
    background: #180e75;
}

/* ========================================
   RFID MANAGEMENT WIDGET STYLES
   ======================================== */

/* RFID Management Container */
.dlhms-rfid-management {
    max-width: 1200px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.rfid-header {
    background: #8B0000;
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.rfid-header h2 {
    margin: 0 0 10px 0;
    color: white;
}

.rfid-section {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.rfid-section h3 {
    margin-top: 0;
    color: #8B0000;
}

/* RFID Form Styles */
.rfid-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.rfid-form .form-group {
    flex: 1;
}

.rfid-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.rfid-form input, .rfid-form select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.rfid-form small {
    color: #666;
    font-size: 12px;
}

/* RFID Button Styles */
.dlhms-btn {
    background: #8B0000;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
    text-decoration: none;
    display: inline-block;
}

.dlhms-btn:hover {
    background: #660000;
}

.dlhms-btn.secondary {
    background: #666;
}

.dlhms-btn.secondary:hover {
    background: #444;
}

/* User Search Suggestions */
.suggestions-dropdown {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.suggestion-item:hover {
    background: #f0f0f0;
}

/* Status Messages */
.status-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.status-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* RFID Assignment Sections */
.assign-new-rfid-section,
.assign-rfid-section {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.assign-new-rfid-section h4,
.assign-rfid-section h4 {
    color: #333;
    margin-bottom: 15px;
}

.assign-new-rfid-section .form-row,
.assign-rfid-section .form-row {
    margin-bottom: 15px;
}

.assign-new-rfid-section label,
.assign-rfid-section label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.assign-new-rfid-section input[type="text"],
.assign-new-rfid-section select,
.assign-rfid-section input[type="text"],
.assign-rfid-section select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.assign-new-rfid-section small,
.assign-rfid-section small {
    color: #666;
    font-size: 12px;
    display: block;
    margin-top: 5px;
}

.assign-new-rfid-section .alert-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Equipment Certification Management */
.certification-management {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.equipment-certification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.equipment-cert-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.equipment-cert-item:hover {
    border-color: var(--e-global-color-primary);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.equipment-cert-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
}

.equipment-cert-label input[type="checkbox"] {
    margin: 0.25rem 0 0 0;
    transform: scale(1.2);
}

.equipment-info {
    flex: 1;
}

.equipment-info strong {
    color: #333;
    font-size: 1rem;
    line-height: 1.3;
}

.equipment-info small {
    color: #6c757d;
    font-size: 0.875rem;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .equipment-certification-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .certification-management {
        padding: 1rem;
    }
}

/* RFID Tables */
.rfid-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.rfid-table th, .rfid-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.rfid-table th {
    background: #f8f9fa;
    font-weight: bold;
}

.rfid-table tr:nth-child(even) {
    background: #f9f9f9;
}

/* Access Hour Badges */
.access-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.access-24hr { background: #28a745; color: white; }
.access-8to8 { background: #17a2b8; color: white; }
.access-6to10 { background: #ffc107; color: black; }
.access-noon-8 { background: #fd7e14; color: white; }
.access-6to12 { background: #6f42c1; color: white; }
.access-blocked { background: #dc3545; color: white; }

/* Test Form */
.test-form {
    display: flex;
    align-items: end;
    gap: 10px;
}

.test-form .form-group {
    flex: 1;
}

/* Section Actions */
.section-actions {
    margin-bottom: 15px;
}

/* Responsive Design for RFID Management */
@media (max-width: 768px) {
    .rfid-form .form-row {
        flex-direction: column;
    }

    .test-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ========================================
   ACCOUNTING MANAGEMENT STYLES
   ======================================== */

.dlhms-accounting {
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.dlhms-accounting h2 {
    background: #6c757d;
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin: 0 0 2rem;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 300;
}

.transaction-form,
.yearly-totals,
.year-transactions {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.transaction-form h3,
.yearly-totals h3,
.year-transactions h3 {
    margin: 0 0 1rem;
    color: #2d3748;
    font-size: 1.5rem;
}

.accounting-form {
    display: grid;
    gap: 1rem;
}

.accounting-form .form-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: center;
}

.accounting-form .form-row label {
    font-weight: 600;
    color: #4a5568;
}

.accounting-form .form-row input,
.accounting-form .form-row select {
    padding: 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
}

.accounting-form .form-row input:focus,
.accounting-form .form-row select:focus {
    outline: none;
    border-color: #667eea;
}

.form-section {
    background: #f7fafc;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.form-section h4 {
    margin: 0 0 1rem;
    color: #2d3748;
}

.submit-btn {
    background: #667eea;
    color: white;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.submit-btn:hover {
    background: #5a67d8;
    transform: translateY(-1px);
}

.totals-table,
.transactions-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.totals-table th,
.transactions-table th {
    background: #f7fafc;
    color: #4a5568;
    font-weight: 600;
    padding: 0.75rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.totals-table td,
.transactions-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.totals-table tr:hover,
.transactions-table tr:hover {
    background: #f7fafc;
}

.positive {
    background: #f0fff4;
}

.negative {
    background: #fff5f5;
}

.neutral {
    background: #f7fafc;
}

.summary-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.expenses,
.revenues {
    background: #f7fafc;
    padding: 1rem;
    border-radius: 8px;
}

.expenses h4 {
    color:#ed202c;
}

.revenues h4 {
    color: #38a169;
}

/* ========================================
   ACCOUNTS MANAGEMENT STYLES
   ======================================== */

.dlhms-accounts {
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.accounts-header {
    background: #6c757d;
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    text-align: center;
}

.accounts-header h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 300;
}

.accounts-header p {
    margin: 0.5rem 0 0;
    opacity: 0.9;
}

.search-section {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.search-form {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-input {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
}

.search-input:focus {
    outline: none;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.member-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-left: 4px solid #667eea;
}

.member-card h3 {
    margin: 0 0 1rem;
    color: #2d3748;
    font-size: 1.25rem;
}

.member-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label {
    font-weight: 600;
    color: #4a5568;
}

.info-value {
    color: #2d3748;
}

.balance-positive {
    color: #38a169;
    font-weight: bold;
}

.balance-negative {
    color:#ed202c;
    font-weight: bold;
}

.balance-zero {
    color: #718096;
}

.status-active {
    color: #38a169;
    font-weight: bold;
}

.status-expired {
    color:#ed202c;
    font-weight: bold;
}

.transactions-section {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.transactions-tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 1rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    color: #718096;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

.transaction-table {
    width: 100%;
    border-collapse: collapse;
}

.transaction-table th {
    text-align: left;
    padding: 0.75rem;
    background: #f7fafc;
    color: #4a5568;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0;
}

.transaction-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.transaction-table tr:hover {
    background: #f7fafc;
}

.amount-positive {
    color: #38a169;
    font-weight: bold;
}

.amount-negative {
    color:#ed202c;
    font-weight: bold;
}

.search-results {
    margin-top: 1rem;
}

.search-result-item {
    background: #f7fafc;
    padding: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.no-data {
    text-align: center;
    color: #718096;
    padding: 2rem;
    font-style: italic;
}

/* ========================================
   MODERN FORM STYLING - GLOBAL
   ======================================== */

/* Apply modern styling to ALL existing form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea,
.search-input,
.form-control,
.dlhms-input {
    height: 60px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    font-size: 18px;
    font-family: Arial, sans-serif;
    color: #212121;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.search-input:focus,
.form-control:focus,
.dlhms-input:focus {
    outline: none;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

input::placeholder,
textarea::placeholder,
.search-input::placeholder {
    color: #bbb;
    font-weight: 300;
}

/* Clean DLHMS Button System - No Conflicts */
.dlhms-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #dc3545;
    background-image: none !important;
    border: 2px solid #000;
    border-radius: 8px;
    font-family: proxima-nova, Sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: white;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    min-width: 120px;
    box-sizing: border-box;
    text-align: center;
}

.dlhms-button:hover {
    background: #000;
    background-image: none !important;
    border: 2px solid white;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dlhms-button-small {
    padding: 8px 16px;
    font-size: 12px;
    min-height: 36px;
    min-width: 80px;
}

.dlhms-button-large {
    padding: 16px 32px;
    font-size: 16px;
    min-height: 52px;
    min-width: 140px;
}

/* Button with Icon */
.dlhms-button i {
    margin-right: 8px;
}

.dlhms-button i:only-child {
    margin-right: 0;
}

/* Equipment Management System Styles */
.equipment-cert-title {
    font-family: "proxima-nova", Sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 28px;
    color: var(--e-global-color-primary, #dc3545);
    margin: 0;
}

.equipment-cert-subtitle {
    font-family: proxima-nova, Sans-serif;
    color: #666;
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    gap: 0;
    margin: 20px 0;
    border-bottom: 3px solid #000;
}

.tab-btn {
    background: #f5f5f5;
    border: 3px solid #000;
    border-bottom: none;
    padding: 15px 25px;
    font-family: "proxima-nova", Sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    transition: all 0.2s ease;
    margin-right: -3px;
}

.tab-btn:hover {
    background: #e9ecef;
    color: #000;
}

.tab-btn.active {
    background: var(--e-global-color-primary, #dc3545);
    color: white;
    border-bottom: 3px solid var(--e-global-color-primary, #dc3545);
    margin-bottom: -3px;
}

.tab-content {
    margin-top: 20px;
}

/* Equipment Grid Layout */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.equipment-item {
    background: white;
    border: 2px solid #000;
    padding: 15px;
}

.equipment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.equipment-name {
    font-family: "proxima-nova", Sans-serif;
    font-weight: 900;
    color: #000;
    margin: 0;
    font-size: 18px;
}

.equipment-status {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid #000;
    font-family: "proxima-nova", Sans-serif;
}

.equipment-status.status-working {
    background: #d4edda;
    color: #155724;
}

.equipment-status.status-maintenance {
    background: #fff3cd;
    color: #856404;
}

.equipment-status.status-broken {
    background: #f8d7da;
    color: #721c24;
}

.equipment-status.status-retired {
    background: #e2e3e5;
    color: #383d41;
}

.equipment-details {
    margin: 8px 0;
    color: #495057;
    font-size: 14px;
    line-height: 1.4;
}

.equipment-meta {
    display: flex;
    gap: 15px;
    margin: 10px 0;
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
    font-size: 12px;
    color: #666;
}

.equipment-controls {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #000;
}

.equipment-controls .form-row {
    align-items: end;
    gap: 10px;
}

.equipment-controls .form-group {
    margin-bottom: 0;
}

.equipment-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.equipment-actions .btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border: 3px solid #000 !important;
    font-family: "proxima-nova", Sans-serif !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #000 !important;
    color: white !important;
    min-width: auto;
}

.equipment-actions .btn:hover {
    background: var(--e-global-color-primary, #ed202c) !important;
    color: white !important;
    border: 3px solid #000 !important;
}

.equipment-actions .btn-danger {
    background: #000 !important;
    color: white !important;
}

.equipment-actions .btn-danger:hover {
    background: var(--e-global-color-primary, #ed202c) !important;
    color: white !important;
}

/* Responsive Design for Equipment Management */
@media (max-width: 768px) {
    .tab-navigation {
        flex-direction: column;
    }

    .tab-btn {
        margin-right: 0;
        margin-bottom: -3px;
        border-bottom: 3px solid #000;
    }

    .tab-btn.active {
        margin-bottom: 0;
    }

    .equipment-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .equipment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .equipment-meta {
        flex-direction: column;
        gap: 5px;
    }

    .equipment-controls .form-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Equipment Sessions Styles */
.sessions-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.session-stat-card {
    background: white;
    border: 3px solid #000;
    padding: 15px;
    text-align: center;
}

.session-stat-number {
    font-size: 24px;
    font-weight: 900;
    color: var(--e-global-color-primary, #ed202c);
    font-family: "proxima-nova", Sans-serif;
}

.session-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: #666;
    margin-top: 5px;
}

.sessions-table {
    width: 100%;
    border-collapse: collapse;
    border: 3px solid #000;
    background: white;
    margin-bottom: 20px;
}

.sessions-table th {
    background: #000;
    color: white;
    padding: 8px 6px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    border: 1px solid #000;
    font-family: "proxima-nova", Sans-serif;
}

.sessions-table td {
    padding: 6px;
    border: 1px solid #000;
    text-align: center;
    background: white;
    color: #000;
    font-size: 12px;
}

.session-active {
    background: #d4edda !important;
    font-weight: bold;
}

.session-fee {
    font-weight: bold;
    color: var(--e-global-color-primary, #ed202c);
}

.session-duration {
    font-family: monospace;
    font-weight: bold;
}

/* Sessions Filter Buttons */
.sessions-filters .btn-primary,
.sessions-filters .btn-secondary {
    background: #000 !important;
    color: white !important;
    border: 3px solid #000 !important;
    font-family: "proxima-nova", Sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-size: 12px !important;
}

.sessions-filters .btn-primary:hover,
.sessions-filters .btn-secondary:hover {
    background: var(--e-global-color-primary, #ed202c) !important;
    color: white !important;
    border: 3px solid #000 !important;
}

.sessions-filters .btn-secondary {
    background: #666 !important;
    border: 3px solid #666 !important;
}

.sessions-filters .btn-secondary:hover {
    background: var(--e-global-color-primary, #ed202c) !important;
    border: 3px solid #000 !important;
}

.search-result-text {
    font-family: proxima-nova, Sans-serif;
}

.search-result-name {
    color: #333;
}

.search-result-details {
    color: #666;
}

.equipment-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: proxima-nova, Sans-serif;
    table-layout: fixed;
}

.equipment-table th:nth-child(1) { width: 8%; }  /* Certified checkbox */
.equipment-table th:nth-child(2) { width: 20%; } /* Equipment */
.equipment-table th:nth-child(3) { width: 10%; } /* Shop */
.equipment-table th:nth-child(4) { width: 25%; } /* Training Required - narrower */
.equipment-table th:nth-child(5) { width: 12%; } /* Cert Expires */
.equipment-table th:nth-child(6) { width: 25%; } /* Current Status - wider */

.equipment-table th {
    background: #f8f9fa;
    color: #495057;
    padding: 12px;
    font-family: proxima-nova, Sans-serif;
    font-weight: 900;
    border-bottom: 2px solid #dee2e6;
}

.equipment-table td {
    padding: 12px;
    font-family: proxima-nova, Sans-serif;
    color: #333;
    background: white;
    border-bottom: 1px solid #dee2e6;
}

.equipment-table td.training-desc {
    font-size: 0.9em;
    color: #666;
}

.equipment-table td.center {
    text-align: center;
}

.equipment-table .no-data {
    text-align: center;
    color: #666;
    padding: 20px;
    background: white;
}

.equipment-table .status-details {
    color: #666;
}

.table-overflow {
    overflow-x: auto;
}

.form-actions {
    margin-top: 20px;
    text-align: center;
}

/* Primary buttons - styles now handled by universal button classes above */

/* Success buttons */
/* Success buttons - styles now handled by universal button classes above */

/* Danger buttons (red) */
.btn-danger,
.dlhms-btn-danger {
    background: #FF5252;
}

.btn-danger:hover,
.dlhms-btn-danger:hover {
    background: #f44336;
}

/* Modern search forms */
.search-form,
.dlhms-search-form {
    display: flex;
    gap: 0;
    align-items: center;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.search-form:focus-within,
.dlhms-search-form:focus-within {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* Modern Form Container */
.dlhms-form-container {
    font-family: Arial, sans-serif;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 2rem;
    margin: 1rem 0;
}

/* Modern Form Groups */
.dlhms-form-group {
    position: relative;
    margin-bottom: 1.5rem;
    height: 60px;
    display: flex;
    align-items: center;
}

/* Modern Input Styling */
.dlhms-input {
    width: 100%;
    height: 60px;
    background: white;
    border: none;
    border-radius: 8px;
    padding: 20px;
    font-size: 18px;
    font-family: Arial, sans-serif;
    color: #212121;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.dlhms-input:focus {
    outline: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.dlhms-input::placeholder {
    color: #bbb;
    font-weight: 300;
}

/* Modern Select Styling */
.dlhms-select {
    width: 100%;
    height: 60px;
    background: white;
    border: none;
    border-radius: 8px;
    padding: 20px;
    font-size: 18px;
    font-family: "Roboto Slab", sans-serif;
    color: #212121;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23666' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 60px;
}

.dlhms-select:focus {
    outline: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* Modern Button Styling */
.dlhms-btn {
    height: 60px;
    padding: 0 2rem;
    background: #E0E0E0;
    border: none;
    border-radius: 8px;
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: white;
    cursor: pointer;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.dlhms-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* DLHMS button styles now handled by universal button classes above */

.dlhms-btn-danger {
    background: #FF5252;
}

.dlhms-btn-danger:hover {
    background: #f44336;
}

/* Search Form Styling */
.dlhms-search-form {
    display: flex;
    gap: 0;
    align-items: center;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.dlhms-search-form:focus-within {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.dlhms-search-input {
    flex: 1;
    height: 60px;
    border: none;
    padding: 20px;
    font-size: 18px;
    font-family: "Roboto Slab", sans-serif;
    color: #212121;
    background: transparent;
}

.dlhms-search-input:focus {
    outline: none;
}

.dlhms-search-input::placeholder {
    color: #bbb;
    font-weight: 300;
}

.dlhms-search-btn {
    width: 60px;
    height: 60px;
    background: #dc3545;
    border: 2px solid #000;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: proxima-nova, Sans-serif;
    font-weight: 900;
}

.dlhms-search-btn:hover {
    background: #000;
    border-color: white;
    color: white;
}

/* Button Animation */
@keyframes dlhms-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.dlhms-btn-animated {
    animation: dlhms-pulse 2s infinite;
}

/* ========================================
   MODERN TABLE STYLING
   ======================================== */

/* Apply modern styling to ALL tables */
table,
.dlhms-table,
.transaction-table,
.totals-table,
.transactions-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    background: #f8f9fa;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Table headers */
table th,
.dlhms-table th,
.transaction-table th,
.totals-table th,
.transactions-table th {
    padding: 15px;
    background-color: #f8f9fa;
    color: #fff;
    text-align: left;
    font-family: "Roboto Slab", sans-serif;
    font-weight: 500;
    border: none;
}

/* Table cells */
table td,
.dlhms-table td,
.transaction-table td,
.totals-table td,
.transactions-table td {
    padding: 15px;
    background-color: rgba(255,255,255,0.2);
    color: #fff;
    border: none;
    position: relative;
    font-family: "Roboto Slab", sans-serif;
}

/* Row hover effects */
table tbody tr:hover,
.dlhms-table tbody tr:hover,
.transaction-table tbody tr:hover,
.totals-table tbody tr:hover,
.transactions-table tbody tr:hover {
    background-color: rgba(255,255,255,0.3);
}

/* Column hover effects */
table tbody td:hover::before,
.dlhms-table tbody td:hover::before,
.transaction-table tbody td:hover::before,
.totals-table tbody td:hover::before,
.transactions-table tbody td:hover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -9999px;
    bottom: -9999px;
    background-color: rgba(255,255,255,0.2);
    z-index: -1;
}

/* Override any existing table styling */
table tbody tr,
.dlhms-table tbody tr,
.transaction-table tbody tr,
.totals-table tbody tr,
.transactions-table tbody tr {
    background: transparent !important;
}

/* Ensure text is readable on gradient background */
table,
.dlhms-table,
.transaction-table,
.totals-table,
.transactions-table {
    color: #fff;
}

/* Special styling for alternating rows if needed */
table tbody tr:nth-child(even),
.dlhms-table tbody tr:nth-child(even),
.transaction-table tbody tr:nth-child(even),
.totals-table tbody tr:nth-child(even),
.transactions-table tbody tr:nth-child(even) {
    background-color: rgba(255,255,255,0.1);
}

table tbody tr:nth-child(odd),
.dlhms-table tbody tr:nth-child(odd),
.transaction-table tbody tr:nth-child(odd),
.totals-table tbody tr:nth-child(odd),
.transactions-table tbody tr:nth-child(odd) {
    background-color: rgba(255,255,255,0.05);
}

/* Responsive for Accounting and Accounts */
@media (max-width: 768px) {
    .accounting-form .form-row {
        grid-template-columns: 1fr;
    }

    .search-form {
        flex-direction: column;
    }

    .search-result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .summary-totals {
        grid-template-columns: 1fr;
    }

    .dlhms-btn {
        width: 100%;
    }

    .dlhms-search-form {
        flex-direction: column;
    }

    .dlhms-search-btn {
        width: 100%;
        border-radius: 0 0 8px 8px;
    }
}

/* ===== EVENTS CARDS WIDGET STYLES ===== */
.events-widget-wrapper {
    margin-bottom: 20px;
}

.events-controls-container {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.events-search-input {
    flex: 3;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    background: white;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.events-search-input:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 0 2px rgba(0,124,186,0.2);
}

.type-filter-select {
    flex: 0 0 auto;
    width: 120px;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    background: white;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.type-filter-select:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 0 2px rgba(0,124,186,0.2);
}

.show-past-btn {
    flex: 0 0 auto;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    background: #dc3545;
    border: 2px solid #000;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    white-space: nowrap;
}

.show-past-btn:hover {
    background: #000;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.show-past-btn:active {
    transform: translateY(0);
}

.no-search-results,
.no-events-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    background: #f9f9f9;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #e0e0e0;
}

.no-search-results p,
.no-events-message p {
    margin: 5px 0;
    font-size: 16px;
}

.no-search-results p:first-child,
.no-events-message p:first-child {
    font-weight: bold;
    color: #333;
}

.no-search-results small,
.no-events-message small {
    color: #888;
}

.event-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    max-width: 1200px; /* Prevent excessive stretching */
}

.event-card {
    width: 100%;
    max-width: 400px; /* Prevent cards from getting too wide */
    justify-self: start; /* Left-align cards */
    border: 2px solid #000;
    background-color: #fff;
    box-shadow: 10px 10px 0 #000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 0;
}

/* Brutalist card header */
.brutalist-card__header {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.brutalist-card__alert {
    font-weight: 900;
    color: #fff;
    font-size: 1.5rem;
    text-transform: uppercase;
    background-color: #ed202c;
    padding: 0.5rem 1rem;
    width: 100%;
    letter-spacing: 2px;
    margin: 0;
}

.event-image-container {
    position: relative;
    width: 100%;
    height: 200px !important;

}

.brutalist-card__image {
    width: 100%;
    min-height: 200px;
    max-height: 200px;
    background-size: cover;
    background-position: center;
    display: block;
    object-fit: cover;
}

.event-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

.event-image.no-image {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-image-placeholder {
    color: #999;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.event-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    border-radius: 0;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
}

.event-status-badge.today {
    background: #28a745;
    color: white;
}

.event-status-badge.canceled {
    background: #dc3545;
    color: white;
}

.brutalist-card__message {
    margin-top: 1rem;
    color: #000;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0 1.5rem 1rem;
    font-weight: 600;
    flex-grow: 1;
}

.event-details {
    padding: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.event-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px 0;
    color: #000;
    line-height: 1.3;
}

.event-date {
    color: #000;
    font-size: 14px;
    margin: 0 0 8px 0;
    font-weight: normal;
}

.event-organizer {
    color: #666;
    font-size: 12px;
    margin: 0 0 8px 0;
    font-style: italic;
}

.event-description {
    color: #000;
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.event-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
}

.event-cost {
    color: #000;
    font-weight: bold;
}

.event-cost.free {
    color: #28a745;
}

.event-capacity {
    color: #666;
}

.brutalist-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1rem 1rem 1rem 1rem;
    border-top: 2px solid #000;
}

/* Brutalist button styles now handled by universal button classes above */
.brutalist-card__button {
    display: block;
    width: 80%;
    max-width: 200px;
    margin: 0 auto 1rem auto;
    overflow: hidden;
    text-decoration: none;
    box-shadow: none;
}

.brutalist-card__button--read {
    background-color: #000;
    color: #fff;
}

.brutalist-card__button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: all 0.6s;
}

.brutalist-card__button:hover::before {
    left: 100%;
}

.brutalist-card__button:hover {
    background-color: #333;
    transform: scale(1.05);
}

.brutalist-card__button--read:hover {
    background-color: #333;
    color: #fff;
}

.brutalist-card__button:active {
    transform: scale(0.95);
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.pagination-btn:hover {
    background: #f8f9fa;
    border-color: #007cba;
    color: #007cba;
}

.pagination-btn.active {
    background: #007cba;
    border-color: #007cba;
    color: white;
    font-weight: bold;
}

.pagination-dots {
    padding: 8px 4px;
    color: #666;
}

/* ===== SINGLE EVENT DISPLAY STYLES ===== */
.single-event-brutalist-card {
    max-width: 1400px;
    margin: 20px auto;
    background: #f5f5f5;
    border: 3px solid #000;
    box-shadow: 8px 8px 0 #000;
    font-family: Arial, sans-serif;
}

.single-event-brutalist-card .brutalist-card__header {
    background:#ed202c;
    color: white;
    padding: 15px 20px;
    border-bottom: 3px solid #000;
}

.single-event-brutalist-card .brutalist-card__alert {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    letter-spacing: 2px;
}

.single-event-brutalist-card .event-status-alert {
    background:#ed202c;
    color: white;
    padding: 10px 20px;
    text-align: center;
    border-bottom: 3px solid #000;
}

.single-event-brutalist-card .event-status-alert.today {
    background:#ed202c;
}

.single-event-brutalist-card .event-status-alert.canceled {
    background: #666;
}

.single-event-brutalist-card .single-event-image-container {
    position: relative;
    background: #ddd;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #000;
}

.single-event-brutalist-card .single-event-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.single-event-brutalist-card .single-event-no-image {
    background: #ddd;
    min-height: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-event-brutalist-card .no-image-placeholder {
    font-size: 18px;
    font-weight: bold;
    color: #999;
    letter-spacing: 2px;
}

.single-event-brutalist-card .brutalist-card__message {
    padding: 30px;
}

.single-event-brutalist-card .event-title {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.single-event-brutalist-card .event-key-info {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.single-event-brutalist-card .event-info-box {
    padding: 12px 20px;
    border: 2px solid #000;
    font-weight: bold;
    min-width: 120px;
    text-align: center;
}

.single-event-brutalist-card .event-info-box.red-box {
    background:#ed202c;
    color: white;
}

.single-event-brutalist-card .event-organizer {
    font-style: italic;
    color: #666;
    margin: 15px 0;
    font-size: 16px;
}

.single-event-brutalist-card .teacher-link {
    color: #e53e3e;
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
}

.single-event-brutalist-card .teacher-link:hover {
    color: #000;
    text-decoration: underline;
}

.single-event-brutalist-card .event-description-preview {
    margin: 20px 0;
    line-height: 1.6;
    font-size: 16px;
}

.single-event-brutalist-card .event-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
    padding: 20px;
    background: #fff;
    border: 2px solid #000;
}

.single-event-brutalist-card .meta-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.single-event-brutalist-card .meta-label {
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
}

.single-event-brutalist-card .meta-value {
    font-size: 14px;
    font-weight: bold;
}

.single-event-brutalist-card .meta-value.today {
    color:#ed202c;
}

.single-event-brutalist-card .meta-value.canceled {
    color: #666;
}

.single-event-brutalist-card .brutalist-card__actions {
    padding: 30px;
    border-top: 3px solid #000;
    background: #fff;
}

.single-event-brutalist-card .brutalist-card__button {
    display: inline-block;
    padding: 15px 30px;
    background: #000;
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    margin: 10px 10px 10px 0;
    transition: all 0.2s;
    font-size: 14px;
}

.single-event-brutalist-card .brutalist-card__button:hover {
    background: white;
    color: black;
    box-shadow: 3px 3px 0 #000;
}

.single-event-brutalist-card .brutalist-card__button--register {
    background:#ed202c;
}

.single-event-brutalist-card .brutalist-card__button--register:hover {
    background: white;
    color:#ed202c;
    box-shadow: 3px 3px 0#ed202c;
}

.single-event-brutalist-card .brutalist-card__button--paypal {
    background: #0070ba;
}

.single-event-brutalist-card .brutalist-card__button--paypal:hover {
    background: white;
    color: #0070ba;
    box-shadow: 3px 3px 0 #0070ba;
}

.single-event-brutalist-card .brutalist-card__button--cancel {
    background: #666;
}

.single-event-brutalist-card .brutalist-card__button--cancel:hover {
    background: white;
    color: #666;
    box-shadow: 3px 3px 0 #666;
}

.single-event-brutalist-card .brutalist-card__button--admin {
    background: #38a169;
}

.single-event-brutalist-card .brutalist-card__button--admin:hover {
    background: white;
    color: #38a169;
    box-shadow: 3px 3px 0 #38a169;
}

.single-event-brutalist-card .login-required-box,
.single-event-brutalist-card .already-registered-box,
.single-event-brutalist-card .event-unavailable {
    background: #fff;
    border: 2px solid #000;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.single-event-brutalist-card .login-required-box h3,
.single-event-brutalist-card .already-registered-box h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
}

.single-event-brutalist-card .registration-form-free {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.single-event-brutalist-card .registration-notes-input {
    padding: 12px;
    border: 2px solid #000;
    font-size: 14px;
    background: white;
}

.single-event-brutalist-card .payment-section {
    margin: 20px 0;
}

.single-event-brutalist-card .admin-override-section {
    margin: 20px 0;
    padding: 20px;
    background: #f9f9f9;
    border: 2px solid #000;
}

.single-event-brutalist-card .admin-override-section h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
}

.single-event-brutalist-card .admin-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.single-event-brutalist-card .admin-form input {
    padding: 10px;
    border: 2px solid #000;
    font-size: 14px;
}

.single-event-brutalist-card .registration-success {
    background: #38a169;
    color: white;
    padding: 15px;
    margin: 15px 0;
    border: 2px solid #000;
    font-weight: bold;
    text-align: center;
}

/* Admin Registration Section */
.single-event-brutalist-card .admin-registration-section {
    background: #f9f9f9;
    border: 2px solid #000;
    padding: 20px;
    margin: 20px 0;
}

.single-event-brutalist-card .admin-registration-section h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #000;
}

.single-event-brutalist-card .admin-form-row {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.single-event-brutalist-card .user-search-container {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 2;
    min-width: 300px;
}

.single-event-brutalist-card .user-search-input {
    padding: 8px;
    border: 2px solid #000;
    font-size: 14px;
    width: 150px;
}

.single-event-brutalist-card .admin-user-select {
    padding: 8px;
    border: 2px solid #000;
    font-size: 14px;
    min-width: 200px;
    max-width: 300px;
}

.single-event-brutalist-card .clear-selection-btn {
    padding: 8px 12px;
    background: #666;
    color: white;
    border: 2px solid #000;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.single-event-brutalist-card .clear-selection-btn:hover {
    background: #000;
}

.single-event-brutalist-card .admin-payment-input {
    padding: 8px;
    border: 2px solid #000;
    font-size: 14px;
    width: 100px;
}

.single-event-brutalist-card .admin-notes-input {
    padding: 8px;
    border: 2px solid #000;
    font-size: 14px;
    width: 200px;
}

.single-event-brutalist-card .registration-error {
    background:#ed202c;
    color: white;
    padding: 15px;
    margin: 15px 0;
    border: 2px solid #000;
    font-weight: bold;
    text-align: center;
}

/* Event description section outside the card */
.event-description-section {
    max-width: 1400px;
    margin: 30px auto;
    background: white;
    border: 3px solid #000;
    box-shadow: 8px 8px 0 #000;
    font-family: Arial, sans-serif;
}

.event-description-section h2 {
    background:#ed202c;
    color: white;
    padding: 15px 20px;
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    border-bottom: 3px solid #000;
}

.event-description-content {
    padding: 30px;
    line-height: 1.6;
    font-size: 16px;
}

.event-description-content h1,
.event-description-content h2,
.event-description-content h3,
.event-description-content h4,
.event-description-content h5,
.event-description-content h6 {
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: bold;
}

.event-description-content p {
    margin-bottom: 15px;
}

.event-description-content ul,
.event-description-content ol {
    margin: 15px 0;
    padding-left: 30px;
}

.event-description-content li {
    margin-bottom: 8px;
}

.event-description-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border: 2px solid #000;
}

.event-description-content blockquote {
    border-left: 4px solid#ed202c;
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    background: #f9f9f9;
    padding: 15px 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .single-event-brutalist-card,
    .event-description-section {
        margin: 10px;
        max-width: none;
    }

    .single-event-brutalist-card .event-key-info {
        flex-direction: column;
        align-items: stretch;
    }

    .single-event-brutalist-card .event-info-boxes {
        justify-content: center;
    }

    .single-event-brutalist-card .event-info-box {
        min-width: auto;
        flex: 1;
    }

    .single-event-brutalist-card .event-meta-grid {
        grid-template-columns: 1fr;
    }

    .single-event-brutalist-card .brutalist-card__message,
    .single-event-brutalist-card .brutalist-card__actions {
        padding: 20px;
    }

    .event-description-content {
        padding: 20px;
    }
}

/* ========================================
   EMERGENCY TABLE HEADER FIX
   ======================================== */
/* This is the nuclear option to override any blue/gradient backgrounds */
* th,
*:not(style) th,
html * th,
body * th,
div * th,
form * th,
table * th,
.form-table * th,
.dlhms-form * th,
.dlhms-section * th {
    background: #f8f9fa !important;
    background-image: none !important;
    background-color: #f8f9fa !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    background-position: 0% 0% !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    color: #212529 !important;
    font-weight: bold !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
}

/* ========================================
   USER REGISTRATION FORM STYLES
   ======================================== */

.user-registration-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.registration-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.registration-success h3 {
    margin-top: 0;
    font-size: 1.5em;
}

.registration-success a {
    color: white;
    text-decoration: underline;
}

.registration-errors {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.registration-errors h4 {
    margin-top: 0;
    margin-bottom: 10px;
}

.registration-errors ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.registration-form {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #495057;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #ed202c;
    box-shadow: 0 0 0 2px rgba(237, 32, 44, 0.1);
}

.form-group small {
    display: block;
    margin-top: 5px;
    color: #6c757d;
    font-size: 14px;
}

.register-button {
    background: #dc3545;
    color: white;
    border: 2px solid #000;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-family: proxima-nova, Sans-serif;
    font-weight: 900;
    transition: all 0.3s ease;
}

.register-button:hover {
    background: #000;
    border-color: white;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
}

.form-footer a {
    color: #ed202c;
    text-decoration: none;
}

.form-footer a:hover {
    text-decoration: underline;
}

.registration-notice {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

.registration-notice a {
    color: #0c5460;
    font-weight: bold;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .user-registration-form {
        padding: 10px;
    }

    .registration-form {
        padding: 20px;
    }
}

/* ========================================
   MEMBERSHIP PURCHASE INTERFACE STYLES
   ======================================== */

.dlhms-membership-purchase {
    max-width: 1200px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.membership-status {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    border-left: 5px solid;
}

.membership-status.current {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.membership-status.expired {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.new-member-welcome {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.new-member-welcome h4 {
    margin-top: 0;
    font-size: 1.4em;
    margin-bottom: 15px;
}

.new-member-welcome ul {
    margin: 15px 0;
    padding-left: 20px;
}

.new-member-welcome li {
    margin-bottom: 8px;
    line-height: 1.4;
}

.membership-options {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
}

.membership-option {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background: #f9f9f9;
}

.membership-option h4 {
    margin-top: 0;
    color: #ed202c;
}

/* Membership Cards Layout - Brutalist Style */
.membership-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.membership-card {
    background: #f5f5f5;
    border: 3px solid #000;
    box-shadow: 8px 8px 0 #000;
    font-family: Arial, sans-serif;
    transition: all 0.2s ease;
}

.membership-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0 #000;
}

.card-header {
    background: #ed202c;
    color: white;
    padding: 20px;
    border-bottom: 3px solid #000;
    text-align: center;
}

.card-header h3 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.1;
    color: white;
}

.card-pricing {
    padding: 25px 20px;
    background: white;
}

/* Price option with separate title and row */
.price-option {
    margin-bottom: 20px;
    border-bottom: 2px solid #000;
    padding-bottom: 15px;
}

.price-option:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.option-title {
    font-weight: 900;
    color: #000;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding: 8px 0;
    background: #f5f5f5;
    text-align: center;
    border: 2px solid #000;
}

.option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
}

.price-amount {
    font-size: 1.6em;
    font-weight: 900;
    color: #ed202c;
    letter-spacing: 1px;
    flex: 0 0 auto;
    min-width: 100px;
}

.price-spacer {
    flex: 1;
}

.price-note {
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
    font-weight: bold;
}

/* Card actions section (only used for 1 month card with multiple buttons) */
.card-actions {
    padding: 20px;
    background: #f5f5f5;
    border-top: 3px solid #000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.purchase-btn {
    width: 100%;
    background: #000;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.purchase-btn:hover {
    background: #333;
    transform: translateY(-2px);
}

.purchase-btn:active {
    transform: translateY(0);
}

/* Secondary button style for recurring subscriptions */
.purchase-btn.recurring {
    background: #ed202c;
}

.purchase-btn.recurring:hover {
    background: #c41e3a;
}

/* Option buttons - uniform size with icons only */
.option-btn {
    background: #000;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.option-btn i {
    font-size: 1em;
}

.option-btn:hover {
    background: #333;
    transform: translateY(-1px);
}

.option-btn:active {
    transform: translateY(0);
}

.option-btn.recurring {
    background: #ed202c;
}

.option-btn.recurring:hover {
    background: #c41e3a;
}

.membership-form {
    margin-bottom: 15px;
}

.couples-input {
    margin: 10px 0;
}

.couples-input label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.couples-input input[type="text"] {
    width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.membership-info {
    background: #e9ecef;
    padding: 15px;
    border-radius: 5px;
}

.membership-success {
    background: #d4edda;
    color: #155724;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.membership-error {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Responsive Design for Membership Cards - Brutalist Style */
@media (max-width: 768px) {
    .membership-cards-container {
        grid-template-columns: 1fr;
        gap: 25px;
        margin: 20px 10px;
    }

    .membership-card {
        box-shadow: 6px 6px 0 #000;
    }

    .membership-card:hover {
        transform: translate(-1px, -1px);
        box-shadow: 7px 7px 0 #000;
    }

    .card-header {
        padding: 18px 15px;
    }

    .card-header h3 {
        font-size: 1.5em;
        letter-spacing: 1px;
    }

    .card-pricing {
        padding: 20px 15px;
    }

    .price-option {
        margin-bottom: 25px;
    }

    .option-title {
        font-size: 1.1em;
        margin-bottom: 12px;
        padding: 10px 0;
    }

    .option-row {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .price-amount {
        font-size: 1.8em;
        min-width: auto;
    }

    .price-label {
        font-size: 1em;
    }

    .option-btn {
        width: 60px;
        height: 60px;
        font-size: 1.4em;
        align-self: center;
    }

    .price-amount {
        font-size: 1.4em;
    }

    .card-actions {
        padding: 15px;
    }

    .purchase-btn {
        padding: 12px 15px;
        font-size: 1em;
        letter-spacing: 1px;
    }

    .purchase-btn:hover {
        transform: translateY(-1px);
    }
}

/* Registration Success Confirmation Styles */
.registration-success {
    background: white;
    border: 3px solid #000;
    box-shadow: 8px 8px 0 #000;
    padding: 30px;
    margin: 30px 0;
    text-align: center;
    font-family: Arial, sans-serif;
}

.registration-success h3 {
    color: #28a745;
    font-size: 2em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.registration-success .success-message {
    color: #28a745;
    font-size: 1.3em;
    font-weight: bold;
    margin: 15px 0;
    line-height: 1.4;
}

.registration-success .redirect-message {
    color: #666;
    font-size: 1.1em;
    font-weight: bold;
    margin: 15px 0;
}

.registration-success .manual-link {
    margin: 20px 0 0 0;
}

.registration-success .manual-link a {
    color: #ed202c;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 2px solid #ed202c;
    padding-bottom: 2px;
    transition: all 0.2s ease;
}

.registration-success .manual-link a:hover {
    background: #ed202c;
    color: white;
    padding: 5px 10px;
    border-bottom: none;
}

/* Mobile responsive for registration success */
@media (max-width: 768px) {
    .registration-success {
        margin: 20px 10px;
        padding: 25px 20px;
        box-shadow: 6px 6px 0 #000;
    }

    .registration-success h3 {
        font-size: 1.6em;
        letter-spacing: 1px;
    }

    .registration-success .success-message {
        font-size: 1.1em;
    }

    .registration-success .redirect-message {
        font-size: 1em;
    }
}

/* New Member Welcome Message Styles - Modern Design */
.new-member-welcome {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 3px solid #000;
    box-shadow: 8px 8px 0 #000;
    padding: 40px;
    margin: 30px 0;
    font-family: Arial, sans-serif;
}

.welcome-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #ed202c;
}

.welcome-title {
    color: #ed202c;
    font-size: 2.5em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 15px 0;
    line-height: 1.1;
}

.welcome-subtitle {
    color: #28a745;
    font-size: 1.4em;
    font-weight: bold;
    margin: 0;
    line-height: 1.3;
}

.welcome-content {
    text-align: left;
}

.welcome-description {
    color: #333;
    font-size: 1.2em;
    font-weight: 500;
    margin: 0 0 30px 0;
    line-height: 1.5;
    text-align: center;
}

.membership-benefits {
    margin: 30px 0;
}

.benefits-title {
    color: #000;
    font-size: 1.6em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
    text-align: center;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #000;
    padding: 20px 15px;
    box-shadow: 4px 4px 0 #000;
    transition: all 0.2s ease;
    text-align: center;
}

.benefit-item:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #000;
}

.benefit-text {
    color: #333;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.3;
}

.choose-membership {
    color: #ed202c;
    font-size: 1.3em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 30px 0 0 0;
    text-align: center;
}

/* Mobile responsive for new member welcome */
@media (max-width: 768px) {
    .new-member-welcome {
        margin: 20px 10px;
        padding: 25px 20px;
        box-shadow: 6px 6px 0 #000;
    }

    .welcome-title {
        font-size: 1.8em;
        letter-spacing: 2px;
    }

    .welcome-subtitle {
        font-size: 1.2em;
    }

    .welcome-description {
        font-size: 1.1em;
    }

    .benefits-title {
        font-size: 1.3em;
        letter-spacing: 1px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .benefit-item {
        padding: 12px;
        box-shadow: 3px 3px 0 #000;
    }

    .benefit-item:hover {
        transform: translate(-1px, -1px);
        box-shadow: 4px 4px 0 #000;
    }

    .benefit-text {
        font-size: 1em;
    }

    .choose-membership {
        font-size: 1.1em;
    }
}

/* Header Spinner */

/* CSS for Banner Elements (Lines 207-266 from inc.header.php) */



/* Spinner Section - 3D Rotating Cylinder Effect */
.aboveSpinner,
.afterSpinner {
    background-color: #000;
    font-family: 'proxima-nova', sans-serif ;
    font-weight: 900 !important;
    letter-spacing: 1px;
    padding:5px 20px 7px 20px;
    text-transform: uppercase;
    z-index: 1000;
}



.Spinner {
    min-width: 550px;
    height: 200px;
    text-align: left;
    overflow: hidden;
    position: relative;
    --quantity: 16;
    --total-duration: calc((var(--quantity) + 1) * 2s);
}

.spinnerContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 10%;
    top: 20%;
    margin-top: -100px;
    transform-style: preserve-3d;
    animation: spin var(--total-duration) linear infinite;
}

.spinnerItems {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    transform:
        rotateX(calc((var(--position) - 1) * (360deg / var(--quantity))))
        translateZ(130px);
    pointer-events: auto;
}

.spinnerItems h3 {
    width: 100%;
    font-family: proxima-nova, sans-serif;
    font-size: 2.5em;
    text-transform: uppercase;
    font-weight: 900;
    color: #fff;
    opacity: 0.0;
    filter: blur(30px);
    animation: fadeInOut var(--total-duration) linear infinite;
    animation-delay: calc((var(--position) - 1) * (var(--total-duration) / var(--quantity)) - var(--total-duration));
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(0, 0, 0, 0.5);
    text-underline-offset: 10px;
    margin: 0;
}

/* Spinner Animations */
@keyframes spin {
    from {
        transform: perspective(1000px) rotateX(360deg);
    }
    to {
        transform: perspective(1000px) rotateX(0deg);
    }
}

@keyframes fadeInOut {
    0%, 15%, 98.118%, 100% {
        opacity: 1;
        filter: blur(0px);
    }
    20%, 95.235% {
        opacity: 0.0;
        filter: blur(30px);
    }
}

/* Hover to pause animation */
.Spinner:hover .spinnerContainer,
.Spinner:hover .spinnerItems h3 {
    animation-play-state: paused;
}

/* Responsive Design */
@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .banner-left-column {
        margin-bottom: 2rem;
    }
    
    .banner-left-column h2 {
        font-size: 3rem;
    }
    
    .right-column {
        padding-left: 0;
    }
    
    .BannerColumns {
        flex-direction: column;
        padding: 1rem 0;
    }
    
    .mouseBar {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .banner-left-column h2 {
        font-size: 2.5rem;
        padding: 8px 12px;
    }
    
    .spinnerItems h3 {
        font-size: 1.4rem;
    }
    
    .right-column h4 {
        font-size: 1.3rem;
        padding-left: 20px;
    }
}

/* Thermostat Control - Brutalist Card Styling */
.dlhms-thermostat-control {
    max-width: 1200px;
    margin: 20px auto;
    font-family: "proxima-nova", Sans-serif;
}

.dlhms-thermostat-control h2 {
    color: var(--e-global-color-primary, #ed202c);
    font-family: "proxima-nova", Sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.system-description {
    color: #666;
    margin-bottom: 20px;
    font-size: 16px;
}

.system-status-compact {
    background: #f5f5f5;
    border: 3px solid #000;
    box-shadow: 6px 6px 0 #000;
    padding: 15px 20px;
    margin-bottom: 20px;
    font-weight: bold;
    font-family: "proxima-nova", Sans-serif;
    color: #000;
}

.thermostat-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.thermostat-card {
    background: #f5f5f5;
    border: 3px solid #000;
    box-shadow: 8px 8px 0 #000;
    font-family: "proxima-nova", Sans-serif;
    overflow: hidden;
}

.thermostat-header {
    background: var(--e-global-color-primary, #ed202c);
    color: white;
    padding: 15px 20px;
    border-bottom: 3px solid #000;
}

.thermostat-name {
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "proxima-nova", Sans-serif;
}

.thermostat-temp {
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0;
    font-family: monospace;
    background: rgba(255,255,255,0.2);
    padding: 4px 8px;
    border-radius: 0;
    display: inline-block;
}

.thermostat-desc {
    font-size: 12px;
    margin: 5px 0 0 0;
    opacity: 0.9;
    font-style: italic;
}

.thermostat-form {
    padding: 20px;
    background: white;
}

.override-controls {
    background: #fff;
    border: 2px solid #000;
    padding: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #000;
}

.temp-input-group,
.time-input-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0px;
}

.temp-input-group input {
    border: 2px solid #000;
    padding: 5px 8px;
    font-weight: bold;
    font-family: "proxima-nova", Sans-serif;
    background: white;
    color: #000;
    width: 80px;
}

.override-controls .temp-input-group input {
    width: 100px !important;
}

.time-input-group select {
    border: 2px solid #000;
    padding: 5px 8px;
    font-weight: bold;
    font-family: "proxima-nova", Sans-serif;
    background: white;
    color: #000;
    width: 120px;
}

.degree-label {
    font-weight: bold;
    color: #000;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    border: 3px solid #000;
    background: white;
    margin-bottom: 20px;
}

.schedule-table th {
    background: #000;
    color: white;
    padding: 10px 8px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    border: 1px solid #000;
    font-family: "proxima-nova", Sans-serif;
}

.schedule-table td {
    padding: 8px;
    border: 1px solid #000;
    text-align: center;
    background: white;
    color: #000;
}

.schedule-table td:nth-child(3),
.schedule-table td:nth-child(5) {
    width: 100px;
}

.schedule-table th:nth-child(3),
.schedule-table th:nth-child(5) {
    width: 100px;
}

.day-label {
    font-weight: bold;
    background: #f5f5f5 !important;
    font-family: "proxima-nova", Sans-serif;
}

.save-button {
    background: #000 !important;
    color: white !important;
    border: 3px solid #000 !important;
    padding: 12px 30px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-family: "proxima-nova", Sans-serif !important;
    cursor: pointer;
    font-size: 14px !important;
    width: 100%;
    box-sizing: border-box;
}

.save-button:hover {
    background: var(--e-global-color-primary, #ed202c) !important;
    color: white !important;
    border: 3px solid #000 !important;
}

.permission-notice {
    background: #fff3cd;
    border: 3px solid #000;
    box-shadow: 6px 6px 0 #000;
    padding: 20px;
    margin-bottom: 20px;
}

.permission-notice h3 {
    color: #856404;
    margin: 0 0 10px 0;
    font-family: "proxima-nova", Sans-serif;
    font-weight: 900;
}

.schedule-readonly {
    padding: 20px;
    background: white;
}

.schedule-readonly h4 {
    margin: 0 0 15px 0;
    color: #000;
    font-family: "proxima-nova", Sans-serif;
    font-weight: 900;
}

.schedule-summary {
    background: #f8f9fa;
    border: 2px solid #000;
    padding: 15px;
}

.schedule-day.current {
    background: var(--e-global-color-primary, #ed202c);
    color: white;
    padding: 8px 12px;
    font-weight: bold;
    border: 2px solid #000;
    margin-bottom: 5px;
}

/* Responsive Design for Thermostat Cards */
@media (max-width: 768px) {
    .thermostat-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .thermostat-card {
        box-shadow: 6px 6px 0 #000;
    }

    .schedule-table {
        font-size: 12px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 6px 4px;
    }

    .temp-input-group input {
        width: 70px;
        font-size: 12px;
    }

    .override-controls .temp-input-group input {
        width: 90px;
        font-size: 12px;
    }

    .time-input-group select {
        width: 100px;
        font-size: 12px;
    }
}

/* FluentAuth form Styling */


/* ========================================
   MAINTENANCE TASK MANAGEMENT STYLES
   ======================================== */

/* Task Action Containers */
.task-actions, .task-completion-actions, .task-management-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.task-actions form, .task-completion-actions form, .task-management-actions form {
    margin: 0 !important;
}

.task-management-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

/* Priority Indicators */
.priority-critical {
    background: #dc3545;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.priority-high {
    background: #fd7e14;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.priority-medium {
    background: #ffc107;
    color: black;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

/* Maintenance Task Status Indicators */
.maintenance-task.status-overdue {
    border-left: 4px solid #dc3545;
}

.maintenance-task.status-due-soon {
    border-left: 4px solid #ffc107;
}



.overdue-row {
    background-color: #fff5f5 !important;
}

/* Button Variants */
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Badges */
.badge-success {
    background-color: #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.badge-secondary {
    background-color: #6c757d;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.recurring-indicator {
    color: #28a745;
    font-weight: bold;
}

.task-id {
    color: #666;
    font-size: 12px;
    margin-right: 10px;
}

.recurring-yes {
    color: #28a745;
    font-weight: bold;
}

.recurring-no {
    color: #6c757d;
}

.task-complete-btn {
    width: 100%;
    margin-top: 10px;
    font-weight: bold;
}

/* Recurring Days Checkbox Group */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    margin: 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Tiny Buttons - Override existing button styles */
.btn-tiny {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    border-radius: 3px !important;
    margin: 0 1px !important;
    background: #007cba !important;
    color: white !important;
    border: 1px solid #005a87 !important;
    text-decoration: none !important;
    display: inline-block !important;
    cursor: pointer !important;
    min-width: auto !important;
    height: auto !important;
    min-height: auto !important;
}

.btn-tiny:hover {
    background: #005a87 !important;
    color: white !important;
    text-decoration: none !important;
}

.btn-tiny.btn-secondary {
    background: #6c757d !important;
    border-color: #6c757d !important;
}

.btn-tiny.btn-secondary:hover {
    background: #5a6268 !important;
    border-color: #545b62 !important;
}

.btn-tiny.btn-danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
}

.btn-tiny.btn-danger:hover {
    background: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Override any existing button styles that might interfere */
button.btn-tiny, .btn.btn-tiny, .button.btn-tiny, input[type="submit"].btn-tiny, input[type="button"].btn-tiny, .dlhms-btn.btn-tiny {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    min-width: auto !important;
    height: auto !important;
    min-height: auto !important;
}

/* Table Column Widths */
.equipment-table th:nth-child(2) {
    width: 10%;
}

.equipment-table th:nth-child(3) {
    width: auto;
}

.equipment-table th:nth-child(4) {
    width: 10%;
}

/* Manage Tasks Table - Clean Styling */
.manage-tasks-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    table-layout: fixed !important;
}

.manage-tasks-table th {
    background: #f8f9fa !important;
    color: #495057 !important;
    padding: 12px !important;
    text-align: left !important;
    font-weight: bold !important;
    border-bottom: 2px solid #dee2e6 !important;
    font-size: 14px !important;
}

.manage-tasks-table td {
    padding: 12px !important;
    font-family: proxima-nova, Sans-serif !important;
    color: #333 !important;
    background: white !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-size: 14px !important;
    vertical-align: top !important;
}

.manage-tasks-table tr {
    background: white !important;
}

.manage-tasks-table tr:hover {
    background: #f8f9fa !important;
}

.manage-tasks-table tr:nth-child(even) {
    background: white !important;
}

.manage-tasks-table tr:nth-child(even):hover {
    background: #f8f9fa !important;
}

/* Manage Tasks Table Column Widths (has checkbox column) */
.manage-tasks-table th:nth-child(1) {
    width: 30px; /* Checkbox column */
}

.manage-tasks-table th:nth-child(2) {
    width: 10%; /* Shop column */
}

.manage-tasks-table th:nth-child(3) {
    width: 10%; /* Equipment column - flexible */
}

.manage-tasks-table th:nth-child(4) {
    width: auto; /* Task column */
}

.manage-tasks-table th:nth-child(5) {
    width: 80px; /* Recurring column */
}

.manage-tasks-table th:nth-child(6) {
    width: 130px; /* Status column */
}

.manage-tasks-table th:nth-child(7) {
    width: 120px; /* Actions column */
}/* End custom CSS */