/* Dark Theme - Green Color Scheme to match DashDashboard.py */
.app-header-dark {
    background-color: #003060;
    color: #FFFFFF;
    border-color: #003060;
    padding: 20px;
    text-align: center;
}

.app-table-dark {
    background-color: #003060;
    color: #FFFFFF;
    border-color: #003060;
    padding: 20px;
    text-align: center;
}

.header1-dark {
    font-family: 'Roboto Mono, monospace';
    color: #00FF00;
    font-size: 3em;
    text-align: center;
    text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000;
    padding: 20px;
}

.header3-dark {
    text-align: left;
    color: #FFFFFF;
    padding: 10px;
}

.header5-dark {
    font-family: "Open Sans", verdana, arial, sans-serif;
    font-weight: normal;
    text-align: left;
    color: #FFFFFF;
    padding: 10px;
    text-transform: none;
}

.header5-iframe-dark {
    font-family: "Open Sans", verdana, arial, sans-serif;
    font-weight: normal;
    text-align: left;
    color: #FFFFFF;
    padding: 10px;
    text-transform: none;
}

.toggle-dark {
    color: #FFFFFF;
}

.ban-dark {
    background-color: #003060;
    color: #FFFFFF;
    border-color: #003060;
    padding: 20px;
    text-align: center;
}

.app-header-rounded-dark {
    background-color: #003060;
    color: #FFFFFF;
    border-color: #00FF00;
    padding: 20px;
    text-align: center;
    border-radius: 15px;
    font-family: Arial;
    border: 5px solid;
}

.app-header-rounded-ban-dark {
    background-color: #003060;
    color: #FFFFFF;
    border-color: #00FF00;
    padding: 20px;
    text-align: center;
    border-radius: 15px;
    font-family: Arial;
    border: 5px solid;
}

.app-header-rounded-contrast-dark {
    border-radius: 15px;
    background-color: #003060;
    color: #FFFFFF;
    padding: 20px;
    text-align: center;
    border-color: #00FF00;
    border: 5px solid;
}

.app-header-rounded-contrast-map-dark {
    border-radius: 15px;
    background-color: #003060;
    color: #FFFFFF;
    padding: 20px;
    text-align: center;
    border-color: #00FF00;
    border: 5px solid;
    position: relative;
    width: 95%;
    height: 0;
    padding-bottom: 60%;
}

.app-header-secondary-dark {
    background-color: #001A33;
    color: #FFFFFF;
    font-family: Arial;
    border: 20px solid;
    border-radius: 15px;
    border-color: #003060;
}

.tabs-dark {
    background-color: #003060 !important;
    color: white !important;
    font-family: Arial !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 15px !important;
    border: 1px solid !important;
    border-color: #00FF00 !important;
}

.tabs--selected-dark {
    background-color: #00FF00 !important;
    color: #003060 !important;
    font-family: Arial !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 15px !important;
    border: 5px solid !important;
    border-color: #00FF00 !important;
}

/* Light Theme - Green Color Scheme */
.app-header-light {
    background-color: #F8F9FA;
    color: #000000;
    border-color: #28A745;
    padding: 20px;
    text-align: center;
}

.header1-light {
    font-family: 'Roboto Mono, monospace';
    color: #28A745;
    font-size: 3em;
    text-align: center;
    text-shadow: 1px 1px 0px #FFFFFF, -1px -1px 0px #FFFFFF, 1px -1px 0px #FFFFFF, -1px 1px 0px #FFFFFF;
    padding: 20px;
}

.header3-light {
    text-align: left;
    color: #000000;
    padding: 10px;
}

.header5-light {
    font-family: "Open Sans", verdana, arial, sans-serif;
    font-weight: normal;
    text-align: left;
    color: #000000;
    padding: 10px;
    text-transform: none;
}

.header5-iframe-light {
    font-family: "Open Sans", verdana, arial, sans-serif;
    font-weight: normal;
    text-align: left;
    color: #000000;
    padding: 10px;
    text-transform: none;
}

.toggle-light {
    color: #000000;
}

.ban-light {
    background-color: #FFFFFF;
    color: #000000;
    border-color: #28A745;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    border: 5px solid;
}

.app-header-rounded-light {
    background-color: #FFFFFF;
    color: #000000;
    border-color: #28A745;
    padding: 20px;
    text-align: center;
    border-radius: 15px;
    font-family: Arial;
    border: 5px solid;
}

.app-header-rounded-ban-light {
    background-color: #FFFFFF;
    color: #000000;
    border-color: #28A745;
    padding: 20px;
    text-align: center;
    border-radius: 15px;
    font-family: Arial;
    border: 5px solid;
}

.app-header-rounded-contrast-light {
    border-radius: 15px;
    background-color: #FFFFFF;
    color: #000000;
    padding: 20px;
    text-align: center;
    border-color: #28A745;
    border: 5px solid;
}

.app-header-rounded-contrast-map-light {
    border-radius: 15px;
    background-color: #FFFFFF;
    color: #000000;
    padding: 20px;
    text-align: center;
    border-color: #28A745;
    border: 5px solid;
    position: relative;
    width: 95%;
    height: 0;
    padding-bottom: 60%;
}

.app-header-secondary-light {
    background-color: #F8F9FA;
    color: #000000;
    font-family: Arial;
    border: 20px solid;
    border-radius: 15px;
    border-color: #E9ECEF;
}

.tabs-light {
    background-color: #28A745 !important;
    color: white !important;
    font-family: Arial !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 15px !important;
    border: 1px solid !important;
    border-color: #28A745 !important;
}

.tabs--selected-light {
    background-color: #155724 !important;
    color: white !important;
    font-family: Arial !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 15px !important;
    border: 5px solid !important;
    border-color: #155724 !important;
}

/* Common styles */
.iframe {
    position: absolute;
    top: 50px;
    left: 40px;
    width: 95%;
    height: 95%;
    padding: 20px;
}

/* Custom switch styling */
.custom-switch {
    accent-color: #28A745;
}

/* Card styling */
.card-green {
    border-color: #28A745 !important;
    background-color: #F8F9FA;
}

.card-green-dark {
    border-color: #00FF00 !important;
    background-color: #003060;
    color: #FFFFFF;
}

/* Button styling */
.btn-green {
    background-color: #28A745 !important;
    border-color: #28A745 !important;
    color: white !important;
}

.btn-green:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

/* Table styling */
.table-green th {
    background-color: #28A745 !important;
    color: white !important;
}

.table-green-dark th {
    background-color: #00FF00 !important;
    color: #003060 !important;
}

/* Dashboard specific colors */
.dash-dark {
    --primary-color: #00FF00;
    --secondary-color: #003060;
    --accent-color: #28A745;
    --background-color: #001A33;
    --surface-color: #003060;
    --text-color: #FFFFFF;
}

.dash-light {
    --primary-color: #28A745;
    --secondary-color: #F8F9FA;
    --accent-color: #155724;
    --background-color: #FFFFFF;
    --surface-color: #F8F9FA;
    --text-color: #000000;
}