/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
 @import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css";

 @media (prefers-color-scheme: dark) {
     :root {
       --color-bg: #282a36;
       --font-color: #EEE;
       --secondary-color: #D84040;
       --notification-background: #D84040;
       --color-icon-background: #EEEEEE;

       --request-background: transparent;
       --request-box-shadow:  20px 20px 0px 0px var(--secondary-color), -20px -20px 0px 0px var(--third-color); 
       --request-text: var(--font-color);

       --third-color: #ECDCBF;


       --bg-title: #44475a;
       --bg-request-hover: #44475a;
       --button-background: var(--font-color);
       --table-color-bg: transparent;
       --table-color-text: var(--color-bg);

       --input-focus: var(--third-color);
       --form-required: var(--third-color);
       
       --table-background-color: transparent;
       --faq-border-color: #504B38;   
       
       --color-tag: var(--color-bg);
       
       --bg-tag: var(--third-color);
       --border-tag: none;
       
       --footer-border: unset;

       --faq-title-color: var(--font-color);
       --table-alternating-background-color: var(--third-color);
       --icon-color: var(--font-color);
       --footer-icon-color: var(--font-color);
       
       --content-title-border: solid 1em var(--secondary-color);
       --content-title-color: white !important;

       --black: var(--color-bg);
       --white: #fff;

       --card-content-background: transparent !important;
       --card-footer-background: transparent !important;
       --card-color: var(--font-color) !important;
       --logo-fill: #EEEEEE !important;
     }
   }
 
 @media (prefers-color-scheme: light) {
     :root {
        --color-bg: #FFFFFF;
        --color-icon-background: transparent;
        
        --font-color: #000;

       --secondary-color: #5ABA47;

       
       --request-background: var(--font-color);
       --request-box-shadow:  unset;
       --request-text: var(--white);

       --bg-title: transparent;
       --bg-request-hover: transparent;
       --color-tag: var(--font-color);
       --bg-tag: transparent;
       --border-tag: solid var(--secondary-color) 1em;
       --notification-background: #FDDB31;
       --notification-text: #381B60;
       --request-btn-hover-background: transparent;
       --table-background-color: transparent;
       
       --table-alternating-background-color: var(--secondary-color);
       
       --table-color-text: var(--white);

       --table-color-bg: #FFF;

       --danger-color: #D10000;

       --input-focus: var(--black);
       --form-required: var(--danger-color);
       
       
       --table-color-border: unset;
       --faq-title-color: var(--font-color);
       
       --footer-bg: transparent;
       --footer-font: var(--font-color);
       --footer-icon-color: var(--font-color);
       --footer-border: solid 3px var(--font-color);

       --icon-color: var(--font-color);
       --content-title-border: solid 1em var(--font-color);
       --content-title-color: var(--font-color) !important;
       --black: #000000;
       --white: #fff;
       --gray: #e7e7e7;
       --card-content-background: var(--secondary-color) !important;
       --card-footer-background: var(--white) !important;
       --card-color: var(--font-color);
       --logo-fill: --var(--black) !important;
     }
   }
.form-required {
    color: var(--form-required);
}

.table {
    background-color: var(--table-background-color) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.table th, .table td {
    color: var(--font-color) !important;
}
 html {
     background: transparent;
     background: var(--color-bg);
 }
 
 .button {
    background-color: var(--button-background);
    color: var(--font-color);
}
#request-service-btn {
    color: var(--request-text);
    background-color: var(--request-background);
    margin-top: 2em;
    margin-bottom: 2em;
    box-shadow: var(--request-box-shadow);
    text-decoration: unset !important;
    border: none;
 }

 strong {
    color: var(--font-color)
 }

 .submit-request {
    background-color: var(--request-background);
    color: var(--request-text);
    box-shadow: var(--request-box-shadow);
    margin-top: 5em;
 }

 input[type=checkbox] {
    transform: scale(2);
    margin-right: 1em;
    margin-left: 1em;
    margin-bottom: 1.5em;
    accent-color: var(--input-focus);
}

input[type=radio] {
  vertical-align: middle;
  transform: scale(2);
  margin-left: 2em;
  margin-right: 1em;
  margin-bottom: 1.5em;
  accent-color: var(--input-focus);
}

 #main-content {
     margin-right: 5em;
     margin-left: 5em;
     margin-bottom: 10em;
     color: var(--font-color);
 }
 
 .label {
    color: var(--font-color);
 }

 .title {
     color: var(--font-color) !important;
 }
 
 .content-title {
     text-align: center;
 }
 .notification {
    background-color: var(--notification-background);
    color: var(--notification-text);
 }
 
 .content-sub-title-standard {
     text-align: center;
     color: var(--color-bg) !important;
     padding: 0.1em;
 }
 
 .staff-highlight {
    padding: 0.5em;
    background-color: var(--third-color);
    color: var(--color-bg) !important;
 }
 .content-block {
    margin-bottom: 3em;
 }

 .content-block h2 {
     padding-top: 0.2em;
     padding-bottom: 0.2em;
     color: var(--color-service-area) !important;
     border-left: var(--content-title-border) !important;
     color: var(--content-title-color) !important;
     background: transparent;
 }

 .content-block h3 {
    color: var(--font-color);
 }

 .content {
    color: var(--font-color);
 }

 .card {
    margin-top: 3em;
    border: solid .1em var(--black);
    background-color: var(--card-content-background);
    color: var(--black);
 }

 .county-card {
    margin-top: 3em;
    padding: 1em;
    border: solid 1em var(--third-color);
    background-color: var(--color-bg);
    color: var(--third-color) !important;

    .title {
        color: var(--third-color) !important;
    }
 }

 .route-card {
    margin-top: 3em;
    padding: 1em;
    border: solid 1em transparent;
    background-color: var(--color-bg);
    background-color: transparent;
 }

 .card-footer {
    border-top-color: var(--black);
    background-color: var(--card-footer-background);
 }

 .card-footer-item {
    color: var(--card-color);
 }

 .card-content {
    .subtitle {
        margin-top: 1em;
    }
 }


 #faq h4 {
    color: var(--faq-title-color);
 }

 #logo, #second-logo {
     max-height: 15em;
     margin: 0 auto;
     margin-top: 1em;
     position: relative;
     width: 100%;
     /* padding-bottom: 1em; */
     /* padding-right: 1em; */
     /* padding-left: 1em; */
     fill: var(--logo-fill);
 }

 #logo-text {
    max-height: 15em;
    margin: 0 auto;
    /* margin-top: 1em; */
 }
 
 #head-content {
     margin-top: 1em;
     padding-bottom: 1em;
     padding-right: 1em;
     padding-left: 1em;
 }
 
 .navbar-single {
     max-width: 7em;
 }
 
 .navbar-item {
     border-left: 0.5em  var(--font-color) solid;
     color: var(--font-color) !important;
     padding-right: 3em;
 }
 
 .navbar-item:hover {
     border-right: 0.5em  var(--font-color) solid;
     background-color: var(--font-color) !important;
     color: var(--color-bg)  !important;
 }
 
 #sub-content {
     margin-top: 1em;
 }
 
 a {
     transition-duration: unset;
     transition-property: unset;
     color: unset;
     text-decoration: underline;
     font-weight: 1000;
     font-style: italic;
 }

 .subtitle {
     color: var(--font-color) !important;
 }
 
.footer {
    border-top: var(--footer-border);
    background-color: var(--footer-bg);
    padding-right: 5em;
    padding-left: 5em;
    margin-left: -5em;
    margin-right: -5em;
    margin-bottom: -10em;
    margin-top: 5em;
    color: var(--footer-font);
}

 #insurance-logo {
     max-height: 7em;
 }

 #service-territory-pins {
    max-height: 25em;
    margin-top: 3em;
 }

 .tag {
     /* background:  transparent !important; */
     border: none !important;
     border: solid 1px var(--third-color) !important;

     box-shadow: none !important;
     /* padding: 0.5em !important; */
 }
 
 .fa-icons {
     width: 2em;
     margin-right: 1em;
     fill: var(--icon-color);
 }

 .footer-icons {
    fill: var(--footer-icon-color) !important
 }

 .icon-text {
    color: var(--icon-color);
 }
 .contact-col {
     margin-bottom: 2em;
 }
 

 .errorBanner {
    display: none;
 }


 .tabs a {
    color: var(--font-color) !important;
 }

 .tabs.is-boxed li.is-active a {
    background-color: transparent;
 }

 .tabs:hover a {
    background-color: transparent !important;
 }
 
 .input:focus, .select:focus, select:focus, .textarea:focus, textarea:focus, .checkbox:focus, radio:focus, .radio:focus {
    border: unset !important;
    outline: none !important;
    box-shadow: 0 0 5px var(--input-focus) !important;
 }

 .input:user-invalid, .select:user-invalid, select:user-invalid, .textarea:user-invalid, textarea:user-invalid, .checkbox:user-invalid, checkbox:user-invalid, .radio:user-invalid, radio:user-invalid {
    box-shadow: 0 0 5px #dc2626 !important;
 }

.is-striped tbody tr:nth-child(even) td {
    color: var(--font-color) !important;    
    background-color: var(--color-bg) !important;    
}

.is-striped tbody tr:nth-child(odd) td {
    background-color: var(--table-alternating-background-color) !important;
    color: var(--table-color-text) !important;
}

.table.is-bordered td, .table.is-bordered th {
    border-color: var(--font-color);
}

.message {
    max-width: 40em;
}

 .navbar-link:not(.is-arrowless):after, .select:not(.is-multiple):not(.is-loading):after {
    border: .125em solid var(--input-focus);
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: .625em;
    margin-top: -.4375em;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    transform-origin: center;
    /* transition-duration: var(--bulma-duration);
    transition-property: border-color; */
    width: .625em;
 }
 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
     #main-content {
         margin-right: 0;
         margin-left: 0; 
         margin-bottom: 0em;
         padding: 1.5em;
     }
 }

/* Button styling classes to replace inline styles */
.button-primary {
    background-color: var(--secondary-color) !important;
    color: var(--black) !important;
}
.button-primary {
    background-color: var(--secondary-color) !important;
    color: var(--black) !important;
}

.button-danger {
    background-color: var(--secondary-color) !important;
    background-color: #D10000 !important;
    color: var(--white) !important;
}

.button-link {
    color: var(--font-color) !important;
}

.margin-top-small {
    margin-top: 0.5rem;
}

.margin-top-medium {
    margin-top: 1rem;
}

.margin-bottom-small {
    margin-bottom: 0.5rem;
}

.is-staff-tab a {
  font-weight: bold;
  color: var(--third-color) !important;
}

/* Map containers */
.map-container {
    width: 100%;
    height: 500px;
}

/* Route color indicator */
.route-color-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Dynamic background color for route indicators */
.route-color-indicator[data-color] {
    background-color: var(--route-color, #4ECDC4);
}

/* Service request link */
.service-request-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Service request header */
.service-request-header {
    display: flex;
    justify-content: flex-start;
}

/* Service request ID */
.service-request-id {
    font-size: 0.85em;
    color: #888;
}

/* Form labels */
.form-label-block {
    display: block;
}

/* Error messages */
.error-message {
    color: red;
}

.success-message {
    color: green;
}

/* Color picker input */
.color-picker-input {
    width: 100px;
    height: 40px;
}

/* Button styles */
.button-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
}

.button-tertiary {
    background-color: var(--third-color);
    color: var(--white);
}

/* Link colors */
.link-font-color {
    color: var(--font-color);
}

/* Cursor styles */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* Route checkboxes styling */
.route-checkboxes {
    max-height: 500px;
    overflow-y: auto;
}

.route-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.route-checkbox:hover {
    background-color: var(--table-alternating-background-color);
}

.route-checkbox input[type="checkbox"] {
    margin-right: 0.5rem;
    transform: scale(1.2);
}

.route-checkbox-label {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 0.9rem;
    color: var(--font-color);
}

.route-checkbox-label .route-color-indicator {
    width: 12px;
    height: 12px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Trip status styles */
.trip-status-scheduled {
    background-color: var(--third-color) !important;
    color: var(--font-color) !important;
}

.trip-status-completed {
    background-color: #48c774 !important;
    color: white !important;
}

.trip-status-skipped {
    background-color: #ffdd57 !important;
    color: #363636 !important;
}

.trip-status-canceled {
    background-color: #f14668 !important;
    color: white !important;
}