/* _content/HowardWebApp/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-impyvhvgik] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-impyvhvgik] {
    flex: 1;
}

.sidebar[b-impyvhvgik] {
    overflow-y: hidden;
}

.top-row[b-impyvhvgik] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-impyvhvgik]  a, .top-row[b-impyvhvgik]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-impyvhvgik]  a:hover, .top-row[b-impyvhvgik]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-impyvhvgik]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-impyvhvgik] {
        justify-content: space-between;
    }

    .top-row[b-impyvhvgik]  a, .top-row[b-impyvhvgik]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-impyvhvgik] {
        flex-direction: row;
    }

    .sidebar[b-impyvhvgik] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-impyvhvgik] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-impyvhvgik]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-impyvhvgik], article[b-impyvhvgik] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-impyvhvgik] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-impyvhvgik] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/HowardWebApp/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-y0hc7uhjhp] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    color: white;
    border-radius: 5px;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    display: block;
    z-index: 1000;
}

    .navbar-toggler:checked[b-y0hc7uhjhp] {
        background-color: rgba(255, 255, 255, 0.5);
    }

.top-row[b-y0hc7uhjhp] {
    min-height: 3.5rem;
    background-color: #333;
}

.navbar-brand[b-y0hc7uhjhp] {
    font-size: 1.1rem;
}

.bi[b-y0hc7uhjhp] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-y0hc7uhjhp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-y0hc7uhjhp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-y0hc7uhjhp] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-y0hc7uhjhp] {
    font-size: 1.0rem;
    padding-bottom: 0.5rem;
    font-weight: 500;
}

    .nav-item:first-of-type[b-y0hc7uhjhp] {
        padding-top: 2rem;
    }

    .nav-item:last-of-type[b-y0hc7uhjhp] {
        padding-bottom: 1rem;
    }

    .nav-item[b-y0hc7uhjhp]  .nav-link {
        color: black;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
        text-decoration: none;
        cursor: pointer;
        padding: 0 1rem;
    }

    .nav-item[b-y0hc7uhjhp]  a.active {
        background-color: #333;
        color: white;
        font-weight: 800;
    }

    .nav-item[b-y0hc7uhjhp]  .nav-link:hover {
        background-color: #777;
        color: white;
    }

/* Logout button specific styling to match nav links */
.logout-button[b-y0hc7uhjhp] {
    color: black;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    padding: 0 1rem;
    font-size: 1.0rem;
    font-weight: 500;
    text-align: left;
}

    .logout-button:hover[b-y0hc7uhjhp] {
        background-color: #777;
        color: white;
    }

/* Upload/EFM toggle button styling */
.upload-toggle-button[b-y0hc7uhjhp],
.efm-toggle-button[b-y0hc7uhjhp] {
    color: black;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 3rem;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    padding: 0 1rem;
    font-size: 1.0rem;
    font-weight: 500;
    text-align: left;
    position: relative;
}

    .upload-toggle-button:hover[b-y0hc7uhjhp],
    .efm-toggle-button:hover[b-y0hc7uhjhp] {
        background-color: #777;
        color: white;
    }

/* Expand icon styling and animation */
.expand-icon[b-y0hc7uhjhp] {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

    .expand-icon.expanded[b-y0hc7uhjhp] {
        transform: rotate(180deg);
    }

/* Admin upload section and EFM section */
.admin-upload-section[b-y0hc7uhjhp],
.efm-section[b-y0hc7uhjhp] {
    position: relative;
}

/* Upload submenu and EFM submenu styling and animations */
.upload-submenu[b-y0hc7uhjhp],
.efm-submenu[b-y0hc7uhjhp] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    background-color: #f8f9fa;
    margin-top: 0.25rem;
    border-radius: 4px;
    border-left: 3px solid #333;
}

    .upload-submenu.expanded[b-y0hc7uhjhp],
    .efm-submenu.expanded[b-y0hc7uhjhp] {
        max-height: 500px; /* Adjust based on content */
        opacity: 1;
        padding: 0.25rem 0;
    }

    .upload-submenu .nav[b-y0hc7uhjhp],
    .efm-submenu .nav[b-y0hc7uhjhp] {
        margin: 0;
        padding: 0;
    }

    .upload-submenu .nav-item[b-y0hc7uhjhp],
    .efm-submenu .nav-item[b-y0hc7uhjhp] {
        padding-bottom: 0.25rem;
        font-size: 0.9rem;
    }

        .upload-submenu .nav-item:first-of-type[b-y0hc7uhjhp],
        .efm-submenu .nav-item:first-of-type[b-y0hc7uhjhp] {
            padding-top: 0.25rem;
        }

        .upload-submenu .nav-item:last-of-type[b-y0hc7uhjhp],
        .efm-submenu .nav-item:last-of-type[b-y0hc7uhjhp] {
            padding-bottom: 0.25rem;
        }

.submenu-link[b-y0hc7uhjhp] {
    color: #555 !important;
    background: none !important;
    border: none !important;
    border-radius: 4px;
    height: 2.5rem !important;
    display: flex;
    align-items: center;
    line-height: 2.5rem;
    width: 100%;
    text-decoration: none !important; /* Remove underline */
    cursor: pointer;
    padding: 0 1rem 0 2rem !important; /* Extra left padding for indentation */
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
    outline: none !important;
    box-shadow: none !important;
}

    .submenu-link:hover[b-y0hc7uhjhp] {
        background-color: #555 !important;
        color: white !important;
        text-decoration: none !important; /* Ensure no underline on hover */
    }

    .submenu-link:active[b-y0hc7uhjhp],
    .submenu-link:focus[b-y0hc7uhjhp],
    .submenu-link:visited[b-y0hc7uhjhp] {
        text-decoration: none !important;
        outline: none !important;
        color: #555 !important;
    }

        .submenu-link:focus:hover[b-y0hc7uhjhp],
        .submenu-link:active:hover[b-y0hc7uhjhp],
        .submenu-link:visited:hover[b-y0hc7uhjhp] {
            background-color: #555 !important;
            color: white !important;
            text-decoration: none !important;
        }

    .submenu-link.active[b-y0hc7uhjhp] {
        background-color: #333 !important;
        color: white !important;
        font-weight: 600;
        text-decoration: none !important;
    }

    .submenu-link .nav-icon[b-y0hc7uhjhp] {
        width: 1rem;
        height: 1rem;
        margin-right: 0.5rem;
    }

/* Additional global link reset for submenu items */
.upload-submenu a[b-y0hc7uhjhp],
.efm-submenu a[b-y0hc7uhjhp] {
    text-decoration: none !important;
}

    .upload-submenu a:hover[b-y0hc7uhjhp],
    .upload-submenu a:focus[b-y0hc7uhjhp],
    .upload-submenu a:active[b-y0hc7uhjhp],
    .upload-submenu a:visited[b-y0hc7uhjhp],
    .efm-submenu a:hover[b-y0hc7uhjhp],
    .efm-submenu a:focus[b-y0hc7uhjhp],
    .efm-submenu a:active[b-y0hc7uhjhp],
    .efm-submenu a:visited[b-y0hc7uhjhp] {
        text-decoration: none !important;
    }

/* Icon styling for nav items */
.nav-icon[b-y0hc7uhjhp] {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.nav-scrollable[b-y0hc7uhjhp] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Bottom section to push Register/Login/Logout to the bottom */
.bottom-nav-section[b-y0hc7uhjhp] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
}

.bottom-nav-items[b-y0hc7uhjhp] {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    margin: 0;
}

.bottom-nav-link[b-y0hc7uhjhp] {
    color: black !important;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
    text-decoration: none !important;
    cursor: pointer;
    padding: 0 1rem;
    font-size: 1.0rem;
    font-weight: 500;
    text-align: left;
    margin: 0;
}

    .bottom-nav-link:hover[b-y0hc7uhjhp] {
        background-color: #777 !important;
        color: white !important;
        text-decoration: none !important;
    }

    .bottom-nav-link.active[b-y0hc7uhjhp] {
        background-color: #333 !important;
        color: white !important;
        font-weight: 800;
        text-decoration: none !important;
    }

.navbar-toggler:checked ~ .nav-scrollable[b-y0hc7uhjhp] {
    display: block;
}

.sidebar[b-y0hc7uhjhp] {
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    background-color: #fff;
    height: 100vh;
    overflow-x: hidden;
    position: sticky;
    top: 0;
    border-right: 1px solid #333;
}

.nav-scrollable[b-y0hc7uhjhp] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    padding-bottom: 8rem; /* Increased space for bottom buttons including upload menu */
}

.logo[b-y0hc7uhjhp] {
    padding: 15px;
}

@media (min-width: 641px) {
    .navbar-toggler[b-y0hc7uhjhp] {
        display: block;
    }

    .nav-scrollable[b-y0hc7uhjhp] {
        display: block; /* default collapsed */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        transition: all 0.3s ease;
    }
}
/* _content/HowardWebApp/Components/Layout/NoNavLayout.razor.rz.scp.css */
/* Base styles */
:root[b-f3kd2lat3i] {
    --primary-blue: #4169E1;
    --primary-purple: #5E54FF;
    --primary-teal: #30B397;
    --text-color: #404040;
    --light-bg: #F0F2F5;
    --white: #FFFFFF;
    --input-bg: #F5F8FF;
    --error-red: #FF4D4D;
}

.page[b-f3kd2lat3i] {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f5f6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
}

main[b-f3kd2lat3i] {
    width: 100%;
    max-width: 500px;
}

.top-row[b-f3kd2lat3i] {
    display: none; /* Hide the default top row */
}

.content[b-f3kd2lat3i] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
    text-align: left;
}

h3[b-f3kd2lat3i] {
    font-size: 24px;
    color: var(--primary-blue);
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Form styles */
form[b-f3kd2lat3i] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 25px 0;
}

.form-group[b-f3kd2lat3i] {
    position: relative;
    text-align: left;
}

    .form-group label[b-f3kd2lat3i] {
        display: flex;
        gap: 8px;
        color: var(--primary-blue);
        margin-bottom: 8px;
        font-weight: 500;
        
    }

.input-wrapper[b-f3kd2lat3i] {
    position: relative;
}

.input-icon[b-f3kd2lat3i] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-blue);
    opacity: 0.7;
}

input[b-f3kd2lat3i], .form-control[b-f3kd2lat3i] {
    width: 100%;
    padding: 12px 12px 12px 35px;
    border-radius: 8px;
    border: 2px solid var(--input-bg);
    background-color: var(--input-bg);
    font-size: 14px;
    transition: border-color 0.3s;
}

    input:focus[b-f3kd2lat3i], .form-control:focus[b-f3kd2lat3i] {
        outline: none;
        border-color: var(--primary-blue);
    }

.visibility-toggle[b-f3kd2lat3i] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
}

.password-wrapper[b-f3kd2lat3i] {
    position: relative;
    border-left: 3px solid var(--primary-teal);
}

/* Button styles */
button[type="submit"][b-f3kd2lat3i] {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* Links and additional text */
.auth-links[b-f3kd2lat3i] {
    margin-top: 20px;
    font-size: 14px;
}

    .auth-links a[b-f3kd2lat3i] {
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 500;
    }

        .auth-links a:hover[b-f3kd2lat3i] {
            text-decoration: underline;
        }

/* Validation styles */
.validation-message[b-f3kd2lat3i] {
    color: var(--error-red);
    font-size: 12px;
    text-align: left;
    margin-top: 4px;
}

.validation-summary[b-f3kd2lat3i] {
    color: var(--error-red);
    margin-bottom: 15px;
    text-align: left;
}

/* _content/HowardWebApp/Components/Pages/AddEFMs.razor.rz.scp.css */
/* AddEFMs.razor.css */
.add-efms-container[b-34aapmmxlo] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.header-section[b-34aapmmxlo] {
    margin-bottom: 2rem;
}

    .header-section h1[b-34aapmmxlo] {
        color: #2d3748;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-34aapmmxlo] {
        color: #718096;
        font-size: 1.125rem;
        margin: 0;
    }

/* Loading Animation */
.loading-container[b-34aapmmxlo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

.loading-spinner[b-34aapmmxlo] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-34aapmmxlo 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

/* Alert Styles */
.alert[b-34aapmmxlo] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid;
}

.alert-danger[b-34aapmmxlo] {
    background-color: #fed7d7;
    color: #742a2a;
    border-color: #f56565;
}

.alert-success[b-34aapmmxlo] {
    background-color: #c6f6d5;
    color: #2f855a;
    border-color: #68d391;
}

.alert-info[b-34aapmmxlo] {
    background-color: #ebf8ff;
    color: #2c5282;
    border-color: #90cdf4;
}

.alert h4[b-34aapmmxlo] {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Upload Section */
.upload-section[b-34aapmmxlo] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    padding: 2rem;
    margin-bottom: 2rem;
}

.section-title[b-34aapmmxlo] {
    color: #2d3748;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

/* Customer Selection */
.customer-selection[b-34aapmmxlo] {
    margin-bottom: 2rem;
}

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

.form-label[b-34aapmmxlo] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.form-select[b-34aapmmxlo] {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-select:focus[b-34aapmmxlo] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

/* File Upload Area */
.file-upload-area[b-34aapmmxlo] {
    position: relative;
    margin-bottom: 2rem;
}

.drop-zone[b-34aapmmxlo] {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    background: #f8fafc;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

    .drop-zone:hover[b-34aapmmxlo],
    .drop-zone.drag-over[b-34aapmmxlo] {
        border-color: #667eea;
        background: #f0f9ff;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }

    .drop-zone.drag-over[b-34aapmmxlo] {
        border-color: #4f46e5;
        background: #eef2ff;
    }

.upload-icon[b-34aapmmxlo] {
    width: 4rem;
    height: 4rem;
    color: #9ca3af;
    margin: 0 auto 1rem auto;
    transition: color 0.3s ease;
}

.drop-zone:hover .upload-icon[b-34aapmmxlo] {
    color: #667eea;
}

.upload-text[b-34aapmmxlo] {
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.upload-subtext[b-34aapmmxlo] {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.file-requirements[b-34aapmmxlo] {
    background: #f3f4f6;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
    border-left: 4px solid #667eea;
}

    .file-requirements h4[b-34aapmmxlo] {
        color: #374151;
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .file-requirements ul[b-34aapmmxlo] {
        color: #6b7280;
        font-size: 0.8rem;
        margin: 0;
        padding-left: 1.2rem;
    }

    .file-requirements li[b-34aapmmxlo] {
        margin-bottom: 0.25rem;
    }

.file-input[b-34aapmmxlo] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Selected Files */
.selected-files-section[b-34aapmmxlo] {
    margin-bottom: 2rem;
}

.files-header[b-34aapmmxlo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .files-header h3[b-34aapmmxlo] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }

.clear-files-btn[b-34aapmmxlo] {
    background: #f56565;
    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;
}

    .clear-files-btn:hover[b-34aapmmxlo] {
        background: #e53e3e;
        transform: translateY(-1px);
    }

    .clear-files-btn svg[b-34aapmmxlo] {
        width: 1rem;
        height: 1rem;
    }

.files-list[b-34aapmmxlo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.file-item[b-34aapmmxlo] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

    .file-item:hover[b-34aapmmxlo] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-color: #cbd5e0;
    }

    .file-item.uploading[b-34aapmmxlo] {
        border-color: #667eea;
        background: #f0f9ff;
    }

    .file-item.completed[b-34aapmmxlo] {
        border-color: #10b981;
        background: #ecfdf5;
    }

    .file-item.error[b-34aapmmxlo] {
        border-color: #f56565;
        background: #fef2f2;
    }

.file-info[b-34aapmmxlo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.file-icon[b-34aapmmxlo] {
    width: 2rem;
    height: 2rem;
    color: #667eea;
    flex-shrink: 0;
}

.file-details[b-34aapmmxlo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.file-name[b-34aapmmxlo] {
    color: #2d3748;
    font-weight: 600;
    font-size: 0.875rem;
}

.file-size[b-34aapmmxlo] {
    color: #6b7280;
    font-size: 0.75rem;
}

.file-status[b-34aapmmxlo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.status-icon[b-34aapmmxlo] {
    width: 1.25rem;
    height: 1.25rem;
}

.status-text[b-34aapmmxlo] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-uploading[b-34aapmmxlo] {
    color: #667eea;
}

.status-completed[b-34aapmmxlo] {
    color: #10b981;
}

.status-error[b-34aapmmxlo] {
    color: #f56565;
}

.remove-file-btn[b-34aapmmxlo] {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

    .remove-file-btn:hover[b-34aapmmxlo] {
        color: #f56565;
        background: #fef2f2;
    }

    .remove-file-btn svg[b-34aapmmxlo] {
        width: 1rem;
        height: 1rem;
    }

/* Progress Bar */
.progress-bar[b-34aapmmxlo] {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.progress-fill[b-34aapmmxlo] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

    .progress-fill.error[b-34aapmmxlo] {
        background: #f56565;
    }

    .progress-fill.completed[b-34aapmmxlo] {
        background: #10b981;
    }

/* Error Message */
.error-message[b-34aapmmxlo] {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Upload Button Section */
.upload-actions[b-34aapmmxlo] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.btn[b-34aapmmxlo] {
    padding: 0.75rem 2rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    min-width: 140px;
    justify-content: center;
}

.btn-primary[b-34aapmmxlo] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-34aapmmxlo] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-34aapmmxlo] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-secondary[b-34aapmmxlo] {
    background: #e2e8f0;
    color: #4a5568;
}

    .btn-secondary:hover:not(:disabled)[b-34aapmmxlo] {
        background: #cbd5e0;
        transform: translateY(-1px);
    }

.btn-icon[b-34aapmmxlo] {
    width: 1rem;
    height: 1rem;
}

.btn-spinner[b-34aapmmxlo] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-34aapmmxlo 1s linear infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .add-efms-container[b-34aapmmxlo] {
        padding: 1rem;
    }

    .upload-section[b-34aapmmxlo] {
        padding: 1.5rem;
    }

    .drop-zone[b-34aapmmxlo] {
        padding: 2rem 1rem;
    }

    .file-item[b-34aapmmxlo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .file-status[b-34aapmmxlo] {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }

    .upload-actions[b-34aapmmxlo] {
        flex-direction: column;
    }

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

    .files-header[b-34aapmmxlo] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .clear-files-btn[b-34aapmmxlo] {
        align-self: flex-end;
    }
}
.cfx-info[b-34aapmmxlo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.meter-name[b-34aapmmxlo] {
    color: #667eea;
    font-size: 0.75rem;
    font-weight: 600;
}

.meter-type[b-34aapmmxlo] {
    color: #6b7280;
    font-size: 0.7rem;
}
.upload-mode-toggle[b-34aapmmxlo] {
    margin: 1.5rem 0;
    display: flex;
    justify-content: center;
}

.toggle-label[b-34aapmmxlo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    user-select: none;
}

    .toggle-label:hover[b-34aapmmxlo] {
        background: #f1f5f9;
        border-color: #cbd5e0;
    }

    /* Hide default checkbox */
    .toggle-label input[type="checkbox"][b-34aapmmxlo] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

        /* Custom checkbox */
        .toggle-label input[type="checkbox"] + .toggle-text[b-34aapmmxlo]::before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 0.75rem;
            border: 2px solid #d1d5db;
            border-radius: 4px;
            background: white;
            transition: all 0.2s ease;
            position: relative;
            top: 2px;
        }

        /* Checked state */
        .toggle-label input[type="checkbox"]:checked + .toggle-text[b-34aapmmxlo]::before {
            background: #667eea;
            border-color: #667eea;
        }

        /* Checkmark */
        .toggle-label input[type="checkbox"]:checked + .toggle-text[b-34aapmmxlo]::after {
            content: '✓';
            position: absolute;
            left: 1.25rem;
            color: white;
            font-size: 12px;
            font-weight: bold;
            top: 50%;
            transform: translateY(-50%);
        }

    .toggle-label:has(input:checked)[b-34aapmmxlo] {
        background: #f0f9ff;
        border-color: #667eea;
        color: #1e40af;
    }
/* _content/HowardWebApp/Components/Pages/Admin/AddTestChart.razor.rz.scp.css */
.add-chart-container[b-ix2i1ly1ah] {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-height: 100vh;
}

.header[b-ix2i1ly1ah] {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    padding: 30px;
    text-align: center;
}

    .header h1[b-ix2i1ly1ah] {
        font-size: 2.5rem;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .header p[b-ix2i1ly1ah] {
        opacity: 0.9;
        font-size: 1.1rem;
    }

.chart-form[b-ix2i1ly1ah] {
    padding: 40px;
}

.form-section[b-ix2i1ly1ah] {
    margin-bottom: 30px;
    padding: 25px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid #4f46e5;
}

.section-title[b-ix2i1ly1ah] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon[b-ix2i1ly1ah] {
    width: 32px;
    height: 32px;
    background: #4f46e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.form-row[b-ix2i1ly1ah] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

    .form-row.single[b-ix2i1ly1ah] {
        grid-template-columns: 1fr;
    }

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

    .form-group label[b-ix2i1ly1ah] {
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
        font-size: 0.9rem;
    }

.form-control[b-ix2i1ly1ah] {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-control:focus[b-ix2i1ly1ah] {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }

.file-input[b-ix2i1ly1ah] {
    padding: 8px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .file-input:hover[b-ix2i1ly1ah] {
        border-color: #4f46e5;
        background: #f3f4f6;
    }

.image-preview[b-ix2i1ly1ah] {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

    .image-preview img[b-ix2i1ly1ah] {
        width: 100%;
        max-width: 200px;
        height: auto;
        display: block;
    }

.checkbox-label[b-ix2i1ly1ah] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    margin-top: 10px;
}

.checkmark[b-ix2i1ly1ah] {
    position: relative;
}

.measurements-subsection[b-ix2i1ly1ah] {
    margin-bottom: 25px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

    .measurements-subsection h4[b-ix2i1ly1ah] {
        color: #374151;
        margin-bottom: 15px;
        font-size: 1.1rem;
        font-weight: 600;
    }

.measurement-row[b-ix2i1ly1ah] {
    display: grid;
    grid-template-columns: 100px 100px 150px 50px;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.coord-input[b-ix2i1ly1ah],
.value-input[b-ix2i1ly1ah] {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
}

    .coord-input:focus[b-ix2i1ly1ah],
    .value-input:focus[b-ix2i1ly1ah] {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
    }

.btn[b-ix2i1ly1ah] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary[b-ix2i1ly1ah] {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-ix2i1ly1ah] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
    }

    .btn-primary:disabled[b-ix2i1ly1ah] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.btn-secondary[b-ix2i1ly1ah] {
    background: #6b7280;
    color: white;
    padding: 8px 16px;
    font-size: 0.9rem;
}

    .btn-secondary:hover[b-ix2i1ly1ah] {
        background: #4b5563;
    }

.btn-danger-sm[b-ix2i1ly1ah] {
    background: #ef4444;
    color: white;
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 4px;
}

    .btn-danger-sm:hover[b-ix2i1ly1ah] {
        background: #dc2626;
    }

.form-actions[b-ix2i1ly1ah] {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #f1f5f9;
}

.status-message[b-ix2i1ly1ah] {
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
}

    .status-message.success[b-ix2i1ly1ah] {
        background: #d1fae5;
        color: #047857;
        border: 1px solid #a7f3d0;
    }

    .status-message.error[b-ix2i1ly1ah] {
        background: #fee2e2;
        color: #dc2626;
        border: 1px solid #fca5a5;
    }

.spinner[b-ix2i1ly1ah] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-ix2i1ly1ah 1s linear infinite;
}

@keyframes spin-b-ix2i1ly1ah {
    to {
        transform: rotate(360deg);
    }
}

.validation-message[b-ix2i1ly1ah] {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 5px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .add-chart-container[b-ix2i1ly1ah] {
        margin: 10px;
        border-radius: 10px;
    }

    .chart-form[b-ix2i1ly1ah] {
        padding: 20px;
    }

    .form-row[b-ix2i1ly1ah] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .measurement-row[b-ix2i1ly1ah] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .form-actions[b-ix2i1ly1ah] {
        flex-direction: column;
        align-items: stretch;
    }

    .header h1[b-ix2i1ly1ah] {
        font-size: 2rem;
    }

    .section-title[b-ix2i1ly1ah] {
        font-size: 1.1rem;
    }
}
/* _content/HowardWebApp/Components/Pages/Admin/BarcodeUpdate.razor.rz.scp.css */
/* BarcodeUpdate.razor.css */
.upload-container[b-4wdyfw79yd] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    padding: 2rem;
}

.upload-card[b-4wdyfw79yd] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    width: 100%;
    max-width: 1200px;
    position: relative;
}

.upload-header[b-4wdyfw79yd] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.upload-title[b-4wdyfw79yd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.upload-icon[b-4wdyfw79yd] {
    width: 1.25rem;
    height: 1.25rem;
}

.upload-subtitle[b-4wdyfw79yd] {
    color: #2d3748;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

/* Method Selection Styles */
.method-selection[b-4wdyfw79yd] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .method-selection h3[b-4wdyfw79yd] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.method-options[b-4wdyfw79yd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.method-option[b-4wdyfw79yd] {
    display: block;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .method-option:hover[b-4wdyfw79yd] {
        border-color: #cbd5e0;
        transform: translateY(-1px);
    }

    .method-option.selected[b-4wdyfw79yd] {
        border-color: #667eea;
        background: #f0f4ff;
    }

    .method-option input[type="radio"][b-4wdyfw79yd] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.method-content strong[b-4wdyfw79yd] {
    display: block;
    color: #2d3748;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.method-content p[b-4wdyfw79yd] {
    color: #718096;
    font-size: 0.875rem;
    margin: 0;
}

/* Copy/Paste Section */
.copy-paste-section[b-4wdyfw79yd] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .copy-paste-section h3[b-4wdyfw79yd] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.instructions-list[b-4wdyfw79yd] {
    background: white;
    padding: 1rem 1rem 1rem 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

    .instructions-list li[b-4wdyfw79yd] {
        margin-bottom: 0.5rem;
        color: #4a5568;
    }

        .instructions-list li:last-child[b-4wdyfw79yd] {
            margin-bottom: 0;
        }

.paste-area label[b-4wdyfw79yd] {
    display: block;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.paste-textarea[b-4wdyfw79yd] {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 200px;
}

    .paste-textarea:focus[b-4wdyfw79yd] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

.paste-preview[b-4wdyfw79yd] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

    .paste-preview p[b-4wdyfw79yd] {
        margin: 0;
        color: #4a5568;
        font-weight: 600;
    }

/* Browser Convert Info */
.browser-convert-info[b-4wdyfw79yd] {
    margin-bottom: 2rem;
}

.info-box[b-4wdyfw79yd] {
    background: #edf2f7;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
}

    .info-box h4[b-4wdyfw79yd] {
        color: #2d3748;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .info-box p[b-4wdyfw79yd] {
        color: #4a5568;
        font-size: 0.875rem;
        margin: 0;
    }

.file-upload-section[b-4wdyfw79yd] {
    margin-bottom: 2rem;
}

.file-upload-area[b-4wdyfw79yd] {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    background: #f7fafc;
}

    .file-upload-area:hover[b-4wdyfw79yd],
    .file-upload-area.drag-over[b-4wdyfw79yd] {
        border-color: #667eea;
        background: #edf2f7;
        transform: translateY(-2px);
    }

.file-input[b-4wdyfw79yd] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
}

.file-upload-content[b-4wdyfw79yd] {
    pointer-events: none;
}

.file-upload-icon[b-4wdyfw79yd] {
    width: 3rem;
    height: 3rem;
    color: #a0aec0;
    margin-bottom: 1rem;
}

.files-selected[b-4wdyfw79yd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.files-count[b-4wdyfw79yd] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.file-list[b-4wdyfw79yd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 400px;
}

.file-item[b-4wdyfw79yd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.file-name[b-4wdyfw79yd] {
    font-weight: 600;
    color: #2d3748;
}

.file-size[b-4wdyfw79yd] {
    font-size: 0.875rem;
    color: #718096;
}

.file-placeholder[b-4wdyfw79yd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.upload-text[b-4wdyfw79yd] {
    font-size: 1.125rem;
    color: #4a5568;
    margin: 0;
}

.upload-link[b-4wdyfw79yd] {
    color: #667eea;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: all;
}

.upload-hint[b-4wdyfw79yd] {
    font-size: 0.875rem;
    color: #a0aec0;
    margin: 0;
}

/* Instructions Section */
.instructions-section[b-4wdyfw79yd] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .instructions-section h3[b-4wdyfw79yd] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

/* Column Mapping Styles */
.mapping-section[b-4wdyfw79yd] {
    margin-bottom: 2rem;
    padding: 2rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .mapping-section h3[b-4wdyfw79yd] {
        color: #2d3748;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.mapping-description[b-4wdyfw79yd] {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.mapping-grid[b-4wdyfw79yd] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.mapping-header[b-4wdyfw79yd] {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 1rem;
    background: #4a5568;
    color: white;
    padding: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.csv-column-header[b-4wdyfw79yd],
.db-field-header[b-4wdyfw79yd] {
    text-align: left;
}

.mapping-row[b-4wdyfw79yd] {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    align-items: center;
}

    .mapping-row:last-child[b-4wdyfw79yd] {
        border-bottom: none;
    }

    .mapping-row:hover[b-4wdyfw79yd] {
        background: #f7fafc;
    }

.csv-column[b-4wdyfw79yd] {
    font-weight: 600;
    color: #2d3748;
}

.db-field[b-4wdyfw79yd] {
    color: #4a5568;
}

/* Processing Section */
.processing-section[b-4wdyfw79yd] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
}

    .processing-section h3[b-4wdyfw79yd] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.processing-status[b-4wdyfw79yd] {
    max-width: 400px;
    margin: 0 auto;
}

/* Preview Section */
.preview-section[b-4wdyfw79yd] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .preview-section h3[b-4wdyfw79yd] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.preview-table-container[b-4wdyfw79yd] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.preview-table[b-4wdyfw79yd] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 1000px;
}

    .preview-table th[b-4wdyfw79yd] {
        background: #4a5568;
        color: white;
        padding: 0.75rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .preview-table td[b-4wdyfw79yd] {
        padding: 0.75rem;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.875rem;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .preview-table tr:hover[b-4wdyfw79yd] {
        background: #f7fafc;
    }

.error-row[b-4wdyfw79yd] {
    background: #fed7d7 !important;
}

.preview-note[b-4wdyfw79yd] {
    font-size: 0.875rem;
    color: #718096;
    text-align: center;
    margin: 0;
}

/* Status Badges */
.success-badge[b-4wdyfw79yd] {
    background: #c6f6d5;
    color: #22543d;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.error-badge[b-4wdyfw79yd] {
    background: #fed7d7;
    color: #742a2a;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.warning-badge[b-4wdyfw79yd] {
    background: #fef5e7;
    color: #d69e2e;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    border: 1px solid #f6e05e;
}

/* Customer Match Styles */
.customer-match[b-4wdyfw79yd] {
    color: #22543d;
    font-weight: 600;
    font-size: 0.875rem;
}

.customer-no-match[b-4wdyfw79yd] {
    color: #742a2a;
    font-weight: 600;
    font-size: 0.875rem;
}

.validation-errors[b-4wdyfw79yd] {
    background: #fed7d7;
    border: 1px solid #f56565;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

    .validation-errors h4[b-4wdyfw79yd] {
        color: #742a2a;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .validation-errors ul[b-4wdyfw79yd] {
        color: #742a2a;
        margin: 0;
        padding-left: 1.5rem;
    }

    .validation-errors li[b-4wdyfw79yd] {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

/* Action Buttons */
.action-buttons[b-4wdyfw79yd] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.btn[b-4wdyfw79yd] {
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
    justify-content: center;
}

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

.btn-primary[b-4wdyfw79yd] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-4wdyfw79yd] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-4wdyfw79yd] {
    background: #718096;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-4wdyfw79yd] {
        background: #4a5568;
        transform: translateY(-2px);
    }

.btn-outline[b-4wdyfw79yd] {
    background: transparent;
    color: #718096;
    border: 2px solid #e2e8f0;
}

    .btn-outline:hover:not(:disabled)[b-4wdyfw79yd] {
        border-color: #cbd5e0;
        background: #f7fafc;
    }

/* Progress Bars */
.progress-section[b-4wdyfw79yd] {
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
}

.progress-bar[b-4wdyfw79yd] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill[b-4wdyfw79yd] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-4wdyfw79yd] {
    text-align: center;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

/* Results Section */
.results-section[b-4wdyfw79yd] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

    .results-section h3[b-4wdyfw79yd] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.results-summary[b-4wdyfw79yd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.result-item[b-4wdyfw79yd] {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .result-item.success[b-4wdyfw79yd] {
        border-left: 4px solid #38a169;
    }

    .result-item.error[b-4wdyfw79yd] {
        border-left: 4px solid #e53e3e;
    }

.result-label[b-4wdyfw79yd] {
    font-weight: 600;
    color: #4a5568;
}

.result-value[b-4wdyfw79yd] {
    font-size: 1.5rem;
    font-weight: 700;
}

.result-item.success .result-value[b-4wdyfw79yd] {
    color: #38a169;
}

.result-item.error .result-value[b-4wdyfw79yd] {
    color: #e53e3e;
}

.upload-errors[b-4wdyfw79yd] {
    background: #fed7d7;
    border: 1px solid #f56565;
    border-radius: 8px;
    padding: 1rem;
}

    .upload-errors h4[b-4wdyfw79yd] {
        color: #742a2a;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .upload-errors ul[b-4wdyfw79yd] {
        color: #742a2a;
        margin: 0;
        padding-left: 1.5rem;
    }

    .upload-errors li[b-4wdyfw79yd] {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

.error-message[b-4wdyfw79yd] {
    background: #fed7d7;
    color: #742a2a;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #f56565;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}

/* Responsive design */
@media (max-width: 1024px) {
    .mapping-header[b-4wdyfw79yd],
    .mapping-row[b-4wdyfw79yd] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .mapping-row[b-4wdyfw79yd] {
        padding: 1rem;
        border-left: 4px solid #667eea;
    }

    .csv-column[b-4wdyfw79yd] {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }

        .csv-column[b-4wdyfw79yd]::before {
            content: "Excel Column: ";
            font-weight: normal;
            color: #718096;
        }

    .db-field[b-4wdyfw79yd]::before {
        content: "Maps to: ";
        font-weight: normal;
        color: #718096;
        display: block;
        margin-bottom: 0.25rem;
    }

    .method-options[b-4wdyfw79yd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .upload-container[b-4wdyfw79yd] {
        padding: 1rem;
    }

    .upload-card[b-4wdyfw79yd] {
        padding: 2rem 1.5rem;
    }

    .upload-subtitle[b-4wdyfw79yd] {
        font-size: 1.5rem;
    }

    .file-upload-area[b-4wdyfw79yd] {
        padding: 2rem 1rem;
    }

    .action-buttons[b-4wdyfw79yd] {
        flex-direction: column;
        align-items: center;
    }

    .btn[b-4wdyfw79yd] {
        width: 100%;
        max-width: 300px;
    }

    .results-summary[b-4wdyfw79yd] {
        grid-template-columns: 1fr;
    }

    .preview-table[b-4wdyfw79yd] {
        font-size: 0.75rem;
    }

        .preview-table th[b-4wdyfw79yd],
        .preview-table td[b-4wdyfw79yd] {
            padding: 0.5rem;
            max-width: 100px;
        }
}
/* _content/HowardWebApp/Components/Pages/Admin/CustomerUpload.razor.rz.scp.css */
/* CustomerUpload.razor.css */
.upload-container[b-nj2dim3lb2] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    padding: 2rem;
}

.upload-card[b-nj2dim3lb2] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    width: 100%;
    max-width: 900px;
    position: relative;
}

.upload-header[b-nj2dim3lb2] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.upload-title[b-nj2dim3lb2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.upload-icon[b-nj2dim3lb2] {
    width: 1.25rem;
    height: 1.25rem;
}

.upload-subtitle[b-nj2dim3lb2] {
    color: #2d3748;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.file-upload-section[b-nj2dim3lb2] {
    margin-bottom: 2rem;
}

.file-upload-area[b-nj2dim3lb2] {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    background: #f7fafc;
}

    .file-upload-area:hover[b-nj2dim3lb2],
    .file-upload-area.drag-over[b-nj2dim3lb2] {
        border-color: #667eea;
        background: #edf2f7;
        transform: translateY(-2px);
    }

.file-input[b-nj2dim3lb2] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
}

.file-upload-content[b-nj2dim3lb2] {
    pointer-events: none;
}

.file-upload-icon[b-nj2dim3lb2] {
    width: 3rem;
    height: 3rem;
    color: #a0aec0;
    margin-bottom: 1rem;
}

.file-selected[b-nj2dim3lb2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.file-name[b-nj2dim3lb2] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.file-size[b-nj2dim3lb2] {
    font-size: 0.875rem;
    color: #718096;
    margin: 0;
}

.file-placeholder[b-nj2dim3lb2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.upload-text[b-nj2dim3lb2] {
    font-size: 1.125rem;
    color: #4a5568;
    margin: 0;
}

.upload-link[b-nj2dim3lb2] {
    color: #667eea;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: all;
}

.upload-hint[b-nj2dim3lb2] {
    font-size: 0.875rem;
    color: #a0aec0;
    margin: 0;
}

.preview-section[b-nj2dim3lb2] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .preview-section h3[b-nj2dim3lb2] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.preview-table-container[b-nj2dim3lb2] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.preview-table[b-nj2dim3lb2] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .preview-table th[b-nj2dim3lb2] {
        background: #4a5568;
        color: white;
        padding: 0.75rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .preview-table td[b-nj2dim3lb2] {
        padding: 0.75rem;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.875rem;
    }

    .preview-table tr:hover[b-nj2dim3lb2] {
        background: #f7fafc;
    }

.error-row[b-nj2dim3lb2] {
    background: #fed7d7 !important;
}

.preview-note[b-nj2dim3lb2] {
    font-size: 0.875rem;
    color: #718096;
    text-align: center;
    margin: 0;
}

.success-badge[b-nj2dim3lb2] {
    background: #c6f6d5;
    color: #22543d;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.error-badge[b-nj2dim3lb2] {
    background: #fed7d7;
    color: #742a2a;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.validation-errors[b-nj2dim3lb2] {
    background: #fed7d7;
    border: 1px solid #f56565;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

    .validation-errors h4[b-nj2dim3lb2] {
        color: #742a2a;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .validation-errors ul[b-nj2dim3lb2] {
        color: #742a2a;
        margin: 0;
        padding-left: 1.5rem;
    }

    .validation-errors li[b-nj2dim3lb2] {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

.action-buttons[b-nj2dim3lb2] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.btn[b-nj2dim3lb2] {
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
    justify-content: center;
}

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

.btn-primary[b-nj2dim3lb2] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-nj2dim3lb2] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-nj2dim3lb2] {
    background: #718096;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-nj2dim3lb2] {
        background: #4a5568;
        transform: translateY(-2px);
    }

.btn-outline[b-nj2dim3lb2] {
    background: transparent;
    color: #718096;
    border: 2px solid #e2e8f0;
}

    .btn-outline:hover:not(:disabled)[b-nj2dim3lb2] {
        border-color: #cbd5e0;
        background: #f7fafc;
    }

.progress-section[b-nj2dim3lb2] {
    margin-bottom: 2rem;
}

.progress-bar[b-nj2dim3lb2] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill[b-nj2dim3lb2] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-nj2dim3lb2] {
    text-align: center;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.results-section[b-nj2dim3lb2] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

    .results-section h3[b-nj2dim3lb2] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.results-summary[b-nj2dim3lb2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.result-item[b-nj2dim3lb2] {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .result-item.success[b-nj2dim3lb2] {
        border-left: 4px solid #38a169;
    }

    .result-item.error[b-nj2dim3lb2] {
        border-left: 4px solid #e53e3e;
    }

.result-label[b-nj2dim3lb2] {
    font-weight: 600;
    color: #4a5568;
}

.result-value[b-nj2dim3lb2] {
    font-size: 1.5rem;
    font-weight: 700;
}

.result-item.success .result-value[b-nj2dim3lb2] {
    color: #38a169;
}

.result-item.error .result-value[b-nj2dim3lb2] {
    color: #e53e3e;
}

.upload-errors[b-nj2dim3lb2] {
    background: #fed7d7;
    border: 1px solid #f56565;
    border-radius: 8px;
    padding: 1rem;
}

    .upload-errors h4[b-nj2dim3lb2] {
        color: #742a2a;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .upload-errors ul[b-nj2dim3lb2] {
        color: #742a2a;
        margin: 0;
        padding-left: 1.5rem;
    }

    .upload-errors li[b-nj2dim3lb2] {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

.error-message[b-nj2dim3lb2] {
    background: #fed7d7;
    color: #742a2a;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #f56565;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}
.submenu-link[b-nj2dim3lb2] {
    color: #555 !important;
    background: none !important;
    border: none !important;
    border-radius: 4px;
    height: 2.5rem !important;
    display: flex;
    align-items: center;
    line-height: 2.5rem;
    width: 100%;
    text-decoration: none !important; /* Remove underline */
    cursor: pointer;
    padding: 0 1rem 0 2rem !important; /* Extra left padding for indentation */
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
    outline: none !important;
    box-shadow: none !important;
}

    .submenu-link:hover[b-nj2dim3lb2] {
        background-color: #555 !important;
        color: white !important;
        text-decoration: none !important; /* Ensure no underline on hover */
    }

    .submenu-link:active[b-nj2dim3lb2],
    .submenu-link:focus[b-nj2dim3lb2],
    .submenu-link:visited[b-nj2dim3lb2] {
        text-decoration: none !important;
        outline: none !important;
        color: #555 !important;
    }

        .submenu-link:focus:hover[b-nj2dim3lb2],
        .submenu-link:active:hover[b-nj2dim3lb2],
        .submenu-link:visited:hover[b-nj2dim3lb2] {
            background-color: #555 !important;
            color: white !important;
            text-decoration: none !important;
        }

    .submenu-link.active[b-nj2dim3lb2] {
        background-color: #333 !important;
        color: white !important;
        font-weight: 600;
        text-decoration: none !important;
    }

    .submenu-link .nav-icon[b-nj2dim3lb2] {
        width: 1rem;
        height: 1rem;
        margin-right: 0.5rem;
    }

/* Additional global link reset for submenu items */
.upload-submenu a[b-nj2dim3lb2] {
    text-decoration: none !important;
}

    .upload-submenu a:hover[b-nj2dim3lb2],
    .upload-submenu a:focus[b-nj2dim3lb2],
    .upload-submenu a:active[b-nj2dim3lb2],
    .upload-submenu a:visited[b-nj2dim3lb2] {
        text-decoration: none !important;
    }
/* Responsive design */
@media (max-width: 768px) {
    .upload-container[b-nj2dim3lb2] {
        padding: 1rem;
    }

    .upload-card[b-nj2dim3lb2] {
        padding: 2rem 1.5rem;
    }

    .upload-subtitle[b-nj2dim3lb2] {
        font-size: 1.5rem;
    }

    .file-upload-area[b-nj2dim3lb2] {
        padding: 2rem 1rem;
    }

    .action-buttons[b-nj2dim3lb2] {
        flex-direction: column;
        align-items: center;
    }

    .btn[b-nj2dim3lb2] {
        width: 100%;
        max-width: 300px;
    }

    .results-summary[b-nj2dim3lb2] {
        grid-template-columns: 1fr;
    }
}
/* _content/HowardWebApp/Components/Pages/Admin/StationDataUpload.razor.rz.scp.css */
/* StationUpload.razor.css */
.upload-container[b-6egis6h972] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    padding: 2rem;
}

.upload-card[b-6egis6h972] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    width: 100%;
    max-width: 1200px;
    position: relative;
}

.upload-header[b-6egis6h972] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.upload-title[b-6egis6h972] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.upload-icon[b-6egis6h972] {
    width: 1.25rem;
    height: 1.25rem;
}

.upload-subtitle[b-6egis6h972] {
    color: #2d3748;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.file-upload-section[b-6egis6h972] {
    margin-bottom: 2rem;
}

.file-upload-area[b-6egis6h972] {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    background: #f7fafc;
}

    .file-upload-area:hover[b-6egis6h972],
    .file-upload-area.drag-over[b-6egis6h972] {
        border-color: #667eea;
        background: #edf2f7;
        transform: translateY(-2px);
    }

.file-input[b-6egis6h972] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
}

.file-upload-content[b-6egis6h972] {
    pointer-events: none;
}

.file-upload-icon[b-6egis6h972] {
    width: 3rem;
    height: 3rem;
    color: #a0aec0;
    margin-bottom: 1rem;
}

.file-selected[b-6egis6h972] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.file-name[b-6egis6h972] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.file-size[b-6egis6h972] {
    font-size: 0.875rem;
    color: #718096;
    margin: 0;
}

.file-placeholder[b-6egis6h972] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.upload-text[b-6egis6h972] {
    font-size: 1.125rem;
    color: #4a5568;
    margin: 0;
}

.upload-link[b-6egis6h972] {
    color: #667eea;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: all;
}

.upload-hint[b-6egis6h972] {
    font-size: 0.875rem;
    color: #a0aec0;
    margin: 0;
}

/* Column Mapping Styles */
.mapping-section[b-6egis6h972] {
    margin-bottom: 2rem;
    padding: 2rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .mapping-section h3[b-6egis6h972] {
        color: #2d3748;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.mapping-description[b-6egis6h972] {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.mapping-grid[b-6egis6h972] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.mapping-header[b-6egis6h972] {
    display: grid;
    grid-template-columns: 2fr 80px 2fr 1.5fr;
    gap: 1rem;
    background: #4a5568;
    color: white;
    padding: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.csv-column-header[b-6egis6h972],
.db-field-header[b-6egis6h972],
.sample-data-header[b-6egis6h972] {
    text-align: left;
}

.arrow-header[b-6egis6h972] {
    text-align: center;
}

.mapping-row[b-6egis6h972] {
    display: grid;
    grid-template-columns: 2fr 80px 2fr 1.5fr;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    align-items: center;
}

    .mapping-row:last-child[b-6egis6h972] {
        border-bottom: none;
    }

    .mapping-row:hover[b-6egis6h972] {
        background: #f7fafc;
    }

.csv-column[b-6egis6h972] {
    font-weight: 600;
    color: #2d3748;
}

.arrow[b-6egis6h972] {
    text-align: center;
    color: #a0aec0;
    font-weight: bold;
}

.db-field[b-6egis6h972] {
    position: relative;
}

.mapping-select[b-6egis6h972] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 0.875rem;
    color: #4a5568;
}

    .mapping-select:focus[b-6egis6h972] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

.sample-data[b-6egis6h972] {
    font-size: 0.875rem;
    color: #718096;
}

.sample-value[b-6egis6h972] {
    background: #edf2f7;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8rem;
}

.mapping-actions[b-6egis6h972] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Customer Match Styles */
.customer-match[b-6egis6h972] {
    color: #22543d;
    font-weight: 600;
    font-size: 0.875rem;
}

.customer-no-match[b-6egis6h972] {
    color: #742a2a;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Failed Validation Records Styles */
.failed-validation-section[b-6egis6h972] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #fff5f5;
    border-radius: 12px;
    border: 2px solid #fed7d7;
}

    .failed-validation-section h3[b-6egis6h972] {
        color: #742a2a;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.failed-validation-description[b-6egis6h972] {
    color: #742a2a;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.failed-validation-table-container[b-6egis6h972] {
    overflow-x: auto;
    margin-bottom: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.failed-validation-table[b-6egis6h972] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
}

    .failed-validation-table th[b-6egis6h972] {
        background: #742a2a;
        color: white;
        padding: 0.75rem 0.5rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.8rem;
        border-bottom: 2px solid #631d1d;
        white-space: nowrap;
        vertical-align: top;
    }

        .failed-validation-table th small[b-6egis6h972] {
            display: block;
            font-size: 0.7rem;
            opacity: 0.9;
            font-weight: normal;
        }

    .failed-validation-table td[b-6egis6h972] {
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.8rem;
        vertical-align: top;
        max-width: 150px;
        word-wrap: break-word;
    }

    .failed-validation-table tr:hover[b-6egis6h972] {
        background: #f7fafc;
    }

    .failed-validation-table tr:nth-child(even)[b-6egis6h972] {
        background: #f9f9f9;
    }

        .failed-validation-table tr:nth-child(even):hover[b-6egis6h972] {
            background: #f1f5f9;
        }

.full-analysis-value[b-6egis6h972] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-family: monospace;
}

.invalid-value[b-6egis6h972] {
    background: #fed7d7;
    color: #742a2a;
    border: 1px solid #f56565;
}

.empty-value[b-6egis6h972] {
    color: #a0aec0;
    font-style: italic;
    font-size: 0.75rem;
}

.failure-reasons[b-6egis6h972] {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .failure-reasons li[b-6egis6h972] {
        padding: 0.25rem 0;
        color: #742a2a;
        font-size: 0.75rem;
        border-bottom: 1px dotted #fed7d7;
    }

        .failure-reasons li:last-child[b-6egis6h972] {
            border-bottom: none;
        }

        .failure-reasons li[b-6egis6h972]:before {
            content: "• ";
            color: #e53e3e;
            font-weight: bold;
        }

.failed-validation-note[b-6egis6h972] {
    font-size: 0.875rem;
    color: #742a2a;
    text-align: center;
    margin: 1rem 0 0 0;
    padding: 1rem;
    background: #fed7d7;
    border-radius: 6px;
    font-weight: 600;
}

/* Preview Section */
.preview-section[b-6egis6h972] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .preview-section h3[b-6egis6h972] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.preview-table-container[b-6egis6h972] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.preview-table[b-6egis6h972] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 800px;
}

    .preview-table th[b-6egis6h972] {
        background: #4a5568;
        color: white;
        padding: 0.75rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .preview-table td[b-6egis6h972] {
        padding: 0.75rem;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.875rem;
    }

    .preview-table tr:hover[b-6egis6h972] {
        background: #f7fafc;
    }

.error-row[b-6egis6h972] {
    background: #fed7d7 !important;
}

.preview-note[b-6egis6h972] {
    font-size: 0.875rem;
    color: #718096;
    text-align: center;
    margin: 0;
}

.success-badge[b-6egis6h972] {
    background: #c6f6d5;
    color: #22543d;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.error-badge[b-6egis6h972] {
    background: #fed7d7;
    color: #742a2a;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.validation-errors[b-6egis6h972] {
    background: #fed7d7;
    border: 1px solid #f56565;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

    .validation-errors h4[b-6egis6h972] {
        color: #742a2a;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .validation-errors ul[b-6egis6h972] {
        color: #742a2a;
        margin: 0;
        padding-left: 1.5rem;
    }

    .validation-errors li[b-6egis6h972] {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

.action-buttons[b-6egis6h972] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.btn[b-6egis6h972] {
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
    justify-content: center;
}

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

.btn-primary[b-6egis6h972] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-6egis6h972] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-6egis6h972] {
    background: #718096;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-6egis6h972] {
        background: #4a5568;
        transform: translateY(-2px);
    }

.btn-outline[b-6egis6h972] {
    background: transparent;
    color: #718096;
    border: 2px solid #e2e8f0;
}

    .btn-outline:hover:not(:disabled)[b-6egis6h972] {
        border-color: #cbd5e0;
        background: #f7fafc;
    }

.progress-section[b-6egis6h972] {
    margin-bottom: 2rem;
}

.progress-bar[b-6egis6h972] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill[b-6egis6h972] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-6egis6h972] {
    text-align: center;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.results-section[b-6egis6h972] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

    .results-section h3[b-6egis6h972] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.results-summary[b-6egis6h972] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.result-item[b-6egis6h972] {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .result-item.success[b-6egis6h972] {
        border-left: 4px solid #38a169;
    }

    .result-item.error[b-6egis6h972] {
        border-left: 4px solid #e53e3e;
    }

.result-label[b-6egis6h972] {
    font-weight: 600;
    color: #4a5568;
}

.result-value[b-6egis6h972] {
    font-size: 1.5rem;
    font-weight: 700;
}

.result-item.success .result-value[b-6egis6h972] {
    color: #38a169;
}

.result-item.error .result-value[b-6egis6h972] {
    color: #e53e3e;
}

.upload-errors[b-6egis6h972] {
    background: #fed7d7;
    border: 1px solid #f56565;
    border-radius: 8px;
    padding: 1rem;
}

    .upload-errors h4[b-6egis6h972] {
        color: #742a2a;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .upload-errors ul[b-6egis6h972] {
        color: #742a2a;
        margin: 0;
        padding-left: 1.5rem;
    }

    .upload-errors li[b-6egis6h972] {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

.error-message[b-6egis6h972] {
    background: #fed7d7;
    color: #742a2a;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #f56565;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}

/* Responsive design */
@media (max-width: 1024px) {
    .mapping-header[b-6egis6h972],
    .mapping-row[b-6egis6h972] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .arrow[b-6egis6h972] {
        display: none;
    }

    .arrow-header[b-6egis6h972] {
        display: none;
    }

    .mapping-row[b-6egis6h972] {
        padding: 1rem;
        border-left: 4px solid #667eea;
    }

    .csv-column[b-6egis6h972] {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }

        .csv-column[b-6egis6h972]::before {
            content: "CSV Column: ";
            font-weight: normal;
            color: #718096;
        }

    .db-field[b-6egis6h972]::before {
        content: "Maps to: ";
        font-weight: normal;
        color: #718096;
        display: block;
        margin-bottom: 0.25rem;
    }

    .sample-data[b-6egis6h972]::before {
        content: "Sample: ";
        font-weight: normal;
        color: #718096;
    }
}

@media (max-width: 768px) {
    .upload-container[b-6egis6h972] {
        padding: 1rem;
    }

    .upload-card[b-6egis6h972] {
        padding: 2rem 1.5rem;
    }

    .upload-subtitle[b-6egis6h972] {
        font-size: 1.5rem;
    }

    .file-upload-area[b-6egis6h972] {
        padding: 2rem 1rem;
    }

    .action-buttons[b-6egis6h972] {
        flex-direction: column;
        align-items: center;
    }

    .btn[b-6egis6h972] {
        width: 100%;
        max-width: 300px;
    }

    .results-summary[b-6egis6h972] {
        grid-template-columns: 1fr;
    }

    .mapping-actions[b-6egis6h972] {
        flex-direction: column;
        align-items: center;
    }

        .mapping-actions .btn[b-6egis6h972] {
            width: 100%;
            max-width: 250px;
        }

    .failed-validation-table-container[b-6egis6h972] {
        font-size: 0.7rem;
    }

    .failed-validation-table[b-6egis6h972] {
        min-width: 800px;
    }

        .failed-validation-table th[b-6egis6h972],
        .failed-validation-table td[b-6egis6h972] {
            padding: 0.5rem 0.25rem;
        }

    .failure-reasons li[b-6egis6h972] {
        font-size: 0.65rem;
    }
}
/* _content/HowardWebApp/Components/Pages/Admin/StationUpload.razor.rz.scp.css */
/* StationUpload.razor.css */
.upload-container[b-d9c24vwrlu] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    padding: 2rem;
}

.upload-card[b-d9c24vwrlu] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    width: 100%;
    max-width: 1200px;
    position: relative;
}

.upload-header[b-d9c24vwrlu] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.upload-title[b-d9c24vwrlu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.upload-icon[b-d9c24vwrlu] {
    width: 1.25rem;
    height: 1.25rem;
}

.upload-subtitle[b-d9c24vwrlu] {
    color: #2d3748;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.file-upload-section[b-d9c24vwrlu] {
    margin-bottom: 2rem;
}

.file-upload-area[b-d9c24vwrlu] {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    background: #f7fafc;
}

    .file-upload-area:hover[b-d9c24vwrlu],
    .file-upload-area.drag-over[b-d9c24vwrlu] {
        border-color: #667eea;
        background: #edf2f7;
        transform: translateY(-2px);
    }

    .file-summary-large[b-d9c24vwrlu] {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin: 15px 0;
    }

    .summary-stats[b-d9c24vwrlu] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .stat-item[b-d9c24vwrlu] {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background: white;
        border-radius: 6px;
        border: 1px solid #e9ecef;
    }

    .stat-label[b-d9c24vwrlu] {
        font-weight: 500;
        color: #6c757d;
    }

    .stat-value[b-d9c24vwrlu] {
        font-weight: 600;
        color: #495057;
    }

    .invalid-files-list[b-d9c24vwrlu] {
        border-top: 1px solid #dee2e6;
        padding-top: 15px;
    }

    .invalid-file-item[b-d9c24vwrlu] {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f1f3f4;
    }

    .invalid-file-item:last-child[b-d9c24vwrlu] {
        border-bottom: none;
    }
.file-input[b-d9c24vwrlu] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
}

.file-upload-content[b-d9c24vwrlu] {
    pointer-events: none;
}

.file-upload-icon[b-d9c24vwrlu] {
    width: 3rem;
    height: 3rem;
    color: #a0aec0;
    margin-bottom: 1rem;
}

.file-selected[b-d9c24vwrlu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.file-name[b-d9c24vwrlu] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.file-size[b-d9c24vwrlu] {
    font-size: 0.875rem;
    color: #718096;
    margin: 0;
}

.file-placeholder[b-d9c24vwrlu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.upload-text[b-d9c24vwrlu] {
    font-size: 1.125rem;
    color: #4a5568;
    margin: 0;
}

.upload-link[b-d9c24vwrlu] {
    color: #667eea;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: all;
}

.upload-hint[b-d9c24vwrlu] {
    font-size: 0.875rem;
    color: #a0aec0;
    margin: 0;
}

/* Column Mapping Styles */
.mapping-section[b-d9c24vwrlu] {
    margin-bottom: 2rem;
    padding: 2rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .mapping-section h3[b-d9c24vwrlu] {
        color: #2d3748;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.mapping-description[b-d9c24vwrlu] {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.mapping-grid[b-d9c24vwrlu] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.mapping-header[b-d9c24vwrlu] {
    display: grid;
    grid-template-columns: 2fr 80px 2fr 1.5fr;
    gap: 1rem;
    background: #4a5568;
    color: white;
    padding: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.csv-column-header[b-d9c24vwrlu],
.db-field-header[b-d9c24vwrlu],
.sample-data-header[b-d9c24vwrlu] {
    text-align: left;
}

.arrow-header[b-d9c24vwrlu] {
    text-align: center;
}

.mapping-row[b-d9c24vwrlu] {
    display: grid;
    grid-template-columns: 2fr 80px 2fr 1.5fr;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    align-items: center;
}

    .mapping-row:last-child[b-d9c24vwrlu] {
        border-bottom: none;
    }

    .mapping-row:hover[b-d9c24vwrlu] {
        background: #f7fafc;
    }

.csv-column[b-d9c24vwrlu] {
    font-weight: 600;
    color: #2d3748;
}

.arrow[b-d9c24vwrlu] {
    text-align: center;
    color: #a0aec0;
    font-weight: bold;
}

.db-field[b-d9c24vwrlu] {
    position: relative;
}

.mapping-select[b-d9c24vwrlu] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 0.875rem;
    color: #4a5568;
}

    .mapping-select:focus[b-d9c24vwrlu] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

.sample-data[b-d9c24vwrlu] {
    font-size: 0.875rem;
    color: #718096;
}

.sample-value[b-d9c24vwrlu] {
    background: #edf2f7;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8rem;
}

.mapping-actions[b-d9c24vwrlu] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Customer Match Styles */
.customer-match[b-d9c24vwrlu] {
    color: #22543d;
    font-weight: 600;
    font-size: 0.875rem;
}

.customer-no-match[b-d9c24vwrlu] {
    color: #742a2a;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Preview Section */
.preview-section[b-d9c24vwrlu] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .preview-section h3[b-d9c24vwrlu] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.preview-table-container[b-d9c24vwrlu] {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.preview-table[b-d9c24vwrlu] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 800px;
}

    .preview-table th[b-d9c24vwrlu] {
        background: #4a5568;
        color: white;
        padding: 0.75rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .preview-table td[b-d9c24vwrlu] {
        padding: 0.75rem;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.875rem;
    }

    .preview-table tr:hover[b-d9c24vwrlu] {
        background: #f7fafc;
    }

.error-row[b-d9c24vwrlu] {
    background: #fed7d7 !important;
}

.preview-note[b-d9c24vwrlu] {
    font-size: 0.875rem;
    color: #718096;
    text-align: center;
    margin: 0;
}

.success-badge[b-d9c24vwrlu] {
    background: #c6f6d5;
    color: #22543d;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.error-badge[b-d9c24vwrlu] {
    background: #fed7d7;
    color: #742a2a;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.validation-errors[b-d9c24vwrlu] {
    background: #fed7d7;
    border: 1px solid #f56565;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

    .validation-errors h4[b-d9c24vwrlu] {
        color: #742a2a;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .validation-errors ul[b-d9c24vwrlu] {
        color: #742a2a;
        margin: 0;
        padding-left: 1.5rem;
    }

    .validation-errors li[b-d9c24vwrlu] {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

.action-buttons[b-d9c24vwrlu] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.btn[b-d9c24vwrlu] {
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
    justify-content: center;
}

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

.btn-primary[b-d9c24vwrlu] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-d9c24vwrlu] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }

.btn-secondary[b-d9c24vwrlu] {
    background: #718096;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-d9c24vwrlu] {
        background: #4a5568;
        transform: translateY(-2px);
    }

.btn-outline[b-d9c24vwrlu] {
    background: transparent;
    color: #718096;
    border: 2px solid #e2e8f0;
}

    .btn-outline:hover:not(:disabled)[b-d9c24vwrlu] {
        border-color: #cbd5e0;
        background: #f7fafc;
    }

.progress-section[b-d9c24vwrlu] {
    margin-bottom: 2rem;
}

.progress-bar[b-d9c24vwrlu] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill[b-d9c24vwrlu] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-d9c24vwrlu] {
    text-align: center;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.results-section[b-d9c24vwrlu] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

    .results-section h3[b-d9c24vwrlu] {
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

.results-summary[b-d9c24vwrlu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.result-item[b-d9c24vwrlu] {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .result-item.success[b-d9c24vwrlu] {
        border-left: 4px solid #38a169;
    }

    .result-item.error[b-d9c24vwrlu] {
        border-left: 4px solid #e53e3e;
    }

.result-label[b-d9c24vwrlu] {
    font-weight: 600;
    color: #4a5568;
}

.result-value[b-d9c24vwrlu] {
    font-size: 1.5rem;
    font-weight: 700;
}

.result-item.success .result-value[b-d9c24vwrlu] {
    color: #38a169;
}

.result-item.error .result-value[b-d9c24vwrlu] {
    color: #e53e3e;
}

.upload-errors[b-d9c24vwrlu] {
    background: #fed7d7;
    border: 1px solid #f56565;
    border-radius: 8px;
    padding: 1rem;
}

    .upload-errors h4[b-d9c24vwrlu] {
        color: #742a2a;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .upload-errors ul[b-d9c24vwrlu] {
        color: #742a2a;
        margin: 0;
        padding-left: 1.5rem;
    }

    .upload-errors li[b-d9c24vwrlu] {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

.error-message[b-d9c24vwrlu] {
    background: #fed7d7;
    color: #742a2a;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #f56565;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}

/* Responsive design */
@media (max-width: 1024px) {
    .mapping-header[b-d9c24vwrlu],
    .mapping-row[b-d9c24vwrlu] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .arrow[b-d9c24vwrlu] {
        display: none;
    }

    .arrow-header[b-d9c24vwrlu] {
        display: none;
    }

    .mapping-row[b-d9c24vwrlu] {
        padding: 1rem;
        border-left: 4px solid #667eea;
    }

    .csv-column[b-d9c24vwrlu] {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }

        .csv-column[b-d9c24vwrlu]::before {
            content: "CSV Column: ";
            font-weight: normal;
            color: #718096;
        }

    .db-field[b-d9c24vwrlu]::before {
        content: "Maps to: ";
        font-weight: normal;
        color: #718096;
        display: block;
        margin-bottom: 0.25rem;
    }

    .sample-data[b-d9c24vwrlu]::before {
        content: "Sample: ";
        font-weight: normal;
        color: #718096;
    }
}

@media (max-width: 768px) {
    .upload-container[b-d9c24vwrlu] {
        padding: 1rem;
    }

    .upload-card[b-d9c24vwrlu] {
        padding: 2rem 1.5rem;
    }

    .upload-subtitle[b-d9c24vwrlu] {
        font-size: 1.5rem;
    }

    .file-upload-area[b-d9c24vwrlu] {
        padding: 2rem 1rem;
    }

    .action-buttons[b-d9c24vwrlu] {
        flex-direction: column;
        align-items: center;
    }

    .btn[b-d9c24vwrlu] {
        width: 100%;
        max-width: 300px;
    }

    .results-summary[b-d9c24vwrlu] {
        grid-template-columns: 1fr;
    }

    .mapping-actions[b-d9c24vwrlu] {
        flex-direction: column;
        align-items: center;
    }

        .mapping-actions .btn[b-d9c24vwrlu] {
            width: 100%;
            max-width: 250px;
        }
}
/* _content/HowardWebApp/Components/Pages/Admin/TicketSystem.razor.rz.scp.css */
.tickets-container[b-298u6kxsrf] {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
}

.header[b-298u6kxsrf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.actions[b-298u6kxsrf] {
    display: flex;
    gap: 10px;
}

.create-ticket-form[b-298u6kxsrf] {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.form-row[b-298u6kxsrf] {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group[b-298u6kxsrf] {
    flex: 1;
}

    .form-group label[b-298u6kxsrf] {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
    }

.form-actions[b-298u6kxsrf] {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Updated three-column layout */
.tickets-layout[b-298u6kxsrf] {
    display: grid;
    grid-template-columns: 400px 1fr 350px;
    gap: 20px;
    height: 80vh;
}

    .tickets-layout.collapsed[b-298u6kxsrf] {
        grid-template-columns: 400px 1fr 0px;
    }

.tickets-list[b-298u6kxsrf] {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow-y: auto;
    background: white;
}

    .tickets-list h4[b-298u6kxsrf] {
        padding: 15px;
        margin: 0;
        background: #f8f9fa;
        border-bottom: 1px solid #ddd;
        font-size: 16px;
    }

.filters[b-298u6kxsrf] {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.ticket-item[b-298u6kxsrf] {
    padding: 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .ticket-item:hover[b-298u6kxsrf] {
        background: #f8f9fa;
    }

    .ticket-item.selected[b-298u6kxsrf] {
        background: #007bff;
        color: white;
    }

.ticket-header[b-298u6kxsrf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ticket-id[b-298u6kxsrf] {
    font-weight: bold;
    font-size: 12px;
}

.priority[b-298u6kxsrf] {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.priority-low[b-298u6kxsrf] {
    background: #28a745;
    color: white;
}

.priority-medium[b-298u6kxsrf] {
    background: #ffc107;
    color: black;
}

.priority-high[b-298u6kxsrf] {
    background: #fd7e14;
    color: white;
}

.priority-critical[b-298u6kxsrf] {
    background: #dc3545;
    color: white;
}

.status[b-298u6kxsrf] {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-new[b-298u6kxsrf] {
    background: #17a2b8;
    color: white;
}

.status-open[b-298u6kxsrf] {
    background: #007bff;
    color: white;
}

.status-inprogress[b-298u6kxsrf] {
    background: #6f42c1;
    color: white;
}

.status-pending[b-298u6kxsrf] {
    background: #ffc107;
    color: black;
}

.status-resolved[b-298u6kxsrf] {
    background: #28a745;
    color: white;
}

.status-closed[b-298u6kxsrf] {
    background: #6c757d;
    color: white;
}

.ticket-subject[b-298u6kxsrf] {
    font-weight: 500;
    margin-bottom: 5px;
    line-height: 1.3;
}

.ticket-meta[b-298u6kxsrf] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: 0.8;
}

.ticket-date[b-298u6kxsrf] {
    white-space: nowrap;
}

.ticket-details[b-298u6kxsrf] {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow-y: auto;
    background: white;
}

.ticket-header-detail[b-298u6kxsrf] {
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

    .ticket-header-detail h4[b-298u6kxsrf] {
        margin: 0 0 15px 0;
    }

.ticket-actions[b-298u6kxsrf] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ticket-info[b-298u6kxsrf] {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.info-row[b-298u6kxsrf] {
    margin-bottom: 10px;
    line-height: 1.4;
}

.reply-form[b-298u6kxsrf] {
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

    .reply-form h5[b-298u6kxsrf] {
        margin: 0 0 15px 0;
    }

.reply-actions[b-298u6kxsrf] {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.email-history[b-298u6kxsrf] {
    padding: 20px;
}

    .email-history h5[b-298u6kxsrf] {
        margin: 0 0 20px 0;
    }

.email-item[b-298u6kxsrf] {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
}

    .email-item.inbound[b-298u6kxsrf] {
        border-left: 4px solid #007bff;
    }

    .email-item.outbound[b-298u6kxsrf] {
        border-left: 4px solid #28a745;
    }

.email-header[b-298u6kxsrf] {
    padding: 12px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.email-date[b-298u6kxsrf] {
    font-size: 12px;
    opacity: 0.7;
}

.email-subject[b-298u6kxsrf] {
    padding: 8px 15px;
    font-weight: 500;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.email-body[b-298u6kxsrf] {
    padding: 15px;
    line-height: 1.5;
}

    .email-body pre[b-298u6kxsrf] {
        white-space: pre-wrap;
        word-wrap: break-word;
        margin: 0;
        font-family: inherit;
    }

.no-selection[b-298u6kxsrf] {
    padding: 40px 20px;
    text-align: center;
    color: #666;
}

.loading[b-298u6kxsrf] {
    padding: 20px;
    text-align: center;
    color: #666;
}

.alert[b-298u6kxsrf] {
    padding: 12px;
    margin: 15px 0;
    border-radius: 4px;
    border: 1px solid transparent;
}

.alert-danger[b-298u6kxsrf] {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.form-control-sm[b-298u6kxsrf] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    height: calc(1.5em + 0.5rem + 2px);
}

.btn-sm[b-298u6kxsrf] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

/* Attachments Panel Styles */
.attachments-panel[b-298u6kxsrf] {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .attachments-panel.hidden[b-298u6kxsrf] {
        width: 0;
        border: none;
        margin: 0;
    }

.attachments-header[b-298u6kxsrf] {
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .attachments-header h4[b-298u6kxsrf] {
        margin: 0;
        font-size: 16px;
    }

.toggle-btn[b-298u6kxsrf] {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    color: #666;
}

.attachments-content[b-298u6kxsrf] {
    padding: 15px;
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}

.attachment-date-group[b-298u6kxsrf] {
    margin-bottom: 20px;
}

.date-header[b-298u6kxsrf] {
    font-weight: bold;
    color: #495057;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #007bff;
    font-size: 14px;
}

.attachment-list-item[b-298u6kxsrf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #007bff;
}

    .attachment-list-item.inbound[b-298u6kxsrf] {
        border-left-color: #007bff;
    }

    .attachment-list-item.outbound[b-298u6kxsrf] {
        border-left-color: #28a745;
    }

.attachment-details[b-298u6kxsrf] {
    flex: 1;
}

.attachment-filename[b-298u6kxsrf] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 2px;
}

.attachment-meta[b-298u6kxsrf] {
    font-size: 0.8rem;
    color: #6c757d;
}

.attachment-direction[b-298u6kxsrf] {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 3px;
    color: white;
    margin-left: 5px;
}

    .attachment-direction.inbound[b-298u6kxsrf] {
        background: #007bff;
    }

    .attachment-direction.outbound[b-298u6kxsrf] {
        background: #28a745;
    }

.attachment-actions[b-298u6kxsrf] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.attachment-download-btn[b-298u6kxsrf] {
    padding: 4px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.attachment-view-btn[b-298u6kxsrf] {
    padding: 4px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Document viewer modal styles */
.document-viewer-modal[b-298u6kxsrf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.document-viewer-content[b-298u6kxsrf] {
    background: white;
    border-radius: 8px;
    padding: 0;
    max-width: 90%;
    max-height: 95%;
    width: 1000px;
    height: 1200px;
    display: flex;
    flex-direction: column;
}

.document-viewer-header[b-298u6kxsrf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.document-viewer-body[b-298u6kxsrf] {
    flex: 1;
    padding: 20px;
    overflow: auto;
    background: #fff;
}

.document-viewer-iframe[b-298u6kxsrf] {
    width: 100%;
    height: 100%;
    border: none;
}

.close-viewer-btn[b-298u6kxsrf] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
}

.no-attachments[b-298u6kxsrf] {
    text-align: center;
    color: #666;
    padding: 40px 20px;
    font-style: italic;
}

/* Modal Styles */
.modal-overlay[b-298u6kxsrf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-298u6kxsrf] {
    background: white;
    border-radius: 8px;
    padding: 0;
    max-width: 90%;
    max-height: 90%;
    width: 800px;
    height: 600px;
    display: flex;
    flex-direction: column;
}

.modal-header[b-298u6kxsrf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.modal-body[b-298u6kxsrf] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.email-import-layout[b-298u6kxsrf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
}

.email-list-import[b-298u6kxsrf] {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-y: auto;
    max-height: 400px;
}

.email-item-import[b-298u6kxsrf] {
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

    .email-item-import:hover[b-298u6kxsrf] {
        background: #f8f9fa;
    }

    .email-item-import.selected[b-298u6kxsrf] {
        background: #007bff;
        color: white;
    }

.email-from[b-298u6kxsrf] {
    font-weight: bold;
    margin-bottom: 4px;
}

.email-subject-import[b-298u6kxsrf] {
    margin-bottom: 4px;
}

.email-date-import[b-298u6kxsrf] {
    font-size: 12px;
    opacity: 0.7;
}

.email-preview[b-298u6kxsrf] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
}

.email-details[b-298u6kxsrf] {
    margin-bottom: 15px;
}

.email-body-preview[b-298u6kxsrf] {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

.direct-email-form[b-298u6kxsrf] {
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

    .direct-email-form h5[b-298u6kxsrf] {
        margin: 0 0 15px 0;
    }

.email-actions[b-298u6kxsrf] {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.select-status[b-298u6kxsrf] {
    width: 50%;
}

/* Email attachments in history - simplified for main view */
.email-attachments[b-298u6kxsrf] {
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #007bff;
}

    .email-attachments h6[b-298u6kxsrf] {
        margin: 0 0 10px 0;
        color: #495057;
        font-size: 0.9rem;
    }

.attachments-list[b-298u6kxsrf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item[b-298u6kxsrf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: white;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.attachment-info[b-298u6kxsrf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attachment-name[b-298u6kxsrf] {
    font-weight: 500;
    color: #495057;
}

.attachment-size[b-298u6kxsrf] {
    font-size: 0.8rem;
    color: #6c757d;
}

.attachment-download[b-298u6kxsrf] {
    padding: 4px 8px;
    font-size: 0.8rem;
}

    .attachment-download i[b-298u6kxsrf] {
        margin-right: 4px;
    }

@media (max-width: 1400px) {
    .tickets-layout[b-298u6kxsrf] {
        grid-template-columns: 350px 1fr 300px;
    }
}

@media (max-width: 1200px) {
    .tickets-layout[b-298u6kxsrf] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tickets-list[b-298u6kxsrf] {
        max-height: 400px;
    }

    .attachments-panel[b-298u6kxsrf] {
        display: none;
    }
}
/* _content/HowardWebApp/Components/Pages/Admin/ViewCharts.razor.rz.scp.css */
/* Charts Container */
.charts-container[b-mc8czgp0p5] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Header Section */
.header-section[b-mc8czgp0p5] {
    margin-bottom: 2rem;
}

    .header-section h1[b-mc8czgp0p5] {
        color: #1f2937;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-mc8czgp0p5] {
        color: #6b7280;
        font-size: 1.125rem;
        margin: 0;
    }

/* Loading States */
.loading-container[b-mc8czgp0p5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.loading-spinner[b-mc8czgp0p5] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-mc8czgp0p5 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

/* Table Controls */
.table-controls[b-mc8czgp0p5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.table-info[b-mc8czgp0p5] {
    flex: 1;
}

.chart-count[b-mc8czgp0p5] {
    margin: 0;
    font-weight: 600;
    color: #374151;
}

.search-results[b-mc8czgp0p5] {
    color: #6b7280;
    font-weight: normal;
}

/* Search Container */
.search-container[b-mc8czgp0p5] {
    flex: 1;
    max-width: 400px;
}

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

.search-input[b-mc8czgp0p5] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
    transition: all 0.2s;
}

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

.search-icon[b-mc8czgp0p5] {
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    z-index: 1;
}

.clear-search[b-mc8czgp0p5] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #6b7280;
    border-radius: 0.25rem;
    transition: color 0.2s;
}

    .clear-search:hover[b-mc8czgp0p5] {
        color: #374151;
    }

    .clear-search svg[b-mc8czgp0p5] {
        width: 1rem;
        height: 1rem;
    }

/* Table Actions */
.table-actions[b-mc8czgp0p5] {
    display: flex;
    gap: 0.75rem;
}

.btn[b-mc8czgp0p5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary[b-mc8czgp0p5] {
    background-color: #3b82f6;
    color: white;
}

    .btn-primary:hover[b-mc8czgp0p5] {
        background-color: #2563eb;
    }

.btn-secondary[b-mc8czgp0p5] {
    background-color: #6b7280;
    color: white;
}

    .btn-secondary:hover[b-mc8czgp0p5] {
        background-color: #4b5563;
    }

.btn-icon[b-mc8czgp0p5] {
    width: 1rem;
    height: 1rem;
}

/* Table Container */
.table-container[b-mc8czgp0p5] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.charts-table[b-mc8czgp0p5] {
    width: 100%;
    border-collapse: collapse;
}

    .charts-table thead[b-mc8czgp0p5] {
        background-color: #f9fafb;
    }

    .charts-table th[b-mc8czgp0p5] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
    }

    .charts-table td[b-mc8czgp0p5] {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: middle;
    }

.chart-row[b-mc8czgp0p5] {
    cursor: pointer;
    transition: background-color 0.2s;
}

    .chart-row:hover[b-mc8czgp0p5] {
        background-color: #f9fafb;
    }

    .chart-row.expanded[b-mc8czgp0p5] {
        background-color: #eff6ff;
    }

/* Status Badges */
.status-badge[b-mc8czgp0p5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-verified[b-mc8czgp0p5] {
    background-color: #dcfce7;
    color: #166534;
}

.status-unverified[b-mc8czgp0p5] {
    background-color: #fef3c7;
    color: #92400e;
}

/* Image Indicators */
.image-indicators[b-mc8czgp0p5] {
    display: flex;
    gap: 0.25rem;
}

.image-indicator[b-mc8czgp0p5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

    .image-indicator.front[b-mc8czgp0p5] {
        background-color: #3b82f6;
    }

    .image-indicator.back[b-mc8czgp0p5] {
        background-color: #8b5cf6;
    }

/* Measurement Summary */
.measurement-summary[b-mc8czgp0p5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.measurement-count[b-mc8czgp0p5] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
}

    .measurement-count.red[b-mc8czgp0p5] {
        background-color: #ef4444;
    }

    .measurement-count.blue[b-mc8czgp0p5] {
        background-color: #3b82f6;
    }

    .measurement-count.green[b-mc8czgp0p5] {
        background-color: #10b981;
    }

/* Action Buttons */
.action-buttons[b-mc8czgp0p5] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-mc8czgp0p5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-action svg[b-mc8czgp0p5] {
        width: 1rem;
        height: 1rem;
    }

.btn-view[b-mc8czgp0p5] {
    background-color: #dbeafe;
    color: #1d4ed8;
}

    .btn-view:hover[b-mc8czgp0p5] {
        background-color: #bfdbfe;
    }

.btn-delete[b-mc8czgp0p5] {
    background-color: #fee2e2;
    color: #dc2626;
}

    .btn-delete:hover[b-mc8czgp0p5] {
        background-color: #fecaca;
    }

/* Chart Details Row */
.chart-details-row[b-mc8czgp0p5] {
    background-color: #f8fafc;
}

.chart-details-cell[b-mc8czgp0p5] {
    padding: 0 !important;
}

.chart-details-container[b-mc8czgp0p5] {
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

/* Chart Images Section */
.chart-images-section h4[b-mc8czgp0p5] {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
}

.chart-images-grid[b-mc8czgp0p5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-image-container h5[b-mc8czgp0p5] {
    margin: 0 0 0.75rem 0;
    color: #4b5563;
    font-size: 0.875rem;
    font-weight: 500;
}

.chart-image[b-mc8czgp0p5] {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Measurements Section */
.measurements-section h4[b-mc8czgp0p5] {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
}

.measurements-grid[b-mc8czgp0p5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.measurement-group h5[b-mc8czgp0p5] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.measurement-group.red h5[b-mc8czgp0p5] {
    color: #dc2626;
}

.measurement-group.blue h5[b-mc8czgp0p5] {
    color: #2563eb;
}

.measurement-group.green h5[b-mc8czgp0p5] {
    color: #059669;
}

.measurement-list[b-mc8czgp0p5] {
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.measurement-point[b-mc8czgp0p5] {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
    color: #374151;
}

    .measurement-point:last-child[b-mc8czgp0p5] {
        border-bottom: none;
    }

.measurement-more[b-mc8czgp0p5] {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
}

/* Modal Styles */
.modal-overlay[b-mc8czgp0p5] {
    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;
    padding: 1rem;
}

.modal-content[b-mc8czgp0p5] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

    .modal-content.wide-modal[b-mc8czgp0p5] {
        max-width: 1200px;
    }

.modal-header[b-mc8czgp0p5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

    .modal-header h3[b-mc8czgp0p5] {
        margin: 0;
        color: #111827;
        font-size: 1.25rem;
        font-weight: 600;
    }

.btn-close[b-mc8czgp0p5] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #6b7280;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

    .btn-close:hover[b-mc8czgp0p5] {
        background-color: #f3f4f6;
        color: #374151;
    }

    .btn-close svg[b-mc8czgp0p5] {
        width: 1.25rem;
        height: 1.25rem;
    }

.modal-body[b-mc8czgp0p5] {
    padding: 1.5rem;
}

.modal-footer[b-mc8czgp0p5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

/* Chart Info Grid */
.chart-info-section[b-mc8czgp0p5] {
    margin-bottom: 2rem;
}

    .chart-info-section h4[b-mc8czgp0p5] {
        margin: 0 0 1rem 0;
        color: #374151;
        font-size: 1.125rem;
        font-weight: 600;
    }

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

.info-item[b-mc8czgp0p5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.info-label[b-mc8czgp0p5] {
    font-weight: 500;
    color: #374151;
}

.info-value[b-mc8czgp0p5] {
    color: #111827;
    font-weight: 600;
}

/* Large Images in Modal */
.chart-images-large[b-mc8czgp0p5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.chart-image-large-container h4[b-mc8czgp0p5] {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
}

.chart-image-large[b-mc8czgp0p5] {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Delete Dialog Specific */
.btn-danger[b-mc8czgp0p5] {
    background-color: #dc2626;
    color: white;
}

    .btn-danger:hover:not(:disabled)[b-mc8czgp0p5] {
        background-color: #b91c1c;
    }

    .btn-danger:disabled[b-mc8czgp0p5] {
        background-color: #9ca3af;
        cursor: not-allowed;
    }

.btn-spinner[b-mc8czgp0p5] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-mc8czgp0p5 1s linear infinite;
}

/* Alert Styles */
.alert[b-mc8czgp0p5] {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.alert-danger[b-mc8czgp0p5] {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-info[b-mc8czgp0p5] {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.alert h4[b-mc8czgp0p5] {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.alert p[b-mc8czgp0p5] {
    margin: 0;
}

.mb-0[b-mc8czgp0p5] {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .charts-container[b-mc8czgp0p5] {
        padding: 1rem;
    }

    .header-section h1[b-mc8czgp0p5] {
        font-size: 2rem;
    }

    .table-controls[b-mc8czgp0p5] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container[b-mc8czgp0p5] {
        max-width: none;
    }

    .table-actions[b-mc8czgp0p5] {
        justify-content: stretch;
    }

    .btn[b-mc8czgp0p5] {
        flex: 1;
        justify-content: center;
    }

    .charts-table[b-mc8czgp0p5] {
        font-size: 0.875rem;
    }

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

    .chart-images-grid[b-mc8czgp0p5] {
        grid-template-columns: 1fr;
    }

    .measurements-grid[b-mc8czgp0p5] {
        grid-template-columns: 1fr;
    }

    .chart-images-large[b-mc8czgp0p5] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-mc8czgp0p5] {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    .chart-info-grid[b-mc8czgp0p5] {
        grid-template-columns: 1fr;
    }
}
/* _content/HowardWebApp/Components/Pages/Admin/ViewCustomers.razor.rz.scp.css */
/* ViewCustomers.razor.css */
.customers-container[b-qlagf9bugi] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header-section[b-qlagf9bugi] {
    margin-bottom: 2rem;
}

    .header-section h1[b-qlagf9bugi] {
        color: #2d3748;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-qlagf9bugi] {
        color: #718096;
        font-size: 1.125rem;
        margin: 0;
    }

/* Loading Animation */
.loading-container[b-qlagf9bugi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

.loading-spinner[b-qlagf9bugi] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-qlagf9bugi 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

/* Alert Styles */
.alert[b-qlagf9bugi] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid;
}

.alert-danger[b-qlagf9bugi] {
    background-color: #fed7d7;
    color: #742a2a;
    border-color: #f56565;
}

.alert-info[b-qlagf9bugi] {
    background-color: #ebf8ff;
    color: #2c5282;
    border-color: #90cdf4;
}

.alert h4[b-qlagf9bugi] {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Table Controls */
.table-controls[b-qlagf9bugi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    gap: 2rem;
}

.table-info[b-qlagf9bugi] {
    flex: 1;
}

.customer-count[b-qlagf9bugi] {
    margin: 0 0 1rem 0;
    color: #4a5568;
    font-size: 1rem;
}

.search-results[b-qlagf9bugi] {
    color: #718096;
    font-weight: normal;
    font-size: 0.875rem;
}

/* Search Container */
.search-container[b-qlagf9bugi] {
    max-width: 60%;
    width: 50%;
}

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

.search-icon[b-qlagf9bugi] {
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: #a0aec0;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-qlagf9bugi] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s ease;
}

    .search-input:focus[b-qlagf9bugi] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-qlagf9bugi]::placeholder {
        color: #a0aec0;
    }

.clear-search[b-qlagf9bugi] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    color: #a0aec0;
    transition: all 0.2s ease;
}

    .clear-search:hover[b-qlagf9bugi] {
        color: #718096;
        background-color: #f7fafc;
    }

    .clear-search svg[b-qlagf9bugi] {
        width: 0.875rem;
        height: 0.875rem;
    }

.table-actions[b-qlagf9bugi] {
    display: flex;
    gap: 0.5rem;
}

/* Button Styles */
.btn[b-qlagf9bugi] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-primary[b-qlagf9bugi] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-qlagf9bugi] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-qlagf9bugi] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-secondary[b-qlagf9bugi] {
    background: #e2e8f0;
    color: #4a5568;
}

    .btn-secondary:hover:not(:disabled)[b-qlagf9bugi] {
        background: #cbd5e0;
        transform: translateY(-1px);
    }

    .btn-secondary:disabled[b-qlagf9bugi] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.btn-danger[b-qlagf9bugi] {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
}

    .btn-danger:hover:not(:disabled)[b-qlagf9bugi] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3);
    }

    .btn-danger:disabled[b-qlagf9bugi] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-icon[b-qlagf9bugi] {
    width: 1rem;
    height: 1rem;
}

.btn-spinner[b-qlagf9bugi] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-qlagf9bugi 1s linear infinite;
}

.btn-close[b-qlagf9bugi] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #718096;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .btn-close:hover[b-qlagf9bugi] {
        background: #f7fafc;
        color: #4a5568;
    }

    .btn-close svg[b-qlagf9bugi] {
        width: 1.25rem;
        height: 1.25rem;
    }

/* Table Container */
.table-container[b-qlagf9bugi] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* Table Styles */
.customers-table[b-qlagf9bugi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .customers-table thead[b-qlagf9bugi] {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    }

    .customers-table th[b-qlagf9bugi] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

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

        .customers-table tbody tr:hover[b-qlagf9bugi] {
            background-color: #f7fafc;
        }

        .customers-table tbody tr:last-child[b-qlagf9bugi] {
            border-bottom: none;
        }

    .customers-table td[b-qlagf9bugi] {
        padding: 1rem;
        vertical-align: middle;
    }

.customer-name[b-qlagf9bugi] {
    font-weight: 600;
    color: #2d3748;
}

/* Division Code Badges */
.division-badge[b-qlagf9bugi] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.division-ca[b-qlagf9bugi] {
    background-color: #e6fffa;
    color: #234e52;
    border: 1px solid #81e6d9;
}

.division-us[b-qlagf9bugi] {
    background-color: #ebf4ff;
    color: #2c5282;
    border: 1px solid #90cdf4;
}

/* Action Buttons */
.action-buttons[b-qlagf9bugi] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-qlagf9bugi] {
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-action svg[b-qlagf9bugi] {
        width: 1rem;
        height: 1rem;
    }

.btn-view[b-qlagf9bugi] {
    background-color: #e6fffa;
    color: #234e52;
}

    .btn-view:hover[b-qlagf9bugi] {
        background-color: #b2f5ea;
        transform: translateY(-1px);
    }

.btn-stations[b-qlagf9bugi] {
    background-color: #f0f9ff;
    color: #1e40af;
}

    .btn-stations:hover[b-qlagf9bugi] {
        background-color: #dbeafe;
        transform: translateY(-1px);
    }

.btn-edit[b-qlagf9bugi] {
    background-color: #fef5e7;
    color: #744210;
}

    .btn-edit:hover[b-qlagf9bugi] {
        background-color: #f6e05e;
        transform: translateY(-1px);
    }

.btn-delete[b-qlagf9bugi] {
    background-color: #fed7d7;
    color: #742a2a;
}

    .btn-delete:hover[b-qlagf9bugi] {
        background-color: #fc8181;
        transform: translateY(-1px);
    }

/* Modal Styles */
.modal-overlay[b-qlagf9bugi] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content[b-qlagf9bugi] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wide-modal[b-qlagf9bugi] {
    max-width: 100%;
    width: 95%;
}
.med-wide-modal[b-qlagf9bugi] {
    max-width: 50%;
    width: 95%;
}

.modal-header[b-qlagf9bugi] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

    .modal-header h3[b-qlagf9bugi] {
        margin: 0;
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
    }

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

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

/* Customer Details Dialog Styles */
.customer-info-section[b-qlagf9bugi] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .customer-info-section h4[b-qlagf9bugi] {
        margin: 0 0 1rem 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

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

.station-header-and-button[b-qlagf9bugi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 20px;
}

.station-header-button[b-qlagf9bugi] {
    max-width: 250px;
    margin-left: auto; /* Changed from margin: auto */
    flex-shrink: 0;
}

.info-item[b-qlagf9bugi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-qlagf9bugi] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-qlagf9bugi] {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

/* User Assignment Section */
.user-assignment-section[b-qlagf9bugi] {
    margin-top: 1.5rem;
}

    .user-assignment-section h4[b-qlagf9bugi] {
        margin: 0 0 0.5rem 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

.section-description[b-qlagf9bugi] {
    margin: 0 0 1.5rem 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.users-table-container[b-qlagf9bugi] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.users-assignment-table[b-qlagf9bugi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .users-assignment-table thead[b-qlagf9bugi] {
        background: #4a5568;
    }

    .users-assignment-table th[b-qlagf9bugi] {
        padding: 0.75rem 0.5rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

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

        .users-assignment-table tbody tr:hover[b-qlagf9bugi] {
            background-color: #f1f5f9;
        }

        .users-assignment-table tbody tr.selected[b-qlagf9bugi] {
            background-color: #ebf4ff;
        }

            .users-assignment-table tbody tr.selected:hover[b-qlagf9bugi] {
                background-color: #dbeafe;
            }

        .users-assignment-table tbody tr:last-child[b-qlagf9bugi] {
            border-bottom: none;
        }

    .users-assignment-table td[b-qlagf9bugi] {
        padding: 0.75rem 0.5rem;
        vertical-align: middle;
    }

.user-name[b-qlagf9bugi] {
    font-weight: 600;
    color: #2d3748;
}

/* Checkbox Styles */
.checkbox-container[b-qlagf9bugi] {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
}

    .checkbox-container input[b-qlagf9bugi] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark[b-qlagf9bugi] {
    position: relative;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: white;
    border: 2px solid #cbd5e0;
    border-radius: 3px;
    transition: all 0.2s ease;
    display: block;
}

.checkbox-container:hover input ~ .checkmark[b-qlagf9bugi] {
    border-color: #667eea;
}

.checkbox-container input:checked ~ .checkmark[b-qlagf9bugi] {
    background-color: #667eea;
    border-color: #667eea;
}

.checkmark[b-qlagf9bugi]:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark[b-qlagf9bugi]:after {
    display: block;
}

.checkbox-container .checkmark[b-qlagf9bugi]:after {
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Status Badge */
.status-badge[b-qlagf9bugi] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-active[b-qlagf9bugi] {
    background-color: #d1fae5;
    color: #064e3b;
    border: 1px solid #6ee7b7;
}

.status-inactive[b-qlagf9bugi] {
    background-color: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

.status-admin[b-qlagf9bugi] {
    background-color: #e0e7ff;
    color: #3730a3;
    border: 1px solid #a5b4fc;
}

.status-user[b-qlagf9bugi] {
    background-color: #f0f9ff;
    color: #0c4a6e;
    border: 1px solid #7dd3fc;
}

/* Assignment Summary */
.assignment-summary[b-qlagf9bugi] {
    padding: 0.75rem 1rem;
    background: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #0c4a6e;
}

.unsaved-changes[b-qlagf9bugi] {
    color: #dc2626;
    font-weight: 600;
}

/* Stations Dialog Styles */
.stations-search-container[b-qlagf9bugi] {
    margin-bottom: 1.5rem;
}

.station-search-input[b-qlagf9bugi] {
    font-size: 0.875rem;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
}

    .station-search-input[b-qlagf9bugi]::placeholder {
        font-size: 0.8rem;
    }

.stations-summary[b-qlagf9bugi] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

    .stations-summary p[b-qlagf9bugi] {
        margin: 0;
        color: #4a5568;
        font-size: 0.9rem;
    }

.stations-table-container[b-qlagf9bugi] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: auto;
    max-height: 500px;
}

.stations-table[b-qlagf9bugi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 1200px;
}

    .stations-table thead[b-qlagf9bugi] {
        background: #4a5568;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .stations-table th[b-qlagf9bugi] {
        padding: 0.75rem 0.5rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

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

        .stations-table tbody tr:hover[b-qlagf9bugi] {
            background-color: #f7fafc;
        }

        .stations-table tbody tr:last-child[b-qlagf9bugi] {
            border-bottom: none;
        }

    .stations-table td[b-qlagf9bugi] {
        padding: 0.5rem;
        vertical-align: middle;
        font-size: 0.75rem;
        border-right: 1px solid #f1f5f9;
    }

        .stations-table td:last-child[b-qlagf9bugi] {
            border-right: none;
        }

/* Responsive Design */
@media (max-width: 768px) {
    .customers-container[b-qlagf9bugi] {
        padding: 1rem;
    }

    .table-controls[b-qlagf9bugi] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-container[b-qlagf9bugi] {
        max-width: none;
    }

    .modal-content[b-qlagf9bugi] {
        width: 95%;
        margin: 0.5rem;
    }

    .wide-modal[b-qlagf9bugi] {
        width: 98%;
        max-height: 95vh;
    }

    .customer-info-grid[b-qlagf9bugi] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-qlagf9bugi] {
        flex-wrap: wrap;
    }

    .stations-table-container[b-qlagf9bugi] {
        max-height: 400px;
    }

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

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

    .modal-footer[b-qlagf9bugi] {
        padding: 1rem;
    }
}

/* Form Styles */
.form-group[b-qlagf9bugi] {
    margin-bottom: 1.5rem;
}

.form-label[b-qlagf9bugi] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.form-input[b-qlagf9bugi] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-input:focus[b-qlagf9bugi] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-input:invalid[b-qlagf9bugi] {
        border-color: #f56565;
    }

.stations-data-container[b-qlagf9bugi] {
    padding: 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

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

    .stations-data-header h4[b-qlagf9bugi] {
        margin: 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

.stations-data-grid[b-qlagf9bugi] {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    margin-top: 0;
    background: transparent;
    padding-left:10%;
    padding-right:10%;
}

.datas-item[b-qlagf9bugi] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding: 0.75rem !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    margin: 0 !important;
    transition: all 0.2s ease;
}

    .datas-item:hover[b-qlagf9bugi] {
        background-color: #f8fafc !important;
        border-color: #cbd5e0 !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

.datas-label[b-qlagf9bugi] {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
}

.datas-value[b-qlagf9bugi] {
    font-size: 0.875rem !important;
    color: #374151 !important;
    font-weight: 500 !important;
    font-family: 'Courier New', monospace !important;
    margin: 0 !important;
}
.station-data-form-grid[b-qlagf9bugi] {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.5rem !important;
    margin-top: 1rem;
    padding: 0 1rem;
}

.form-section[b-qlagf9bugi] {
    background: #f8fafc !important;
    padding: 1.5rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    height: fit-content;
}

    .form-section h4[b-qlagf9bugi] {
        margin: 0 0 1rem 0 !important;
        color: #2d3748 !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 0.5rem;
    }

/* Responsive design for mobile */
@media (max-width: 768px) {
    .station-data-form-grid[b-qlagf9bugi] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0;
    }
}

@media (max-width: 1200px) and (min-width: 769px) {
    .station-data-form-grid[b-qlagf9bugi] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
/* ===== FORMS ===== */
.form-group[b-qlagf9bugi] {
    margin-bottom: 1.5rem;
}

.form-label[b-qlagf9bugi] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.form-input[b-qlagf9bugi] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-input:focus[b-qlagf9bugi] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-input:invalid[b-qlagf9bugi] {
        border-color: #f56565;
    }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .stations-container[b-qlagf9bugi] {
        padding: 1rem;
    }

    .table-controls[b-qlagf9bugi] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-container[b-qlagf9bugi] {
        max-width: none;
        width: 100%;
    }

    .modal-content[b-qlagf9bugi] {
        width: 95%;
        margin: 0.5rem;
    }

    .station-info-grid[b-qlagf9bugi] {
        grid-template-columns: 1fr;
    }

    .stations-data-grid[b-qlagf9bugi] {
        grid-template-columns: 1fr !important;
    }

    .action-buttons[b-qlagf9bugi] {
        flex-wrap: wrap;
    }

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

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

    .modal-footer[b-qlagf9bugi] {
        padding: 1rem;
    }

    /* Mobile table adjustments */
    .stations-table[b-qlagf9bugi] {
        font-size: 0.75rem;
    }

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

    .stations-data-container[b-qlagf9bugi] {
        padding: 1rem;
    }

    .stations-data-header[b-qlagf9bugi] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .expansion-cell[b-qlagf9bugi] {
        position: sticky;
        left: 0;
        background-color: inherit;
        z-index: 1;
    }
}
/* Stations Header Content */
.stations-header-content[b-qlagf9bugi] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .stations-header-content h3[b-qlagf9bugi] {
        margin: 0;
    }

/* Add Station Form Grid */
.add-station-form-grid[b-qlagf9bugi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.form-column[b-qlagf9bugi] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Responsive Design for Add Station Form */
@media (max-width: 768px) {
    .add-station-form-grid[b-qlagf9bugi] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stations-header-content[b-qlagf9bugi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

.station-data-table[b-qlagf9bugi] {
    width: 60%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-left:auto;
    margin-right:auto;
}

    .station-data-table thead[b-qlagf9bugi] {
        background: #586f90;
    }

    .station-data-table th[b-qlagf9bugi] {
        padding: 0.5rem;
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

.station-data-list[b-qlagf9bugi]{
    padding-bottom:50px;
}
.station-data-row[b-qlagf9bugi] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .station-data-row:hover[b-qlagf9bugi] {
        background-color: #f7fafc;
    }

.station-data-details-cell[b-qlagf9bugi] {
    padding: 1rem;
    background: #f8fafc;
}

.email-distribution-section[b-qlagf9bugi] {
    margin-top: 2rem;
    padding: 1.5rem 2rem 0 2rem;
    border-top: 2px solid #e2e8f0;
}

    .email-distribution-section h4[b-qlagf9bugi] {
        margin: 0 0 0.5rem 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

.email-list[b-qlagf9bugi] {
    margin-bottom: 1.5rem;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}


.email-item[b-qlagf9bugi] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: white;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .email-item:last-child[b-qlagf9bugi] {
        border-bottom: none;
    }

    .email-item:hover[b-qlagf9bugi] {
        background-color: #f7fafc;
        transform: translateY(-1px);
    }

.email-address[b-qlagf9bugi] {
    flex: 1;
    font-size: 0.875rem;
    color: #2d3748;
    font-weight: 500;
}

.email-type-badge[b-qlagf9bugi] {
    padding: 0.35rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
}

.btn-remove-email[b-qlagf9bugi] {
    padding: 0.5rem;
    background: #fed7d7;
    border: 1px solid #f56565;
    color: #742a2a;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .btn-remove-email:hover[b-qlagf9bugi] {
        background: #fc8181;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(245, 101, 101, 0.2);
    }

.add-email-form[b-qlagf9bugi] {
    position: sticky;
    bottom: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

    .add-email-form .form-group[b-qlagf9bugi] {
        margin-bottom: 0;
    }

        .add-email-form .form-group:first-child[b-qlagf9bugi] {
            flex: 2;
            min-width: 250px;
        }

        .add-email-form .form-group:nth-child(2)[b-qlagf9bugi] {
            flex: 1;
            min-width: 180px;
        }

    .add-email-form .btn[b-qlagf9bugi] {
        height: 42px; /* Match input height */
        align-self: flex-end;
        flex-shrink: 0;
    }

.email-distribution-section[b-qlagf9bugi] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e2e8f0;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.add-email-form[b-qlagf9bugi] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 0; /* Reset any margins */
}

.email-distribution-header[b-qlagf9bugi] {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1rem;
}

.email-distribution-content[b-qlagf9bugi] {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .email-distribution-content.collapsed[b-qlagf9bugi] {
        max-height: 0;
    }

    .email-distribution-content.expanded[b-qlagf9bugi] {
        max-height: 400px;
        overflow-y: auto;
    }


.email-type-section[b-qlagf9bugi] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

    .email-type-section h5[b-qlagf9bugi] {
        margin: 0 0 0.75rem 0;
        color: #2d3748;
        font-size: 0.95rem;
        font-weight: 600;
    }

.expand-icon[b-qlagf9bugi] {
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

    .expand-icon.expanded[b-qlagf9bugi] {
        transform: rotate(90deg);
    }
/* Tab Navigation Styles */
.tab-navigation[b-qlagf9bugi] {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2rem;
    gap: 0;
}

.tab-button[b-qlagf9bugi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .tab-button:hover[b-qlagf9bugi] {
        color: #374151;
        background-color: #f9fafb;
    }

    .tab-button.active[b-qlagf9bugi] {
        color: #667eea;
        border-bottom-color: #667eea;
        background-color: #f8fafc;
    }

.tab-icon[b-qlagf9bugi] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.tab-content[b-qlagf9bugi] {
    min-height: 400px;
}

.tab-panel[b-qlagf9bugi] {
    animation: fadeIn-b-qlagf9bugi 0.2s ease-in;
}

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

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

/* Mobile responsive tabs */
@media (max-width: 768px) {
    .tab-navigation[b-qlagf9bugi] {
        flex-direction: column;
        border-bottom: none;
        border-right: 2px solid #e2e8f0;
        margin-bottom: 1rem;
    }

    .tab-button[b-qlagf9bugi] {
        border-bottom: none;
        border-right: 3px solid transparent;
        text-align: left;
        justify-content: flex-start;
    }

        .tab-button.active[b-qlagf9bugi] {
            border-bottom-color: transparent;
            border-right-color: #667eea;
        }
}
/* _content/HowardWebApp/Components/Pages/Admin/ViewStations.razor.rz.scp.css */
/* ViewCustomers.razor.css */
.customers-container[b-l1isgbxc5n] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header-section[b-l1isgbxc5n] {
    margin-bottom: 2rem;
}

    .header-section h1[b-l1isgbxc5n] {
        color: #2d3748;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-l1isgbxc5n] {
        color: #718096;
        font-size: 1.125rem;
        margin: 0;
    }

/* Loading Animation */
.loading-container[b-l1isgbxc5n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

.loading-spinner[b-l1isgbxc5n] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-l1isgbxc5n 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

/* Alert Styles */
.alert[b-l1isgbxc5n] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid;
}

.alert-danger[b-l1isgbxc5n] {
    background-color: #fed7d7;
    color: #742a2a;
    border-color: #f56565;
}

.alert-info[b-l1isgbxc5n] {
    background-color: #ebf8ff;
    color: #2c5282;
    border-color: #90cdf4;
}

.alert h4[b-l1isgbxc5n] {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Table Controls */
.table-controls[b-l1isgbxc5n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    gap: 2rem;
}

.table-info[b-l1isgbxc5n] {
    flex: 1;
}

.customer-count[b-l1isgbxc5n] {
    margin: 0 0 1rem 0;
    color: #4a5568;
    font-size: 1rem;
}

.search-results[b-l1isgbxc5n] {
    color: #718096;
    font-weight: normal;
    font-size: 0.875rem;
}

/* Search Container */
.search-container[b-l1isgbxc5n] {
    max-width: 60%;
    width: 50%;
}

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

.search-icon[b-l1isgbxc5n] {
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: #a0aec0;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-l1isgbxc5n] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s ease;
}

    .search-input:focus[b-l1isgbxc5n] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-l1isgbxc5n]::placeholder {
        color: #a0aec0;
    }

.clear-search[b-l1isgbxc5n] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    color: #a0aec0;
    transition: all 0.2s ease;
}

    .clear-search:hover[b-l1isgbxc5n] {
        color: #718096;
        background-color: #f7fafc;
    }

    .clear-search svg[b-l1isgbxc5n] {
        width: 0.875rem;
        height: 0.875rem;
    }

.table-actions[b-l1isgbxc5n] {
    display: flex;
    gap: 0.5rem;
}

/* Button Styles */
.btn[b-l1isgbxc5n] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-primary[b-l1isgbxc5n] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-l1isgbxc5n] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-l1isgbxc5n] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-secondary[b-l1isgbxc5n] {
    background: #e2e8f0;
    color: #4a5568;
}

    .btn-secondary:hover:not(:disabled)[b-l1isgbxc5n] {
        background: #cbd5e0;
        transform: translateY(-1px);
    }

    .btn-secondary:disabled[b-l1isgbxc5n] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.btn-danger[b-l1isgbxc5n] {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
}

    .btn-danger:hover:not(:disabled)[b-l1isgbxc5n] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3);
    }

    .btn-danger:disabled[b-l1isgbxc5n] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-icon[b-l1isgbxc5n] {
    width: 1rem;
    height: 1rem;
}

.btn-spinner[b-l1isgbxc5n] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-l1isgbxc5n 1s linear infinite;
}

.btn-close[b-l1isgbxc5n] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #718096;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .btn-close:hover[b-l1isgbxc5n] {
        background: #f7fafc;
        color: #4a5568;
    }

    .btn-close svg[b-l1isgbxc5n] {
        width: 1.25rem;
        height: 1.25rem;
    }

/* Table Container */
.table-container[b-l1isgbxc5n] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* Table Styles */
.customers-table[b-l1isgbxc5n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .customers-table thead[b-l1isgbxc5n] {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    }

    .customers-table th[b-l1isgbxc5n] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

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

        .customers-table tbody tr:hover[b-l1isgbxc5n] {
            background-color: #f7fafc;
        }

        .customers-table tbody tr:last-child[b-l1isgbxc5n] {
            border-bottom: none;
        }

    .customers-table td[b-l1isgbxc5n] {
        padding: 1rem;
        vertical-align: middle;
    }

.customer-name[b-l1isgbxc5n] {
    font-weight: 600;
    color: #2d3748;
}

/* Division Code Badges */
.division-badge[b-l1isgbxc5n] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.division-ca[b-l1isgbxc5n] {
    background-color: #e6fffa;
    color: #234e52;
    border: 1px solid #81e6d9;
}

.division-us[b-l1isgbxc5n] {
    background-color: #ebf4ff;
    color: #2c5282;
    border: 1px solid #90cdf4;
}

/* Action Buttons */
.action-buttons[b-l1isgbxc5n] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-l1isgbxc5n] {
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-action svg[b-l1isgbxc5n] {
        width: 1rem;
        height: 1rem;
    }

.btn-view[b-l1isgbxc5n] {
    background-color: #e6fffa;
    color: #234e52;
}

    .btn-view:hover[b-l1isgbxc5n] {
        background-color: #b2f5ea;
        transform: translateY(-1px);
    }

.btn-stations[b-l1isgbxc5n] {
    background-color: #f0f9ff;
    color: #1e40af;
}

    .btn-stations:hover[b-l1isgbxc5n] {
        background-color: #dbeafe;
        transform: translateY(-1px);
    }

.btn-edit[b-l1isgbxc5n] {
    background-color: #fef5e7;
    color: #744210;
}

    .btn-edit:hover[b-l1isgbxc5n] {
        background-color: #f6e05e;
        transform: translateY(-1px);
    }

.btn-delete[b-l1isgbxc5n] {
    background-color: #fed7d7;
    color: #742a2a;
}

    .btn-delete:hover[b-l1isgbxc5n] {
        background-color: #fc8181;
        transform: translateY(-1px);
    }

/* Modal Styles */
.modal-overlay[b-l1isgbxc5n] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content[b-l1isgbxc5n] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wide-modal[b-l1isgbxc5n] {
    max-width: 100%;
    width: 95%;
}

.modal-header[b-l1isgbxc5n] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

    .modal-header h3[b-l1isgbxc5n] {
        margin: 0;
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
    }

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

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

/* Customer Details Dialog Styles */
.customer-info-section[b-l1isgbxc5n] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .customer-info-section h4[b-l1isgbxc5n] {
        margin: 0 0 1rem 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

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

.info-item[b-l1isgbxc5n] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-l1isgbxc5n] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-l1isgbxc5n] {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

/* User Assignment Section */
.user-assignment-section[b-l1isgbxc5n] {
    margin-top: 1.5rem;
}

    .user-assignment-section h4[b-l1isgbxc5n] {
        margin: 0 0 0.5rem 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

.section-description[b-l1isgbxc5n] {
    margin: 0 0 1.5rem 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.users-table-container[b-l1isgbxc5n] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.users-assignment-table[b-l1isgbxc5n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .users-assignment-table thead[b-l1isgbxc5n] {
        background: #4a5568;
    }

    .users-assignment-table th[b-l1isgbxc5n] {
        padding: 0.75rem 0.5rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

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

        .users-assignment-table tbody tr:hover[b-l1isgbxc5n] {
            background-color: #f1f5f9;
        }

        .users-assignment-table tbody tr.selected[b-l1isgbxc5n] {
            background-color: #ebf4ff;
        }

            .users-assignment-table tbody tr.selected:hover[b-l1isgbxc5n] {
                background-color: #dbeafe;
            }

        .users-assignment-table tbody tr:last-child[b-l1isgbxc5n] {
            border-bottom: none;
        }

    .users-assignment-table td[b-l1isgbxc5n] {
        padding: 0.75rem 0.5rem;
        vertical-align: middle;
    }

.user-name[b-l1isgbxc5n] {
    font-weight: 600;
    color: #2d3748;
}

/* Checkbox Styles */
.checkbox-container[b-l1isgbxc5n] {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
}

    .checkbox-container input[b-l1isgbxc5n] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark[b-l1isgbxc5n] {
    position: relative;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: white;
    border: 2px solid #cbd5e0;
    border-radius: 3px;
    transition: all 0.2s ease;
    display: block;
}

.checkbox-container:hover input ~ .checkmark[b-l1isgbxc5n] {
    border-color: #667eea;
}

.checkbox-container input:checked ~ .checkmark[b-l1isgbxc5n] {
    background-color: #667eea;
    border-color: #667eea;
}

.checkmark[b-l1isgbxc5n]:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark[b-l1isgbxc5n]:after {
    display: block;
}

.checkbox-container .checkmark[b-l1isgbxc5n]:after {
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Status Badge */
.status-badge[b-l1isgbxc5n] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-active[b-l1isgbxc5n] {
    background-color: #d1fae5;
    color: #064e3b;
    border: 1px solid #6ee7b7;
}

.status-inactive[b-l1isgbxc5n] {
    background-color: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

.status-admin[b-l1isgbxc5n] {
    background-color: #e0e7ff;
    color: #3730a3;
    border: 1px solid #a5b4fc;
}

.status-user[b-l1isgbxc5n] {
    background-color: #f0f9ff;
    color: #0c4a6e;
    border: 1px solid #7dd3fc;
}

/* Assignment Summary */
.assignment-summary[b-l1isgbxc5n] {
    padding: 0.75rem 1rem;
    background: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #0c4a6e;
}

.unsaved-changes[b-l1isgbxc5n] {
    color: #dc2626;
    font-weight: 600;
}

/* Stations Dialog Styles */
.stations-search-container[b-l1isgbxc5n] {
    margin-bottom: 1.5rem;
}

.station-search-input[b-l1isgbxc5n] {
    font-size: 0.875rem;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
}

    .station-search-input[b-l1isgbxc5n]::placeholder {
        font-size: 0.8rem;
    }

.stations-summary[b-l1isgbxc5n] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

    .stations-summary p[b-l1isgbxc5n] {
        margin: 0;
        color: #4a5568;
        font-size: 0.9rem;
    }


/* Station Data Expanded - 3 Column Layout */
.station-data-expanded[b-l1isgbxc5n] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 0.5rem 0;
    padding: 1rem;
}

.station-datas-grid[b-l1isgbxc5n] {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 1rem; /* spacing between cells */
    padding: 1rem;
}
.datas-item[b-l1isgbxc5n] {
    background: #f8fafc;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.datas-label[b-l1isgbxc5n] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
}

.datas-value[b-l1isgbxc5n] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #2d3748;
}

/* Enhanced Action Button for Station Data */
.btn-edit-station-data[b-l1isgbxc5n] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-edit-station-data:hover[b-l1isgbxc5n] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-edit-station-data svg[b-l1isgbxc5n] {
        width: 1rem;
        height: 1rem;
    }

/* Gas Component Styling */
.gas-component-major[b-l1isgbxc5n] {
    background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 100%);
    border-left: 3px solid #10b981;
}

.gas-component-minor[b-l1isgbxc5n] {
    background: linear-gradient(90deg, #fef3c7 0%, #fef7cd 100%);
    border-left: 3px solid #f59e0b;
}

.gas-component-trace[b-l1isgbxc5n] {
    background: linear-gradient(90deg, #f3e8ff 0%, #f5f3ff 100%);
    border-left: 3px solid #8b5cf6;
}

/* Station Data Form Grid */
.station-data-form-grid[b-l1isgbxc5n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.form-section[b-l1isgbxc5n] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
}

    .form-section h4[b-l1isgbxc5n] {
        margin: 0 0 1.5rem 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #667eea;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .station-data-grid[b-l1isgbxc5n] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .customers-container[b-l1isgbxc5n] {
        padding: 1rem;
    }

    .table-controls[b-l1isgbxc5n] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-container[b-l1isgbxc5n] {
        max-width: none;
    }

    .modal-content[b-l1isgbxc5n] {
        width: 95%;
        margin: 0.5rem;
    }

    .wide-modal[b-l1isgbxc5n] {
        width: 98%;
        max-height: 95vh;
    }

    .customer-info-grid[b-l1isgbxc5n] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-l1isgbxc5n] {
        flex-wrap: wrap;
    }

    .stations-table-container[b-l1isgbxc5n] {
        max-height: 400px;
    }

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

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

    .modal-footer[b-l1isgbxc5n] {
        padding: 1rem;
    }

    .station-data-form-grid[b-l1isgbxc5n] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .station-data-grid[b-l1isgbxc5n] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .station-data-expanded[b-l1isgbxc5n] {
        padding: 0.75rem;
    }

    .station-data-card[b-l1isgbxc5n] {
        padding: 1rem;
    }
}

/* Form Styles */
.form-group[b-l1isgbxc5n] {
    margin-bottom: 1.5rem;
}

.form-label[b-l1isgbxc5n] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.form-input[b-l1isgbxc5n] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-input:focus[b-l1isgbxc5n] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-input:invalid[b-l1isgbxc5n] {
        border-color: #f56565;
    }
/* _content/HowardWebApp/Components/Pages/Admin/ViewUsers.razor.rz.scp.css */
/* ViewUsers.razor.css */
.users-container[b-u7xokjhevf] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header-section[b-u7xokjhevf] {
    margin-bottom: 2rem;
}

    .header-section h1[b-u7xokjhevf] {
        color: #2d3748;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-u7xokjhevf] {
        color: #718096;
        font-size: 1.125rem;
        margin: 0;
    }

/* Loading Animation */
.loading-container[b-u7xokjhevf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

.loading-spinner[b-u7xokjhevf] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-u7xokjhevf 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

/* Alert Styles */
.alert[b-u7xokjhevf] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid;
}

.alert-danger[b-u7xokjhevf] {
    background-color: #fed7d7;
    color: #742a2a;
    border-color: #f56565;
}

.alert-info[b-u7xokjhevf] {
    background-color: #ebf8ff;
    color: #2c5282;
    border-color: #90cdf4;
}

.alert h4[b-u7xokjhevf] {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Table Controls */
.table-controls[b-u7xokjhevf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    gap: 2rem;
}

.table-info[b-u7xokjhevf] {
    flex: 1;
}

.user-count[b-u7xokjhevf] {
    margin: 0 0 1rem 0;
    color: #4a5568;
    font-size: 1rem;
}

.search-results[b-u7xokjhevf] {
    color: #718096;
    font-weight: normal;
    font-size: 0.875rem;
}

/* Search Container */
.search-container[b-u7xokjhevf] {
    max-width: 400px;
}

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

.search-icon[b-u7xokjhevf] {
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: #a0aec0;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-u7xokjhevf] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s ease;
}

    .search-input:focus[b-u7xokjhevf] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-u7xokjhevf]::placeholder {
        color: #a0aec0;
    }

.clear-search[b-u7xokjhevf] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    color: #a0aec0;
    transition: all 0.2s ease;
}

    .clear-search:hover[b-u7xokjhevf] {
        color: #718096;
        background-color: #f7fafc;
    }

    .clear-search svg[b-u7xokjhevf] {
        width: 0.875rem;
        height: 0.875rem;
    }

.table-actions[b-u7xokjhevf] {
    display: flex;
    gap: 0.5rem;
}

/* Button Styles */
.btn[b-u7xokjhevf] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-primary[b-u7xokjhevf] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-u7xokjhevf] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-u7xokjhevf] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-secondary[b-u7xokjhevf] {
    background: #e2e8f0;
    color: #4a5568;
}

    .btn-secondary:hover:not(:disabled)[b-u7xokjhevf] {
        background: #cbd5e0;
        transform: translateY(-1px);
    }

    .btn-secondary:disabled[b-u7xokjhevf] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.btn-danger[b-u7xokjhevf] {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
}

    .btn-danger:hover:not(:disabled)[b-u7xokjhevf] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3);
    }

    .btn-danger:disabled[b-u7xokjhevf] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-icon[b-u7xokjhevf] {
    width: 1rem;
    height: 1rem;
}

.btn-spinner[b-u7xokjhevf] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-u7xokjhevf 1s linear infinite;
}

/* Table Container */
.table-container[b-u7xokjhevf] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* Table Styles */
.users-table[b-u7xokjhevf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .users-table thead[b-u7xokjhevf] {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    }

    .users-table th[b-u7xokjhevf] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

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

        .users-table tbody tr:hover[b-u7xokjhevf] {
            background-color: #f7fafc;
        }

        .users-table tbody tr:last-child[b-u7xokjhevf] {
            border-bottom: none;
        }

    .users-table td[b-u7xokjhevf] {
        padding: 1rem;
        vertical-align: middle;
    }

.username[b-u7xokjhevf] {
    font-weight: 600;
    color: #2d3748;
}

.email[b-u7xokjhevf] {
    color: #4a5568;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
}

.customer-count[b-u7xokjhevf] {
    color: #4a5568;
    font-weight: 600;
    text-align: center;
}

/* Role Badges */
.role-badge[b-u7xokjhevf] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.role-admin[b-u7xokjhevf] {
    background-color: #fed7d7;
    color: #742a2a;
    border: 1px solid #f56565;
}

.role-user[b-u7xokjhevf] {
    background-color: #e6fffa;
    color: #234e52;
    border: 1px solid #81e6d9;
}

/* Action Buttons */
.action-buttons[b-u7xokjhevf] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-u7xokjhevf] {
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-action svg[b-u7xokjhevf] {
        width: 1rem;
        height: 1rem;
    }

.btn-view[b-u7xokjhevf] {
    background-color: #e6fffa;
    color: #234e52;
}

    .btn-view:hover[b-u7xokjhevf] {
        background-color: #b2f5ea;
        transform: translateY(-1px);
    }

.btn-edit[b-u7xokjhevf] {
    background-color: #fef5e7;
    color: #744210;
}

    .btn-edit:hover[b-u7xokjhevf] {
        background-color: #f6e05e;
        transform: translateY(-1px);
    }

.btn-delete[b-u7xokjhevf] {
    background-color: #fed7d7;
    color: #742a2a;
}

    .btn-delete:hover[b-u7xokjhevf] {
        background-color: #fc8181;
        transform: translateY(-1px);
    }

/* Modal Styles */
.modal-overlay[b-u7xokjhevf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content[b-u7xokjhevf] {
    background: white;
    border-radius: 12px;
    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-u7xokjhevf 0.2s ease-out;
}

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

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

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

    .modal-header h3[b-u7xokjhevf] {
        margin: 0;
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
    }

.modal-close[b-u7xokjhevf] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    color: #a0aec0;
    transition: all 0.2s ease;
}

    .modal-close:hover[b-u7xokjhevf] {
        color: #718096;
        background-color: #f7fafc;
    }

    .modal-close svg[b-u7xokjhevf] {
        width: 1rem;
        height: 1rem;
    }

.modal-body[b-u7xokjhevf] {
    padding: 1.5rem;
}

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

/* Delete Confirmation Styles */
.delete-confirmation[b-u7xokjhevf] {
    text-align: center;
}

.delete-icon[b-u7xokjhevf] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

    .delete-icon svg[b-u7xokjhevf] {
        width: 3rem;
        height: 3rem;
    }

.delete-confirmation h4[b-u7xokjhevf] {
    margin: 0 0 1rem 0;
    color: #2d3748;
    font-size: 1.125rem;
    font-weight: 600;
}

.user-details[b-u7xokjhevf] {
    background: #f7fafc;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    color: #4a5568;
    font-size: 0.875rem;
}

.warning-text[b-u7xokjhevf] {
    color: #e53e3e;
    font-size: 0.875rem;
    margin: 0;
}

/* Form Styles */
.form-group[b-u7xokjhevf] {
    margin-bottom: 1.25rem;
}

    .form-group label[b-u7xokjhevf] {
        display: block;
        margin-bottom: 0.5rem;
        color: #374151;
        font-weight: 500;
        font-size: 0.875rem;
    }

.form-input[b-u7xokjhevf] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-input:focus[b-u7xokjhevf] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-input:invalid[b-u7xokjhevf] {
        border-color: #f56565;
    }

/* Customer Assignment Modal */
.customer-assignment-modal[b-u7xokjhevf] {
    max-width: 700px;
    max-height: 80vh;
}

.customer-assignment-info[b-u7xokjhevf] {
    background: #f7fafc;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
}

    .customer-assignment-info p[b-u7xokjhevf] {
        margin: 0.25rem 0;
        color: #4a5568;
        font-size: 0.875rem;
    }

.customer-search-container[b-u7xokjhevf] {
    margin-bottom: 1rem;
}

.customer-search-info[b-u7xokjhevf] {
    margin-bottom: 0.5rem;
    text-align: right;
    color: #718096;
}

.customer-list-container[b-u7xokjhevf] {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    max-height: 400px;
    overflow: hidden;
}

.customer-list-header[b-u7xokjhevf] {
    background: #f7fafc;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.select-all-container[b-u7xokjhevf] {
    display: flex;
    align-items: center;
}

.customer-list[b-u7xokjhevf] {
    max-height: 350px;
    overflow-y: auto;
}

.customer-item[b-u7xokjhevf] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
}

    .customer-item:hover[b-u7xokjhevf] {
        background-color: #f8fafc;
    }

    .customer-item:last-child[b-u7xokjhevf] {
        border-bottom: none;
    }

    .customer-item.assigned[b-u7xokjhevf] {
        background-color: #f0fff4;
        border-left: 4px solid #48bb78;
    }

.checkbox-container[b-u7xokjhevf] {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    position: relative;
    padding-left: 2rem;
    user-select: none;
}

    .checkbox-container input[b-u7xokjhevf] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark[b-u7xokjhevf] {
    position: absolute;
    top: 0.125rem;
    left: 0;
    height: 1.25rem;
    width: 1.25rem;
    background-color: white;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.checkbox-container:hover input ~ .checkmark[b-u7xokjhevf] {
    border-color: #667eea;
}

.checkbox-container input:checked ~ .checkmark[b-u7xokjhevf] {
    background-color: #667eea;
    border-color: #667eea;
}

.checkmark[b-u7xokjhevf]:after {
    content: "";
    position: absolute;
    display: none;
    left: 0.25rem;
    top: 0.125rem;
    width: 0.375rem;
    height: 0.625rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container input:checked ~ .checkmark[b-u7xokjhevf]:after {
    display: block;
}

.customer-info[b-u7xokjhevf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.customer-name[b-u7xokjhevf] {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.875rem;
}

.customer-details[b-u7xokjhevf] {
    color: #718096;
    font-size: 0.75rem;
    font-family: 'Courier New', Courier, monospace;
}

.label-text[b-u7xokjhevf] {
    color: #4a5568;
    font-weight: 500;
}

.no-customers-message[b-u7xokjhevf] {
    padding: 2rem;
    text-align: center;
    color: #718096;
}

    .no-customers-message p[b-u7xokjhevf] {
        margin: 0;
        font-style: italic;
    }

.assignment-summary[b-u7xokjhevf] {
    color: #4a5568;
    font-weight: 500;
    font-size: 0.875rem;
}

.modal-buttons[b-u7xokjhevf] {
    display: flex;
    gap: 0.75rem;
}

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

    .table-controls[b-u7xokjhevf] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .table-info[b-u7xokjhevf] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .search-container[b-u7xokjhevf] {
        max-width: none;
    }

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

    .users-table[b-u7xokjhevf] {
        min-width: 600px;
    }
}

@media (max-width: 768px) {
    .header-section h1[b-u7xokjhevf] {
        font-size: 2rem;
    }

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

    .action-buttons[b-u7xokjhevf] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .btn-action[b-u7xokjhevf] {
        padding: 0.375rem;
    }

    .modal-content[b-u7xokjhevf] {
        width: 95%;
        margin: 1rem;
    }

    .modal-header[b-u7xokjhevf],
    .modal-body[b-u7xokjhevf],
    .modal-footer[b-u7xokjhevf] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

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

    .users-table[b-u7xokjhevf] {
        font-size: 0.75rem;
    }

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

    .modal-footer[b-u7xokjhevf] {
        flex-direction: column;
    }

        .modal-footer .btn[b-u7xokjhevf] {
            width: 100%;
            justify-content: center;
        }
}
/* _content/HowardWebApp/Components/Pages/Audit.razor.rz.scp.css */
.audit-container[b-18yp0on2di] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.header-section[b-18yp0on2di] {
    margin-bottom: 1rem;
}

    .header-section h1[b-18yp0on2di] {
        color: #2d3748;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-18yp0on2di] {
        color: #718096;
        font-size: 1.125rem;
        margin: 0;
    }

.chart-selector[b-18yp0on2di] {
    margin-bottom: 30px;
}

    .chart-selector label[b-18yp0on2di] {
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
    }

.audit-layout[b-18yp0on2di] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    min-height: 600px;
}
.chart-counter[b-18yp0on2di] {
    margin-bottom: 10px;
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.counter-info[b-18yp0on2di] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.counter-text[b-18yp0on2di] {
    font-size: 1.1rem;
    color: #495057;
}

.current-chart[b-18yp0on2di] {
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
}

.image-column[b-18yp0on2di] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
}

.data-column[b-18yp0on2di] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.data-sections[b-18yp0on2di] {
    flex: 1;
    overflow-y: auto;
    max-height: 600px;
}

.data-section[b-18yp0on2di] {
    margin-bottom: 30px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
}

    .data-section:last-child[b-18yp0on2di] {
        border-bottom: none;
    }

    .data-section h4[b-18yp0on2di] {
        color: #495057;
        margin-bottom: 20px;
        font-size: 1.2rem;
        font-weight: 600;
    }

.form-grid[b-18yp0on2di] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.form-group[b-18yp0on2di] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-18yp0on2di] {
        font-weight: 500;
        color: #495057;
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

.form-control[b-18yp0on2di] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: border-color 0.15s ease-in-out;
}

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

    .form-control:disabled[b-18yp0on2di] {
        background-color: #e9ecef;
        opacity: 1;
    }

.form-check-input[b-18yp0on2di] {
    margin: 8px 0;
}


.image-viewer-section h4[b-18yp0on2di] {
    color: #495057;
    margin-bottom: 20px;
    text-align: center;
}

.image-viewer[b-18yp0on2di] {
    position: relative;
    background: #ffffff;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    height: 500px;
    overflow: hidden;
}

.image-canvas[b-18yp0on2di] {
    position: relative;
    width: 100%;
    height: 400px; /* Fixed height like TextProcessing */
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f0f0f0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.interactive-image[b-18yp0on2di] {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    cursor: grab;
    transition: transform 0.1s ease;
}

.interactive-image[b-18yp0on2di] {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    max-height: none;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

.controls[b-18yp0on2di] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.image-viewer .controls[b-18yp0on2di] {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    background: none;
    border-top: none;
    padding: 0;
}

.control-btn[b-18yp0on2di] {
    padding: 0.5rem;
    border: none;
    border-radius: 5px;
    background-color: #4a5568;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

    .control-btn:hover[b-18yp0on2di] {
        background-color: #2d3748;
        transform: translateY(-1px);
    }

    .control-btn svg[b-18yp0on2di] {
        width: 1rem;
        height: 1rem;
    }

.zoom-level[b-18yp0on2di] {
    text-align: center;
    font-size: 0.875rem;
    color: #718096;
    font-weight: 500;
    margin-top: 0.75rem;
}

.accept-section[b-18yp0on2di] {
    margin-top: 10px;
    text-align: center;
    padding-top: 20px;
    border-top: 2px solid #e9ecef;
}

.btn-success[b-18yp0on2di] {
    background-color: #28a745;
    border-color: #28a745;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s ease;
}

    .btn-success:hover:not(:disabled)[b-18yp0on2di] {
        background-color: #218838;
        border-color: #1e7e34;
        transform: translateY(-1px);
    }

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

.btn-icon[b-18yp0on2di] {
    width: 18px;
    height: 18px;
}

.loading-container[b-18yp0on2di] {
    text-align: center;
    padding: 60px 20px;
}

.loading-spinner[b-18yp0on2di] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-18yp0on2di 1s linear infinite;
    margin: 0 auto 20px;
}

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

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

.alert[b-18yp0on2di] {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.alert-danger[b-18yp0on2di] {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-info[b-18yp0on2di] {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.spinner-border-sm[b-18yp0on2di] {
    width: 1rem;
    height: 1rem;
    border-width: 0.1em;
}

.spinner-border[b-18yp0on2di] {
    display: inline-block;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-18yp0on2di 0.75s linear infinite;
}

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

@media (max-width: 1200px) {
    .audit-layout[b-18yp0on2di] {
        grid-template-columns: 1fr;
    }

    .form-grid[b-18yp0on2di] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-grid[b-18yp0on2di] {
        grid-template-columns: 1fr;
    }
}


.date-time-input[b-18yp0on2di] {
    position: relative;
}

.formatted-display[b-18yp0on2di] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    min-height: 37px;
    display: flex;
    align-items: center;
}

    .formatted-display:hover[b-18yp0on2di] {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

.d-none[b-18yp0on2di] {
    display: none !important;
}

/* Optional: Add a small edit icon */
.formatted-display[b-18yp0on2di]::after {
    content: "✏️";
    font-size: 0.7rem;
    margin-left: auto;
    opacity: 0.5;
}

.formatted-display:hover[b-18yp0on2di]::after {
    opacity: 0.8;
}
.formatted-hint[b-18yp0on2di] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 4px 8px;
    background-color: #e8f4fd;
    border: 1px solid #bee5eb;
    border-top: none;
    border-radius: 0 0 4px 4px;
    font-size: 0.8rem;
    color: #0c5460;
    z-index: 10;
}
/* _content/HowardWebApp/Components/Pages/ChartCapture.razor.rz.scp.css */
/* Mobile-First Camera Styles */

.camera-overlay[b-uf6bpq44aq] {
    position: relative;
    width: 100%;
    height: 100%;
}

.circle-mask[b-uf6bpq44aq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(280px, 80vw);
    height: min(280px, 80vw);
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
    z-index: 10;
    pointer-events: none;
}

#videoElement[b-uf6bpq44aq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scaleX(1); /* Prevent iOS flip */
}

#capturedImage[b-uf6bpq44aq] {
    border-radius: 50%;
    border: 3px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-width: 280px;
    width: 100%;
    height: auto;
}

.camera-container[b-uf6bpq44aq] {
    position: relative;
    width: 100%;
    height: 75vh; /* Increased for mobile */
    max-height: 600px;
    background: #000;
    overflow: hidden;
}

/* Mobile viewport adjustments */
@media (max-width: 640px) {
    .camera-container[b-uf6bpq44aq] {
        height: 70vh;
        max-height: none;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .camera-container[b-uf6bpq44aq] {
        height: 85vh;
    }

    .circle-mask[b-uf6bpq44aq] {
        width: min(240px, 70vh);
        height: min(240px, 70vh);
    }
}

.flash[b-uf6bpq44aq] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    z-index: 20;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.flash-active[b-uf6bpq44aq] {
    opacity: 0.8 !important;
}

/* Touch-friendly buttons */
.touch-manipulation[b-uf6bpq44aq] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Prevent pull-to-refresh during camera use */
body.camera-active[b-uf6bpq44aq] {
    overscroll-behavior-y: contain;
    overflow: hidden;
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    #videoElement[b-uf6bpq44aq] {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
/* _content/HowardWebApp/Components/Pages/EfmEditing.razor.rz.scp.css */
/* EfmEditing.razor.css */

.efm-editing-container[b-9s5azmdolg] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.header-section[b-9s5azmdolg] {
    margin-bottom: 2rem;
}

.header-content[b-9s5azmdolg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.back-btn[b-9s5azmdolg] {
    flex-shrink: 0;
}

.header-info[b-9s5azmdolg] {
    flex: 1;
}

    .header-info h1[b-9s5azmdolg] {
        font-size: 2rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 0.5rem 0;
    }

    .header-info p[b-9s5azmdolg] {
        color: #6b7280;
        margin: 0;
    }

.data-status[b-9s5azmdolg] {
    flex-shrink: 0;
}

.status-btn[b-9s5azmdolg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}

    .status-btn:hover[b-9s5azmdolg] {
        background-color: #f3f4f6;
    }

.status-icon[b-9s5azmdolg] {
    width: 2rem;
    height: 2rem;
    transition: color 0.2s;
}

    .status-icon.complete[b-9s5azmdolg] {
        color: #10b981;
    }

    .status-icon.incomplete[b-9s5azmdolg] {
        color: #ef4444;
    }

.day-selector[b-9s5azmdolg] {
    margin-bottom: 2rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.day-selector-header[b-9s5azmdolg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #e5e7eb;
}

    .day-selector-header:hover[b-9s5azmdolg] {
        background-color: #f9fafb;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .day-selector-header h3[b-9s5azmdolg] {
        margin: 0;
        color: #1f2937;
        font-size: 1.25rem;
        font-weight: 600;
    }

.collapse-btn[b-9s5azmdolg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    color: #6b7280;
}

    .collapse-btn:hover[b-9s5azmdolg] {
        background-color: #f3f4f6;
        color: #374151;
    }

.collapse-icon[b-9s5azmdolg] {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.2s ease;
}

    .collapse-icon.collapsed[b-9s5azmdolg] {
        transform: rotate(-90deg);
    }

.day-buttons[b-9s5azmdolg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    padding: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    max-height: 1000px;
}

    .day-buttons.collapsed[b-9s5azmdolg] {
        max-height: 0;
        padding: 0 1.5rem;
    }

.day-btn[b-9s5azmdolg] {
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    text-align: center;
}

    .day-btn:hover:not(:disabled)[b-9s5azmdolg] {
        background-color: #f3f4f6;
        border-color: #9ca3af;
    }

    .day-btn.active[b-9s5azmdolg] {
        background-color: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    .day-btn.missing-data[b-9s5azmdolg] {
        background-color: #f9731659;
        color: #000;
        border-color: #000;
    }

        .day-btn.missing-data.active[b-9s5azmdolg] {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }

.loading-container[b-9s5azmdolg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.loading-spinner[b-9s5azmdolg] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-9s5azmdolg 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

.table-controls[b-9s5azmdolg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.search-container[b-9s5azmdolg] {
    flex: 1;
    max-width: 400px;
}

.search-input-wrapper[b-9s5azmdolg] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-9s5azmdolg] {
    position: absolute;
    left: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    color: #6b7280;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-9s5azmdolg] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
}

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

.clear-search[b-9s5azmdolg] {
    position: absolute;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

    .clear-search:hover[b-9s5azmdolg] {
        color: #374151;
        background-color: #f3f4f6;
    }

    .clear-search svg[b-9s5azmdolg] {
        width: 1rem;
        height: 1rem;
    }

.btn-primary[b-9s5azmdolg] {
    background-color: #3b82f6;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-9s5azmdolg] {
        background-color: #2563eb;
    }

.btn-secondary[b-9s5azmdolg] {
    background-color: #6b7280;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-9s5azmdolg] {
        background-color: #374151;
    }

.btn-icon[b-9s5azmdolg] {
    width: 1rem;
    height: 1rem;
}

.data-count[b-9s5azmdolg] {
    margin-bottom: 1rem;
    color: #374151;
    font-size: 0.875rem;
}

.page-info[b-9s5azmdolg] {
    color: #6b7280;
    font-weight: normal;
}

.table-container[b-9s5azmdolg] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
}

.history-table[b-9s5azmdolg] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
}

    .history-table th[b-9s5azmdolg] {
        background-color: #f9fafb;
        padding: 1rem 0.75rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .history-table td[b-9s5azmdolg] {
        padding: 0.1rem;
        border-bottom: 1px solid #f3f4f6;
        color: #374151;
        font-size: 0.875rem;
        height: auto;
    }

.history-row[b-9s5azmdolg] {
    padding: 0px !important;
    height: 20px;
}

    .history-row:hover[b-9s5azmdolg] {
        background-color: #f9fafb;
    }

.timestamp-cell[b-9s5azmdolg] {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    white-space: nowrap;
}

.numeric-cell[b-9s5azmdolg] {
    text-align: right;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
}

.pagination-container[b-9s5azmdolg] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.pagination[b-9s5azmdolg] {
    display: flex;
    gap: 0.25rem;
}

.page-btn[b-9s5azmdolg] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

    .page-btn:hover:not(.disabled)[b-9s5azmdolg] {
        background-color: #f3f4f6;
    }

    .page-btn.active[b-9s5azmdolg] {
        background-color: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    .page-btn.disabled[b-9s5azmdolg] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.alert[b-9s5azmdolg] {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.alert-danger[b-9s5azmdolg] {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-info[b-9s5azmdolg] {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.alert h4[b-9s5azmdolg] {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.alert p[b-9s5azmdolg] {
    margin: 0;
}

.mb-0[b-9s5azmdolg] {
    margin-bottom: 0;
}

/* Modal Styles */
.modal-overlay[b-9s5azmdolg] {
    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: 1000;
    padding: 1rem;
}

.modal-content[b-9s5azmdolg] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header[b-9s5azmdolg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

    .modal-header h3[b-9s5azmdolg] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
    }

.modal-close[b-9s5azmdolg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: #6b7280;
    transition: all 0.2s;
}

    .modal-close:hover[b-9s5azmdolg] {
        background-color: #f3f4f6;
        color: #374151;
    }

    .modal-close svg[b-9s5azmdolg] {
        width: 1.25rem;
        height: 1.25rem;
    }

.modal-body[b-9s5azmdolg] {
    padding: 1.5rem;
}

.status-summary[b-9s5azmdolg] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
}

    .status-summary p[b-9s5azmdolg] {
        margin: 0 0 0.5rem 0;
        font-size: 0.875rem;
    }

        .status-summary p:last-child[b-9s5azmdolg] {
            margin-bottom: 0;
        }

.status-badge[b-9s5azmdolg] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .status-badge.complete[b-9s5azmdolg] {
        background-color: #d1fae5;
        color: #065f46;
    }

    .status-badge.incomplete[b-9s5azmdolg] {
        background-color: #fee2e2;
        color: #991b1b;
    }

.missing-days h4[b-9s5azmdolg] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.missing-days-grid[b-9s5azmdolg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.missing-day-item[b-9s5azmdolg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
}

.day-number[b-9s5azmdolg] {
    font-weight: 600;
    color: #dc2626;
}

.record-count[b-9s5azmdolg] {
    font-size: 0.875rem;
    color: #6b7280;
}

.complete-data[b-9s5azmdolg] {
    text-align: center;
    padding: 2rem;
    color: #059669;
    font-weight: 500;
}

    .complete-data p[b-9s5azmdolg] {
        margin: 0;
        font-size: 1.125rem;
    }

/* EfmEditing.razor.css */

.efm-editing-container[b-9s5azmdolg] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.header-section[b-9s5azmdolg] {
    margin-bottom: 2rem;
}

.header-content[b-9s5azmdolg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.back-btn[b-9s5azmdolg] {
    flex-shrink: 0;
}

.header-info[b-9s5azmdolg] {
    flex: 1;
}

    .header-info h1[b-9s5azmdolg] {
        font-size: 2rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 0.5rem 0;
    }

    .header-info p[b-9s5azmdolg] {
        color: #6b7280;
        margin: 0;
    }

.data-status[b-9s5azmdolg] {
    flex-shrink: 0;
}

.status-btn[b-9s5azmdolg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}

    .status-btn:hover[b-9s5azmdolg] {
        background-color: #f3f4f6;
    }

.status-icon[b-9s5azmdolg] {
    width: 2rem;
    height: 2rem;
    transition: color 0.2s;
}

    .status-icon.complete[b-9s5azmdolg] {
        color: #10b981;
    }

    .status-icon.incomplete[b-9s5azmdolg] {
        color: #ef4444;
    }

.day-selector[b-9s5azmdolg] {
    margin-bottom: 2rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.day-selector-header[b-9s5azmdolg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #e5e7eb;
}

    .day-selector-header:hover[b-9s5azmdolg] {
        background-color: #f9fafb;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .day-selector-header h3[b-9s5azmdolg] {
        margin: 0;
        color: #1f2937;
        font-size: 1.25rem;
        font-weight: 600;
    }

.collapse-btn[b-9s5azmdolg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    color: #6b7280;
}

    .collapse-btn:hover[b-9s5azmdolg] {
        background-color: #f3f4f6;
        color: #374151;
    }

.collapse-icon[b-9s5azmdolg] {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.2s ease;
}

    .collapse-icon.collapsed[b-9s5azmdolg] {
        transform: rotate(-90deg);
    }

.day-buttons[b-9s5azmdolg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    padding: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    max-height: 1000px;
}

    .day-buttons.collapsed[b-9s5azmdolg] {
        max-height: 0;
        padding: 0 1.5rem;
    }

.day-btn[b-9s5azmdolg] {
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    text-align: center;
}

    .day-btn:hover:not(:disabled)[b-9s5azmdolg] {
        background-color: #a66bcb3d;
        color: black;
        border-color: #000;
    }

    .day-btn.active[b-9s5azmdolg] {
        background-color: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    .day-btn.no-data[b-9s5azmdolg] {
        background-color: #fef2f2;
        color: #dc2626;
        border-color: #fecaca;
        cursor: grab;
    }


    .day-btn:disabled[b-9s5azmdolg] {
        cursor: grab;
    }

.loading-container[b-9s5azmdolg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.loading-spinner[b-9s5azmdolg] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-9s5azmdolg 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

.table-controls[b-9s5azmdolg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.search-container[b-9s5azmdolg] {
    flex: 1;
    max-width: 400px;
}

.search-input-wrapper[b-9s5azmdolg] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-9s5azmdolg] {
    position: absolute;
    left: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    color: #6b7280;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-9s5azmdolg] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
}

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

.clear-search[b-9s5azmdolg] {
    position: absolute;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

    .clear-search:hover[b-9s5azmdolg] {
        color: #374151;
        background-color: #f3f4f6;
    }

    .clear-search svg[b-9s5azmdolg] {
        width: 1rem;
        height: 1rem;
    }



.btn-primary[b-9s5azmdolg] {
    background-color: #3b82f6;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-9s5azmdolg] {
        background-color: #2563eb;
    }

.btn-secondary[b-9s5azmdolg] {
    background-color: #6b7280;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-9s5azmdolg] {
        background-color: #374151;
    }

.btn-icon[b-9s5azmdolg] {
    width: 1rem;
    height: 1rem;
}

.data-count[b-9s5azmdolg] {
    margin-bottom: 1rem;
    color: #374151;
    font-size: 0.875rem;
}

.page-info[b-9s5azmdolg] {
    color: #6b7280;
    font-weight: normal;
}

.table-container[b-9s5azmdolg] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
}


.history-row:hover[b-9s5azmdolg] {
    background-color: #f9fafb;
}

.timestamp-cell[b-9s5azmdolg] {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    white-space: nowrap;
}

.numeric-cell[b-9s5azmdolg] {
    text-align: right;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
}

.pagination-container[b-9s5azmdolg] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.pagination[b-9s5azmdolg] {
    display: flex;
    gap: 0.25rem;
}

.page-btn[b-9s5azmdolg] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

    .page-btn:hover:not(.disabled)[b-9s5azmdolg] {
        background-color: #f3f4f6;
    }

    .page-btn.active[b-9s5azmdolg] {
        background-color: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    .page-btn.disabled[b-9s5azmdolg] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.alert[b-9s5azmdolg] {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.alert-danger[b-9s5azmdolg] {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-info[b-9s5azmdolg] {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.alert h4[b-9s5azmdolg] {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.alert p[b-9s5azmdolg] {
    margin: 0;
}

.mb-0[b-9s5azmdolg] {
    margin-bottom: 0;
}

/* Modal Styles */
.modal-overlay[b-9s5azmdolg] {
    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: 1000;
    padding: 1rem;
}

.modal-content[b-9s5azmdolg] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header[b-9s5azmdolg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

    .modal-header h3[b-9s5azmdolg] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
    }

.modal-close[b-9s5azmdolg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: #6b7280;
    transition: all 0.2s;
}

    .modal-close:hover[b-9s5azmdolg] {
        background-color: #f3f4f6;
        color: #374151;
    }

    .modal-close svg[b-9s5azmdolg] {
        width: 1.25rem;
        height: 1.25rem;
    }

.modal-body[b-9s5azmdolg] {
    padding: 1.5rem;
}

.status-summary[b-9s5azmdolg] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
}

    .status-summary p[b-9s5azmdolg] {
        margin: 0 0 0.5rem 0;
        font-size: 0.875rem;
    }

        .status-summary p:last-child[b-9s5azmdolg] {
            margin-bottom: 0;
        }

.status-badge[b-9s5azmdolg] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .status-badge.complete[b-9s5azmdolg] {
        background-color: #d1fae5;
        color: #065f46;
    }

    .status-badge.incomplete[b-9s5azmdolg] {
        background-color: #fee2e2;
        color: #991b1b;
    }

.missing-days h4[b-9s5azmdolg] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.missing-days-grid[b-9s5azmdolg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.missing-day-item[b-9s5azmdolg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
}

.day-number[b-9s5azmdolg] {
    font-weight: 600;
    color: #dc2626;
}

.record-count[b-9s5azmdolg] {
    font-size: 0.875rem;
    color: #6b7280;
}

.complete-data[b-9s5azmdolg] {
    text-align: center;
    padding: 2rem;
    color: #059669;
    font-weight: 500;
}

    .complete-data p[b-9s5azmdolg] {
        margin: 0;
        font-size: 1.125rem;
    }

.day-navigation[b-9s5azmdolg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.auto-add-btn[b-9s5azmdolg] {
    margin-left: auto;
}

.history-row.auto-added[b-9s5azmdolg] {
    background-color: rgb(254, 242, 242);
}

    .history-row.auto-added:hover[b-9s5azmdolg] {
        background-color: rgb(252, 231, 231);
    }

.data-issues-record[b-9s5azmdolg] {
    background-color: #ffebee !important;
    border-left: 4px solid #f44336;
}

.auto-added-record[b-9s5azmdolg] {
    background-color: #fff3e0 !important;
    border-left: 4px solid #ff9800;
}

.low-flow-time-record[b-9s5azmdolg] {
    background-color: #b96f0026 !important;
    border-left: 4px solid #f97316;
    border-right: 4px solid #f97316;
}

    .low-flow-time-record:hover[b-9s5azmdolg] {
        background-color: #ffedd5 !important;
    }

.editable-cell[b-9s5azmdolg] {
    cursor: cell;
    user-select: none;
    position: relative;
}

    .editable-cell:hover[b-9s5azmdolg] {
        background-color: #f0f9ff !important;
    }

.selected-cell[b-9s5azmdolg] {
    background-color: #dbeafe !important;
    border: 2px solid #3b82f6 !important;
}

.grid-controls[b-9s5azmdolg] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
}

.context-menu[b-9s5azmdolg] {
    position: fixed;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 120px;
}

.context-item[b-9s5azmdolg] {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.875rem;
}

    .context-item:hover:not(:disabled)[b-9s5azmdolg] {
        background-color: #f3f4f6;
    }

    .context-item:disabled[b-9s5azmdolg] {
        color: #9ca3af;
        cursor: not-allowed;
    }

.context-overlay[b-9s5azmdolg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
}

    .context-overlay.show[b-9s5azmdolg] {
        display: block;
    }

.btn-success[b-9s5azmdolg] {
    background-color: #10b981;
    color: white;
}

    .btn-success:hover:not(:disabled)[b-9s5azmdolg] {
        background-color: #059669;
    }
.chart-container[b-9s5azmdolg] {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    /* Add these properties to match table container */
    overflow-x: auto;
    min-width: 1200px; /* Same as table min-width */
}

    .chart-container h4[b-9s5azmdolg] {
        margin: 0 0 1rem 0;
        color: #1f2937;
        font-size: 1.125rem;
        font-weight: 600;
    }

.chart-wrapper[b-9s5azmdolg] {
    position: relative;
    height: 300px;
    margin-bottom: 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure full width usage */
    width: 100%;
}

.chart-legend[b-9s5azmdolg] {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.legend-item[b-9s5azmdolg] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
}

    .legend-item[b-9s5azmdolg]::before {
        content: '';
        width: 16px;
        height: 3px;
        margin-right: 8px;
        border-radius: 2px;
    }

    .legend-item.static[b-9s5azmdolg]::before {
        background-color: #ef4444;
    }

    .legend-item.differential[b-9s5azmdolg]::before {
        background-color: #3b82f6;
    }

    .legend-item.temperature[b-9s5azmdolg]::before {
        background-color: #10b981;
    }

#efm-chart-1[b-9s5azmdolg], #efm-chart-2[b-9s5azmdolg], #efm-chart-3[b-9s5azmdolg], #efm-chart-4[b-9s5azmdolg], #efm-chart-5[b-9s5azmdolg],
#efm-chart-6[b-9s5azmdolg], #efm-chart-7[b-9s5azmdolg], #efm-chart-8[b-9s5azmdolg], #efm-chart-9[b-9s5azmdolg], #efm-chart-10[b-9s5azmdolg],
#efm-chart-11[b-9s5azmdolg], #efm-chart-12[b-9s5azmdolg], #efm-chart-13[b-9s5azmdolg], #efm-chart-14[b-9s5azmdolg], #efm-chart-15[b-9s5azmdolg],
#efm-chart-16[b-9s5azmdolg], #efm-chart-17[b-9s5azmdolg], #efm-chart-18[b-9s5azmdolg], #efm-chart-19[b-9s5azmdolg], #efm-chart-20[b-9s5azmdolg],
#efm-chart-21[b-9s5azmdolg], #efm-chart-22[b-9s5azmdolg], #efm-chart-23[b-9s5azmdolg], #efm-chart-24[b-9s5azmdolg], #efm-chart-25[b-9s5azmdolg],
#efm-chart-26[b-9s5azmdolg], #efm-chart-27[b-9s5azmdolg], #efm-chart-28[b-9s5azmdolg], #efm-chart-29[b-9s5azmdolg], #efm-chart-30[b-9s5azmdolg],
#efm-chart-31[b-9s5azmdolg] {
    width: 100% !important;
    height: 100% !important;
}
.stats-display[b-9s5azmdolg] {
    display: flex;
    gap: 1.5rem;
    margin-left: auto;
    align-items: center;
}

.stat-item[b-9s5azmdolg] {
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    white-space: nowrap;
}
.edited-record[b-9s5azmdolg] {
    background-color: #ffecbf !important;
    border-left: 4px solid #4caf50;
}

    .edited-record:hover[b-9s5azmdolg] {
        background-color: #f1c867 !important;
    }

.auto-added-record[b-9s5azmdolg] {
    background-color: #ffeb3b !important; 
    border-left: 6px solid #000; 
    border-right: 6px solid #000;
}

    .auto-added-record:hover[b-9s5azmdolg] {
        background-color: #fff176 !important; 
    }

.autoFilledDay[b-9s5azmdolg] {
    background-color: #ff0000 !important; 
    border-left: 6px solid #000;
}

    .autoFilledDay:hover[b-9s5azmdolg] {
        background-color: #ff0000 !important; 
    }
    .autoFilledDay.active[b-9s5azmdolg] {
        background-color: #3b82f6 !important;
    }

.editing-cell[b-9s5azmdolg] {
    background-color: #fef3c7 !important;
    border: 2px solid #f59e0b !important;
}

    .editing-cell input[b-9s5azmdolg] {
        width: 100%;
        border: none;
        background: transparent;
        text-align: right;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 0.8rem;
        outline: none;
    }

.header-title-row[b-9s5azmdolg] {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: flex-start;
}

.date-range-controls[b-9s5azmdolg] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
}

.date-input-group[b-9s5azmdolg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .date-input-group label[b-9s5azmdolg] {
        font-size: 0.75rem;
        font-weight: 500;
        color: #374151;
        margin: 0;
    }

.date-input[b-9s5azmdolg] {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: white;
    min-width: 140px;
}

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

.edit-dialog-overlay[b-9s5azmdolg] {
    position: fixed;
    border-radius: 0.75rem;
    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: 1000;
    padding: 1rem;
}

.edit-dialog-content[b-9s5azmdolg] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 600px;
    width: 100%;
    max-height: 97vh;
    overflow-y: auto;
}

.edit-dialog-header[b-9s5azmdolg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

    .edit-dialog-header h3[b-9s5azmdolg] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
    }

.edit-dialog-close[b-9s5azmdolg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: #6b7280;
    transition: all 0.2s;
}

    .edit-dialog-close:hover[b-9s5azmdolg] {
        background-color: #f3f4f6;
        color: #374151;
    }

    .edit-dialog-close svg[b-9s5azmdolg] {
        width: 1.25rem;
        height: 1.25rem;
    }

.edit-dialog-body[b-9s5azmdolg] {
    padding: 1.5rem;
}

.edit-actions-section[b-9s5azmdolg] {
    margin-bottom: 1.5rem;
}

    .edit-actions-section h4[b-9s5azmdolg] {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: #1f2937;
    }

    .edit-actions-section p[b-9s5azmdolg] {
        margin: 0 0 1.5rem 0;
        font-size: 0.875rem;
        color: #6b7280;
    }

.edit-actions-grid[b-9s5azmdolg] {
    display: grid;
    gap: 0.75rem;
}

.edit-action-btn[b-9s5azmdolg] {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .edit-action-btn:hover[b-9s5azmdolg] {
        background-color: #f9fafb;
        border-color: #9ca3af;
    }

    .edit-action-btn.primary[b-9s5azmdolg] {
        background-color: #10b981;
        color: white;
        border-color: #10b981;
    }

        .edit-action-btn.primary:hover[b-9s5azmdolg] {
            background-color: #059669;
        }

.edit-action-title[b-9s5azmdolg] {
    font-weight: 600;
    font-size: 0.875rem;
}

.edit-action-desc[b-9s5azmdolg] {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
}

.edit-action-btn.primary .edit-action-desc[b-9s5azmdolg] {
    color: rgba(255, 255, 255, 0.8);
}

.edit-dialog-footer[b-9s5azmdolg] {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.month-selector[b-9s5azmdolg] {
    display: flex;
    gap: 0.5rem;
}

.month-btn[b-9s5azmdolg] {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

    .month-btn:hover:not(.active)[b-9s5azmdolg] {
        background-color: #f3f4f6;
        border-color: #9ca3af;
    }

    .month-btn.active[b-9s5azmdolg] {
        background-color: #059669;
        color: white;
        border-color: #059669;
    }
.edit-action-btn.warning[b-9s5azmdolg] {
    border-color: #f59e0b;
    color: #f59e0b;
}

    .edit-action-btn.warning:hover[b-9s5azmdolg] {
        background-color: #f59e0b;
        color: white;
    }

.date-range-inputs[b-9s5azmdolg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.date-input-group[b-9s5azmdolg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .date-input-group label[b-9s5azmdolg] {
        font-weight: 600;
        color: #374151;
        font-size: 0.875rem;
    }

.date-input[b-9s5azmdolg] {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: white;
}

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

.warning-text[b-9s5azmdolg] {
    padding: 1rem;
    background-color: #fef3cd;
    border: 1px solid #f6e05e;
    border-radius: 0.375rem;
    color: #92400e;
    font-size: 0.875rem;
    margin: 1rem 0;
}

.modal-footer[b-9s5azmdolg] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
}

.btn-warning[b-9s5azmdolg] {
    background-color: #f59e0b;
    color: white;
    border: 1px solid #f59e0b;
}

    .btn-warning:hover[b-9s5azmdolg] {
        background-color: #d97706;
        border-color: #d97706;
    }

.edit-action-btn.warning:hover[b-9s5azmdolg] {
    background-color: #d97706;
    border-color: #d97706;
}

/* Day Totals Row Styling */
.day-totals-row[b-9s5azmdolg] {
    border-top: 3px solid #374151 !important;
    background-color: #f9fafb !important;
    font-weight: 600;
}

    .day-totals-row:hover[b-9s5azmdolg] {
        background-color: #f3f4f6 !important;
    }

.day-totals-label[b-9s5azmdolg] {
    font-weight: 700 !important;
    color: #1f2937 !important;
}

.day-totals-value[b-9s5azmdolg] {
    font-weight: 600 !important;
    color: #374151 !important;
}

.block-edit-values[b-9s5azmdolg] {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.value-input-group[b-9s5azmdolg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .value-input-group label[b-9s5azmdolg] {
        font-weight: 600;
        color: #374151;
        font-size: 0.875rem;
    }

.value-input[b-9s5azmdolg] {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.15s ease-in-out;
}

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

@media (max-width: 640px) {
    .block-edit-values[b-9s5azmdolg] {
        grid-template-columns: 1fr;
    }
}
/* _content/HowardWebApp/Components/Pages/EFMReporting.razor.rz.scp.css */
/* EFMReporting.razor.css */

.efms-container[b-ycmhc7dqk4] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header-section[b-ycmhc7dqk4] {
    margin-bottom: 2rem;
}

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

.header-info[b-ycmhc7dqk4] {
    flex: 1;
}

    .header-info h1[b-ycmhc7dqk4] {
        font-size: 2rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 0.5rem 0;
    }

    .header-info p[b-ycmhc7dqk4] {
        color: #6b7280;
        margin: 0;
    }

.header-actions[b-ycmhc7dqk4] {
    flex-shrink: 0;
}

.loading-container[b-ycmhc7dqk4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.loading-spinner[b-ycmhc7dqk4] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-ycmhc7dqk4 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

.table-controls[b-ycmhc7dqk4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-container[b-ycmhc7dqk4] {
    flex: 1;
    max-width: 400px;
}

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

.search-icon[b-ycmhc7dqk4] {
    position: absolute;
    left: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    color: #6b7280;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-ycmhc7dqk4] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
}

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

.clear-search[b-ycmhc7dqk4] {
    position: absolute;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

    .clear-search:hover[b-ycmhc7dqk4] {
        color: #374151;
        background-color: #f3f4f6;
    }

    .clear-search svg[b-ycmhc7dqk4] {
        width: 1rem;
        height: 1rem;
    }

.date-filter-container[b-ycmhc7dqk4] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-filter-group[b-ycmhc7dqk4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-label[b-ycmhc7dqk4] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.date-input[b-ycmhc7dqk4] {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
    min-width: 150px;
}

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

.filter-container[b-ycmhc7dqk4] {
    display: flex;
    align-items: center;
}

.status-filter[b-ycmhc7dqk4] {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
    cursor: pointer;
    min-width: 160px;
}

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

.table-actions[b-ycmhc7dqk4] {
    display: flex;
    gap: 0.5rem;
}

.btn[b-ycmhc7dqk4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

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

.btn-primary[b-ycmhc7dqk4] {
    background-color: #3b82f6;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-ycmhc7dqk4] {
        background-color: #2563eb;
    }

.btn-secondary[b-ycmhc7dqk4] {
    background-color: #6b7280;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-ycmhc7dqk4] {
        background-color: #374151;
    }

.btn-clear-dates[b-ycmhc7dqk4] {
    background-color: #ef4444;
    color: white;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    height: fit-content;
}

    .btn-clear-dates:hover:not(:disabled)[b-ycmhc7dqk4] {
        background-color: #dc2626;
    }

.btn-icon[b-ycmhc7dqk4] {
    width: 1rem;
    height: 1rem;
}

.btn-spinner[b-ycmhc7dqk4] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-ycmhc7dqk4 1s linear infinite;
}

/* Selection Controls */
.selection-controls[b-ycmhc7dqk4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.checkbox-label[b-ycmhc7dqk4] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

    .checkbox-label input[type="checkbox"][b-ycmhc7dqk4] {
        display: none;
    }

.checkmark[b-ycmhc7dqk4] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 0.25rem;
    margin-right: 0.75rem;
    position: relative;
    background-color: white;
    transition: all 0.2s;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark[b-ycmhc7dqk4] {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-ycmhc7dqk4]::after {
        content: '';
        position: absolute;
        left: 0.25rem;
        top: 0.125rem;
        width: 0.375rem;
        height: 0.625rem;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

.selection-count[b-ycmhc7dqk4] {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.efm-count[b-ycmhc7dqk4] {
    margin-bottom: 1rem;
    color: #374151;
    font-size: 0.875rem;
}

.page-info[b-ycmhc7dqk4], .search-results[b-ycmhc7dqk4] {
    color: #6b7280;
    font-weight: normal;
}

.table-container[b-ycmhc7dqk4] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
}

.efms-table[b-ycmhc7dqk4] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

    .efms-table th[b-ycmhc7dqk4] {
        background-color: #f9fafb;
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .efms-table td[b-ycmhc7dqk4] {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        color: #374151;
        font-size: 0.875rem;
        vertical-align: middle;
    }

.efm-row:hover[b-ycmhc7dqk4] {
    background-color: #f9fafb;
}

.customer-badge[b-ycmhc7dqk4] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #eff6ff;
    color: #1d4ed8;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.file-name[b-ycmhc7dqk4] {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    color: #4b5563;
}

.text-muted[b-ycmhc7dqk4] {
    color: #9ca3af;
    font-style: italic;
}

.status-badge[b-ycmhc7dqk4] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.status-created[b-ycmhc7dqk4] {
    background-color: #fef3c7;
    color: #92400e;
}

.status-pending[b-ycmhc7dqk4] {
    background-color: #fef2f2;
    color: #991b1b;
}

.status-report-created[b-ycmhc7dqk4] {
    background-color: #e0e7ff;
    color: #3730a3;
}

.status-sent-to-customer[b-ycmhc7dqk4] {
    background-color: #f0f9ff;
    color: #1e40af;
}

.status-billed[b-ycmhc7dqk4] {
    background-color: #ecfdf5;
    color: #14532d;
}

.status-unknown[b-ycmhc7dqk4] {
    background-color: #f3f4f6;
    color: #374151;
}

.action-buttons[b-ycmhc7dqk4] {
    display: flex;
    gap: 0.25rem;
}

.btn-action[b-ycmhc7dqk4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-action:disabled[b-ycmhc7dqk4] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-action svg[b-ycmhc7dqk4] {
        width: 1rem;
        height: 1rem;
    }

    .btn-action.btn-primary[b-ycmhc7dqk4] {
        background-color: #10b981;
        color: white;
    }

        .btn-action.btn-primary:hover:not(:disabled)[b-ycmhc7dqk4] {
            background-color: #059669;
        }

.btn-view[b-ycmhc7dqk4] {
    background-color: #3b82f6;
    color: white;
}

    .btn-view:hover:not(:disabled)[b-ycmhc7dqk4] {
        background-color: #2563eb;
    }

.pagination-container[b-ycmhc7dqk4] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.pagination[b-ycmhc7dqk4] {
    display: flex;
    gap: 0.25rem;
}

.page-btn[b-ycmhc7dqk4] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

    .page-btn:hover:not(.disabled)[b-ycmhc7dqk4] {
        background-color: #f3f4f6;
    }

    .page-btn.active[b-ycmhc7dqk4] {
        background-color: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    .page-btn.disabled[b-ycmhc7dqk4] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.alert[b-ycmhc7dqk4] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.alert-danger[b-ycmhc7dqk4] {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-success[b-ycmhc7dqk4] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.alert-info[b-ycmhc7dqk4] {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.alert h4[b-ycmhc7dqk4] {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.alert p[b-ycmhc7dqk4] {
    margin: 0;
}

.mb-0[b-ycmhc7dqk4] {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .table-controls[b-ycmhc7dqk4] {
        flex-direction: column;
        align-items: stretch;
    }

    .date-filter-container[b-ycmhc7dqk4] {
        justify-content: center;
    }

    .search-container[b-ycmhc7dqk4] {
        max-width: none;
    }

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

    .selection-controls[b-ycmhc7dqk4] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
}

.pdf-modal-content[b-ycmhc7dqk4] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 90vw;
    height: 90vh;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
}

.pdf-modal-header[b-ycmhc7dqk4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.pdf-modal-actions[b-ycmhc7dqk4] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pdf-viewer-container[b-ycmhc7dqk4] {
    flex: 1;
    padding: 1rem;
}

.pdf-iframe[b-ycmhc7dqk4] {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.5rem;
}
.selection-controls[b-ycmhc7dqk4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

    .selection-controls .checkbox-label[b-ycmhc7dqk4] {
        flex: 0 0 auto;
    }

.selection-count[b-ycmhc7dqk4] {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
    flex: 1;
    text-align: center;
}

.customer-filter[b-ycmhc7dqk4] {
    flex: 0 0 auto;
}

.customer-filter-select[b-ycmhc7dqk4] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: white;
    cursor: pointer;
    min-width: 200px;
}

    .customer-filter-select:focus[b-ycmhc7dqk4] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
.efm-count-container[b-ycmhc7dqk4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.efm-count[b-ycmhc7dqk4] {
    margin: 0;
    color: #374151;
    font-size: 0.875rem;
}

.page-info[b-ycmhc7dqk4], .search-results[b-ycmhc7dqk4] {
    color: #6b7280;
    font-weight: normal;
}

.report-actions[b-ycmhc7dqk4] {
    display: flex;
    gap: 0.5rem;
}
/* _content/HowardWebApp/Components/Pages/EFMSendReports.razor.rz.scp.css */
.outlook-container[b-90gu6961f7] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.header[b-90gu6961f7] {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.user-input[b-90gu6961f7] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.email-input-group[b-90gu6961f7] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 200px;
}

    .email-input-group input[b-90gu6961f7] {
        flex: 1;
        padding-right: 35px;
    }

    .email-input-group .btn[b-90gu6961f7] {
        position: absolute;
        right: 5px;
        padding: 2px 6px;
        font-size: 12px;
        line-height: 1;
        border-radius: 3px;
    }

.outlook-layout[b-90gu6961f7] {
    display: grid;
    grid-template-columns: 250px 350px 1fr;
    gap: 20px;
    height: 70vh;
}

.folder-list[b-90gu6961f7] {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-y: auto;
    background: #f8f9fa;
}

    .folder-list h4[b-90gu6961f7] {
        padding: 10px;
        margin: 0;
        background: #e9ecef;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

.folder-item[b-90gu6961f7] {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .folder-item:hover[b-90gu6961f7] {
        background: #e9ecef;
    }

    .folder-item.selected[b-90gu6961f7] {
        background: #007bff;
        color: white;
    }

.folder-icon[b-90gu6961f7] {
    font-size: 12px;
}

.item-count[b-90gu6961f7] {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.7;
}

.email-list[b-90gu6961f7] {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-y: auto;
}

    .email-list h4[b-90gu6961f7] {
        padding: 10px;
        margin: 0;
        background: #f8f9fa;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

.email-item[b-90gu6961f7] {
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    position: relative;
}

    .email-item:hover[b-90gu6961f7] {
        background: #f8f9fa;
    }

    .email-item.selected[b-90gu6961f7] {
        background: #007bff;
        color: white;
    }

.email-header[b-90gu6961f7] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.email-date[b-90gu6961f7] {
    font-size: 12px;
    opacity: 0.7;
}

.email-subject[b-90gu6961f7] {
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 14px;
}

.email-preview[b-90gu6961f7] {
    font-size: 12px;
    opacity: 0.8;
    line-height: 1.3;
}

.attachment-indicator[b-90gu6961f7] {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
}

.email-detail[b-90gu6961f7] {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-y: auto;
    background: white;
}

.email-content[b-90gu6961f7] {
    padding: 20px;
}

.email-header-detail[b-90gu6961f7] {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

    .email-header-detail h4[b-90gu6961f7] {
        margin: 0 0 10px 0;
    }

.email-actions[b-90gu6961f7] {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.compose-email[b-90gu6961f7] {
    padding: 20px;
}

.compose-form[b-90gu6961f7] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.compose-body[b-90gu6961f7] {
    min-height: 300px;
    resize: vertical;
}

.compose-actions[b-90gu6961f7] {
    display: flex;
    gap: 10px;
}

.no-selection[b-90gu6961f7] {
    padding: 40px 20px;
    text-align: center;
    color: #666;
}

.loading[b-90gu6961f7] {
    padding: 20px;
    text-align: center;
    color: #666;
}

.alert[b-90gu6961f7] {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.btn-outline-danger[b-90gu6961f7] {
    color: #dc3545;
    border-color: #dc3545;
    background-color: transparent;
}

    .btn-outline-danger:hover[b-90gu6961f7] {
        color: white;
        background-color: #dc3545;
        border-color: #dc3545;
    }
/* _content/HowardWebApp/Components/Pages/Home.razor.rz.scp.css */
/* Charts Container */
.charts-container[b-6sc499p80q] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header Section */
.header-section[b-6sc499p80q] {
    margin-bottom: 2rem;
}

    .header-section h1[b-6sc499p80q] {
        color: #2d3748;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-6sc499p80q] {
        color: #718096;
        font-size: 1.125rem;
        margin: 0;
    }

/* Loading States */
.loading-container[b-6sc499p80q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

.loading-spinner[b-6sc499p80q] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-6sc499p80q 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

/* Table Controls */
.table-controls[b-6sc499p80q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    gap: 2rem;
}

.table-info[b-6sc499p80q] {
    flex: 1;
}

.chart-count[b-6sc499p80q] {
    margin: 0 0 1rem 0;
    color: #4a5568;
    font-size: 1rem;
}

.search-results[b-6sc499p80q] {
    color: #718096;
    font-weight: normal;
    font-size: 0.875rem;
}

/* Search Container */
.search-container[b-6sc499p80q] {
    width: 100%;
}

.search-input-wrapper[b-6sc499p80q] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-6sc499p80q] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s ease;
}

    .search-input:focus[b-6sc499p80q] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-6sc499p80q]::placeholder {
        color: #a0aec0;
    }

.search-icon[b-6sc499p80q] {
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: #a0aec0;
    pointer-events: none;
    z-index: 1;
}

.clear-search[b-6sc499p80q] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    color: #a0aec0;
    transition: all 0.2s ease;
}

    .clear-search:hover[b-6sc499p80q] {
        color: #718096;
        background-color: #f7fafc;
    }

    .clear-search svg[b-6sc499p80q] {
        width: 0.875rem;
        height: 0.875rem;
    }

/* Table Actions */
.table-actions[b-6sc499p80q] {
    display: flex;
    gap: 0.5rem;
}

.btn[b-6sc499p80q] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-primary[b-6sc499p80q] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-6sc499p80q] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-6sc499p80q] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-secondary[b-6sc499p80q] {
    background: #e2e8f0;
    color: #4a5568;
}

    .btn-secondary:hover:not(:disabled)[b-6sc499p80q] {
        background: #cbd5e0;
        transform: translateY(-1px);
    }

    .btn-secondary:disabled[b-6sc499p80q] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.btn-icon[b-6sc499p80q] {
    width: 1rem;
    height: 1rem;
}

/* Table Container */
.table-container[b-6sc499p80q] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.charts-table[b-6sc499p80q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .charts-table thead[b-6sc499p80q] {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    }

    .charts-table th[b-6sc499p80q] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

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

        .charts-table tbody tr:hover[b-6sc499p80q] {
            background-color: #f7fafc;
        }

        .charts-table tbody tr:last-child[b-6sc499p80q] {
            border-bottom: none;
        }

        .charts-table tbody tr.expanded[b-6sc499p80q] {
            background-color: #f0f9ff;
        }

    .charts-table td[b-6sc499p80q] {
        padding: 1rem;
        vertical-align: middle;
    }

.chart-row[b-6sc499p80q] {
    transition: all 0.2s ease;
}

    .chart-row:hover[b-6sc499p80q] {
        background-color: #f8fafc;
    }

    .chart-row.expanded[b-6sc499p80q] {
        background-color: #f0f9ff;
        border-bottom: 2px solid #667eea;
    }

/* Customer Name Styling */
.customer-name[b-6sc499p80q] {
    font-weight: 600;
    color: #2d3748;
}

.customer-unknown[b-6sc499p80q] {
    color: #a0aec0;
    font-style: italic;
}

/* Status Badges */
.status-badge[b-6sc499p80q] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-verified[b-6sc499p80q] {
    background-color: #d1fae5;
    color: #064e3b;
    border: 1px solid #6ee7b7;
}

.status-unverified[b-6sc499p80q] {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

/* Image Indicators */
.image-indicators[b-6sc499p80q] {
    display: flex;
    gap: 0.25rem;
}

.image-indicator[b-6sc499p80q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

    .image-indicator.front[b-6sc499p80q] {
        background-color: #667eea;
    }

    .image-indicator.back[b-6sc499p80q] {
        background-color: #764ba2;
    }

/* Measurement Summary */
.measurement-summary[b-6sc499p80q] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.measurement-count[b-6sc499p80q] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
}

    .measurement-count.red[b-6sc499p80q] {
        background-color: #f56565;
    }

    .measurement-count.blue[b-6sc499p80q] {
        background-color: #667eea;
    }

    .measurement-count.green[b-6sc499p80q] {
        background-color: #48bb78;
    }

/* Action Buttons */
.action-buttons[b-6sc499p80q] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-6sc499p80q] {
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-action svg[b-6sc499p80q] {
        width: 1rem;
        height: 1rem;
    }

.btn-view[b-6sc499p80q] {
    background-color: #e6fffa;
    color: #234e52;
}

    .btn-view:hover[b-6sc499p80q] {
        background-color: #b2f5ea;
        transform: translateY(-1px);
    }

/* Chart Details Row */
.chart-details-row[b-6sc499p80q] {
    background-color: #f8fafc;
}

.chart-details-cell[b-6sc499p80q] {
    padding: 0 !important;
}

.chart-details-container[b-6sc499p80q] {
    padding: 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* Chart Images Section */
.chart-images-section h4[b-6sc499p80q] {
    margin: 0 0 1rem 0;
    color: #2d3748;
    font-size: 1.125rem;
    font-weight: 600;
}

.chart-images-grid[b-6sc499p80q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-image-container h5[b-6sc499p80q] {
    margin: 0 0 0.75rem 0;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
}

.chart-image[b-6sc499p80q] {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Measurements Section */
.measurements-section h4[b-6sc499p80q] {
    margin: 0 0 1rem 0;
    color: #2d3748;
    font-size: 1.125rem;
    font-weight: 600;
}

.measurements-grid[b-6sc499p80q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.measurement-group h5[b-6sc499p80q] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.measurement-group.red h5[b-6sc499p80q] {
    color: #e53e3e;
}

.measurement-group.blue h5[b-6sc499p80q] {
    color: #667eea;
}

.measurement-group.green h5[b-6sc499p80q] {
    color: #38a169;
}

.measurement-list[b-6sc499p80q] {
    background: white;
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
}

.measurement-point[b-6sc499p80q] {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f7fafc;
    font-size: 0.875rem;
    color: #2d3748;
}

    .measurement-point:last-child[b-6sc499p80q] {
        border-bottom: none;
    }

.measurement-more[b-6sc499p80q] {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #718096;
    font-style: italic;
}

/* Modal Styles */
.modal-overlay[b-6sc499p80q] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content[b-6sc499p80q] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wide-modal[b-6sc499p80q] {
    max-width: 100%;
    width: 95%;
}

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

    .modal-header h3[b-6sc499p80q] {
        margin: 0;
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
    }

.btn-close[b-6sc499p80q] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #718096;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .btn-close:hover[b-6sc499p80q] {
        background: #f7fafc;
        color: #4a5568;
    }

    .btn-close svg[b-6sc499p80q] {
        width: 1.25rem;
        height: 1.25rem;
    }

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

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

/* Chart Info Grid */
.chart-info-section[b-6sc499p80q] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .chart-info-section h4[b-6sc499p80q] {
        margin: 0 0 1rem 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

.chart-info-grid[b-6sc499p80q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.info-item[b-6sc499p80q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-6sc499p80q] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-6sc499p80q] {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

/* Large Images in Modal */
.chart-images-large[b-6sc499p80q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.chart-image-large-container h4[b-6sc499p80q] {
    margin: 0 0 1rem 0;
    color: #2d3748;
    font-size: 1.125rem;
    font-weight: 600;
}

.chart-image-large[b-6sc499p80q] {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Alert Styles */
.alert[b-6sc499p80q] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid;
}

.alert-danger[b-6sc499p80q] {
    background-color: #fed7d7;
    color: #742a2a;
    border-color: #f56565;
}

.alert-info[b-6sc499p80q] {
    background-color: #ebf8ff;
    color: #2c5282;
    border-color: #90cdf4;
}

.alert h4[b-6sc499p80q] {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.alert p[b-6sc499p80q] {
    margin: 0;
}

.mb-0[b-6sc499p80q] {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .charts-container[b-6sc499p80q] {
        padding: 1rem;
    }

    .header-section h1[b-6sc499p80q] {
        font-size: 2rem;
    }

    .table-controls[b-6sc499p80q] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-container[b-6sc499p80q] {
        max-width: none;
        width: 100%;
    }

    .table-actions[b-6sc499p80q] {
        justify-content: stretch;
    }

    .btn[b-6sc499p80q] {
        flex: 1;
        justify-content: center;
    }

    .charts-table[b-6sc499p80q] {
        font-size: 0.75rem;
    }

        .charts-table th[b-6sc499p80q],
        .charts-table td[b-6sc499p80q] {
            padding: 0.75rem 0.5rem;
        }

    .chart-images-grid[b-6sc499p80q] {
        grid-template-columns: 1fr;
    }

    .measurements-grid[b-6sc499p80q] {
        grid-template-columns: 1fr;
    }

    .chart-images-large[b-6sc499p80q] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-6sc499p80q] {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    .wide-modal[b-6sc499p80q] {
        width: 98%;
        max-height: 95vh;
    }

    .chart-info-grid[b-6sc499p80q] {
        grid-template-columns: 1fr;
    }

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

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

    .modal-footer[b-6sc499p80q] {
        padding: 1rem;
    }

    .chart-details-container[b-6sc499p80q] {
        padding: 1rem;
    }
}
/* _content/HowardWebApp/Components/Pages/IntegrateCharts.razor.rz.scp.css */
.integrate-container[b-0acwajawbe] {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    height: 100vh;
}

.header-section[b-0acwajawbe] {
    margin-bottom: 1rem;
}

    .header-section h1[b-0acwajawbe] {
        color: #2d3748;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-0acwajawbe] {
        color: #718096;
        font-size: 1.125rem;
        margin: 0;
    }

.integrate-layout[b-0acwajawbe] {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 20px;
    height: calc(100vh - 150px);
}

.canvas-column[b-0acwajawbe] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
}

.canvas-section[b-0acwajawbe] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.image-canvas-container[b-0acwajawbe] {
    position: relative;
    width: 100%;
    height: calc(100% - 80px);
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chart-image[b-0acwajawbe] {
    cursor: crosshair;
    transform-origin: center center;
    will-change: transform;
    object-fit: contain;
}

    .chart-image:active[b-0acwajawbe] {
        cursor: grabbing;
    }

.overlay-canvas[b-0acwajawbe] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
}

.canvas-controls[b-0acwajawbe] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1000;
}

.control-btn[b-0acwajawbe] {
    padding: 8px;
    border: none;
    border-radius: 5px;
    background-color: #4a5568;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

    .control-btn:hover[b-0acwajawbe] {
        background-color: #2d3748;
        transform: translateY(-1px);
    }

    .control-btn svg[b-0acwajawbe] {
        width: 1rem;
        height: 1rem;
    }

.detect-circles-btn[b-0acwajawbe] {
    background-color: #e53e3e;
}

    .detect-circles-btn:hover[b-0acwajawbe] {
        background-color: #c53030;
    }

.data-column[b-0acwajawbe] {
    position: relative;
    overflow-y: auto;
}

.zoom-indicator[b-0acwajawbe] {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.9rem;
    color: #718096;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.data-section[b-0acwajawbe] {
    margin-bottom: 25px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
}

    .data-section:last-child[b-0acwajawbe] {
        border-bottom: none;
    }

    .data-section h4[b-0acwajawbe] {
        color: #495057;
        margin-bottom: 15px;
        font-size: 1.1rem;
        font-weight: 600;
    }

.red-header[b-0acwajawbe] {
    color: #dc3545 !important;
    border-bottom: 2px solid #dc3545;
    padding-bottom: 5px;
}

.blue-header[b-0acwajawbe] {
    color: #007bff !important;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}

.green-header[b-0acwajawbe] {
    color: #28a745 !important;
    border-bottom: 2px solid #28a745;
    padding-bottom: 5px;
}

.info-grid[b-0acwajawbe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.info-item[b-0acwajawbe] {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

    .info-item label[b-0acwajawbe] {
        font-size: 0.8rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 2px;
    }

    .info-item span[b-0acwajawbe] {
        font-size: 0.9rem;
        color: #495057;
        word-break: break-word;
    }

.color-data-grid[b-0acwajawbe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.data-value[b-0acwajawbe] {
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 6px;
    color: white;
}

.red-data[b-0acwajawbe] {
    background: linear-gradient(135deg, #dc3545, #c82333);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.blue-data[b-0acwajawbe] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.green-data[b-0acwajawbe] {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

/* Circle Detection Styles */
.circle-controls[b-0acwajawbe] {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.detection-info[b-0acwajawbe] {
    margin-bottom: 15px;
    padding: 10px;
    background: #e8f5e8;
    border-radius: 6px;
    border-left: 4px solid #28a745;
}

    .detection-info p[b-0acwajawbe] {
        margin: 5px 0;
        font-size: 0.9rem;
        color: #155724;
    }

.slider-section[b-0acwajawbe] {
    margin-bottom: 15px;
}

    .slider-section label[b-0acwajawbe] {
        display: block;
        font-weight: 600;
        color: #495057;
        margin-bottom: 8px;
        font-size: 0.9rem;
    }

    .slider-section input[type="range"][b-0acwajawbe] {
        width: 100%;
        height: 8px;
        border-radius: 4px;
        background: #dee2e6;
        outline: none;
        -webkit-appearance: none;
    }

        .slider-section input[type="range"][b-0acwajawbe]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .slider-section input[type="range"][b-0acwajawbe]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

.btn[b-0acwajawbe] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.btn-primary[b-0acwajawbe] {
    background-color: #007bff;
    color: white;
}

    .btn-primary:hover[b-0acwajawbe] {
        background-color: #0056b3;
        transform: translateY(-1px);
    }

.loading-container[b-0acwajawbe] {
    text-align: center;
    padding: 60px 20px;
}

.loading-spinner[b-0acwajawbe] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-0acwajawbe 1s linear infinite;
    margin: 0 auto 20px;
}

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

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

.alert[b-0acwajawbe] {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.alert-danger[b-0acwajawbe] {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-info[b-0acwajawbe] {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

@media (max-width: 1200px) {
    .integrate-layout[b-0acwajawbe] {
        grid-template-columns: 65% 35%;
    }

    .info-grid[b-0acwajawbe] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .integrate-layout[b-0acwajawbe] {
        grid-template-columns: 1fr;
        grid-template-rows: 60% 40%;
    }

    .color-data-grid[b-0acwajawbe] {
        grid-template-columns: 1fr 1fr;
    }

    .canvas-controls[b-0acwajawbe] {
        flex-wrap: wrap;
        padding: 10px 15px;
    }
}
/* _content/HowardWebApp/Components/Pages/Login.razor.rz.scp.css */
/* Login Container */
.login-container[b-muixr4dxfe] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f8f9fa;
    padding: 20px;
}

/* Login Card */
.login-card[b-muixr4dxfe] {
    background: white;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    position: relative;
}

/* Header Styles */
.login-header[b-muixr4dxfe] {
    text-align: center;
    margin-bottom: 32px;
}

.secure-login-title[b-muixr4dxfe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #6366f1;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.shield-icon[b-muixr4dxfe] {
    width: 20px;
    height: 20px;
    color: #6366f1;
}

.welcome-title[b-muixr4dxfe] {
    color: #6366f1;
    font-size: 24px;
    font-weight: 500;
    margin: 0;
}

/* Form Groups - More Aggressive Overrides */
.form-group[b-muixr4dxfe] {
    margin-bottom: 20px;
    width: 100%;
}

    /* Target all possible Blazor input variations */
    .form-group input[b-muixr4dxfe],
    .form-group .form-input[b-muixr4dxfe],
    .form-group input[type="text"][b-muixr4dxfe],
    .form-group input[type="password"][b-muixr4dxfe],
    .form-group input[type="email"][b-muixr4dxfe],
    [b-muixr4dxfe] .form-input,
    [b-muixr4dxfe] input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 14px 16px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        background-color: #ffffff !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 0 !important;
    }

.form-label[b-muixr4dxfe] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8b5cf6;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
}

.input-icon[b-muixr4dxfe] {
    width: 16px;
    height: 16px;
    color: #8b5cf6;
}

/* Remove duplicate - handled above */

/* Focus States - Aggressive Override */
.form-group input:focus[b-muixr4dxfe],
.form-group .form-input:focus[b-muixr4dxfe],
.form-group input[type="text"]:focus[b-muixr4dxfe],
.form-group input[type="password"]:focus[b-muixr4dxfe],
.form-group input[type="email"]:focus[b-muixr4dxfe],
[b-muixr4dxfe] .form-input:focus,
[b-muixr4dxfe] input:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    background-color: white !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* Placeholder Styles */
.form-group input[b-muixr4dxfe]::placeholder,
.form-group .form-input[b-muixr4dxfe]::placeholder,
.form-group input[type="text"][b-muixr4dxfe]::placeholder,
.form-group input[type="password"][b-muixr4dxfe]::placeholder,
.form-group input[type="email"][b-muixr4dxfe]::placeholder,
[b-muixr4dxfe] .form-input::placeholder,
[b-muixr4dxfe] input::placeholder {
    color: #9ca3af !important;
}

/* Password Input Container - More Aggressive */
.password-input-container[b-muixr4dxfe] {
    position: relative;
    width: 100%;
    display: block;
}

    .password-input-container input[b-muixr4dxfe],
    .password-input-container .form-input[b-muixr4dxfe],
    .password-input[b-muixr4dxfe],
    [b-muixr4dxfe] .password-input {
        padding-right: 48px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
    }

.password-toggle[b-muixr4dxfe] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #9ca3af;
    transition: color 0.2s ease;
}

    .password-toggle:hover[b-muixr4dxfe] {
        color: #6366f1;
    }

    .password-toggle svg[b-muixr4dxfe] {
        width: 20px;
        height: 20px;
    }

/* Sign In Button */
.signin-button[b-muixr4dxfe] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 20px;
}

    .signin-button:hover[b-muixr4dxfe] {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

    .signin-button:active[b-muixr4dxfe] {
        transform: translateY(0);
    }

/* Error Message */
.error-message[b-muixr4dxfe] {
    background-color: #fef2f2;
    color: #dc2626;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #fecaca;
    font-size: 14px;
}

/* Blazor Specific Overrides */
.login-card .form-control[b-muixr4dxfe],
.login-card .blazor-error-boundary input[b-muixr4dxfe],
[b-muixr4dxfe] .form-control,
[b-muixr4dxfe] .input-text {
    width: 100% !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
}

/* Validation styling override */
.login-card .validation-message[b-muixr4dxfe],
.login-card .field-validation-error[b-muixr4dxfe] {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Additional safety net for all inputs in login card */
.login-card input[b-muixr4dxfe] {
    width: 100% !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* Footer Links */
.login-footer[b-muixr4dxfe] {
    text-align: center;
    margin-top: 24px;
}

.register-link[b-muixr4dxfe] {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 12px;
}

    .register-link a[b-muixr4dxfe] {
        color: #6366f1;
        text-decoration: none;
        font-weight: 500;
    }

        .register-link a:hover[b-muixr4dxfe] {
            text-decoration: underline;
        }

.forgot-password-link[b-muixr4dxfe] {
    color: #6366f1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

    .forgot-password-link:hover[b-muixr4dxfe] {
        text-decoration: underline;
    }

/* Responsive Design */
@media (max-width: 480px) {
    .login-container[b-muixr4dxfe] {
        padding: 12px;
    }

    .login-card[b-muixr4dxfe] {
        padding: 24px;
        border-radius: 16px;
    }

    .welcome-title[b-muixr4dxfe] {
        font-size: 20px;
    }
}
/* _content/HowardWebApp/Components/Pages/Register.razor.rz.scp.css */
/* Register Container */
.register-container[b-109ls8vqny] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f8f9fa;
    padding: 20px;
}

/* Register Card */
.register-card[b-109ls8vqny] {
    background: white;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    position: relative;
}

/* Header Styles */
.register-header[b-109ls8vqny] {
    text-align: center;
    margin-bottom: 32px;
}

.register-account-title[b-109ls8vqny] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #6366f1;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.person-icon[b-109ls8vqny] {
    width: 20px;
    height: 20px;
    color: #6366f1;
}

.create-account-title[b-109ls8vqny] {
    color: #6366f1;
    font-size: 24px;
    font-weight: 500;
    margin: 0;
}

/* Form Groups - Aggressive Blazor Overrides */
.form-group[b-109ls8vqny] {
    margin-bottom: 20px;
    width: 100%;
}

    .form-group input[b-109ls8vqny],
    .form-group .form-input[b-109ls8vqny],
    .form-group input[type="text"][b-109ls8vqny],
    .form-group input[type="password"][b-109ls8vqny],
    .form-group input[type="email"][b-109ls8vqny],
    [b-109ls8vqny] .form-input,
    [b-109ls8vqny] input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 14px 16px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        background-color: #ffffff !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 0 !important;
    }

.form-label[b-109ls8vqny] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8b5cf6;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
}

.input-icon[b-109ls8vqny] {
    width: 16px;
    height: 16px;
    color: #8b5cf6;
}

/* Input Wrapper with End Icons */
.input-wrapper[b-109ls8vqny] {
    position: relative;
    width: 100%;
}

    .input-wrapper .form-input[b-109ls8vqny] {
        padding-right: 48px !important;
    }

.input-end-icon[b-109ls8vqny] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    pointer-events: none;
}

/* Focus States - Aggressive Override */
.form-group input:focus[b-109ls8vqny],
.form-group .form-input:focus[b-109ls8vqny],
.form-group input[type="text"]:focus[b-109ls8vqny],
.form-group input[type="password"]:focus[b-109ls8vqny],
.form-group input[type="email"]:focus[b-109ls8vqny],
[b-109ls8vqny] .form-input:focus,
[b-109ls8vqny] input:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    background-color: white !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* Placeholder Styles */
.form-group input[b-109ls8vqny]::placeholder,
.form-group .form-input[b-109ls8vqny]::placeholder,
.form-group input[type="text"][b-109ls8vqny]::placeholder,
.form-group input[type="password"][b-109ls8vqny]::placeholder,
.form-group input[type="email"][b-109ls8vqny]::placeholder,
[b-109ls8vqny] .form-input::placeholder,
[b-109ls8vqny] input::placeholder {
    color: #9ca3af !important;
}

/* Password Input Container - More Aggressive */
.password-input-container[b-109ls8vqny] {
    position: relative;
    width: 100%;
    display: block;
}

    .password-input-container input[b-109ls8vqny],
    .password-input-container .form-input[b-109ls8vqny],
    .password-input[b-109ls8vqny],
    [b-109ls8vqny] .password-input {
        padding-right: 48px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
    }

.password-toggle[b-109ls8vqny] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #9ca3af;
    transition: color 0.2s ease;
}

    .password-toggle:hover[b-109ls8vqny] {
        color: #6366f1;
    }

    .password-toggle svg[b-109ls8vqny] {
        width: 20px;
        height: 20px;
    }

/* Register Button */
.register-button[b-109ls8vqny] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .register-button:hover[b-109ls8vqny] {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

    .register-button:active[b-109ls8vqny] {
        transform: translateY(0);
    }

.button-icon[b-109ls8vqny] {
    width: 18px;
    height: 18px;
}

/* Error Message */
.error-message[b-109ls8vqny] {
    background-color: #fef2f2;
    color: #dc2626;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #fecaca;
    font-size: 14px;
}

/* Validation Messages */
.validation-message[b-109ls8vqny] {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Footer Links */
.register-footer[b-109ls8vqny] {
    text-align: center;
    margin-top: 24px;
}

.login-link[b-109ls8vqny] {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

    .login-link a[b-109ls8vqny] {
        color: #6366f1;
        text-decoration: none;
        font-weight: 500;
    }

        .login-link a:hover[b-109ls8vqny] {
            text-decoration: underline;
        }

/* Blazor Specific Overrides */
.register-card .form-control[b-109ls8vqny],
.register-card .blazor-error-boundary input[b-109ls8vqny],
[b-109ls8vqny] .form-control,
[b-109ls8vqny] .input-text {
    width: 100% !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
}

/* Validation styling override */
.register-card .validation-message[b-109ls8vqny],
.register-card .field-validation-error[b-109ls8vqny] {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Additional safety net for all inputs in register card */
.register-card input[b-109ls8vqny] {
    width: 100% !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* Responsive Design */
@media (max-width: 480px) {
    .register-container[b-109ls8vqny] {
        padding: 12px;
    }

    .register-card[b-109ls8vqny] {
        padding: 24px;
        border-radius: 16px;
    }

    .create-account-title[b-109ls8vqny] {
        font-size: 20px;
    }
}
/* Success Message */
.success-message[b-109ls8vqny] {
    background-color: #f0fdf4;
    color: #16a34a;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #bbf7d0;
    font-size: 14px;
    font-weight: 500;
}

/* Loading state for button */
.register-button:disabled[b-109ls8vqny] {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    cursor: not-allowed;
    transform: none;
}

    .register-button:disabled:hover[b-109ls8vqny] {
        transform: none;
        box-shadow: none;
    }

/* Select dropdown styling */
.form-group select[b-109ls8vqny],
.form-group .form-input select[b-109ls8vqny],
[b-109ls8vqny] select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 14px 40px 14px 16px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'><polyline points='6,9 12,15 18,9'></polyline></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

    .form-group select:focus[b-109ls8vqny],
    [b-109ls8vqny] select:focus {
        outline: none !important;
        border-color: #6366f1 !important;
        background-color: white !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
    }
/* _content/HowardWebApp/Components/Pages/Stations.razor.rz.scp.css */
/* Stations.razor.css */
.stations-container[b-btwwwwktsn] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header-section[b-btwwwwktsn] {
    margin-bottom: 2rem;
}

    .header-section h1[b-btwwwwktsn] {
        color: #2d3748;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-btwwwwktsn] {
        color: #718096;
        font-size: 1.125rem;
        margin: 0;
    }

/* Loading Animation */
.loading-container[b-btwwwwktsn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

.loading-spinner[b-btwwwwktsn] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-btwwwwktsn 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

/* Alert Styles */
.alert[b-btwwwwktsn] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid;
}

.alert-danger[b-btwwwwktsn] {
    background-color: #fed7d7;
    color: #742a2a;
    border-color: #f56565;
}

.alert-info[b-btwwwwktsn] {
    background-color: #ebf8ff;
    color: #2c5282;
    border-color: #90cdf4;
}

.alert h4[b-btwwwwktsn] {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Table Controls */
.table-controls[b-btwwwwktsn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    gap: 2rem;
}

.table-info[b-btwwwwktsn] {
    flex: 1;
}

.station-count[b-btwwwwktsn] {
    margin: 0 0 1rem 0;
    color: #4a5568;
    font-size: 1rem;
}

.search-results[b-btwwwwktsn] {
    color: #718096;
    font-weight: normal;
    font-size: 0.875rem;
}

/* Search Container */
.search-container[b-btwwwwktsn] {
    width: 100%;
}

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

.search-icon[b-btwwwwktsn] {
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: #a0aec0;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-btwwwwktsn] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s ease;
}

    .search-input:focus[b-btwwwwktsn] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .search-input[b-btwwwwktsn]::placeholder {
        color: #a0aec0;
    }

.clear-search[b-btwwwwktsn] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    color: #a0aec0;
    transition: all 0.2s ease;
}

    .clear-search:hover[b-btwwwwktsn] {
        color: #718096;
        background-color: #f7fafc;
    }

    .clear-search svg[b-btwwwwktsn] {
        width: 0.875rem;
        height: 0.875rem;
    }

.table-actions[b-btwwwwktsn] {
    display: flex;
    gap: 0.5rem;
}

/* Button Styles */
.btn[b-btwwwwktsn] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-primary[b-btwwwwktsn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-btwwwwktsn] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-btwwwwktsn] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-secondary[b-btwwwwktsn] {
    background: #e2e8f0;
    color: #4a5568;
}

    .btn-secondary:hover:not(:disabled)[b-btwwwwktsn] {
        background: #cbd5e0;
        transform: translateY(-1px);
    }

    .btn-secondary:disabled[b-btwwwwktsn] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.btn-danger[b-btwwwwktsn] {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
}

    .btn-danger:hover:not(:disabled)[b-btwwwwktsn] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3);
    }

    .btn-danger:disabled[b-btwwwwktsn] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-icon[b-btwwwwktsn] {
    width: 1rem;
    height: 1rem;
}

.btn-spinner[b-btwwwwktsn] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-btwwwwktsn 1s linear infinite;
}

.btn-close[b-btwwwwktsn] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #718096;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .btn-close:hover[b-btwwwwktsn] {
        background: #f7fafc;
        color: #4a5568;
    }

    .btn-close svg[b-btwwwwktsn] {
        width: 1.25rem;
        height: 1.25rem;
    }

/* Table Container */
.table-container[b-btwwwwktsn] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* Table Styles */
.stations-table[b-btwwwwktsn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .stations-table thead[b-btwwwwktsn] {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    }

    .stations-table th[b-btwwwwktsn] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .stations-table tbody tr[b-btwwwwktsn] {
        border-bottom: 1px solid #e2e8f0;
        transition: background-color 0.2s ease;
        cursor: pointer;
    }

        .stations-table tbody tr:hover[b-btwwwwktsn] {
            background-color: #f7fafc;
        }

        .stations-table tbody tr:last-child[b-btwwwwktsn] {
            border-bottom: none;
        }

        .stations-table tbody tr.expanded[b-btwwwwktsn] {
            background-color: #f0f9ff;
        }

    .stations-table td[b-btwwwwktsn] {
        padding: 1rem;
        vertical-align: middle;
    }

.station-name[b-btwwwwktsn] {
    font-weight: 600;
    color: #2d3748;
}

/* Station row specific styles */
.station-row[b-btwwwwktsn] {
    transition: all 0.2s ease;
}

    .station-row:hover[b-btwwwwktsn] {
        background-color: #f8fafc;
    }

    .station-row.expanded[b-btwwwwktsn] {
        background-color: #f0f9ff;
        border-bottom: 2px solid #3b82f6;
    }

.expansion-cell[b-btwwwwktsn] {
    text-align: center;
    padding: 0.5rem;
}

.expansion-icon[b-btwwwwktsn] {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
    color: #6b7280;
}

    .expansion-icon.rotated[b-btwwwwktsn] {
        transform: rotate(90deg);
        color: #3b82f6;
    }

/* Station data row */
.station-data-row[b-btwwwwktsn] {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.station-data-cell[b-btwwwwktsn] {
    padding: 0;
    border-top: 1px solid #e2e8f0;
    background: #c5cedf;
}

/* Customer Badge */
.customer-badge[b-btwwwwktsn] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #e0e7ff;
    color: #3730a3;
    border: 1px solid #a5b4fc;
}

/* Status Badge */
.status-badge[b-btwwwwktsn] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-active[b-btwwwwktsn] {
    background-color: #d1fae5;
    color: #064e3b;
    border: 1px solid #6ee7b7;
}

.status-inactive[b-btwwwwktsn] {
    background-color: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

.status-maintenance[b-btwwwwktsn] {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

.status-operational[b-btwwwwktsn] {
    background-color: #d1fae5;
    color: #064e3b;
    border: 1px solid #6ee7b7;
}

/* Action Buttons */
.action-buttons[b-btwwwwktsn] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-btwwwwktsn] {
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-action svg[b-btwwwwktsn] {
        width: 1rem;
        height: 1rem;
    }

.btn-view[b-btwwwwktsn] {
    background-color: #e6fffa;
    color: #234e52;
}

    .btn-view:hover[b-btwwwwktsn] {
        background-color: #b2f5ea;
        transform: translateY(-1px);
    }

.btn-edit[b-btwwwwktsn] {
    background-color: #fef5e7;
    color: #744210;
}

    .btn-edit:hover[b-btwwwwktsn] {
        background-color: #f6e05e;
        transform: translateY(-1px);
    }

.btn-delete[b-btwwwwktsn] {
    background-color: #fed7d7;
    color: #742a2a;
}

    .btn-delete:hover[b-btwwwwktsn] {
        background-color: #fc8181;
        transform: translateY(-1px);
    }

/* Modal Styles */
.modal-overlay[b-btwwwwktsn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content[b-btwwwwktsn] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wide-modal[b-btwwwwktsn] {
    max-width: 100%;
    width: 95%;
}
.add-station-wide-modal[b-btwwwwktsn] {
    max-width: 60%;
    width: 60%;
}

.modal-header[b-btwwwwktsn] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

    .modal-header h3[b-btwwwwktsn] {
        margin: 0;
        color: #2d3748;
        font-size: 1.25rem;
        font-weight: 600;
    }

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

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

/* Station Details Dialog Styles */
.station-info-section[b-btwwwwktsn] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .station-info-section h4[b-btwwwwktsn] {
        margin: 0 0 1rem 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

.station-info-grid[b-btwwwwktsn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.info-item[b-btwwwwktsn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-btwwwwktsn] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-btwwwwktsn] {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

/* Station Data Styles */
.station-data-container[b-btwwwwktsn] {
    padding: 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

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

    .station-data-header h4[b-btwwwwktsn] {
        margin: 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

.stations-data-grid[b-btwwwwktsn] {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    margin-top: 0;
    background: transparent;
    padding-left: 10%;
    padding-right: 10%;
}

.datas-item[b-btwwwwktsn] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding: 0.75rem !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    margin: 0 !important;
    transition: all 0.2s ease;
}

    .datas-item:hover[b-btwwwwktsn] {
        background-color: #f8fafc !important;
        border-color: #cbd5e0 !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

.datas-label[b-btwwwwktsn] {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
}

.datas-value[b-btwwwwktsn] {
    font-size: 0.875rem !important;
    color: #374151 !important;
    font-weight: 500 !important;
    font-family: 'Courier New', monospace !important;
    margin: 0 !important;
}

.station-data-form-grid[b-btwwwwktsn] {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.5rem !important;
    margin-top: 1rem;
    padding: 0 1rem;
}

.form-section[b-btwwwwktsn] {
    background: #f8fafc !important;
    padding: 1.5rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    height: fit-content;
}

    .form-section h4[b-btwwwwktsn] {
        margin: 0 0 1rem 0 !important;
        color: #2d3748 !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 0.5rem;
    }

/* Form Styles */
.form-group[b-btwwwwktsn] {
    margin-bottom: 1.5rem;
}

.form-label[b-btwwwwktsn] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.form-input[b-btwwwwktsn] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-input:focus[b-btwwwwktsn] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-input:invalid[b-btwwwwktsn] {
        border-color: #f56565;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .stations-container[b-btwwwwktsn] {
        padding: 1rem;
    }

    .table-controls[b-btwwwwktsn] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-container[b-btwwwwktsn] {
        max-width: none;
        width: 100%;
    }

    .modal-content[b-btwwwwktsn] {
        width: 95%;
        margin: 0.5rem;
    }

    .wide-modal[b-btwwwwktsn] {
        width: 98%;
        max-height: 95vh;
    }

    .station-info-grid[b-btwwwwktsn] {
        grid-template-columns: 1fr;
    }

    .stations-data-grid[b-btwwwwktsn] {
        grid-template-columns: 1fr !important;
    }

    .station-data-form-grid[b-btwwwwktsn] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0;
    }

    .action-buttons[b-btwwwwktsn] {
        flex-wrap: wrap;
    }

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

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

    .modal-footer[b-btwwwwktsn] {
        padding: 1rem;
    }

    .stations-table[b-btwwwwktsn] {
        font-size: 0.75rem;
    }

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

    .station-data-container[b-btwwwwktsn] {
        padding: 1rem;
    }

    .station-data-header[b-btwwwwktsn] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .expansion-cell[b-btwwwwktsn] {
        position: sticky;
        left: 0;
        background-color: inherit;
        z-index: 1;
    }
}

@media (max-width: 1200px) and (min-width: 769px) {
    .station-data-form-grid[b-btwwwwktsn] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Pagination Styles */
.pagination-container[b-btwwwwktsn] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding: 1rem;
}

.pagination[b-btwwwwktsn] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.page-btn[b-btwwwwktsn] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    background: white;
    color: #4a5568;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 2.5rem;
}

    .page-btn:hover:not(.disabled)[b-btwwwwktsn] {
        background: #f7fafc;
        border-color: #cbd5e0;
        transform: translateY(-1px);
    }

    .page-btn.active[b-btwwwwktsn] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: #667eea;
    }

    .page-btn.disabled[b-btwwwwktsn] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

.page-info[b-btwwwwktsn] {
    color: #718096;
    font-weight: normal;
    font-size: 0.875rem;
}

.station-data-table[b-btwwwwktsn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .station-data-table thead[b-btwwwwktsn] {
        background: #4a5568;
    }

    .station-data-table th[b-btwwwwktsn] {
        padding: 0.5rem;
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

.station-data-row[b-btwwwwktsn] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .station-data-row:hover[b-btwwwwktsn] {
        background-color: #f7fafc;
    }

.station-data-details-cell[b-btwwwwktsn] {
    padding: 1rem;
    background: #f8fafc;
}

.add-station-form-grid[b-btwwwwktsn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.form-column[b-btwwwwktsn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 768px) {
    .add-station-form-grid[b-btwwwwktsn] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
.barcode-bubble[b-btwwwwktsn] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .barcode-bubble:hover[b-btwwwwktsn] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .barcode-bubble.empty[b-btwwwwktsn] {
        background: #e2e8f0;
        color: #718096;
    }

        .barcode-bubble.empty:hover[b-btwwwwktsn] {
            background: #cbd5e0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
/* _content/HowardWebApp/Components/Pages/TextProcessing.razor.rz.scp.css */
/* Charts Container */
.charts-container[b-x1pucwqatn] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header Section */
.header-section[b-x1pucwqatn] {
    margin-bottom: 2rem;
}

    .header-section h1[b-x1pucwqatn] {
        color: #2d3748;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .header-section p[b-x1pucwqatn] {
        color: #718096;
        font-size: 1.125rem;
        margin: 0;
    }

/* Loading States */
.loading-container[b-x1pucwqatn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

.loading-spinner[b-x1pucwqatn] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-x1pucwqatn 1s linear infinite;
    margin-bottom: 1rem;
}

.spinner-border[b-x1pucwqatn] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-x1pucwqatn 0.75s linear infinite;
}

.spinner-border-sm[b-x1pucwqatn] {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 0.1em;
}

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

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

/* Table Controls */
.table-controls[b-x1pucwqatn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.table-info[b-x1pucwqatn] {
    flex: 1;
}

.chart-count[b-x1pucwqatn] {
    margin: 0;
    color: #4a5568;
    font-size: 1rem;
}

/* Table Actions */
.table-actions[b-x1pucwqatn] {
    display: flex;
    gap: 0.5rem;
}

.btn[b-x1pucwqatn] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-primary[b-x1pucwqatn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-x1pucwqatn] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-x1pucwqatn] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.btn-secondary[b-x1pucwqatn] {
    background: #e2e8f0;
    color: #4a5568;
}

    .btn-secondary:hover:not(:disabled)[b-x1pucwqatn] {
        background: #cbd5e0;
        transform: translateY(-1px);
    }

    .btn-secondary:disabled[b-x1pucwqatn] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.btn-icon[b-x1pucwqatn] {
    width: 1rem;
    height: 1rem;
}

/* Table Container */
.table-container[b-x1pucwqatn] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.charts-table[b-x1pucwqatn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .charts-table thead[b-x1pucwqatn] {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    }

    .charts-table th[b-x1pucwqatn] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .charts-table tbody tr[b-x1pucwqatn] {
        border-bottom: 1px solid #e2e8f0;
        transition: background-color 0.2s ease;
        cursor: pointer;
    }

        .charts-table tbody tr:hover[b-x1pucwqatn] {
            background-color: #f7fafc;
        }

        .charts-table tbody tr:last-child[b-x1pucwqatn] {
            border-bottom: none;
        }

    .charts-table td[b-x1pucwqatn] {
        padding: 1rem;
        vertical-align: middle;
    }

.chart-row[b-x1pucwqatn] {
    transition: all 0.3s ease;
}

    .chart-row:hover[b-x1pucwqatn] {
        background-color: #f8fafc;
    }

    .chart-row.expanded[b-x1pucwqatn] {
        background-color: #f0f9ff;
        border-bottom: 2px solid #667eea;
    }
    .chart-row.removing[b-x1pucwqatn] {
        opacity: 0;
        transform: translateX(-20px);
    }

/* Customer Name Styling */
.customer-name[b-x1pucwqatn] {
    font-weight: 600;
    color: #2d3748;
}

.customer-unknown[b-x1pucwqatn] {
    color: #a0aec0;
    font-style: italic;
}

/* Progress Indicator */
.progress-indicator[b-x1pucwqatn] {
    height: 20px;
    width: 20px;
    margin-right: 8px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

.stage-1[b-x1pucwqatn] {
    background-color: #FFC107;
}

/* Action Buttons */
.btn-action[b-x1pucwqatn] {
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

    .btn-action svg[b-x1pucwqatn] {
        width: 1rem;
        height: 1rem;
    }

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

.btn-process[b-x1pucwqatn] {
    background-color: #667eea;
    color: white;
}

    .btn-process:hover:not(:disabled)[b-x1pucwqatn] {
        background-color: #5a67d8;
        transform: translateY(-1px);
    }

.btn-update[b-x1pucwqatn] {
    background-color: #f0f0f0;
    color: #4a5568;
    border: 1px solid #ddd;
}

    .btn-update:hover:not(:disabled)[b-x1pucwqatn] {
        background-color: #e0e0e0;
        transform: translateY(-1px);
    }

/* Chevron Icon */
.chevron-icon[b-x1pucwqatn] {
    width: 1.25rem;
    height: 1.25rem;
    color: #718096;
    transition: transform 0.2s ease;
}

.chevron-down[b-x1pucwqatn] {
    transform: rotate(0deg);
}

.chevron-up[b-x1pucwqatn] {
    transform: rotate(180deg);
}

/* Chart Details Row */
.chart-details-row[b-x1pucwqatn] {
    background-color: #f8fafc;
}

.chart-details-cell[b-x1pucwqatn] {
    padding: 0 !important;
}

.chart-details-container[b-x1pucwqatn] {
    padding: 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* Chart Images Section */
.chart-images-section h4[b-x1pucwqatn] {
    margin: 0 0 1rem 0;
    color: #2d3748;
    font-size: 1.125rem;
    font-weight: 600;
}

.chart-images-grid[b-x1pucwqatn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-image-container h5[b-x1pucwqatn] {
    margin: 0 0 0.75rem 0;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 600;
}

.image-wrapper[b-x1pucwqatn] {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-image[b-x1pucwqatn] {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* Interactive Viewer Section */
.interactive-viewer-section[b-x1pucwqatn] {
    margin-top: 2rem;
}

    .interactive-viewer-section h4[b-x1pucwqatn] {
        margin: 0 0 1rem 0;
        color: #2d3748;
        font-size: 1.125rem;
        font-weight: 600;
    }

.image-viewer[b-x1pucwqatn] {
    background-color: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 600px;
}

.image-canvas[b-x1pucwqatn] {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f0f0f0;
}

.interactive-image[b-x1pucwqatn] {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    cursor: grab;
    transition: transform 0.1s ease;
}

/* Controls */
.controls[b-x1pucwqatn] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.control-btn[b-x1pucwqatn] {
    padding: 0.5rem;
    border: none;
    border-radius: 5px;
    background-color: #4a5568;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

    .control-btn:hover[b-x1pucwqatn] {
        background-color: #2d3748;
        transform: translateY(-1px);
    }

    .control-btn svg[b-x1pucwqatn] {
        width: 1rem;
        height: 1rem;
    }

.zoom-level[b-x1pucwqatn] {
    text-align: center;
    font-size: 0.875rem;
    color: #718096;
    font-weight: 500;
}

/* Alert Styles */
.alert[b-x1pucwqatn] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid;
}

.alert-danger[b-x1pucwqatn] {
    background-color: #fed7d7;
    color: #742a2a;
    border-color: #f56565;
}

.alert-info[b-x1pucwqatn] {
    background-color: #ebf8ff;
    color: #2c5282;
    border-color: #90cdf4;
}

.alert h4[b-x1pucwqatn] {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.alert p[b-x1pucwqatn] {
    margin: 0;
}

.mb-0[b-x1pucwqatn] {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .charts-container[b-x1pucwqatn] {
        padding: 1rem;
    }

    .header-section h1[b-x1pucwqatn] {
        font-size: 2rem;
    }

    .table-controls[b-x1pucwqatn] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .table-actions[b-x1pucwqatn] {
        justify-content: stretch;
    }

    .btn[b-x1pucwqatn] {
        flex: 1;
        justify-content: center;
    }

    .charts-table[b-x1pucwqatn] {
        font-size: 0.75rem;
    }

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

    .chart-images-grid[b-x1pucwqatn] {
        grid-template-columns: 1fr;
    }

    .chart-details-container[b-x1pucwqatn] {
        padding: 1rem;
    }

    .image-canvas[b-x1pucwqatn] {
        height: 300px;
    }
}
/* _content/HowardWebApp/Components/Pages/ViewEFMs.razor.rz.scp.css */
/* ViewEFMs.razor.css */

.efms-container[b-mrvd8lhkep] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header-section[b-mrvd8lhkep] {
    margin-bottom: 2rem;
}

    .header-section h1[b-mrvd8lhkep] {
        font-size: 2rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 0.5rem 0;
    }

    .header-section p[b-mrvd8lhkep] {
        color: #6b7280;
        margin: 0;
    }

.loading-container[b-mrvd8lhkep] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.loading-spinner[b-mrvd8lhkep] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-mrvd8lhkep 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

.table-controls[b-mrvd8lhkep] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.search-container[b-mrvd8lhkep] {
    flex: 1;
    max-width: 400px;
}

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

.search-icon[b-mrvd8lhkep] {
    position: absolute;
    left: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    color: #6b7280;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-mrvd8lhkep] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
}

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

.clear-search[b-mrvd8lhkep] {
    position: absolute;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

    .clear-search:hover[b-mrvd8lhkep] {
        color: #374151;
        background-color: #f3f4f6;
    }

    .clear-search svg[b-mrvd8lhkep] {
        width: 1rem;
        height: 1rem;
    }

.table-actions[b-mrvd8lhkep] {
    display: flex;
    gap: 0.5rem;
}

.btn[b-mrvd8lhkep] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

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

.btn-primary[b-mrvd8lhkep] {
    background-color: #3b82f6;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-mrvd8lhkep] {
        background-color: #2563eb;
    }

.btn-secondary[b-mrvd8lhkep] {
    background-color: #6b7280;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-mrvd8lhkep] {
        background-color: #374151;
    }

.btn-icon[b-mrvd8lhkep] {
    width: 1rem;
    height: 1rem;
}

.efm-count[b-mrvd8lhkep] {
    margin-bottom: 1rem;
    color: #374151;
    font-size: 0.875rem;
}

.page-info[b-mrvd8lhkep], .search-results[b-mrvd8lhkep] {
    color: #6b7280;
    font-weight: normal;
}

.table-container[b-mrvd8lhkep] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.efms-table[b-mrvd8lhkep] {
    width: 100%;
    border-collapse: collapse;
}

    .efms-table th[b-mrvd8lhkep] {
        background-color: #f9fafb;
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.875rem;
    }

    .efms-table td[b-mrvd8lhkep] {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        color: #374151;
        font-size: 0.875rem;
    }


.customer-badge[b-mrvd8lhkep] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #eff6ff;
    color: #1d4ed8;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.file-type-badge[b-mrvd8lhkep] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: #f3f4f6;
    color: #374151;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.file-name[b-mrvd8lhkep] {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    color: #4b5563;
}

.text-muted[b-mrvd8lhkep] {
    color: #9ca3af;
    font-style: italic;
}

.action-buttons[b-mrvd8lhkep] {
    display: flex;
    gap: 0.25rem;
}

.btn-action[b-mrvd8lhkep] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-action svg[b-mrvd8lhkep] {
        width: 1rem;
        height: 1rem;
    }

.btn-edit[b-mrvd8lhkep] {
    background-color: #f59e0b;
    color: white;
}

    .btn-edit:hover[b-mrvd8lhkep] {
        background-color: #d97706;
    }

.btn-primary.btn-action[b-mrvd8lhkep] {
    background-color: #10b981;
    color: white;
}

    .btn-primary.btn-action:hover[b-mrvd8lhkep] {
        background-color: #059669;
    }

.pagination-container[b-mrvd8lhkep] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.pagination[b-mrvd8lhkep] {
    display: flex;
    gap: 0.25rem;
}

.page-btn[b-mrvd8lhkep] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

    .page-btn:hover:not(.disabled)[b-mrvd8lhkep] {
        background-color: #f3f4f6;
    }

    .page-btn.active[b-mrvd8lhkep] {
        background-color: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    .page-btn.disabled[b-mrvd8lhkep] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Modal Styles */
.modal-overlay[b-mrvd8lhkep] {
    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: 50;
    padding: 1rem;
}

.modal-content[b-mrvd8lhkep] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-mrvd8lhkep] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 0 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

    .modal-header h3[b-mrvd8lhkep] {
        font-size: 1.25rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

.btn-close[b-mrvd8lhkep] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    cursor: pointer;
    color: #6b7280;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

    .btn-close:hover[b-mrvd8lhkep] {
        background-color: #f3f4f6;
        color: #374151;
    }

    .btn-close svg[b-mrvd8lhkep] {
        width: 1.25rem;
        height: 1.25rem;
    }

.modal-body[b-mrvd8lhkep] {
    padding: 0 1.5rem;
}

.modal-footer[b-mrvd8lhkep] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 1.5rem;
}

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

.form-label[b-mrvd8lhkep] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-input[b-mrvd8lhkep] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
    box-sizing: border-box;
}

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

.btn-spinner[b-mrvd8lhkep] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-mrvd8lhkep 1s linear infinite;
}

.alert[b-mrvd8lhkep] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.alert-danger[b-mrvd8lhkep] {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-success[b-mrvd8lhkep] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.alert-info[b-mrvd8lhkep] {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.alert h4[b-mrvd8lhkep] {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.alert p[b-mrvd8lhkep] {
    margin: 0;
}

.mb-0[b-mrvd8lhkep] {
    margin-bottom: 0;
}
.efm-row.unassigned[b-mrvd8lhkep] {
    background-color: #fee2e2;
}

    .efm-row.unassigned:hover[b-mrvd8lhkep] {
        background-color: #e97c7c;
    }
.text-center[b-mrvd8lhkep]{
    font-size: small;
    color:black;
}
.efm-row.has-missing-data[b-mrvd8lhkep] {
    background-color: #fca5a5 !important; /* Matte red */
}

    .efm-row.has-missing-data:hover[b-mrvd8lhkep] {
        background-color: #f87171 !important; /* Slightly darker on hover */
    }

.efm-row:hover[b-mrvd8lhkep] {
    background-color: #bbf7d0; /* Matte green hover */
}

.efm-row[b-mrvd8lhkep] {
    background-color: #dcfce7; /* Matte green background */
}
.filter-container[b-mrvd8lhkep] {
    display: flex;
    align-items: center;
}

.status-filter[b-mrvd8lhkep] {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
    cursor: pointer;
    min-width: 160px;
}

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

/* Add these styles to ViewEFMs.razor.css */

.table-controls[b-mrvd8lhkep] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-filter-container[b-mrvd8lhkep] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-filter-group[b-mrvd8lhkep] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-label[b-mrvd8lhkep] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.date-input[b-mrvd8lhkep] {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: white;
    min-width: 150px;
}

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

.btn-clear-dates[b-mrvd8lhkep] {
    background-color: #ef4444;
    color: white;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    height: fit-content;
}

    .btn-clear-dates:hover:not(:disabled)[b-mrvd8lhkep] {
        background-color: #dc2626;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .table-controls[b-mrvd8lhkep] {
        flex-direction: column;
        align-items: stretch;
    }

    .date-filter-container[b-mrvd8lhkep] {
        justify-content: center;
    }

    .search-container[b-mrvd8lhkep] {
        max-width: none;
    }
}
.efm-row[b-mrvd8lhkep] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .efm-row:hover[b-mrvd8lhkep] {
        background-color: #f8f9fa;
    }

.large-modal[b-mrvd8lhkep] {
    max-width: 800px;
    width: 90vw;
}

.detail-section[b-mrvd8lhkep] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

    .detail-section:last-child[b-mrvd8lhkep] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .detail-section h4[b-mrvd8lhkep] {
        margin-bottom: 1rem;
        color: #495057;
        font-size: 1.1rem;
        font-weight: 600;
    }

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

.detail-item[b-mrvd8lhkep] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .detail-item strong[b-mrvd8lhkep] {
        font-size: 0.875rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.action-grid[b-mrvd8lhkep] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.action-item-btn[b-mrvd8lhkep] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: white;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

    .action-item-btn:hover:not(:disabled)[b-mrvd8lhkep] {
        border-color: #007bff;
        background-color: #f8f9fa;
        color: #007bff;
    }

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

    .action-item-btn.delete-btn[b-mrvd8lhkep] {
        border-color: #dc3545;
        color: #dc3545;
    }

        .action-item-btn.delete-btn:hover:not(:disabled)[b-mrvd8lhkep] {
            background-color: #dc3545;
            color: white;
        }

    .action-item-btn svg[b-mrvd8lhkep] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

.status-badge[b-mrvd8lhkep] {
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-pending[b-mrvd8lhkep] {
    background-color: #fff3cd;
    color: #856404;
}

.status-created[b-mrvd8lhkep] {
    background-color: #d1ecf1;
    color: #0c5460;
}

.status-edited[b-mrvd8lhkep] {
    background-color: #d4edda;
    color: #155724;
}

.status-report[b-mrvd8lhkep] {
    background-color: #e2e3e5;
    color: #383d41;
}

.warning-message[b-mrvd8lhkep] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 0.375rem;
    color: #856404;
}

.warning-icon[b-mrvd8lhkep] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #f39c12;
}

.warning-message p[b-mrvd8lhkep] {
    margin: 0 0 0.5rem 0;
}

    .warning-message p:last-child[b-mrvd8lhkep] {
        margin-bottom: 0;
    }