/* ========================================= 1. IMPORT FONTS & GLOBAL DEFAULTS ========================================= */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); :root { /* Shared Status Colors */ --ok: #4ade80; --warn: #f59e0b; --bad: #ef4444; --line-shared: #667db4; } html, body { /* FIX: These 3 lines prevent "bouncing" and extra scroll space */ height: 100%; margin: 0; padding: 0; overscroll-behavior-y: none; overflow-x: hidden; /* FIX: Prevents horizontal scrolling globally */ } * { box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; min-height: 100vh; } /* ========================================= 2. MODE A: LOGIN PAGE (Blurred Image) ========================================= */ /* Only applies if */ .login-page { --txt: #ffffff; --muted: #ffffff; --line: rgba(255, 255, 255, 0.2); color: var(--txt); position: relative; overflow-y: auto; /* Allows login to scroll if screen is small */ } /* The Blurred Background Layer - ONLY for Login */ .login-page::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: url("wiserbg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(2px); transform: scale(1.1); } /* Glassmorphism Cards - ONLY for Login */ .login-page .card, .login-page .login-card { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); } /* Custom styling ONLY for Login Page textboxes */ .login-page input { background: #ffffff; border: 1px solid #000000; color: #000000; } .login-page .topbar { border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.3); } /* ========================================= 3. MODE B: DASHBOARD PAGE (Solid Earth Tones) ========================================= */ /* Only applies if */ .dashboard-page { /* Earth Tone Palette */ --bg: #ecefc3; /* Pale Yellow/Beige */ --header: #0e3b18; /* Dark Green Header */ --card: #dcc896; /* Tan/Gold Card */ --txt: #1a3c1a; /* Dark Green Text */ --muted: #000000; /* Muted Green */ --line: #c2b083; /* Darker Tan Border */ background-color: var(--bg); color: var(--txt); /* FIX: Flexbox Layout to force footer to bottom */ display: flex; flex-direction: column; min-height: 100vh; } /* FIX: Makes the grid take up all available space, pushing footer down */ .dashboard-page .grid { flex: 1; } .dashboard-page .topbar { background-color: var(--header); color: #ffffff; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-bottom: none; } .dashboard-page .brand { color: #ffffff; font-weight: 1000; letter-spacing: 1.5px; font-size: 25px; } .dashboard-page .card { background-color: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 16px; font-size: 25px; } .dashboard-page .card h3 { color: var(--header); font-weight: 700; margin-top: 0; font-size: 30px; } /* ---------- Footer (Sticks to bottom, no scroll bounce) ---------- */ .dashboard-page .bottom-footer { position: relative; width: 100%; background-color: var(--header); color: rgba(255, 255, 255, 0.5); text-align: center; padding: 15px 0; font-size: 12px; margin-top: 20px; } /* ========================================= 4. SHARED LAYOUT & COMPONENTS ========================================= */ /* Layout */ .grid { max-width: 1000px; margin: 18px auto; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; /* Ensures it fills width */ } .span2 { grid-column: 1 / -1; } .row { display: flex; gap: 8px; align-items: center; } .kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px; font-size: 14px; } /* Typography */ .big { font-size: 28px; font-weight: 700; } .muted { color: var(--muted); } /* Forms & Inputs */ input, select { background: #000000; border: 1px solid #000000; color: #ffffff; padding: 8px 10px; border-radius: 10px; width: 100%; } button { background: #000000; border: 1px solid #8cd700; /* Change this to customize button borders */ color: #ffffff; padding: 8px 10px; border-radius: 10px; width: 100%; cursor: pointer; font-weight: bold; } /* Fix for top-nav buttons stacking vertically on desktop */ .pill-btn { width: auto; /* Override the global width: 100% */ flex-shrink: 0; /* Prevent buttons from shrinking if the container is tight */ } label { display: block; margin: 8px 0 4px; } .form { display: grid; gap: 6px; } /* Pills (Status Tags) */ .pill { border: 1px solid #777b86; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--muted); display: inline-block; } .ok { background-color: var(--ok); color: #000000; border-color: var(--ok); font-weight: bold; } .warn { background-color: var(--warn); color: #000000; border-color: var(--warn); font-weight: bold; } .bad { background-color: var(--bad); color: #ffffff; border-color: var(--bad); font-weight: bold; } /* Status Bars */ .status-bar { height: 10px; border: 2px solid var(--ok); border-radius: 10px; margin-top: 8px; } .status-bar.fill { background: var(--ok); } .status-bar.orange { border-color: var(--warn); } .status-bar.orange.fill { background: var(--warn); } /* Tables */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; } /* Toggle Switch */ .switch { position: relative; display: inline-block; width: 46px; height: 26px; vertical-align: middle; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--ok); } input:checked + .slider:before { transform: translateX(20px); } /* Console / Logs */ .console-box { background: #1e1e1e; color: #ffffff; font-family: 'Courier New', Courier, monospace; padding: 10px; border-radius: 8px; height: 300px; overflow-y: auto; border: 1px solid #333; margin-top: 10px; } .console-box table { width: 100%; } .console-box td { border-bottom: 1px solid #333; padding: 4px; font-size: 12px; } /* Modal */ .modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(3px); } .modal-content { background-color: #1a1a1a; margin: 10% auto; padding: 20px; border: 1px solid var(--line); width: 90%; max-width: 500px; border-radius: 12px; color: #ffffff; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover { color: #fff; } /* Help Button */ .circle-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); background: rgba(0,0,0,0.3); color: inherit; font-weight: bold; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .circle-btn:hover { background: rgba(255,255,255,0.2); } /* Login Card Specific Positioning */ .login-card { max-width: 380px; margin: 10vh auto; padding: 20px; text-align: center; /* Center text inside login card */ } /* ========================================= 5. MOBILE RESPONSIVE FIXES (Add this to the bottom) ========================================= */ @media (max-width: 768px) { /* 1. Fix the Grid: Force 1 column on phones */ /* This prevents the page from being too wide, fixing the footer cut-off */ .grid { grid-template-columns: 1fr !important; width: 100%; padding: 0 10px; /* Less padding on sides */ margin: 10px 0; /* FIX: Reset margins to ensure full width alignment */ } /* 2. Fix the Header: Stack items if they don't fit */ .dashboard-page .topbar { flex-wrap: wrap; /* Allows items to drop to next line */ padding: 10px; gap: 10px; justify-content: center; /* Centers everything */ } .brand { font-size: 18px; /* Make text smaller */ width: 100%; /* Force logo to take full top row */ text-align: center; margin-bottom: 5px; } /* 3. Fix the Buttons: Make them smaller on mobile */ .pill-btn { font-size: 11px; padding: 4px 10px; } /* 4. Fix the Footer: Ensure it touches edges */ .dashboard-page .bottom-footer { width: 100%; margin-top: 20px; min-width: 100%; /* Use 100% instead of 100vw to avoid scrollbar issues */ left: 0; margin-left: 0; } /* 5. Fix big text in cards */ .dashboard-page .card h3 { font-size: 16px; } /* NEW: Reduce other large font sizes to prevent overflow */ .dashboard-page .card { font-size: 16px; padding: 12px; /* FIX: Reduce padding on mobile to save space */ } .big { font-size: 24px; } /* 6. Stack Key-Value pairs vertically for more space */ .kv { grid-template-columns: 1fr; /* Stack label and value */ gap: 2px; font-size: 13px; /* Smaller base font for these pairs */ } .kv > div { /* FIX: Force wrapping for long words like "Phosphorus" */ overflow-wrap: break-word; word-wrap: break-word; white-space: normal; } .kv > div:nth-child(odd) { margin-top: 10px; color: #666; font-size: 0.9rem; } /* 7. Make tables responsive by allowing content to wrap */ .card table { font-size: 12px; /* Make font smaller to help content fit */ } .card table th, .card table td { word-break: break-word; /* Allow long words to break and wrap */ } /* 8. Header layout fixes: allow buttons to wrap */ .row { flex-wrap: wrap; justify-content: center; width: 100%; /* Ensure row stays within screen */ } /* 9. Further mobile element sizing */ /* FIX: Override the global 100% width for header items */ .topbar select, .topbar button { width: auto !important; /* Let them shrink to fit text */ max-width: 100%; font-size: 12px; padding: 6px 10px; margin: 2px; /* Small spacing between wrapped buttons */ } } /* Add this to your CSS file */ .center-card { grid-column: 1 / -1; /* Spans full width */ margin: 0 auto; /* Centers it */ width: 100%; max-width: 500px; /* Keeps it from getting too wide */ }