/* Component Overrides for Default Theme */

body[data-la-identity="default"] {
    font-family: var(--la-font-family-body) !important;
    background: linear-gradient(135deg, var(--la-color-bg-page) 0%, var(--la-color-bg-page-alt) 100%) !important;
    color: var(--la-color-text-base);
}

body[data-la-identity="default"] h1,
body[data-la-identity="default"] h2,
body[data-la-identity="default"] h3,
body[data-la-identity="default"] h4,
body[data-la-identity="default"] h5,
body[data-la-identity="default"] h6 {
    font-family: var(--la-font-family-headings) !important;
}

body[data-la-identity="default"] .navbar {
    height: var(--la-navbar-height);
    background-color: var(--la-color-primary) !important;
    box-shadow: var(--la-shadow-sm) !important;
}

body[data-la-identity="default"] .navbar .navbar-brand,
body[data-la-identity="default"] .navbar .nav-link {
    color: var(--la-color-text-on-primary) !important;
}

body[data-la-identity="default"] .card {
    background-color: var(--la-color-bg-surface);
    border-radius: var(--la-radius-base) !important;
    border-color: var(--la-color-border) !important;
}

body[data-la-identity="default"] .btn-primary {
    background-color: var(--la-color-primary) !important;
    border-color: var(--la-color-primary) !important;
    color: var(--la-color-text-on-primary) !important;
}

body[data-la-identity="default"] .form-control,
body[data-la-identity="default"] .form-select {
    background-color: var(--la-color-bg-surface) !important;
    color: var(--la-color-text-base) !important;
    border-color: var(--la-color-border) !important;
}

/* Login Page Styling */
body[data-la-identity="default"]:has(.login-card) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    background: linear-gradient(135deg, var(--la-color-bg-page) 0%, var(--la-color-bg-page-alt) 100%) !important;
}

body[data-la-identity="default"] .login-card {
    background-color: var(--la-color-bg-surface);
    padding: 2.5rem;
    border-radius: var(--la-radius-base);
    box-shadow: var(--la-shadow-lg);
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 1px solid var(--la-color-border);
}

body[data-la-identity="default"] .login-card .icon-circle {
    width: 70px;
    height: 70px;
    background-color: var(--la-color-primary);
    color: var(--la-color-text-on-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}