/* ============================================================
 *  Inventory Management System — Stylesheet
 *  File: css/styles.css
 * ============================================================ */

        :root {
            --twine: #c0a463;
            --laurel: #6a9a75;
            --cutty-sark: #54857a;
            --tarawera: #0a425c;
            --matisse: #177d90;
            --teal-blue: #043c54;
            --flamingo: #ec642c;
            --sea-green: #2f7c46;
            --tarawera-dark: #0c3c54;
            --teal-blue-dark: #044454;
            --primary: var(--matisse);
            --primary-dark: var(--teal-blue);
            --secondary: var(--cutty-sark);
            --success: var(--sea-green);
            --warning: var(--twine);
            --danger: var(--flamingo);
            --info: var(--laurel);
            --dark: var(--tarawera);
            --light: #f8fafc;
            --white: #ffffff;
            --border: #e2e8f0;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
            --radius: 6px;
            --radius-lg: 8px;
            --transition: all 0.2s ease;
            --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--teal-blue) 100%);
            --action-bg: #e0f2fe;
            --portal-bg: linear-gradient(135deg, #0a425c 0%, #043c54 100%);
            --portal-white: #ffffff;
            --portal-transition: all 0.3s ease;
        }

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

        body {
            font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
            background: var(--gradient-primary);
            min-height: 100vh;
            color: var(--dark);
            overflow: hidden; /* Prevent body scroll, use containers */
        }

        /* --- Shared UI Components --- */
        .btn {
            background: var(--gradient-primary);
            color: var(--white);
            border: none;
            padding: 8px 16px;
            border-radius: var(--radius);
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: var(--transition);
            display: inline-flex; align-items: center; gap: 0.4rem;
        }
        .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(23, 125, 144, 0.3); }
        .btn-success { background: linear-gradient(135deg, var(--success) 0%, var(--sea-green) 100%); }
        .btn-secondary { background: linear-gradient(135deg, var(--secondary) 0%, var(--cutty-sark) 100%); }
        .btn-warning { background: linear-gradient(135deg, var(--warning) 0%, var(--twine) 100%); }
        .btn-danger { background: linear-gradient(135deg, var(--danger) 0%, var(--flamingo) 100%); }
        .btn-info { background: linear-gradient(135deg, var(--info) 0%, var(--laurel) 100%); }
        .btn-sm { padding: 4px 8px; font-size: 10px; }

        .form-group { display: flex; flex-direction: column; margin-bottom: 10px; }
        label { font-weight: 600; color: var(--dark); margin-bottom: 5px; font-size: 12px; }
        input, select, textarea {
            padding: 8px 10px; border: 2px solid var(--border); border-radius: var(--radius);
            font-size: 12px; background: var(--white); width: 100%; font-family: inherit; color: var(--dark);
        }
        input:focus, select:focus { outline: none; border-color: var(--primary); }

        /* --- Layout Containers --- */
        .container {
            max-width: 1920px; width: 100%; height: 100vh;
            background: rgba(255, 255, 255, 0.95);
            display: flex; flex-direction: column; overflow: hidden;
        }
        
        .header {
            background: var(--gradient-primary); color: var(--white);
            padding: 8px 20px; text-align: center; border-bottom: 2px solid var(--primary-dark);
            flex-shrink: 0;
        }
        .header h1 { font-size: 1.8em; margin-bottom: 5px; }
        .header p { font-size: 1em; opacity: 0.9; }

        .main-menu, .sub-menu {
            background: var(--light); padding: 10px;
            display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
            border-bottom: 2px solid var(--primary); flex-shrink: 0;
        }
        
        .main-menu-btn, .sub-menu-btn {
            padding: 8px 20px; border: 2px solid var(--primary);
            background: var(--white); color: var(--primary);
            border-radius: var(--radius); font-weight: 600; cursor: pointer;
            font-size: 14px; min-width: 180px; transition: var(--transition);
        }
        .main-menu-btn.active, .sub-menu-btn.active {
            background: var(--gradient-primary); color: var(--white);
        }

        .main-content { display: none; flex: 1; overflow: hidden; background-color: #f0f4f8; flex-direction: column; }
        .main-content.active { display: flex; }
        .sub-content { display: none; flex-grow: 1; padding: 15px; overflow-y: auto; }
        .sub-content.active { display: block; }

        /* --- Tables --- */
        .table-container {
            overflow: auto; background: var(--white);
            border-radius: var(--radius-lg); box-shadow: var(--shadow);
            border: 1px solid var(--border); height: 100%;
        }
        .interactive-table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; }
        .interactive-table th, .interactive-table td {
            padding: 8px; border: 1px solid var(--border); text-align: left;
        }
        .interactive-table th {
            background: var(--primary-dark); color: var(--white);
            position: sticky; top: 0; z-index: 10;
        }
        .interactive-table tbody tr:hover { background-color: rgba(23, 125, 144, 0.05); }

        /* --- TAMBAHAN: PLANT SELECTOR STYLES (Identical to Maintenance) --- */
        .plant-selector-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: var(--gradient-primary);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
        }
        .plant-selector-title h1 { font-size: 2.5em; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        .plant-selector-title p { font-size: 1.2em; margin-bottom: 40px; opacity: 0.9; }
        .plant-options-container { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
        .plant-card {
            background: rgba(255, 255, 255, 0.95);
            color: var(--dark);
            border-radius: 15px; padding: 30px; width: 280px;
            text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            border: 2px solid transparent; transition: all 0.3s ease;
            cursor: pointer; backdrop-filter: blur(5px);
        }
        .plant-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); background: white; }
        .plant-card-logo { font-size: 3em; margin-bottom: 15px; font-weight: 800; }
        .plant-card h2 { color: var(--primary); font-size: 1.8em; margin-bottom: 5px; }
        .plant-card span { color: var(--secondary); font-size: 0.9em; font-weight: 600; }

        /* --- Modals --- */
        .modal {
            display: none; position: fixed; z-index: 3000;
            left: 0; top: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
            align-items: center; justify-content: center;
        }
        .modal-content {
            background: var(--white); padding: 20px; border-radius: var(--radius-lg);
            width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto;
            border: 2px solid var(--border);
        }
        .modal-content.full-screen-modal {
            width: 98vw; height: 95vh; max-width: 100%; display: flex; flex-direction: column; padding: 0;
        }
        .modal-header {
            display: flex; justify-content: space-between; align-items: center;
            padding-bottom: 10px; border-bottom: 2px solid var(--primary); margin-bottom: 15px;
        }
        .full-screen-modal .modal-header {
            padding: 15px; margin-bottom: 0; background: var(--gradient-primary); color: white; border: none;
        }

        /* --- Inventory Wizard Grid --- */
        .inventory-form-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;
        }
        @media (max-width: 1200px) { .inventory-form-grid { grid-template-columns: repeat(2, 1fr); } }