@import '_content/webQT.Admin/webQT.Admin.paybcs56ej.bundle.scp.css';

/* _content/webQT/Features/Account/Pages/Login.razor.rz.scp.css */
.page-container[b-xagpqou84k] {
    background-color: #f5f7fa;
    min-height: calc(100vh - 60px);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-section[b-xagpqou84k] {
    display: flex;
    width: 100%;
    max-width: 900px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.brand-section[b-xagpqou84k] {
    flex: 1;
    background: linear-gradient(135deg, #1e3a8a 0%, #2d1b69 100%);
    color: white;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

    .brand-section h2[b-xagpqou84k] {
        margin: 0 0 1rem 0;
        font-size: 2rem;
        font-weight: 700;
    }

    .brand-section p[b-xagpqou84k] {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 2rem;
    }

.brand-decoration[b-xagpqou84k] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    z-index: 1;
    opacity: 0.3;
}

.form-section[b-xagpqou84k] {
    flex: 1;
    padding: 3rem 2rem;
}

    .form-section h3[b-xagpqou84k] {
        margin: 0 0 1.5rem 0;
        font-weight: 600;
        color: #333;
    }

.alert-message[b-xagpqou84k] {
    background-color: #f8d7da;
    color: #842029;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.form-field[b-xagpqou84k] {
    margin-bottom: 1.5rem;
}

    .form-field label[b-xagpqou84k] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #444;
    }

.input-control[b-xagpqou84k] {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .input-control:focus[b-xagpqou84k] {
        outline: none;
        border-color: #1e3a8a;
        box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
    }

.validation-summary[b-xagpqou84k] {
    color: #dc3545;
    margin-bottom: 1.5rem;
}

.login-button[b-xagpqou84k] {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background-color: #1e3a8a;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .login-button:hover[b-xagpqou84k] {
        background-color: #1e3599;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .login-section[b-xagpqou84k] {
        flex-direction: column;
        max-width: 500px;
    }

    .brand-section[b-xagpqou84k] {
        padding: 2rem;
    }

    .form-section[b-xagpqou84k] {
        padding: 2rem;
    }
}
/* _content/webQT/Features/Components/Layout/MainLayout.razor.rz.scp.css */
/* Modern Layout - Full Width */
.page[b-59p63jl0xi] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8fafc;
}

.main-header[b-59p63jl0xi] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #cbd5e1;
}

.main-content[b-59p63jl0xi] {
    flex: 1;
    width: 100%;
    background-color: #f8fafc;
}

.content[b-59p63jl0xi] {
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
}

    /* Remove default padding that was added for sidebar layout */
    .content > *[b-59p63jl0xi] {
        /* Let each page control its own padding */
    }

/* Error UI */
#blazor-error-ui[b-59p63jl0xi] {
    background: #fef2f2;
    color: #dc2626;
    bottom: 0;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    padding: 0.75rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1050;
    border-top: 1px solid #fecaca;
}

    #blazor-error-ui .dismiss[b-59p63jl0xi] {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 0.75rem;
        font-size: 1.2rem;
        color: #dc2626;
        transition: color 0.2s ease;
    }

        #blazor-error-ui .dismiss:hover[b-59p63jl0xi] {
            color: #b91c1c;
        }

    #blazor-error-ui .reload[b-59p63jl0xi] {
        color: #dc2626;
        text-decoration: underline;
        font-weight: 500;
    }

        #blazor-error-ui .reload:hover[b-59p63jl0xi] {
            color: #b91c1c;
        }

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-content[b-59p63jl0xi] {
        /* Mobile optimizations if needed */
    }
}

/* Ensure full width usage */
html[b-59p63jl0xi], body[b-59p63jl0xi] {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}
/* _content/webQT/Features/Components/Layout/NavMenu.razor.rz.scp.css */
/* Modern Top Navigation */
.top-navbar[b-0dz9simz5y] {
    width: 100%;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar-container[b-0dz9simz5y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 4rem;
    max-width: 100%;
    flex-wrap: nowrap;
    width: 100%;
}

/* Navbar Brand - Fixed Width - Now clickable */
.navbar-brand[b-0dz9simz5y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #1e293b;
    font-weight: 600;
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 200px;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .navbar-brand:hover[b-0dz9simz5y] {
        background-color: rgba(59, 130, 246, 0.1);
        color: #1e40af;
        transform: translateY(-1px);
    }

    .navbar-brand.active[b-0dz9simz5y] {
        background-color: rgba(59, 130, 246, 0.15);
        color: #1e40af;
    }

.brand-logo[b-0dz9simz5y] {
    height: 2.5rem;
    width: auto;
    border-radius: 4px;
}

.brand-text[b-0dz9simz5y] {
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle[b-0dz9simz5y] {
    display: none;
    background: none;
    border: none;
    color: #1e293b;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

    .mobile-menu-toggle:hover[b-0dz9simz5y] {
        background-color: rgba(30, 41, 59, 0.1);
    }

/* Navigation Links */
.navbar-nav[b-0dz9simz5y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    justify-content: center;
    margin: 0 2rem;
    flex-direction: row;
    flex-wrap: nowrap;
}

.nav-link[b-0dz9simz5y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: #475569;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

    .nav-link:hover[b-0dz9simz5y] {
        background-color: rgba(59, 130, 246, 0.1);
        color: #1e40af;
        transform: translateY(-1px);
    }

    /* Fix for Contact link - prevent it from being blue when active */
    .nav-link.active[b-0dz9simz5y] {
        background-color: transparent !important;
        color: #475569 !important;
        border: none !important;
    }

    .nav-link i[b-0dz9simz5y] {
        font-size: 1rem;
    }

/* Dropdown Styles */
.nav-dropdown[b-0dz9simz5y] {
    position: relative;
    display: inline-block;
}

.dropdown-toggle[b-0dz9simz5y] {
    position: relative;
}

.dropdown-arrow[b-0dz9simz5y] {
    font-size: 0.75rem;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.nav-dropdown.show .dropdown-arrow[b-0dz9simz5y],
.dropdown-menu.show ~ .dropdown-toggle .dropdown-arrow[b-0dz9simz5y] {
    transform: rotate(180deg);
}

.dropdown-menu[b-0dz9simz5y] {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    margin-top: 0.5rem;
}

    .dropdown-menu.show[b-0dz9simz5y] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.dropdown-menu-right[b-0dz9simz5y] {
    left: auto;
    right: 0;
}

.dropdown-item[b-0dz9simz5y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    border-radius: 4px;
    margin: 0.25rem;
}

    .dropdown-item:hover[b-0dz9simz5y] {
        background-color: #f3f4f6;
        color: #1f2937;
        transform: translateX(2px);
    }

    .dropdown-item.active[b-0dz9simz5y] {
        background-color: #dbeafe;
        color: #1e40af;
    }

    .dropdown-item i[b-0dz9simz5y] {
        font-size: 0.875rem;
        width: 1rem;
        text-align: center;
    }

.dropdown-header[b-0dz9simz5y] {
    padding: 0.75rem 1rem 0.5rem;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-divider[b-0dz9simz5y] {
    height: 1px;
    background-color: #e5e7eb;
    margin: 0.5rem 0;
}

.logout-item[b-0dz9simz5y] {
    color: #dc2626;
}

    .logout-item:hover[b-0dz9simz5y] {
        background-color: #fef2f2;
        color: #b91c1c;
    }

/* User Section - Fixed Width */
.navbar-user[b-0dz9simz5y] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    width: 200px;
    justify-content: flex-end;
}

.user-link[b-0dz9simz5y] {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #1e40af;
}

    .user-link:hover[b-0dz9simz5y] {
        background-color: rgba(59, 130, 246, 0.15);
        border-color: rgba(59, 130, 246, 0.3);
        color: #1e40af;
    }

.user-name[b-0dz9simz5y] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-link[b-0dz9simz5y] {
    background-color: #3b82f6;
    border: 1px solid #2563eb;
    color: white;
}

    .login-link:hover[b-0dz9simz5y] {
        background-color: #2563eb;
        border-color: #1d4ed8;
        color: white;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .navbar-container[b-0dz9simz5y] {
        padding: 0 1rem;
    }

    .navbar-nav[b-0dz9simz5y] {
        gap: 0.5rem;
    }

    .nav-link[b-0dz9simz5y] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .user-name[b-0dz9simz5y] {
        max-width: 100px;
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle[b-0dz9simz5y] {
        display: block;
    }

    .navbar-nav[b-0dz9simz5y] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        border-top: 1px solid #cbd5e1;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 999;
    }

        .navbar-nav.show[b-0dz9simz5y] {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

    .nav-link[b-0dz9simz5y] {
        width: 100%;
        justify-content: flex-start;
        padding: 1rem 2rem;
        border-radius: 0;
        color: #475569;
    }

    .dropdown-menu[b-0dz9simz5y] {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(0, 0, 0, 0.1);
        margin: 0;
        border-radius: 0;
    }

    .dropdown-item[b-0dz9simz5y] {
        color: #374151;
        margin: 0;
        border-radius: 0;
        padding-left: 3rem;
    }

        .dropdown-item:hover[b-0dz9simz5y] {
            background-color: #f3f4f6;
            color: #1f2937;
        }

    .navbar-user[b-0dz9simz5y] {
        position: absolute;
        top: 1rem;
        right: 4rem;
    }

    .user-name[b-0dz9simz5y] {
        display: none;
    }
}

@media (max-width: 480px) {
    .navbar-container[b-0dz9simz5y] {
        padding: 0 0.5rem;
    }

    .brand-text[b-0dz9simz5y] {
        display: none;
    }

    .navbar-user[b-0dz9simz5y] {
        right: 3rem;
    }

    .nav-link[b-0dz9simz5y] {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .dropdown-item[b-0dz9simz5y] {
        padding-left: 2rem;
    }
}

/* Smooth animations */
.nav-dropdown:hover .dropdown-menu[b-0dz9simz5y] {
    /* Don't auto-show on hover for better mobile experience */
}

/* Focus states for accessibility */
.nav-link:focus[b-0dz9simz5y],
.dropdown-item:focus[b-0dz9simz5y] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading states */
.nav-link.loading[b-0dz9simz5y] {
    opacity: 0.6;
    cursor: wait;
}

    .nav-link.loading[b-0dz9simz5y]::after {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 2px solid currentColor;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin-b-0dz9simz5y 1s linear infinite;
        margin-left: 0.5rem;
    }

@keyframes spin-b-0dz9simz5y {
    to {
        transform: rotate(360deg);
    }
}
/* _content/webQT/Features/Contact/ContactUs.razor.rz.scp.css */
/* Contact.razor.css */

.contact-container[b-oobolro5wg] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.contact-header[b-oobolro5wg] {
    text-align: center;
    margin-bottom: 3rem;
}

    .contact-header h1[b-oobolro5wg] {
        font-size: 2.5rem;
        color: var(--primary-color, #0366d6);
        margin-bottom: 1rem;
    }

    .contact-header p[b-oobolro5wg] {
        font-size: 1.1rem;
        color: var(--text-secondary, #6c757d);
        max-width: 600px;
        margin: 0 auto;
    }

.contact-content[b-oobolro5wg] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.contact-form-container[b-oobolro5wg] {
    flex: 1 1 600px;
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.form-group[b-oobolro5wg] {
    margin-bottom: 1.5rem;
}

    .form-group label[b-oobolro5wg] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: var(--text-primary, #212529);
    }

.form-control[b-oobolro5wg] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-control:focus[b-oobolro5wg] {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.contact-info-container[b-oobolro5wg] {
    flex: 1 1 300px;
}

.contact-info[b-oobolro5wg] {
    background-color: var(--primary-color, #0366d6);
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    height: 100%;
}

    .contact-info h3[b-oobolro5wg] {
        font-size: 1.5rem;
        margin-bottom: 2rem;
        position: relative;
        padding-bottom: 0.75rem;
    }

        .contact-info h3[b-oobolro5wg]::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background-color: #fff;
        }

.contact-detail[b-oobolro5wg] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

    .contact-detail i[b-oobolro5wg] {
        font-size: 1.2rem;
        margin-right: 1rem;
        margin-top: 0.25rem;
    }

    .contact-detail p[b-oobolro5wg] {
        margin: 0;
        line-height: 1.6;
    }

.social-links[b-oobolro5wg] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

    .social-links a[b-oobolro5wg] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        color: #fff;
        font-size: 1.2rem;
        transition: background-color 0.3s ease;
    }

        .social-links a:hover[b-oobolro5wg] {
            background-color: rgba(255, 255, 255, 0.3);
        }

/* Button styles */
.btn[b-oobolro5wg] {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 4px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary[b-oobolro5wg] {
    color: #fff;
    background-color: var(--primary-color, #0366d6);
    border: 1px solid var(--primary-color, #0366d6);
}

    .btn-primary:hover[b-oobolro5wg] {
        background-color: #0257b5;
        border-color: #0257b5;
    }

    .btn-primary:focus[b-oobolro5wg] {
        box-shadow: 0 0 0 0.2rem rgba(3, 102, 214, 0.5);
    }

    .btn-primary:disabled[b-oobolro5wg] {
        opacity: 0.65;
        cursor: not-allowed;
    }

/* Validation styles */
.validation-message[b-oobolro5wg] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.valid.modified:not([type=checkbox])[b-oobolro5wg] {
    outline: 1px solid #26b050;
}

.invalid[b-oobolro5wg] {
    outline: 1px solid #dc3545;
}

.validation-summary-errors[b-oobolro5wg] {
    color: #dc3545;
    margin-bottom: 1rem;
}

/* Alert styles */
.alert[b-oobolro5wg] {
    position: relative;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success[b-oobolro5wg] {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert i[b-oobolro5wg] {
    margin-right: 0.5rem;
}

/* Form check */
.form-check[b-oobolro5wg] {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

.form-check-input[b-oobolro5wg] {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}

.form-check-label[b-oobolro5wg] {
    margin-bottom: 0;
}

/* Spinner */
.spinner-border[b-oobolro5wg] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-oobolro5wg .75s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spinner-border-b-oobolro5wg {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-content[b-oobolro5wg] {
        flex-direction: column;
    }

    .contact-form-container[b-oobolro5wg],
    .contact-info-container[b-oobolro5wg] {
        flex: 1 1 100%;
    }

    .contact-info-container[b-oobolro5wg] {
        order: -1;
    }
}
/* _content/webQT/Features/Home/Home.razor.rz.scp.css */
.hero-section h1[b-h2j1exhb5r] {
    font-size: 3.5rem;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
}

.tagline[b-h2j1exhb5r] {
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
}

.companies-list[b-h2j1exhb5r] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.certification-item p[b-h2j1exhb5r] {
    font-size: 0.9rem;
    color: #666;
}

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

.products-list[b-h2j1exhb5r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
/* Basic styles */
.home-container[b-h2j1exhb5r] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
}

h1[b-h2j1exhb5r], h2[b-h2j1exhb5r], h3[b-h2j1exhb5r] {
    margin-bottom: 1rem;
}

h1[b-h2j1exhb5r] {
    font-size: 2.5rem;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

h2[b-h2j1exhb5r] {
    font-size: 2rem;
    color: #1a3c6e;
}

h3[b-h2j1exhb5r] {
    font-size: 1.4rem;
    color: #1a3c6e;
}

p[b-h2j1exhb5r] {
    margin-bottom: 1rem;
}

ul[b-h2j1exhb5r] {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

li[b-h2j1exhb5r] {
    margin-bottom: 0.5rem;
}

/* Button styles */
.btn-primary[b-h2j1exhb5r], .btn-secondary[b-h2j1exhb5r] {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-primary[b-h2j1exhb5r] {
    background-color: #1a3c6e;
    color: white;
    border: 1px solid white;
    font-size: 1rem;
}

    .btn-primary:hover[b-h2j1exhb5r] {
        background-color: #0e2a54;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

.btn-secondary[b-h2j1exhb5r] {
    background-color: #1a3c6e;
    color: white;
    border: 1px solid white;
}

    .btn-secondary:hover[b-h2j1exhb5r] {
        background-color: #0e2a54;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

/* Hero section with slideshow */
.hero-section[b-h2j1exhb5r] {
    position: relative;
    text-align: center;
    padding: 8rem 2rem;
    color: white;
    overflow: hidden;
    height: 600px; /* Fixed height for consistent slideshow */
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow[b-h2j1exhb5r] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide[b-h2j1exhb5r] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease;
}

    .slide.active[b-h2j1exhb5r] {
        opacity: 1;
    }

.slide1[b-h2j1exhb5r] {
    background-image: url('images/hero1.jpg');
}

.slide2[b-h2j1exhb5r] {
    background-image: url('images/hero2.jpg');
}

.slide3[b-h2j1exhb5r] {
    background-image: url('images/hero3.jpg');
}

.slide-overlay[b-h2j1exhb5r] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(60, 60, 60, 0.5); /* Dim gray overlay at 50% opacity */
}

.hero-content[b-h2j1exhb5r] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
}

.about-section[b-h2j1exhb5r],
.products-section[b-h2j1exhb5r],
.companies-section[b-h2j1exhb5r],
.certifications-section[b-h2j1exhb5r] {
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.about-section[b-h2j1exhb5r] {
    background-color: white;
}

.stats-row[b-h2j1exhb5r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 2rem;
}

.stat-item[b-h2j1exhb5r] {
    text-align: center;
    padding: 1rem;
    margin-bottom: 1rem;
}

.stat-number[b-h2j1exhb5r] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a3c6e;
}

.stat-label[b-h2j1exhb5r] {
    color: #666;
}

/* Product icons */
.product-item[b-h2j1exhb5r] {
    position: relative;
    padding: 1.5rem;
    padding-top: 4.5rem; /* Space for icon */
    background-color: #f9f9f9;
    border-radius: 4px;
}

    .product-item[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        height: 2.5rem;
        width: 2.5rem;
        background-color: rgba(26, 60, 110, 0.1);
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-item:nth-child(1)[b-h2j1exhb5r]::before {
        content: '■';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(2)[b-h2j1exhb5r]::before {
        content: '▬';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(3)[b-h2j1exhb5r]::before {
        content: '●';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(4)[b-h2j1exhb5r]::before {
        content: '≡';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(5)[b-h2j1exhb5r]::before {
        content: '‖';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(6)[b-h2j1exhb5r]::before {
        content: '★';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

/* Company logos */
.company-item[b-h2j1exhb5r] {
    position: relative;
    padding: 1.5rem;
    padding-top: 7rem; /* Space for logo */
    background-color: #f9f9f9;
    border-radius: 4px;
}

    .company-item:nth-child(1)[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        height: 5rem;
        width: calc(100% - 3rem);
        background-image: url('images/pytco-logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
    }

    .company-item:nth-child(2)[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        height: 5rem;
        width: calc(100% - 3rem);
        background-image: url('images/regiopytsa-logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
    }

    .company-item:nth-child(3)[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        height: 5rem;
        width: calc(100% - 3rem);
        background-image: url('images/quality-tube-logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
    }

.company-links[b-h2j1exhb5r] {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.social-links a[b-h2j1exhb5r] {
    margin-left: 1rem;
    color: #1a3c6e;
    text-decoration: none;
}

.company-website[b-h2j1exhb5r] {
    color: #1a3c6e;
    text-decoration: none;
    font-weight: 600;
}

/* Certification logos */
/* Certification logos with larger size */
.certification-item[b-h2j1exhb5r] {
    position: relative;
    padding: 1.5rem;
    padding-left: 7rem; /* Increased space for logo */
    background-color: #f9f9f9;
    border-radius: 4px;
    min-height: 8rem; /* Increased minimum height */
}

    .certification-item[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 1.5rem;
        transform: translateY(-50%);
        height: 6rem; /* Doubled from 3.5rem to 6rem */
        width: 6rem; /* Doubled from 3.5rem to 6rem */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .certification-item h3[b-h2j1exhb5r] {
        font-size: 1.5rem; /* Slightly larger title */
        margin-bottom: 0.8rem;
    }

    .certification-item p[b-h2j1exhb5r] {
        font-size: 1rem; /* Slightly larger text */
        color: #555;
        line-height: 1.5;
    }

/* Better spacing for the certification grid */
.certifications-list[b-h2j1exhb5r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Wider cards */
    gap: 1.8rem;
    margin-top: 2rem;
}

    .certification-item:nth-child(1)[b-h2j1exhb5r]::before {
        background-image: url('images/api-logo.png');
    }

    .certification-item:nth-child(2)[b-h2j1exhb5r]::before {
        background-image: url('images/qms-logo.png');
    }

    .certification-item:nth-child(3)[b-h2j1exhb5r]::before {
        background-image: url('images/api-q-logo.png');
    }

    .certification-item:nth-child(4)[b-h2j1exhb5r]::before {
        background-image: url('images/ul-logo.png');
    }

    .certification-item:nth-child(5)[b-h2j1exhb5r]::before {
        background-image: url('images/iso-17025-logo.png');
    }

    .certification-item:nth-child(6)[b-h2j1exhb5r]::before {
        background-image: url('images/iso-9001-logo.png');
    }

    .certification-item:nth-child(7)[b-h2j1exhb5r]::before {
        background-image: url('images/esr-logo.png');
    }

    .certification-item:nth-child(8)[b-h2j1exhb5r]::before {
        background-image: url('images/gptw-logo.png');
    }

/* Contact section */
.contact-section[b-h2j1exhb5r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 3rem 2rem;
    background-color: #1a3c6e; /* Solid blue background instead of image */
    color: white;
}

.contact-info[b-h2j1exhb5r] {
    flex: 1;
    min-width: 300px;
    margin-right: 2rem;
    margin-bottom: 2rem;
}

    .contact-info h2[b-h2j1exhb5r] {
        color: white;
    }

.location-info[b-h2j1exhb5r] {
    flex: 0 0 300px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 4px;
}

    .location-info h3[b-h2j1exhb5r] {
        color: white;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-row[b-h2j1exhb5r] {
        flex-direction: column;
    }

    .contact-section[b-h2j1exhb5r] {
        flex-direction: column;
    }

    .contact-info[b-h2j1exhb5r] {
        margin-right: 0;
    }

    .location-info[b-h2j1exhb5r] {
        width: 100%;
    }
}
.hero-section h1[b-h2j1exhb5r] {
    font-size: 3.5rem;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
}

.tagline[b-h2j1exhb5r] {
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
}

.companies-list[b-h2j1exhb5r] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.certification-item p[b-h2j1exhb5r] {
    font-size: 0.9rem;
    color: #666;
}

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

.products-list[b-h2j1exhb5r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
/* Basic styles */
.home-container[b-h2j1exhb5r] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
}

h1[b-h2j1exhb5r], h2[b-h2j1exhb5r], h3[b-h2j1exhb5r] {
    margin-bottom: 1rem;
}

h1[b-h2j1exhb5r] {
    font-size: 2.5rem;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

h2[b-h2j1exhb5r] {
    font-size: 2rem;
    color: #1a3c6e;
}

h3[b-h2j1exhb5r] {
    font-size: 1.4rem;
    color: #1a3c6e;
}

p[b-h2j1exhb5r] {
    margin-bottom: 1rem;
}

ul[b-h2j1exhb5r] {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

li[b-h2j1exhb5r] {
    margin-bottom: 0.5rem;
}

/* Button styles */
.btn-primary[b-h2j1exhb5r], .btn-secondary[b-h2j1exhb5r] {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-primary[b-h2j1exhb5r] {
    background-color: #1a3c6e;
    color: white;
    border: 1px solid white;
    font-size: 1rem;
}

    .btn-primary:hover[b-h2j1exhb5r] {
        background-color: #0e2a54;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

.btn-secondary[b-h2j1exhb5r] {
    background-color: #1a3c6e;
    color: white;
    border: 1px solid white;
}

    .btn-secondary:hover[b-h2j1exhb5r] {
        background-color: #0e2a54;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

/* Hero section with slideshow */
.hero-section[b-h2j1exhb5r] {
    position: relative;
    text-align: center;
    padding: 8rem 2rem;
    color: white;
    overflow: hidden;
    height: 600px; /* Fixed height for consistent slideshow */
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow[b-h2j1exhb5r] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide[b-h2j1exhb5r] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease;
}

    .slide.active[b-h2j1exhb5r] {
        opacity: 1;
    }

.slide1[b-h2j1exhb5r] {
    background-image: url('images/hero1.jpg');
}

.slide2[b-h2j1exhb5r] {
    background-image: url('images/hero2.jpg');
}

.slide3[b-h2j1exhb5r] {
    background-image: url('images/hero3.jpg');
}

.slide-overlay[b-h2j1exhb5r] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(60, 60, 60, 0.5); /* Dim gray overlay at 50% opacity */
}

.hero-content[b-h2j1exhb5r] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
}

.about-section[b-h2j1exhb5r],
.products-section[b-h2j1exhb5r],
.companies-section[b-h2j1exhb5r],
.certifications-section[b-h2j1exhb5r] {
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.about-section[b-h2j1exhb5r] {
    background-color: white;
}

.stats-row[b-h2j1exhb5r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 2rem;
}

.stat-item[b-h2j1exhb5r] {
    text-align: center;
    padding: 1rem;
    margin-bottom: 1rem;
}

.stat-number[b-h2j1exhb5r] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a3c6e;
}

.stat-label[b-h2j1exhb5r] {
    color: #666;
}

/* Product icons */
.product-item[b-h2j1exhb5r] {
    position: relative;
    padding: 1.5rem;
    padding-top: 4.5rem; /* Space for icon */
    background-color: #f9f9f9;
    border-radius: 4px;
}

    .product-item[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        height: 2.5rem;
        width: 2.5rem;
        background-color: rgba(26, 60, 110, 0.1);
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-item:nth-child(1)[b-h2j1exhb5r]::before {
        content: '■';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(2)[b-h2j1exhb5r]::before {
        content: '▬';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(3)[b-h2j1exhb5r]::before {
        content: '●';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(4)[b-h2j1exhb5r]::before {
        content: '≡';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(5)[b-h2j1exhb5r]::before {
        content: '‖';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

    .product-item:nth-child(6)[b-h2j1exhb5r]::before {
        content: '★';
        font-size: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #1a3c6e;
    }

/* Company logos */
.company-item[b-h2j1exhb5r] {
    position: relative;
    padding: 1.5rem;
    padding-top: 7rem; /* Space for logo */
    background-color: #f9f9f9;
    border-radius: 4px;
}

    .company-item:nth-child(1)[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        height: 5rem;
        width: calc(100% - 3rem);
        background-image: url('images/pytco-logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
    }

    .company-item:nth-child(2)[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        height: 5rem;
        width: calc(100% - 3rem);
        background-image: url('images/regiopytsa-logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
    }

    .company-item:nth-child(3)[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        height: 5rem;
        width: calc(100% - 3rem);
        background-image: url('images/quality-tube-logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
    }

.company-links[b-h2j1exhb5r] {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.social-links a[b-h2j1exhb5r] {
    margin-left: 1rem;
    color: #1a3c6e;
    text-decoration: none;
}

.company-website[b-h2j1exhb5r] {
    color: #1a3c6e;
    text-decoration: none;
    font-weight: 600;
}

/* Certification logos */
.certification-item[b-h2j1exhb5r] {
    position: relative;
    padding: 1.5rem;
    padding-left: 5rem; /* Space for logo */
    background-color: #f9f9f9;
    border-radius: 4px;
    min-height: 6rem;
}

    .certification-item[b-h2j1exhb5r]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        height: 3.5rem;
        width: 3.5rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .certification-item:nth-child(1)[b-h2j1exhb5r]::before {
        background-image: url('images/api-logo.png');
    }

    .certification-item:nth-child(2)[b-h2j1exhb5r]::before {
        background-image: url('images/iso-logo.png');
    }

    .certification-item:nth-child(3)[b-h2j1exhb5r]::before {
        background-image: url('images/api-q-logo.png');
    }

    .certification-item:nth-child(4)[b-h2j1exhb5r]::before {
        background-image: url('images/ul-logo.png');
    }

    .certification-item:nth-child(5)[b-h2j1exhb5r]::before {
        background-image: url('images/iso-17025-logo.png');
    }

    .certification-item:nth-child(6)[b-h2j1exhb5r]::before {
        background-image: url('images/iso-9001-logo.png');
    }

    .certification-item:nth-child(7)[b-h2j1exhb5r]::before {
        background-image: url('images/esr-logo.png');
    }

    .certification-item:nth-child(8)[b-h2j1exhb5r]::before {
        background-image: url('images/gptw-logo.png');
    }

/* Contact section */
.contact-section[b-h2j1exhb5r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 3rem 2rem;
    background-color: #1a3c6e; /* Solid blue background instead of image */
    color: white;
}

.contact-info[b-h2j1exhb5r] {
    flex: 1;
    min-width: 300px;
    margin-right: 2rem;
    margin-bottom: 2rem;
}

    .contact-info h2[b-h2j1exhb5r] {
        color: white;
    }

.location-info[b-h2j1exhb5r] {
    flex: 0 0 300px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 4px;
}

    .location-info h3[b-h2j1exhb5r] {
        color: white;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-row[b-h2j1exhb5r] {
        flex-direction: column;
    }

    .contact-section[b-h2j1exhb5r] {
        flex-direction: column;
    }

    .contact-info[b-h2j1exhb5r] {
        margin-right: 0;
    }

    .location-info[b-h2j1exhb5r] {
        width: 100%;
    }
}
/* Larger certification logos */
.certification-item[b-h2j1exhb5r] {
    padding-left: 9rem !important;
    min-height: 8rem !important;
}

    .certification-item[b-h2j1exhb5r]::before {
        height: 7rem !important;
        width: 7rem !important;
        left: 1.5rem !important;
    }

.certifications-list[b-h2j1exhb5r] {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}
/* _content/webQT/Features/Inventories/Adjustments/AdjustmentForm.razor.rz.scp.css */
.adjustment-form-page[b-klgnp9q4aw] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 2rem;
}

.page-header[b-klgnp9q4aw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.header-left[b-klgnp9q4aw] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.btn-back[b-klgnp9q4aw] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-back:hover[b-klgnp9q4aw] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.3);
    }

.header-title h1[b-klgnp9q4aw] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .header-title h1 i[b-klgnp9q4aw] {
        color: #3b82f6;
        font-size: 1.5rem;
    }

.header-title .subtitle[b-klgnp9q4aw] {
    color: #64748b;
    font-size: 0.875rem;
}

.status-badge[b-klgnp9q4aw] {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
}

.status-completed[b-klgnp9q4aw] {
    background: #d1fae5;
    color: #065f46;
}

.status-progress[b-klgnp9q4aw] {
    background: #dbeafe;
    color: #1e40af;
}

.header-actions[b-klgnp9q4aw] {
    display: flex;
    gap: 1rem;
}

.btn-secondary[b-klgnp9q4aw],
.btn-outline[b-klgnp9q4aw],
.btn-success[b-klgnp9q4aw],
.btn-primary[b-klgnp9q4aw] {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-secondary[b-klgnp9q4aw] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-klgnp9q4aw] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.3);
    }

.btn-outline[b-klgnp9q4aw] {
    background: white;
    border: 2px solid #cbd5e1;
    color: #475569;
}

    .btn-outline:hover:not(:disabled)[b-klgnp9q4aw] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

.btn-success[b-klgnp9q4aw] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

    .btn-success:hover:not(:disabled)[b-klgnp9q4aw] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
    }

.btn-primary[b-klgnp9q4aw] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-klgnp9q4aw] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    }

button:disabled[b-klgnp9q4aw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-content[b-klgnp9q4aw] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-card[b-klgnp9q4aw],
.scanner-card[b-klgnp9q4aw],
.items-card[b-klgnp9q4aw] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-klgnp9q4aw] {
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .card-header h3[b-klgnp9q4aw] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .card-header h3 i[b-klgnp9q4aw] {
            color: #3b82f6;
            font-size: 1.25rem;
        }

.card-body[b-klgnp9q4aw] {
    padding: 2rem;
}

.info-grid[b-klgnp9q4aw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-group[b-klgnp9q4aw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .form-group label[b-klgnp9q4aw] {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.required[b-klgnp9q4aw] {
    color: #ef4444;
}

.form-control[b-klgnp9q4aw] {
    padding: 0.875rem 1rem;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.9375rem;
    background: white;
    color: #1e293b;
    transition: all 0.3s ease;
    font-family: inherit;
}

    .form-control:focus[b-klgnp9q4aw] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }

    .form-control:read-only[b-klgnp9q4aw] {
        background: #f8fafc;
        color: #64748b;
    }

.scanner-actions[b-klgnp9q4aw] {
    display: flex;
    gap: 1rem;
}

.btn-scan[b-klgnp9q4aw],
.btn-manual[b-klgnp9q4aw] {
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-scan[b-klgnp9q4aw] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
}

    .btn-scan:hover[b-klgnp9q4aw] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    }

    .btn-scan.active[b-klgnp9q4aw] {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    }

.btn-manual[b-klgnp9q4aw] {
    background: white;
    border: 2px solid #3b82f6;
    color: #3b82f6;
}

    .btn-manual:hover[b-klgnp9q4aw] {
        background: #3b82f6;
        color: white;
    }

.scanner-viewport[b-klgnp9q4aw] {
    padding: 2rem;
}

.scanner-placeholder[b-klgnp9q4aw] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
}

    .scanner-placeholder i[b-klgnp9q4aw] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .scanner-placeholder p[b-klgnp9q4aw] {
        margin: 0.5rem 0;
        font-weight: 600;
        font-size: 1.125rem;
    }

    .scanner-placeholder small[b-klgnp9q4aw] {
        color: #94a3b8;
    }

.items-summary[b-klgnp9q4aw] {
    display: flex;
    gap: 1.5rem;
}

.summary-item[b-klgnp9q4aw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

    .summary-item.positive[b-klgnp9q4aw] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
    }

    .summary-item.negative[b-klgnp9q4aw] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
    }

    .summary-item i[b-klgnp9q4aw] {
        font-size: 1.25rem;
    }

.items-table-container[b-klgnp9q4aw] {
    padding: 2rem;
    overflow-x: auto;
}

.items-table[b-klgnp9q4aw] {
    width: 100%;
    border-collapse: collapse;
}

    .items-table thead[b-klgnp9q4aw] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .items-table th[b-klgnp9q4aw] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .items-table td[b-klgnp9q4aw] {
        padding: 1rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .items-table tbody tr:hover[b-klgnp9q4aw] {
        background: #f8fafc;
    }

.sequence[b-klgnp9q4aw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-radius: 8px;
    font-weight: 700;
}

.qty-adjustment[b-klgnp9q4aw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 700;
}

    .qty-adjustment.positive[b-klgnp9q4aw] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
    }

    .qty-adjustment.negative[b-klgnp9q4aw] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
    }

.time-badge[b-klgnp9q4aw] {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.875rem;
    color: #64748b;
}

.btn-remove[b-klgnp9q4aw] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: all 0.2s ease;
}

    .btn-remove:hover[b-klgnp9q4aw] {
        color: #dc2626;
        transform: scale(1.2);
    }

.empty-items[b-klgnp9q4aw] {
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
}

    .empty-items i[b-klgnp9q4aw] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-items p[b-klgnp9q4aw] {
        margin: 0.5rem 0;
        font-weight: 600;
        font-size: 1.125rem;
    }

    .empty-items small[b-klgnp9q4aw] {
        color: #94a3b8;
    }

.modal-overlay[b-klgnp9q4aw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-container[b-klgnp9q4aw] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

    .modal-container.large[b-klgnp9q4aw] {
        max-width: 900px;
    }

    .modal-container.small[b-klgnp9q4aw] {
        max-width: 500px;
    }

.modal-header[b-klgnp9q4aw] {
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

    .modal-header h3[b-klgnp9q4aw] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .modal-header h3 i[b-klgnp9q4aw] {
            color: #3b82f6;
        }

    .modal-header h4[b-klgnp9q4aw] {
        margin: 0 0 0.5rem 0;
        font-size: 1.125rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .modal-header h4 i[b-klgnp9q4aw] {
            color: #3b82f6;
        }

.btn-close[b-klgnp9q4aw] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

    .btn-close:hover[b-klgnp9q4aw] {
        background: #f1f5f9;
        color: #1e293b;
    }

.modal-body[b-klgnp9q4aw] {
    padding: 2rem;
}

.modal-footer[b-klgnp9q4aw] {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.form-row[b-klgnp9q4aw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.bundle-labels-section[b-klgnp9q4aw] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.section-header[b-klgnp9q4aw] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.count-badge[b-klgnp9q4aw] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
}

.hint-text[b-klgnp9q4aw] {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    font-style: italic;
    display: block;
    margin-top: 0.5rem;
}

.labels-grid[b-klgnp9q4aw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.label-input-group[b-klgnp9q4aw] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

    .label-input-group:hover[b-klgnp9q4aw] {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .label-input-group.valid[b-klgnp9q4aw] {
        border-color: #10b981;
        background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    }

    .label-input-group.duplicate[b-klgnp9q4aw] {
        border-color: #ef4444;
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    }

.bundle-badge[b-klgnp9q4aw] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8125rem;
    white-space: nowrap;
    min-width: 90px;
    text-align: center;
}

.label-input-wrapper[b-klgnp9q4aw] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .label-input-wrapper i[b-klgnp9q4aw] {
        color: #3b82f6;
        font-size: 1.125rem;
    }

.label-input[b-klgnp9q4aw] {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1rem;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, monospace;
    background: white;
    color: #1e293b;
    transition: all 0.3s ease;
}

    .label-input:focus[b-klgnp9q4aw] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }

.btn-clear-label[b-klgnp9q4aw] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;
}

    .btn-clear-label:hover[b-klgnp9q4aw] {
        background: #e2e8f0;
        color: #1e293b;
        transform: translateY(-50%) scale(1.1);
    }

.label-status[b-klgnp9q4aw] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.text-success[b-klgnp9q4aw] {
    color: #10b981;
}

.text-muted[b-klgnp9q4aw] {
    color: #cbd5e1;
}

.warning-box[b-klgnp9q4aw] {
    padding: 1.25rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    border-left: 4px solid #f59e0b;
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    color: #92400e;
}

    .warning-box i[b-klgnp9q4aw] {
        font-size: 1.5rem;
        flex-shrink: 0;
    }

.warning-content[b-klgnp9q4aw] {
    flex: 1;
}

    .warning-content strong[b-klgnp9q4aw] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.9375rem;
    }

    .warning-content p[b-klgnp9q4aw] {
        margin: 0.5rem 0;
    }

    .warning-content ul[b-klgnp9q4aw] {
        margin: 0.5rem 0 0 1.5rem;
        padding: 0;
    }

    .warning-content li[b-klgnp9q4aw] {
        font-weight: 600;
        font-family: 'SF Mono', Monaco, monospace;
    }

@media (max-width: 768px) {
    .adjustment-form-page[b-klgnp9q4aw] {
        padding: 1rem;
    }

    .page-header[b-klgnp9q4aw] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-klgnp9q4aw] {
        flex-direction: column;
    }

        .header-actions button[b-klgnp9q4aw] {
            width: 100%;
        }

    .info-grid[b-klgnp9q4aw],
    .form-row[b-klgnp9q4aw] {
        grid-template-columns: 1fr;
    }

    .labels-grid[b-klgnp9q4aw] {
        grid-template-columns: 1fr;
    }

    .label-input-group[b-klgnp9q4aw] {
        grid-template-columns: 1fr;
    }

    .bundle-badge[b-klgnp9q4aw] {
        width: 100%;
    }
}
/* _content/webQT/Features/Inventories/Adjustments/AdjustmentsTab.razor.rz.scp.css */
/* Adjustments Tab Styles */

.adjustments-container[b-5osix2bx7n] {
    padding: 0;
}

.adjustments-header[b-5osix2bx7n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.header-left h2[b-5osix2bx7n] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-left .subtitle[b-5osix2bx7n] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.header-actions[b-5osix2bx7n] {
    display: flex;
    gap: 0.75rem;
}

.filters-card[b-5osix2bx7n] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filters-grid[b-5osix2bx7n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filter-group[b-5osix2bx7n] {
    display: flex;
    flex-direction: column;
}

    .filter-group label[b-5osix2bx7n] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.form-control[b-5osix2bx7n] {
    padding: 0.625rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-control:focus[b-5osix2bx7n] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.form-hint[b-5osix2bx7n] {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.25rem;
    display: block;
}

.btn-secondary[b-5osix2bx7n] {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 0.625rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-secondary:hover[b-5osix2bx7n] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #475569;
    }

.table-card[b-5osix2bx7n] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table-container[b-5osix2bx7n] {
    overflow-x: auto;
}

.adjustments-table[b-5osix2bx7n] {
    width: 100%;
    border-collapse: collapse;
}

    .adjustments-table thead[b-5osix2bx7n] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    }

    .adjustments-table th[b-5osix2bx7n] {
        padding: 1rem 1.25rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #fcd34d;
    }

    .adjustments-table tbody tr[b-5osix2bx7n] {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.2s ease;
    }

        .adjustments-table tbody tr:hover[b-5osix2bx7n] {
            background: #fffbeb;
        }

        .adjustments-table tbody tr.row-cancelled[b-5osix2bx7n] {
            opacity: 0.6;
        }

    .adjustments-table td[b-5osix2bx7n] {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.movement-number[b-5osix2bx7n] {
    color: #d97706;
    font-weight: 600;
}

.datetime-cell[b-5osix2bx7n] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .datetime-cell .date[b-5osix2bx7n] {
        font-weight: 500;
        color: #1e293b;
    }

    .datetime-cell .time[b-5osix2bx7n] {
        font-size: 0.8125rem;
        color: #64748b;
    }

.warehouse-badge[b-5osix2bx7n] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #fef3c7;
    color: #d97706;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.reason-badge[b-5osix2bx7n] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.items-count[b-5osix2bx7n] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
    font-weight: 500;
}

.type-badge[b-5osix2bx7n] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.type-increase[b-5osix2bx7n] {
    background: #dcfce7;
    color: #059669;
}

.type-decrease[b-5osix2bx7n] {
    background: #fee2e2;
    color: #dc2626;
}

.type-mixed[b-5osix2bx7n] {
    background: #e0f2fe;
    color: #0284c7;
}

.status-badge[b-5osix2bx7n] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-completed[b-5osix2bx7n] {
    background: #dcfce7;
    color: #059669;
}

.status-progress[b-5osix2bx7n] {
    background: #fef3c7;
    color: #d97706;
}

.status-cancelled[b-5osix2bx7n] {
    background: #fee2e2;
    color: #dc2626;
}

.status-default[b-5osix2bx7n] {
    background: #f1f5f9;
    color: #64748b;
}

.action-buttons[b-5osix2bx7n] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-5osix2bx7n] {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
}

    .btn-icon:hover[b-5osix2bx7n] {
        background: #f8fafc;
        border-color: #f59e0b;
        color: #f59e0b;
    }

    .btn-icon.edit:hover[b-5osix2bx7n] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .btn-icon.delete:hover[b-5osix2bx7n] {
        border-color: #dc2626;
        color: #dc2626;
    }

.no-data[b-5osix2bx7n] {
    text-align: center;
    padding: 4rem 2rem !important;
    color: #94a3b8;
}

    .no-data i[b-5osix2bx7n] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .no-data p[b-5osix2bx7n] {
        font-size: 1.125rem;
        margin: 0;
    }

.modal-overlay[b-5osix2bx7n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-5osix2bx7n 0.2s ease;
}

@keyframes fadeIn-b-5osix2bx7n {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-container[b-5osix2bx7n] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-5osix2bx7n 0.3s ease;
}

@keyframes slideUp-b-5osix2bx7n {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-container.large[b-5osix2bx7n] {
    width: 90%;
    max-width: 1200px;
}

.modal-container.small[b-5osix2bx7n] {
    width: 90%;
    max-width: 500px;
}

.modal-header[b-5osix2bx7n] {
    padding: 1.75rem 2rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

    .modal-header h3[b-5osix2bx7n] {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

.btn-close[b-5osix2bx7n] {
    width: 36px;
    height: 36px;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .btn-close:hover[b-5osix2bx7n] {
        background: #fee2e2;
        color: #dc2626;
    }

.modal-body[b-5osix2bx7n] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.adjustment-info-section[b-5osix2bx7n] {
    margin-bottom: 2rem;
}

.info-grid[b-5osix2bx7n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.form-group[b-5osix2bx7n] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-5osix2bx7n] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.required[b-5osix2bx7n] {
    color: #ef4444;
}

.scanner-section[b-5osix2bx7n] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.scanner-header[b-5osix2bx7n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .scanner-header h4[b-5osix2bx7n] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.scanner-actions[b-5osix2bx7n] {
    display: flex;
    gap: 0.75rem;
}

.btn-scan[b-5osix2bx7n] {
    background: white;
    color: #f59e0b;
    border: 2px solid #f59e0b;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-scan:hover[b-5osix2bx7n] {
        background: #f59e0b;
        color: white;
    }

    .btn-scan.active[b-5osix2bx7n] {
        background: #ef4444;
        border-color: #ef4444;
        color: white;
    }

        .btn-scan.active:hover[b-5osix2bx7n] {
            background: #dc2626;
            border-color: #dc2626;
        }

.btn-manual[b-5osix2bx7n] {
    background: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-manual:hover[b-5osix2bx7n] {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #475569;
    }

.scanner-viewport[b-5osix2bx7n] {
    margin-top: 1rem;
}

.scanner-placeholder[b-5osix2bx7n] {
    background: white;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
}

    .scanner-placeholder i[b-5osix2bx7n] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .scanner-placeholder p[b-5osix2bx7n] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .scanner-placeholder small[b-5osix2bx7n] {
        font-size: 0.875rem;
        color: #94a3b8;
    }

.items-section[b-5osix2bx7n] {
    background: white;
    border: 2px solid #fde68a;
    border-radius: 12px;
    padding: 1.5rem;
}

.items-header[b-5osix2bx7n] {
    margin-bottom: 1rem;
}

    .items-header h4[b-5osix2bx7n] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.items-table-container[b-5osix2bx7n] {
    overflow-x: auto;
}

.items-table[b-5osix2bx7n] {
    width: 100%;
    border-collapse: collapse;
}

    .items-table thead[b-5osix2bx7n] {
        background: #fffbeb;
    }

    .items-table th[b-5osix2bx7n] {
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #fde68a;
    }

    .items-table tbody tr[b-5osix2bx7n] {
        border-bottom: 1px solid #e2e8f0;
    }

        .items-table tbody tr:last-child[b-5osix2bx7n] {
            border-bottom: none;
        }

    .items-table td[b-5osix2bx7n] {
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.sequence[b-5osix2bx7n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fef3c7;
    color: #f59e0b;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

.qty-adjustment[b-5osix2bx7n] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

    .qty-adjustment.positive[b-5osix2bx7n] {
        background: #dcfce7;
        color: #059669;
    }

    .qty-adjustment.negative[b-5osix2bx7n] {
        background: #fee2e2;
        color: #dc2626;
    }

.time-badge[b-5osix2bx7n] {
    font-size: 0.8125rem;
    color: #64748b;
}

.btn-remove[b-5osix2bx7n] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: all 0.2s ease;
}

    .btn-remove:hover[b-5osix2bx7n] {
        color: #dc2626;
        transform: scale(1.1);
    }

.empty-items[b-5osix2bx7n] {
    text-align: center;
    padding: 3rem 2rem;
    color: #94a3b8;
}

    .empty-items i[b-5osix2bx7n] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-items p[b-5osix2bx7n] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .empty-items small[b-5osix2bx7n] {
        font-size: 0.875rem;
    }

.modal-footer[b-5osix2bx7n] {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: #fffbeb;
}

.btn-outline[b-5osix2bx7n] {
    background: white;
    color: #f59e0b;
    border: 2px solid #f59e0b;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-outline:hover:not(:disabled)[b-5osix2bx7n] {
        background: #f59e0b;
        color: white;
    }

    .btn-outline:disabled[b-5osix2bx7n] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-success[b-5osix2bx7n] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3), 0 2px 4px rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-success[b-5osix2bx7n]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-success:hover:not(:disabled)[b-5osix2bx7n] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(16, 185, 129, 0.4), 0 4px 6px rgba(16, 185, 129, 0.3);
    }

        .btn-success:hover:not(:disabled)[b-5osix2bx7n]::before {
            opacity: 1;
            animation: shine-b-5osix2bx7n 0.6s ease;
        }

    .btn-success:disabled[b-5osix2bx7n] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-success:active:not(:disabled)[b-5osix2bx7n] {
        transform: translateY(0);
    }

.btn-primary[b-5osix2bx7n] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3), 0 2px 4px rgba(245, 158, 11, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-primary[b-5osix2bx7n]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-primary:hover[b-5osix2bx7n] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(245, 158, 11, 0.4), 0 4px 6px rgba(245, 158, 11, 0.3);
    }

        .btn-primary:hover[b-5osix2bx7n]::before {
            opacity: 1;
            animation: shine-b-5osix2bx7n 0.6s ease;
        }

    .btn-primary:active[b-5osix2bx7n] {
        transform: translateY(0);
    }

@keyframes shine-b-5osix2bx7n {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

@media (max-width: 1024px) {
    .filters-grid[b-5osix2bx7n] {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-grid[b-5osix2bx7n] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .adjustments-header[b-5osix2bx7n] {
        flex-direction: column;
        gap: 1rem;
    }

    .filters-grid[b-5osix2bx7n] {
        grid-template-columns: 1fr;
    }

    .scanner-header[b-5osix2bx7n] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .scanner-actions[b-5osix2bx7n] {
        width: 100%;
        flex-direction: column;
    }

    .modal-container.large[b-5osix2bx7n],
    .modal-container.small[b-5osix2bx7n] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header[b-5osix2bx7n] {
        padding: 1.25rem 1rem;
    }

    .modal-body[b-5osix2bx7n] {
        padding: 1.25rem;
    }

    .modal-footer[b-5osix2bx7n] {
        padding: 1rem;
        flex-direction: column;
    }

        .modal-footer button[b-5osix2bx7n] {
            width: 100%;
            justify-content: center;
        }

    .adjustments-table th[b-5osix2bx7n],
    .adjustments-table td[b-5osix2bx7n] {
        padding: 0.75rem 0.625rem;
        font-size: 0.875rem;
    }
}
/* _content/webQT/Features/Inventories/InventoryActivity.razor.rz.scp.css */
/* Inventory Activity Container */
.inventory-container[b-hpekn6sdxv] {
    padding: 1rem 2rem;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    background-color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Page Header */
.page-header[b-hpekn6sdxv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.page-title[b-hpekn6sdxv] {
    margin: 0;
    color: #1e293b;
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.actions-bar[b-hpekn6sdxv] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Enhanced Buttons */
.btn[b-hpekn6sdxv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

    .btn[b-hpekn6sdxv]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover[b-hpekn6sdxv]::before {
        left: 100%;
    }

    .btn:disabled[b-hpekn6sdxv] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .btn:disabled[b-hpekn6sdxv]::before {
            display: none;
        }

.refresh-btn[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

    .refresh-btn:hover:not(:disabled)[b-hpekn6sdxv] {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
    }

.primary-btn[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

    .primary-btn:hover:not(:disabled)[b-hpekn6sdxv] {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    }

.secondary-btn[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-hpekn6sdxv] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.ready-btn[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

    .ready-btn:hover:not(:disabled)[b-hpekn6sdxv] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }

/* Spinning animation */
.spinning[b-hpekn6sdxv] {
    animation: spin-b-hpekn6sdxv 1s linear infinite;
}

@keyframes spin-b-hpekn6sdxv {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Card Styles */
.info-card[b-hpekn6sdxv] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
}

    .info-card:hover[b-hpekn6sdxv] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

.success-card[b-hpekn6sdxv] {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.card-header[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .card-header h5[b-hpekn6sdxv] {
        margin: 0;
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.card-header-with-actions[b-hpekn6sdxv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-content[b-hpekn6sdxv] {
    padding: 2rem;
}

/* Success State */
.success-state[b-hpekn6sdxv] {
    text-align: center;
    padding: 2rem;
}

    .success-state i[b-hpekn6sdxv] {
        font-size: 5rem;
        color: #10b981;
        margin-bottom: 1.5rem;
    }

    .success-state h3[b-hpekn6sdxv] {
        color: #065f46;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
        font-weight: 700;
    }

.movement-summary[b-hpekn6sdxv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem auto;
    max-width: 500px;
    text-align: left;
}

.summary-detail[b-hpekn6sdxv] {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #a7f3d0;
}

    .summary-detail .label[b-hpekn6sdxv] {
        font-weight: 500;
        color: #047857;
    }

    .summary-detail .value[b-hpekn6sdxv] {
        font-weight: 700;
        color: #065f46;
    }

.movement-id[b-hpekn6sdxv] {
    font-family: monospace;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
}

/* Empty State */
.empty-state[b-hpekn6sdxv] {
    text-align: center;
    padding: 3rem;
}

    .empty-state i[b-hpekn6sdxv] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-state h3[b-hpekn6sdxv] {
        color: #475569;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-state p[b-hpekn6sdxv] {
        color: #64748b;
        margin-bottom: 1.5rem;
        font-size: 1rem;
    }

/* Movement Info */
.movement-info[b-hpekn6sdxv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.info-item[b-hpekn6sdxv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    border-left: 4px solid #8b5cf6;
}

    .info-item .label[b-hpekn6sdxv] {
        font-size: 0.75rem;
        font-weight: 500;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-item .value[b-hpekn6sdxv] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.items-count[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    display: inline-block;
}

/* Status Badges */
.status-badge[b-hpekn6sdxv] {
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-in-progress[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.pulse[b-hpekn6sdxv] {
    animation: pulse-b-hpekn6sdxv 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-b-hpekn6sdxv {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Scanner Card */
.scanner-card[b-hpekn6sdxv] {
    border: 2px solid #8b5cf6;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
}

    .scanner-card .card-header[b-hpekn6sdxv] {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        border-bottom: 1px solid #7c3aed;
    }

        .scanner-card .card-header h5[b-hpekn6sdxv] {
            color: white;
        }

.scanner-section[b-hpekn6sdxv] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.scanner-input-group[b-hpekn6sdxv] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.input-wrapper[b-hpekn6sdxv] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-hpekn6sdxv] {
    position: absolute;
    left: 1rem;
    color: #8b5cf6;
    font-size: 1.25rem;
    pointer-events: none;
}

.scanner-input[b-hpekn6sdxv] {
    width: 100%;
    padding: 1.25rem 3.5rem 1.25rem 3rem;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    font-family: monospace;
    background: white;
    transition: all 0.3s ease;
    color: #1e293b;
}

    .scanner-input:focus[b-hpekn6sdxv] {
        border-color: #8b5cf6;
        outline: 0;
        box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
        background: #faf5ff;
    }

    .scanner-input[b-hpekn6sdxv]::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

.btn-clear[b-hpekn6sdxv] {
    position: absolute;
    right: 1rem;
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-clear:hover[b-hpekn6sdxv] {
        background: #e2e8f0;
        transform: scale(1.1);
    }

.btn-scan[b-hpekn6sdxv] {
    min-width: 150px;
    font-size: 1rem;
}

.camera-btn[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    min-width: 56px;
    padding: 0.75rem;
}

    .camera-btn:hover:not(:disabled)[b-hpekn6sdxv] {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

    .camera-btn i[b-hpekn6sdxv] {
        font-size: 1.25rem;
    }

/* Scan Message */
.scan-message[b-hpekn6sdxv] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    animation: slideDown-b-hpekn6sdxv 0.3s ease-out;
}

@keyframes slideDown-b-hpekn6sdxv {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scan-message.success[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.scan-message.error[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.scan-message i[b-hpekn6sdxv] {
    font-size: 1.25rem;
}

/* Scanner Tips */
.scanner-tips[b-hpekn6sdxv] {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: 8px;
    border: 1px solid #e9d5ff;
    flex-wrap: wrap;
}

.tip[b-hpekn6sdxv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b21a8;
    font-size: 0.875rem;
    flex: 1;
    min-width: 200px;
}

    .tip i[b-hpekn6sdxv] {
        color: #8b5cf6;
        font-size: 1rem;
    }

/* Items Table */
.items-table-wrapper[b-hpekn6sdxv] {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.items-table[b-hpekn6sdxv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 700px;
}

    .items-table thead[b-hpekn6sdxv] {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    }

    .items-table th[b-hpekn6sdxv] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .items-table td[b-hpekn6sdxv] {
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .items-table tbody tr[b-hpekn6sdxv] {
        transition: all 0.2s ease;
    }

        .items-table tbody tr:hover[b-hpekn6sdxv] {
            background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
        }

        .items-table tbody tr.latest-item[b-hpekn6sdxv] {
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
            animation: highlightRow-b-hpekn6sdxv 1s ease-out;
        }

@keyframes highlightRow-b-hpekn6sdxv {
    from {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    to {
        transform: scale(1);
        box-shadow: none;
    }
}

/* Table Columns */
.seq-col[b-hpekn6sdxv] {
    width: 60px;
}

.code-col[b-hpekn6sdxv] {
    width: 30%;
}

.time-col[b-hpekn6sdxv] {
    width: 20%;
}

.notes-col[b-hpekn6sdxv] {
    width: 35%;
}

.actions-col[b-hpekn6sdxv] {
    width: 80px;
    text-align: center;
}

/* Table Cells */
.seq-badge[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    display: inline-block;
    min-width: 32px;
    text-align: center;
}

.code-container[b-hpekn6sdxv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .code-container i[b-hpekn6sdxv] {
        color: #8b5cf6;
        font-size: 1.25rem;
    }

.code-text[b-hpekn6sdxv] {
    font-family: monospace;
    font-weight: 700;
    color: #1e293b;
    font-size: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
}

.time-container[b-hpekn6sdxv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.time-text[b-hpekn6sdxv] {
    font-weight: 600;
    color: #1e293b;
    font-family: monospace;
    font-size: 0.9rem;
}

.time-subtext[b-hpekn6sdxv] {
    font-size: 0.75rem;
    color: #64748b;
}

.notes-text[b-hpekn6sdxv] {
    color: #475569;
    font-style: italic;
    font-size: 0.875rem;
    line-height: 1.5;
}

.btn-add-note[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
}

    .btn-add-note:hover[b-hpekn6sdxv] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: translateY(-1px);
    }

/* Action Buttons */
.action-btn[b-hpekn6sdxv] {
    padding: 0.5rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}

.remove-btn[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
    border: 1px solid #ef4444;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

    .remove-btn:hover[b-hpekn6sdxv] {
        background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    }

/* Empty Items */
.empty-items[b-hpekn6sdxv] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
}

    .empty-items i[b-hpekn6sdxv] {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-items h3[b-hpekn6sdxv] {
        color: #475569;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-items p[b-hpekn6sdxv] {
        margin-bottom: 0;
        font-size: 1rem;
    }

/* Modal Styles */
.modal-overlay[b-hpekn6sdxv] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-hpekn6sdxv 0.3s ease-out;
}

@keyframes fadeIn-b-hpekn6sdxv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-dialog[b-hpekn6sdxv] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideIn-b-hpekn6sdxv 0.3s ease-out;
}

@keyframes slideIn-b-hpekn6sdxv {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-header[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-hpekn6sdxv] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .modal-title i[b-hpekn6sdxv] {
        font-size: 1.25rem;
        color: #8b5cf6;
    }

.btn-close[b-hpekn6sdxv] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    font-size: 1.25rem;
}

    .btn-close:hover[b-hpekn6sdxv] {
        background: #f1f5f9;
        color: #1e293b;
        transform: scale(1.05);
    }

.modal-body[b-hpekn6sdxv] {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer[b-hpekn6sdxv] {
    background: #f8fafc;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* Form Group */
.form-group[b-hpekn6sdxv] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

    .form-group:last-child[b-hpekn6sdxv] {
        margin-bottom: 0;
    }

    .form-group label[b-hpekn6sdxv] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.form-input[b-hpekn6sdxv] {
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    background-color: white;
    transition: all 0.2s ease;
    color: #1e293b;
}

    .form-input:focus[b-hpekn6sdxv] {
        border-color: #8b5cf6;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
        background-color: #faf5ff;
    }

    .form-input:read-only[b-hpekn6sdxv] {
        background-color: #f8fafc;
        color: #64748b;
    }

    .form-input textarea[b-hpekn6sdxv] {
        resize: vertical;
        min-height: 80px;
        font-family: inherit;
    }

/* Camera Scanner Styles */
.camera-overlay[b-hpekn6sdxv] {
    background: rgba(0, 0, 0, 0.9);
}

.camera-dialog[b-hpekn6sdxv] {
    max-width: 800px;
    background: #1e293b;
}

.camera-header[b-hpekn6sdxv] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 1px solid #334155;
}

    .camera-header .modal-title[b-hpekn6sdxv] {
        color: white;
    }

        .camera-header .modal-title i[b-hpekn6sdxv] {
            color: #3b82f6;
        }

    .camera-header .btn-close[b-hpekn6sdxv] {
        color: #94a3b8;
    }

        .camera-header .btn-close:hover[b-hpekn6sdxv] {
            background: #334155;
            color: white;
        }

.camera-body[b-hpekn6sdxv] {
    padding: 0;
    background: #0f172a;
}

.camera-container[b-hpekn6sdxv] {
    width: 100%;
    min-height: 400px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-error[b-hpekn6sdxv] {
    padding: 1.5rem;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: center;
    justify-content: center;
}

    .camera-error i[b-hpekn6sdxv] {
        font-size: 1.5rem;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .inventory-container[b-hpekn6sdxv] {
        padding: 0.75rem 1rem;
    }

    .movement-info[b-hpekn6sdxv] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .inventory-container[b-hpekn6sdxv] {
        padding: 0.75rem 0.5rem;
    }

    .page-header[b-hpekn6sdxv] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .actions-bar[b-hpekn6sdxv] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-title[b-hpekn6sdxv] {
        font-size: 1.5rem;
        text-align: center;
    }

    .movement-info[b-hpekn6sdxv] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .scanner-input-group[b-hpekn6sdxv] {
        flex-direction: column;
    }

    .btn-scan[b-hpekn6sdxv] {
        width: 100%;
    }

    .scanner-tips[b-hpekn6sdxv] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .items-table[b-hpekn6sdxv] {
        font-size: 0.8rem;
        min-width: 600px;
    }

        .items-table th[b-hpekn6sdxv],
        .items-table td[b-hpekn6sdxv] {
            padding: 0.75rem 0.5rem;
        }

    .card-content[b-hpekn6sdxv] {
        padding: 1.5rem;
    }

    .modal-dialog[b-hpekn6sdxv] {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-footer[b-hpekn6sdxv] {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .btn[b-hpekn6sdxv] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .inventory-container[b-hpekn6sdxv] {
        padding: 0.5rem 0.25rem;
    }

    .page-title[b-hpekn6sdxv] {
        font-size: 1.25rem;
    }

    .card-content[b-hpekn6sdxv] {
        padding: 1rem;
    }

    .scanner-input[b-hpekn6sdxv] {
        font-size: 1rem;
        padding: 1rem 3rem 1rem 2.5rem;
    }

    .input-icon[b-hpekn6sdxv] {
        left: 0.75rem;
        font-size: 1rem;
    }

    .btn-clear[b-hpekn6sdxv] {
        width: 28px;
        height: 28px;
    }

    .items-table[b-hpekn6sdxv] {
        font-size: 0.75rem;
        min-width: 500px;
    }

        .items-table th[b-hpekn6sdxv],
        .items-table td[b-hpekn6sdxv] {
            padding: 0.5rem 0.25rem;
        }

    .seq-badge[b-hpekn6sdxv] {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        min-width: 28px;
    }

    .code-text[b-hpekn6sdxv] {
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
    }

    .time-text[b-hpekn6sdxv] {
        font-size: 0.8rem;
    }

    .time-subtext[b-hpekn6sdxv] {
        font-size: 0.7rem;
    }

    .action-btn[b-hpekn6sdxv] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .success-state i[b-hpekn6sdxv] {
        font-size: 3.5rem;
    }

    .success-state h3[b-hpekn6sdxv] {
        font-size: 1.25rem;
    }

    .movement-summary[b-hpekn6sdxv] {
        max-width: 100%;
    }

    .summary-detail[b-hpekn6sdxv] {
        padding: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .actions-bar[b-hpekn6sdxv] {
        flex-direction: column;
        width: 100%;
    }

    .btn[b-hpekn6sdxv] {
        width: 100%;
    }

    .scanner-input[b-hpekn6sdxv] {
        padding: 0.875rem 3rem 0.875rem 2.5rem;
    }

    .code-container[b-hpekn6sdxv] {
        gap: 0.5rem;
    }

        .code-container i[b-hpekn6sdxv] {
            font-size: 1rem;
        }

    .modal-header[b-hpekn6sdxv] {
        padding: 1rem;
    }

    .modal-title[b-hpekn6sdxv] {
        font-size: 1rem;
    }

    .modal-body[b-hpekn6sdxv] {
        padding: 1rem;
    }
}

/* Scrollbar Styling */
.modal-body[b-hpekn6sdxv]::-webkit-scrollbar,
.items-table-wrapper[b-hpekn6sdxv]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.modal-body[b-hpekn6sdxv]::-webkit-scrollbar-track,
.items-table-wrapper[b-hpekn6sdxv]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.modal-body[b-hpekn6sdxv]::-webkit-scrollbar-thumb,
.items-table-wrapper[b-hpekn6sdxv]::-webkit-scrollbar-thumb {
    background: #8b5cf6;
    border-radius: 3px;
}

    .modal-body[b-hpekn6sdxv]::-webkit-scrollbar-thumb:hover,
    .items-table-wrapper[b-hpekn6sdxv]::-webkit-scrollbar-thumb:hover {
        background: #7c3aed;
    }
/* _content/webQT/Features/Inventories/InventoryManagement.razor.rz.scp.css */
/* Inventory Management Styles */

.inventory-container[b-6vvhppis2w] {
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Page Header */
.page-header[b-6vvhppis2w] {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    padding: 2rem 2.5rem;
    margin-bottom: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.header-content h1[b-6vvhppis2w] {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .header-content h1 i[b-6vvhppis2w] {
        font-size: 2rem;
    }

.header-subtitle[b-6vvhppis2w] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin: 0;
}

/* Tab Navigation */
.tab-navigation[b-6vvhppis2w] {
    display: flex;
    gap: 0;
    background: white;
    padding: 0;
    border-bottom: 2px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    flex-wrap: nowrap;
}

.tab-btn[b-6vvhppis2w] {
    padding: 1rem 1.5rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    position: relative;
}

    .tab-btn i[b-6vvhppis2w] {
        font-size: 1.1rem;
    }

    .tab-btn:hover:not(.active)[b-6vvhppis2w] {
        background: #f8fafc;
        color: #3b82f6;
    }

    .tab-btn.active[b-6vvhppis2w] {
        color: #1e40af;
        border-bottom-color: #3b82f6;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%);
    }

/* Tab Content */
.tab-content[b-6vvhppis2w] {
    padding: 2rem 2.5rem;
    min-height: calc(100vh - 200px);
}

/* Dashboard View */
.dashboard-view[b-6vvhppis2w] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Summary Cards */
.summary-cards[b-6vvhppis2w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.summary-card[b-6vvhppis2w] {
    background: white;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}

    .summary-card[b-6vvhppis2w]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .summary-card:hover[b-6vvhppis2w] {
        transform: translateY(-4px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08), 0 3px 5px rgba(0, 0, 0, 0.05);
    }

        .summary-card:hover[b-6vvhppis2w]::before {
            opacity: 1;
            animation: shine-b-6vvhppis2w 0.6s ease;
        }

@keyframes shine-b-6vvhppis2w {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.card-icon[b-6vvhppis2w] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.receipts-card .card-icon[b-6vvhppis2w] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.issues-card .card-icon[b-6vvhppis2w] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.transfers-card .card-icon[b-6vvhppis2w] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.adjustments-card .card-icon[b-6vvhppis2w] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.card-content[b-6vvhppis2w] {
    flex: 1;
}

    .card-content h3[b-6vvhppis2w] {
        font-size: 2rem;
        font-weight: 700;
        margin: 0 0 0.25rem 0;
        color: #1e293b;
    }

    .card-content p[b-6vvhppis2w] {
        font-size: 0.9rem;
        color: #64748b;
        margin: 0;
    }

.card-trend[b-6vvhppis2w] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

    .card-trend.up[b-6vvhppis2w] {
        background: #dcfce7;
        color: #059669;
    }

    .card-trend.down[b-6vvhppis2w] {
        background: #fee2e2;
        color: #dc2626;
    }

    .card-trend.neutral[b-6vvhppis2w] {
        background: #e0f2fe;
        color: #3b82f6;
    }

/* Recent Movements Section */
.recent-movements-section[b-6vvhppis2w] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.section-header[b-6vvhppis2w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

    .section-header h2[b-6vvhppis2w] {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

.btn-link[b-6vvhppis2w] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

    .btn-link:hover[b-6vvhppis2w] {
        background: #eff6ff;
        color: #1e40af;
    }

/* Movements Table */
.movements-table-container[b-6vvhppis2w] {
    overflow-x: auto;
}

.movements-table[b-6vvhppis2w] {
    width: 100%;
    border-collapse: collapse;
}

    .movements-table thead[b-6vvhppis2w] {
        background: #f8fafc;
    }

    .movements-table th[b-6vvhppis2w] {
        padding: 0.875rem 1rem;
        text-align: left;
        font-size: 0.85rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e2e8f0;
    }

    .movements-table tbody tr[b-6vvhppis2w] {
        border-bottom: 1px solid #e2e8f0;
        transition: background-color 0.2s ease;
    }

        .movements-table tbody tr:hover[b-6vvhppis2w] {
            background: #f8fafc;
        }

    .movements-table td[b-6vvhppis2w] {
        padding: 1rem;
        font-size: 0.95rem;
        color: #334155;
    }

.datetime-cell[b-6vvhppis2w] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .datetime-cell .date[b-6vvhppis2w] {
        font-weight: 500;
        color: #1e293b;
    }

    .datetime-cell .time[b-6vvhppis2w] {
        font-size: 0.85rem;
        color: #64748b;
    }

.movement-badge[b-6vvhppis2w] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: capitalize;
}

.badge-receipt[b-6vvhppis2w] {
    background: #dcfce7;
    color: #059669;
}

.badge-issue[b-6vvhppis2w] {
    background: #fee2e2;
    color: #dc2626;
}

.badge-transfer[b-6vvhppis2w] {
    background: #dbeafe;
    color: #2563eb;
}

.badge-adjustment[b-6vvhppis2w] {
    background: #fef3c7;
    color: #d97706;
}

.badge-default[b-6vvhppis2w] {
    background: #f1f5f9;
    color: #64748b;
}

.qty-up[b-6vvhppis2w] {
    color: #059669;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.qty-down[b-6vvhppis2w] {
    color: #dc2626;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.no-data[b-6vvhppis2w] {
    text-align: center;
    padding: 3rem 1rem !important;
    color: #94a3b8;
    font-style: italic;
}

/* Content Placeholder */
.content-placeholder[b-6vvhppis2w] {
    background: white;
    border-radius: 12px;
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.placeholder-icon[b-6vvhppis2w] {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #3b82f6;
}

.content-placeholder h3[b-6vvhppis2w] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
}

.content-placeholder p[b-6vvhppis2w] {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0 0 2rem 0;
}

.btn-primary[b-6vvhppis2w] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-primary[b-6vvhppis2w]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-primary:hover[b-6vvhppis2w] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(59, 130, 246, 0.4), 0 4px 6px rgba(59, 130, 246, 0.3);
    }

        .btn-primary:hover[b-6vvhppis2w]::before {
            opacity: 1;
            animation: shine-b-6vvhppis2w 0.6s ease;
        }

    .btn-primary:active[b-6vvhppis2w] {
        transform: translateY(0);
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .page-header[b-6vvhppis2w] {
        padding: 1.5rem 1.5rem;
    }

    .tab-content[b-6vvhppis2w] {
        padding: 1.5rem;
    }

    .summary-cards[b-6vvhppis2w] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-header[b-6vvhppis2w] {
        padding: 1.25rem 1rem;
    }

    .header-content h1[b-6vvhppis2w] {
        font-size: 1.5rem;
    }

    .tab-btn[b-6vvhppis2w] {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

        .tab-btn span[b-6vvhppis2w] {
            display: none;
        }

        .tab-btn i[b-6vvhppis2w] {
            font-size: 1.25rem;
        }

    .tab-content[b-6vvhppis2w] {
        padding: 1rem;
    }

    .summary-cards[b-6vvhppis2w] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .recent-movements-section[b-6vvhppis2w] {
        padding: 1.5rem 1rem;
    }

    .section-header[b-6vvhppis2w] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .movements-table th[b-6vvhppis2w],
    .movements-table td[b-6vvhppis2w] {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* iPad Specific (9th generation) */
@media (min-width: 768px) and (max-width: 820px) {
    .tab-btn span[b-6vvhppis2w] {
        display: inline;
    }

    .summary-cards[b-6vvhppis2w] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* _content/webQT/Features/Inventories/Receipts/Receiptstab.razor.rz.scp.css */
/* Receipts Tab Styles */

.receipts-container[b-6kluqzfz6k] {
    padding: 0;
}

/* Header */
.receipts-header[b-6kluqzfz6k] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.header-left h2[b-6kluqzfz6k] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-left .subtitle[b-6kluqzfz6k] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.header-actions[b-6kluqzfz6k] {
    display: flex;
    gap: 0.75rem;
}

/* Filters Card */
.filters-card[b-6kluqzfz6k] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filters-grid[b-6kluqzfz6k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filter-group[b-6kluqzfz6k] {
    display: flex;
    flex-direction: column;
}

    .filter-group label[b-6kluqzfz6k] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.search-box[b-6kluqzfz6k] {
    position: relative;
}

    .search-box i[b-6kluqzfz6k] {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 1rem;
    }

    .search-box .form-control[b-6kluqzfz6k] {
        padding-left: 2.5rem;
    }

.form-control[b-6kluqzfz6k] {
    padding: 0.625rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-control:focus[b-6kluqzfz6k] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.btn-secondary[b-6kluqzfz6k] {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 0.625rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-secondary:hover[b-6kluqzfz6k] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #475569;
    }

/* Table Card */
.table-card[b-6kluqzfz6k] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table-container[b-6kluqzfz6k] {
    overflow-x: auto;
}

.receipts-table[b-6kluqzfz6k] {
    width: 100%;
    border-collapse: collapse;
}

    .receipts-table thead[b-6kluqzfz6k] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .receipts-table th[b-6kluqzfz6k] {
        padding: 1rem 1.25rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e2e8f0;
    }

    .receipts-table tbody tr[b-6kluqzfz6k] {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.2s ease;
    }

        .receipts-table tbody tr:hover[b-6kluqzfz6k] {
            background: #f8fafc;
        }

        .receipts-table tbody tr.row-cancelled[b-6kluqzfz6k] {
            opacity: 0.6;
        }

    .receipts-table td[b-6kluqzfz6k] {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.movement-number[b-6kluqzfz6k] {
    color: #1e40af;
    font-weight: 600;
}

.datetime-cell[b-6kluqzfz6k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .datetime-cell .date[b-6kluqzfz6k] {
        font-weight: 500;
        color: #1e293b;
    }

    .datetime-cell .time[b-6kluqzfz6k] {
        font-size: 0.8125rem;
        color: #64748b;
    }

.warehouse-badge[b-6kluqzfz6k] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #eff6ff;
    color: #1e40af;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.items-count[b-6kluqzfz6k] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
    font-weight: 500;
}

.status-badge[b-6kluqzfz6k] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-completed[b-6kluqzfz6k] {
    background: #dcfce7;
    color: #059669;
}

.status-progress[b-6kluqzfz6k] {
    background: #fef3c7;
    color: #d97706;
}

.status-cancelled[b-6kluqzfz6k] {
    background: #fee2e2;
    color: #dc2626;
}

.status-default[b-6kluqzfz6k] {
    background: #f1f5f9;
    color: #64748b;
}

.action-buttons[b-6kluqzfz6k] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-6kluqzfz6k] {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
}

    .btn-icon:hover[b-6kluqzfz6k] {
        background: #f8fafc;
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .btn-icon.edit:hover[b-6kluqzfz6k] {
        border-color: #f59e0b;
        color: #f59e0b;
    }

    .btn-icon.delete:hover[b-6kluqzfz6k] {
        border-color: #ef4444;
        color: #ef4444;
    }

.no-data[b-6kluqzfz6k] {
    text-align: center;
    padding: 4rem 2rem !important;
    color: #94a3b8;
}

    .no-data i[b-6kluqzfz6k] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .no-data p[b-6kluqzfz6k] {
        font-size: 1.125rem;
        margin: 0;
    }

/* Modal Overlay */
.modal-overlay[b-6kluqzfz6k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-6kluqzfz6k 0.2s ease;
}

@keyframes fadeIn-b-6kluqzfz6k {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-6kluqzfz6k] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-6kluqzfz6k 0.3s ease;
}

@keyframes slideUp-b-6kluqzfz6k {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-container.large[b-6kluqzfz6k] {
    width: 90%;
    max-width: 1200px;
}

.modal-container.small[b-6kluqzfz6k] {
    width: 90%;
    max-width: 500px;
}

/* Modal Header */
.modal-header[b-6kluqzfz6k] {
    padding: 1.75rem 2rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

    .modal-header h3[b-6kluqzfz6k] {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

.btn-close[b-6kluqzfz6k] {
    width: 36px;
    height: 36px;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .btn-close:hover[b-6kluqzfz6k] {
        background: #fee2e2;
        color: #dc2626;
    }

/* Modal Body */
.modal-body[b-6kluqzfz6k] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

/* Receipt Info Section */
.receipt-info-section[b-6kluqzfz6k] {
    margin-bottom: 2rem;
}

.info-grid[b-6kluqzfz6k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.form-group[b-6kluqzfz6k] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-6kluqzfz6k] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.required[b-6kluqzfz6k] {
    color: #ef4444;
}

.form-grid-2[b-6kluqzfz6k] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Scanner Section */
.scanner-section[b-6kluqzfz6k] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.scanner-header[b-6kluqzfz6k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .scanner-header h4[b-6kluqzfz6k] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.scanner-actions[b-6kluqzfz6k] {
    display: flex;
    gap: 0.75rem;
}

.btn-scan[b-6kluqzfz6k] {
    background: white;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-scan:hover[b-6kluqzfz6k] {
        background: #3b82f6;
        color: white;
    }

    .btn-scan.active[b-6kluqzfz6k] {
        background: #ef4444;
        border-color: #ef4444;
        color: white;
    }

        .btn-scan.active:hover[b-6kluqzfz6k] {
            background: #dc2626;
            border-color: #dc2626;
        }

.btn-manual[b-6kluqzfz6k] {
    background: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-manual:hover[b-6kluqzfz6k] {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #475569;
    }

.scanner-viewport[b-6kluqzfz6k] {
    margin-top: 1rem;
}

.scanner-placeholder[b-6kluqzfz6k] {
    background: white;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
}

    .scanner-placeholder i[b-6kluqzfz6k] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .scanner-placeholder p[b-6kluqzfz6k] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .scanner-placeholder small[b-6kluqzfz6k] {
        font-size: 0.875rem;
        color: #94a3b8;
    }

/* Items Section */
.items-section[b-6kluqzfz6k] {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
}

.items-header[b-6kluqzfz6k] {
    margin-bottom: 1rem;
}

    .items-header h4[b-6kluqzfz6k] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.items-table-container[b-6kluqzfz6k] {
    overflow-x: auto;
}

.items-table[b-6kluqzfz6k] {
    width: 100%;
    border-collapse: collapse;
}

    .items-table thead[b-6kluqzfz6k] {
        background: #f8fafc;
    }

    .items-table th[b-6kluqzfz6k] {
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e2e8f0;
    }

    .items-table tbody tr[b-6kluqzfz6k] {
        border-bottom: 1px solid #e2e8f0;
    }

        .items-table tbody tr:last-child[b-6kluqzfz6k] {
            border-bottom: none;
        }

    .items-table td[b-6kluqzfz6k] {
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.sequence[b-6kluqzfz6k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

.time-badge[b-6kluqzfz6k] {
    font-size: 0.8125rem;
    color: #64748b;
}

.btn-remove[b-6kluqzfz6k] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: all 0.2s ease;
}

    .btn-remove:hover[b-6kluqzfz6k] {
        color: #dc2626;
        transform: scale(1.1);
    }

.empty-items[b-6kluqzfz6k] {
    text-align: center;
    padding: 3rem 2rem;
    color: #94a3b8;
}

    .empty-items i[b-6kluqzfz6k] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-items p[b-6kluqzfz6k] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .empty-items small[b-6kluqzfz6k] {
        font-size: 0.875rem;
    }

/* Modal Footer */
.modal-footer[b-6kluqzfz6k] {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: #f8fafc;
}

.btn-outline[b-6kluqzfz6k] {
    background: white;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-outline:hover:not(:disabled)[b-6kluqzfz6k] {
        background: #3b82f6;
        color: white;
    }

    .btn-outline:disabled[b-6kluqzfz6k] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-success[b-6kluqzfz6k] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3), 0 2px 4px rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-success[b-6kluqzfz6k]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-success:hover:not(:disabled)[b-6kluqzfz6k] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(16, 185, 129, 0.4), 0 4px 6px rgba(16, 185, 129, 0.3);
    }

        .btn-success:hover:not(:disabled)[b-6kluqzfz6k]::before {
            opacity: 1;
            animation: shine-b-6kluqzfz6k 0.6s ease;
        }

    .btn-success:disabled[b-6kluqzfz6k] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-success:active:not(:disabled)[b-6kluqzfz6k] {
        transform: translateY(0);
    }

/* Primary Button (from parent) */
.btn-primary[b-6kluqzfz6k] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-primary[b-6kluqzfz6k]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-primary:hover[b-6kluqzfz6k] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(59, 130, 246, 0.4), 0 4px 6px rgba(59, 130, 246, 0.3);
    }

        .btn-primary:hover[b-6kluqzfz6k]::before {
            opacity: 1;
            animation: shine-b-6kluqzfz6k 0.6s ease;
        }

    .btn-primary:active[b-6kluqzfz6k] {
        transform: translateY(0);
    }

@keyframes shine-b-6kluqzfz6k {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .filters-grid[b-6kluqzfz6k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-grid[b-6kluqzfz6k] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .receipts-header[b-6kluqzfz6k] {
        flex-direction: column;
        gap: 1rem;
    }

    .filters-grid[b-6kluqzfz6k] {
        grid-template-columns: 1fr;
    }

    .scanner-header[b-6kluqzfz6k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .scanner-actions[b-6kluqzfz6k] {
        width: 100%;
        flex-direction: column;
    }

    .modal-container.large[b-6kluqzfz6k],
    .modal-container.small[b-6kluqzfz6k] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header[b-6kluqzfz6k] {
        padding: 1.25rem 1rem;
    }

    .modal-body[b-6kluqzfz6k] {
        padding: 1.25rem;
    }

    .modal-footer[b-6kluqzfz6k] {
        padding: 1rem;
        flex-direction: column;
    }

        .modal-footer button[b-6kluqzfz6k] {
            width: 100%;
            justify-content: center;
        }

    .receipts-table th[b-6kluqzfz6k],
    .receipts-table td[b-6kluqzfz6k] {
        padding: 0.75rem 0.625rem;
        font-size: 0.875rem;
    }
}
/* _content/webQT/Features/Inventories/Shipments/ShipmentsTab.razor.rz.scp.css */
/* Shipments Tab Styles */

.shipments-container[b-rw49mcpbhf] {
    padding: 0;
}

.shipments-header[b-rw49mcpbhf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.header-left h2[b-rw49mcpbhf] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-left .subtitle[b-rw49mcpbhf] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.header-actions[b-rw49mcpbhf] {
    display: flex;
    gap: 0.75rem;
}

.filters-card[b-rw49mcpbhf] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filters-grid[b-rw49mcpbhf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filter-group[b-rw49mcpbhf] {
    display: flex;
    flex-direction: column;
}

    .filter-group label[b-rw49mcpbhf] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.search-box[b-rw49mcpbhf] {
    position: relative;
}

    .search-box i[b-rw49mcpbhf] {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 1rem;
    }

    .search-box .form-control[b-rw49mcpbhf] {
        padding-left: 2.5rem;
    }

.form-control[b-rw49mcpbhf] {
    padding: 0.625rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-control:focus[b-rw49mcpbhf] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.btn-secondary[b-rw49mcpbhf] {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 0.625rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-secondary:hover[b-rw49mcpbhf] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #475569;
    }

.table-card[b-rw49mcpbhf] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table-container[b-rw49mcpbhf] {
    overflow-x: auto;
}

.shipments-table[b-rw49mcpbhf] {
    width: 100%;
    border-collapse: collapse;
}

    .shipments-table thead[b-rw49mcpbhf] {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    }

    .shipments-table th[b-rw49mcpbhf] {
        padding: 1rem 1.25rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #fecaca;
    }

    .shipments-table tbody tr[b-rw49mcpbhf] {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.2s ease;
    }

        .shipments-table tbody tr:hover[b-rw49mcpbhf] {
            background: #fef2f2;
        }

        .shipments-table tbody tr.row-cancelled[b-rw49mcpbhf] {
            opacity: 0.6;
        }

    .shipments-table td[b-rw49mcpbhf] {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.movement-number[b-rw49mcpbhf] {
    color: #dc2626;
    font-weight: 600;
}

.datetime-cell[b-rw49mcpbhf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .datetime-cell .date[b-rw49mcpbhf] {
        font-weight: 500;
        color: #1e293b;
    }

    .datetime-cell .time[b-rw49mcpbhf] {
        font-size: 0.8125rem;
        color: #64748b;
    }

.warehouse-badge[b-rw49mcpbhf] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.items-count[b-rw49mcpbhf] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
    font-weight: 500;
}

.status-badge[b-rw49mcpbhf] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-completed[b-rw49mcpbhf] {
    background: #dcfce7;
    color: #059669;
}

.status-progress[b-rw49mcpbhf] {
    background: #fef3c7;
    color: #d97706;
}

.status-cancelled[b-rw49mcpbhf] {
    background: #fee2e2;
    color: #dc2626;
}

.status-default[b-rw49mcpbhf] {
    background: #f1f5f9;
    color: #64748b;
}

.action-buttons[b-rw49mcpbhf] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-rw49mcpbhf] {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
}

    .btn-icon:hover[b-rw49mcpbhf] {
        background: #f8fafc;
        border-color: #ef4444;
        color: #ef4444;
    }

    .btn-icon.edit:hover[b-rw49mcpbhf] {
        border-color: #f59e0b;
        color: #f59e0b;
    }

    .btn-icon.delete:hover[b-rw49mcpbhf] {
        border-color: #dc2626;
        color: #dc2626;
    }

.no-data[b-rw49mcpbhf] {
    text-align: center;
    padding: 4rem 2rem !important;
    color: #94a3b8;
}

    .no-data i[b-rw49mcpbhf] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .no-data p[b-rw49mcpbhf] {
        font-size: 1.125rem;
        margin: 0;
    }

.modal-overlay[b-rw49mcpbhf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-rw49mcpbhf 0.2s ease;
}

@keyframes fadeIn-b-rw49mcpbhf {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-container[b-rw49mcpbhf] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-rw49mcpbhf 0.3s ease;
}

@keyframes slideUp-b-rw49mcpbhf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-container.large[b-rw49mcpbhf] {
    width: 90%;
    max-width: 1200px;
}

.modal-container.small[b-rw49mcpbhf] {
    width: 90%;
    max-width: 500px;
}

.modal-header[b-rw49mcpbhf] {
    padding: 1.75rem 2rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

    .modal-header h3[b-rw49mcpbhf] {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

.btn-close[b-rw49mcpbhf] {
    width: 36px;
    height: 36px;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .btn-close:hover[b-rw49mcpbhf] {
        background: #fee2e2;
        color: #dc2626;
    }

.modal-body[b-rw49mcpbhf] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.shipment-info-section[b-rw49mcpbhf] {
    margin-bottom: 2rem;
}

.info-grid[b-rw49mcpbhf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.form-group[b-rw49mcpbhf] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-rw49mcpbhf] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.required[b-rw49mcpbhf] {
    color: #ef4444;
}

.form-grid-2[b-rw49mcpbhf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.scanner-section[b-rw49mcpbhf] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.scanner-header[b-rw49mcpbhf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .scanner-header h4[b-rw49mcpbhf] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.scanner-actions[b-rw49mcpbhf] {
    display: flex;
    gap: 0.75rem;
}

.btn-scan[b-rw49mcpbhf] {
    background: white;
    color: #dc2626;
    border: 2px solid #dc2626;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-scan:hover[b-rw49mcpbhf] {
        background: #dc2626;
        color: white;
    }

    .btn-scan.active[b-rw49mcpbhf] {
        background: #ef4444;
        border-color: #ef4444;
        color: white;
    }

        .btn-scan.active:hover[b-rw49mcpbhf] {
            background: #dc2626;
            border-color: #dc2626;
        }

.btn-manual[b-rw49mcpbhf] {
    background: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-manual:hover[b-rw49mcpbhf] {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #475569;
    }

.scanner-viewport[b-rw49mcpbhf] {
    margin-top: 1rem;
}

.scanner-placeholder[b-rw49mcpbhf] {
    background: white;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
}

    .scanner-placeholder i[b-rw49mcpbhf] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .scanner-placeholder p[b-rw49mcpbhf] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .scanner-placeholder small[b-rw49mcpbhf] {
        font-size: 0.875rem;
        color: #94a3b8;
    }

.items-section[b-rw49mcpbhf] {
    background: white;
    border: 2px solid #fee2e2;
    border-radius: 12px;
    padding: 1.5rem;
}

.items-header[b-rw49mcpbhf] {
    margin-bottom: 1rem;
}

    .items-header h4[b-rw49mcpbhf] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.items-table-container[b-rw49mcpbhf] {
    overflow-x: auto;
}

.items-table[b-rw49mcpbhf] {
    width: 100%;
    border-collapse: collapse;
}

    .items-table thead[b-rw49mcpbhf] {
        background: #fef2f2;
    }

    .items-table th[b-rw49mcpbhf] {
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #fecaca;
    }

    .items-table tbody tr[b-rw49mcpbhf] {
        border-bottom: 1px solid #e2e8f0;
    }

        .items-table tbody tr:last-child[b-rw49mcpbhf] {
            border-bottom: none;
        }

    .items-table td[b-rw49mcpbhf] {
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.sequence[b-rw49mcpbhf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

.time-badge[b-rw49mcpbhf] {
    font-size: 0.8125rem;
    color: #64748b;
}

.btn-remove[b-rw49mcpbhf] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: all 0.2s ease;
}

    .btn-remove:hover[b-rw49mcpbhf] {
        color: #dc2626;
        transform: scale(1.1);
    }

.empty-items[b-rw49mcpbhf] {
    text-align: center;
    padding: 3rem 2rem;
    color: #94a3b8;
}

    .empty-items i[b-rw49mcpbhf] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-items p[b-rw49mcpbhf] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .empty-items small[b-rw49mcpbhf] {
        font-size: 0.875rem;
    }

.modal-footer[b-rw49mcpbhf] {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: #fef2f2;
}

.btn-outline[b-rw49mcpbhf] {
    background: white;
    color: #dc2626;
    border: 2px solid #dc2626;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-outline:hover:not(:disabled)[b-rw49mcpbhf] {
        background: #dc2626;
        color: white;
    }

    .btn-outline:disabled[b-rw49mcpbhf] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-success[b-rw49mcpbhf] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3), 0 2px 4px rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-success[b-rw49mcpbhf]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-success:hover:not(:disabled)[b-rw49mcpbhf] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(16, 185, 129, 0.4), 0 4px 6px rgba(16, 185, 129, 0.3);
    }

        .btn-success:hover:not(:disabled)[b-rw49mcpbhf]::before {
            opacity: 1;
            animation: shine-b-rw49mcpbhf 0.6s ease;
        }

    .btn-success:disabled[b-rw49mcpbhf] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-success:active:not(:disabled)[b-rw49mcpbhf] {
        transform: translateY(0);
    }

.btn-primary[b-rw49mcpbhf] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3), 0 2px 4px rgba(239, 68, 68, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-primary[b-rw49mcpbhf]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-primary:hover[b-rw49mcpbhf] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(239, 68, 68, 0.4), 0 4px 6px rgba(239, 68, 68, 0.3);
    }

        .btn-primary:hover[b-rw49mcpbhf]::before {
            opacity: 1;
            animation: shine-b-rw49mcpbhf 0.6s ease;
        }

    .btn-primary:active[b-rw49mcpbhf] {
        transform: translateY(0);
    }

@keyframes shine-b-rw49mcpbhf {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

@media (max-width: 1024px) {
    .filters-grid[b-rw49mcpbhf] {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-grid[b-rw49mcpbhf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .shipments-header[b-rw49mcpbhf] {
        flex-direction: column;
        gap: 1rem;
    }

    .filters-grid[b-rw49mcpbhf] {
        grid-template-columns: 1fr;
    }

    .scanner-header[b-rw49mcpbhf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .scanner-actions[b-rw49mcpbhf] {
        width: 100%;
        flex-direction: column;
    }

    .modal-container.large[b-rw49mcpbhf],
    .modal-container.small[b-rw49mcpbhf] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header[b-rw49mcpbhf] {
        padding: 1.25rem 1rem;
    }

    .modal-body[b-rw49mcpbhf] {
        padding: 1.25rem;
    }

    .modal-footer[b-rw49mcpbhf] {
        padding: 1rem;
        flex-direction: column;
    }

        .modal-footer button[b-rw49mcpbhf] {
            width: 100%;
            justify-content: center;
        }

    .shipments-table th[b-rw49mcpbhf],
    .shipments-table td[b-rw49mcpbhf] {
        padding: 0.75rem 0.625rem;
        font-size: 0.875rem;
    }
}
/* _content/webQT/Features/Inventories/StockLevels.razor.rz.scp.css */
/* ============================================
   Stock Levels Tab - Inventory Report
   Matching Project Design Language
   ============================================ */

/* === CONTAINER === */
.stock-levels-container[b-tnxffku5wl] {
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
}

/* === FILTERS BAR === */
.filters-bar[b-tnxffku5wl] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

    .filters-bar[b-tnxffku5wl]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #3b82f6, #1e40af, #3b82f6);
        background-size: 200% 100%;
        animation: gradient-shift-b-tnxffku5wl 3s ease infinite;
    }

@keyframes gradient-shift-b-tnxffku5wl {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.filter-group[b-tnxffku5wl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 200px;
}

    .filter-group.search-group[b-tnxffku5wl] {
        flex: 2;
        min-width: 300px;
    }

.filter-label[b-tnxffku5wl] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .filter-label i[b-tnxffku5wl] {
        color: #3b82f6;
        font-size: 1rem;
    }

.filter-select[b-tnxffku5wl],
.filter-input[b-tnxffku5wl] {
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
    color: #1e293b;
    font-weight: 500;
}

    .filter-select:focus[b-tnxffku5wl],
    .filter-input:focus[b-tnxffku5wl] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .filter-select:hover[b-tnxffku5wl],
    .filter-input:hover[b-tnxffku5wl] {
        border-color: #94a3b8;
    }

.filter-actions[b-tnxffku5wl] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.btn-clear[b-tnxffku5wl],
.btn-export[b-tnxffku5wl] {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    white-space: nowrap;
}

.btn-clear[b-tnxffku5wl] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .btn-clear:hover[b-tnxffku5wl] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.btn-export[b-tnxffku5wl] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

    .btn-export:hover[b-tnxffku5wl] {
        background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
    }

/* === STATS GRID === */
.stats-grid[b-tnxffku5wl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-tnxffku5wl] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border: 2px solid #e2e8f0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .stat-card[b-tnxffku5wl]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
        transition: left 0.5s ease;
    }

    .stat-card:hover[b-tnxffku5wl] {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        border-color: #3b82f6;
    }

        .stat-card:hover[b-tnxffku5wl]::before {
            left: 100%;
        }

.stat-icon[b-tnxffku5wl] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

    .stat-icon.total-items[b-tnxffku5wl] {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1e40af;
    }

    .stat-icon.in-stock[b-tnxffku5wl] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #047857;
    }

    .stat-icon.low-stock[b-tnxffku5wl] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #d97706;
    }

    .stat-icon.out-stock[b-tnxffku5wl] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #dc2626;
    }

.stat-content[b-tnxffku5wl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-value[b-tnxffku5wl] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label[b-tnxffku5wl] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === LOADING === */
.loading-container[b-tnxffku5wl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.spinner[b-tnxffku5wl] {
    width: 48px;
    height: 48px;
    border: 4px solid #f1f5f9;
    border-radius: 50%;
    border-top-color: #3b82f6;
    animation: spin-b-tnxffku5wl 1s ease-in-out infinite;
    margin-bottom: 1.5rem;
}

@keyframes spin-b-tnxffku5wl {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-tnxffku5wl] {
    color: #64748b;
    font-size: 1rem;
    font-weight: 500;
}

/* === ERROR MESSAGE === */
.error-message[b-tnxffku5wl] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

    .error-message i[b-tnxffku5wl] {
        font-size: 1.5rem;
    }

/* === EMPTY STATE === */
.empty-state[b-tnxffku5wl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    text-align: center;
}

    .empty-state i[b-tnxffku5wl] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1.5rem;
    }

    .empty-state h3[b-tnxffku5wl] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 0.5rem 0;
    }

    .empty-state p[b-tnxffku5wl] {
        color: #64748b;
        font-size: 1rem;
        margin: 0;
    }

/* === TABLE === */
.table-container[b-tnxffku5wl] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.table-wrapper[b-tnxffku5wl] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 600px;
}

    /* Custom Scrollbar */
    .table-wrapper[b-tnxffku5wl]::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .table-wrapper[b-tnxffku5wl]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .table-wrapper[b-tnxffku5wl]::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        border-radius: 4px;
    }

        .table-wrapper[b-tnxffku5wl]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        }

.stock-table[b-tnxffku5wl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 1100px;
}

    .stock-table thead[b-tnxffku5wl] {
        position: sticky;
        top: 0;
        z-index: 10;
        background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
    }

    .stock-table th[b-tnxffku5wl] {
        padding: 1rem 0.75rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        border-bottom: 1px solid #1e40af;
    }

        .stock-table th.sortable[b-tnxffku5wl] {
            cursor: pointer;
            user-select: none;
            transition: background 0.2s ease;
        }

            .stock-table th.sortable:hover[b-tnxffku5wl] {
                background: rgba(255, 255, 255, 0.1);
            }

        .stock-table th.stock-col[b-tnxffku5wl] {
            text-align: center;
        }

.th-content[b-tnxffku5wl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}

    .th-content i[b-tnxffku5wl] {
        font-size: 0.75rem;
    }

.stock-table td[b-tnxffku5wl] {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.stock-table tbody tr[b-tnxffku5wl] {
    transition: all 0.2s ease;
}

    .stock-table tbody tr:hover[b-tnxffku5wl] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .stock-table tbody tr.low-stock-row[b-tnxffku5wl] {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    }

        .stock-table tbody tr.low-stock-row:hover[b-tnxffku5wl] {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        }

    .stock-table tbody tr.out-of-stock-row[b-tnxffku5wl] {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    }

        .stock-table tbody tr.out-of-stock-row:hover[b-tnxffku5wl] {
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        }

/* === TABLE CELLS === */
.item-cell[b-tnxffku5wl] {
    font-weight: 600;
    color: #1e293b;
}

.item-info[b-tnxffku5wl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .item-info i[b-tnxffku5wl] {
        color: #3b82f6;
        font-size: 1rem;
    }

.warehouse-badge[b-tnxffku5wl] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #93c5fd;
    display: inline-block;
}

.stock-value-cell[b-tnxffku5wl] {
    text-align: center;
}

.stock-value[b-tnxffku5wl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.stock-badge[b-tnxffku5wl] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .stock-badge.stock-ok[b-tnxffku5wl] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #047857;
        border: 1px solid #10b981;
    }

    .stock-badge.stock-low[b-tnxffku5wl] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #d97706;
        border: 1px solid #f59e0b;
    }

    .stock-badge.stock-out[b-tnxffku5wl] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #dc2626;
        border: 1px solid #ef4444;
    }

.low-icon[b-tnxffku5wl] {
    color: #f59e0b;
    font-size: 1rem;
    animation: pulse-b-tnxffku5wl 2s ease-in-out infinite;
}

.out-icon[b-tnxffku5wl] {
    color: #ef4444;
    font-size: 1rem;
}

@keyframes pulse-b-tnxffku5wl {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.numeric-cell[b-tnxffku5wl] {
    text-align: right;
    font-weight: 600;
    color: #475569;
    font-family: 'Courier New', monospace;
}

.available-cell[b-tnxffku5wl] {
    color: #059669;
}

.reserved-cell[b-tnxffku5wl] {
    color: #3b82f6;
}

.onorder-cell[b-tnxffku5wl] {
    color: #8b5cf6;
}

.transit-cell[b-tnxffku5wl] {
    color: #f59e0b;
}

.rework-cell[b-tnxffku5wl] {
    color: #dc2626;
}

.unit-cell[b-tnxffku5wl] {
    color: #64748b;
    font-weight: 500;
    font-size: 0.8125rem;
    text-align: center;
}

/* === RESULTS FOOTER === */
.results-footer[b-tnxffku5wl] {
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    margin-top: 1.5rem;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1200px) {
    .filters-bar[b-tnxffku5wl] {
        gap: 1rem;
    }

    .filter-group[b-tnxffku5wl] {
        min-width: 180px;
    }
}

@media (max-width: 992px) {
    .stats-grid[b-tnxffku5wl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-actions[b-tnxffku5wl] {
        flex-direction: column;
        width: 100%;
    }

    .btn-clear[b-tnxffku5wl],
    .btn-export[b-tnxffku5wl] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .stock-levels-container[b-tnxffku5wl] {
        padding: 1rem;
    }

    .filters-bar[b-tnxffku5wl] {
        padding: 1rem;
    }

    .filter-group[b-tnxffku5wl] {
        min-width: 100%;
    }

    .stats-grid[b-tnxffku5wl] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card[b-tnxffku5wl] {
        padding: 1rem;
    }

    .stat-icon[b-tnxffku5wl] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .stat-value[b-tnxffku5wl] {
        font-size: 1.5rem;
    }

    .table-wrapper[b-tnxffku5wl] {
        max-height: 500px;
    }

    .stock-table th[b-tnxffku5wl],
    .stock-table td[b-tnxffku5wl] {
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .stock-levels-container[b-tnxffku5wl] {
        padding: 0.75rem;
    }

    .filters-bar[b-tnxffku5wl] {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .filter-label[b-tnxffku5wl] {
        font-size: 0.75rem;
    }

    .filter-select[b-tnxffku5wl],
    .filter-input[b-tnxffku5wl] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .btn-clear[b-tnxffku5wl],
    .btn-export[b-tnxffku5wl] {
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
    }

    .stat-card[b-tnxffku5wl] {
        gap: 1rem;
    }

    .stat-icon[b-tnxffku5wl] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .stat-value[b-tnxffku5wl] {
        font-size: 1.25rem;
    }

    .stat-label[b-tnxffku5wl] {
        font-size: 0.75rem;
    }

    .table-wrapper[b-tnxffku5wl] {
        max-height: 400px;
    }

    .stock-badge[b-tnxffku5wl] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        min-width: 60px;
    }
}
/* _content/webQT/Features/Inventories/Warehouse/MaterialRequisitionForm.razor.rz.scp.css */
.adjustment-form-page[b-wnc3e9x3m0] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 2rem;
}

.page-header[b-wnc3e9x3m0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.header-left[b-wnc3e9x3m0] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.btn-back[b-wnc3e9x3m0] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-back:hover[b-wnc3e9x3m0] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.3);
    }

.header-title h1[b-wnc3e9x3m0] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .header-title h1 i[b-wnc3e9x3m0] {
        color: #3b82f6;
        font-size: 1.5rem;
    }

.header-title .subtitle[b-wnc3e9x3m0] {
    color: #64748b;
    font-size: 0.875rem;
}

.status-badge[b-wnc3e9x3m0] {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
}

.status-completed[b-wnc3e9x3m0] {
    background: #d1fae5;
    color: #065f46;
}

.status-progress[b-wnc3e9x3m0] {
    background: #dbeafe;
    color: #1e40af;
}

.header-actions[b-wnc3e9x3m0] {
    display: flex;
    gap: 1rem;
}

.btn-secondary[b-wnc3e9x3m0],
.btn-outline[b-wnc3e9x3m0],
.btn-success[b-wnc3e9x3m0],
.btn-primary[b-wnc3e9x3m0] {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-secondary[b-wnc3e9x3m0] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-wnc3e9x3m0] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.3);
    }

.btn-outline[b-wnc3e9x3m0] {
    background: white;
    border: 2px solid #cbd5e1;
    color: #475569;
}

    .btn-outline:hover:not(:disabled)[b-wnc3e9x3m0] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

.btn-success[b-wnc3e9x3m0] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

    .btn-success:hover:not(:disabled)[b-wnc3e9x3m0] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
    }

.btn-primary[b-wnc3e9x3m0] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-wnc3e9x3m0] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    }

button:disabled[b-wnc3e9x3m0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-content[b-wnc3e9x3m0] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-card[b-wnc3e9x3m0],
.scanner-card[b-wnc3e9x3m0],
.items-card[b-wnc3e9x3m0] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-wnc3e9x3m0] {
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .card-header h3[b-wnc3e9x3m0] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .card-header h3 i[b-wnc3e9x3m0] {
            color: #3b82f6;
            font-size: 1.25rem;
        }

.card-body[b-wnc3e9x3m0] {
    padding: 2rem;
}

.info-grid[b-wnc3e9x3m0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-group[b-wnc3e9x3m0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .form-group label[b-wnc3e9x3m0] {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.required[b-wnc3e9x3m0] {
    color: #ef4444;
}

.form-control[b-wnc3e9x3m0] {
    padding: 0.875rem 1rem;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.9375rem;
    background: white;
    color: #1e293b;
    transition: all 0.3s ease;
    font-family: inherit;
}

    .form-control:focus[b-wnc3e9x3m0] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }

    .form-control:read-only[b-wnc3e9x3m0] {
        background: #f8fafc;
        color: #64748b;
    }

.scanner-actions[b-wnc3e9x3m0] {
    display: flex;
    gap: 1rem;
}

.btn-scan[b-wnc3e9x3m0],
.btn-manual[b-wnc3e9x3m0] {
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-scan[b-wnc3e9x3m0] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
}

    .btn-scan:hover[b-wnc3e9x3m0] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    }

    .btn-scan.active[b-wnc3e9x3m0] {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    }

.btn-manual[b-wnc3e9x3m0] {
    background: white;
    border: 2px solid #3b82f6;
    color: #3b82f6;
}

    .btn-manual:hover[b-wnc3e9x3m0] {
        background: #3b82f6;
        color: white;
    }

.scanner-viewport[b-wnc3e9x3m0] {
    padding: 2rem;
}

.scanner-placeholder[b-wnc3e9x3m0] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
}

    .scanner-placeholder i[b-wnc3e9x3m0] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .scanner-placeholder p[b-wnc3e9x3m0] {
        margin: 0.5rem 0;
        font-weight: 600;
        font-size: 1.125rem;
    }

    .scanner-placeholder small[b-wnc3e9x3m0] {
        color: #94a3b8;
    }

.items-summary[b-wnc3e9x3m0] {
    display: flex;
    gap: 1.5rem;
}

.summary-item[b-wnc3e9x3m0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

    .summary-item.positive[b-wnc3e9x3m0] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
    }

    .summary-item.negative[b-wnc3e9x3m0] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
    }

    .summary-item i[b-wnc3e9x3m0] {
        font-size: 1.25rem;
    }

.items-table-container[b-wnc3e9x3m0] {
    padding: 2rem;
    overflow-x: auto;
}

.items-table[b-wnc3e9x3m0] {
    width: 100%;
    border-collapse: collapse;
}

    .items-table thead[b-wnc3e9x3m0] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .items-table th[b-wnc3e9x3m0] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .items-table td[b-wnc3e9x3m0] {
        padding: 1rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .items-table tbody tr:hover[b-wnc3e9x3m0] {
        background: #f8fafc;
    }

.sequence[b-wnc3e9x3m0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-radius: 8px;
    font-weight: 700;
}

.qty-adjustment[b-wnc3e9x3m0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 700;
}

    .qty-adjustment.positive[b-wnc3e9x3m0] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
    }

    .qty-adjustment.negative[b-wnc3e9x3m0] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
    }

.time-badge[b-wnc3e9x3m0] {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.875rem;
    color: #64748b;
}

.btn-remove[b-wnc3e9x3m0] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: all 0.2s ease;
}

    .btn-remove:hover[b-wnc3e9x3m0] {
        color: #dc2626;
        transform: scale(1.2);
    }

.empty-items[b-wnc3e9x3m0] {
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
}

    .empty-items i[b-wnc3e9x3m0] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-items p[b-wnc3e9x3m0] {
        margin: 0.5rem 0;
        font-weight: 600;
        font-size: 1.125rem;
    }

    .empty-items small[b-wnc3e9x3m0] {
        color: #94a3b8;
    }

.modal-overlay[b-wnc3e9x3m0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-container[b-wnc3e9x3m0] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

    .modal-container.large[b-wnc3e9x3m0] {
        max-width: 900px;
    }

    .modal-container.small[b-wnc3e9x3m0] {
        max-width: 500px;
    }

.modal-header[b-wnc3e9x3m0] {
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

    .modal-header h3[b-wnc3e9x3m0] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .modal-header h3 i[b-wnc3e9x3m0] {
            color: #3b82f6;
        }

    .modal-header h4[b-wnc3e9x3m0] {
        margin: 0 0 0.5rem 0;
        font-size: 1.125rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .modal-header h4 i[b-wnc3e9x3m0] {
            color: #3b82f6;
        }

.btn-close[b-wnc3e9x3m0] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

    .btn-close:hover[b-wnc3e9x3m0] {
        background: #f1f5f9;
        color: #1e293b;
    }

.modal-body[b-wnc3e9x3m0] {
    padding: 2rem;
}

.modal-footer[b-wnc3e9x3m0] {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.form-row[b-wnc3e9x3m0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.bundle-labels-section[b-wnc3e9x3m0] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.section-header[b-wnc3e9x3m0] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.count-badge[b-wnc3e9x3m0] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
}

.hint-text[b-wnc3e9x3m0] {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    font-style: italic;
    display: block;
    margin-top: 0.5rem;
}

.labels-grid[b-wnc3e9x3m0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.label-input-group[b-wnc3e9x3m0] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

    .label-input-group:hover[b-wnc3e9x3m0] {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .label-input-group.valid[b-wnc3e9x3m0] {
        border-color: #10b981;
        background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    }

    .label-input-group.duplicate[b-wnc3e9x3m0] {
        border-color: #ef4444;
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    }

.bundle-badge[b-wnc3e9x3m0] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8125rem;
    white-space: nowrap;
    min-width: 90px;
    text-align: center;
}

.label-input-wrapper[b-wnc3e9x3m0] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .label-input-wrapper i[b-wnc3e9x3m0] {
        color: #3b82f6;
        font-size: 1.125rem;
    }

.label-input[b-wnc3e9x3m0] {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1rem;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, monospace;
    background: white;
    color: #1e293b;
    transition: all 0.3s ease;
}

    .label-input:focus[b-wnc3e9x3m0] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }

.btn-clear-label[b-wnc3e9x3m0] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;
}

    .btn-clear-label:hover[b-wnc3e9x3m0] {
        background: #e2e8f0;
        color: #1e293b;
        transform: translateY(-50%) scale(1.1);
    }

.label-status[b-wnc3e9x3m0] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.text-success[b-wnc3e9x3m0] {
    color: #10b981;
}

.text-muted[b-wnc3e9x3m0] {
    color: #cbd5e1;
}

.warning-box[b-wnc3e9x3m0] {
    padding: 1.25rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    border-left: 4px solid #f59e0b;
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    color: #92400e;
}

    .warning-box i[b-wnc3e9x3m0] {
        font-size: 1.5rem;
        flex-shrink: 0;
    }

.warning-content[b-wnc3e9x3m0] {
    flex: 1;
}

    .warning-content strong[b-wnc3e9x3m0] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.9375rem;
    }

    .warning-content p[b-wnc3e9x3m0] {
        margin: 0.5rem 0;
    }

    .warning-content ul[b-wnc3e9x3m0] {
        margin: 0.5rem 0 0 1.5rem;
        padding: 0;
    }

    .warning-content li[b-wnc3e9x3m0] {
        font-weight: 600;
        font-family: 'SF Mono', Monaco, monospace;
    }

@media (max-width: 768px) {
    .adjustment-form-page[b-wnc3e9x3m0] {
        padding: 1rem;
    }

    .page-header[b-wnc3e9x3m0] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-wnc3e9x3m0] {
        flex-direction: column;
    }

        .header-actions button[b-wnc3e9x3m0] {
            width: 100%;
        }

    .info-grid[b-wnc3e9x3m0],
    .form-row[b-wnc3e9x3m0] {
        grid-template-columns: 1fr;
    }

    .labels-grid[b-wnc3e9x3m0] {
        grid-template-columns: 1fr;
    }

    .label-input-group[b-wnc3e9x3m0] {
        grid-template-columns: 1fr;
    }

    .bundle-badge[b-wnc3e9x3m0] {
        width: 100%;
    }
}
/* _content/webQT/Features/Inventories/Warehouse/MaterialRequisitionTab.razor.rz.scp.css */
/* Adjustments Tab Styles */

.adjustments-container[b-lt7lqrmnss] {
    padding: 0;
}

.adjustments-header[b-lt7lqrmnss] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.header-left h2[b-lt7lqrmnss] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-left .subtitle[b-lt7lqrmnss] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.header-actions[b-lt7lqrmnss] {
    display: flex;
    gap: 0.75rem;
}

.filters-card[b-lt7lqrmnss] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filters-grid[b-lt7lqrmnss] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filter-group[b-lt7lqrmnss] {
    display: flex;
    flex-direction: column;
}

    .filter-group label[b-lt7lqrmnss] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.form-control[b-lt7lqrmnss] {
    padding: 0.625rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-control:focus[b-lt7lqrmnss] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.form-hint[b-lt7lqrmnss] {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.25rem;
    display: block;
}

.btn-secondary[b-lt7lqrmnss] {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 0.625rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-secondary:hover[b-lt7lqrmnss] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #475569;
    }

.table-card[b-lt7lqrmnss] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table-container[b-lt7lqrmnss] {
    overflow-x: auto;
}

.adjustments-table[b-lt7lqrmnss] {
    width: 100%;
    border-collapse: collapse;
}

    .adjustments-table thead[b-lt7lqrmnss] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    }

    .adjustments-table th[b-lt7lqrmnss] {
        padding: 1rem 1.25rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #fcd34d;
    }

    .adjustments-table tbody tr[b-lt7lqrmnss] {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.2s ease;
    }

        .adjustments-table tbody tr:hover[b-lt7lqrmnss] {
            background: #fffbeb;
        }

        .adjustments-table tbody tr.row-cancelled[b-lt7lqrmnss] {
            opacity: 0.6;
        }

    .adjustments-table td[b-lt7lqrmnss] {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.movement-number[b-lt7lqrmnss] {
    color: #d97706;
    font-weight: 600;
}

.datetime-cell[b-lt7lqrmnss] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .datetime-cell .date[b-lt7lqrmnss] {
        font-weight: 500;
        color: #1e293b;
    }

    .datetime-cell .time[b-lt7lqrmnss] {
        font-size: 0.8125rem;
        color: #64748b;
    }

.warehouse-badge[b-lt7lqrmnss] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #fef3c7;
    color: #d97706;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.reason-badge[b-lt7lqrmnss] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.items-count[b-lt7lqrmnss] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
    font-weight: 500;
}

.type-badge[b-lt7lqrmnss] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.type-increase[b-lt7lqrmnss] {
    background: #dcfce7;
    color: #059669;
}

.type-decrease[b-lt7lqrmnss] {
    background: #fee2e2;
    color: #dc2626;
}

.type-mixed[b-lt7lqrmnss] {
    background: #e0f2fe;
    color: #0284c7;
}

.status-badge[b-lt7lqrmnss] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-completed[b-lt7lqrmnss] {
    background: #dcfce7;
    color: #059669;
}

.status-progress[b-lt7lqrmnss] {
    background: #fef3c7;
    color: #d97706;
}

.status-cancelled[b-lt7lqrmnss] {
    background: #fee2e2;
    color: #dc2626;
}

.status-default[b-lt7lqrmnss] {
    background: #f1f5f9;
    color: #64748b;
}

.action-buttons[b-lt7lqrmnss] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-lt7lqrmnss] {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
}

    .btn-icon:hover[b-lt7lqrmnss] {
        background: #f8fafc;
        border-color: #f59e0b;
        color: #f59e0b;
    }

    .btn-icon.edit:hover[b-lt7lqrmnss] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .btn-icon.delete:hover[b-lt7lqrmnss] {
        border-color: #dc2626;
        color: #dc2626;
    }

.no-data[b-lt7lqrmnss] {
    text-align: center;
    padding: 4rem 2rem !important;
    color: #94a3b8;
}

    .no-data i[b-lt7lqrmnss] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .no-data p[b-lt7lqrmnss] {
        font-size: 1.125rem;
        margin: 0;
    }

.modal-overlay[b-lt7lqrmnss] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-lt7lqrmnss 0.2s ease;
}

@keyframes fadeIn-b-lt7lqrmnss {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-container[b-lt7lqrmnss] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-lt7lqrmnss 0.3s ease;
}

@keyframes slideUp-b-lt7lqrmnss {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-container.large[b-lt7lqrmnss] {
    width: 90%;
    max-width: 1200px;
}

.modal-container.small[b-lt7lqrmnss] {
    width: 90%;
    max-width: 500px;
}

.modal-header[b-lt7lqrmnss] {
    padding: 1.75rem 2rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

    .modal-header h3[b-lt7lqrmnss] {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

.btn-close[b-lt7lqrmnss] {
    width: 36px;
    height: 36px;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .btn-close:hover[b-lt7lqrmnss] {
        background: #fee2e2;
        color: #dc2626;
    }

.modal-body[b-lt7lqrmnss] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.adjustment-info-section[b-lt7lqrmnss] {
    margin-bottom: 2rem;
}

.info-grid[b-lt7lqrmnss] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.form-group[b-lt7lqrmnss] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-lt7lqrmnss] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.required[b-lt7lqrmnss] {
    color: #ef4444;
}

.scanner-section[b-lt7lqrmnss] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.scanner-header[b-lt7lqrmnss] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .scanner-header h4[b-lt7lqrmnss] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.scanner-actions[b-lt7lqrmnss] {
    display: flex;
    gap: 0.75rem;
}

.btn-scan[b-lt7lqrmnss] {
    background: white;
    color: #f59e0b;
    border: 2px solid #f59e0b;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-scan:hover[b-lt7lqrmnss] {
        background: #f59e0b;
        color: white;
    }

    .btn-scan.active[b-lt7lqrmnss] {
        background: #ef4444;
        border-color: #ef4444;
        color: white;
    }

        .btn-scan.active:hover[b-lt7lqrmnss] {
            background: #dc2626;
            border-color: #dc2626;
        }

.btn-manual[b-lt7lqrmnss] {
    background: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-manual:hover[b-lt7lqrmnss] {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #475569;
    }

.scanner-viewport[b-lt7lqrmnss] {
    margin-top: 1rem;
}

.scanner-placeholder[b-lt7lqrmnss] {
    background: white;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
}

    .scanner-placeholder i[b-lt7lqrmnss] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .scanner-placeholder p[b-lt7lqrmnss] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .scanner-placeholder small[b-lt7lqrmnss] {
        font-size: 0.875rem;
        color: #94a3b8;
    }

.items-section[b-lt7lqrmnss] {
    background: white;
    border: 2px solid #fde68a;
    border-radius: 12px;
    padding: 1.5rem;
}

.items-header[b-lt7lqrmnss] {
    margin-bottom: 1rem;
}

    .items-header h4[b-lt7lqrmnss] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.items-table-container[b-lt7lqrmnss] {
    overflow-x: auto;
}

.items-table[b-lt7lqrmnss] {
    width: 100%;
    border-collapse: collapse;
}

    .items-table thead[b-lt7lqrmnss] {
        background: #fffbeb;
    }

    .items-table th[b-lt7lqrmnss] {
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #fde68a;
    }

    .items-table tbody tr[b-lt7lqrmnss] {
        border-bottom: 1px solid #e2e8f0;
    }

        .items-table tbody tr:last-child[b-lt7lqrmnss] {
            border-bottom: none;
        }

    .items-table td[b-lt7lqrmnss] {
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.sequence[b-lt7lqrmnss] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fef3c7;
    color: #f59e0b;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

.qty-adjustment[b-lt7lqrmnss] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

    .qty-adjustment.positive[b-lt7lqrmnss] {
        background: #dcfce7;
        color: #059669;
    }

    .qty-adjustment.negative[b-lt7lqrmnss] {
        background: #fee2e2;
        color: #dc2626;
    }

.time-badge[b-lt7lqrmnss] {
    font-size: 0.8125rem;
    color: #64748b;
}

.btn-remove[b-lt7lqrmnss] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: all 0.2s ease;
}

    .btn-remove:hover[b-lt7lqrmnss] {
        color: #dc2626;
        transform: scale(1.1);
    }

.empty-items[b-lt7lqrmnss] {
    text-align: center;
    padding: 3rem 2rem;
    color: #94a3b8;
}

    .empty-items i[b-lt7lqrmnss] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-items p[b-lt7lqrmnss] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .empty-items small[b-lt7lqrmnss] {
        font-size: 0.875rem;
    }

.modal-footer[b-lt7lqrmnss] {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: #fffbeb;
}

.btn-outline[b-lt7lqrmnss] {
    background: white;
    color: #f59e0b;
    border: 2px solid #f59e0b;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-outline:hover:not(:disabled)[b-lt7lqrmnss] {
        background: #f59e0b;
        color: white;
    }

    .btn-outline:disabled[b-lt7lqrmnss] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-success[b-lt7lqrmnss] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3), 0 2px 4px rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-success[b-lt7lqrmnss]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-success:hover:not(:disabled)[b-lt7lqrmnss] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(16, 185, 129, 0.4), 0 4px 6px rgba(16, 185, 129, 0.3);
    }

        .btn-success:hover:not(:disabled)[b-lt7lqrmnss]::before {
            opacity: 1;
            animation: shine-b-lt7lqrmnss 0.6s ease;
        }

    .btn-success:disabled[b-lt7lqrmnss] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-success:active:not(:disabled)[b-lt7lqrmnss] {
        transform: translateY(0);
    }

.btn-primary[b-lt7lqrmnss] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3), 0 2px 4px rgba(245, 158, 11, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-primary[b-lt7lqrmnss]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-primary:hover[b-lt7lqrmnss] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(245, 158, 11, 0.4), 0 4px 6px rgba(245, 158, 11, 0.3);
    }

        .btn-primary:hover[b-lt7lqrmnss]::before {
            opacity: 1;
            animation: shine-b-lt7lqrmnss 0.6s ease;
        }

    .btn-primary:active[b-lt7lqrmnss] {
        transform: translateY(0);
    }

@keyframes shine-b-lt7lqrmnss {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

@media (max-width: 1024px) {
    .filters-grid[b-lt7lqrmnss] {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-grid[b-lt7lqrmnss] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .adjustments-header[b-lt7lqrmnss] {
        flex-direction: column;
        gap: 1rem;
    }

    .filters-grid[b-lt7lqrmnss] {
        grid-template-columns: 1fr;
    }

    .scanner-header[b-lt7lqrmnss] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .scanner-actions[b-lt7lqrmnss] {
        width: 100%;
        flex-direction: column;
    }

    .modal-container.large[b-lt7lqrmnss],
    .modal-container.small[b-lt7lqrmnss] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header[b-lt7lqrmnss] {
        padding: 1.25rem 1rem;
    }

    .modal-body[b-lt7lqrmnss] {
        padding: 1.25rem;
    }

    .modal-footer[b-lt7lqrmnss] {
        padding: 1rem;
        flex-direction: column;
    }

        .modal-footer button[b-lt7lqrmnss] {
            width: 100%;
            justify-content: center;
        }

    .adjustments-table th[b-lt7lqrmnss],
    .adjustments-table td[b-lt7lqrmnss] {
        padding: 0.75rem 0.625rem;
        font-size: 0.875rem;
    }
}
/* _content/webQT/Features/Inventories/Warehouse/MaterialRequisitionView.razor.rz.scp.css */
/* Material Requisition View Styles */

.material-view-container[b-yp67r9fs9u] {
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Loading & Error States */
.loading-state[b-yp67r9fs9u],
.error-state[b-yp67r9fs9u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

    .loading-state p[b-yp67r9fs9u],
    .error-state p[b-yp67r9fs9u] {
        color: #64748b;
        font-size: 1.125rem;
    }

    .error-state i[b-yp67r9fs9u] {
        font-size: 4rem;
        color: #ef4444;
    }

    .error-state h3[b-yp67r9fs9u] {
        color: #1e293b;
        font-size: 1.75rem;
        font-weight: 600;
        margin: 0;
    }

.spinner[b-yp67r9fs9u] {
    width: 50px;
    height: 50px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-yp67r9fs9u 1s linear infinite;
}

@keyframes spin-b-yp67r9fs9u {
    to {
        transform: rotate(360deg);
    }
}

/* Page Header */
.page-header[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content[b-yp67r9fs9u] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.btn-back[b-yp67r9fs9u] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-back:hover[b-yp67r9fs9u] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateX(-4px);
    }

.header-title h1[b-yp67r9fs9u] {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .header-title h1 i[b-yp67r9fs9u] {
        font-size: 2rem;
    }

.header-subtitle[b-yp67r9fs9u] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    margin: 0.25rem 0 0 0;
    font-weight: 500;
}

.actions-bar[b-yp67r9fs9u] {
    display: flex;
    gap: 0.75rem;
}

.btn-secondary[b-yp67r9fs9u] {
    background: white;
    color: #1e40af;
    border: 1px solid #e2e8f0;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-secondary[b-yp67r9fs9u]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(59, 130, 246, 0.1) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-secondary:hover[b-yp67r9fs9u] {
        background: #f8fafc;
        border-color: #3b82f6;
        color: #1e40af;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }

        .btn-secondary:hover[b-yp67r9fs9u]::before {
            opacity: 1;
            animation: shine-b-yp67r9fs9u 0.6s ease;
        }

.btn-primary[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-primary[b-yp67r9fs9u]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-primary:hover[b-yp67r9fs9u] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(59, 130, 246, 0.4), 0 4px 6px rgba(59, 130, 246, 0.3);
    }

        .btn-primary:hover[b-yp67r9fs9u]::before {
            opacity: 1;
            animation: shine-b-yp67r9fs9u 0.6s ease;
        }

@keyframes shine-b-yp67r9fs9u {
    0% {
        transform: rotate(45deg) translateX(-100%);
    }

    100% {
        transform: rotate(45deg) translateX(100%);
    }
}

/* Summary Section */
.summary-section[b-yp67r9fs9u] {
    padding: 0 2.5rem;
    margin-bottom: 2rem;
}

.status-card[b-yp67r9fs9u] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.status-header[b-yp67r9fs9u] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-label[b-yp67r9fs9u] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge[b-yp67r9fs9u] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-completed[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: 1px solid #059669;
}

.status-progress[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: 1px solid #d97706;
}

.status-cancelled[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: 1px solid #dc2626;
}

.status-draft[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    border: 1px solid #475569;
}

.status-default[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: white;
    border: 1px solid #64748b;
}

.summary-grid[b-yp67r9fs9u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.summary-item[b-yp67r9fs9u] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

    .summary-item:hover[b-yp67r9fs9u] {
        transform: translateY(-4px);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.08);
    }

    .summary-item i[b-yp67r9fs9u] {
        font-size: 2rem;
        color: #3b82f6;
    }

.summary-content[b-yp67r9fs9u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label[b-yp67r9fs9u] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
}

.summary-value[b-yp67r9fs9u] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
}

/* Details Section */
.details-section[b-yp67r9fs9u],
.items-section[b-yp67r9fs9u],
.audit-section[b-yp67r9fs9u] {
    padding: 0 2.5rem;
    margin-bottom: 2rem;
}

.info-card[b-yp67r9fs9u],
.items-card[b-yp67r9fs9u],
.audit-card[b-yp67r9fs9u] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.card-header[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #e2e8f0;
}

    .card-header h3[b-yp67r9fs9u] {
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .card-header h3 i[b-yp67r9fs9u] {
            color: #3b82f6;
        }

.card-body[b-yp67r9fs9u] {
    padding: 2rem;
}

.detail-grid[b-yp67r9fs9u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.detail-item[b-yp67r9fs9u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .detail-item.full-width[b-yp67r9fs9u] {
        grid-column: 1 / -1;
    }

.detail-label[b-yp67r9fs9u] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value[b-yp67r9fs9u] {
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
}

.notes-text[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #fbbf24;
    font-style: italic;
    line-height: 1.6;
}

/* Items Table */
.table-responsive[b-yp67r9fs9u] {
    overflow-x: auto;
    border-radius: 8px;
}

.items-table[b-yp67r9fs9u] {
    width: 100%;
    border-collapse: collapse;
}

    .items-table thead[b-yp67r9fs9u] {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    }

        .items-table thead th[b-yp67r9fs9u] {
            padding: 1rem 1.25rem;
            text-align: left;
            font-size: 0.875rem;
            font-weight: 600;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

    .items-table tbody tr[b-yp67r9fs9u] {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.2s ease;
    }

        .items-table tbody tr:hover[b-yp67r9fs9u] {
            background: #f8fafc;
        }

        .items-table tbody tr:last-child[b-yp67r9fs9u] {
            border-bottom: none;
        }

    .items-table tbody td[b-yp67r9fs9u] {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
        color: #475569;
    }

.sequence-cell[b-yp67r9fs9u] {
    font-weight: 600;
    color: #64748b;
}

.label-cell strong[b-yp67r9fs9u] {
    color: #1e293b;
    font-size: 0.95rem;
}

.time-badge[b-yp67r9fs9u] {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0369a1;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid #7dd3fc;
}

.empty-items[b-yp67r9fs9u] {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
}

    .empty-items i[b-yp67r9fs9u] {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-items p[b-yp67r9fs9u] {
        font-size: 1.125rem;
        margin: 0;
    }

/* Audit Trail Timeline */
.timeline[b-yp67r9fs9u] {
    position: relative;
    padding-left: 2rem;
}

    .timeline[b-yp67r9fs9u]::before {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    }

.timeline-item[b-yp67r9fs9u] {
    position: relative;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}

    .timeline-item:last-child[b-yp67r9fs9u] {
        margin-bottom: 0;
        padding-bottom: 0;
    }

.timeline-marker[b-yp67r9fs9u] {
    position: absolute;
    left: -1.5rem;
    top: 0.25rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 3px solid #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.timeline-content[b-yp67r9fs9u] {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    border-left: 3px solid #3b82f6;
    transition: all 0.3s ease;
}

    .timeline-content:hover[b-yp67r9fs9u] {
        border-color: #1e40af;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        transform: translateX(4px);
    }

.timeline-header[b-yp67r9fs9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.timeline-action[b-yp67r9fs9u] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.timeline-date[b-yp67r9fs9u] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.timeline-user[b-yp67r9fs9u] {
    font-size: 0.875rem;
    color: #475569;
    margin: 0 0 0.5rem 0;
    font-style: italic;
}

.timeline-details[b-yp67r9fs9u] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .material-view-container[b-yp67r9fs9u] {
        padding: 0;
    }

    .summary-grid[b-yp67r9fs9u] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .page-header[b-yp67r9fs9u] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
        padding: 1.5rem 1rem;
    }

    .header-content[b-yp67r9fs9u] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .actions-bar[b-yp67r9fs9u] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-title h1[b-yp67r9fs9u] {
        font-size: 1.5rem;
    }

    .summary-section[b-yp67r9fs9u],
    .details-section[b-yp67r9fs9u],
    .items-section[b-yp67r9fs9u],
    .audit-section[b-yp67r9fs9u] {
        padding: 0 1rem;
    }

    .summary-grid[b-yp67r9fs9u] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-grid[b-yp67r9fs9u] {
        grid-template-columns: 1fr;
    }

    .card-body[b-yp67r9fs9u] {
        padding: 1.5rem 1rem;
    }

    .items-table[b-yp67r9fs9u] {
        font-size: 0.875rem;
    }

        .items-table thead th[b-yp67r9fs9u],
        .items-table tbody td[b-yp67r9fs9u] {
            padding: 0.75rem 0.5rem;
        }
}

/* iPad Specific (9th generation) */
@media (min-width: 768px) and (max-width: 820px) {
    .summary-grid[b-yp67r9fs9u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-grid[b-yp67r9fs9u] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* _content/webQT/Features/Inventories/Warehouse/MRSEntryModal.razor.rz.scp.css */
/* Adjustments Tab Styles */

.adjustments-container[b-mxy69mv0ja] {
    padding: 0;
}

.adjustments-header[b-mxy69mv0ja] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.header-left h2[b-mxy69mv0ja] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-left .subtitle[b-mxy69mv0ja] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.header-actions[b-mxy69mv0ja] {
    display: flex;
    gap: 0.75rem;
}

.filters-card[b-mxy69mv0ja] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filters-grid[b-mxy69mv0ja] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filter-group[b-mxy69mv0ja] {
    display: flex;
    flex-direction: column;
}

    .filter-group label[b-mxy69mv0ja] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.form-control[b-mxy69mv0ja] {
    padding: 0.625rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-control:focus[b-mxy69mv0ja] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.form-hint[b-mxy69mv0ja] {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.25rem;
    display: block;
}

.btn-secondary[b-mxy69mv0ja] {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 0.625rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-secondary:hover[b-mxy69mv0ja] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #475569;
    }

.table-card[b-mxy69mv0ja] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table-container[b-mxy69mv0ja] {
    overflow-x: auto;
}

.adjustments-table[b-mxy69mv0ja] {
    width: 100%;
    border-collapse: collapse;
}

    .adjustments-table thead[b-mxy69mv0ja] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    }

    .adjustments-table th[b-mxy69mv0ja] {
        padding: 1rem 1.25rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #fcd34d;
    }

    .adjustments-table tbody tr[b-mxy69mv0ja] {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.2s ease;
    }

        .adjustments-table tbody tr:hover[b-mxy69mv0ja] {
            background: #fffbeb;
        }

        .adjustments-table tbody tr.row-cancelled[b-mxy69mv0ja] {
            opacity: 0.6;
        }

    .adjustments-table td[b-mxy69mv0ja] {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.movement-number[b-mxy69mv0ja] {
    color: #d97706;
    font-weight: 600;
}

.datetime-cell[b-mxy69mv0ja] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .datetime-cell .date[b-mxy69mv0ja] {
        font-weight: 500;
        color: #1e293b;
    }

    .datetime-cell .time[b-mxy69mv0ja] {
        font-size: 0.8125rem;
        color: #64748b;
    }

.warehouse-badge[b-mxy69mv0ja] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #fef3c7;
    color: #d97706;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.reason-badge[b-mxy69mv0ja] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.items-count[b-mxy69mv0ja] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
    font-weight: 500;
}

.type-badge[b-mxy69mv0ja] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.type-increase[b-mxy69mv0ja] {
    background: #dcfce7;
    color: #059669;
}

.type-decrease[b-mxy69mv0ja] {
    background: #fee2e2;
    color: #dc2626;
}

.type-mixed[b-mxy69mv0ja] {
    background: #e0f2fe;
    color: #0284c7;
}

.status-badge[b-mxy69mv0ja] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-completed[b-mxy69mv0ja] {
    background: #dcfce7;
    color: #059669;
}

.status-progress[b-mxy69mv0ja] {
    background: #fef3c7;
    color: #d97706;
}

.status-cancelled[b-mxy69mv0ja] {
    background: #fee2e2;
    color: #dc2626;
}

.status-default[b-mxy69mv0ja] {
    background: #f1f5f9;
    color: #64748b;
}

.action-buttons[b-mxy69mv0ja] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-mxy69mv0ja] {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
}

    .btn-icon:hover[b-mxy69mv0ja] {
        background: #f8fafc;
        border-color: #f59e0b;
        color: #f59e0b;
    }

    .btn-icon.edit:hover[b-mxy69mv0ja] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .btn-icon.delete:hover[b-mxy69mv0ja] {
        border-color: #dc2626;
        color: #dc2626;
    }

.no-data[b-mxy69mv0ja] {
    text-align: center;
    padding: 4rem 2rem !important;
    color: #94a3b8;
}

    .no-data i[b-mxy69mv0ja] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .no-data p[b-mxy69mv0ja] {
        font-size: 1.125rem;
        margin: 0;
    }

.modal-overlay[b-mxy69mv0ja] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-mxy69mv0ja 0.2s ease;
}

@keyframes fadeIn-b-mxy69mv0ja {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-container[b-mxy69mv0ja] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-mxy69mv0ja 0.3s ease;
}

@keyframes slideUp-b-mxy69mv0ja {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-container.large[b-mxy69mv0ja] {
    width: 90%;
    max-width: 1200px;
}

.modal-container.small[b-mxy69mv0ja] {
    width: 90%;
    max-width: 500px;
}

.modal-header[b-mxy69mv0ja] {
    padding: 1.75rem 2rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

    .modal-header h3[b-mxy69mv0ja] {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

.btn-close[b-mxy69mv0ja] {
    width: 36px;
    height: 36px;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .btn-close:hover[b-mxy69mv0ja] {
        background: #fee2e2;
        color: #dc2626;
    }

.modal-body[b-mxy69mv0ja] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.adjustment-info-section[b-mxy69mv0ja] {
    margin-bottom: 2rem;
}

.info-grid[b-mxy69mv0ja] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.form-group[b-mxy69mv0ja] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-mxy69mv0ja] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
    }

.required[b-mxy69mv0ja] {
    color: #ef4444;
}

.scanner-section[b-mxy69mv0ja] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.scanner-header[b-mxy69mv0ja] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .scanner-header h4[b-mxy69mv0ja] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.scanner-actions[b-mxy69mv0ja] {
    display: flex;
    gap: 0.75rem;
}

.btn-scan[b-mxy69mv0ja] {
    background: white;
    color: #f59e0b;
    border: 2px solid #f59e0b;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-scan:hover[b-mxy69mv0ja] {
        background: #f59e0b;
        color: white;
    }

    .btn-scan.active[b-mxy69mv0ja] {
        background: #ef4444;
        border-color: #ef4444;
        color: white;
    }

        .btn-scan.active:hover[b-mxy69mv0ja] {
            background: #dc2626;
            border-color: #dc2626;
        }

.btn-manual[b-mxy69mv0ja] {
    background: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-manual:hover[b-mxy69mv0ja] {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #475569;
    }

.scanner-viewport[b-mxy69mv0ja] {
    margin-top: 1rem;
}

.scanner-placeholder[b-mxy69mv0ja] {
    background: white;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
}

    .scanner-placeholder i[b-mxy69mv0ja] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .scanner-placeholder p[b-mxy69mv0ja] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .scanner-placeholder small[b-mxy69mv0ja] {
        font-size: 0.875rem;
        color: #94a3b8;
    }

.items-section[b-mxy69mv0ja] {
    background: white;
    border: 2px solid #fde68a;
    border-radius: 12px;
    padding: 1.5rem;
}

.items-header[b-mxy69mv0ja] {
    margin-bottom: 1rem;
}

    .items-header h4[b-mxy69mv0ja] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.items-table-container[b-mxy69mv0ja] {
    overflow-x: auto;
}

.items-table[b-mxy69mv0ja] {
    width: 100%;
    border-collapse: collapse;
}

    .items-table thead[b-mxy69mv0ja] {
        background: #fffbeb;
    }

    .items-table th[b-mxy69mv0ja] {
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #fde68a;
    }

    .items-table tbody tr[b-mxy69mv0ja] {
        border-bottom: 1px solid #e2e8f0;
    }

        .items-table tbody tr:last-child[b-mxy69mv0ja] {
            border-bottom: none;
        }

    .items-table td[b-mxy69mv0ja] {
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
        color: #334155;
    }

.sequence[b-mxy69mv0ja] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fef3c7;
    color: #f59e0b;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

.qty-adjustment[b-mxy69mv0ja] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

    .qty-adjustment.positive[b-mxy69mv0ja] {
        background: #dcfce7;
        color: #059669;
    }

    .qty-adjustment.negative[b-mxy69mv0ja] {
        background: #fee2e2;
        color: #dc2626;
    }

.time-badge[b-mxy69mv0ja] {
    font-size: 0.8125rem;
    color: #64748b;
}

.btn-remove[b-mxy69mv0ja] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: all 0.2s ease;
}

    .btn-remove:hover[b-mxy69mv0ja] {
        color: #dc2626;
        transform: scale(1.1);
    }

.empty-items[b-mxy69mv0ja] {
    text-align: center;
    padding: 3rem 2rem;
    color: #94a3b8;
}

    .empty-items i[b-mxy69mv0ja] {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-items p[b-mxy69mv0ja] {
        font-size: 1.125rem;
        margin: 0 0 0.5rem 0;
    }

    .empty-items small[b-mxy69mv0ja] {
        font-size: 0.875rem;
    }

.modal-footer[b-mxy69mv0ja] {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: #fffbeb;
}

.btn-outline[b-mxy69mv0ja] {
    background: white;
    color: #f59e0b;
    border: 2px solid #f59e0b;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    .btn-outline:hover:not(:disabled)[b-mxy69mv0ja] {
        background: #f59e0b;
        color: white;
    }

    .btn-outline:disabled[b-mxy69mv0ja] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-success[b-mxy69mv0ja] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3), 0 2px 4px rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-success[b-mxy69mv0ja]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-success:hover:not(:disabled)[b-mxy69mv0ja] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(16, 185, 129, 0.4), 0 4px 6px rgba(16, 185, 129, 0.3);
    }

        .btn-success:hover:not(:disabled)[b-mxy69mv0ja]::before {
            opacity: 1;
            animation: shine-b-mxy69mv0ja 0.6s ease;
        }

    .btn-success:disabled[b-mxy69mv0ja] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-success:active:not(:disabled)[b-mxy69mv0ja] {
        transform: translateY(0);
    }

.btn-primary[b-mxy69mv0ja] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3), 0 2px 4px rgba(245, 158, 11, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-primary[b-mxy69mv0ja]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .btn-primary:hover[b-mxy69mv0ja] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(245, 158, 11, 0.4), 0 4px 6px rgba(245, 158, 11, 0.3);
    }

        .btn-primary:hover[b-mxy69mv0ja]::before {
            opacity: 1;
            animation: shine-b-mxy69mv0ja 0.6s ease;
        }

    .btn-primary:active[b-mxy69mv0ja] {
        transform: translateY(0);
    }

@keyframes shine-b-mxy69mv0ja {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

@media (max-width: 1024px) {
    .filters-grid[b-mxy69mv0ja] {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-grid[b-mxy69mv0ja] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .adjustments-header[b-mxy69mv0ja] {
        flex-direction: column;
        gap: 1rem;
    }

    .filters-grid[b-mxy69mv0ja] {
        grid-template-columns: 1fr;
    }

    .scanner-header[b-mxy69mv0ja] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .scanner-actions[b-mxy69mv0ja] {
        width: 100%;
        flex-direction: column;
    }

    .modal-container.large[b-mxy69mv0ja],
    .modal-container.small[b-mxy69mv0ja] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header[b-mxy69mv0ja] {
        padding: 1.25rem 1rem;
    }

    .modal-body[b-mxy69mv0ja] {
        padding: 1.25rem;
    }

    .modal-footer[b-mxy69mv0ja] {
        padding: 1rem;
        flex-direction: column;
    }

        .modal-footer button[b-mxy69mv0ja] {
            width: 100%;
            justify-content: center;
        }

    .adjustments-table th[b-mxy69mv0ja],
    .adjustments-table td[b-mxy69mv0ja] {
        padding: 0.75rem 0.625rem;
        font-size: 0.875rem;
    }
}
/* _content/webQT/Features/Procurement/POApproval/Pages/AuthorizePO.razor.rz.scp.css */
/* Purchase Orders Container */
.purchase-orders-container[b-nc124fs2s8] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    background-color: #f8fafc;
    min-height: 100vh;
}

/* Page Header */
.page-header[b-nc124fs2s8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.page-title[b-nc124fs2s8] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.actions-bar[b-nc124fs2s8] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Buttons */
.btn[b-nc124fs2s8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

    .btn:hover[b-nc124fs2s8] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .btn:active[b-nc124fs2s8] {
        transform: translateY(0);
    }

    .btn:disabled[b-nc124fs2s8] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.refresh-btn[b-nc124fs2s8] {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    border: none;
}

    .refresh-btn:hover[b-nc124fs2s8] {
        background: linear-gradient(135deg, #1e40af, #1e3a8a);
    }

.primary-btn[b-nc124fs2s8] {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    border: none;
}

.secondary-btn[b-nc124fs2s8] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.success-btn[b-nc124fs2s8] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
}

.danger-btn[b-nc124fs2s8] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
}

.close-btn[b-nc124fs2s8] {
    padding: 0.5rem;
    background: transparent;
    color: #64748b;
    border: none;
    border-radius: 0.25rem;
}

    .close-btn:hover[b-nc124fs2s8] {
        background: #f1f5f9;
        color: #475569;
    }

/* Loading */
.loading-container[b-nc124fs2s8] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-spinner[b-nc124fs2s8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner[b-nc124fs2s8] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-nc124fs2s8 1s linear infinite;
}

.spinning[b-nc124fs2s8] {
    animation: spin-b-nc124fs2s8 1s linear infinite;
}

@keyframes spin-b-nc124fs2s8 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-nc124fs2s8] {
    color: #64748b;
    font-weight: 500;
    margin: 0;
}

/* Empty State */
.empty-state[b-nc124fs2s8] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.empty-icon[b-nc124fs2s8] {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h3[b-nc124fs2s8] {
    color: #475569;
    margin-bottom: 0.5rem;
}

.empty-state p[b-nc124fs2s8] {
    color: #64748b;
    margin-bottom: 2rem;
}

/* Summary Cards */
.summary-cards[b-nc124fs2s8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card[b-nc124fs2s8] {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

    .summary-card:hover[b-nc124fs2s8] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.card-icon[b-nc124fs2s8] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    font-size: 1.5rem;
}

.card-content h4[b-nc124fs2s8] {
    margin: 0 0 0.5rem 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-number[b-nc124fs2s8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

/* Table Container */
.table-container[b-nc124fs2s8] {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table-header[b-nc124fs2s8] {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

    .table-header h3[b-nc124fs2s8] {
        margin: 0;
        color: #1e293b;
        font-weight: 600;
    }

.table-actions[b-nc124fs2s8] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-box[b-nc124fs2s8] {
    position: relative;
    display: flex;
    align-items: center;
}

    .search-box i[b-nc124fs2s8] {
        position: absolute;
        left: 0.75rem;
        color: #94a3b8;
        z-index: 1;
    }

    .search-box input[b-nc124fs2s8] {
        padding: 0.5rem 0.75rem 0.5rem 2.5rem;
        border: 1px solid #cbd5e1;
        border-radius: 0.5rem;
        background: white;
        color: #475569;
        font-size: 0.875rem;
        width: 250px;
        transition: all 0.2s ease;
    }

        .search-box input:focus[b-nc124fs2s8] {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .search-box input[b-nc124fs2s8]::placeholder {
            color: #94a3b8;
        }

/* Table */
.table-responsive[b-nc124fs2s8] {
    overflow-x: auto;
}

.data-table[b-nc124fs2s8] {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th[b-nc124fs2s8] {
        background: #f8fafc;
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #475569;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #e2e8f0;
    }

        .data-table th.sortable[b-nc124fs2s8] {
            cursor: pointer;
            user-select: none;
            position: relative;
            transition: background-color 0.2s ease;
        }

            .data-table th.sortable:hover[b-nc124fs2s8] {
                background: #f1f5f9;
            }

.sort-icon[b-nc124fs2s8] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.5;
}

.data-table td[b-nc124fs2s8] {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.table-row[b-nc124fs2s8] {
    transition: background-color 0.2s ease;
}

    .table-row:hover[b-nc124fs2s8] {
        background: #f8fafc;
    }

/* Table Cells */
.id-cell[b-nc124fs2s8] {
    width: 80px;
}

.id-badge[b-nc124fs2s8] {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.date-cell[b-nc124fs2s8] {
    width: 150px;
}

.date-container[b-nc124fs2s8] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.date-text[b-nc124fs2s8] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}

.date-subtext[b-nc124fs2s8] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: capitalize;
}

.no-date[b-nc124fs2s8] {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.875rem;
}

.reference-cell[b-nc124fs2s8] {
    width: 150px;
}

.reference-number[b-nc124fs2s8] {
    font-weight: 600;
    color: #1e293b;
    font-family: 'Courier New', monospace;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.amount-cell[b-nc124fs2s8] {
    width: 120px;
    text-align: right;
}

.amount-text[b-nc124fs2s8] {
    font-weight: 700;
    color: #059669;
    font-size: 1rem;
}

.actions-cell[b-nc124fs2s8] {
    width: 150px;
}

.actions-header[b-nc124fs2s8] {
    text-align: center;
    width: 150px;
}

.action-buttons[b-nc124fs2s8] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-btn[b-nc124fs2s8] {
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.view-btn[b-nc124fs2s8] {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

    .view-btn:hover[b-nc124fs2s8] {
        background: #e2e8f0;
        color: #334155;
    }

.approve-btn[b-nc124fs2s8] {
    background: #dcfce7;
    color: #059669;
    border-color: #bbf7d0;
}

    .approve-btn:hover[b-nc124fs2s8] {
        background: #bbf7d0;
        color: #047857;
    }

.reject-btn[b-nc124fs2s8] {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

    .reject-btn:hover[b-nc124fs2s8] {
        background: #fecaca;
        color: #b91c1c;
    }

/* Modal */
.modal-overlay[b-nc124fs2s8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-dialog[b-nc124fs2s8] {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn-b-nc124fs2s8 0.3s ease-out;
}

@keyframes modalSlideIn-b-nc124fs2s8 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-nc124fs2s8] {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-nc124fs2s8] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
}

.modal-body[b-nc124fs2s8] {
    padding: 1.5rem;
}

    .modal-body p[b-nc124fs2s8] {
        margin: 0 0 1rem 0;
        color: #475569;
        line-height: 1.6;
    }

.form-group[b-nc124fs2s8] {
    margin-top: 1rem;
}

    .form-group label[b-nc124fs2s8] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #374151;
        font-size: 0.875rem;
    }

.form-control[b-nc124fs2s8] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #475569;
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

    .form-control:focus[b-nc124fs2s8] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-control[b-nc124fs2s8]::placeholder {
        color: #94a3b8;
    }

.modal-footer[b-nc124fs2s8] {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* Text Colors */
.text-success[b-nc124fs2s8] {
    color: #059669;
}

.text-danger[b-nc124fs2s8] {
    color: #dc2626;
}

/* Responsive Design */
@media (max-width: 768px) {
    .purchase-orders-container[b-nc124fs2s8] {
        padding: 1rem;
    }

    .page-header[b-nc124fs2s8] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .page-title[b-nc124fs2s8] {
        font-size: 1.5rem;
    }

    .summary-cards[b-nc124fs2s8] {
        grid-template-columns: 1fr;
    }

    .table-header[b-nc124fs2s8] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .table-actions[b-nc124fs2s8] {
        width: 100%;
        justify-content: flex-end;
    }

    .search-box input[b-nc124fs2s8] {
        width: 200px;
    }

    .action-buttons[b-nc124fs2s8] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .action-btn[b-nc124fs2s8] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .modal-dialog[b-nc124fs2s8] {
        width: 95%;
        margin: 1rem;
    }

    .modal-footer[b-nc124fs2s8] {
        flex-direction: column-reverse;
    }

        .modal-footer .btn[b-nc124fs2s8] {
            width: 100%;
            justify-content: center;
        }
}

@media (max-width: 480px) {
    .data-table th[b-nc124fs2s8],
    .data-table td[b-nc124fs2s8] {
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    .id-badge[b-nc124fs2s8] {
        font-size: 0.625rem;
        padding: 0.125rem 0.5rem;
    }

    .reference-number[b-nc124fs2s8] {
        font-size: 0.75rem;
        padding: 0.125rem 0.375rem;
    }

    .date-text[b-nc124fs2s8] {
        font-size: 0.75rem;
    }

    .date-subtext[b-nc124fs2s8] {
        font-size: 0.625rem;
    }
}
/* _content/webQT/Features/Procurement/POMgmt/Pages/PODetails.razor.rz.scp.css */
/* PODetails.razor.css - Enhanced Header with Dropdown Menus */

.po-details-container[b-ar1red5lwf] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    background-color: #f8fafc;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: visible;
}

/* Enhanced Header Layout */
.po-header[b-ar1red5lwf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: visible;
}

.header-left[b-ar1red5lwf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.po-title[b-ar1red5lwf] {
    color: #1e293b;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.po-status-badge[b-ar1red5lwf] {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-por-autorizar[b-ar1red5lwf] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
}

.status-autorizado[b-ar1red5lwf] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #064e3b;
}

.status-rechazado[b-ar1red5lwf] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: #7f1d1d;
}

.header-right[b-ar1red5lwf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

/* Button Base Styles */
.btn-back[b-ar1red5lwf],
.btn-edit[b-ar1red5lwf],
.btn-save[b-ar1red5lwf],
.btn-cancel[b-ar1red5lwf],
.btn-success[b-ar1red5lwf],
.btn-danger[b-ar1red5lwf],
.btn-dropdown[b-ar1red5lwf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

    /* Shine Animation */
    .btn-back[b-ar1red5lwf]::before,
    .btn-edit[b-ar1red5lwf]::before,
    .btn-save[b-ar1red5lwf]::before,
    .btn-cancel[b-ar1red5lwf]::before,
    .btn-success[b-ar1red5lwf]::before,
    .btn-danger[b-ar1red5lwf]::before,
    .btn-dropdown[b-ar1red5lwf]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s;
    }

    .btn-back:hover[b-ar1red5lwf]::before,
    .btn-edit:hover[b-ar1red5lwf]::before,
    .btn-save:hover[b-ar1red5lwf]::before,
    .btn-cancel:hover[b-ar1red5lwf]::before,
    .btn-success:hover[b-ar1red5lwf]::before,
    .btn-danger:hover[b-ar1red5lwf]::before,
    .btn-dropdown:hover[b-ar1red5lwf]::before {
        left: 100%;
    }

/* Individual Button Styles */
.btn-back[b-ar1red5lwf] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.3);
}

    .btn-back:hover[b-ar1red5lwf] {
        background: linear-gradient(135deg, #475569 0%, #334155 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(100, 116, 139, 0.4);
    }

.btn-edit[b-ar1red5lwf] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .btn-edit:hover[b-ar1red5lwf] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    }

.btn-save[b-ar1red5lwf] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

    .btn-save:hover[b-ar1red5lwf] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
    }

.btn-cancel[b-ar1red5lwf] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

    .btn-cancel:hover[b-ar1red5lwf] {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(107, 114, 128, 0.4);
    }

.btn-success[b-ar1red5lwf] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

    .btn-success:hover[b-ar1red5lwf] {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
    }

.btn-danger[b-ar1red5lwf] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

    .btn-danger:hover[b-ar1red5lwf] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
    }

.btn-dropdown[b-ar1red5lwf] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #1e293b;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

    .btn-dropdown:hover[b-ar1red5lwf] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    .btn-dropdown i.bi-chevron-down[b-ar1red5lwf] {
        font-size: 0.75rem;
        transition: transform 0.2s ease;
    }

/* Dropdown Container */
.dropdown-wrapper[b-ar1red5lwf] {
    position: relative;
    display: inline-block;
    z-index: 100;
}

/* PO Dropdown Menu - Simple absolute positioning */
.po-dropdown-menu[b-ar1red5lwf] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 220px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    z-index: 9999;
    animation: dropdownSlideIn-b-ar1red5lwf 0.2s ease-out;
}

@keyframes dropdownSlideIn-b-ar1red5lwf {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Item */
.dropdown-item[b-ar1red5lwf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: none;
    background: transparent;
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .dropdown-item:hover[b-ar1red5lwf] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        color: #3b82f6;
    }

    .dropdown-item i[b-ar1red5lwf] {
        font-size: 1rem;
        width: 1.25rem;
        text-align: center;
        color: #64748b;
    }

    .dropdown-item:hover i[b-ar1red5lwf] {
        color: #3b82f6;
    }

/* Dropdown Header */
.dropdown-header[b-ar1red5lwf] {
    padding: 0.5rem 0.875rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

/* Dropdown Divider */
.dropdown-divider[b-ar1red5lwf] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 0.5rem 0;
}

/* Content Section */
.po-content[b-ar1red5lwf] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.po-info-section[b-ar1red5lwf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.info-card[b-ar1red5lwf] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.card-header[b-ar1red5lwf] {
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
}

    .card-header h5[b-ar1red5lwf] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #1e293b;
    }

.card-content[b-ar1red5lwf] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-row[b-ar1red5lwf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

    .info-row .label[b-ar1red5lwf] {
        font-weight: 600;
        color: #64748b;
        font-size: 0.875rem;
    }

    .info-row .value[b-ar1red5lwf] {
        font-weight: 500;
        color: #1e293b;
        text-align: right;
    }

.value-input[b-ar1red5lwf] {
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
}

/* Line Items Section */
.line-items-section[b-ar1red5lwf] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.section-header[b-ar1red5lwf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

    .section-header h4[b-ar1red5lwf] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.btn-add-item[b-ar1red5lwf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-add-item:hover[b-ar1red5lwf] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

.table-container[b-ar1red5lwf] {
    overflow-x: auto;
}

.items-table[b-ar1red5lwf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .items-table thead[b-ar1red5lwf] {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    }

    .items-table th[b-ar1red5lwf] {
        padding: 0.75rem 1rem;
        text-align: left;
        font-weight: 600;
        color: #1e293b;
        border-bottom: 2px solid #e2e8f0;
    }

        .items-table th.text-right[b-ar1red5lwf] {
            text-align: right;
        }

    .items-table td[b-ar1red5lwf] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f1f5f9;
    }

        .items-table td.text-right[b-ar1red5lwf] {
            text-align: right;
        }

        .items-table td.text-center[b-ar1red5lwf] {
            text-align: center;
        }

    .items-table tr:hover[b-ar1red5lwf] {
        background: #f8fafc;
    }

.table-input[b-ar1red5lwf],
.table-input-small[b-ar1red5lwf] {
    padding: 0.375rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.875rem;
    width: 100%;
}

.table-input-small[b-ar1red5lwf] {
    font-size: 0.75rem;
}

.part-number[b-ar1red5lwf] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.btn-delete-item[b-ar1red5lwf] {
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-delete-item:hover[b-ar1red5lwf] {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

/* Bottom Section */
.bottom-section[b-ar1red5lwf] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.notes-section[b-ar1red5lwf] {
    grid-column: 1;
}

.summary-section[b-ar1red5lwf] {
    grid-column: 2;
}

.notes-textarea[b-ar1red5lwf] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

.notes-text[b-ar1red5lwf] {
    margin: 0;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.6;
}

.summary[b-ar1red5lwf] {
    position: sticky;
    top: 2rem;
}

.summary-row[b-ar1red5lwf] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

    .summary-row.total[b-ar1red5lwf] {
        border-top: 2px solid #e2e8f0;
        border-bottom: none;
        font-weight: 700;
        font-size: 1.125rem;
        color: #1e293b;
    }

/* Loading Section */
.loading-section[b-ar1red5lwf] {
    text-align: center;
    padding: 80px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

.spinner[b-ar1red5lwf] {
    border: 4px solid #f1f5f9;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin-b-ar1red5lwf 1s linear infinite;
    margin: 0 auto 25px;
}

@keyframes spin-b-ar1red5lwf {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Modal Styles */
.modal-overlay[b-ar1red5lwf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: auto;
}

.modal-dialog[b-ar1red5lwf] {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    position: relative;
    z-index: 10000;
}

.modal-header[b-ar1red5lwf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-title[b-ar1red5lwf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.close-btn[b-ar1red5lwf] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
}

    .close-btn:hover[b-ar1red5lwf] {
        background: #f1f5f9;
    }

.modal-body[b-ar1red5lwf] {
    padding: 1.5rem;
}

.form-group[b-ar1red5lwf] {
    margin-top: 1rem;
}

    .form-group label[b-ar1red5lwf] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #1e293b;
    }

.form-control[b-ar1red5lwf] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
}

.modal-footer[b-ar1red5lwf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.secondary-btn[b-ar1red5lwf] {
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.success-btn[b-ar1red5lwf] {
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.danger-btn[b-ar1red5lwf] {
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .po-header[b-ar1red5lwf] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .header-left[b-ar1red5lwf] {
        justify-content: space-between;
    }

    .header-right[b-ar1red5lwf] {
        justify-content: flex-start;
    }

    .dropdown-menu[b-ar1red5lwf] {
        right: auto;
        left: 0;
    }

    .bottom-section[b-ar1red5lwf] {
        grid-template-columns: 1fr;
    }

    .summary-section[b-ar1red5lwf] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .po-details-container[b-ar1red5lwf] {
        padding: 1rem;
    }

    .po-header[b-ar1red5lwf] {
        padding: 1rem;
    }

    .po-title[b-ar1red5lwf] {
        font-size: 1.25rem;
    }

    .header-right[b-ar1red5lwf] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-back[b-ar1red5lwf],
    .btn-edit[b-ar1red5lwf],
    .btn-save[b-ar1red5lwf],
    .btn-cancel[b-ar1red5lwf],
    .btn-success[b-ar1red5lwf],
    .btn-danger[b-ar1red5lwf],
    .btn-dropdown[b-ar1red5lwf] {
        width: 100%;
        justify-content: center;
    }

    .dropdown-menu[b-ar1red5lwf] {
        width: 100%;
        left: 0;
        right: 0;
    }

    .po-info-section[b-ar1red5lwf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header-left[b-ar1red5lwf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .po-status-badge[b-ar1red5lwf] {
        align-self: flex-start;
    }
}

/* Pending Quantity Styling */
.pending-qty[b-ar1red5lwf] {
    font-weight: 600;
    color: #f59e0b;
}

.received-qty[b-ar1red5lwf] {
    font-weight: 600;
    color: #10b981;
}

.table-input[type="number"][b-ar1red5lwf] {
    text-align: right;
}
/* _content/webQT/Features/Procurement/POMgmt/Pages/POManagement.razor.rz.scp.css */
/* Purchase Orders Container */
.purchase-orders-container[b-6y02g4krbc] {
    padding: 1rem 2rem;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
}

/* Page Header */
.page-header[b-6y02g4krbc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.page-title[b-6y02g4krbc] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.75rem;
    font-weight: 600;
}

.actions-bar[b-6y02g4krbc] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.purchase-orders-container .btn[b-6y02g4krbc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.5;
}

    .purchase-orders-container .btn:disabled[b-6y02g4krbc] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.purchase-orders-container .refresh-btn[b-6y02g4krbc] {
    background-color: #6c757d;
    color: white;
}

    .purchase-orders-container .refresh-btn:hover:not(:disabled)[b-6y02g4krbc] {
        background-color: #5a6268;
        transform: translateY(-1px);
    }

.purchase-orders-container .primary-btn[b-6y02g4krbc] {
    background-color: #007bff;
    color: white;
}

    .purchase-orders-container .primary-btn:hover[b-6y02g4krbc] {
        background-color: #0056b3;
        transform: translateY(-1px);
    }

.purchase-orders-container .secondary-btn[b-6y02g4krbc] {
    background-color: #6c757d;
    color: white;
}

    .purchase-orders-container .secondary-btn:hover[b-6y02g4krbc] {
        background-color: #5a6268;
        transform: translateY(-1px);
    }

.purchase-orders-container .success-btn[b-6y02g4krbc] {
    background-color: #28a745;
    color: white;
}

    .purchase-orders-container .success-btn:hover[b-6y02g4krbc] {
        background-color: #218838;
    }

.purchase-orders-container .danger-btn[b-6y02g4krbc] {
    background-color: #dc3545;
    color: white;
}

    .purchase-orders-container .danger-btn:hover[b-6y02g4krbc] {
        background-color: #c82333;
    }

/* Loading */
.loading-container[b-6y02g4krbc] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loading-spinner[b-6y02g4krbc] {
    text-align: center;
}

.spinner[b-6y02g4krbc] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: po-spin-b-6y02g4krbc 1s linear infinite;
    margin: 0 auto 1rem;
}

.spinning[b-6y02g4krbc] {
    animation: po-spin-b-6y02g4krbc 1s linear infinite;
}

@keyframes po-spin-b-6y02g4krbc {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-6y02g4krbc] {
    color: #6c757d;
    margin: 0;
    font-size: 1rem;
}

/* Empty State */
.empty-state[b-6y02g4krbc] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-icon[b-6y02g4krbc] {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.empty-state h3[b-6y02g4krbc] {
    color: #495057;
    margin-bottom: 0.5rem;
}

.empty-state p[b-6y02g4krbc] {
    color: #6c757d;
    margin-bottom: 1.5rem;
}

/* Summary Cards */
.summary-cards[b-6y02g4krbc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card[b-6y02g4krbc] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-icon[b-6y02g4krbc] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    font-size: 1.5rem;
}

.card-content h4[b-6y02g4krbc] {
    margin: 0 0 0.5rem 0;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-number[b-6y02g4krbc] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
}

/* Table Container */
.table-container[b-6y02g4krbc] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.table-header[b-6y02g4krbc] {
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

    .table-header h3[b-6y02g4krbc] {
        margin: 0 0 1rem 0;
        color: #2c3e50;
        font-size: 1.25rem;
        font-weight: 600;
    }

.table-actions[b-6y02g4krbc] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filters-container[b-6y02g4krbc] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    flex: 1;
}

.filter-group[b-6y02g4krbc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .filter-group label[b-6y02g4krbc] {
        font-size: 0.75rem;
        font-weight: 500;
        color: #6c757d;
        margin: 0;
    }

.purchase-orders-container .form-select[b-6y02g4krbc],
.purchase-orders-container .form-input[b-6y02g4krbc] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.875rem;
    background-color: white;
    min-width: 140px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .purchase-orders-container .form-select:focus[b-6y02g4krbc],
    .purchase-orders-container .form-input:focus[b-6y02g4krbc] {
        border-color: #007bff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.search-box[b-6y02g4krbc] {
    position: relative;
    display: flex;
    align-items: center;
}

    .search-box i[b-6y02g4krbc] {
        position: absolute;
        left: 0.75rem;
        color: #6c757d;
        z-index: 1;
    }

    .search-box input[b-6y02g4krbc] {
        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 0.875rem;
        width: 250px;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

        .search-box input:focus[b-6y02g4krbc] {
            border-color: #007bff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

.filter-actions[b-6y02g4krbc] {
    display: flex;
    align-items: flex-end;
}

/* Table */
.table-responsive[b-6y02g4krbc] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table[b-6y02g4krbc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 800px; /* Ensures table doesn't get too cramped */
}

    .data-table thead[b-6y02g4krbc] {
        background-color: #f8f9fa;
    }

    .data-table th[b-6y02g4krbc] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }

        .data-table th.sortable[b-6y02g4krbc] {
            cursor: pointer;
            user-select: none;
            position: relative;
        }

            .data-table th.sortable:hover[b-6y02g4krbc] {
                background-color: #e9ecef;
            }

.sort-icon[b-6y02g4krbc] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.5;
}

.data-table td[b-6y02g4krbc] {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.table-row:hover[b-6y02g4krbc] {
    background-color: #f8f9fa;
}

/* Table Cell Styles */
.id-cell[b-6y02g4krbc] {
    position: relative;
}

    .id-cell .id-badge[b-6y02g4krbc] {
        background-color: #e9ecef;
        color: #495057;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-weight: 500;
        font-size: 0.75rem;
    }

.ready-indicator[b-6y02g4krbc] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #ffc107;
    font-size: 1rem;
    animation: po-starPulse-b-6y02g4krbc 1.5s infinite, po-starBounce-b-6y02g4krbc 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.8));
}

@keyframes po-starPulse-b-6y02g4krbc {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes po-starBounce-b-6y02g4krbc {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    25% {
        transform: translateY(-3px) scale(1.1);
    }

    50% {
        transform: translateY(-6px) scale(1.2);
    }

    75% {
        transform: translateY(-3px) scale(1.1);
    }
}

.date-container[b-6y02g4krbc] {
    display: flex;
    flex-direction: column;
}

.date-text[b-6y02g4krbc] {
    font-weight: 500;
    color: #2c3e50;
}

.date-subtext[b-6y02g4krbc] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: capitalize;
}

.no-date[b-6y02g4krbc] {
    color: #6c757d;
    font-style: italic;
}

.reference-number[b-6y02g4krbc] {
    font-family: monospace;
    font-weight: 500;
    color: #2c3e50;
}

.amount[b-6y02g4krbc] {
    font-weight: 600;
    color: #28a745;
    font-size: 0.9rem;
}

/* Status Badges */
.status-cell[b-6y02g4krbc] {
    text-align: center;
}

.status-badge[b-6y02g4krbc] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.situation-pending[b-6y02g4krbc] {
    background-color: #fff3cd;
    color: #856404;
}

.situation-level1[b-6y02g4krbc] {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #17a2b8;
    font-weight: 500;
}

.situation-level2[b-6y02g4krbc] {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    font-weight: 500;
}

.situation-level3[b-6y02g4krbc] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
    font-weight: 500;
}

/* Only make situation badges green when the order is actually ready */
.ready-for-purchase .situation-level1[b-6y02g4krbc],
.ready-for-purchase .situation-level2[b-6y02g4krbc],
.ready-for-purchase .situation-level3[b-6y02g4krbc] {
    background-color: #d4edda !important;
    color: #155724 !important;
    border: 2px solid #28a745 !important;
    font-weight: 600;
    animation: po-glow-b-6y02g4krbc 2s ease-in-out infinite alternate;
}

@keyframes po-glow-b-6y02g4krbc {
    from {
        background-color: #d1ecf1;
        box-shadow: 0 0 5px rgba(23, 162, 184, 0.3);
    }

    to {
        background-color: #bee5eb;
        box-shadow: 0 0 15px rgba(23, 162, 184, 0.6);
    }
}

/* Ready for Purchase Row Highlighting */
.ready-for-purchase[b-6y02g4krbc] {
    background-color: #d4edda !important;
    border-left: 4px solid #28a745;
}

    .ready-for-purchase:hover[b-6y02g4krbc] {
        background-color: #c3e6cb !important;
    }

/* Action Buttons */
.actions-cell[b-6y02g4krbc] {
    text-align: center;
}

.action-buttons[b-6y02g4krbc] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-btn[b-6y02g4krbc] {
    padding: 0.5rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.view-btn[b-6y02g4krbc] {
    background-color: #17a2b8;
    color: white;
}

    .view-btn:hover[b-6y02g4krbc] {
        background-color: #138496;
        transform: translateY(-1px);
    }

.pdf-btn[b-6y02g4krbc] {
    background-color: #c71e26;
    color: white;
}

    .pdf-btn:hover[b-6y02g4krbc] {
        background-color: #e6101b;
        transform: translateY(-1px);
    }

.approve-btn[b-6y02g4krbc] {
    background-color: #28a745;
    color: white;
}

    .approve-btn:hover[b-6y02g4krbc] {
        background-color: #218838;
        transform: translateY(-1px);
    }

.reject-btn[b-6y02g4krbc] {
    background-color: #dc3545;
    color: white;
}

    .reject-btn:hover[b-6y02g4krbc] {
        background-color: #c82333;
        transform: translateY(-1px);
    }

/* Modal */
.modal-overlay[b-6y02g4krbc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.modal-dialog[b-6y02g4krbc] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    animation: po-modalSlideIn-b-6y02g4krbc 0.3s ease-out;
}

@keyframes po-modalSlideIn-b-6y02g4krbc {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-6y02g4krbc] {
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-6y02g4krbc] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.close-btn[b-6y02g4krbc] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

    .close-btn:hover[b-6y02g4krbc] {
        background-color: #f8f9fa;
        color: #495057;
    }

.modal-body[b-6y02g4krbc] {
    padding: 1.5rem;
}

    .modal-body p[b-6y02g4krbc] {
        margin-bottom: 1rem;
        color: #495057;
        line-height: 1.6;
    }

.form-group[b-6y02g4krbc] {
    margin-top: 1rem;
}

    .form-group label[b-6y02g4krbc] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
    }

.purchase-orders-container .form-control[b-6y02g4krbc] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    resize: vertical;
}

    .purchase-orders-container .form-control:focus[b-6y02g4krbc] {
        border-color: #007bff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.modal-footer[b-6y02g4krbc] {
    padding: 1.5rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    background-color: #f8f9fa;
}

/* Utility Classes */
.text-success[b-6y02g4krbc] {
    color: #28a745 !important;
}

.text-danger[b-6y02g4krbc] {
    color: #dc3545 !important;
}

.text-warning[b-6y02g4krbc] {
    color: #ffc107 !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .purchase-orders-container[b-6y02g4krbc] {
        padding: 0.75rem 1rem;
    }

    .search-box input[b-6y02g4krbc] {
        width: 200px;
    }

    .filters-container[b-6y02g4krbc] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .purchase-orders-container[b-6y02g4krbc] {
        padding: 0.75rem 0.5rem;
    }

    .page-header[b-6y02g4krbc] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .actions-bar[b-6y02g4krbc] {
        justify-content: center;
    }

    .summary-cards[b-6y02g4krbc] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .table-header[b-6y02g4krbc] {
        padding: 1rem;
    }

        .table-header h3[b-6y02g4krbc] {
            margin-bottom: 0.75rem;
        }

    .table-actions[b-6y02g4krbc] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .filters-container[b-6y02g4krbc] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .filter-group[b-6y02g4krbc] {
        align-items: stretch;
    }

    .purchase-orders-container .form-select[b-6y02g4krbc],
    .purchase-orders-container .form-input[b-6y02g4krbc] {
        min-width: auto;
    }

    .search-box input[b-6y02g4krbc] {
        width: 100%;
    }

    .filter-actions[b-6y02g4krbc] {
        justify-content: center;
    }

    .modal-dialog[b-6y02g4krbc] {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }

    .modal-footer[b-6y02g4krbc] {
        flex-direction: column;
    }

    /* Responsive table - allow horizontal scroll */
    .data-table[b-6y02g4krbc] {
        min-width: 600px;
        font-size: 0.8rem;
    }

        .data-table th[b-6y02g4krbc],
        .data-table td[b-6y02g4krbc] {
            padding: 0.75rem 0.5rem;
            white-space: nowrap;
        }

    .action-buttons[b-6y02g4krbc] {
        flex-direction: row;
        gap: 0.25rem;
    }

    .action-btn[b-6y02g4krbc] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .purchase-orders-container[b-6y02g4krbc] {
        padding: 0.5rem 0.25rem;
    }

    .data-table[b-6y02g4krbc] {
        min-width: 500px;
        font-size: 0.75rem;
    }

        .data-table th[b-6y02g4krbc],
        .data-table td[b-6y02g4krbc] {
            padding: 0.5rem 0.25rem;
        }

    .action-btn[b-6y02g4krbc] {
        width: 28px;
        height: 28px;
    }

    .card-number[b-6y02g4krbc] {
        font-size: 1.5rem;
    }

    .page-title[b-6y02g4krbc] {
        font-size: 1.5rem;
    }

    .status-badge[b-6y02g4krbc] {
        font-size: 0.65rem;
        padding: 0.125rem 0.5rem;
    }

    .id-badge[b-6y02g4krbc] {
        font-size: 0.65rem;
        padding: 0.125rem 0.375rem;
    }
}
/* _content/webQT/Features/Procurement/ReStock/RestockMgmt.razor.rz.scp.css */
/* ============================================
   RESTOCK PAGE STYLES
   Design Language: 135deg gradients, blue primary, multi-layered shadows
   ============================================ */

/* Container & Card */
.restock-container[b-5fff232um9] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.restock-card[b-5fff232um9] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Header */
.restock-header[b-5fff232um9] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    padding: 2rem;
    color: white;
}

.restock-title[b-5fff232um9] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.restock-subtitle[b-5fff232um9] {
    margin: 0.5rem 0 0 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Action Bar */
.action-bar[b-5fff232um9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.action-left[b-5fff232um9],
.action-right[b-5fff232um9] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Buttons */
.btn-refresh[b-5fff232um9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .btn-refresh:hover[b-5fff232um9] {
        background: #f9fafb;
        border-color: #9ca3af;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    }

    .btn-refresh:active[b-5fff232um9] {
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

.btn-generate-po[b-5fff232um9] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2), 0 8px 16px rgba(59, 130, 246, 0.15);
}

    .btn-generate-po[b-5fff232um9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent );
        transition: left 0.5s ease;
    }

    .btn-generate-po:hover[b-5fff232um9]::before {
        left: 100%;
    }

    .btn-generate-po:hover[b-5fff232um9] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25), 0 12px 24px rgba(59, 130, 246, 0.2);
    }

    .btn-generate-po:active[b-5fff232um9] {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2), 0 6px 12px rgba(59, 130, 246, 0.15);
    }

    .btn-generate-po:disabled[b-5fff232um9] {
        background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
        cursor: not-allowed;
        opacity: 0.6;
        box-shadow: none;
    }

        .btn-generate-po:disabled:hover[b-5fff232um9] {
            transform: none;
        }

.btn-icon[b-5fff232um9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-icon:hover[b-5fff232um9] {
        background: #f3f4f6;
        border-color: #9ca3af;
        color: #374151;
    }

    .btn-icon:active[b-5fff232um9] {
        transform: scale(0.95);
    }

/* Grid Container */
.grid-container[b-5fff232um9] {
    padding: 2rem;
    overflow-x: auto;
}

/* Data Grid */
.restock-grid[b-5fff232um9] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

    .restock-grid thead[b-5fff232um9] {
        background: #f9fafb;
    }

        .restock-grid thead tr[b-5fff232um9] {
            border-bottom: 2px solid #e5e7eb;
        }

    .restock-grid th[b-5fff232um9] {
        padding: 1rem 1rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .restock-grid tbody tr[b-5fff232um9] {
        border-bottom: 1px solid #e5e7eb;
        transition: all 0.2s ease;
    }

        .restock-grid tbody tr:hover[b-5fff232um9] {
            background: #f9fafb;
        }

        .restock-grid tbody tr.selected[b-5fff232um9] {
            background: #eff6ff;
        }

            .restock-grid tbody tr.selected:hover[b-5fff232um9] {
                background: #dbeafe;
            }

    .restock-grid td[b-5fff232um9] {
        padding: 1rem 1rem;
        color: #1f2937;
    }

/* Column Widths */
.col-select[b-5fff232um9] {
    width: 50px;
    text-align: center;
}

.col-item[b-5fff232um9] {
    min-width: 250px;
}

.col-site[b-5fff232um9] {
    min-width: 150px;
}

.col-number[b-5fff232um9] {
    width: 100px;
    text-align: right;
}

.col-actions[b-5fff232um9] {
    width: 80px;
    text-align: center;
}

/* Item Info */
.item-info[b-5fff232um9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item-name[b-5fff232um9] {
    font-weight: 500;
    color: #111827;
}

.item-part[b-5fff232um9] {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Quantity Badges */
.qty-badge[b-5fff232um9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8125rem;
}

    .qty-badge.normal[b-5fff232um9] {
        background: #d1fae5;
        color: #065f46;
    }

    .qty-badge.low[b-5fff232um9] {
        background: #fef3c7;
        color: #92400e;
    }

    .qty-badge.critical[b-5fff232um9] {
        background: #fee2e2;
        color: #991b1b;
    }

/* Quantity Input */
.qty-input[b-5fff232um9] {
    width: 80px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    text-align: right;
    transition: all 0.2s ease;
}

    .qty-input:focus[b-5fff232um9] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .qty-input:hover[b-5fff232um9] {
        border-color: #9ca3af;
    }

/* Checkboxes */
input[type="checkbox"][b-5fff232um9] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

/* Loading State */
.loading-state[b-5fff232um9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.spinner[b-5fff232um9] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-5fff232um9 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-5fff232um9 {
    to {
        transform: rotate(360deg);
    }
}

.loading-state p[b-5fff232um9] {
    margin: 0;
    font-size: 0.9375rem;
}

/* Empty State */
.empty-state[b-5fff232um9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: #9ca3af;
}

    .empty-state i[b-5fff232um9] {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-state p[b-5fff232um9] {
        margin: 0;
        font-size: 0.9375rem;
    }

/* Summary Footer */
.summary-footer[b-5fff232um9] {
    padding: 1.5rem 2rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.summary-stats[b-5fff232um9] {
    display: flex;
    gap: 3rem;
    justify-content: flex-start;
    align-items: center;
}

.stat-item[b-5fff232um9] {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}

.stat-label[b-5fff232um9] {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 500;
}

.stat-value[b-5fff232um9] {
    font-size: 1.125rem;
    color: #111827;
    font-weight: 700;
}

/* Responsive Design - iPad 9th Gen (810x1080) */
@media (max-width: 1024px) {
    .restock-container[b-5fff232um9] {
        padding: 1rem;
    }

    .restock-header[b-5fff232um9] {
        padding: 1.5rem;
    }

    .restock-title[b-5fff232um9] {
        font-size: 1.5rem;
    }

    .action-bar[b-5fff232um9] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .action-left[b-5fff232um9],
    .action-right[b-5fff232um9] {
        justify-content: center;
    }

    .grid-container[b-5fff232um9] {
        padding: 1rem;
    }

    .summary-stats[b-5fff232um9] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .restock-card[b-5fff232um9] {
        border-radius: 0;
    }

    .restock-container[b-5fff232um9] {
        padding: 0;
    }

    .col-item[b-5fff232um9] {
        min-width: 200px;
    }

    .col-site[b-5fff232um9] {
        min-width: 120px;
    }
}
/* _content/webQT/Features/Procurement/Solicitud/Pages/SolicitudDetails.razor.rz.scp.css */
/* Enhanced SolicitudDetails Page Styles */

.details-container[b-dv7g07vu6k] {
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.details-header[b-dv7g07vu6k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

    .details-header h2[b-dv7g07vu6k] {
        color: #1e293b;
        margin: 0;
        font-weight: 700;
        font-size: 28px;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .details-header .badges[b-dv7g07vu6k] {
        display: flex;
        gap: 12px;
        align-items: center;
    }

h4[b-dv7g07vu6k] {
    color: #1e3a8a;
    margin: 30px 0 20px 0;
    font-weight: 600;
    font-size: 20px;
    position: relative;
    padding-bottom: 8px;
}

    h4[b-dv7g07vu6k]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background: linear-gradient(90deg, #1e3a8a, #3b82f6);
        border-radius: 2px;
    }

/* Enhanced Details Card */
.mb-4[b-dv7g07vu6k] {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .mb-4:hover[b-dv7g07vu6k] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }

    .mb-4 p[b-dv7g07vu6k] {
        margin-bottom: 15px;
        font-size: 16px;
        color: #475569;
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
    }

        .mb-4 p:last-child[b-dv7g07vu6k] {
            border-bottom: none;
            margin-bottom: 0;
        }

        .mb-4 p strong[b-dv7g07vu6k] {
            min-width: 140px;
            display: inline-block;
            color: #1e293b;
            font-weight: 600;
            font-size: 15px;
        }

/* Enhanced Table Styles */
.table-responsive[b-dv7g07vu6k] {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    margin-bottom: 30px;
}

.table[b-dv7g07vu6k] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 15px;
}

    .table th[b-dv7g07vu6k] {
        text-align: left;
        padding: 16px 20px;
        background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
        color: #ffffff;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        position: relative;
    }

        .table th:first-child[b-dv7g07vu6k] {
            border-top-left-radius: 12px;
        }

        .table th:last-child[b-dv7g07vu6k] {
            border-top-right-radius: 12px;
        }

    .table td[b-dv7g07vu6k] {
        padding: 16px 20px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: top;
        color: #475569;
        transition: background-color 0.15s ease;
    }

    .table tbody tr[b-dv7g07vu6k] {
        transition: all 0.15s ease;
    }

        .table tbody tr:hover[b-dv7g07vu6k] {
            background-color: #f8fafc;
            transform: scale(1.001);
        }

        .table tbody tr:last-child td[b-dv7g07vu6k] {
            border-bottom: none;
        }

/* Enhanced Button Styles */
.btn[b-dv7g07vu6k] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .btn[b-dv7g07vu6k]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover[b-dv7g07vu6k]::before {
        left: 100%;
    }

.btn-secondary[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    color: #475569;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .btn-secondary:hover[b-dv7g07vu6k] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.primary-btn[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(30, 58, 138, 0.3);
}

    .primary-btn:hover[b-dv7g07vu6k] {
        background: linear-gradient(135deg, #1e40af 0%, #312e81 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4);
    }

.btn-success[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
}

    .btn-success:hover[b-dv7g07vu6k] {
        background: linear-gradient(135deg, #047857 0%, #065f46 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
    }

.btn-danger[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

    .btn-danger:hover[b-dv7g07vu6k] {
        background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
    }

/* Enhanced Action Bar */
.actions-bar[b-dv7g07vu6k] {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* Enhanced Loading Animation */
.loading-indicator[b-dv7g07vu6k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.spinner[b-dv7g07vu6k] {
    width: 40px;
    height: 40px;
    border: 4px solid #f1f5f9;
    border-radius: 50%;
    border-top-color: #1e3a8a;
    animation: spin-b-dv7g07vu6k 1s ease-in-out infinite;
    margin-bottom: 20px;
}

.loading-indicator p[b-dv7g07vu6k] {
    color: #64748b;
    font-size: 16px;
    font-weight: 500;
}

@keyframes spin-b-dv7g07vu6k {
    to {
        transform: rotate(360deg);
    }
}

/* Enhanced Status Badge Styling */
.status-badge[b-dv7g07vu6k] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

    .status-badge:hover[b-dv7g07vu6k] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

/* Enhanced Status Colors */
.status-pending[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-approved[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-rejected[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.status-completed[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

/* Priority Colors */
.high[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.medium[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.low[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.default[b-dv7g07vu6k] {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: #374151;
    border: 1px solid #6b7280;
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .details-container[b-dv7g07vu6k] {
        padding: 15px;
    }

    .details-header[b-dv7g07vu6k] {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 20px 15px;
    }

        .details-header h2[b-dv7g07vu6k] {
            font-size: 24px;
        }

    .mb-4[b-dv7g07vu6k] {
        padding: 20px 15px;
    }

        .mb-4 p[b-dv7g07vu6k] {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }

            .mb-4 p strong[b-dv7g07vu6k] {
                min-width: auto;
            }

    .table-responsive[b-dv7g07vu6k] {
        margin: 0 -15px;
        border-radius: 0;
    }

    .table th[b-dv7g07vu6k],
    .table td[b-dv7g07vu6k] {
        padding: 12px 8px;
        font-size: 13px;
    }

    .actions-bar[b-dv7g07vu6k] {
        flex-direction: column;
        gap: 10px;
    }

    .btn[b-dv7g07vu6k] {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

@media (max-width: 480px) {
    .details-header h2[b-dv7g07vu6k] {
        font-size: 20px;
    }

    .table[b-dv7g07vu6k] {
        font-size: 12px;
    }

        .table th[b-dv7g07vu6k],
        .table td[b-dv7g07vu6k] {
            padding: 8px 6px;
        }
}
/* _content/webQT/Features/Procurement/Solicitud/Pages/SolicitudEdit.razor.rz.scp.css */
/* SolicitudEdit Page Styles */

.page-container[b-wcg6r1zq9k] {
    padding: 10px 0;
}

.page-header[b-wcg6r1zq9k] {
    margin-bottom: 15px;
}

.title-bar[b-wcg6r1zq9k] {
    background-color: #f8d7da;
    height: 8px;
    margin-bottom: 20px;
    border-radius: 4px;
}

h3[b-wcg6r1zq9k] {
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
}

h5[b-wcg6r1zq9k] {
    color: #1e3a8a;
    font-weight: 500;
    margin-bottom: 15px;
}

hr[b-wcg6r1zq9k] {
    margin: 25px 0;
    border: 0;
    border-top: 1px solid #eee;
}

/* Form Styles */
.form-control[b-wcg6r1zq9k] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out;
}

/* Card Styles */
.card[b-wcg6r1zq9k] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
}

.card-header[b-wcg6r1zq9k] {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.card-body[b-wcg6r1zq9k] {
    padding: 20px;
}

.d-flex[b-wcg6r1zq9k] {
    display: flex;
}

.justify-between[b-wcg6r1zq9k] {
    justify-content: space-between;
    align-items: center;
}

.text-center[b-wcg6r1zq9k] {
    text-align: center;
}

.form-control:focus[b-wcg6r1zq9k] {
    border-color: #1e3a8a;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}

.form-control.invalid[b-wcg6r1zq9k] {
    border-color: #dc3545;
}

label[b-wcg6r1zq9k] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.row[b-wcg6r1zq9k] {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-4[b-wcg6r1zq9k] {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    padding-right: 15px;
    padding-left: 15px;
    position: relative;
}

.mb-3[b-wcg6r1zq9k] {
    margin-bottom: 20px;
}

.mt-3[b-wcg6r1zq9k] {
    margin-top: 20px;
}

.ms-2[b-wcg6r1zq9k] {
    margin-left: 10px;
}

/* Table Styles */
.table[b-wcg6r1zq9k] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 14px;
}

.table-bordered[b-wcg6r1zq9k] {
    border: 1px solid #dee2e6;
}

.table-sm th[b-wcg6r1zq9k],
.table-sm td[b-wcg6r1zq9k] {
    padding: 8px 12px;
}

.table th[b-wcg6r1zq9k] {
    text-align: left;
    background-color: #f1f3f7;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
    color: #333;
    vertical-align: middle;
}

.table td[b-wcg6r1zq9k] {
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    padding: 8px 12px;
}

/* Button Styles */
.btn[b-wcg6r1zq9k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-sm[b-wcg6r1zq9k] {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-success[b-wcg6r1zq9k] {
    background-color: #1e8a58;
    color: white;
    border-color: #1e8a58;
}

    .btn-success:hover[b-wcg6r1zq9k] {
        background-color: #176c45;
        border-color: #176c45;
    }

.btn-secondary[b-wcg6r1zq9k] {
    background-color: #f0f0f0;
    border-color: #ddd;
    color: #333;
}

    .btn-secondary:hover[b-wcg6r1zq9k] {
        background-color: #e5e5e5;
    }

.btn-danger[b-wcg6r1zq9k] {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

    .btn-danger:hover[b-wcg6r1zq9k] {
        background-color: #bd2130;
        border-color: #bd2130;
    }

.btn-outline-primary[b-wcg6r1zq9k] {
    color: #1e3a8a;
    border-color: #1e3a8a;
    background-color: transparent;
}

    .btn-outline-primary:hover[b-wcg6r1zq9k] {
        color: white;
        background-color: #1e3a8a;
    }

/* Validation Styles */
.validation-message[b-wcg6r1zq9k] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}

.validation-error-banner[b-wcg6r1zq9k] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    color: #dc3545;
}

.d-none[b-wcg6r1zq9k] {
    display: none;
}

.validation-error-banner ul[b-wcg6r1zq9k] {
    margin-bottom: 0;
    padding-left: 20px;
}

.validation-summary[b-wcg6r1zq9k] {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

    .validation-summary ul[b-wcg6r1zq9k] {
        margin-bottom: 0;
        padding-left: 20px;
    }

/* Actions Bar */
.actions-bar[b-wcg6r1zq9k] {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .row[b-wcg6r1zq9k] {
        flex-direction: column;
    }

    .col-md-4[b-wcg6r1zq9k] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }

    .table-responsive[b-wcg6r1zq9k] {
        overflow-x: auto;
        width: 100%;
        display: block;
    }

    .actions-bar[b-wcg6r1zq9k] {
        flex-direction: column;
    }

        .actions-bar .btn[b-wcg6r1zq9k] {
            width: 100%;
            margin-left: 0 !important;
            margin-top: 10px;
        }

    .d-flex[b-wcg6r1zq9k] {
        flex-direction: column;
        gap: 10px;
    }

    .card-header .btn[b-wcg6r1zq9k] {
        width: 100%;
    }
}
/* _content/webQT/Features/Procurement/Solicitud/Pages/Solicitudes.razor.rz.scp.css */
/* Enhanced Solicitudes Page Styles - IMPROVED VERSION */

/* Page Container */
.page-container[b-jkr8yi7ca4] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Page Header */
h2[b-jkr8yi7ca4] {
    color: #1e293b;
    margin-bottom: 35px;
    font-weight: 700;
    font-size: 36px;
    position: relative;
    padding-bottom: 15px;
}

    h2[b-jkr8yi7ca4]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 5px;
        background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa);
        border-radius: 3px;
        box-shadow: 0 2px 8px rgba(30, 58, 138, 0.3);
    }

/* Stats Cards Section */
.stats-section[b-jkr8yi7ca4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card[b-jkr8yi7ca4] {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
}

    .stat-card[b-jkr8yi7ca4]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #94a3b8;
        border-radius: 12px 0 0 12px;
    }

    .stat-card.authorized[b-jkr8yi7ca4]::before {
        background: linear-gradient(180deg, #10b981, #059669);
    }

    .stat-card.pending[b-jkr8yi7ca4]::before {
        background: linear-gradient(180deg, #f59e0b, #d97706);
    }

    .stat-card.priority[b-jkr8yi7ca4]::before {
        background: linear-gradient(180deg, #ef4444, #dc2626);
    }

.stat-label[b-jkr8yi7ca4] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-value[b-jkr8yi7ca4] {
    font-size: 36px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

/* Enhanced Actions Bar */
.actions-bar[b-jkr8yi7ca4] {
    margin-bottom: 25px;
    display: flex;
    gap: 15px;
    padding: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* IMPROVED Button Styles */
.btn[b-jkr8yi7ca4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .btn i[b-jkr8yi7ca4] {
        font-size: 18px;
    }

.primary-btn[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.4);
}

    .primary-btn:hover[b-jkr8yi7ca4] {
        background: linear-gradient(135deg, #1e40af 0%, #312e81 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(30, 58, 138, 0.5);
    }

.secondary-btn[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #cbd5e1;
    color: #475569;
}

    .secondary-btn:hover[b-jkr8yi7ca4] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        border-color: #94a3b8;
    }

.filter-toggle-btn[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

    .filter-toggle-btn:hover[b-jkr8yi7ca4] {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5);
    }

/* IMPROVED Filters Container */
.filters-container[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 30px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    animation: slideDown-b-jkr8yi7ca4 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown-b-jkr8yi7ca4 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filters-header[b-jkr8yi7ca4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 3px solid transparent;
    background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 50%, #e2e8f0 100%) bottom/100% 3px no-repeat;
}

    .filters-header h3[b-jkr8yi7ca4] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .filters-header h3 i[b-jkr8yi7ca4] {
            color: #3b82f6;
            font-size: 22px;
        }

.filters-grid[b-jkr8yi7ca4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.filter-group[b-jkr8yi7ca4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .filter-group label[b-jkr8yi7ca4] {
        font-size: 14px;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .filter-group label[b-jkr8yi7ca4]::before {
            content: '▸';
            color: #3b82f6;
            font-size: 12px;
        }

.filter-input[b-jkr8yi7ca4] {
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    color: #1e293b;
    background: #ffffff;
    transition: all 0.3s ease;
    font-weight: 500;
}

    .filter-input:focus[b-jkr8yi7ca4] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
        transform: translateY(-2px);
    }

    .filter-input[b-jkr8yi7ca4]::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

.filters-summary[b-jkr8yi7ca4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 12px;
    border: 2px solid #cbd5e1;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.results-count[b-jkr8yi7ca4] {
    font-size: 15px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

    .results-count i[b-jkr8yi7ca4] {
        color: #3b82f6;
        font-size: 20px;
    }

    .results-count strong[b-jkr8yi7ca4] {
        color: #1e3a8a;
        font-weight: 800;
        font-size: 18px;
    }

.clear-filters-btn[b-jkr8yi7ca4] {
    padding: 10px 18px;
    font-size: 14px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 2px solid #fca5a5;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

    .clear-filters-btn:hover[b-jkr8yi7ca4] {
        background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
    }

/* IMPROVED Table Container */
.table-responsive[b-jkr8yi7ca4] {
    overflow-x: auto;
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border: 2px solid #e2e8f0;
}

/* IMPROVED Table Styles */
.data-table[b-jkr8yi7ca4] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 15px;
}

    .data-table th[b-jkr8yi7ca4] {
        text-align: left;
        padding: 20px 24px;
        background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
        color: #ffffff;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
        border: none;
        position: relative;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s ease;
    }

        .data-table th:hover[b-jkr8yi7ca4] {
            background: linear-gradient(135deg, #1e40af 0%, #312e81 100%);
        }

        .data-table th:first-child[b-jkr8yi7ca4] {
            border-top-left-radius: 16px;
        }

        .data-table th:last-child[b-jkr8yi7ca4] {
            border-top-right-radius: 16px;
            cursor: default;
        }

            .data-table th:last-child:hover[b-jkr8yi7ca4] {
                background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
            }

.sortable-header[b-jkr8yi7ca4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sortable-header i[b-jkr8yi7ca4] {
        font-size: 14px;
        opacity: 0.8;
    }

.data-table td[b-jkr8yi7ca4] {
    padding: 20px 24px;
    border-bottom: 2px solid #f1f5f9;
    color: #475569;
    vertical-align: middle;
    transition: all 0.2s ease;
    font-weight: 500;
}

.data-table tbody tr[b-jkr8yi7ca4] {
    transition: all 0.3s ease;
    position: relative;
}

    .data-table tbody tr[b-jkr8yi7ca4]::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 0;
        background: linear-gradient(180deg, #3b82f6, #1e3a8a);
        transition: height 0.3s ease;
    }

    .data-table tbody tr:hover[b-jkr8yi7ca4] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        transform: scale(1.002);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

        .data-table tbody tr:hover[b-jkr8yi7ca4]::after {
            height: 100%;
        }

        .data-table tbody tr:hover td[b-jkr8yi7ca4] {
            color: #1e293b;
        }

    .data-table tbody tr:last-child td[b-jkr8yi7ca4] {
        border-bottom: none;
    }

/* IMPROVED Cell Styles */
.id-badge[b-jkr8yi7ca4] {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px solid #93c5fd;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #1e40af;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2);
    transition: all 0.3s ease;
}

.data-table tbody tr:hover .id-badge[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    transform: scale(1.05);
}

.date-cell[b-jkr8yi7ca4] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}

    .date-cell i[b-jkr8yi7ca4] {
        color: #3b82f6;
        font-size: 18px;
    }

.user-cell[b-jkr8yi7ca4] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}

    .user-cell i[b-jkr8yi7ca4] {
        color: #3b82f6;
        font-size: 20px;
    }

/* IMPROVED Priority Badges */
.status-badge[b-jkr8yi7ca4] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
}

    .status-badge:hover[b-jkr8yi7ca4] {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

.high[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: #7f1d1d;
    border: 2px solid #dc2626;
}

.medium[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    border: 2px solid #d97706;
}

.low[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #064e3b;
    border: 2px solid #059669;
}

.default[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: #1f2937;
    border: 2px solid #4b5563;
}

/* IMPROVED Situation Badges */
.situation-badge[b-jkr8yi7ca4] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

    .situation-badge:hover[b-jkr8yi7ca4] {
        transform: translateY(-2px) scale(1.05);
    }

.authorized[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
    color: #14532d;
    border: 2px solid #22c55e;
}

.pending[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    color: #713f12;
    border: 2px solid #eab308;
}

.rejected[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
    color: #7f1d1d;
    border: 2px solid #ef4444;
}

.in-process[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
    color: #1e3a8a;
    border: 2px solid #3b82f6;
}

.completed[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);
    color: #4c1d95;
    border: 2px solid #8b5cf6;
}

/* Enhanced Actions Cell */
.actions[b-jkr8yi7ca4] {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
}

.icon-btn[b-jkr8yi7ca4] {
    padding: 12px;
    background: transparent;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

    .icon-btn:hover[b-jkr8yi7ca4] {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

.view-btn[b-jkr8yi7ca4] {
    color: #059669;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #6ee7b7;
}

    .view-btn:hover[b-jkr8yi7ca4] {
        background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
        color: #047857;
    }

/* IMPROVED Empty State */
.empty-state[b-jkr8yi7ca4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 3px dashed #cbd5e1;
    margin: 20px 0;
    animation: fadeIn-b-jkr8yi7ca4 0.5s ease;
}

@keyframes fadeIn-b-jkr8yi7ca4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.empty-state-icon[b-jkr8yi7ca4] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

    .empty-state-icon i[b-jkr8yi7ca4] {
        font-size: 48px;
        color: #64748b;
    }

.empty-state h3[b-jkr8yi7ca4] {
    margin: 0 0 12px 0;
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
}

.empty-state p[b-jkr8yi7ca4] {
    margin: 0 0 24px 0;
    font-size: 16px;
    color: #64748b;
}

/* Enhanced Loading Animation */
.loading-indicator[b-jkr8yi7ca4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin: 20px 0;
    border: 2px solid #e2e8f0;
}

.spinner[b-jkr8yi7ca4] {
    width: 50px;
    height: 50px;
    border: 5px solid #f1f5f9;
    border-radius: 50%;
    border-top-color: #1e3a8a;
    border-right-color: #3b82f6;
    animation: spin-b-jkr8yi7ca4 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    margin-bottom: 24px;
}

.loading-indicator p[b-jkr8yi7ca4] {
    color: #64748b;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

@keyframes spin-b-jkr8yi7ca4 {
    to {
        transform: rotate(360deg);
    }
}

/* IMPROVED Modal Styles */
.modal[b-jkr8yi7ca4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-jkr8yi7ca4 0.3s ease;
}

.modal-dialog[b-jkr8yi7ca4] {
    max-width: 500px;
    width: 90%;
    margin: 0;
}

.modal-content[b-jkr8yi7ca4] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    border: 2px solid #e2e8f0;
    overflow: hidden;
    animation: modalSlideIn-b-jkr8yi7ca4 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn-b-jkr8yi7ca4 {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-jkr8yi7ca4] {
    padding: 24px 28px;
    border-bottom: 2px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.modal-title[b-jkr8yi7ca4] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.modal-body[b-jkr8yi7ca4] {
    padding: 28px;
}

    .modal-body p[b-jkr8yi7ca4] {
        margin: 0;
        color: #475569;
        font-size: 16px;
        line-height: 1.6;
        font-weight: 500;
    }

.modal-footer[b-jkr8yi7ca4] {
    padding: 20px 28px;
    border-top: 2px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

    .modal-footer .btn[b-jkr8yi7ca4] {
        min-width: 100px;
    }

.btn-danger[b-jkr8yi7ca4] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

    .btn-danger:hover[b-jkr8yi7ca4] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5);
    }

/* Responsive Enhancements */
@media (max-width: 768px) {
    h2[b-jkr8yi7ca4] {
        font-size: 28px;
    }

    .stats-section[b-jkr8yi7ca4] {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .stat-card[b-jkr8yi7ca4] {
        padding: 16px 20px;
    }

    .stat-value[b-jkr8yi7ca4] {
        font-size: 28px;
    }

    .actions-bar[b-jkr8yi7ca4] {
        flex-direction: column;
        gap: 12px;
        padding: 18px;
    }

    .btn[b-jkr8yi7ca4] {
        width: 100%;
        justify-content: center;
    }

    .filters-grid[b-jkr8yi7ca4] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .filters-header[b-jkr8yi7ca4] {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .clear-filters-btn[b-jkr8yi7ca4] {
        width: 100%;
    }

    .filters-summary[b-jkr8yi7ca4] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .table-responsive[b-jkr8yi7ca4] {
        margin: 0 -15px;
        border-radius: 0;
    }

    .data-table th[b-jkr8yi7ca4],
    .data-table td[b-jkr8yi7ca4] {
        padding: 14px 10px;
        font-size: 13px;
    }

    .actions[b-jkr8yi7ca4] {
        flex-direction: column;
        gap: 8px;
    }

    .icon-btn[b-jkr8yi7ca4] {
        width: 100%;
        padding: 10px 14px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    h2[b-jkr8yi7ca4] {
        font-size: 22px;
    }

    .stats-section[b-jkr8yi7ca4] {
        grid-template-columns: 1fr;
    }

    .data-table[b-jkr8yi7ca4] {
        font-size: 12px;
    }

        .data-table th[b-jkr8yi7ca4],
        .data-table td[b-jkr8yi7ca4] {
            padding: 10px 8px;
        }

    .status-badge[b-jkr8yi7ca4],
    .situation-badge[b-jkr8yi7ca4] {
        font-size: 10px;
        padding: 6px 12px;
    }

    .id-badge[b-jkr8yi7ca4] {
        font-size: 11px;
        padding: 4px 10px;
    }

    .modal-dialog[b-jkr8yi7ca4] {
        width: 95%;
    }

    .filters-container[b-jkr8yi7ca4] {
        padding: 18px;
    }

    .empty-state[b-jkr8yi7ca4] {
        padding: 60px 20px;
    }

    .empty-state-icon[b-jkr8yi7ca4] {
        width: 70px;
        height: 70px;
    }

        .empty-state-icon i[b-jkr8yi7ca4] {
            font-size: 35px;
        }

    .empty-state h3[b-jkr8yi7ca4] {
        font-size: 20px;
    }
}
/* _content/webQT/Features/Sales/Releases/ReleasePage.razor.rz.scp.css */
/* Release Management Container */
.release-container[b-i5zri1zz2a] {
    padding: 1rem 2rem;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    background-color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Page Header */
.page-header[b-i5zri1zz2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.page-title[b-i5zri1zz2a] {
    margin: 0;
    color: #1e293b;
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.actions-bar[b-i5zri1zz2a] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Enhanced Buttons */
.btn[b-i5zri1zz2a] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

    .btn[b-i5zri1zz2a]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover[b-i5zri1zz2a]::before {
        left: 100%;
    }

    .btn:disabled[b-i5zri1zz2a] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .btn:disabled[b-i5zri1zz2a]::before {
            display: none;
        }

.refresh-btn[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

    .refresh-btn:hover:not(:disabled)[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
    }

.primary-btn[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .primary-btn:hover:not(:disabled)[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.secondary-btn[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.ready-btn[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .ready-btn:hover[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);        
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.btn-add-pickup[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

    .btn-add-pickup:hover[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }

/* Spinning animation */
.spinning[b-i5zri1zz2a] {
    animation: spin-b-i5zri1zz2a 1s linear infinite;
}

@keyframes spin-b-i5zri1zz2a {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Enhanced Card Styles */
.info-card[b-i5zri1zz2a] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
}

    .info-card:hover[b-i5zri1zz2a] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
    }

.card-header[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .card-header h5[b-i5zri1zz2a] {
        margin: 0;
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
    }

.card-header-with-actions[b-i5zri1zz2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-edit-release[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

    .btn-edit-release:hover[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }

/* Release Edit Form */
.release-edit-form[b-i5zri1zz2a] {
    width: 100%;
}

.release-edit-grid[b-i5zri1zz2a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group[b-i5zri1zz2a] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-i5zri1zz2a] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.form-input[b-i5zri1zz2a] {
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    background-color: white;
    transition: all 0.2s ease;
    color: #1e293b;
}

    .form-input:focus[b-i5zri1zz2a] {
        border-color: #f59e0b;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
        background-color: #fffbeb;
    }

    .form-input:hover[b-i5zri1zz2a] {
        border-color: #f59e0b;
    }

.release-notes[b-i5zri1zz2a] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    grid-column: 1 / -1;
}

.release-edit-actions[b-i5zri1zz2a] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.card-content[b-i5zri1zz2a] {
    padding: 2rem;
}

/* Release Summary */
.release-summary[b-i5zri1zz2a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.summary-item[b-i5zri1zz2a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    transition: all 0.2s ease;
}

    .summary-item:hover[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .summary-item .label[b-i5zri1zz2a] {
        font-size: 0.75rem;
        font-weight: 500;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .summary-item .value[b-i5zri1zz2a] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

    .summary-item.full-width[b-i5zri1zz2a] {
        grid-column: 1 / -1;
    }

.notes-text[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    font-style: italic;
    line-height: 1.5;
    margin-top: 0.5rem;
    display: block;
}

/* Status Badges */
.status-badge[b-i5zri1zz2a] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.status-completed[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-in-progress[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-ready[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border: 1px solid #3b82f6;
}

.status-draft[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #6b7280;
}

.status-cancelled[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.status-default[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Pickups Grid */
.pickups-grid[b-i5zri1zz2a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

.pickup-card[b-i5zri1zz2a] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .pickup-card:hover[b-i5zri1zz2a] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        border-color: #3b82f6;
    }

.pickup-card-header[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pickup-title[b-i5zri1zz2a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .pickup-title h6[b-i5zri1zz2a] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: white;
    }

.pickup-status-badge[b-i5zri1zz2a] {
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pickup-status-delivered[b-i5zri1zz2a] {
    background: rgba(16, 185, 129, 0.2);
    color: #d1fae5;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.pickup-status-in-transit[b-i5zri1zz2a] {
    background: rgba(245, 158, 11, 0.2);
    color: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.pickup-status-scheduled[b-i5zri1zz2a] {
    background: rgba(59, 130, 246, 0.2);
    color: #dbeafe;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.pickup-status-cancelled[b-i5zri1zz2a] {
    background: rgba(239, 68, 68, 0.2);
    color: #fee2e2;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.pickup-status-default[b-i5zri1zz2a] {
    background: rgba(107, 114, 128, 0.2);
    color: #f3f4f6;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.pickup-actions[b-i5zri1zz2a] {
    display: flex;
    gap: 0.5rem;
}

.btn-edit-pickup[b-i5zri1zz2a],
.btn-remove-pickup[b-i5zri1zz2a] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.375rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

    .btn-edit-pickup:hover[b-i5zri1zz2a],
    .btn-remove-pickup:hover[b-i5zri1zz2a] {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.1);
    }

.pickup-card-content[b-i5zri1zz2a] {
    padding: 1.5rem;
}

.pickup-details[b-i5zri1zz2a] {
    margin-bottom: 1.5rem;
}

.detail-row[b-i5zri1zz2a] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.15s ease;
}

    .detail-row:last-child[b-i5zri1zz2a] {
        margin-bottom: 0;
        border-bottom: none;
    }

    .detail-row:hover[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 4px;
        padding: 0.5rem 0.75rem;
        margin: 0 -0.75rem 0.75rem -0.75rem;
    }

    .detail-row.instructions[b-i5zri1zz2a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

.detail-label[b-i5zri1zz2a] {
    font-weight: 500;
    color: #64748b;
    font-size: 0.875rem;
}

.detail-value[b-i5zri1zz2a] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}

.items-summary[b-i5zri1zz2a] {
    border-top: 2px solid #e2e8f0;
    padding-top: 1.5rem;
}

.items-header[b-i5zri1zz2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.items-count[b-i5zri1zz2a] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}

.btn-toggle-items[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .btn-toggle-items:hover[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: translateY(-1px);
    }

.items-grid[b-i5zri1zz2a] {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.item-card[b-i5zri1zz2a] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s ease;
}

    .item-card:hover[b-i5zri1zz2a] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        border-color: #3b82f6;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.item-description[b-i5zri1zz2a] {
    margin-bottom: 0.5rem;
    color: #1e293b;
    font-size: 0.875rem;
}

.item-details[b-i5zri1zz2a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
}

    .item-details span[b-i5zri1zz2a] {
        font-weight: 500;
    }

/* Empty States */
.empty-state[b-i5zri1zz2a] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

    .empty-state i[b-i5zri1zz2a] {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-state h3[b-i5zri1zz2a] {
        color: #475569;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-state p[b-i5zri1zz2a] {
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.5;
    }

/* Form Actions */
.form-actions[b-i5zri1zz2a] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Modal Styles */
.modal-overlay[b-i5zri1zz2a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-i5zri1zz2a 0.3s ease-out;
    pointer-events: auto;
}

@keyframes fadeIn-b-i5zri1zz2a {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-dialog[b-i5zri1zz2a] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideIn-b-i5zri1zz2a 0.3s ease-out;
    pointer-events: auto;
    position: relative;
}

.large-modal[b-i5zri1zz2a] {
    max-width: 1200px;
}

@keyframes slideIn-b-i5zri1zz2a {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .release-container[b-i5zri1zz2a] {
        padding: 0.75rem 1rem;
    }

    .pickups-grid[b-i5zri1zz2a] {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

@media (max-width: 768px) {
    .release-container[b-i5zri1zz2a] {
        padding: 0.75rem 0.5rem;
    }

    .page-header[b-i5zri1zz2a] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .actions-bar[b-i5zri1zz2a] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-title[b-i5zri1zz2a] {
        font-size: 1.5rem;
        text-align: center;
    }

    .release-summary[b-i5zri1zz2a] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pickups-grid[b-i5zri1zz2a] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pickup-card-header[b-i5zri1zz2a] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pickup-title[b-i5zri1zz2a] {
        text-align: center;
    }

    .pickup-actions[b-i5zri1zz2a] {
        justify-content: center;
    }

    .detail-row[b-i5zri1zz2a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .item-details[b-i5zri1zz2a] {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-actions[b-i5zri1zz2a] {
        flex-direction: column;
    }

    .modal-dialog[b-i5zri1zz2a] {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
}
/* _content/webQT/Features/Sales/Releases/ReleasePickupPage.razor.rz.scp.css */
/* Pickup Edit Form Styles */
.pickup-edit-container[b-jw7bvj9g70] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    max-height: 95vh;
    min-height: 80vh;
    width: 85vw;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Modal Header */
.modal-header[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-jw7bvj9g70] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .modal-title i[b-jw7bvj9g70] {
        font-size: 1.5rem;
        color: #3b82f6;
    }

.btn-close[b-jw7bvj9g70] {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    font-size: 1.25rem;
}

    .btn-close:hover[b-jw7bvj9g70] {
        background: #f1f5f9;
        color: #1e293b;
        transform: scale(1.05);
    }

/* Form Structure */
.pickup-form[b-jw7bvj9g70] {
    display: flex;
    flex-direction: column;
}

.modal-body[b-jw7bvj9g70] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Pickup Information Section */
.pickup-info-section[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* TARGET BLAZOR RENDERED ELEMENTS SPECIFICALLY */
.pickup-edit-container .pickup-info-section input[type="date"][b-jw7bvj9g70],
.pickup-edit-container .pickup-info-section input[type="number"][b-jw7bvj9g70],
.pickup-edit-container .pickup-info-section input[type="text"][b-jw7bvj9g70],
.pickup-edit-container .pickup-info-section select[b-jw7bvj9g70],
.pickup-edit-container .pickup-info-section textarea[b-jw7bvj9g70],
.pickup-edit-container .pickup-info-section .blazor-input[b-jw7bvj9g70],
.pickup-edit-container .pickup-info-section .form-control[b-jw7bvj9g70],
div.pickup-info-section input[b-jw7bvj9g70],
div.pickup-info-section select[b-jw7bvj9g70],
div.pickup-info-section textarea[b-jw7bvj9g70] {
    width: 100% !important;
    padding: 1rem 1.25rem !important;
    border: 2px solid #d1d5db !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #111827 !important;
    background: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
    min-height: 52px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
}

    .pickup-edit-container .pickup-info-section input:hover[b-jw7bvj9g70],
    .pickup-edit-container .pickup-info-section select:hover[b-jw7bvj9g70],
    .pickup-edit-container .pickup-info-section textarea:hover[b-jw7bvj9g70],
    div.pickup-info-section input:hover[b-jw7bvj9g70],
    div.pickup-info-section select:hover[b-jw7bvj9g70],
    div.pickup-info-section textarea:hover[b-jw7bvj9g70] {
        border-color: #3b82f6 !important;
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.15), 0 4px 6px -2px rgba(59, 130, 246, 0.1) !important;
        transform: translateY(-1px) !important;
        background: #f8fafc !important;
    }

    .pickup-edit-container .pickup-info-section input:focus[b-jw7bvj9g70],
    .pickup-edit-container .pickup-info-section select:focus[b-jw7bvj9g70],
    .pickup-edit-container .pickup-info-section textarea:focus[b-jw7bvj9g70],
    div.pickup-info-section input:focus[b-jw7bvj9g70],
    div.pickup-info-section select:focus[b-jw7bvj9g70],
    div.pickup-info-section textarea:focus[b-jw7bvj9g70] {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 10px 15px -3px rgba(59, 130, 246, 0.2) !important;
        transform: translateY(-2px) !important;
        background: #f0f9ff !important;
        color: #1e40af !important;
        font-weight: 600 !important;
    }

/* Force select styling with maximum specificity */
.pickup-edit-container .pickup-info-section select[b-jw7bvj9g70],
div.pickup-info-section select[b-jw7bvj9g70] {
    cursor: pointer !important;
    padding-right: 3rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 1rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
}

    .pickup-edit-container .pickup-info-section select:hover[b-jw7bvj9g70],
    div.pickup-info-section select:hover[b-jw7bvj9g70] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    }

    .pickup-edit-container .pickup-info-section select:focus[b-jw7bvj9g70],
    div.pickup-info-section select:focus[b-jw7bvj9g70] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    }

/* Number input specific */
.pickup-edit-container .pickup-info-section input[type="number"][b-jw7bvj9g70],
div.pickup-info-section input[type="number"][b-jw7bvj9g70] {
    text-align: right !important;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace !important;
    font-weight: 600 !important;
}

/* Date input specific */
.pickup-edit-container .pickup-info-section input[type="date"][b-jw7bvj9g70],
div.pickup-info-section input[type="date"][b-jw7bvj9g70] {
    cursor: pointer !important;
}

/* Textarea specific */
.pickup-edit-container .pickup-info-section textarea[b-jw7bvj9g70],
div.pickup-info-section textarea[b-jw7bvj9g70] {
    min-height: 96px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
    font-family: inherit !important;
}

/* Enhanced Grid Layouts */
.pickup-info-grid[b-jw7bvj9g70] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.customer-so-grid[b-jw7bvj9g70] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Form Groups */
.form-group[b-jw7bvj9g70] {
    display: flex;
    flex-direction: column;
}

    .form-group.full-width[b-jw7bvj9g70] {
        grid-column: 1 / -1;
    }

    .form-group label[b-jw7bvj9g70] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

/* Items Section */
.items-section[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #22c55e;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1);
}

/* Form Sections */
.form-section[b-jw7bvj9g70] {
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-jw7bvj9g70] {
        margin-bottom: 0;
    }

.section-title[b-jw7bvj9g70] {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .section-title[b-jw7bvj9g70]::before {
        content: '';
        width: 4px;
        height: 1.5rem;
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        border-radius: 2px;
    }

.items-section .section-title[b-jw7bvj9g70]::before {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.section-header[b-jw7bvj9g70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Add Item Button */
.btn-add-item[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

    .btn-add-item:hover[b-jw7bvj9g70] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }

/* Items Table Wrapper */
.items-table-wrapper[b-jw7bvj9g70] {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.items-table-container[b-jw7bvj9g70] {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

/* Items Table */
.items-table[b-jw7bvj9g70] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 1200px;
    background: white;
}

    .items-table thead[b-jw7bvj9g70] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .items-table th[b-jw7bvj9g70] {
        padding: 1rem 0.75rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

        .items-table th:last-child[b-jw7bvj9g70] {
            border-right: none;
        }

    .items-table td[b-jw7bvj9g70] {
        padding: 1rem 0.75rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
        color: #475569;
        transition: all 0.15s ease;
        border-right: 1px solid #f8fafc;
    }

        .items-table td:last-child[b-jw7bvj9g70] {
            border-right: none;
        }

    .items-table tbody tr[b-jw7bvj9g70] {
        transition: all 0.2s ease;
    }

        .items-table tbody tr:hover:not(.editing-row)[b-jw7bvj9g70] {
            background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
        }

        .items-table tbody tr:last-child td[b-jw7bvj9g70] {
            border-bottom: none;
        }

        .items-table tbody tr.editing-row[b-jw7bvj9g70] {
            background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
            position: relative;
            border-left: 4px solid #f59e0b;
        }

            .items-table tbody tr.editing-row td[b-jw7bvj9g70] {
                border-bottom: 1px solid #fde68a;
                border-right: 1px solid #fef3c7;
            }

/* Table Column Widths */
.item-desc-col[b-jw7bvj9g70] {
    width: 25%;
    min-width: 200px;
}

.qty-col[b-jw7bvj9g70], .qty-col-editable[b-jw7bvj9g70] {
    width: 10%;
    min-width: 100px;
    text-align: center;
}

.weight-col[b-jw7bvj9g70], .pieces-col[b-jw7bvj9g70], .footage-col[b-jw7bvj9g70], .bundles-col[b-jw7bvj9g70] {
    width: 8%;
    min-width: 80px;
    text-align: center;
}

.actions-col[b-jw7bvj9g70] {
    width: 12%;
    min-width: 120px;
    text-align: center;
}

/* Item Description Container */
.item-description-container[b-jw7bvj9g70] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item-name[b-jw7bvj9g70] {
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.item-notes-inline[b-jw7bvj9g70] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
    font-size: 0.75rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border-left: 3px solid #f59e0b;
}

    .item-notes-inline i[b-jw7bvj9g70] {
        color: #f59e0b;
        font-size: 0.75rem;
        flex-shrink: 0;
    }

/* Quantity Display Styles */
.qty-display[b-jw7bvj9g70] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.qty-value[b-jw7bvj9g70] {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    min-width: 60px;
    text-align: center;
}

.shipped-qty[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
    color: #065f46;
    font-weight: 700;
}

/* Edit Container Styles */
.edit-container[b-jw7bvj9g70] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.edit-input-wrapper[b-jw7bvj9g70] {
    position: relative;
    width: 100%;
    max-width: 120px;
}

.shipped-qty-input[b-jw7bvj9g70] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #f59e0b;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    background: white;
    color: #1e293b;
    font-family: 'SF Mono', 'Monaco', monospace;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

    .shipped-qty-input:focus[b-jw7bvj9g70] {
        outline: none;
        border-color: #d97706;
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2), 0 8px 25px rgba(245, 158, 11, 0.3);
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        transform: scale(1.02);
    }

/* Other Cell Value Styles */
.weight-value[b-jw7bvj9g70], .pieces-value[b-jw7bvj9g70], .footage-value[b-jw7bvj9g70], .bundles-value[b-jw7bvj9g70] {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-weight: 500;
    color: #64748b;
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 4px;
    display: inline-block;
    min-width: 50px;
    text-align: center;
}

/* Action Buttons */
.item-actions[b-jw7bvj9g70] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.action-btn[b-jw7bvj9g70] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.edit-btn[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

    .edit-btn:hover[b-jw7bvj9g70] {
        background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.remove-btn[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
    border: 1px solid #ef4444;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

    .remove-btn:hover[b-jw7bvj9g70] {
        background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    }

.save-btn[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
    border: 1px solid #10b981;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

    .save-btn:hover[b-jw7bvj9g70] {
        background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }

.cancel-btn[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
    border: 1px solid #f59e0b;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

    .cancel-btn:hover[b-jw7bvj9g70] {
        background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }

/* Empty States */
.empty-items[b-jw7bvj9g70] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    margin-top: 1rem;
}

    .empty-items i[b-jw7bvj9g70] {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-items h3[b-jw7bvj9g70] {
        color: #475569;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-items p[b-jw7bvj9g70] {
        margin-bottom: 1.5rem;
        font-size: 1rem;
    }

/* Modal Footer */
.modal-footer[b-jw7bvj9g70] {
    background: #f8fafc;
    padding: 1rem 1.5rem 3rem 2rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
}

/* Button Styles */
.btn[b-jw7bvj9g70] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    text-decoration: none;
}

    .btn:disabled[b-jw7bvj9g70] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.primary-btn[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .primary-btn:hover:not(:disabled)[b-jw7bvj9g70] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.secondary-btn[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-jw7bvj9g70] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

/* Validation Errors */
.validation-errors[b-jw7bvj9g70] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

    .validation-errors ul[b-jw7bvj9g70] {
        margin: 0;
        padding-left: 1.5rem;
    }

    .validation-errors li[b-jw7bvj9g70] {
        margin-bottom: 0.25rem;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .pickup-info-grid[b-jw7bvj9g70] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .customer-so-grid[b-jw7bvj9g70] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .pickup-edit-container[b-jw7bvj9g70] {
        max-height: 95vh;
    }

    .modal-body[b-jw7bvj9g70] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .pickup-info-grid[b-jw7bvj9g70] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .customer-so-grid[b-jw7bvj9g70] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .modal-footer[b-jw7bvj9g70] {
        padding: 1rem;
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .btn[b-jw7bvj9g70] {
        width: 100%;
        justify-content: center;
    }

    .modal-header[b-jw7bvj9g70] {
        padding: 1rem;
    }

    .modal-title[b-jw7bvj9g70] {
        font-size: 1.1rem;
    }

    .pickup-info-section[b-jw7bvj9g70],
    .items-section[b-jw7bvj9g70] {
        padding: 1rem;
    }

    .items-table[b-jw7bvj9g70] {
        min-width: 800px;
        font-size: 0.75rem;
    }

        .items-table th[b-jw7bvj9g70],
        .items-table td[b-jw7bvj9g70] {
            padding: 0.625rem 0.375rem;
        }
}

/* _content/webQT/Features/Sales/Releases/ReleasesPage.razor.rz.scp.css */
/* Releases Management Container */
.releases-container[b-c471db45wz] {
    padding: 1rem 2rem;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    background-color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Page Header */
.page-header[b-c471db45wz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.page-title[b-c471db45wz] {
    margin: 0;
    color: #1e293b;
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.actions-bar[b-c471db45wz] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Enhanced Buttons */
.btn[b-c471db45wz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

    .btn[b-c471db45wz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover[b-c471db45wz]::before {
        left: 100%;
    }

    .btn:disabled[b-c471db45wz] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .btn:disabled[b-c471db45wz]::before {
            display: none;
        }

.refresh-btn[b-c471db45wz] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

    .refresh-btn:hover:not(:disabled)[b-c471db45wz] {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
    }

.primary-btn[b-c471db45wz] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .primary-btn:hover:not(:disabled)[b-c471db45wz] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.secondary-btn[b-c471db45wz] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-c471db45wz] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

/* Spinning animation */
.spinning[b-c471db45wz] {
    animation: spin-b-c471db45wz 1s linear infinite;
}

@keyframes spin-b-c471db45wz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading */
.loading-container[b-c471db45wz] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loading-spinner[b-c471db45wz] {
    text-align: center;
}

.spinner[b-c471db45wz] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-c471db45wz 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-text[b-c471db45wz] {
    color: #6c757d;
    margin: 0;
    font-size: 1rem;
}

/* Empty State */
.empty-state[b-c471db45wz] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .empty-state i[b-c471db45wz] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-state h3[b-c471db45wz] {
        color: #475569;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-state p[b-c471db45wz] {
        color: #64748b;
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.5;
    }

/* Summary Cards */
.summary-cards[b-c471db45wz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card[b-c471db45wz] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

    .summary-card:hover[b-c471db45wz] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

.card-icon[b-c471db45wz] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    font-size: 1.5rem;
}

.card-content h4[b-c471db45wz] {
    margin: 0 0 0.5rem 0;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-number[b-c471db45wz] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
}

/* Enhanced Card Styles */
.info-card[b-c471db45wz] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
}

    .info-card:hover[b-c471db45wz] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

.card-header[b-c471db45wz] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .card-header h5[b-c471db45wz] {
        margin: 0;
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
    }

.card-header-with-actions[b-c471db45wz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-content[b-c471db45wz] {
    padding: 1.5rem;
}

/* Filters */
.filters-container[b-c471db45wz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    align-items: end;
}

.filter-group[b-c471db45wz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .filter-group label[b-c471db45wz] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.form-select[b-c471db45wz],
.form-input[b-c471db45wz] {
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    background-color: white;
    transition: all 0.2s ease;
    color: #1e293b;
}

    .form-select:focus[b-c471db45wz],
    .form-input:focus[b-c471db45wz] {
        border-color: #3b82f6;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background-color: #f8fafc;
    }

    .form-select:hover[b-c471db45wz],
    .form-input:hover[b-c471db45wz] {
        border-color: #3b82f6;
    }

.filter-actions[b-c471db45wz] {
    display: flex;
    align-items: flex-end;
}

/* Table Actions */
.table-actions[b-c471db45wz] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.sort-controls[b-c471db45wz] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

    .sort-controls label[b-c471db45wz] {
        font-size: 0.75rem;
        font-weight: 500;
        color: #64748b;
        white-space: nowrap;
    }

    .sort-controls .form-select[b-c471db45wz] {
        min-width: 120px;
        padding: 0.5rem;
        font-size: 0.8rem;
    }

.btn-sort[b-c471db45wz] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

    .btn-sort:hover[b-c471db45wz] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: translateY(-1px);
    }

/* Table */
.table-responsive[b-c471db45wz] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.releases-table[b-c471db45wz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 900px;
}

    .releases-table thead[b-c471db45wz] {
        background-color: #f8fafc;
    }

    .releases-table th[b-c471db45wz] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #475569;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
    }

        .releases-table th.sortable[b-c471db45wz] {
            cursor: pointer;
            user-select: none;
            position: relative;
            transition: all 0.2s ease;
        }

            .releases-table th.sortable:hover[b-c471db45wz] {
                background-color: #e2e8f0;
                color: #1e293b;
            }

.sort-icon[b-c471db45wz] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.releases-table td[b-c471db45wz] {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.table-row[b-c471db45wz] {
    transition: all 0.15s ease;
}

    .table-row:hover[b-c471db45wz] {
        background-color: #f8fafc;
    }

/* Table Cell Styles */
.id-cell .id-badge[b-c471db45wz] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}

.date-container[b-c471db45wz] {
    display: flex;
    flex-direction: column;
}

.date-text[b-c471db45wz] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}

.date-subtext[b-c471db45wz] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.125rem;
}

.no-date[b-c471db45wz] {
    color: #64748b;
    font-style: italic;
    font-size: 0.875rem;
}

.warehouse-text[b-c471db45wz] {
    font-weight: 500;
    color: #1e293b;
    font-family: monospace;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    font-size: 0.8rem;
}

/* Status Badges */
.status-badge[b-c471db45wz] {
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    transition: all 0.2s ease;
}

.status-completed[b-c471db45wz] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-in-progress[b-c471db45wz] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-ready[b-c471db45wz] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border: 1px solid #3b82f6;
}

.status-draft[b-c471db45wz] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #6b7280;
}

.status-cancelled[b-c471db45wz] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.status-default[b-c471db45wz] {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Pickups Summary */
.pickups-summary[b-c471db45wz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pickups-count[b-c471db45wz] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}

.pickups-status[b-c471db45wz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.mini-badge[b-c471db45wz] {
    padding: 0.125rem 0.375rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

    .mini-badge.delivered[b-c471db45wz] {
        background: rgba(16, 185, 129, 0.1);
        color: #065f46;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .mini-badge.in-transit[b-c471db45wz] {
        background: rgba(245, 158, 11, 0.1);
        color: #92400e;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .mini-badge.scheduled[b-c471db45wz] {
        background: rgba(59, 130, 246, 0.1);
        color: #1e3a8a;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

/* Action Buttons */
.actions-cell[b-c471db45wz] {
    text-align: center;
}

.action-buttons[b-c471db45wz] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-btn[b-c471db45wz] {
    padding: 0.5rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}

.view-btn[b-c471db45wz] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

    .view-btn:hover[b-c471db45wz] {
        background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    }

.edit-btn[b-c471db45wz] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

    .edit-btn:hover[b-c471db45wz] {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }

.duplicate-btn[b-c471db45wz] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

    .duplicate-btn:hover[b-c471db45wz] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

.pdf-btn[b-c471db45wz] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

    .pdf-btn:hover[b-c471db45wz] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

.delete-btn[b-c471db45wz] {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(168, 85, 247, 0.3);
}
    .delete-btn:hover[b-c471db45wz] {
        background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .releases-container[b-c471db45wz] {
        padding: 0.75rem 1rem;
    }

    .filters-container[b-c471db45wz] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .releases-container[b-c471db45wz] {
        padding: 0.75rem 0.5rem;
    }

    .page-header[b-c471db45wz] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .actions-bar[b-c471db45wz] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-title[b-c471db45wz] {
        font-size: 1.5rem;
        text-align: center;
    }

    .summary-cards[b-c471db45wz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-header-with-actions[b-c471db45wz] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .table-actions[b-c471db45wz] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .filters-container[b-c471db45wz] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .filter-actions[b-c471db45wz] {
        justify-content: center;
    }

    .releases-table[b-c471db45wz] {
        font-size: 0.8rem;
        min-width: 700px;
    }

        .releases-table th[b-c471db45wz],
        .releases-table td[b-c471db45wz] {
            padding: 0.75rem 0.5rem;
        }

    .action-buttons[b-c471db45wz] {
        flex-direction: row;
        gap: 0.25rem;
    }

    .action-btn[b-c471db45wz] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .pickups-status[b-c471db45wz] {
        flex-direction: column;
        gap: 0.125rem;
    }

    .mini-badge[b-c471db45wz] {
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
    }
}

@media (max-width: 576px) {
    .releases-container[b-c471db45wz] {
        padding: 0.5rem 0.25rem;
    }

    .releases-table[b-c471db45wz] {
        font-size: 0.75rem;
        min-width: 600px;
    }

        .releases-table th[b-c471db45wz],
        .releases-table td[b-c471db45wz] {
            padding: 0.5rem 0.25rem;
        }

    .action-btn[b-c471db45wz] {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .card-number[b-c471db45wz] {
        font-size: 1.5rem;
    }

    .page-title[b-c471db45wz] {
        font-size: 1.25rem;
    }

    .status-badge[b-c471db45wz] {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }

    .id-badge[b-c471db45wz] {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }

    .warehouse-text[b-c471db45wz] {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    .pickups-count[b-c471db45wz] {
        font-size: 0.8rem;
    }

    .date-text[b-c471db45wz],
    .date-subtext[b-c471db45wz] {
        font-size: 0.75rem;
    }
}
/* _content/webQT/Features/Sales/Releases/ReleaseViewPage.razor.rz.scp.css */
/* Release View Container - Readonly Version */
.release-view-container[b-6y63b0ydoz] {
    padding: 1rem 2rem;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    background-color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Page Header */
.page-header[b-6y63b0ydoz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.page-title[b-6y63b0ydoz] {
    margin: 0;
    color: #1e293b;
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.actions-bar[b-6y63b0ydoz] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Enhanced Buttons */
.btn[b-6y63b0ydoz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

    .btn[b-6y63b0ydoz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover[b-6y63b0ydoz]::before {
        left: 100%;
    }

    .btn:disabled[b-6y63b0ydoz] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .btn:disabled[b-6y63b0ydoz]::before {
            display: none;
        }

.secondary-btn[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.primary-btn[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .primary-btn:hover:not(:disabled)[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.refresh-btn[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

    .refresh-btn:hover:not(:disabled)[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
    }

/* Spinning animation */
.spinning[b-6y63b0ydoz] {
    animation: spin-b-6y63b0ydoz 1s linear infinite;
}

@keyframes spin-b-6y63b0ydoz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading */
.loading-container[b-6y63b0ydoz] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loading-spinner[b-6y63b0ydoz] {
    text-align: center;
}

.spinner[b-6y63b0ydoz] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-6y63b0ydoz 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-text[b-6y63b0ydoz] {
    color: #6c757d;
    margin: 0;
    font-size: 1rem;
}

/* Empty State */
.empty-state[b-6y63b0ydoz] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .empty-state i[b-6y63b0ydoz] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-state h3[b-6y63b0ydoz] {
        color: #475569;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-state p[b-6y63b0ydoz] {
        color: #64748b;
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.5;
    }

/* Enhanced Card Styles */
.info-card[b-6y63b0ydoz] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
}

    .info-card:hover[b-6y63b0ydoz] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
    }

.card-header[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .card-header h5[b-6y63b0ydoz] {
        margin: 0;
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
    }

.card-header-with-actions[b-6y63b0ydoz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.release-status-section[b-6y63b0ydoz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-content[b-6y63b0ydoz] {
    padding: 2rem;
}

/* Release Summary */
.release-summary[b-6y63b0ydoz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.summary-item[b-6y63b0ydoz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    transition: all 0.2s ease;
}

    .summary-item:hover[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .summary-item .label[b-6y63b0ydoz] {
        font-size: 0.75rem;
        font-weight: 500;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .summary-item .value[b-6y63b0ydoz] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

    .summary-item.full-width[b-6y63b0ydoz] {
        grid-column: 1 / -1;
    }

.id-value[b-6y63b0ydoz] {
    font-family: monospace;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 1rem !important;
    display: inline-block;
    width: fit-content;
}

.warehouse-value[b-6y63b0ydoz] {
    font-family: monospace;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #1e293b;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 1rem !important;
    display: inline-block;
    width: fit-content;
}

.pickups-value[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 1rem !important;
    display: inline-block;
    width: fit-content;
}

.notes-text[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    font-style: italic;
    line-height: 1.5;
    margin-top: 0.5rem;
    display: block;
    font-size: 0.9rem !important;
    color: #475569 !important;
    font-weight: 400 !important;
}

/* Pickup Summary Stats */
.pickup-summary-stats[b-6y63b0ydoz] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.mini-stat[b-6y63b0ydoz] {
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .mini-stat.delivered[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
        border: 1px solid #10b981;
    }

    .mini-stat.in-transit[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
        border: 1px solid #f59e0b;
    }

    .mini-stat.scheduled[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1e3a8a;
        border: 1px solid #3b82f6;
    }

    .mini-stat.cancelled[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
        border: 1px solid #ef4444;
    }

/* Status Badges */
.status-badge[b-6y63b0ydoz] {
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.status-completed[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-in-progress[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-ready[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border: 1px solid #3b82f6;
}

.status-draft[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #6b7280;
}

.status-cancelled[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.status-default[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Pickups Grid */
.pickups-grid[b-6y63b0ydoz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 1.5rem;
}

.pickup-card[b-6y63b0ydoz] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .pickup-card:hover[b-6y63b0ydoz] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        border-color: #3b82f6;
    }

    .pickup-card.readonly[b-6y63b0ydoz] {
        cursor: default;
    }

.pickup-card-header[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pickup-title[b-6y63b0ydoz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .pickup-title h6[b-6y63b0ydoz] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: white;
    }

.pickup-status-badge[b-6y63b0ydoz] {
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pickup-status-delivered[b-6y63b0ydoz] {
    background: rgba(16, 185, 129, 0.2);
    color: #d1fae5;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.pickup-status-in-transit[b-6y63b0ydoz] {
    background: rgba(245, 158, 11, 0.2);
    color: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.pickup-status-scheduled[b-6y63b0ydoz] {
    background: rgba(59, 130, 246, 0.2);
    color: #dbeafe;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.pickup-status-cancelled[b-6y63b0ydoz] {
    background: rgba(239, 68, 68, 0.2);
    color: #fee2e2;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.pickup-status-default[b-6y63b0ydoz] {
    background: rgba(107, 114, 128, 0.2);
    color: #f3f4f6;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.pickup-meta[b-6y63b0ydoz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pickup-date[b-6y63b0ydoz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #e2e8f0;
}

.pickup-card-content[b-6y63b0ydoz] {
    padding: 1.5rem;
}

.pickup-details[b-6y63b0ydoz] {
    margin-bottom: 1.5rem;
}

.detail-grid[b-6y63b0ydoz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.detail-row[b-6y63b0ydoz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.15s ease;
}

    .detail-row:last-child[b-6y63b0ydoz] {
        border-bottom: none;
    }

    .detail-row:hover[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 4px;
        padding: 0.5rem 0.75rem;
        margin: 0 -0.75rem;
    }

.detail-label[b-6y63b0ydoz] {
    font-weight: 500;
    color: #64748b;
    font-size: 0.875rem;
}

.detail-value[b-6y63b0ydoz] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}

.instructions-section[b-6y63b0ydoz] {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border-radius: 8px;
    border-left: 4px solid #f59e0b;
}

    .instructions-section .detail-label[b-6y63b0ydoz] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #92400e;
    }

.instructions-text[b-6y63b0ydoz] {
    color: #92400e;
    font-style: italic;
    line-height: 1.5;
    font-size: 0.875rem;
}

/* Items Summary */
.items-summary[b-6y63b0ydoz] {
    border-top: 2px solid #e2e8f0;
    padding-top: 1.5rem;
}

.items-header[b-6y63b0ydoz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.items-count[b-6y63b0ydoz] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-toggle-items[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .btn-toggle-items:hover[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: translateY(-1px);
    }

/* Items Grid */
.items-grid[b-6y63b0ydoz] {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.item-card[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

    .item-card:hover[b-6y63b0ydoz] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        border-color: #3b82f6;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .item-card.readonly[b-6y63b0ydoz] {
        cursor: default;
    }

.item-header[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    color: white;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-description[b-6y63b0ydoz] {
    flex: 1;
}

    .item-description strong[b-6y63b0ydoz] {
        color: white;
        font-size: 0.875rem;
        font-weight: 600;
    }

.item-status[b-6y63b0ydoz] {
    display: flex;
    align-items: center;
}

.qty-badge[b-6y63b0ydoz] {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-complete[b-6y63b0ydoz] {
    background: rgba(16, 185, 129, 0.2);
    color: #d1fae5;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-partial[b-6y63b0ydoz] {
    background: rgba(245, 158, 11, 0.2);
    color: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-over[b-6y63b0ydoz] {
    background: rgba(239, 68, 68, 0.2);
    color: #fee2e2;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-pending[b-6y63b0ydoz] {
    background: rgba(59, 130, 246, 0.2);
    color: #dbeafe;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-none[b-6y63b0ydoz] {
    background: rgba(107, 114, 128, 0.2);
    color: #f3f4f6;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.item-details[b-6y63b0ydoz] {
    padding: 1rem;
}

.item-detail-grid[b-6y63b0ydoz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.item-stat[b-6y63b0ydoz] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    transition: all 0.15s ease;
}

    .item-stat:hover[b-6y63b0ydoz] {
        border-color: #3b82f6;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    }

.stat-label[b-6y63b0ydoz] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-value[b-6y63b0ydoz] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

.item-notes[b-6y63b0ydoz] {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.75rem;
}

.notes-label[b-6y63b0ydoz] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #92400e;
    display: block;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.notes-text[b-6y63b0ydoz] {
    font-size: 0.875rem;
    color: #92400e;
    font-style: italic;
    line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .release-view-container[b-6y63b0ydoz] {
        padding: 0.75rem 1rem;
    }

    .pickups-grid[b-6y63b0ydoz] {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }
}

@media (max-width: 768px) {
    .release-view-container[b-6y63b0ydoz] {
        padding: 0.75rem 0.5rem;
    }

    .page-header[b-6y63b0ydoz] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .actions-bar[b-6y63b0ydoz] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-title[b-6y63b0ydoz] {
        font-size: 1.5rem;
        text-align: center;
    }

    .release-summary[b-6y63b0ydoz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pickups-grid[b-6y63b0ydoz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pickup-card-header[b-6y63b0ydoz] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pickup-title[b-6y63b0ydoz] {
        text-align: center;
    }

    .pickup-meta[b-6y63b0ydoz] {
        justify-content: center;
    }

    .detail-grid[b-6y63b0ydoz] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .detail-row[b-6y63b0ydoz] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .item-detail-grid[b-6y63b0ydoz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pickup-summary-stats[b-6y63b0ydoz] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .card-header-with-actions[b-6y63b0ydoz] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .items-header[b-6y63b0ydoz] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .btn-toggle-items[b-6y63b0ydoz] {
        align-self: center;
    }
}

@media (max-width: 576px) {
    .release-view-container[b-6y63b0ydoz] {
        padding: 0.5rem 0.25rem;
    }

    .page-title[b-6y63b0ydoz] {
        font-size: 1.25rem;
    }

    .card-content[b-6y63b0ydoz] {
        padding: 1rem;
    }

    .pickup-card-content[b-6y63b0ydoz] {
        padding: 1rem;
    }

    .item-details[b-6y63b0ydoz] {
        padding: 0.75rem;
    }

    .item-detail-grid[b-6y63b0ydoz] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .item-stat[b-6y63b0ydoz] {
        padding: 0.375rem;
    }

    .stat-value[b-6y63b0ydoz] {
        font-size: 0.8rem;
    }

    .stat-label[b-6y63b0ydoz] {
        font-size: 0.65rem;
    }

    .detail-label[b-6y63b0ydoz],
    .detail-value[b-6y63b0ydoz] {
        font-size: 0.8rem;
    }

    .pickup-title h6[b-6y63b0ydoz] {
        font-size: 1rem;
    }

    .item-description strong[b-6y63b0ydoz] {
        font-size: 0.8rem;
    }

    .qty-badge[b-6y63b0ydoz] {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }

    .pickup-status-badge[b-6y63b0ydoz] {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }

    .mini-stat[b-6y63b0ydoz] {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }

    .status-badge[b-6y63b0ydoz] {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .summary-item .value[b-6y63b0ydoz] {
        font-size: 1rem;
    }

    .id-value[b-6y63b0ydoz],
    .warehouse-value[b-6y63b0ydoz],
    .pickups-value[b-6y63b0ydoz] {
        font-size: 0.875rem !important;
        padding: 0.2rem 0.5rem;
    }

    .instructions-section[b-6y63b0ydoz] {
        padding: 0.75rem;
    }

    .instructions-text[b-6y63b0ydoz] {
        font-size: 0.8rem;
    }

    .item-notes[b-6y63b0ydoz] {
        padding: 0.5rem;
    }

    .notes-text[b-6y63b0ydoz] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .actions-bar[b-6y63b0ydoz] {
        flex-direction: column;
        width: 100%;
    }

    .btn[b-6y63b0ydoz] {
        width: 100%;
        justify-content: center;
    }

    .card-header[b-6y63b0ydoz] {
        padding: 1rem;
    }

    .pickup-card-header[b-6y63b0ydoz] {
        padding: 0.75rem 1rem;
    }

    .item-header[b-6y63b0ydoz] {
        padding: 0.5rem 0.75rem;
    }

    .summary-item[b-6y63b0ydoz] {
        padding: 0.75rem;
    }

    .pickup-summary-stats[b-6y63b0ydoz] {
        gap: 0.5rem;
    }
}
/* _content/webQT/Features/Sales/Reps/RepManagement.razor.rz.scp.css */
/* Rep Management Container */
.rep-management-container[b-68tuvv88js] {
    padding: 1rem 2rem;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    background-color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Page Header */
.page-header[b-68tuvv88js] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.page-title[b-68tuvv88js] {
    margin: 0;
    color: #1e293b;
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.actions-bar[b-68tuvv88js] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Filter Bar */
.filter-bar[b-68tuvv88js] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
}

.search-box[b-68tuvv88js] {
    flex: 1;
    min-width: 250px;
    position: relative;
    display: flex;
    align-items: center;
}

    .search-box i[b-68tuvv88js] {
        position: absolute;
        left: 1rem;
        color: #64748b;
        font-size: 0.875rem;
    }

    .search-box input[b-68tuvv88js] {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 0.875rem;
        background: white;
        transition: all 0.2s ease;
    }

        .search-box input:focus[b-68tuvv88js] {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

.filter-options[b-68tuvv88js] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.filter-select[b-68tuvv88js] {
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
}

    .filter-select:focus[b-68tuvv88js] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

/* Enhanced Buttons */
.btn[b-68tuvv88js] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

    .btn[b-68tuvv88js]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover[b-68tuvv88js]::before {
        left: 100%;
    }

    .btn:disabled[b-68tuvv88js] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .btn:disabled[b-68tuvv88js]::before {
            display: none;
        }

.primary-btn[b-68tuvv88js] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .primary-btn:hover:not(:disabled)[b-68tuvv88js] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.secondary-btn[b-68tuvv88js] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover:not(:disabled)[b-68tuvv88js] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.danger-btn[b-68tuvv88js] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

    .danger-btn:hover:not(:disabled)[b-68tuvv88js] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    }

.btn-small[b-68tuvv88js] {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
}

.btn-icon[b-68tuvv88js] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #cbd5e1;
}

    .btn-icon:hover[b-68tuvv88js] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #1e293b;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .btn-icon.danger[b-68tuvv88js] {
        color: #ef4444;
    }

        .btn-icon.danger:hover[b-68tuvv88js] {
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
            color: #dc2626;
            border-color: #fca5a5;
        }

.btn-icon-small[b-68tuvv88js] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
    font-size: 0.75rem;
}

    .btn-icon-small:hover[b-68tuvv88js] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #1e293b;
        border-color: #cbd5e1;
    }

    .btn-icon-small.danger[b-68tuvv88js] {
        color: #ef4444;
    }

        .btn-icon-small.danger:hover[b-68tuvv88js] {
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
            color: #dc2626;
            border-color: #fca5a5;
        }

/* Reps Grid */
.reps-grid[b-68tuvv88js] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 1.5rem;
}

/* Rep Card */
.rep-card[b-68tuvv88js] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    overflow: hidden;
}

    .rep-card:hover[b-68tuvv88js] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }

.rep-card-header[b-68tuvv88js] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
}

.rep-header-content[b-68tuvv88js] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.rep-name[b-68tuvv88js] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
}

.rep-code[b-68tuvv88js] {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.rep-actions[b-68tuvv88js] {
    display: flex;
    gap: 0.5rem;
}

.rep-card-body[b-68tuvv88js] {
    padding: 1.25rem;
}

.rep-info-grid[b-68tuvv88js] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.info-item[b-68tuvv88js] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #475569;
    border: 1px solid #e2e8f0;
}

    .info-item i[b-68tuvv88js] {
        color: #3b82f6;
        font-size: 0.875rem;
        width: 16px;
    }

.region-badge[b-68tuvv88js] {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
}

.rep-notes[b-68tuvv88js] {
    padding: 0.875rem;
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border: 1px solid #fde047;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.notes-label[b-68tuvv88js] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
    margin-bottom: 0.25rem;
}

.notes-text[b-68tuvv88js] {
    font-size: 0.875rem;
    color: #92400e;
    font-style: italic;
    line-height: 1.4;
}

/* Locations Section */
.locations-section[b-68tuvv88js] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 2px solid #e2e8f0;
}

.locations-header[b-68tuvv88js] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .locations-header h4[b-68tuvv88js] {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #1e293b;
    }

.locations-list[b-68tuvv88js] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.location-item[b-68tuvv88js] {
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .location-item:hover[b-68tuvv88js] {
        border-color: #cbd5e1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .location-item.inactive[b-68tuvv88js] {
        opacity: 0.6;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    }

.location-header[b-68tuvv88js] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.location-title[b-68tuvv88js] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #1e293b;
}

.location-actions[b-68tuvv88js] {
    display: flex;
    gap: 0.375rem;
}

.location-details[b-68tuvv88js] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.location-detail[b-68tuvv88js] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #64748b;
}

    .location-detail i[b-68tuvv88js] {
        color: #3b82f6;
        font-size: 0.75rem;
        width: 14px;
        margin-top: 0.125rem;
    }

.detail-spacer[b-68tuvv88js] {
    width: 14px;
}

.badge[b-68tuvv88js] {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge-primary[b-68tuvv88js] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
}

.badge-inactive[b-68tuvv88js] {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.empty-locations[b-68tuvv88js] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.875rem;
    font-style: italic;
}

    .empty-locations i[b-68tuvv88js] {
        color: #cbd5e1;
        font-size: 1.25rem;
    }

/* Empty State */
.empty-state[b-68tuvv88js] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
    text-align: center;
}

    .empty-state i[b-68tuvv88js] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-state h3[b-68tuvv88js] {
        margin: 0 0 0.5rem 0;
        color: #475569;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-state p[b-68tuvv88js] {
        margin: 0;
        color: #94a3b8;
        font-size: 0.875rem;
    }

/* Modal Styles */
.modal-overlay[b-68tuvv88js] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    padding: 1rem;
}

.modal-container[b-68tuvv88js] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-68tuvv88js 0.2s ease-out;
}

.modal-large[b-68tuvv88js] {
    max-width: 800px;
}

.modal-small[b-68tuvv88js] {
    max-width: 400px;
}

@keyframes modalSlideIn-b-68tuvv88js {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-68tuvv88js] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h2[b-68tuvv88js] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
    }

.btn-close[b-68tuvv88js] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-close:hover[b-68tuvv88js] {
        background: rgba(0, 0, 0, 0.1);
        color: #1e293b;
    }

.modal-body[b-68tuvv88js] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-68tuvv88js] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
}

/* Form Styles */
.form-grid[b-68tuvv88js] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form-group[b-68tuvv88js] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

    .form-group.full-width[b-68tuvv88js] {
        grid-column: 1 / -1;
    }

    .form-group label[b-68tuvv88js] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #475569;
    }

.required[b-68tuvv88js] {
    color: #ef4444;
}

.form-control[b-68tuvv88js] {
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s ease;
    font-family: inherit;
}

    .form-control:focus[b-68tuvv88js] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-68tuvv88js] {
    resize: vertical;
    min-height: 80px;
}

.checkbox-label[b-68tuvv88js] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .checkbox-label:hover[b-68tuvv88js] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        border-color: #cbd5e1;
    }

    .checkbox-label input[type="checkbox"][b-68tuvv88js] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #3b82f6;
    }

    .checkbox-label span[b-68tuvv88js] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #475569;
    }

/* Confirmation Message */
.confirmation-message[b-68tuvv88js] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
}

    .confirmation-message i[b-68tuvv88js] {
        font-size: 3rem;
        color: #f59e0b;
    }

    .confirmation-message p[b-68tuvv88js] {
        margin: 0;
        color: #475569;
        font-size: 0.9375rem;
        line-height: 1.6;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .reps-grid[b-68tuvv88js] {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }
}

@media (max-width: 768px) {
    .rep-management-container[b-68tuvv88js] {
        padding: 0.75rem 1rem;
    }

    .page-header[b-68tuvv88js] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .page-title[b-68tuvv88js] {
        text-align: center;
        font-size: 1.5rem;
    }

    .actions-bar[b-68tuvv88js] {
        justify-content: center;
    }

    .filter-bar[b-68tuvv88js] {
        flex-direction: column;
    }

    .search-box[b-68tuvv88js] {
        width: 100%;
    }

    .filter-select[b-68tuvv88js] {
        width: 100%;
    }

    .reps-grid[b-68tuvv88js] {
        grid-template-columns: 1fr;
    }

    .rep-card-header[b-68tuvv88js] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .rep-header-content[b-68tuvv88js] {
        justify-content: center;
    }

    .rep-actions[b-68tuvv88js] {
        justify-content: center;
    }

    .locations-header[b-68tuvv88js] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .form-grid[b-68tuvv88js] {
        grid-template-columns: 1fr;
    }

    .modal-container[b-68tuvv88js] {
        max-height: 95vh;
        margin: 0.5rem;
    }
}
/* _content/webQT/Features/Sales/TD/TDEdit.razor.rz.scp.css */
/* TruckDispatchEdit.razor.css - Enhanced Version */

/* Container */
.dispatch-edit-container[b-98fefhx5n1] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
}

/* Page Header */
.page-header[b-98fefhx5n1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

    .page-header[b-98fefhx5n1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #3b82f6 0%, #10b981 50%, #f59e0b 100%);
    }

.page-title-section[b-98fefhx5n1] {
    flex: 1;
}

.page-title[b-98fefhx5n1] {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    .page-title i[b-98fefhx5n1] {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.75rem;
        animation: pulse-b-98fefhx5n1 2s infinite;
    }

@keyframes pulse-b-98fefhx5n1 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.page-subtitle[b-98fefhx5n1] {
    color: #64748b;
    font-size: 1.05rem;
    margin: 0;
    font-weight: 500;
    padding-left: 3rem;
}

.header-actions[b-98fefhx5n1] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Enhanced Release Selection Card */
.info-card:has(.release-selection-display)[b-98fefhx5n1],
.info-card:has(.release-selection-form)[b-98fefhx5n1] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

    .info-card:has(.release-selection-display)[b-98fefhx5n1]::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        border-radius: 12px;
        z-index: -1;
    }

    .info-card:has(.release-selection-form)[b-98fefhx5n1]::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        border-radius: 12px;
        z-index: -1;
    }

.release-selection-display[b-98fefhx5n1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 12px;
    border: 2px solid #10b981;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
    position: relative;
    overflow: hidden;
}

    .release-selection-display[b-98fefhx5n1]::before {
        content: '✓';
        position: absolute;
        top: -20px;
        right: -20px;
        font-size: 8rem;
        color: rgba(16, 185, 129, 0.08);
        font-weight: bold;
    }

.selected-release-info[b-98fefhx5n1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 1;
}

.selected-release-badge[b-98fefhx5n1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #065f46;
    font-weight: 700;
    font-size: 1.25rem;
}

    .selected-release-badge i[b-98fefhx5n1] {
        color: #10b981;
        font-size: 1.5rem;
        animation: checkPulse-b-98fefhx5n1 2s infinite;
    }

@keyframes checkPulse-b-98fefhx5n1 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.release-quick-info[b-98fefhx5n1] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.warehouse-badge[b-98fefhx5n1] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 2px solid #3b82f6;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    transition: all 0.2s ease;
}

    .warehouse-badge:hover[b-98fefhx5n1] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    }

.pickups-info[b-98fefhx5n1] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 2px solid #f59e0b;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
    transition: all 0.2s ease;
}

    .pickups-info:hover[b-98fefhx5n1] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    }

.date-info[b-98fefhx5n1] {
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .date-info[b-98fefhx5n1]::before {
        content: '📅';
        font-size: 1rem;
    }

.btn-change-release[b-98fefhx5n1] {
    flex-shrink: 0;
    white-space: nowrap;
    z-index: 1;
}

/* Release Selection Form */
.release-selection-form[b-98fefhx5n1] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem;
}

.release-select[b-98fefhx5n1] {
    min-height: 56px;
    font-size: 1rem;
    font-weight: 600;
    background: white;
    border: 2px solid #cbd5e1;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .release-select:hover[b-98fefhx5n1] {
        border-color: #f59e0b;
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
        transform: translateY(-1px);
    }

    .release-select:focus[b-98fefhx5n1] {
        border-color: #f59e0b;
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
        transform: translateY(-2px);
    }

.btn-select-release[b-98fefhx5n1] {
    align-self: flex-start;
    min-width: 200px;
    padding: 1rem 2rem;
    font-size: 1rem;
}

.no-releases-message[b-98fefhx5n1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 10px;
    color: #92400e;
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 1rem;
    animation: slideIn-b-98fefhx5n1 0.3s ease-out;
}

    .no-releases-message i[b-98fefhx5n1] {
        color: #f59e0b;
        font-size: 1.25rem;
    }

/* Enhanced Card Styles */
.info-card[b-98fefhx5n1] {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
}

    .info-card:hover[b-98fefhx5n1] {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

.card-header[b-98fefhx5n1] {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
    padding: 1.75rem 2rem;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

    .card-header[b-98fefhx5n1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
        pointer-events: none;
    }

    .card-header h5[b-98fefhx5n1] {
        margin: 0;
        color: white;
        font-size: 1.35rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }

        .card-header h5 i[b-98fefhx5n1] {
            color: #93c5fd;
            font-size: 1.5rem;
            filter: drop-shadow(0 2px 8px rgba(147, 197, 253, 0.5));
        }

.card-content[b-98fefhx5n1] {
    padding: 2.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

/* Enhanced Release Summary */
.release-summary[b-98fefhx5n1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.summary-item[b-98fefhx5n1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .summary-item[b-98fefhx5n1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
        transition: width 0.3s ease;
    }

    .summary-item:hover[b-98fefhx5n1] {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        border-color: #3b82f6;
    }

        .summary-item:hover[b-98fefhx5n1]::before {
            width: 8px;
        }

    .summary-item .label[b-98fefhx5n1] {
        font-size: 0.8rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .summary-item .value[b-98fefhx5n1] {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1e293b;
    }

.release-id-badge[b-98fefhx5n1] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 1rem !important;
    display: inline-block;
    width: fit-content;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.no-data[b-98fefhx5n1] {
    color: #cbd5e1;
    font-style: italic;
    font-weight: 500 !important;
}

/* Status Badges */
.status-badge[b-98fefhx5n1] {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-ready[b-98fefhx5n1] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border: 2px solid #3b82f6;
}

/* Enhanced Form Layout */
.dispatch-form[b-98fefhx5n1] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-grid[b-98fefhx5n1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 1rem;
}

.form-section[b-98fefhx5n1] {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 2px dashed #e2e8f0;
}

.section-title[b-98fefhx5n1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2rem 0;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-left: 5px solid #3b82f6;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

    .section-title[b-98fefhx5n1]::before {
        content: none;
    }

/* Enhanced Form Groups with Icons */
.form-group[b-98fefhx5n1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

    .form-group.full-width[b-98fefhx5n1] {
        grid-column: 1 / -1;
    }

    .form-group label[b-98fefhx5n1] {
        font-size: 0.8rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .form-group label[b-98fefhx5n1]::before {
            content: '▸';
            color: #3b82f6;
            font-size: 1rem;
        }

/* Enhanced Input Styles */
.form-input[b-98fefhx5n1],
.form-select[b-98fefhx5n1] {
    padding: 1rem 1.25rem;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    background: white;
    transition: all 0.3s ease;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .form-input:hover[b-98fefhx5n1],
    .form-select:hover[b-98fefhx5n1] {
        border-color: #3b82f6;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
        transform: translateY(-1px);
    }

    .form-input:focus[b-98fefhx5n1],
    .form-select:focus[b-98fefhx5n1] {
        border-color: #3b82f6;
        outline: 0;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 24px rgba(59, 130, 246, 0.2);
        background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
        transform: translateY(-2px);
    }

.form-select[b-98fefhx5n1] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 3rem;
}

    .form-select:hover[b-98fefhx5n1] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%231e40af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    }

.instructions-textarea[b-98fefhx5n1] {
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
    line-height: 1.7;
}

/* Enhanced Button Styles */
.btn[b-98fefhx5n1] {
    padding: 1rem 1.75rem;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .btn[b-98fefhx5n1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s;
    }

    .btn:hover[b-98fefhx5n1]::before {
        left: 100%;
    }

    .btn:disabled[b-98fefhx5n1] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

        .btn:disabled[b-98fefhx5n1]::before {
            display: none;
        }

.primary-btn[b-98fefhx5n1] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

    .primary-btn:hover:not(:disabled)[b-98fefhx5n1] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-3px);
        box-shadow: 0 12px 36px rgba(59, 130, 246, 0.5);
    }

    .primary-btn:active:not(:disabled)[b-98fefhx5n1] {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    }

.secondary-btn[b-98fefhx5n1] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 2px solid #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-98fefhx5n1] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        border-color: #94a3b8;
    }

/* Form Actions */
.form-actions[b-98fefhx5n1] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem 0;
    border-top: 2px solid #e2e8f0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    margin-top: 2rem;
}

/* Validation Errors */
.validation-errors[b-98fefhx5n1] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
}

    .validation-errors ul[b-98fefhx5n1] {
        margin: 0;
        padding-left: 1.5rem;
    }

    .validation-errors li[b-98fefhx5n1] {
        margin-bottom: 0.5rem;
    }

/* Enhanced Visual Feedback */
.form-input:invalid[b-98fefhx5n1] {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.form-select:invalid[b-98fefhx5n1] {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

/* Loading State for Buttons */
.btn .fa-spinner[b-98fefhx5n1] {
    animation: spin-b-98fefhx5n1 1s linear infinite;
}

@keyframes spin-b-98fefhx5n1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Animation */
@keyframes slideIn-b-98fefhx5n1 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dispatch-edit-container[b-98fefhx5n1] {
        padding: 1.5rem;
    }

    .form-grid[b-98fefhx5n1] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .page-header[b-98fefhx5n1] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }

    .header-actions[b-98fefhx5n1] {
        justify-content: center;
    }

    .release-summary[b-98fefhx5n1] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.25rem;
    }

    .release-selection-display[b-98fefhx5n1] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }

    .release-quick-info[b-98fefhx5n1] {
        justify-content: center;
    }

    .btn-change-release[b-98fefhx5n1] {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .dispatch-edit-container[b-98fefhx5n1] {
        padding: 1rem;
    }

    .page-title[b-98fefhx5n1] {
        font-size: 1.5rem;
        text-align: center;
    }

    .page-subtitle[b-98fefhx5n1] {
        text-align: center;
        padding-left: 0;
    }

    .card-content[b-98fefhx5n1] {
        padding: 1.5rem;
    }

    .form-grid[b-98fefhx5n1] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .form-actions[b-98fefhx5n1] {
        flex-direction: column;
        gap: 1rem;
    }

    .btn[b-98fefhx5n1] {
        width: 100%;
    }

    .release-selection-display[b-98fefhx5n1] {
        padding: 1.25rem;
    }

    .selected-release-badge[b-98fefhx5n1] {
        font-size: 1.1rem;
    }

    .release-quick-info[b-98fefhx5n1] {
        gap: 0.75rem;
    }

    .warehouse-badge[b-98fefhx5n1],
    .pickups-info[b-98fefhx5n1] {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .summary-item[b-98fefhx5n1] {
        padding: 1.25rem;
    }

    .section-title[b-98fefhx5n1] {
        font-size: 1.1rem;
        padding: 0.875rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .dispatch-edit-container[b-98fefhx5n1] {
        padding: 0.75rem;
    }

    .page-header[b-98fefhx5n1] {
        padding: 1.5rem;
    }

    .card-content[b-98fefhx5n1] {
        padding: 1.25rem;
    }

    .page-title[b-98fefhx5n1] {
        font-size: 1.25rem;
    }

        .page-title i[b-98fefhx5n1] {
            font-size: 1.25rem;
        }

    .release-selection-display[b-98fefhx5n1] {
        padding: 1rem;
        gap: 1rem;
    }

    .selected-release-badge[b-98fefhx5n1] {
        font-size: 1rem;
        gap: 0.5rem;
    }

        .selected-release-badge i[b-98fefhx5n1] {
            font-size: 1.25rem;
        }

    .release-quick-info[b-98fefhx5n1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .warehouse-badge[b-98fefhx5n1],
    .pickups-info[b-98fefhx5n1] {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }

    .date-info[b-98fefhx5n1] {
        font-size: 0.8rem;
    }

    .no-releases-message[b-98fefhx5n1] {
        padding: 1rem;
        font-size: 0.85rem;
    }

    .btn-select-release[b-98fefhx5n1] {
        width: 100%;
        min-width: auto;
    }

    .form-input[b-98fefhx5n1],
    .form-select[b-98fefhx5n1] {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .instructions-textarea[b-98fefhx5n1] {
        min-height: 120px;
    }

    .summary-item .value[b-98fefhx5n1] {
        font-size: 1rem;
    }

    .form-actions[b-98fefhx5n1] {
        padding: 1.5rem 0;
    }
}

/* Special States */
.form-group:has(.form-input:focus) label[b-98fefhx5n1],
.form-group:has(.form-select:focus) label[b-98fefhx5n1] {
    color: #3b82f6;
    transition: color 0.2s ease;
}

    .form-group:has(.form-input:focus) label[b-98fefhx5n1]::before,
    .form-group:has(.form-select:focus) label[b-98fefhx5n1]::before {
        color: #1e40af;
        transform: scale(1.2);
        transition: all 0.2s ease;
    }

/* Accessibility Improvements */
.btn:focus-visible[b-98fefhx5n1] {
    outline: 3px solid #3b82f6;
    outline-offset: 3px;
}

.form-input:focus-visible[b-98fefhx5n1],
.form-select:focus-visible[b-98fefhx5n1] {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .page-header[b-98fefhx5n1],
    .header-actions[b-98fefhx5n1],
    .form-actions[b-98fefhx5n1],
    .btn-change-release[b-98fefhx5n1] {
        display: none;
    }

    .dispatch-edit-container[b-98fefhx5n1] {
        background: white;
        padding: 0;
    }

    .info-card[b-98fefhx5n1] {
        box-shadow: none;
        border: 1px solid #e2e8f0;
        page-break-inside: avoid;
    }
}
/* _content/webQT/Features/Sales/TD/TDManagement.razor.rz.scp.css */
/* TruckDispatchPage.razor.css */

/* Container */
.dispatch-container[b-xa9ls1djuh] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    background: #f8fafc;
    min-height: 100vh;
}

/* Page Header */
.page-header[b-xa9ls1djuh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 2rem;
}

.page-title-section[b-xa9ls1djuh] {
    flex: 1;
}

.page-title[b-xa9ls1djuh] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .page-title i[b-xa9ls1djuh] {
        color: #3b82f6;
        font-size: 1.75rem;
    }

.page-subtitle[b-xa9ls1djuh] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

/* Header Stats */
.header-stats[b-xa9ls1djuh] {
    display: flex;
    gap: 1.5rem;
}

.stat-card[b-xa9ls1djuh] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 160px;
    transition: all 0.2s ease;
}

    .stat-card:hover[b-xa9ls1djuh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

/* Card Header with Actions */
.card-header-with-actions[b-xa9ls1djuh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-dispatch-btn[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

    .new-dispatch-btn:hover[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }

/* Compact Table for Ready Releases */
.compact-table[b-xa9ls1djuh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .compact-table thead th[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        color: #374151;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0.75rem;
        border-bottom: 1px solid #e2e8f0;
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .compact-table tbody td[b-xa9ls1djuh] {
        padding: 0.75rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .compact-table tbody tr:hover[b-xa9ls1djuh] {
        background-color: #f8fafc;
    }

    .compact-table tbody tr:last-child td[b-xa9ls1djuh] {
        border-bottom: none;
    }

.release-cell[b-xa9ls1djuh] {
    font-weight: 700;
    color: #1e293b;
    font-family: monospace;
}

.warehouse-pill[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid #93c5fd;
    display: inline-block;
}

.date-cell[b-xa9ls1djuh] {
    color: #64748b;
    font-weight: 500;
}

.pickups-cell[b-xa9ls1djuh] {
    color: #64748b;
    font-weight: 500;
}

.compact-actions[b-xa9ls1djuh] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-dispatch[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .btn-dispatch:hover[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

    .btn-dispatch i[b-xa9ls1djuh] {
        font-size: 0.75rem;
    }

.btn-view[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0.375rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .btn-view:hover[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .btn-view i[b-xa9ls1djuh] {
        font-size: 0.75rem;
    }

.empty-state-simple[b-xa9ls1djuh] {
    text-align: center;
    padding: 2rem;
    color: #64748b;
    font-style: italic;
}

.stat-icon[b-xa9ls1djuh] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

    .stat-icon.ready[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    }

    .stat-icon.dispatched[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

.stat-content[b-xa9ls1djuh] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-xa9ls1djuh] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label[b-xa9ls1djuh] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Enhanced Card Styles */
.info-card[b-xa9ls1djuh] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
}

    .info-card:hover[b-xa9ls1djuh] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

.card-header[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .card-header h5[b-xa9ls1djuh] {
        margin: 0;
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .card-header h5 i[b-xa9ls1djuh] {
            color: #3b82f6;
        }

.section-count[b-xa9ls1djuh] {
    color: #64748b;
    font-weight: 500;
    font-size: 1rem;
}

.card-content[b-xa9ls1djuh] {
    padding: 1.5rem;
}

/* Filters */
.filters-container[b-xa9ls1djuh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    align-items: end;
}

.filter-group[b-xa9ls1djuh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .filter-group label[b-xa9ls1djuh] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.form-select[b-xa9ls1djuh],
.form-input[b-xa9ls1djuh] {
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    background-color: white;
    transition: all 0.2s ease;
    color: #1e293b;
}

    .form-select:focus[b-xa9ls1djuh],
    .form-input:focus[b-xa9ls1djuh] {
        border-color: #3b82f6;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background-color: #f8fafc;
    }

    .form-select:hover[b-xa9ls1djuh],
    .form-input:hover[b-xa9ls1djuh] {
        border-color: #94a3b8;
    }

/* Table Styles for Active Dispatches */
.table-responsive[b-xa9ls1djuh] {
    overflow-x: auto;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

/* Ready Releases Table - Limited Height with Scroll */
.ready-releases-table[b-xa9ls1djuh] {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
}

    /* Custom Scrollbar for Ready Releases Table */
    .ready-releases-table[b-xa9ls1djuh]::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .ready-releases-table[b-xa9ls1djuh]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .ready-releases-table[b-xa9ls1djuh]::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        border-radius: 4px;
    }

        .ready-releases-table[b-xa9ls1djuh]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        }

/* Firefox Scrollbar */
.ready-releases-table[b-xa9ls1djuh] {
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #f1f5f9;
}

.data-table[b-xa9ls1djuh] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.875rem;
}

    .data-table th[b-xa9ls1djuh] {
        text-align: left;
        padding: 1rem 0.75rem;
        background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
        color: #ffffff;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid #1e40af;
        white-space: nowrap;
    }

        .data-table th.actions-column[b-xa9ls1djuh] {
            text-align: center;
            width: 120px;
        }

    .data-table td[b-xa9ls1djuh] {
        padding: 0.75rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .data-table tbody tr[b-xa9ls1djuh] {
        transition: all 0.2s ease;
    }

        .data-table tbody tr:hover[b-xa9ls1djuh] {
            background-color: #f8fafc;
        }

        .data-table tbody tr:last-child td[b-xa9ls1djuh] {
            border-bottom: none;
        }

/* Table Cell Styles */
.dispatch-id[b-xa9ls1djuh] {
    font-family: monospace;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.8rem;
}

.release-badge[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    font-family: monospace;
    border: 1px solid #cbd5e1;
}

.rate-cell[b-xa9ls1djuh] {
    text-align: right;
}

.rate-amount[b-xa9ls1djuh] {
    color: #10b981;
    font-weight: 600;
}

.no-rate[b-xa9ls1djuh],
.no-contact[b-xa9ls1djuh],
.no-date[b-xa9ls1djuh] {
    color: #94a3b8;
    font-style: italic;
}

.contact-cell[b-xa9ls1djuh] {
    max-width: 150px;
}

.contact-info[b-xa9ls1djuh] {
    font-family: monospace;
    font-size: 0.75rem;
    color: #64748b;
}

.date-text[b-xa9ls1djuh] {
    font-weight: 500;
    color: #1e293b;
    font-size: 0.75rem;
}

.time-text[b-xa9ls1djuh] {
    font-size: 0.65rem;
    color: #64748b;
}

.status-assigned[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

/* Table Actions */
.actions-cell[b-xa9ls1djuh] {
    text-align: center;
    width: 120px;
}

.table-actions[b-xa9ls1djuh] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.btn-table[b-xa9ls1djuh] {
    padding: 0.375rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

    .btn-table:hover[b-xa9ls1djuh] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .btn-table.view-btn[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #059669;
        border: 1px solid #6ee7b7;
    }

        .btn-table.view-btn:hover[b-xa9ls1djuh] {
            background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
            color: #047857;
        }

    .btn-table.edit-btn[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1e40af;
        border: 1px solid #93c5fd;
    }

        .btn-table.edit-btn:hover[b-xa9ls1djuh] {
            background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
            color: #1e3a8a;
        }

    .btn-table.pdf-btn[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
        border: 1px solid #f59e0b;
    }

        .btn-table.pdf-btn:hover[b-xa9ls1djuh] {
            background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
            color: #78350f;
        }

/* Status Badges */
.status-badge[b-xa9ls1djuh] {
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    transition: all 0.2s ease;
}

.status-ready[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border: 1px solid #3b82f6;
}

.status-dispatched[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

/* Button Styles */
.btn[b-xa9ls1djuh] {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.primary-btn[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .primary-btn:hover[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.secondary-btn[b-xa9ls1djuh] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-xa9ls1djuh] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

/* Empty States */
.empty-state[b-xa9ls1djuh] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

    .empty-state i[b-xa9ls1djuh] {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-state h4[b-xa9ls1djuh] {
        color: #475569;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-state p[b-xa9ls1djuh] {
        margin-bottom: 0;
        font-size: 1rem;
        line-height: 1.5;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .dispatch-container[b-xa9ls1djuh] {
        padding: 1.5rem;
    }

    .header-stats[b-xa9ls1djuh] {
        flex-direction: column;
        gap: 1rem;
    }

    .stat-card[b-xa9ls1djuh] {
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .dispatch-container[b-xa9ls1djuh] {
        padding: 1rem;
    }

    .page-header[b-xa9ls1djuh] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }

    .header-stats[b-xa9ls1djuh] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .page-title[b-xa9ls1djuh] {
        font-size: 1.5rem;
        text-align: center;
    }

    .page-subtitle[b-xa9ls1djuh] {
        text-align: center;
    }

    .filters-container[b-xa9ls1djuh] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-content[b-xa9ls1djuh] {
        padding: 1rem;
    }

    /* Table responsive adjustments */
    .data-table[b-xa9ls1djuh] {
        font-size: 0.75rem;
    }

        .data-table th[b-xa9ls1djuh],
        .data-table td[b-xa9ls1djuh] {
            padding: 0.5rem 0.375rem;
        }

    .table-actions[b-xa9ls1djuh] {
        flex-direction: column;
        gap: 0.125rem;
    }

    .btn-table[b-xa9ls1djuh] {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .contact-cell[b-xa9ls1djuh] {
        max-width: 100px;
    }

    /* Hide some columns on mobile */
    .data-table th:nth-child(6)[b-xa9ls1djuh],
    .data-table td:nth-child(6)[b-xa9ls1djuh],
    .data-table th:nth-child(7)[b-xa9ls1djuh],
    .data-table td:nth-child(7)[b-xa9ls1djuh] {
        display: none;
    }

    /* Reduce ready releases table height on mobile */
    .ready-releases-table[b-xa9ls1djuh] {
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .dispatch-container[b-xa9ls1djuh] {
        padding: 0.75rem;
    }

    .header-stats[b-xa9ls1djuh] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-xa9ls1djuh] {
        padding: 1rem;
    }

    .stat-number[b-xa9ls1djuh] {
        font-size: 1.25rem;
    }

    .page-title[b-xa9ls1djuh] {
        font-size: 1.25rem;
    }

        .page-title i[b-xa9ls1djuh] {
            font-size: 1.25rem;
        }

    /* Further hide columns on very small screens */
    .data-table th:nth-child(4)[b-xa9ls1djuh],
    .data-table td:nth-child(4)[b-xa9ls1djuh],
    .data-table th:nth-child(5)[b-xa9ls1djuh],
    .data-table td:nth-child(5)[b-xa9ls1djuh] {
        display: none;
    }

    .table-actions[b-xa9ls1djuh] {
        flex-direction: row;
        gap: 0.25rem;
    }

    .btn-table[b-xa9ls1djuh] {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }

    /* Further reduce ready releases table height on small devices */
    .ready-releases-table[b-xa9ls1djuh] {
        max-height: 250px;
    }
}
/* _content/webQT/Features/Sales/TD/TruckComp/TruckCompaniesPage.razor.rz.scp.css */
/* Truck Companies Management Page */

/* Container */
.companies-container[b-217wvfela2] {
    padding: 1rem 2rem;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    background-color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Page Header */
.page-header[b-217wvfela2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.page-title-section[b-217wvfela2] {
    flex: 1;
}

.page-title[b-217wvfela2] {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .page-title i[b-217wvfela2] {
        font-size: 1.75rem;
        background: linear-gradient(135deg, #3b82f6, #1e40af);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-subtitle[b-217wvfela2] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.actions-bar[b-217wvfela2] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Buttons */
.btn[b-217wvfela2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

    .btn[b-217wvfela2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover[b-217wvfela2]::before {
        left: 100%;
    }

    .btn:disabled[b-217wvfela2] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .btn:disabled[b-217wvfela2]::before {
            display: none;
        }

.refresh-btn[b-217wvfela2] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

    .refresh-btn:hover:not(:disabled)[b-217wvfela2] {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
    }

.primary-btn[b-217wvfela2] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .primary-btn:hover:not(:disabled)[b-217wvfela2] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.secondary-btn[b-217wvfela2] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-217wvfela2] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.spinning[b-217wvfela2] {
    animation: spin-b-217wvfela2 1s linear infinite;
}

@keyframes spin-b-217wvfela2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading */
.loading-container[b-217wvfela2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loading-spinner[b-217wvfela2] {
    text-align: center;
}

.spinner[b-217wvfela2] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-217wvfela2 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-text[b-217wvfela2] {
    color: #6c757d;
    margin: 0;
    font-size: 1rem;
}

/* Summary Cards */
.summary-cards[b-217wvfela2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card[b-217wvfela2] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
    border-left: 4px solid;
}

    .summary-card:hover[b-217wvfela2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

    .summary-card.active[b-217wvfela2] {
        border-left-color: #10b981;
    }

    .summary-card.preferred[b-217wvfela2] {
        border-left-color: #f59e0b;
    }

    .summary-card.compliant[b-217wvfela2] {
        border-left-color: #3b82f6;
    }

    .summary-card.expiring[b-217wvfela2] {
        border-left-color: #ef4444;
    }

.card-icon[b-217wvfela2] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.summary-card.active .card-icon[b-217wvfela2] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.summary-card.preferred .card-icon[b-217wvfela2] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.summary-card.compliant .card-icon[b-217wvfela2] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.summary-card.expiring .card-icon[b-217wvfela2] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.card-content h4[b-217wvfela2] {
    margin: 0 0 0.5rem 0;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-number[b-217wvfela2] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
}

/* Info Card */
.info-card[b-217wvfela2] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
}

    .info-card:hover[b-217wvfela2] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

.card-header[b-217wvfela2] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .card-header h5[b-217wvfela2] {
        margin: 0;
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .card-header h5 i[b-217wvfela2] {
            color: #3b82f6;
        }

.card-header-with-actions[b-217wvfela2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.count-badge[b-217wvfela2] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.view-toggle[b-217wvfela2] {
    display: flex;
    gap: 0.25rem;
    background: white;
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.view-btn[b-217wvfela2] {
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

    .view-btn:hover[b-217wvfela2] {
        background: #f1f5f9;
        color: #1e293b;
    }

    .view-btn.active[b-217wvfela2] {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        color: white;
    }

.card-content[b-217wvfela2] {
    padding: 1.5rem;
}

/* Filters */
.filters-container[b-217wvfela2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    align-items: end;
}

.filter-group[b-217wvfela2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .filter-group label[b-217wvfela2] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.form-select[b-217wvfela2],
.form-input[b-217wvfela2] {
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    background-color: white;
    transition: all 0.2s ease;
    color: #1e293b;
}

    .form-select:focus[b-217wvfela2],
    .form-input:focus[b-217wvfela2] {
        border-color: #3b82f6;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background-color: #f8fafc;
    }

    .form-select:hover[b-217wvfela2],
    .form-input:hover[b-217wvfela2] {
        border-color: #94a3b8;
    }

.filter-actions[b-217wvfela2] {
    display: flex;
    align-items: flex-end;
}

/* Empty State */
.empty-state[b-217wvfela2] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

    .empty-state i[b-217wvfela2] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-state h3[b-217wvfela2] {
        color: #475569;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-state p[b-217wvfela2] {
        color: #64748b;
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.5;
    }

/* Table View */
.table-responsive[b-217wvfela2] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.companies-table[b-217wvfela2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 1200px;
}

    .companies-table thead[b-217wvfela2] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .companies-table th[b-217wvfela2] {
        padding: 1rem 0.75rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

        .companies-table th:last-child[b-217wvfela2] {
            border-right: none;
        }

    .companies-table td[b-217wvfela2] {
        padding: 1rem 0.75rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
        color: #475569;
    }

    .companies-table tbody tr[b-217wvfela2] {
        transition: all 0.2s ease;
    }

        .companies-table tbody tr:hover[b-217wvfela2] {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        }

        .companies-table tbody tr:last-child td[b-217wvfela2] {
            border-bottom: none;
        }

/* Table Cells */
.company-cell[b-217wvfela2] {
    min-width: 250px;
}

.company-info[b-217wvfela2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.preferred-icon[b-217wvfela2] {
    color: #f59e0b;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.company-details[b-217wvfela2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.company-name[b-217wvfela2] {
    color: #1e293b;
    font-weight: 600;
    font-size: 0.9375rem;
}

.company-location[b-217wvfela2] {
    color: #64748b;
    font-size: 0.75rem;
}

.license-cell[b-217wvfela2] {
    min-width: 180px;
}

.license-info[b-217wvfela2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.license-badge[b-217wvfela2] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: monospace;
    display: inline-block;
    width: fit-content;
}

    .license-badge.mc[b-217wvfela2] {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1e3a8a;
        border: 1px solid #3b82f6;
    }

    .license-badge.dot[b-217wvfela2] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
        border: 1px solid #10b981;
    }

.contact-cell[b-217wvfela2] {
    min-width: 150px;
}

.contact-info[b-217wvfela2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-name[b-217wvfela2] {
    font-weight: 500;
    color: #1e293b;
    font-size: 0.875rem;
}

.contact-detail[b-217wvfela2] {
    color: #64748b;
    font-size: 0.75rem;
    font-family: monospace;
}

.fleet-cell[b-217wvfela2] {
    min-width: 100px;
}

.fleet-size[b-217wvfela2] {
    color: #1e293b;
    font-weight: 500;
}

.performance-cell[b-217wvfela2] {
    min-width: 120px;
}

.performance-info[b-217wvfela2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.success-rate[b-217wvfela2] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-block;
    width: fit-content;
}

.rate-excellent[b-217wvfela2] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.rate-good[b-217wvfela2] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border: 1px solid #3b82f6;
}

.rate-fair[b-217wvfela2] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.rate-poor[b-217wvfela2] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.rating[b-217wvfela2] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #f59e0b;
    font-size: 0.75rem;
    font-weight: 600;
}

    .rating i[b-217wvfela2] {
        font-size: 0.75rem;
    }

.insurance-cell[b-217wvfela2] {
    min-width: 140px;
}

.insurance-badge[b-217wvfela2] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.insurance-valid[b-217wvfela2] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.insurance-expiring[b-217wvfela2] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.insurance-expired[b-217wvfela2] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.insurance-none[b-217wvfela2] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.no-data[b-217wvfela2] {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.8125rem;
}

/* Status Badges */
.status-badge[b-217wvfela2] {
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.status-active[b-217wvfela2] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-inactive[b-217wvfela2] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #6b7280;
}

.status-suspended[b-217wvfela2] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.status-pending[b-217wvfela2] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-default[b-217wvfela2] {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Action Buttons */
.actions-cell[b-217wvfela2] {
    text-align: center;
    min-width: 120px;
}

.table-actions[b-217wvfela2] {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
}

.btn-action[b-217wvfela2] {
    padding: 0.5rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

    .btn-action:hover[b-217wvfela2] {
        transform: translateY(-1px);
    }

    .btn-action.view-btn[b-217wvfela2] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #059669;
        border: 1px solid #6ee7b7;
    }

        .btn-action.view-btn:hover[b-217wvfela2] {
            background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

    .btn-action.edit-btn[b-217wvfela2] {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1e40af;
        border: 1px solid #93c5fd;
    }

        .btn-action.edit-btn:hover[b-217wvfela2] {
            background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

    .btn-action.delete-btn[b-217wvfela2] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #dc2626;
        border: 1px solid #ef4444;
    }

        .btn-action.delete-btn:hover[b-217wvfela2] {
            background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
        }

/* Grid View */
.companies-grid[b-217wvfela2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.company-card[b-217wvfela2] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .company-card:hover[b-217wvfela2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

.company-card-header[b-217wvfela2] {
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #e2e8f0;
}

    .company-card-header.status-active[b-217wvfela2] {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    }

    .company-card-header.status-inactive[b-217wvfela2] {
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    }

    .company-card-header.status-suspended[b-217wvfela2] {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    }

    .company-card-header.status-pending[b-217wvfela2] {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    }

.card-title-section[b-217wvfela2] {
    flex: 1;
}

.card-title[b-217wvfela2] {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preferred-star[b-217wvfela2] {
    color: #f59e0b;
    font-size: 1rem;
}

.card-status[b-217wvfela2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-compliance[b-217wvfela2] {
    display: flex;
    align-items: center;
}

.compliant-icon[b-217wvfela2] {
    color: #10b981;
    font-size: 1.5rem;
}

.non-compliant-icon[b-217wvfela2] {
    color: #ef4444;
    font-size: 1.5rem;
}

.company-card-body[b-217wvfela2] {
    padding: 1.25rem;
}

.card-detail-row[b-217wvfela2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

    .card-detail-row:last-child[b-217wvfela2] {
        border-bottom: none;
    }

.detail-label[b-217wvfela2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .detail-label i[b-217wvfela2] {
        font-size: 0.875rem;
        color: #94a3b8;
    }

.detail-value[b-217wvfela2] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    text-align: right;
}

    .detail-value.performance[b-217wvfela2] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

.mini-badge[b-217wvfela2] {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    font-family: monospace;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    margin-left: 0.25rem;
}

.company-card-footer[b-217wvfela2] {
    padding: 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 0.5rem;
}

.btn-card[b-217wvfela2] {
    flex: 1;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    color: #475569;
}

    .btn-card:hover[b-217wvfela2] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

    .btn-card.primary[b-217wvfela2] {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        color: white;
        border: none;
    }

        .btn-card.primary:hover[b-217wvfela2] {
            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

    .btn-card.danger[b-217wvfela2] {
        color: #dc2626;
        border-color: #fee2e2;
    }

        .btn-card.danger:hover[b-217wvfela2] {
            background: #fee2e2;
            border-color: #fecaca;
        }

/* Responsive Design */
@media (max-width: 1200px) {
    .companies-container[b-217wvfela2] {
        padding: 0.75rem 1rem;
    }

    .summary-cards[b-217wvfela2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .companies-container[b-217wvfela2] {
        padding: 0.75rem 0.5rem;
    }

    .page-header[b-217wvfela2] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .actions-bar[b-217wvfela2] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-title[b-217wvfela2] {
        font-size: 1.5rem;
        text-align: center;
    }

    .page-subtitle[b-217wvfela2] {
        text-align: center;
    }

    .summary-cards[b-217wvfela2] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filters-container[b-217wvfela2] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filter-actions[b-217wvfela2] {
        justify-content: center;
    }

    .companies-table[b-217wvfela2] {
        font-size: 0.75rem;
        min-width: 900px;
    }

        .companies-table th[b-217wvfela2],
        .companies-table td[b-217wvfela2] {
            padding: 0.5rem 0.375rem;
        }

    .companies-grid[b-217wvfela2] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-header-with-actions[b-217wvfela2] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .view-toggle[b-217wvfela2] {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .actions-bar[b-217wvfela2] {
        flex-direction: column;
        width: 100%;
    }

    .btn[b-217wvfela2] {
        width: 100%;
        justify-content: center;
    }

    .company-card-footer[b-217wvfela2] {
        flex-direction: column;
    }
}
/* _content/webQT/Features/Sales/TD/TruckComp/TruckCompanyModal.razor.rz.scp.css */
/* Truck Company Modal Styles */

/* Modal Overlay */
.modal-overlay[b-l76339x24k] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    animation: fadeIn-b-l76339x24k 0.3s ease-out !important;
    pointer-events: auto !important;
}

@keyframes fadeIn-b-l76339x24k {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Dialog */
.modal-dialog[b-l76339x24k] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideIn-b-l76339x24k 0.3s ease-out;
    pointer-events: auto;
    position: relative;
}

.large-modal[b-l76339x24k] {
    max-width: 1000px;
}

@keyframes slideIn-b-l76339x24k {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Modal Header */
.modal-header[b-l76339x24k] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 1.5rem;
    border-bottom: 1px solid #1e40af;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-l76339x24k] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .modal-title i[b-l76339x24k] {
        font-size: 1.5rem;
        color: #dbeafe;
    }

.btn-close[b-l76339x24k] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
    font-size: 1.25rem;
}

    .btn-close:hover[b-l76339x24k] {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }

/* Modal Body */
.modal-body[b-l76339x24k] {
    padding: 2rem;
    max-height: calc(90vh - 160px);
    overflow-y: auto;
}

/* Form Structure */
.company-form[b-l76339x24k] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Form Sections */
.form-section[b-l76339x24k] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px dashed #e2e8f0;
}

    .form-section:last-child[b-l76339x24k] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.section-title[b-l76339x24k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}

    .section-title i[b-l76339x24k] {
        font-size: 1.25rem;
        color: #3b82f6;
    }

/* Form Grid */
.form-grid[b-l76339x24k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.form-group[b-l76339x24k] {
    display: flex;
    flex-direction: column;
}

    .form-group.full-width[b-l76339x24k] {
        grid-column: 1 / -1;
    }

    .form-group label[b-l76339x24k] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

/* Form Inputs */
.form-input[b-l76339x24k] {
    padding: 0.875rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    background-color: white;
    transition: all 0.2s ease;
    color: #1e293b;
    font-weight: 500;
}

    .form-input:focus[b-l76339x24k] {
        border-color: #3b82f6;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background-color: #f0f9ff;
        transform: translateY(-1px);
    }

    .form-input:hover[b-l76339x24k] {
        border-color: #3b82f6;
    }

    .form-input[b-l76339x24k]::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

/* Checkbox Groups */
.checkbox-group[b-l76339x24k] {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
}

.capabilities-grid[b-l76339x24k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.checkbox-label[b-l76339x24k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .checkbox-label:hover[b-l76339x24k] {
        border-color: #3b82f6;
        background: #f8fafc;
        transform: translateY(-1px);
    }

.form-checkbox[b-l76339x24k] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.checkbox-text[b-l76339x24k] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .checkbox-text i[b-l76339x24k] {
        font-size: 1rem;
        color: #64748b;
    }

.checkbox-label:has(.form-checkbox:checked)[b-l76339x24k] {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

    .checkbox-label:has(.form-checkbox:checked) .checkbox-text[b-l76339x24k] {
        color: #1e40af;
    }

        .checkbox-label:has(.form-checkbox:checked) .checkbox-text i[b-l76339x24k] {
            color: #3b82f6;
        }

/* Validation */
.validation-errors[b-l76339x24k] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

    .validation-errors ul[b-l76339x24k] {
        margin: 0;
        padding-left: 1.5rem;
    }

    .validation-errors li[b-l76339x24k] {
        margin-bottom: 0.25rem;
    }

.validation-message[b-l76339x24k] {
    color: #dc3545;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Modal Footer */
.modal-footer[b-l76339x24k] {
    background: #f8fafc;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
}

/* Buttons */
.btn[b-l76339x24k] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .btn[b-l76339x24k]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover[b-l76339x24k]::before {
        left: 100%;
    }

    .btn:disabled[b-l76339x24k] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

        .btn:disabled[b-l76339x24k]::before {
            display: none;
        }

.primary-btn[b-l76339x24k] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .primary-btn:hover:not(:disabled)[b-l76339x24k] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.secondary-btn[b-l76339x24k] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-l76339x24k] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

/* Scrollbar Styling */
.modal-body[b-l76339x24k]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-l76339x24k]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.modal-body[b-l76339x24k]::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 4px;
}

    .modal-body[b-l76339x24k]::-webkit-scrollbar-thumb:hover {
        background: #1e40af;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .modal-dialog[b-l76339x24k] {
        max-width: calc(100% - 2rem);
    }

    .form-grid[b-l76339x24k] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .modal-dialog[b-l76339x24k] {
        max-width: calc(100% - 1rem);
        margin: 0.5rem;
    }

    .modal-body[b-l76339x24k] {
        padding: 1.5rem;
        max-height: calc(90vh - 140px);
    }

    .form-grid[b-l76339x24k] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .capabilities-grid[b-l76339x24k] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .form-section[b-l76339x24k] {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .modal-footer[b-l76339x24k] {
        padding: 1rem;
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .btn[b-l76339x24k] {
        width: 100%;
        justify-content: center;
    }

    .modal-header[b-l76339x24k] {
        padding: 1rem;
    }

    .modal-title[b-l76339x24k] {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .modal-dialog[b-l76339x24k] {
        border-radius: 12px;
    }

    .modal-body[b-l76339x24k] {
        padding: 1rem;
    }

    .form-input[b-l76339x24k] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .section-title[b-l76339x24k] {
        font-size: 0.9rem;
    }

    .checkbox-label[b-l76339x24k] {
        padding: 0.625rem;
    }

    .checkbox-text[b-l76339x24k] {
        font-size: 0.8rem;
    }
}
/* _content/webQT/Features/Sales/TransferOd/TOEdit.razor.rz.scp.css */
/* ============================================
   Transfer Order Edit - Enhanced Design
   Matching Project Design Language
   ============================================ */

/* === LAYOUT === */
.form[b-8zqictjat5] {
    display: grid;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.headerbar[b-8zqictjat5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

    .headerbar h2[b-8zqictjat5] {
        margin: 0;
        font-size: 1.875rem;
        font-weight: 700;
        color: #1e293b;
        letter-spacing: -0.5px;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .headerbar h2[b-8zqictjat5]::before {
            content: '📋';
            font-size: 1.75rem;
        }

/* === SECTIONS === */
.section[b-8zqictjat5] {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

    .section[b-8zqictjat5]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, #3b82f6, #1e40af, #3b82f6);
        background-size: 200% 100%;
        animation: gradient-shift-b-8zqictjat5 3s ease infinite;
    }

    .section:hover[b-8zqictjat5] {
        border-color: #cbd5e1;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    }

    .section > h3[b-8zqictjat5] {
        margin: 0 0 2rem 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
        letter-spacing: -0.3px;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .section > h3[b-8zqictjat5]::before {
            content: '▸';
            color: #3b82f6;
            font-size: 1.5rem;
        }

@keyframes gradient-shift-b-8zqictjat5 {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* === FORM GRID === */
.grid-2[b-8zqictjat5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.5rem;
}

/* === FIELDS === */
.field[b-8zqictjat5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field-wide[b-8zqictjat5] {
    grid-column: 1 / -1;
}

label[b-8zqictjat5] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    label[b-8zqictjat5]::before {
        content: '▸';
        color: #3b82f6;
        font-size: 0.875rem;
    }

.req[b-8zqictjat5] {
    color: #ef4444;
    margin-left: 0.25rem;
    font-weight: 700;
    font-size: 1rem;
}

/* === INPUTS === */
.input[b-8zqictjat5] {
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    color: #1e293b;
    background: white;
    transition: all 0.3s ease;
    font-family: inherit;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .input:hover[b-8zqictjat5] {
        border-color: #3b82f6;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
        transform: translateY(-1px);
    }

    .input:focus[b-8zqictjat5] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 24px rgba(59, 130, 246, 0.2);
        background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
        transform: translateY(-2px);
    }

    .input:disabled[b-8zqictjat5] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        color: #94a3b8;
        cursor: not-allowed;
        border-color: #e2e8f0;
        transform: none;
    }

    .input.xs[b-8zqictjat5] {
        width: 100px;
        min-width: 100px;
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
    }

    .input.sm[b-8zqictjat5] {
        width: 180px;
        min-width: 180px;
    }

    .input.md[b-8zqictjat5] {
        width: 260px;
        min-width: 260px;
    }

    .input[b-8zqictjat5]::placeholder {
        color: #94a3b8;
        font-style: italic;
    }

/* Select specific styles */
select.input[b-8zqictjat5] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 3rem;
    cursor: pointer;
}

    select.input:hover[b-8zqictjat5] {
       
    }

/* Textarea specific */
textarea.input[b-8zqictjat5] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.7;
    font-family: inherit;
}

/* Shipped Qty Input */
.shipped-qty-input[b-8zqictjat5] {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: #1e293b;
    background: white;
    transition: all 0.3s ease;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-weight: 600;
    text-align: right;
    width: 120px;
}

    .shipped-qty-input:hover[b-8zqictjat5] {
        border-color: #3b82f6;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    }

    .shipped-qty-input:focus[b-8zqictjat5] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    }

/* === VALIDATION === */
.input.invalid[b-8zqictjat5],
.input:invalid[b-8zqictjat5] {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

    .input.invalid:focus[b-8zqictjat5],
    .input:invalid:focus[b-8zqictjat5] {
        border-color: #ef4444;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
    }

/* === DETAILS TABLE === */
.details-toolbar[b-8zqictjat5] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.details[b-8zqictjat5] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: visible; /* ← FIXED */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

    .details th[b-8zqictjat5],
    .details td[b-8zqictjat5] {
        padding: 1rem 1.25rem;
        text-align: left;
        overflow: visible;
    }

    .details thead th[b-8zqictjat5] {
        background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
        font-weight: 700;
        color: #ffffff;
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: none;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        .details thead th:first-child[b-8zqictjat5] {
            border-top-left-radius: 10px;
        }

        .details thead th:last-child[b-8zqictjat5] {
            border-top-right-radius: 10px;
        }

    .details tbody tr[b-8zqictjat5] {
        transition: all 0.2s ease;
        border-bottom: 1px solid #f1f5f9;
        background: white;
        overflow: visible;
    }

        .details tbody tr:last-child[b-8zqictjat5] {
            border-bottom: none;
        }

        .details tbody tr:hover[b-8zqictjat5] {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

    .details .empty[b-8zqictjat5] {
        text-align: center;
        color: #64748b;
        padding: 4rem 1rem;
        font-style: italic;
        font-size: 1rem;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

        .details .empty[b-8zqictjat5]::before {
            content: '📦';
            display: block;
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

.row-actions[b-8zqictjat5] {
    text-align: right;
    white-space: nowrap;
    padding-right: 0.75rem !important;
}

/* === ACTIONS === */
.actions[b-8zqictjat5] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
}

.bottom-actions[b-8zqictjat5] {
    margin-top: 2rem;
    padding: 2.5rem 0 0;
    border-top: 2px solid #e2e8f0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* === BUTTONS === */
.btn[b-8zqictjat5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .btn[b-8zqictjat5]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s;
    }

    .btn:hover[b-8zqictjat5]::before {
        left: 100%;
    }

    .btn:hover[b-8zqictjat5] {
        transform: translateY(-3px);
    }

    .btn:active[b-8zqictjat5] {
        transform: translateY(-1px);
    }

    .btn:disabled[b-8zqictjat5] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

        .btn:disabled[b-8zqictjat5]::before {
            display: none;
        }

    .btn:focus-visible[b-8zqictjat5] {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    /* Primary button */
    .btn.primary[b-8zqictjat5] {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        color: #ffffff;
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

        .btn.primary:hover[b-8zqictjat5] {
            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
            box-shadow: 0 12px 36px rgba(59, 130, 246, 0.5);
        }

        .btn.primary:active[b-8zqictjat5] {
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
        }

    /* Secondary/default button */
    .btn:not(.primary):not(.danger)[b-8zqictjat5] {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        color: #475569;
        border: 2px solid #cbd5e1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

        .btn:not(.primary):not(.danger):hover[b-8zqictjat5] {
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
            color: #334155;
            border-color: #94a3b8;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

    /* Danger button */
    .btn.danger[b-8zqictjat5] {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    }

        .btn.danger:hover[b-8zqictjat5] {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            box-shadow: 0 12px 36px rgba(239, 68, 68, 0.5);
        }

/* === MESSAGES === */
.error[b-8zqictjat5] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #ef4444;
    border-radius: 12px;
    color: #991b1b;
    font-size: 0.9375rem;
    line-height: 1.6;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
    animation: shake-b-8zqictjat5 0.5s ease-in-out;
}

    .error[b-8zqictjat5]::before {
        content: "⚠";
        font-size: 1.5rem;
        flex-shrink: 0;
    }

@keyframes shake-b-8zqictjat5 {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

.loading[b-8zqictjat5] {
    padding: 4rem;
    text-align: center;
    color: #64748b;
    font-size: 1.125rem;
    font-weight: 600;
}

    .loading[b-8zqictjat5]::after {
        content: "";
        display: inline-block;
        width: 2rem;
        height: 2rem;
        margin-left: 1rem;
        border: 3px solid #e2e8f0;
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: spin-b-8zqictjat5 0.8s linear infinite;
    }

@keyframes spin-b-8zqictjat5 {
    to {
        transform: rotate(360deg);
    }
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .form[b-8zqictjat5] {
        max-width: 100%;
        padding: 1.5rem;
    }

    .section[b-8zqictjat5] {
        padding: 2rem;
    }

    .grid-2[b-8zqictjat5] {
        gap: 1.75rem 2rem;
    }

    .headerbar[b-8zqictjat5] {
        padding: 1.25rem 1.5rem;
    }

        .headerbar h2[b-8zqictjat5] {
            font-size: 1.5rem;
        }
}

@media (max-width: 768px) {
    .form[b-8zqictjat5] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .grid-2[b-8zqictjat5] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .headerbar[b-8zqictjat5] {
        flex-direction: column;
        gap: 1.25rem;
        align-items: stretch;
        padding: 1.25rem;
    }

        .headerbar h2[b-8zqictjat5] {
            font-size: 1.375rem;
            text-align: center;
        }

    .section[b-8zqictjat5] {
        padding: 1.5rem;
    }

        .section > h3[b-8zqictjat5] {
            font-size: 1.125rem;
            margin-bottom: 1.5rem;
        }

    .details[b-8zqictjat5] {
        font-size: 0.8125rem;
        display: block;
        overflow-x: auto;
    }

        .details th[b-8zqictjat5],
        .details td[b-8zqictjat5] {
            padding: 0.75rem 1rem;
        }

    .actions[b-8zqictjat5] {
        flex-direction: column;
        gap: 0.75rem;
    }

        .actions .btn[b-8zqictjat5] {
            width: 100%;
        }

    .input.xs[b-8zqictjat5],
    .input.sm[b-8zqictjat5],
    .input.md[b-8zqictjat5] {
        width: 100%;
        min-width: auto;
    }

    .shipped-qty-input[b-8zqictjat5] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .form[b-8zqictjat5] {
        padding: 0.75rem;
    }

    .section[b-8zqictjat5] {
        padding: 1.25rem;
        border-radius: 12px;
    }

    .headerbar[b-8zqictjat5] {
        padding: 1rem;
        border-radius: 12px;
    }

        .headerbar h2[b-8zqictjat5] {
            font-size: 1.25rem;
        }

    .btn[b-8zqictjat5] {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    *[b-8zqictjat5],
    *[b-8zqictjat5]::before,
    *[b-8zqictjat5]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === PRINT === */
@media print {
    .actions[b-8zqictjat5],
    .details-toolbar[b-8zqictjat5],
    .btn[b-8zqictjat5] {
        display: none !important;
    }

    .section[b-8zqictjat5] {
        box-shadow: none;
        page-break-inside: avoid;
        border: 1px solid #e2e8f0;
    }

    .form[b-8zqictjat5] {
        gap: 1rem;
        background: white;
    }

    .section[b-8zqictjat5]::before {
        display: none;
    }
}

/* === ENHANCED VISUAL FEEDBACK === */
.field:focus-within label[b-8zqictjat5] {
    color: #3b82f6;
}

    .field:focus-within label[b-8zqictjat5]::before {
        animation: pulse-b-8zqictjat5 1s ease infinite;
    }

@keyframes pulse-b-8zqictjat5 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Table row animations */
.details tbody tr[b-8zqictjat5] {
    animation: fadeIn-b-8zqictjat5 0.3s ease-out;
}

@keyframes fadeIn-b-8zqictjat5 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom scrollbar for table */
.details[b-8zqictjat5]::-webkit-scrollbar {
    height: 8px;
}

.details[b-8zqictjat5]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.details[b-8zqictjat5]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    border-radius: 4px;
}

    .details[b-8zqictjat5]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    }
/* _content/webQT/Features/Sales/TransferOd/TOManagement.razor.rz.scp.css */
/* Releases Management Container */
.releases-container[b-ckutcl4aa8] {
    padding: 1rem 2rem;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    background-color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Page Header */
.page-header[b-ckutcl4aa8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.page-title[b-ckutcl4aa8] {
    margin: 0;
    color: #1e293b;
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.actions-bar[b-ckutcl4aa8] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Enhanced Buttons */
.btn[b-ckutcl4aa8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

    .btn[b-ckutcl4aa8]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover[b-ckutcl4aa8]::before {
        left: 100%;
    }

    .btn:disabled[b-ckutcl4aa8] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .btn:disabled[b-ckutcl4aa8]::before {
            display: none;
        }

.refresh-btn[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

    .refresh-btn:hover:not(:disabled)[b-ckutcl4aa8] {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
    }

.primary-btn[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

    .primary-btn:hover:not(:disabled)[b-ckutcl4aa8] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

.secondary-btn[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-ckutcl4aa8] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

/* Spinning animation */
.spinning[b-ckutcl4aa8] {
    animation: spin-b-ckutcl4aa8 1s linear infinite;
}

@keyframes spin-b-ckutcl4aa8 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading */
.loading-container[b-ckutcl4aa8] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.loading-spinner[b-ckutcl4aa8] {
    text-align: center;
}

.spinner[b-ckutcl4aa8] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-ckutcl4aa8 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-text[b-ckutcl4aa8] {
    color: #6c757d;
    margin: 0;
    font-size: 1rem;
}

/* Empty State */
.empty-state[b-ckutcl4aa8] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .empty-state i[b-ckutcl4aa8] {
        font-size: 4rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .empty-state h3[b-ckutcl4aa8] {
        color: #475569;
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .empty-state p[b-ckutcl4aa8] {
        color: #64748b;
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.5;
    }

/* Summary Cards */
.summary-cards[b-ckutcl4aa8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card[b-ckutcl4aa8] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

    .summary-card:hover[b-ckutcl4aa8] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

.card-icon[b-ckutcl4aa8] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    font-size: 1.5rem;
}

.card-content h4[b-ckutcl4aa8] {
    margin: 0 0 0.5rem 0;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-number[b-ckutcl4aa8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
}

/* Enhanced Card Styles */
.info-card[b-ckutcl4aa8] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
}

    .info-card:hover[b-ckutcl4aa8] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

.card-header[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .card-header h5[b-ckutcl4aa8] {
        margin: 0;
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
    }

.card-header-with-actions[b-ckutcl4aa8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-content[b-ckutcl4aa8] {
    padding: 1.5rem;
}

/* Filters */
.filters-container[b-ckutcl4aa8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    align-items: end;
}

.filter-group[b-ckutcl4aa8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .filter-group label[b-ckutcl4aa8] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.form-select[b-ckutcl4aa8],
.form-input[b-ckutcl4aa8] {
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.875rem;
    background-color: white;
    transition: all 0.2s ease;
    color: #1e293b;
}

    .form-select:focus[b-ckutcl4aa8],
    .form-input:focus[b-ckutcl4aa8] {
        border-color: #3b82f6;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background-color: #f8fafc;
    }

    .form-select:hover[b-ckutcl4aa8],
    .form-input:hover[b-ckutcl4aa8] {
        border-color: #3b82f6;
    }

.filter-actions[b-ckutcl4aa8] {
    display: flex;
    align-items: flex-end;
}

/* Table Actions */
.table-actions[b-ckutcl4aa8] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.sort-controls[b-ckutcl4aa8] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

    .sort-controls label[b-ckutcl4aa8] {
        font-size: 0.75rem;
        font-weight: 500;
        color: #64748b;
        white-space: nowrap;
    }

    .sort-controls .form-select[b-ckutcl4aa8] {
        min-width: 120px;
        padding: 0.5rem;
        font-size: 0.8rem;
    }

.btn-sort[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

    .btn-sort:hover[b-ckutcl4aa8] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        transform: translateY(-1px);
    }

/* Table */
.table-responsive[b-ckutcl4aa8] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.releases-table[b-ckutcl4aa8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 900px;
}

    .releases-table thead[b-ckutcl4aa8] {
        background-color: #f8fafc;
    }

    .releases-table th[b-ckutcl4aa8] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #475569;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
    }

        .releases-table th.sortable[b-ckutcl4aa8] {
            cursor: pointer;
            user-select: none;
            position: relative;
            transition: all 0.2s ease;
        }

            .releases-table th.sortable:hover[b-ckutcl4aa8] {
                background-color: #e2e8f0;
                color: #1e293b;
            }

.sort-icon[b-ckutcl4aa8] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.releases-table td[b-ckutcl4aa8] {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.table-row[b-ckutcl4aa8] {
    transition: all 0.15s ease;
}

    .table-row:hover[b-ckutcl4aa8] {
        background-color: #f8fafc;
    }

/* Table Cell Styles */
.id-cell .id-badge[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}

.date-container[b-ckutcl4aa8] {
    display: flex;
    flex-direction: column;
}

.date-text[b-ckutcl4aa8] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}

.date-subtext[b-ckutcl4aa8] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.125rem;
}

.no-date[b-ckutcl4aa8] {
    color: #64748b;
    font-style: italic;
    font-size: 0.875rem;
}

.warehouse-text[b-ckutcl4aa8] {
    font-weight: 500;
    color: #1e293b;
    font-family: monospace;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    font-size: 0.8rem;
}

/* Status Badges */
.status-badge[b-ckutcl4aa8] {
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    transition: all 0.2s ease;
}

.status-completed[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-in-progress[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-ready[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border: 1px solid #3b82f6;
}

.status-draft[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #6b7280;
}

.status-cancelled[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.status-default[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Pickups Summary */
.pickups-summary[b-ckutcl4aa8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pickups-count[b-ckutcl4aa8] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}

.pickups-status[b-ckutcl4aa8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.mini-badge[b-ckutcl4aa8] {
    padding: 0.125rem 0.375rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

    .mini-badge.delivered[b-ckutcl4aa8] {
        background: rgba(16, 185, 129, 0.1);
        color: #065f46;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .mini-badge.in-transit[b-ckutcl4aa8] {
        background: rgba(245, 158, 11, 0.1);
        color: #92400e;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .mini-badge.scheduled[b-ckutcl4aa8] {
        background: rgba(59, 130, 246, 0.1);
        color: #1e3a8a;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

/* Action Buttons */
.actions-cell[b-ckutcl4aa8] {
    text-align: center;
}

.action-buttons[b-ckutcl4aa8] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-btn[b-ckutcl4aa8] {
    padding: 0.5rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}

.view-btn[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

    .view-btn:hover[b-ckutcl4aa8] {
        background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    }

.edit-btn[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

    .edit-btn:hover[b-ckutcl4aa8] {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }

.duplicate-btn[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

    .duplicate-btn:hover[b-ckutcl4aa8] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

.pdf-btn[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

    .pdf-btn:hover[b-ckutcl4aa8] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

.delete-btn[b-ckutcl4aa8] {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(168, 85, 247, 0.3);
}

    .delete-btn:hover[b-ckutcl4aa8] {
        background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .releases-container[b-ckutcl4aa8] {
        padding: 0.75rem 1rem;
    }

    .filters-container[b-ckutcl4aa8] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .releases-container[b-ckutcl4aa8] {
        padding: 0.75rem 0.5rem;
    }

    .page-header[b-ckutcl4aa8] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .actions-bar[b-ckutcl4aa8] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-title[b-ckutcl4aa8] {
        font-size: 1.5rem;
        text-align: center;
    }

    .summary-cards[b-ckutcl4aa8] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-header-with-actions[b-ckutcl4aa8] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .table-actions[b-ckutcl4aa8] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .filters-container[b-ckutcl4aa8] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .filter-actions[b-ckutcl4aa8] {
        justify-content: center;
    }

    .releases-table[b-ckutcl4aa8] {
        font-size: 0.8rem;
        min-width: 700px;
    }

        .releases-table th[b-ckutcl4aa8],
        .releases-table td[b-ckutcl4aa8] {
            padding: 0.75rem 0.5rem;
        }

    .action-buttons[b-ckutcl4aa8] {
        flex-direction: row;
        gap: 0.25rem;
    }

    .action-btn[b-ckutcl4aa8] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .pickups-status[b-ckutcl4aa8] {
        flex-direction: column;
        gap: 0.125rem;
    }

    .mini-badge[b-ckutcl4aa8] {
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
    }
}

@media (max-width: 576px) {
    .releases-container[b-ckutcl4aa8] {
        padding: 0.5rem 0.25rem;
    }

    .releases-table[b-ckutcl4aa8] {
        font-size: 0.75rem;
        min-width: 600px;
    }

        .releases-table th[b-ckutcl4aa8],
        .releases-table td[b-ckutcl4aa8] {
            padding: 0.5rem 0.25rem;
        }

    .action-btn[b-ckutcl4aa8] {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .card-number[b-ckutcl4aa8] {
        font-size: 1.5rem;
    }

    .page-title[b-ckutcl4aa8] {
        font-size: 1.25rem;
    }

    .status-badge[b-ckutcl4aa8] {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }

    .id-badge[b-ckutcl4aa8] {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }

    .warehouse-text[b-ckutcl4aa8] {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    .pickups-count[b-ckutcl4aa8] {
        font-size: 0.8rem;
    }

    .date-text[b-ckutcl4aa8],
    .date-subtext[b-ckutcl4aa8] {
        font-size: 0.75rem;
    }
}
/* _content/webQT/Features/Sales/TransferOd/TOView.razor.rz.scp.css */
/* Transfer Order View Styles */

/* Main Container */
.to-view-container[b-sixjrcd8bz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    background: #f8fafc;
}

/* Page Header */
.page-header[b-sixjrcd8bz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.header-content[b-sixjrcd8bz] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.page-title[b-sixjrcd8bz] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

/* Status Badge */
.status-badge[b-sixjrcd8bz] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-pending[b-sixjrcd8bz] {
    background: rgba(251, 191, 36, 0.2);
    color: #92400e;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.status-approved[b-sixjrcd8bz] {
    background: rgba(59, 130, 246, 0.2);
    color: #1e40af;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.status-in-transit[b-sixjrcd8bz],
.status-packed[b-sixjrcd8bz] {
    background: rgba(16, 185, 129, 0.2);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.status-delivered[b-sixjrcd8bz],
.status-completed[b-sixjrcd8bz] {
    background: rgba(34, 197, 94, 0.2);
    color: #14532d;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.status-cancelled[b-sixjrcd8bz] {
    background: rgba(239, 68, 68, 0.2);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.status-delayed[b-sixjrcd8bz] {
    background: rgba(249, 115, 22, 0.2);
    color: #9a3412;
    border: 1px solid rgba(249, 115, 22, 0.4);
}

/* Actions Bar */
.actions-bar[b-sixjrcd8bz] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Button Styles */
.btn[b-sixjrcd8bz] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

    .btn[b-sixjrcd8bz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s;
    }

    .btn:hover[b-sixjrcd8bz]::before {
        left: 100%;
    }

.primary-btn[b-sixjrcd8bz] {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

    .primary-btn:hover[b-sixjrcd8bz] {
        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
    }

.secondary-btn[b-sixjrcd8bz] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 2px solid #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .secondary-btn:hover[b-sixjrcd8bz] {
        background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
        color: #334155;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

.btn .icon[b-sixjrcd8bz] {
    font-size: 1rem;
}

/* Transfer Order Summary */
.to-summary[b-sixjrcd8bz] {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-section[b-sixjrcd8bz] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.section-title[b-sixjrcd8bz] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Detail Grid */
.detail-grid[b-sixjrcd8bz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.detail-item[b-sixjrcd8bz] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .detail-item:hover[b-sixjrcd8bz] {
        border-color: #3b82f6;
        box-shadow: 0 2px 12px rgba(59, 130, 246, 0.1);
        transform: translateY(-2px);
    }

.detail-label[b-sixjrcd8bz] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-sixjrcd8bz] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.priority-high[b-sixjrcd8bz] {
    color: #dc2626;
}

.priority-medium[b-sixjrcd8bz] {
    color: #f59e0b;
}

.priority-low[b-sixjrcd8bz] {
    color: #10b981;
}

/* Location Grid */
.location-grid[b-sixjrcd8bz] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
}

.location-card[b-sixjrcd8bz] {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 10px;
    padding: 1.25rem;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

    .location-card:hover[b-sixjrcd8bz] {
        border-color: #3b82f6;
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
        transform: translateY(-3px);
    }

.location-from[b-sixjrcd8bz] {
    border-left: 4px solid #3b82f6;
}

.location-to[b-sixjrcd8bz] {
    border-left: 4px solid #10b981;
}

.location-header[b-sixjrcd8bz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.location-icon[b-sixjrcd8bz] {
    font-size: 1.5rem;
}

.location-header h4[b-sixjrcd8bz] {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.location-details[b-sixjrcd8bz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.location-name[b-sixjrcd8bz] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.location-address[b-sixjrcd8bz],
.location-contact[b-sixjrcd8bz] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.transfer-arrow[b-sixjrcd8bz] {
    font-size: 2rem;
    color: #3b82f6;
    font-weight: bold;
    text-align: center;
}

/* Items Section */
.items-section[b-sixjrcd8bz] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.section-header[b-sixjrcd8bz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.items-summary[b-sixjrcd8bz] {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
}

.items-count[b-sixjrcd8bz],
.items-total[b-sixjrcd8bz] {
    font-weight: 600;
    color: #475569;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 6px;
    border: 1px solid #cbd5e1;
}

/* Items Grid */
.items-grid[b-sixjrcd8bz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 1.5rem;
}

.item-card[b-sixjrcd8bz] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .item-card:hover[b-sixjrcd8bz] {
        border-color: #3b82f6;
        box-shadow: 0 6px 24px rgba(59, 130, 246, 0.15);
        transform: translateY(-4px);
    }

.item-header[b-sixjrcd8bz] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 2px solid #e2e8f0;
}

.item-title h4[b-sixjrcd8bz] {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.item-sku[b-sixjrcd8bz] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.item-status[b-sixjrcd8bz] {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.item-details[b-sixjrcd8bz] {
    padding: 1rem;
}

.item-detail-grid[b-sixjrcd8bz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.item-stat[b-sixjrcd8bz] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .item-stat:hover[b-sixjrcd8bz] {
        border-color: #3b82f6;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    }

.stat-label[b-sixjrcd8bz] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-value[b-sixjrcd8bz] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

.item-notes[b-sixjrcd8bz] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.75rem;
}

.notes-label[b-sixjrcd8bz] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #92400e;
    display: block;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notes-text[b-sixjrcd8bz] {
    font-size: 0.875rem;
    color: #78350f;
    margin: 0;
    line-height: 1.5;
}

/* Shipping Section */
.shipping-section[b-sixjrcd8bz] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.shipping-notes[b-sixjrcd8bz] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #3b82f6;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
}

    .shipping-notes .notes-label[b-sixjrcd8bz] {
        color: #1e40af;
    }

    .shipping-notes .notes-text[b-sixjrcd8bz] {
        color: #1e3a8a;
    }

/* Timeline Section */
.timeline-section[b-sixjrcd8bz] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.timeline[b-sixjrcd8bz] {
    position: relative;
    padding-left: 2rem;
}

    .timeline[b-sixjrcd8bz]::before {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, #3b82f6 0%, #e2e8f0 100%);
    }

.timeline-item[b-sixjrcd8bz] {
    position: relative;
    padding-bottom: 2rem;
}

    .timeline-item:last-child[b-sixjrcd8bz] {
        padding-bottom: 0;
    }

.timeline-marker[b-sixjrcd8bz] {
    position: absolute;
    left: -1.625rem;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    z-index: 1;
}

.timeline-content[b-sixjrcd8bz] {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .timeline-content:hover[b-sixjrcd8bz] {
        border-color: #3b82f6;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
        transform: translateX(4px);
    }

.timeline-header[b-sixjrcd8bz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.timeline-action[b-sixjrcd8bz] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.timeline-date[b-sixjrcd8bz] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.timeline-user[b-sixjrcd8bz] {
    font-size: 0.875rem;
    color: #475569;
    margin: 0 0 0.5rem 0;
    font-style: italic;
}

.timeline-notes[b-sixjrcd8bz] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .to-view-container[b-sixjrcd8bz] {
        padding: 1.5rem 1rem;
    }

    .items-grid[b-sixjrcd8bz] {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }
}

@media (max-width: 768px) {
    .to-view-container[b-sixjrcd8bz] {
        padding: 1rem 0.5rem;
    }

    .page-header[b-sixjrcd8bz] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .header-content[b-sixjrcd8bz] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .actions-bar[b-sixjrcd8bz] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-title[b-sixjrcd8bz] {
        font-size: 1.5rem;
    }

    .location-grid[b-sixjrcd8bz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .transfer-arrow[b-sixjrcd8bz] {
        transform: rotate(90deg);
    }

    .items-grid[b-sixjrcd8bz] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-sixjrcd8bz] {
        grid-template-columns: 1fr;
    }

    .item-detail-grid[b-sixjrcd8bz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-header[b-sixjrcd8bz] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .items-summary[b-sixjrcd8bz] {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .page-title[b-sixjrcd8bz] {
        font-size: 1.25rem;
    }

    .btn[b-sixjrcd8bz] {
        padding: 0.625rem 1rem;
        font-size: 0.8rem;
    }

    .item-detail-grid[b-sixjrcd8bz] {
        grid-template-columns: 1fr;
    }
}