:root {
    --primary-color: #dc3545;
    /* Red similar to the image */
    --primary-hover: #c82333;
    --bg-color: #e9ecef;
    --card-bg: #ffffff;
    --text-color: #333333;
    --text-muted: #6c757d;
    --input-border: #ced4da;
    --input-focus: #80bdff;
    --font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at 10% 20%, rgb(242, 242, 242) 0%, rgb(219, 219, 219) 90%);
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--text-color);
}

/* Login specific alignment */
body.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    background-color: var(--card-bg);
    padding: 2.5rem;
    border-radius: 8px;
    /* Slightly rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
    position: relative;
    z-index: 10;
}

/* Background swirl effect approximation */
body.login-body::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    transform: rotate(30deg);
    z-index: 0;
    pointer-events: none;
}

.logo-placeholder {
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

/* Ideally replace with actual img tag later */

h1 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text-color);
    font-weight: 500;
}

.form-group {
    margin-bottom: 1rem;
    text-align: left;
}

label {
    display: none;
    /* Hidden visually, but keep inputs accessible via placeholder */
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    box-sizing: border-box;
    /* Important for padding */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: var(--input-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    color: #fff;
    background-color: var(--primary-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
    font-weight: 500;
    text-align: center;
}

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

.btn-block {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
}

.forgot-password {
    display: block;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #007bff;
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
}

.footer {
    margin-top: 2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Dashboard Styles */
/* Dashboard Styles */
.navbar {
    background-color: #fff;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    /* Changed from relative */
    top: 0;
    z-index: 1000;
    /* Increased z-index for overlay */
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.navbar-brand {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
}

.brand-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    margin-left: 2rem;
}

.navbar-links {
    display: flex;
    gap: 30px;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-greeting {
    margin-right: 5px;
    color: #666;
}

.navbar-toggler {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.toggler-icon {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 10px;
    transition: all 0.3s linear;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .navbar {
        padding: 0.5rem;
    }

    .navbar-container {
        flex-wrap: wrap;
    }

    .navbar-brand {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        /* Context for absolute positioning */
        height: 60px;
        /* Ensure sufficient height */
    }

    .brand-link {
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* Logo stays in flow (Left) */
    .brand-link img {
        height: 40px;
        /* Resize if needed for mobile */
    }

    /* Title Centered Absolutely */
    .brand-link span {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.1rem;
        white-space: nowrap;
        text-align: center;
    }

    /* Toggler Right Absolutely */
    .navbar-toggler {
        display: flex;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .navbar-menu {
        /* display: none; Removed to allow transition */
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        margin-top: 0;
        /* Adjusted for smooth transition */
        background-color: #fff;
        border-top: 1px solid #eee;

        /* Animation properties */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease-in-out,
            opacity 0.4s ease-in-out,
            margin-top 0.4s ease;
    }

    .navbar-menu.active {
        /* display: flex; Already flex */
        max-height: 100vh;
        /* Arbitrary large height */
        opacity: 1;
        margin-top: 1rem;
    }

    .navbar-links {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .navbar-user {
        flex-direction: column;
        width: 100%;
        padding: 1rem 0;
        border-top: 1px solid #eee;
        gap: 10px;
    }

    .dropdown {
        width: 100%;
        display: block;
    }

    .dropdown-toggle {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        width: 100%;
        padding-left: 20px;

        /* Animation properties */
        display: block;
        /* Required for height transition */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        background-color: #f9f9f9;
        /* Keep logic to hover or click, typically mobile needs click */
    }

    /* Simple mobile fix for dropdowns: always show or use JS. 
       For now, let's allow them to be hoverable or just displayed if the parent is "active" 
       But css hover on mobile is tricky. 
       Let's make them always visible in mobile menu for simplicity or use a generic :hover */
    .dropdown:hover .dropdown-menu,
    .dropdown.active .dropdown-menu {
        /* display: block; Removed */
        max-height: 500px;
        /* Arbitrary large height */
        opacity: 1;
    }

    .user-greeting {
        margin: 0;
        text-align: center;
    }
}

.navbar-brand {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.card {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
    border-top: 4px solid var(--primary-color);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: var(--text-color);
}

.card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.alert {
    padding: 1rem;
    border-radius: 4px;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    margin-bottom: 1.5rem;
}

/* User Profile Widget Styles */
.user-card-container {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.user-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 300px;
    overflow: hidden;
    font-family: inherit;
    border: 1px solid #e0e0e0;
    align-self: flex-start;
}

.user-card-header {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    background: #fff;
}

.user-card-body {
    padding: 1.5rem;
    text-align: left;
}

.avatar-circle {
    width: 80px;
    height: 80px;
    background-color: #7f8c8d;
    border-radius: 50%;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 40px;
}

.user-info-group {
    margin-bottom: 0.75rem;
}

.user-label {
    display: block;
    font-size: 0.85rem;
    color: #7f8c8d;
    margin-bottom: 0.2rem;
}

.user-value {
    display: block;
    font-size: 0.95rem;
    color: #2c3e50;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Navbar Dropdown */
/* Navbar Dropdown - Base Styles (Mobile First / Accordion) */
.dropdown {
    position: relative;
    /* display: flex; - Removed to allow block layout in mobile if needed, but flex is okay for toggle alignment */
    /* On mobile, we might want the dropdown to be a block that contains the menu below it */
    display: block;
    width: 100%;
}

.dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    padding: 10px 0;
    /* Add touch padding */
}

.dropdown-menu {
    /* Mobile: Accordion Style */
    display: block;
    /* Required for max-height transition */
    position: static;
    /* Static flow to push content down */
    width: 100%;
    box-shadow: none;
    /* Integrated look */
    border: none;
    border-left: 2px solid var(--primary-color);
    /* Visual cue for hierarchy */
    background-color: #f8f9fa;
    /* Slightly darker to distinguish */
    padding: 0;

    /* Animation properties */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

/* Desktop Styles (Floating) */
@media (min-width: 769px) {
    .dropdown {
        display: flex;
        width: auto;
    }

    .dropdown-toggle {
        width: auto;
        padding: 0;
        justify-content: flex-start;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background-color: #fff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        border-left: none;
        padding: 0.5rem 0;
    }

    /* Hover effect for desktop */
    .dropdown:hover .dropdown-menu {
        max-height: 500px;
        opacity: 1;
    }
}

/* Active State (Mobile Click / Desktop Click) */
.dropdown.active .dropdown-menu {
    max-height: 500px;
    /* Expand to show content */
    opacity: 1;
}

.dropdown-item {
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    color: var(--text-color);
    transition: background-color 0.15s;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: var(--primary-color);
}

/* Layout for Liquidaciones Page */
.page-layout-2-col {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .page-layout-2-col {
        flex-direction: column;
        align-items: center;
        /* Center children horizontally */
    }

    .col-left {
        width: 100%;
        display: flex;
        justify-content: center;
        /* Center the card itself if needed */
        flex: 0 0 auto;
        /* Allow height to fit content */
    }

    .col-right {
        width: 100%;
        text-align: center;
        /* Optional: Center text in right col too */
    }
}

.col-left {
    flex: 0 0 300px;
}

.col-right {
    flex: 1;
    min-width: 300px;
}

/* Form Styles for Liquidaciones */
.form-card-body {
    padding: 2rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 1.5rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-primary-action {
    background-color: #007bff;
    /* Blue like the image */
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary-action:hover {
    background-color: #0056b3;
}

/* Responsive Table Styles */
.table-responsive,
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    margin-bottom: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}

.table-custom {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    /* Force scrolling on small screens if content is compressed */
    background-color: #fff;
}

.table-custom th,
.table-custom td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.table-custom th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.table-custom tr:hover {
    background-color: #f1f1f1;
}