/* ============================================
           MOBILE & TABLET RESPONSIVE
           ============================================ */

        /* Hamburger button — hidden on desktop */
        .mob-menu-btn {
            display: none;
            position: fixed;
            top: 12px;
            left: 12px;
            z-index: 1100;
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: var(--green-dark);
            border: none;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
            padding: 10px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.18);
            -webkit-tap-highlight-color: transparent;
        }
        .mob-menu-btn span {
            display: block;
            width: 20px;
            height: 2px;
            background: #fff;
            border-radius: 2px;
            transition: all 0.22s ease;
            transform-origin: center;
        }
        .mob-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .mob-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .mob-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* Sidebar overlay backdrop */
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 1050;
            opacity: 0;
            transition: opacity 0.25s ease;
            pointer-events: none;
        }
        .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }

        @media (max-width: 900px) {

            /* Show hamburger */
            .mob-menu-btn { display: flex; }

            /* Sidebar: off-screen by default, slides in over content */
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
                z-index: 1060;
                width: 100vw !important;
                max-width: 320px;
                height: 100vh;
                height: -webkit-fill-available;
                position: fixed;
                top: 0;
                left: 0;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .sidebar.mob-open { transform: translateX(0); }
            .sidebar-overlay { display: block; }

            /* Main fills full width */
            .main {
                margin-left: 0 !important;
                padding: 14px 12px !important;
                padding-top: 64px !important;
                width: 100% !important;
                /* NO overflow-x:hidden here — kills iOS horizontal scroll */
            }

            /* Page header stacks on small screens */
            .page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                margin-bottom: 18px;
                padding-bottom: 14px;
            }
            .page-header .page-actions { width: 100%; }
            .page-header .page-actions .btn { flex: 1; justify-content: center; }

            /* Tables: horizontal scroll with iOS momentum */
            .table-container {
                overflow-x: auto;
                overflow-y: visible;
                -webkit-overflow-scrolling: touch;
                max-width: 100%;
            }
            table { min-width: 520px; }

            /* Sections themselves need to allow overflow for table scroll */
            .section {
                overflow-x: visible;
                max-width: 100%;
            }

            /* Cards full width */
            .card { border-radius: 10px; }

            /* Stat grids stack 2-col on mobile */
            .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

            /* Modals full screen on mobile */
            .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
            .modal {
                width: 100% !important;
                max-width: 100% !important;
                border-radius: 18px 18px 0 0 !important;
                max-height: 92vh !important;
                max-height: 92dvh !important;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                margin: 0 !important;
            }

            /* Dashboard canvas — disable free-drag, stack vertically */
            .dash-canvas { position: relative !important; height: auto !important; min-height: unset !important; }
            .dash-bubble {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: 100% !important;
                height: auto !important;
                min-height: 180px;
                margin-bottom: 12px;
                resize: none !important;
            }
            .dash-resize-grip { display: none !important; }

            /* Chat panel fits screen */
            #chatPanel {
                width: calc(100vw - 24px) !important;
                left: 12px !important;
                right: 12px !important;
                bottom: 12px !important;
            }

            /* Buttons — bigger touch targets */
            .btn { min-height: 40px; font-size: 13px; }

            /* Form groups full width */
            .form-row { flex-direction: column !important; }
            .form-group { width: 100% !important; }

            /* Inventory rows — stack on mobile */
            .inv-row-header {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 10px !important;
            }
            .inv-row-name { width: 100%; }
            .inv-row-stats {
                width: 100% !important;
                display: grid !important;
                grid-template-columns: repeat(5, 1fr) !important;
                gap: 4px !important;
            }
            .inv-stat { min-width: unset !important; text-align: center !important; }
            .inv-stat-price { text-align: center !important; }

            /* Hide version label to save space */
            .logo-text .version { display: none; }
        }

        @media (max-width: 480px) {
            .main { padding: 10px 8px !important; padding-top: 62px !important; }
            .page-header h2 { font-size: 20px; }
            .stats-grid { grid-template-columns: 1fr 1fr !important; }
            table { min-width: 440px; font-size: 12px; }
            .btn { font-size: 12px; padding: 8px 12px; }
        }

        /* Tablet: narrower sidebar */
        @media (min-width: 901px) and (max-width: 1100px) {
            .sidebar { width: 220px; }
            .main { margin-left: 220px; padding: 20px 16px; }
        }


        ::-webkit-scrollbar-track { background: var(--bg-dark); }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--green-primary); }
    
        /* ===============================
           Website Theme Overrides (Light)
           =============================== */
        :root {
            --ph-bg: #F5FAF6;
            --ph-card: #FFFFFF;
            --ph-card-2: #F7FBF8;
            --ph-border: #DDEAE2;
            --ph-border-2: #CFE3D7;

            --ph-text: #0F1F16;
            --ph-text-muted: #5E7366;

            --ph-green-dark: #1B4332;
            --ph-green-main: #2D6A4F;
            --ph-green-accent: #52B788;
            --ph-green-soft: #E9F6EE;

            --success: #2D6A4F;
            --warning: #C98B18;
            --danger: #D64545;
            --info: #1F7A8C;
        }

        body {
            background: radial-gradient(1200px 500px at 50% -100px, rgba(82,183,136,0.20), transparent 60%),
                        var(--ph-bg);
            color: var(--ph-text);
        }

        .app { background: transparent; }

        .sidebar {
            background: #FFFFFF;
            border-right: 1px solid var(--ph-border);
            box-shadow: 0 10px 30px rgba(15, 31, 22, 0.05);
        }

        .logo {
            background: #FFFFFF;
            border-bottom: 1px solid var(--ph-border);
        }

        .logo-icon {
            background: var(--bg);
            box-shadow: 0 8px 22px rgba(45, 106, 79, 0.10);
            border: 1px solid rgba(45,106,79,0.18);
        }

        .logo-text .brand .prime { color: var(--ph-text); }
        .logo-text .brand .harvest { color: var(--ph-green-main); }
        .logo-text .tagline { color: var(--ph-text-muted); opacity: 0.85; }
        .logo-text .version { color: var(--ph-text-muted); opacity: 0.7; font-size: 8px; }

        /* Animated top-left brand mark */
        .logo {
            position: relative;
            overflow: hidden;
        }

        .logo::after {
            content: '';
            position: absolute;
            inset: auto 18px 0 18px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(82,183,136,0.28), transparent);
        }

        .brand-logo-shell {
            position: relative;
            width: 54px;
            height: 54px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%);
            border: 1px solid rgba(45,106,79,0.18);
            box-shadow: 0 12px 24px rgba(27,67,50,0.14), inset 0 1px 0 rgba(255,255,255,0.9);
            overflow: hidden;
            isolation: isolate;
            flex: 0 0 auto;
        }

        .brand-logo-shell.brand-logo-shell--sm {
            width: 52px;
            height: 52px;
            border-radius: 15px;
        }

        .brand-logo-glow {
            position: absolute;
            inset: -8px;
            background: radial-gradient(circle at 50% 50%, rgba(82,183,136,0.42) 0%, rgba(82,183,136,0.18) 36%, rgba(82,183,136,0) 72%);
            filter: blur(10px);
            animation: brandPulse 4.8s ease-in-out infinite;
            z-index: 0;
            pointer-events: none;
        }

        .brand-logo-mark {
            position: relative;
            width: 78%;
            height: 78%;
            object-fit: contain;
            object-position: center;
            display: block;
            filter: drop-shadow(0 10px 18px rgba(27,67,50,0.20));
            animation: brandFloat 5.6s ease-in-out infinite;
            z-index: 1;
        }

        .brand-logo-shine {
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,0.82) 46%, transparent 72%);
            transform: translateX(-165%) skewX(-18deg);
            animation: brandSweep 5.8s ease-in-out infinite;
            mix-blend-mode: screen;
            opacity: 0.55;
            z-index: 2;
            pointer-events: none;
        }

        .logo-text .version.version--plain {
            margin-top: 2px;
            padding: 0;
            border-radius: 0;
            background: transparent;
            color: var(--ph-text-muted);
            font-size: 8px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: none;
            width: auto;
            display: block;
            opacity: 0.8;
        }

        .logo-text .version.version--plain::before {
            content: none;
        }

        @keyframes brandPulse {
            0%, 100% { opacity: 0.72; transform: scale(0.94); }
            50% { opacity: 1; transform: scale(1.05); }
        }

        @keyframes brandFloat {
            0%, 100% { transform: translateY(1px); }
            50% { transform: translateY(-1px); }
        }

        @keyframes brandSweep {
            0% { transform: translateX(-165%) skewX(-18deg); opacity: 0; }
            18% { opacity: 0.58; }
            56% { opacity: 0.58; }
            100% { transform: translateX(165%) skewX(-18deg); opacity: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .brand-logo-glow,
            .brand-logo-mark,
            .brand-logo-shine {
                animation: none !important;
            }
        }

        .nav-label { color: var(--ph-text-muted); }

        .nav-item {
            color: var(--ph-text-muted);
            border-left-color: transparent;
            border-radius: 10px;
            margin: 4px 12px;
            padding: 12px 14px;
        }

        .nav-item:hover {
            background: var(--ph-card-2);
            color: var(--ph-text);
        }

        .nav-item.active {
            background: var(--ph-green-soft);
            color: var(--ph-green-main);
            border-left-color: var(--ph-green-main);
            box-shadow: inset 0 0 0 1px rgba(45,106,79,0.10);
        }

        .main {
            background: transparent;
        }

        .page-header {
            border-bottom: 1px solid var(--ph-border);
        }

        .page-header h2 {
            color: var(--ph-text);
            letter-spacing: -0.02em;
        }

        .page-header .subtitle {
            color: var(--ph-text-muted);
        }

        .card {
            background: var(--ph-card);
            border: 1px solid var(--ph-border);
            box-shadow: 0 10px 30px rgba(15, 31, 22, 0.06);
        }

        .stat-card {
            background: var(--ph-card);
            border: 1px solid var(--ph-border);
            box-shadow: 0 10px 26px rgba(15, 31, 22, 0.06);
        }

        .stat-card::before {
            background: var(--bg);
            height: 4px;
        }

        .stat-card .value { color: var(--ph-green-main); }
        .stat-card .value.warning { color: var(--warning); }
        .stat-card .value.info { color: var(--info); }

        .btn-primary {
            background: var(--ph-green-main);
            color: #FFFFFF;
            box-shadow: 0 10px 24px rgba(45, 106, 79, 0.22);
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            filter: brightness(1.02);
        }

        .btn-secondary {
            background: #FFFFFF;
            border: 1px solid var(--ph-border-2);
            color: var(--ph-text);
        }
        .btn-secondary:hover {
            border-color: var(--ph-green-main);
            color: var(--ph-green-main);
        }

        .form-group input,
        .form-group select,
        .form-group textarea,
        .search-bar input,
        .search-bar select {
            background: #FFFFFF;
            border: 1px solid var(--ph-border-2);
            color: var(--ph-text);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus,
        .search-bar input:focus {
            border-color: var(--ph-green-main);
            box-shadow: 0 0 0 4px rgba(82, 183, 136, 0.18);
        }

        th {
            background: var(--ph-card-2);
            color: var(--ph-text-muted);
        }

        tr:hover td {
            background: rgba(82, 183, 136, 0.10);
        }

        .badge {
            border: 1px solid rgba(15,31,22,0.06);
        }
        .badge-green { background: rgba(45,106,79,0.12); color: var(--ph-green-main); }
        .badge-yellow { background: rgba(82,183,136,0.18); color: #40916C; }
        .badge-red    { background: rgba(27,67,50,0.20);   color: #1B4332; }
        .badge-blue   { background: rgba(64,145,108,0.16); color: #2D6A4F; }
        .badge-orange { background: rgba(201,139,24,0.14); color: var(--warning); }

        .modal-overlay {
            background: rgba(10, 20, 14, 0.55);
            backdrop-filter: blur(6px);
        }
        .modal {
            background: #FFFFFF;
            border: 1px solid var(--ph-border);
            box-shadow: 0 30px 80px rgba(15,31,22,0.25);
            color: var(--ph-text);
        }
        .modal-header {
            border-bottom: 1px solid var(--ph-border);
        }
        .modal-close:hover {
            background: var(--ph-card-2);
        }

        /* Make monospace readable on light */
        .mono { color: rgba(15,31,22,0.85); }

        @media print {
            body { background: white !important; }
            .card, .stat-card { box-shadow: none !important; }
        }