@import url('//fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');
@import url('//fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap"');

/* ===========================================
   GLOBAL STATUS COLORS - Change these to update everywhere
   =========================================== */
:root {
    /* Appointment/Booking Status Colors - Keep in sync with StatusColors.php */
    --status-draft: #bdbdbd;
    --status-available: #69a18785;
    --status-partial: #dcab15;
    --status-confirmed: #28447c;
    --status-in-progress: #FF8C00;
    --status-completed: #076911;
    --status-cancelled: #931c40;
    --status-unavailable: #6c757d;
}

/* Status Badge Classes - Use these for consistent status colors on badges */
.badge.badge-status-draft { background-color: var(--status-draft) !important; color: #333 !important; }
.badge.badge-status-available { background-color: var(--status-available) !important; color: #fff !important; }
.badge.badge-status-partial { background-color: var(--status-partial) !important; color: #333 !important; }
.badge.badge-status-confirmed { background-color: var(--status-confirmed) !important; color: #fff !important; }
.badge.badge-status-in-progress { background-color: var(--status-in-progress) !important; color: #fff !important; }
.badge.badge-status-completed { background-color: var(--status-completed) !important; color: #fff !important; }
.badge.badge-status-cancelled { background-color: var(--status-cancelled) !important; color: #fff !important; }
.badge.badge-status-unavailable { background-color: var(--status-unavailable) !important; color: #fff !important; }

/* Import component styles */
@import './components/_datepicker.css';

/* Page Title Styles - Consistent across employee and customer sides */
.customers-title,
.vehicles-title,
.sessions-title,
.products-title,
.notifications-title,
.deliverables-title,
.billing-title,
.password-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .customers-title,
    .vehicles-title,
    .sessions-title,
    .products-title,
    .notifications-title,
    .deliverables-title,
    .billing-title,
    .password-title {
        font-size: 1.5rem;
    }
}

/* Shake animation for validation errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}



/* Calendar specific button styling - make buttons smaller */
.btn.calendar-specific {
    padding: 4px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-top: 10px !important;
}

/* Calendar button container - force flex layout and right alignment */
.primary-button-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    flex: 1 !important;  /* Take up remaining space */
    margin-left: auto !important;  /* Push to the right */
}
/* Temporarily commented out - need to be compiled into bundle */
/* @import './components/checkout-button.css'; */
/* @import './components/badge-customization.css'; */
/* @import './components/task-slide-panel.css'; - Empty file, removed */

@font-face {
    font-family: 'Permanent Marker';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/permanent-marker-v10-latin-regular.woff2) format("woff2");
}

/* Global font family - now controlled by theme settings */
/* Font family is set via CSS variable --bit-font-family */

:root{
--social-header-bg-color: {{ snippet.content.social_header_bg_color|default('#000000') }};
--social-header-text-color: {{ snippet.content.social_header_text_color|default('#ffffff') }};
--menu-header-bg-color: {{ snippet.content.menu_header_bg_color|default('#000000') }};
--menu-header-text-color: {{ snippet.content.menu_header_text_color|default('#ffffff') }};
--body-bg-color: {{ snippet.content.body_bg_color|default('#000000') }};
--body-text-color: {{ snippet.content.body_text_color|default('#ffffff') }};
--footer-bg-color: {{ snippet.content.footer_bg_color|default('#000000') }};
--footer-text-color: {{ snippet.content.footer_text_color|default('#ffffff') }};
}

.btn {
    font-size: 0.95rem;
}

/* Font size 1px smaller than global base - for quantity labels, etc. */
.text-size-sm-1 {
    font-size: calc(var(--bit-font-size-base, 14px) - 1px) !important;
}

/* Global select box font size */
.form-select,
select.form-control {
    font-size: 0.875rem !important;
}

a.exitImpersonate{
    font-size: 12px;
    color: black !important;
    border-radius: 0 !important;
}

/* Global form-check-label styling */
.form-check-label {
    font-size: 0.9rem;
    margin-left: 0.25rem;
    text-transform: none;
}

.form-check-label:hover {
    color: #212529;
}

/* When checkbox/radio is checked, make label slightly bolder */
.form-check-input:checked ~ .form-check-label {
    color: #212529;
    font-weight: 600;
}

/* Disabled state */
.form-check-input:disabled ~ .form-check-label {
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65;
}

/* For inline checkboxes/radios */
.form-check-inline .form-check-label {
    margin-right: 1rem;
}

/* For switch style checkboxes */
.form-switch .form-check-label {
    padding-left: 0.5rem;
}

/* Global checkbox and switch color - teal */
.form-check-input:checked {
    background-color: #028aa7;
    border-color: #028aa7;
}

.form-check-input:focus {
    border-color: #028aa7;
    box-shadow: 0 0 0 0.25rem rgba(2, 138, 167, 0.25);
}

.form-check-input:checked:focus {
    box-shadow: 0 0 0 0.25rem rgba(2, 138, 167, 0.25);
}

/* Switch track color when checked */
.form-switch .form-check-input:checked {
    background-color: #028aa7;
    border-color: #028aa7;
}

/* Icon sizes now handled in modern_tables.css for consistency */

/* Attendance marking flash effects */
.flash-success {
    animation: flashSuccess 0.3s ease-in-out;
}

.flash-error {
    animation: flashError 0.3s ease-in-out;
}

@keyframes flashSuccess {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(25, 135, 84, 0.1); }
}

@keyframes flashError {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(220, 53, 69, 0.1); }
}

/* Bootstrap Tooltip Customization */
.tooltip {
    font-size: 0.75rem !important; /* Smaller font size for tooltips */
    font-family: var(--bit-font-family, inherit) !important;
}

.tooltip-inner {
    font-size: 0.75rem !important; /* Smaller font size for tooltip content */
    font-family: var(--bit-font-family, inherit) !important;
    padding: 0.25rem 0.5rem !important; /* Smaller padding */
    max-width: 200px !important; /* Slightly smaller max width */
}
/* Keeping listing-page and actions-cell for non-table contexts */
.listing-page .btn i,
.actions-cell .btn i {
    font-size: 0.85rem !important;
    vertical-align: middle;
}

/* Swap default and hover states for listing page buttons */
.table-modern .btn-outline-secondary,
.table-modern .btn-outline-primary,
.table-modern .btn-outline-info,
.table-modern .btn-outline-success,
.table-modern .btn-outline-warning,
.table-modern .btn-outline-danger,
.listing-page .btn-outline-secondary,
.listing-page .btn-outline-primary,
.listing-page .btn-outline-info,
.listing-page .btn-outline-success,
.listing-page .btn-outline-warning,
.listing-page .btn-outline-danger {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    position: relative;
}

.table-modern .btn-outline-secondary:not(:hover),
.listing-page .btn-outline-secondary:not(:hover) {
    background-color: var(--bit-secondary, #6c757d) !important;
    border-color: var(--bit-secondary, #6c757d) !important;
    color: var(--bit-secondary-fg, white) !important;
    opacity: 0.85 !important;
}

.table-modern .btn-outline-primary:not(:hover),
.listing-page .btn-outline-primary:not(:hover) {
    background-color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
    /* Use a contrasting text color calculation */
    color: var(--bit-primary-fg, white) !important;
    opacity: 0.85 !important;
    /* Ensure text is visible even if variables are misconfigured */
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.table-modern .btn-outline-info:not(:hover),
.listing-page .btn-outline-info:not(:hover) {
    background-color: var(--bit-info, #0dcaf0) !important;
    border-color: var(--bit-info, #0dcaf0) !important;
    color: var(--bit-info-fg, #212529) !important;
}

.table-modern .btn-outline-success:not(:hover),
.listing-page .btn-outline-success:not(:hover) {
    background-color: var(--bit-success, #198754) !important;
    border-color: var(--bit-success, #198754) !important;
    color: var(--bit-success-fg, white) !important;
    opacity: 0.85 !important;
}

.table-modern .btn-outline-warning:not(:hover),
.listing-page .btn-outline-warning:not(:hover) {
    background-color: var(--bit-warning, #ffc107) !important;
    border-color: var(--bit-warning, #ffc107) !important;
    color: var(--bit-warning-fg, #212529) !important;
    opacity: 0.85 !important;
}

.table-modern .btn-outline-danger:not(:hover),
.listing-page .btn-outline-danger:not(:hover) {
    background-color: var(--bit-danger, #dc3545) !important;
    border-color: var(--bit-danger, #dc3545) !important;
    color: var(--bit-danger-fg, white) !important;
    opacity: 0.85 !important;
}

/* On hover, revert to outline style */
.table-modern .btn-outline-secondary:hover,
.table-modern .btn-outline-primary:hover,
.table-modern .btn-outline-info:hover,
.table-modern .btn-outline-success:hover,
.table-modern .btn-outline-warning:hover,
.table-modern .btn-outline-danger:hover,
.listing-page .btn-outline-secondary:hover,
.listing-page .btn-outline-primary:hover,
.listing-page .btn-outline-info:hover,
.listing-page .btn-outline-success:hover,
.listing-page .btn-outline-warning:hover,
.listing-page .btn-outline-danger:hover {
    background-color: transparent !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    opacity: 1 !important;
}

/* Specific hover colors for outline buttons to ensure visibility */
.table-modern .btn-outline-primary:hover,
.listing-page .btn-outline-primary:hover {
    color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
}

.table-modern .btn-outline-secondary:hover,
.listing-page .btn-outline-secondary:hover {
    color: var(--bit-secondary, #6c757d) !important;
    border-color: var(--bit-secondary, #6c757d) !important;
}

.table-modern .btn-outline-info:hover,
.listing-page .btn-outline-info:hover {
    color: var(--bit-info, #0dcaf0) !important;
    border-color: var(--bit-info, #0dcaf0) !important;
}

.table-modern .btn-outline-success:hover,
.listing-page .btn-outline-success:hover {
    color: var(--bit-success, #198754) !important;
    border-color: var(--bit-success, #198754) !important;
}

.table-modern .btn-outline-warning:hover,
.listing-page .btn-outline-warning:hover {
    color: var(--bit-warning, #ffc107) !important;
    border-color: var(--bit-warning, #ffc107) !important;
}

.table-modern .btn-outline-danger:hover,
.listing-page .btn-outline-danger:hover {
    color: var(--bit-danger, #dc3545) !important;
    border-color: var(--bit-danger, #dc3545) !important;
}


/* Fallback for when theme colors might cause visibility issues */
@supports (color: color-contrast(white vs black, blue)) {
    .table-modern .btn-outline-primary:not(:hover),
    .listing-page .btn-outline-primary:not(:hover) {
        color: color-contrast(var(--bit-primary) vs white, black) !important;
    }
}

/* Additional fallback for white/light primary colors */
.table-modern .btn-outline-primary:is([style*="--bit-primary: #fff"], [style*="--bit-primary: white"], [style*="--bit-primary: #faf"], [style*="--bit-primary: #fef"]):not(:hover),
.listing-page .btn-outline-primary:is([style*="--bit-primary: #fff"], [style*="--bit-primary: white"], [style*="--bit-primary: #faf"], [style*="--bit-primary: #fef"]):not(:hover) {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #0d6efd !important;
}

button.btn.btn-sm.btn-secondary.btn-remove {
    background-color: #ffffff;
}
i.bi.bi-x{
    color: #000000;
}

.social-colors, .social-colors a, .social-colors a i{
    background-color: var(--social-header-bg-color);
    color: var(--social-header-text-color);
}
.social-colors a:hover, .social-colors a:hover i, .social-colors a:active, .social-colors a:active i, .social-colors a:focus, .social-colors a:focus i{
    background-color: var(--social-header-text-color);
    color: var(--social-header-bg-color);
}

.body-colors{
    background-color: var(--body-bg-color);
    color: var(--body-text-color);
}
.footer-colors{
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
}

p {
    font-size: 14px;
}

h2 {
    text-align: center;
    font-size: 50px;
    line-height: 70px;
    color: #b61d1d;
}
.block_title{
    font-size: 50px;
    line-height: 70px;
    margin: 0;
    font-family:'montserrat';
    color: #b61d1d;
    font-weight: 400;
}

button{
    background-color: #b61d1d;
}

.buttons {
    white-space: nowrap;
    padding: 8px 30px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin: 20px 0px 20px 0px;
    letter-spacing: 2px;
    color: #FFFFFF;
    border-radius: 1000px;
}
.buttons:hover  {
    opacity: 80%;
}

.xs-tiny-doc-list {
    font-size: 10px;
    padding: 3px 7px;
    border-radius:6px;
    font-size: 11.25px;
    line-height: 11.25px;
    font-weight: 700;
}


div[data-enhanced-collection-target="entry"] {
    position: relative;
}

div[data-enhanced-collection-target="entry"] button.btn-remove{
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 10px;
    border-radius: 0 0 0 5px;
}

.disabled-entity{
    opacity: 0.7;
}

turbo-frame{
    /*transition-duration: .3s;*/
    display: contents;
}

/* Ensure turbo-frame passes height to children */
turbo-frame#main_right_panel {
    display: contents;
}

.menu-toggler-horizontal{
    transition: all 0.6s;
    max-width: 300px;
}

.menu-toggler-horizontal:not(.show){
    max-width: 0;
}
/* Commented out swoosh animations
@keyframes delayed-swoosh-animation {
    from {
        opacity: 0;
        transform: translateX(200px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.delayed-swoosh-1 {
    animation: delayed-swoosh-animation 1s;
}
.delayed-swoosh-2 {
    animation: delayed-swoosh-animation 2s;
}
.delayed-swoosh-3 {
     animation: delayed-swoosh-animation 3s;
 }
*/

/*turbo-frame[busy], div[busy]{
    opacity: 0.6;
    display: block;
}*/

.dragHover{
    box-shadow: 0 2px 0 #0d6efd inset ;
}


.checkbox-container{
    max-height: 150px;
    overflow-y: auto;
}
.checkbox-container label{
    padding: 0;
}

.sticky-header thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}

ul.pagination{
    margin-bottom: 0;
}

.table>tbody#list_row_container>tr:hover>td
{
    background: #aaaaaa1c;
    cursor: pointer;
}


.dashboard-title{
    color: grey;
    font-size: 22px;
    font-weight: bold;
}

h2.dashboard-title-recent-customers{
    color: #404445;
    font-size: 33px;
    font-weight: bold;
    font-family: Tahoma;
}
h4.dashboard-title-current-date{
    color: #dc3545;
    font-size: 22px;
    font-weight: bold;
    font-family: Tahoma;
}
h2.dashboard_percentage_number{
    font-size: 125px;
    font-weight: bold;
    color: #404445;
}
small.dashboard_percentage{
    font-size:30px;
    vertical-align: top;
}
h3.dashboard_mytask_percentage_number{
    font-size: 95px;
    font-weight: bold;
    color: #404445;
}
h3.dashboard_myleaderboard_percentage_number{
    font-size: 95px;
    font-weight: bold;
    color: #404445;
}
.smaller{
    font-size: 12px;
}
.btn-smaller{
    font-size: 12px;
    padding: 3px;
}
.btn-xss{
    font-size: 13px !important;
    font-weight: bold;
    padding: 3px;
    min-width: 130px;
}

.td-white-bg{
    background-color: #FFFFFF !important;
    border: 1px solid #ccc;
}
.task-block.red {
    i {
        color: #dc3545;
    }
    .progress-bar{
        background-color: #dc3545;
    }
}

.task-block.gold {
    i {
        color: #f6cc45;
    }
    .progress-bar{
        background-color: #f6cc45;
    }
}

.task-block.light_blue {
    i {
        color: #0dcaf0;
    }
    .progress-bar{
        background-color: #0dcaf0;
    }
}

.task-block.purple {
    i {
        color: #6e147a;
    }
    .progress-bar{
        background-color: #6e147a;
    }
}

.task-block.green {
    i {
        color: #198754;
    }
    .progress-bar{
        background-color: #198754;
    }
}



/*.dashboard-bg-success {*/
/*    background-color: #6e147a !important;*/
/*}*/

h3.dashboard_myappointment_times{
    font-size: 55px;
    font-weight: bold;
    color: #404445;
}
.dashboard_myappointment_AMPM{
    font-size: 30px;
    font-weight: bold;
    color: #404445;
}
a.link {
    font-family: 'Tahoma';
    font-weight: bold !important;
    text-decoration: none !important;
}
a.link:hover{
    color: grey !important;
    text-decoration: underline !important;
}

.see_more{
    font-size: 20px;

}

.disabled-event{
    outline: 1px solid red;
    border: 2px solid black !important;
    outline-offset: -1px;
}
.disabled-event:after{
    width: 100%;
    content: "DISABLED";
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 0;
    padding: 5px;
    color: #FFF;
    font-weight: bold;
    outline: 1px solid red;
    background-color: #000;
}

.nav-link {
    font-family: 'Tahoma';
    /*font-weight: bold;*/
}

p.dashboard_info {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px;
}

/* enable absolute positioning */
.inner-addon {
    position: relative;
}

/* style glyph */
.inner-addon .bi {
    position: absolute;
    padding: 10px;
    pointer-events: none;
    right: 0px;
}

/* align glyph */
.inner-addon .left-addon .bit{ left:  0px;}
.inner-addon .right-addon .bit { right: 0px;}

/* add padding  */
.inner-addon .inner-addon .left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

a.xs-dash-btn-sm {
    font-size: 11px;
    width: 140px;
    white-space:nowrap;
    padding:5px;
    text-align: left;
}

hr {
    margin-top: 2px;
    margin-bottom: 2px;
}


main{
    background-color: #eff6f9;
}


.table-sm td:first-child, .table-sm th:first-child  {
    padding-left: 12px;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin: 4px 8px !important;
    padding: 4px 0 !important;
}

.fc .fc-toolbar-title {
    display: none !important;
}

/* View selector radio buttons in calendar header */
.fc-header-toolbar .view-selector {
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: 1rem;
}

.fc-header-toolbar .view-selector .btn-check + .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    border-radius: 0;
    text-transform: uppercase;
}

.fc-header-toolbar .view-selector .btn-check + .btn:first-of-type {
    border-radius: 4px 0 0 4px;
}

.fc-header-toolbar .view-selector > label:last-of-type {
    border-radius: 0 4px 4px 0;
}

/* Class type toggles in calendar header */
.fc-header-toolbar .class-type-toggles {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fc-header-toolbar .class-type-toggles .form-check {
    margin-bottom: 0;
}

.fc-header-toolbar .class-type-toggles .form-check-label {
    font-size: 0.75rem;
    white-space: nowrap;
}

/*AHW-calendar buttons*/
button.fc-button.fc-button-primary {
    margin: 5px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    text-transform: uppercase;
}

button.fc-button.fc-button-primary:hover {
    margin: 5px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    text-transform: uppercase;
}

/* Calendar background - white instead of yellow/cream */
.fc .fc-timegrid-col.fc-day,
.fc .fc-timegrid-slot,
.fc .fc-daygrid-day,
.fc .fc-col-bg,
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid {
    background-color: #ffffff !important;
}

/* Non-business hours - light gray for contrast */
.fc .fc-timegrid-col.fc-day-other,
.fc .fc-non-business {
    background-color: #f8f9fa !important;
}

/* Calendar events use theme font */
.fc-event,
.fc-event-title,
.fc-event-details,
.fc .fc-event {
    font-family: var(--bit-font-family, inherit);
}

/* Modals use theme font */
.modal,
.modal-content,
.modal-body,
.modal-header,
.modal-footer {
    font-family: var(--bit-font-family, inherit);
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}


@media only screen and (min-width: 992px) {
    .footer__main {
        padding-top: 50px;
    }
}



@media only screen and (min-width: 768px) {
    .footer__main {
        padding-top: 40px;
    }
}

.footer__imprint-item {
    display: block;
    font-size: 12px;
    margin-top: 5px;
    text-align: center;
}


footer {
    display: block;
    unicode-bidi: isolate;
    font-family: var(--bit-font-family);
    background-color: #313131;
    color: #fff;
}
footer a:link {
    text-decoration: none;
    color: #FFFFFF;
}

footer a:link:hover {
    text-decoration: none;
    opacity: 80%;
}

.footer__main {
    padding: 20px 0 0;
    font-family: var(--bit-font-family);
}
/*input {*/
/*    !*background-color: #d3d3d3;*!*/
/*    font-family: var(--bit-font-family);*/
/*    border: none;*/
/*    border-radius: 1000px;*/
/*    font-size: 13px !important;*/
/*    !*line-height: 38px;*!*/
/*    font-weight: 600;*/
/*}*/


.footer__imprint-link {
    color: #fff;
    margin: -5px -10px;
    padding: 5px 10px;
    text-decoration: none;
}

.footer__title {
    font-size: 18px;
    line-height: 28px;
}
.footer__contact-link, .footer__quicklink {
    color: #fff;
    display: block;
    margin: 16px 0;
    text-decoration: none;
}

.bottom_footer {
    line-height: 2px;
    height: 11px;
    font-size: 18px;
    background-color: #202020;  //Templated
}

a.social_links {
    text-align: center;
    vertical-align: middle;
    color: #fff;
    font-size: 26px;
    height: 50px;
    width: 50px;
    line-height: 37px;
    border-radius: 100px;
    background-color: #b61d1d;  //Templated
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
}
a.social_links:hover{
    opacity: 80%;
}

/* Attendance Marking Buttons - Enhanced Visual Feedback */
[data-controller="attendance-mark"] .btn {
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

[data-controller="attendance-mark"] .btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

/* Override table opacity rules for attendance buttons */
.table-modern [data-controller="attendance-mark"] .btn {
    opacity: 1 !important;
}

.table-modern [data-controller="attendance-mark"] .btn:hover {
    opacity: 1 !important;
}

/* Add a subtle scale and shadow effect on hover for better visibility */
[data-controller="attendance-mark"] .btn:hover:not(:disabled):not(.active) {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* Present button hover - shows green when hovering */
[data-controller="attendance-mark"] .btn-outline-success:hover:not(:disabled):not(.active) {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

/* Absent button hover - shows red when hovering */
[data-controller="attendance-mark"] .btn-outline-danger:hover:not(:disabled):not(.active) {
    background-color: #bb2d3b;
    border-color: #bb2d3b;
    color: white;
}

/* Clear button hover - shows gray when hovering */
[data-controller="attendance-mark"] .btn-outline-secondary:hover:not(:disabled) {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Make active state more prominent - show full colors */
[data-controller="attendance-mark"] .btn.btn-success.active,
[data-controller="attendance-mark"] .btn.active.btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
    font-weight: 600;
    transform: scale(1);
}

[data-controller="attendance-mark"] .btn.btn-danger.active,
[data-controller="attendance-mark"] .btn.active.btn-danger {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
    color: white !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
    font-weight: 600;
    transform: scale(1);
}

/* Visual feedback for disabled state */
[data-controller="attendance-mark"] .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner styling */
[data-controller="attendance-mark"] .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

/* Flash animations for attendance feedback */
@keyframes flash-success {
    0% { background-color: rgba(40, 167, 69, 0.2); }
    50% { background-color: rgba(40, 167, 69, 0.4); }
    100% { background-color: transparent; }
}

@keyframes flash-error {
    0% { background-color: rgba(220, 53, 69, 0.2); }
    50% { background-color: rgba(220, 53, 69, 0.4); }
    100% { background-color: transparent; }
}

.flash-success {
    animation: flash-success 0.3s ease-in-out;
}

.flash-error {
    animation: flash-error 0.3s ease-in-out;
}

/*!* Listing page fly-in animation *!*/
/*@keyframes listing-fly-in {*/
/*    from {*/
/*        opacity: 0;*/
/*        transform: translateY(-20px);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/*.listing-page {*/
/*    animation: listing-fly-in 0.3s ease-out;*/
/*}*/

/*!* Optional: Staggered animation for table rows *!*/
/*.listing-page tbody tr {*/
/*    animation: listing-fly-in 0.3s ease-out backwards;*/
/*}*/

/*.listing-page tbody tr:nth-child(1) { animation-delay: 0.05s; }*/
/*.listing-page tbody tr:nth-child(2) { animation-delay: 0.1s; }*/
/*.listing-page tbody tr:nth-child(3) { animation-delay: 0.15s; }*/
/*.listing-page tbody tr:nth-child(4) { animation-delay: 0.2s; }*/
/*.listing-page tbody tr:nth-child(5) { animation-delay: 0.25s; }*/
/*.listing-page tbody tr:nth-child(6) { animation-delay: 0.3s; }*/
/*.listing-page tbody tr:nth-child(7) { animation-delay: 0.35s; }*/
/*.listing-page tbody tr:nth-child(8) { animation-delay: 0.4s; }*/
/*.listing-page tbody tr:nth-child(9) { animation-delay: 0.45s; }*/
/*.listing-page tbody tr:nth-child(10) { animation-delay: 0.5s; }*/


/* Date Input with Calendar Icon - Global application to all flatpickr inputs */
.date-input-with-icon,
input[data-controller~="flatpickr"].form-control {
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    padding-right: 2.5rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' class='bi bi-calendar3' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    cursor: pointer;
}

/* When inside form-floating, add extra height for the floating label */
.form-floating > .date-input-with-icon,
.form-floating > input[data-controller~="flatpickr"].form-control {
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Floating label adjustments for consistent styling with Bootstrap defaults */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color: #6c757d !important; /* Ensure grey color for all floating labels */
}

.date-input-with-icon:focus,
input[data-controller~="flatpickr"].form-control:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230d6efd' class='bi bi-calendar3' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

/* GLOBAL: All autocomplete dropdowns and select boxes must appear above all other elements */
/* This prevents dropdowns from appearing behind panels, cards, modals, etc. */
/* Using z-index 9999 to ensure they're always on top */
.ts-dropdown,
.ts-dropdown-content,
.dropdown-menu,
.select2-dropdown,
.select2-container--open,
.select2-container,
.choices__list--dropdown,
.autocomplete-results,
.datepicker-dropdown {
    z-index: 9999 !important;
    position: relative !important;
}

/* Flatpickr uses its own positioning - don't override */
/* Bootstrap modals are z-index 1055, so flatpickr needs to be higher */
.flatpickr-calendar {
    z-index: 10000 !important;
}

/* Ensure Tom Select wrapper doesn't interfere */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    position: relative;
    z-index: auto;
}

/* But the dropdown itself must be on top */
.ts-wrapper .ts-dropdown {
    z-index: 9999 !important;
    position: absolute !important;
}

/* Ensure modal footer doesn't cover dropdowns */
.modal.bit-modal .modal-footer {
    z-index: 1;
}