/* AGGRESSIVE FIX FOR CSS OVERFLOW ISSUES */

/* Force box-sizing on everything */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* Prevent horizontal scroll on root elements */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Fix body background to not overflow */
body::before,
body::after {
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* Container fixes */
.container {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Header fixes with clean alignment */
.header {
    max-width: 100vw !important;
    width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header::before,
.header::after {
    max-width: 100vw !important;
    width: 100vw !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
}

.header-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
}

.logo {
    padding-left: 0 !important;
    max-width: 300px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-shrink: 0 !important;
}

.logo img {
    flex-shrink: 0 !important;
}

.logo-text {
    margin: 0 !important;
    white-space: nowrap !important;
}

.header-actions {
    padding-right: 0 !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
}

.header-actions .btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

#userInfoDisplay {
    margin-right: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Login page fixes */
.login-card {
    max-width: min(450px, calc(100vw - 2rem)) !important;
    width: 100% !important;
    margin: 1rem auto !important;
    box-sizing: border-box !important;
}

.login-card::before,
.login-card::after {
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Form fixes */
.form-input,
.form-group,
.form-group input,
.form-group select,
.form-group textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Main content fixes */
.main-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.date-selector-card,
.timesheet-container,
.activity-tracker-card {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.date-selector-card::before,
.date-selector-card::after,
.timesheet-container::before,
.timesheet-container::after,
.activity-tracker-card::before,
.activity-tracker-card::after {
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Table fixes */
.table-wrapper {
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

/* Ensure no element can cause overflow */
main,
section,
div,
header,
footer {
    max-width: 100vw !important;
}