/* Font smoothing and text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Focus state style for keyboard navigation for the focusable elements */
[tabindex]:focus-visible,
input[type="file"]:focus-visible {
    outline: 0.125rem solid #4d65ff;
    outline-offset: 0.125rem;
}

/* Set color style to inherit */
.inherit-color * {
    color: inherit;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext> :not(div):first-child,
.w-richtext>div:first-child> :first-child {
    margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
    margin-bottom: 0 !important;
}

/* Make sure containers never lose their center alignment */
.container-medium,
.container-small,
.container-large {
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Make the following elements inherit typography styles from the parent and not have hardcoded values.
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/

/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/

/* Apply "..." after 3 lines of text */
.text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Adds inline flex display */
.display-inlineflex {
    display: inline-flex;
}

/* These classes are never overwritten */
.hide {
    display: none !important;
}

    .hide,
    .hide-tablet {
        display: none !important;
    }
}

    .hide-mobile-landscape {
        display: none !important;
    }
}

@media screen and (max-width: 479px) {
    .hide-mobile {
        display: none !important;
    }
}

.margin-0 {
    margin: 0rem !important;
}

.padding-0 {
    padding: 0rem !important;
}

.spacing-clean {
    padding: 0rem !important;
    margin: 0rem !important;
}

.margin-top {
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
}

.padding-top {
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
}

.margin-right {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
}

.padding-right {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
}

.margin-bottom {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}

.padding-bottom {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

.margin-left {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
}

.padding-left {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
}

.margin-horizontal {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
}

.padding-horizontal {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.margin-vertical {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}

.padding-vertical {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

/* ===== Invoice List Styling ===== */

/* Make invoice items feel clickable */
.invoice-item-clickable {
    cursor: pointer;                    /* Shows hand cursor on hover */
    transition: all 0.2s ease-in-out;   /* Smooth hover animation */
    border-left: 4px solid transparent; /* Prepares for accent border */
}

/* Hover effect for all invoices */
.invoice-item-clickable:hover {
    background-color: #e3f2fd !important;  /* Light blue highlight (Bootstrap "info" tint) */
    border-left-color: #2196f3;            /* Blue accent border */
    transform: translateX(4px);            /* Subtle slide effect */
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

/* Special styling for UNPAID invoices */
.invoice-unpaid {
    background-color: #fff8e1;  /* Very light amber for unpaid (subtle urgency) */
    border-left-color: #ffc107; /* Amber accent */
}

.invoice-unpaid:hover {
    background-color: #ffecb3 !important; /* Darker amber on hover */
    border-left-color: #ff9800;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}

/* Paid invoices get a subtle green accent */
.list-group-item:has(.text-success) {
    border-left-color: #28a745;
}
.list-group-item:has(.text-success):hover {
    background-color: #e8f5e9 !important;
    border-left-color: #28a745;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
}

/* Tiny "click hint" icon */
.invoice-item-clickable::after {
    content: "›";
    float: right;
    color: #6c757d;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s;
}
.invoice-item-clickable:hover::after {
    opacity: 1;
}

/* A subtle "new invoice" pulse */
@keyframes gentlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(33, 150, 243, 0); }
}

.invoice-unpaid:first-of-type {
    animation: gentlePulse 2s ease-in-out 1;
}

/* ===== Modal Close Button - Normal Size ===== */

/* Restore Bootstrap's default close button size */
.modal-header .btn-close {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 16px !important;           /* Standard Bootstrap size */
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    padding: 0.25em !important;
    z-index: 1057 !important;
    position: relative !important;
    background-color: transparent !important;
    filter: none !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Ensure the SVG "X" icon renders at correct size */
.modal-header .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;  /* Match button dimensions */
}

/* Hover effect - subtle */
.modal-header .btn-close:hover {
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

/* Fix modal header layout so button sits properly */
.modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    z-index: 1056 !important;
    position: relative !important;
    padding: 1rem 1rem !important;
}

/* Optional: Style the text "Close" span smaller */
.modal-header span[data-bs-dismiss="modal"] {
    font-size: 0.875rem !important;   /* Slightly smaller text */
    margin-left: 0.5rem !important;
    opacity: 0.7 !important;
}

.modal-header span[data-bs-dismiss="modal"]:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
}

/* ===== Fix Modal Being Hidden Behind Navbar ===== */

/* Raise modal backdrop above navbar */
.modal-backdrop {
    z-index: 1040 !important;
}

/* Raise modal itself above navbar */
.modal {
    z-index: 1050 !important;
}

/* Raise modal content (where the close button lives) */
.modal-content {
    z-index: 1055 !important;
}

/* Specifically raise the modal header + close button */
.modal-header {
    z-index: 1056 !important;
    position: relative !important;
}

.modal-header .btn-close {
    z-index: 1057 !important;
    position: relative !important;
}

/* If navbar has a high z-index, find and document it */
/* Common navbar z-index values to check: */
.navbar, .w-nav, [class*="navbar"] {
    /* Don't change this - just know what it is for debugging */
}

/* Add top margin to modal dialog so it opens below navbar */
.modal-dialog {
    margin-top: 80px !important;  /* Adjust based on your navbar height */
}

/* For larger screens, you might want it more centered */
@media (min-width: 768px) {
    .modal-dialog {
        margin-top: 100px !important;
    }
}

/* Apply to all dropdown items that toggle tabs */
.dropdown-item[data-bs-toggle="tab"] {
    cursor: pointer !important;
    transition: all 0.2s ease-in-out;
}

.dropdown-item[data-bs-toggle="tab"]:hover {
    background-color: #e3f2fd !important;
    color: #0d6efd !important;
    padding-left: 1.25rem !important;
}

/* ===== Password Field Styling ===== */

/* Eye button styling */
.input-group .btn-outline-secondary {
    border-left: none !important;
    min-width: 40px;
}

.input-group .form-control:focus + .btn-outline-secondary {
    box-shadow: none !important;
    border-color: #ced4da !important;
}

/* Password strength feedback */
.form-text.text-success {
    font-weight: 500;
}

.form-text.text-danger {
    font-weight: 500;
}

/* Confirm password error styling */
#passwordMatchError {
    display: none;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Visual cue for invalid confirm password */
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* ===== Flash Message Auto-Dismiss Animation ===== */

.alert {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.alert.dismissing {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;  /* Prevent clicking while fading */
}
.alert {
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.alert.dismissing {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Progress bar indicator */
.alert::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    animation: progress linear forwards;
}

.alert-success::after { animation-duration: 1.5s; background: rgba(40, 167, 69, 0.4); }
.alert-info::after { animation-duration: 2s; background: rgba(13, 202, 240, 0.4); }
.alert-warning::after { animation-duration: 3s; background: rgba(255, 193, 7, 0.4); }
.alert-danger::after { animation-duration: 5s; background: rgba(220, 53, 69, 0.4); }

@keyframes progress {
    from { width: 100%; }
    to { width: 0%; }
}
/* Careers page styles */
#careers-page .careers-right { color: var(--text-color--text-white); background-position: center center; background-repeat: no-repeat; background-size: cover; justify-content: flex-start; align-items: stretch; width: 55%; padding: 2.5rem; display: flex; flex-direction: column; position: absolute; top: 0; bottom: 0; left: auto; right: 0; }
#careers-page .careers-image-wrapper { width: 100%; height: 60%; max-height: 50vh; margin-bottom: 0; display: flex; align-items: center; justify-content: center; }
#careers-page .careers-image { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
#careers-page .careers-right .max-width-large { width: 100%; max-width: none; background-color: rgba(0,0,0,0.6); padding: 1.5rem 1.5rem; border-radius: 0; margin-top: 0; }
#careers-page .careers-right .text-size-xlarge { color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
#careers-page .padding-section-full-start.custom-1 { min-height: auto; padding-top: 4rem; }
@media screen and (max-width: 991px) { #careers-page .careers-right { width: 45%; padding: 2.5rem; } #careers-page .grid_2x1.custom-5 { grid-template-columns: 1fr 1fr; } #careers-page .careers-image-wrapper { height: 50%; } #careers-page .careers-right .max-width-large { width: 100%; max-width: none; padding: 1.5rem 1.5rem; } }
@media screen and (max-width: 767px) { #careers-page .careers-right { display: none; } #careers-page .grid_2x1.custom-5 { grid-template-columns: 1fr; } }

@media screen and (max-width: 767px) { #login-page .clients-right { display: none; } } @media screen and (min-width: 768px) and (max-width: 991px) { #login-page .clients-right { width: 45%; } #login-page .grid_2x1.custom-5 { grid-template-columns: 1fr 1fr; } }