@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800&display=swap');

:root {
    --bg-color: #f8fafc;        /* Slate 50 - Ultra-clean light background */
    --card-bg: #ffffff;         /* Pure white cards for maximum contrast */
    --card-border: #cbd5e1;     /* Slate 300 - Clear visible borders */
    --primary: #0f766e;         /* Deep Teal - High contrast active buttons */
    --primary-hover: #115e59;   /* Saturated Teal hover state */
    --text-main: #0f172a;       /* Slate 900 - Ultimate readability */
    --text-muted: #475569;      /* Slate 600 - High contrast description text */
    
    /* Retina-ready Status Colors */
    --success: #059669;         /* Saturated Emerald Green 600 */
    --success-bg: #ecfdf5;      /* Emerald 50 backdrop */
    --success-border: #10b981;  /* Emerald 500 border */
    
    --danger: #dc2626;          /* High contrast Red 600 */
    --danger-bg: #fef2f2;       /* Red 50 backdrop */
    --danger-border: #f87171;   /* Red 400 border */
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.login-container {
    width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    text-align: center;
}

.logo-wrapper {
    width: 64px;
    height: 64px;
    background: #ffffff;
    border: 2px solid var(--primary);
    border-radius: 12px;
    margin: 0 auto 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.login-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 0.25rem;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.8rem;
    font-weight: 500;
}

.alert-message {
    background: #fef2f2; /* Light Red */
    border: 2px solid var(--danger);
    color: var(--danger);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.form-group label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-container {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.form-control {
    width: 100%;
    height: 48px;
    background: #ffffff;
    border: 2px solid #94a3b8; /* Slate 400 - Clear border */
    border-radius: 8px;
    padding: 0 1rem 0 2.5rem;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    outline: none;
}

.form-control::placeholder {
    color: #64748b; /* Slate 500 - Highly visible placeholder */
}

.form-control:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.form-group:focus-within label {
    color: var(--primary);
}

.form-group:focus-within .input-icon {
    color: var(--primary);
}

.btn-submit {
    width: 100%;
    height: 48px;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-top: 1.5rem;
}

.btn-submit:active {
    background: #1e3a8a; /* Dark Blue 900 */
}

.footer-version {
    margin-top: 2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   High-Speed Responsive Layout for PDA IT78 (5.5-inch screens) & Mobile
   ========================================================================== */
@media (max-width: 480px) {
    body {
        align-items: flex-start;
    }

    .login-container {
        border-radius: 0;
        border: none;
        box-shadow: none;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1.5rem 1.2rem;
        background: var(--card-bg);
    }

    .logo-wrapper {
        width: 56px;
        height: 56px;
        margin-bottom: 1rem;
    }

    .logo-icon {
        font-size: 1.5rem;
    }

    .login-title {
        font-size: 1.6rem;
    }

    .login-subtitle {
        margin-bottom: 1.5rem;
    }

    .form-control {
        height: 50px;
        font-size: 16px; /* Prevent default mobile zoom issues */
        border-radius: 8px;
    }

    .btn-submit {
        height: 50px;
        font-size: 1.05rem;
        border-radius: 8px;
    }
}

/* ==========================================================================
   PDA IT78 & Small Mobile Screen Responsive Hotfixes (Screen width <= 480px)
   ========================================================================== */
@media (max-width: 480px) {
    /* 1. Prevent global horizontal scrolling of the page */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    body {
        padding: 0.4rem !important; /* SNUG padding for small PDA screen */
        align-items: flex-start !important;
    }

    /* 2. Prevent containers from stretching larger than the viewport */
    .container, 
    .dashboard-wrapper, 
    .login-container,
    .scan-panel,
    .history-container,
    .summary-breakdown-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important; /* CRITICAL: Allows flex item to shrink! */
    }

    /* 3. Header Bar optimization to prevent text/badge from pushing the screen width */
    .header-bar {
        padding: 0.5rem 0.6rem !important;
        border-radius: 8px !important;
        margin-bottom: 0.75rem !important;
        gap: 0.4rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .header-left {
        gap: 0.4rem !important;
        min-width: 0 !important; /* Allow shrinking */
        flex: 1 !important;
    }

    .btn-back {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important; /* Prevent collapsing */
        font-size: 1rem !important;
        border-radius: 6px !important;
    }

    .header-logo {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 6px !important;
    }

    .header-title-wrapper {
        min-width: 0 !important; /* Crucial for text truncation */
        flex: 1 !important;
    }

    .header-title-wrapper h1 {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 130px !important;
    }

    .header-title-wrapper p {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 130px !important;
    }

    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }

    .bill-badge {
        font-size: 0.72rem !important;
        padding: 0.25rem 0.45rem !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    /* 4. Dashboard (index.php) user badge and menu card optimization */
    .user-badge {
        min-width: 0 !important;
        text-align: right !important;
        margin-right: 0.2rem !important;
    }

    .badge-name {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 80px !important; /* Cap width for Thai names on tiny screens */
    }

    .badge-role {
        font-size: 0.58rem !important;
        padding: 0.01rem 0.2rem !important;
    }

    .btn-quick-logout {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 1rem !important;
        border-radius: 6px !important;
    }

    .menu-card {
        padding: 0.8rem 1rem !important;
    }

    .menu-card-left {
        gap: 0.8rem !important;
        min-width: 0 !important;
    }

    .menu-card-info h2 {
        font-size: 1.05rem !important;
    }

    .menu-card-info p {
        font-size: 0.78rem !important;
    }

    /* 5. Main scan card controls */
    .scan-panel {
        padding: 0.8rem !important; /* More space for tables and grids */
    }

    /* Prevent scan input box or anything else from pushing width */
    .scan-input-box {
        height: 46px !important;
        font-size: 1.05rem !important;
        margin-bottom: 0.8rem !important;
    }

    /* 6. Compact Scan Summary Grid (Bags and Weight cards) */
    .scan-panel > div[style*="grid-template-columns"] {
        gap: 0.5rem !important;
        margin-bottom: 0.8rem !important;
    }

    .scan-panel > div[style*="grid-template-columns"] > div {
        padding: 0.5rem 0.4rem !important;
    }

    .scan-panel > div[style*="grid-template-columns"] span {
        font-size: 0.68rem !important; /* Extremely tight label text */
    }

    .scan-panel > div[style*="grid-template-columns"] strong {
        font-size: 1.45rem !important; /* Make weight size fitting */
    }

    .scan-panel > div[style*="grid-template-columns"] span[style*="font-size: 0.95rem"] {
        font-size: 0.8rem !important; /* Shrink units like กก. / ถุง */
    }

    /* 7. Double scanning override checkbox alert container */
    .scan-panel > div[style*="display: flex; align-items: center; gap: 0.6rem"] {
        padding: 0.45rem 0.6rem !important;
        gap: 0.4rem !important;
        margin-bottom: 0.8rem !important;
    }

    .scan-panel > div[style*="display: flex; align-items: center; gap: 0.6rem"] input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
    }

    .scan-panel > div[style*="display: flex; align-items: center; gap: 0.6rem"] label {
        font-size: 0.82rem !important; /* Keep it tight and snug */
    }

    /* 8. Modern Table Optimization for high scan rate visibility */
    .history-table {
        font-size: 0.76rem !important;
    }

    .history-table th, 
    .history-table td {
        padding: 0.45rem 0.25rem !important;
        line-height: 1.2 !important;
    }

    /* Column specific snapping */
    .history-table td:nth-child(1),
    .history-table th:nth-child(1) {
        /* Product Code column - e.g. "30003001-0" */
        font-family: monospace !important;
        font-size: 0.72rem !important;
        letter-spacing: -0.3px !important;
        white-space: nowrap !important;
        max-width: 80px !important;
        overflow: hidden !important;
    }

    .history-table td:nth-child(2),
    .history-table th:nth-child(2) {
        /* Product Name column - e.g. "น่องไก่ติดสะโพก 1" */
        min-width: 85px !important;
        word-break: break-all !important;
    }

    .history-table td:nth-child(3),
    .history-table th:nth-child(3) {
        /* Bags/Lot column - e.g. "#0003 (69999/99)" */
        font-size: 0.7rem !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
    }

    .history-table td:nth-child(4),
    .history-table th:nth-child(4) {
        /* Qty column - e.g. "10" or "150.00" */
        font-size: 0.8rem !important;
        font-weight: 700 !important;
    }

    /* Column 5: Delete button wrapper */
    .history-table td:nth-child(5), 
    .history-table th:nth-child(5) {
        width: 36px !important;
        max-width: 36px !important;
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
        text-align: center !important;
    }

    .btn-row-delete {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 0.95rem !important;
        border-radius: 4px !important;
    }

    /* 9. Modal responsiveness for manual weight entries */
    .modal-card {
        padding: 1rem !important;
        border-radius: 8px !important;
        max-width: 95vw !important;
    }

    .modal-header h3 {
        font-size: 1.1rem !important;
    }

    .modal-header p {
        font-size: 0.8rem !important;
        margin-bottom: 0.8rem !important;
    }

    .modal-body .form-grid {
        gap: 0.6rem !important;
        margin-bottom: 0.6rem !important;
    }

    .modal-body label {
        font-size: 0.72rem !important;
        margin-bottom: 0.2rem !important;
    }

    .modal-body .form-control {
        height: 40px !important;
        font-size: 0.9rem !important;
        padding: 0 0.6rem !important;
    }

    .modal-actions {
        margin-top: 1rem !important;
        gap: 0.5rem !important;
    }

    .btn-modal-cancel, 
    .btn-modal-save {
        height: 40px !important;
        font-size: 0.9rem !important;
    }
}

/* ==========================================================================
   Desktop-Only Glow Glassmorphism Theme (min-width: 769px) - HIGH PERFORMANCE OPTIMIZED
   ========================================================================== */
@media (min-width: 769px) {
    /* 1. Body Styling with static, high-performance pastel gradient (no continuous paint loop) */
    body.login-page {
        background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 40%, #ccfbf1 80%, #f0fdf4 100%);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
    }

    /* Floating soft glow decorative elements behind the login container (Optimized GPU + low blur) */
    body.login-page::before {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(13, 148, 136, 0.16) 0%, rgba(13, 148, 136, 0) 70%);
        top: -5%;
        left: -5%;
        border-radius: 50%;
        z-index: 0;
        filter: blur(30px); /* Lower blur size drastically reduces GPU paint cost */
        animation: floatBlob1 25s ease-in-out infinite alternate;
        will-change: transform; /* Triggers hardware-composited layer creation */
        pointer-events: none;
    }

    body.login-page::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        background: radial-gradient(circle, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0) 70%);
        bottom: -5%;
        right: -5%;
        border-radius: 50%;
        z-index: 0;
        filter: blur(30px);
        animation: floatBlob2 30s ease-in-out infinite alternate;
        will-change: transform;
        pointer-events: none;
    }

    /* Keyframes utilizing translate3d for GPU composite animations (butter-smooth!) */
    @keyframes floatBlob1 {
        0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
        50% { transform: translate3d(50px, 30px, 0) scale(1.1) rotate(180deg); }
        100% { transform: translate3d(-10px, 60px, 0) scale(0.95) rotate(360deg); }
    }

    @keyframes floatBlob2 {
        0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
        50% { transform: translate3d(-60px, -20px, 0) scale(0.9) rotate(-180deg); }
        100% { transform: translate3d(20px, 40px, 0) scale(1.05) rotate(-360deg); }
    }

    /* 2. Frosted Glassmorphism Card Container (Optimized with high opacity and lightweight blur) */
    .login-page .login-container {
        position: relative;
        z-index: 10;
        max-width: 440px;
        width: 100%;
        background: rgba(255, 255, 255, 0.90); /* Increased opacity for elite readability and lower blur need */
        backdrop-filter: blur(8px); /* Lower blur cost makes scroll and typing run at 120 FPS */
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 24px;
        padding: 3.5rem 2.8rem;
        box-shadow: 
            0 4px 30px rgba(0, 0, 0, 0.02),
            0 20px 50px rgba(15, 118, 110, 0.05),
            inset 0 0 15px rgba(255, 255, 255, 0.2);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .login-page .login-container:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 8px 40px rgba(0, 0, 0, 0.03),
            0 24px 60px rgba(15, 118, 110, 0.07),
            inset 0 0 20px rgba(255, 255, 255, 0.3);
    }

    /* 3. Logo Wrapper - borderless frosted glass styling */
    .login-page .logo-wrapper {
        width: 80px;
        height: 80px;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 18px;
        box-shadow: 0 10px 25px rgba(15, 118, 110, 0.06);
        margin: 0 auto 1.5rem;
        transition: transform 0.3s ease;
    }

    .login-page .login-container:hover .logo-wrapper {
        transform: scale(1.05) rotate(2deg);
    }

    /* 4. Elegant Clean Typography */
    .login-page .login-title {
        font-size: 2.1rem;
        font-weight: 800;
        background: linear-gradient(135deg, #0f766e 0%, #115e59 50%, #0369a1 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -0.5px;
        margin-bottom: 0.4rem;
    }

    .login-page .login-subtitle {
        font-size: 0.95rem;
        color: #475569;
        font-weight: 500;
        margin-bottom: 2.2rem;
    }

    /* 5. Inputs - Soft Light Styling, No Dark Outlines or Heavy Lines */
    .login-page .form-control {
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(15, 118, 110, 0.15); /* Super faint teal border instead of heavy slate */
        border-radius: 12px;
        height: 52px;
        padding: 0 1rem 0 2.8rem;
        font-size: 1rem;
        color: #0f172a;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .login-page .form-control::placeholder {
        color: #94a3b8;
    }

    .login-page .form-control:focus {
        background: #ffffff;
        border-color: rgba(20, 184, 166, 0.6);
        box-shadow: 
            0 0 0 4px rgba(20, 184, 166, 0.15),
            0 4px 12px rgba(20, 184, 166, 0.05);
        transform: translateY(-1px);
    }

    .login-page .input-icon {
        left: 1.1rem;
        font-size: 1.2rem;
        color: #64748b;
        transition: color 0.3s ease;
    }

    .login-page .form-group:focus-within .input-icon {
        color: #0f766e;
    }

    .login-page .form-group label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #334155;
        letter-spacing: 0.8px;
        margin-bottom: 0.6rem;
    }

    /* 6. Professional Glowing Submit Button */
    .login-page .btn-submit {
        background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
        border: none;
        border-radius: 12px;
        height: 52px;
        font-size: 1.05rem;
        letter-spacing: 0.5px;
        box-shadow: 
            0 4px 15px rgba(15, 118, 110, 0.25),
            0 10px 30px rgba(13, 148, 138, 0.15);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        margin-top: 2rem;
    }

    .login-page .btn-submit:hover {
        background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
        box-shadow: 
            0 6px 20px rgba(15, 118, 110, 0.35),
            0 12px 35px rgba(13, 148, 138, 0.2);
        transform: translateY(-2px);
    }

    .login-page .btn-submit:active {
        transform: translateY(0);
        box-shadow: 0 4px 10px rgba(15, 118, 110, 0.2);
    }

    /* 7. Beautiful Alert Message for Glassmorphism */
    .login-page .alert-message {
        background: rgba(254, 242, 242, 0.8);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #dc2626;
        border-radius: 12px;
        padding: 0.9rem 1.2rem;
        font-weight: 500;
        box-shadow: 0 4px 15px rgba(220, 38, 38, 0.05);
        backdrop-filter: blur(10px);
        margin-bottom: 1.8rem;
    }

    /* 8. Footer decoration */
    .login-page .footer-version {
        margin-top: 2.5rem;
        font-size: 0.8rem;
        color: #64748b;
        letter-spacing: 1px;
    }
}

.cursor-pointer {
    cursor: pointer;
}