:root {
    --primary-color: #2c3e50;
    --accent-color: #27ae60;
    --bg-color: #f5f6fa;
    --delete-color: #e74c3c;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: var(--bg-color); 
    margin: 0; 
    padding: 10px; 
    -webkit-text-size-adjust: 100%;
}

.auth-box { 
    max-width: 400px; 
    margin: 50px auto; 
    padding: 20px; 
    background: white; 
    border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    text-align: center; 
}

input, select, button { 
    width: 100%; 
    padding: 12px; 
    margin: 6px 0; 
    box-sizing: border-box; 
    border-radius: 5px; 
    border: 1px solid #ccc; 
    font-size: 16px; 
}

button { 
    background: var(--primary-color); 
    color: white; 
    border: none; 
    cursor: pointer; 
    font-weight: bold; 
    transition: background 0.2s ease;
}

button:hover { opacity: 0.9; }

.delete-btn {
    background: var(--delete-color);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    width: auto;
    font-size: 14px;
    display: inline-block;
}

.navbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: var(--primary-color); 
    color: white; 
    padding: 10px 15px; 
    border-radius: 5px; 
    flex-wrap: wrap;
    gap: 10px;
}

.navbar h1 {
    font-size: 18px;
    margin: 0;
}

.logout-btn { 
    width: auto; 
    background: #e74c3c; 
    padding: 6px 12px; 
    margin: 0;
    font-size: 14px;
}

.tabs { 
    display: flex; 
    margin-top: 10px; 
    flex-wrap: wrap;
    gap: 2px;
}

.tab-link { 
    background: #ddd; 
    color: #333; 
    border-radius: 4px; 
    margin: 0; 
    flex: 1;
    min-width: 110px;
    padding: 10px 5px;
    font-size: 13px;
}

.tab-link.active { 
    background: var(--accent-color); 
    color: white; 
}

.tab-content { 
    background: white; 
    padding: 15px; 
    border-radius: 5px;
    margin-top: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

.filter-bar {
    display: flex; 
    gap: 10px; 
    margin-bottom: 15px; 
    flex-wrap: wrap;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.export-btn {
    background: #2980b9; 
    color: white;
    font-weight: bold;
    border-radius: 5px;
    padding: 12px 20px;
    font-size: 15px;
}

.search-section { position: relative; }

.suggestions-box { 
    background: white; 
    border: 1px solid #ccc; 
    max-height: 200px; 
    overflow-y: auto; 
    position: absolute; 
    width: 100%; 
    z-index: 100; 
    box-shadow: 0 4px 5px rgba(0,0,0,0.1);
}

.suggestions-box div { 
    padding: 12px; 
    cursor: pointer; 
    border-bottom: 1px solid #eee;
}

.suggestions-box div:hover { background: #f1c40f; }

.filter-status-btn {
    font-size: 14px;
    padding: 10px;
    margin: 0;
    border-radius: 4px;
    opacity: 0.6;
}
.filter-status-btn.active {
    opacity: 1;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
}

.pipeline-request-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #10b981; 
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.pipeline-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.pipeline-meta-item {
    font-size: 15px;
    color: #1a202c;
    margin: 4px 0;
}

.pipeline-meta-item strong {
    font-weight: 700;
    color: #000000;
}

.pipeline-badge-status {
    display: inline-block;
    padding: 4px 10px;
    font-weight: bold;
    border-radius: 4px;
    font-size: 13px;
    color: #fff;
}

.pipeline-badge-status.completed { background: #10b981; }
.pipeline-badge-status.pending { background: #f59e0b; }
.pipeline-badge-status.rejected { background: #ef4444; }

.pipeline-view-details-btn {
    background: #233549;
    color: white;
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.responsive-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
}

table { 
    width: 100%; 
    border-collapse: collapse; 
}

th, td { 
    border: 1px solid #ddd; 
    padding: 12px; 
    text-align: left;
}

th { 
    background-color: var(--primary-color); 
    color: white; 
    font-size: 15px;
}

tr:nth-child(even) { background-color: #f9f9f9; }

.qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 15px;
    margin-top: 15px;
}

.qr-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.qr-card:hover { border-color: var(--accent-color); }

@media screen and (max-width: 600px) {
    body { padding: 5px; }
    .navbar h1 { font-size: 15px; }
    .tab-content { padding: 10px; }
    
    .tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }
    
    .tab-link {
        min-width: 0;
        font-size: 12px;
        padding: 12px 2px;
    }

    .mobile-optimized-table, 
    .mobile-optimized-table thead, 
    .mobile-optimized-table tbody, 
    .mobile-optimized-table th, 
    .mobile-optimized-table td, 
    .mobile-optimized-table tr { 
        display: block; 
    }
    
    .mobile-optimized-table thead { display: none; }
    
    .mobile-optimized-table tr {
        border: 1px solid #cbd5e0;
        margin-bottom: 10px;
        padding: 8px;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .mobile-optimized-table td {
        border: none;
        border-bottom: 1px solid #edf2f7;
        position: relative;
        padding-left: 45%;
        text-align: right;
        font-size: 14px;
        min-height: 24px;
    }
    
    .mobile-optimized-table td:last-child { border-bottom: none; }
    
    .mobile-optimized-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 40%;
        text-align: left;
        font-weight: bold;
        color: #4a5568;
    }

    .mobile-optimized-table td:nth-of-type(1)::before { content: "Item Node"; }
    .mobile-optimized-table td:nth-of-type(2)::before { content: "Condition"; }
    .mobile-optimized-table td:nth-of-type(3)::before { content: "Unit Vol"; }
    .mobile-optimized-table td:nth-of-type(4)::before { content: "Description"; }
    .mobile-optimized-table td:nth-of-type(5)::before { content: "Action"; }
    
    #products-master-table td:nth-of-type(1)::before { content: "SKU Code"; }
    #products-master-table td:nth-of-type(2)::before { content: "Prod Name"; }
    #products-master-table td:nth-of-type(3)::before { content: "Available"; }
    #products-master-table td:nth-of-type(4)::before { content: "Reserved"; }
    #products-master-table td:nth-of-type(5)::before { content: "Action Management"; }

    #records-table td:nth-of-type(1)::before { content: "Date"; }
    #records-table td:nth-of-type(2)::before { content: "Product"; }
    #records-table td:nth-of-type(3)::before { content: "Identity"; }
    #records-table td:nth-of-type(4)::before { content: "Qty Box"; }
    #records-table td:nth-of-type(5)::before { content: "Assignment Notes"; }
}

.details-full-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(44, 62, 80, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    padding: 15px;
}

.details-overlay-content {
    background: #ffffff;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 12px;
    padding: 25px;
    overflow-y: auto;
}

.qr-details-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.qr-popup-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    width: 90%;
    max-width: 350px;
}