:root {
    --navbar-height: 58px;
}

::selection {
    color: #fff;
    background: var(--bs-accent);
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/*h1, h2, h3 {*/
/*    color: var(--bs-primary);*/
/*}*/

p {
    font-size: 1.15rem;
    font-weight: 300;
}

/* navbar 
-------------------------------------------------- */
.navbar {
    height: var(--navbar-height);
    padding: 0 16px;
    background-color: var(--bs-primary);
    /*box-shadow: 0 .5rem 1rem rgba(var(--bs-primary-rgb),0.15);*/
}

.dropdown-item:active, .dropdown-item:hover {
    background-color: var(--bs-accent);
}


/* common
-------------------------------------------------- */
.loading {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    margin: 3rem;
    align-items: center;
    justify-content: center;
}

.bg-tiled {
    background-image: url('../assets/img/cs-bg-tiled.png');
    background-position: center;
    background-repeat: repeat;
}

.www-link {
    color: var(--bs-emphasis-color);
    /*font-size: 1.15rem;*/
    font-weight: 600;
    text-decoration: underline dotted var(--bs-accent);
}

.www-link:hover {
    color: var(--bs-emphasis-color);
    background-color: rgba(var(--bs-accent-rgb), 0.8);
}

.www-img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--bs-border-radius);
}

.www-img-circle {
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

.www-icon {
    display: inline-block;
    padding: 1rem;
    color: #fff;
    background-color: rgba(255, 255, 255,0.5);
    border-radius: var(--bs-border-radius);
}

.www-map {
    height: 440px;
    width: 100%;
    border-radius: var(--bs-border-radius);
}

.leaflet-icon {
    fill: var(--bs-primary);
}

.hover-effect {
    overflow: hidden;
}

    .hover-effect img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
        filter: grayscale(50%);
        transition: all ease 0.5s;
    }
    
    .hover-effect:hover img {
        filter: grayscale(0);
        transform: scale(1.1);
        transform-origin: center;
    }
    
.www-title {
    display: inline;
    color: var(--bs-primary);
    background-image: linear-gradient(135deg, var(--bs-primary) 20%, var(--bs-accent) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}


/*.page-links {*/
/*    background-color: var(--bs-light);*/
/*    border-radius: var(--bs-border-radius);*/
/*    margin-bottom: 1.5rem;*/
/*    padding: 1rem;*/
/*}*/

/*.page-links a {*/
/*    color: var(--bs-secondary);*/
/*}*/

/*.page-links a:hover {*/
/*    color: #FFF;*/
/*    background-color: rgba(var(--bs-primary-rgb), 0.8);*/
/*}*/

/*.page-links li {*/
/*    padding: 0.25rem;*/
/*    font-size: 1rem;*/
/*    font-weight: 400;*/
/*}*/

/*.page-links-button {*/
/*    position: relative;*/
/*    margin-bottom: 1.5rem;*/
/*    background-color: var(--bs-secondary);*/
/*    border-radius: var(--bs-border-radius);*/
/*    padding: 1rem;*/
/*    text-align: center;*/
/*    color: #FFF;*/
/*}*/

/*.page-links-button:hover {*/
/*    background-color: var(--bs-primary);*/
/*}*/

/* form 
-------------------------------------------------- */
.form-check-input {
    height: 20px;
    width: 20px;
}

/* reg plate 
-------------------------------------------------- */
.reg-plate {
    width: fit-content;
    padding: 0.5rem;
    background-color: #FFCD00;
    border-left: 1rem solid var(--bs-primary);
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.25rem;
    color: #000;
}

.reg-plate-input {
    width: fit-content;
    padding: 0.5rem;
    background-color: #FFCD00;
    border-left: 1rem solid var(--bs-primary);
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #000;
}

.reg-plate-input input:focus {
    outline: none;
}

.reg-no {
    width: 2rem;
    padding: 0.25rem 0;
    text-align: center;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #000;
    background-color: rgba(255, 255, 255, 0.3);
    font-weight: 800;
    border-radius: 0.25rem;
    border: none;
}

/* attachments 
-------------------------------------------------- */
.attachments {
    margin-bottom: 0.5rem;
}

.attachment {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0rem;
    margin-top: 0.5rem;
    word-break: break-all;
}

.attachment-disabled {
    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: 0.3;
}

.attachment-overlay {
    display: none;
}

.attachment-overlay.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.90);
    display: flex;
    padding: 1rem;
    z-index: 9999;
}

.attachment-overlay img {
    max-height: calc(100vh - 250px); /* Adjust based on your layout needs */
    object-fit: contain; /* Maintain aspect ratio while fitting within the height constraint */
}

/* screen specific 
-------------------------------------------------- */


/* Error handling
-------------------------------------------------- */
.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}