/* Import Montserrat font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/* Define color constants using CSS Variables */
:root {
    --background-dark: #212529;
    --text-light: #FEFEFE;
    --input-bg: #efefef;
    --input-text: #212529;
    --btn-bg: #626262;
    --btn-hover-bg: #7a7a7a;
    --btn-login-text: #C4E4BC;
    --section-bg-light: #FEFEFE;
    --section-form-bg-light: #EAF6E7;
    --background-modal-dark: #3c7136;
    --btn-green: #3CA620;


    --background-color-ligth: #E9EFEC;

}

/* Set Montserrat as the font-family for all elements */
body, .login-page-container, .left-section, .right-section, .service-title, .form-control, .btn-login, footer, h1, h2, h3, h4, h5, h6, p, a, span, input, button {
    font-family: 'Montserrat', sans-serif !important;
}

html, body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--background-color-ligth);
}

main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Ensures the navbar stays on top */
  }

.container-fluid {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

footer {
    flex-shrink: 0;
    background-color: var(--background-dark); /* Dark background */
    color: var(--text-light); /* White text */
    text-align: center;
    padding: 1rem 0;
    min-height: auto !important;
}

.login-page-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Make sections stretch to the same height */
    flex-direction: column; /* Stack elements on smaller screens by default */
    padding: 0px;
    flex: 1; /* Allow it to fill the available space */
}

.left-section, .right-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--background-dark);
    color: var(--text-light);
    padding: 40px !important;
    text-align: center;
    width: 100%;
    flex: 1; /* Make both sections take equal height */
}

.logo {
    max-width: 100%;
}

.service-title {
    font-size: 18px;
    margin-bottom: 0px;
    color: var(--text-light);
}

.right-section {
    background-color: var(--background-dark);
}

.login-card {
    background-color: var(--background-dark);
    width: 100%;
    max-width: 300px;
    align-items: center;
}

.card-header-buttons {
    justify-content: center !important;
}

.card-header-hyd {
    border-radius: (--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.form-control {
    /* background-color: var(--input-bg) !important; */
    /* border: none !important; */
    color: var(--input-text) !important;
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}

.btn-login {
    background-color: var(--btn-bg);
    border: none;
    color: var(--text-light);
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 0.375rem !important;
    width: auto;
    height: auto;
    display: block; /* Change to block-level element */
    margin: 0 auto;
}

.btn-login:hover {
    background-color: var(--btn-hover-bg);
}

/* For larger screens */
@media (min-width: 768px) {
    .logo {
        padding-bottom: 12px !important;
    }

    .login-page-container {
        flex-direction: row;
        height: 100vh;
    }

    .left-section {
        width: 50%;
        flex-direction: column;
        justify-content: center;
    }

    .right-section {
        width: 50%;
        background-color: var(--section-bg-light);
        padding: 0px;
    }

    .login-card {
        background-color: var(--section-bg-light);
        width: 100%;
        max-width: 400px;
    }

    .btn-login {
        background-color: var(--background-dark);
        color: var(--btn-login-text);
    }
}

/* For mobile or smaller screens */
@media (max-width: 767.98px) {
    .logo {
        width: 171px;
        height: 57px;
    }

    .left-section {
        padding: 20px;
        padding-bottom: 12px !important;
        justify-content: flex-end; /* Align contents to the bottom */
    }

    .right-section {
        padding: 20px;
        padding-top: 6px !important;
        background-color: var(--background-dark) !important;
        justify-content: flex-start; /* Align contents to the top */
    }

    .login-card {
        width: 100%;
        max-width: 300px;
        background-color: var(--background-dark);
    }
    /* Ensure dia_mes field stays on its own row */
    .horas-form .single-row {
        display: block;
    }

    /* Display other fields in the same row */
    .horas-form .multi-row {
        display: flex;
        flex-wrap: nowrap; /* Prevent wrapping to new line */
        overflow-x: auto; /* Allow horizontal scroll if needed */
    }

    .horas-form .multi-row .form-group {
        flex: 1 1 auto; /* Allow equal spacing */
    }
    /* Apply flex styling for checkboxes */
    #horas-checkbox {
        display: flex;
        flex-wrap: wrap;
        padding-left: 40px;
        padding-right: 20px;
        align-items: center !important;  /* Vertical centering */
        justify-content: center !important;
    }

    #horas-checkbox .form-group {
        flex: 1 1 45%; /* Each checkbox takes up 50% of the row */
        padding: 5px; /* Optional: Add some padding for spacing */
        align-items: center !important;  /* Vertical centering */
    }

    .card-table-responsive{
        padding-left: 0px;
        padding-right: 0px;
    }

    .dateTable {
        width: 100% !important;
        table-layout: auto !important; /* Enables dynamic column width */
      }

}

/* Navbar container styles */
.navbar {
    display: flex !important;
    align-items: center !important;  /* Vertical centering */
    justify-content: center !important;  /* Horizontal centering */
    height: 60px !important;  /* Set a fixed height for the navbar */
}

/* Ensure the elements in navbar-nav are centered and spaced equally */
.navbar-nav {
    display: flex !important;
    align-items: center !important;  /* Vertically center items */
    justify-content: center !important;  /* Horizontally center items */
    gap: 10px !important;  /* Ensure 10px gap between all navbar items, including nav-link and buttons */
}

/* Admin button styles */
/* Admin button */
.btn-admin {
    border: none !important;
    background-color: var(--btn-green) !important;
    color: var(--text-light) !important;
    padding: 10px 15px !important; /* Increase horizontal padding for better clickability */
    margin-bottom: 0 !important;
    cursor: pointer !important;
    border-radius: 0.375rem !important;
    display: inline-block !important;
    text-decoration: none !important;
    height: calc(100% - 5px) !important;
    line-height: calc(100% - 5px) !important;
    transition: all 0.3s ease-in-out; /* Smooth transition for hover and focus */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow for depth */
}

/* Hover and active state for Admin button */
.btn-admin:hover, .btn-admin:focus {
    background-color: var(--btn-hover-bg) !important;
    color: var(--text-light) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */
    outline: none; /* Remove default focus outline */
}

/* Admin button focus state (for accessibility) */
.btn-admin:focus {
    border: 2px solid var(--btn-hover-bg) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4); /* Focus ring for better accessibility */
}

/* Logout button */
.btn-logout {
    border: 1px solid var(--text-light) !important;
    background-color: var(--background-dark) !important;
    color: var(--text-light) !important;
    padding: 10px 15px !important; /* Increase horizontal padding for better clickability */
    margin-bottom: 0 !important;
    cursor: pointer !important;
    border-radius: 0.375rem !important;
    display: inline-block !important;
    text-decoration: none !important;
    height: calc(100% - 5px) !important;
    line-height: calc(100% - 5px) !important;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover and active state for Logout button */
.btn-logout:hover, .btn-logout:focus {
    background-color: var(--btn-hover-bg) !important;
    color: var(--text-light) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    outline: none;
}

/* Logout button focus state (for accessibility) */
.btn-logout:focus {
    border: 2px solid var(--btn-hover-bg) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}


/* Additional adjustments to ensure spacing for nav-link */
.navbar-nav .nav-link {
    text-decoration: none !important;  /* Remove underline for links */
    padding: 0 0px !important;  /* Ensure even padding for text links */
    color: var(--text-light) !important;  /* White text color */
    height: calc(100% - 5px) !important;  /* Ensure it fits inside navbar height */
    line-height: calc(100% - 5px) !important;  /* Vertically center the text */
}

.navbar-logo {
    height: 100% !important;  /* Make the logo fill the navbar's height */
    max-height: 40px !important;  /* Set a max-height (same as navbar height) */
    object-fit: contain !important;  /* Ensure the logo scales properly within its container */
    margin-right: 10px !important;  /* Optional: Add margin between logo and other navbar elements */
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute;       /* Position the collapse menu absolutely */
        top: 61px;               /* Set the top position to match the height of the navbar */
        left: 0;                 /* Align it to the left */
        right: 0;                /* Align it to the right */
        background-color: var(--background-dark); /* Background color */
        width: 100%;             /* Ensure it fills the whole width */
        z-index: 1000;           /* Ensure it appears above other content */
        display: none;           /* Initially hidden */
    }

    .navbar-collapse.show {
        display: block;          /* Show when toggled */
    }

    .navbar-nav {
        flex-direction: column !important; /* Stack nav items vertically */
        align-items: center !important;    /* Center align items */
        width: 100%;                      /* Full width */
        gap: 10px !important;
        padding-top: 11px;              /* Gap between items */
        padding-bottom: 10px;
    }

    .navbar-nav .nav-link{
        width: 100%;                     /* Full width for nav items */
        text-align: center;              /* Center text alignment */
        margin: 20 0;
        padding-bottom: 10px;                  /* Vertical margin */
    }

    .btn-admin,
    .btn-logout {
        min-width: 189px;
        padding-bottom: 10px !important;        /* Increased padding for touch targets */
        margin: 20 0 !important;  /* Optionally set a min-width to ensure consistent appearance */
        text-align: center;  
    }
    /* Better touch targets for mobile */

}

/* Ensure the container is properly positioned */
.navbar > .container {
    display: flex;                      /* Flex layout */
    justify-content: space-between;     /* Space between items */
    align-items: center;                /* Center items vertically */
    padding: 0 15px;                   /* Padding for the container */
}

.badge-danger {
    background-color: #F25961 !important; 
    text-decoration: none !important;
}

.badge-success {
    background-color: #31CE36 !important; 
    text-decoration: none !important;
}

.invoiced-container {
    display: flex;
    justify-content: flex-end; /* Aligns items to the right */
    align-items: center;       /* Centers items vertically */
}

.client-select{
    display: flex; 
    align-items: center !important;
    justify-content: flex-start;
}

.btn-add-client{
    margin-bottom: 10px !important;
    flex: 0 0 auto; /* Prevents the button from growing or shrinking */
    white-space: nowrap; /* Keeps the button text on a single line */
    height: auto; /* Allow the button to adapt height */
    padding-left: 15px;
    padding-right: 15px;
    aspect-ratio: 1 / 1; /* Maintains a square aspect ratio */
    align-self: stretch; /* Make the button stretch to match the select field height */
}

.model-header-newclient{
    background-color: var(--background-modal-dark) !important;
    border-color: var(--background-modal-dark) !important;;
}

.no-caret::after {
    display: none; /* Hide the default Bootstrap caret */
}

.dropdown-menu.show {
    min-width: 120px !important;
    display: flex; /* Use flexbox for inline layout */
    justify-content: space-between; /* Space out items evenly */
    padding: 3px; /* Adjust padding to tighten space */
    flex-direction: row !important; /* Ensure items stack if needed */
    border-color: var(--btn-green);
}

.dropdown-item.dropdown-detail-btn, .btn.detail-btn{
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.dropdown-item.dropdown-edit-btn, .btn.edit-btn{
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.dropdown-item.dropdown-delete-btn, .btn.delete-btn{
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.btn.btn-acciones{
    border-color: #dee2e6;
    background-color: #FEFEFE;
}

.btn.btn-acciones.show{
    border-color: var(--btn-green);
    background-color: #FEFEFE;
}


.page-link, .page-link.disabled, .page-link.next, .page-link.last, .page-link.first, .page-link.last {
    color: var(--btn-green) !important;
}

.active>.page-link, .page-link.active, .btn-create-servicesheet, .btn-saveclient, .checkbox-group input[type="checkbox"]:checked, .btn-savechanges, .btn-sendemail {
    background-color: var(--btn-green) !important;
    border-color: var(--btn-green) !important;
    color: #FFFFFF !important;
}

.checkbox-group input[type="checkbox"]{
    border-color: var(--btn-green) !important;
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: center;
}

table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc, table.dataTable thead > tr > td.dt-orderable-asc, table.dataTable thead > tr > td.dt-orderable-desc, table.dataTable thead > tr > td.dt-ordering-asc, table.dataTable thead > tr > td.dt-ordering-desc {
    position: relative;
    padding-right: 8px;
    min-width: auto;
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
    position: absolute;
    right: 2px;
    top: 0;
    bottom: 0;
    width: 10px;
}   

.badge-emailsent{
    padding-left: 9.3px;
    padding-right: 9.3px;
}

.dropdown-menu-status.show{
    border-color: #dee2e6 !important;
    padding: 6.5px;
    min-height: 36px;
    padding-top: 8.555px;
    padding-bottom: 8.555px;
}