@import "theme-editor.css";
@import url('./main-layout.css');
@import url('./views/dashboard-view.css');
@import url('./views/attendance-view.css');
@import url('./views/members-view.css');
@import url('./views/locations-branches-view.css');
@import url('./views/devices-view.css');
@import url('./views/schedule-view.css');
@import url('./views/subscription-view.css');
@import url('./views/configurations-view.css');

html {
    --lumo-primary-color: #00FF87;
    --lumo-primary-color-50pct: rgba(0, 255, 135, 0.5);
    --lumo-primary-color-10pct: rgba(0, 255, 135, 0.1);
    --lumo-primary-text-color: #00FF87;

    /* Dark theme overrides to match mobile app */
    --lumo-base-color: #0c1219; /* Darker navy/black background */
    --lumo-body-text-color: #ffffff;
    --lumo-header-text-color: #ffffff;
    --lumo-secondary-text-color: rgba(255, 255, 255, 0.7);

    /* Selection/Contrast colors */
    --lumo-contrast-10pct: rgba(255, 255, 255, 0.1);
    --lumo-contrast-20pct: rgba(255, 255, 255, 0.2);
    --lumo-contrast-30pct: rgba(255, 255, 255, 0.3);
    --lumo-contrast-40pct: rgba(255, 255, 255, 0.4);
    --lumo-contrast-50pct: rgba(255, 255, 255, 0.5);
    --lumo-contrast-60pct: rgba(255, 255, 255, 0.6);
    --lumo-contrast-70pct: rgba(255, 255, 255, 0.7);
    --lumo-contrast-80pct: rgba(255, 255, 255, 0.8);
    --lumo-contrast-90pct: rgba(255, 255, 255, 0.9);
    --lumo-contrast: #ffffff;
}

/* Custom Card Style inspired by mobile app */
.mobile-card {
    background-color: rgba(0, 255, 135, 0.05);
    border: 1px solid rgba(0, 255, 135, 0.3);
    border-radius: var(--lumo-border-radius-l);
    padding: var(--lumo-space-l);
    transition: background-color 0.2s;
}

.mobile-card:hover {
    background-color: rgba(0, 255, 135, 0.1);
}

/* Button styles */
vaadin-button[theme~="primary"] {
    background-color: #00FF87;
    color: #0c1219;
    font-weight: bold;
}

vaadin-button[theme~="outline"] {
    border: 1px solid #00FF87;
    color: #00FF87;
    background: transparent;
}

/* Text styles */
.text-green {
    color: #00FF87 !important;
}

.text-red {
    color: #ff5555 !important;
}

.time-display {
    font-size: 3rem;
    font-weight: bold;
    color: white;
}