/* ===================================================== DESIGN TOKENS — HardWorker IoT Suite ===================================================== */ :root { /* Typography */ --hw-font-sans: "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif; --hw-font-display: "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif; /* Background & Surface */ --hw-bg: #f0f4f9; --hw-surface: #ffffff; --hw-surface-muted: #f8fafc; /* Text */ --hw-ink: #0f172a; --hw-ink-muted: #64748b; /* Borders */ --hw-line: rgba(15, 23, 42, 0.09); /* Brand / Interactive */ --hw-primary: #2563eb; --hw-primary-hover: #1d4ed8; --hw-primary-subtle: rgba(37, 99, 235, 0.08); --hw-accent: #0ea5e9; /* Status */ --hw-success: #10b981; --hw-warning: #f59e0b; --hw-danger: #ef4444; /* Shadows */ --hw-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --hw-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); --hw-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14); /* Layout dimensions */ --hw-sidebar-w: 15rem; --hw-sidebar-w-collapsed: 4.5rem; --hw-header-h: 3.75rem; /* Border radii */ --hw-radius-sm: 8px; --hw-radius: 12px; --hw-radius-lg: 20px; --hw-radius-xl: 28px; } /* ===================================================== DARK MODE TOKENS — defined, NOT yet activated. To enable: add data-theme="dark" to and uncomment the block below. ===================================================== [data-theme="dark"] { --hw-bg: #0a0f1e; --hw-surface: #111827; --hw-surface-muted: #1a2234; --hw-ink: #f1f5f9; --hw-ink-muted: #94a3b8; --hw-line: rgba(255, 255, 255, 0.07); --hw-primary: #3b82f6; --hw-primary-hover: #2563eb; --hw-primary-subtle: rgba(59, 130, 246, 0.12); --hw-accent: #38bdf8; --hw-success: #34d399; --hw-warning: #fbbf24; --hw-danger: #f87171; --hw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.16); --hw-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); --hw-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45); } */ /* ===================================================== BASE RESET & GLOBALS ===================================================== */ html, body { font-family: var(--hw-font-sans); color: var(--hw-ink); background-color: var(--hw-bg); } body { margin: 0; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: var(--hw-font-display); letter-spacing: -0.02em; } input, button, textarea, select { font: inherit; } a, .btn-link { color: var(--hw-primary); } /* ===================================================== BOOTSTRAP OVERRIDES ===================================================== */ .btn-primary { color: #fff; border: 0; background: linear-gradient(135deg, var(--hw-primary), var(--hw-primary-hover)); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28); transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease; } .btn-primary:hover { background: linear-gradient(135deg, var(--hw-primary-hover), #1e40af); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.36); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.3); } /* ===================================================== FORM VALIDATION ===================================================== */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--hw-success); } .invalid { outline: 1px solid var(--hw-danger); } .validation-message { color: var(--hw-danger); font-size: 0.875rem; } /* ===================================================== BLAZOR SYSTEM UI ===================================================== */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } #blazor-error-ui { display: none; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2000; padding: 0.9rem 3rem 0.9rem 1.1rem; border-radius: var(--hw-radius); border: 1px solid rgba(239, 68, 68, 0.2); background: rgba(127, 29, 29, 0.94); color: #fff; box-shadow: var(--hw-shadow-lg); backdrop-filter: blur(12px); } #blazor-error-ui .reload { color: #fff; font-weight: 700; margin-left: 0.45rem; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; top: 0.8rem; right: 1rem; font-size: 1.1rem; opacity: 0.7; } #blazor-error-ui .dismiss:hover { opacity: 1; } .darker-border-checkbox.form-check-input { border-color: #929292; } /* ===================================================== FARM PAGES - AgroIntel Modern Dashboard Scoped by .farm-page so the rest of the app keeps its current visual language. ===================================================== */ .farm-page { --farm-bg: #f7f9ff; --farm-surface: #ffffff; --farm-surface-low: #f1f4f9; --farm-surface-container: #ebeef3; --farm-border: #dfe6e1; --farm-border-strong: #bfc9c1; --farm-ink: #181c20; --farm-muted: #5f6c65; --farm-primary: #0f5238; --farm-primary-container: #2d6a4f; --farm-primary-soft: #e7f5ec; --farm-info: #256f9c; --farm-info-soft: #e7f2f8; --farm-warning: #a86600; --farm-warning-soft: #fff4db; --farm-danger: #ba1a1a; --farm-danger-soft: #ffdad6; --farm-shadow: 0 4px 12px rgba(33, 37, 41, 0.04); --farm-shadow-hover: 0 8px 24px rgba(33, 37, 41, 0.08); --bs-primary: var(--farm-primary); --bs-primary-rgb: 15, 82, 56; --bs-link-color: var(--farm-primary); --bs-link-hover-color: var(--farm-primary-container); --bs-border-color: var(--farm-border); color: var(--farm-ink); font-family: Inter, "Segoe UI", sans-serif; } .farm-page h1, .farm-page h2, .farm-page h3, .farm-page h4, .farm-page h5, .farm-page h6 { color: var(--farm-ink); font-family: Inter, "Segoe UI", sans-serif; letter-spacing: 0; } .farm-page h1, .farm-page .h3 { font-size: 2rem; font-weight: 700; line-height: 1.25; } .farm-page p, .farm-page .text-body-secondary, .farm-page .form-text { color: var(--farm-muted) !important; } .farm-page a { color: var(--farm-primary); } .farm-page .btn { min-height: 34px; border-radius: 8px; font-size: 0.875rem; font-weight: 700; } .farm-page .btn-primary, .farm-page .btn-success { border-color: var(--farm-primary); background: var(--farm-primary); color: #fff; box-shadow: none; } .farm-page .btn-primary:hover, .farm-page .btn-success:hover { border-color: var(--farm-primary-container); background: var(--farm-primary-container); box-shadow: var(--farm-shadow-hover); } .farm-page .btn-outline-primary, .farm-page .btn-outline-success { border-color: var(--farm-primary); color: var(--farm-primary); } .farm-page .btn-outline-primary:hover, .farm-page .btn-outline-success:hover { background: var(--farm-primary); color: #fff; } .farm-page .btn-outline-secondary { border-color: var(--farm-border-strong); color: var(--farm-muted); } .farm-page .btn-outline-secondary:hover { border-color: var(--farm-primary); background: var(--farm-primary-soft); color: var(--farm-primary); } .farm-page .btn-danger, .farm-page .btn-outline-danger:hover { border-color: var(--farm-danger); background: var(--farm-danger); color: #fff; } .farm-page .card { overflow: hidden; border: 1px solid var(--farm-border); border-radius: 8px; background: var(--farm-surface); box-shadow: var(--farm-shadow) !important; } .farm-page .card:hover { box-shadow: var(--farm-shadow-hover) !important; } .farm-page .card-header { border-bottom: 1px solid var(--farm-border); background: var(--farm-surface-low) !important; color: var(--farm-ink); font-size: 0.875rem; font-weight: 700; } .farm-page .badge { border-radius: 999px; font-weight: 700; } .farm-page .text-bg-success, .farm-page .badge.text-bg-success { background: var(--farm-primary-soft) !important; color: var(--farm-primary) !important; } .farm-page .text-bg-primary, .farm-page .badge.text-bg-primary { background: var(--farm-primary) !important; color: #fff !important; } .farm-page .text-bg-info, .farm-page .badge.text-bg-info { background: var(--farm-info-soft) !important; color: var(--farm-info) !important; } .farm-page .text-bg-warning, .farm-page .badge.text-bg-warning { background: var(--farm-warning-soft) !important; color: var(--farm-warning) !important; } .farm-page .text-bg-danger, .farm-page .badge.text-bg-danger { background: var(--farm-danger-soft) !important; color: var(--farm-danger) !important; } .farm-page .text-bg-light { background: var(--farm-surface-low) !important; color: var(--farm-muted) !important; } .farm-page .nav-pills, .farm-page .nav-tabs { gap: 6px; } .farm-page .nav-pills .nav-link, .farm-page .nav-tabs .nav-link { min-height: 34px; border: 1px solid transparent; border-radius: 999px; color: var(--farm-muted); font-size: 0.86rem; font-weight: 700; } .farm-page .nav-pills .nav-link.active, .farm-page .nav-tabs .nav-link.active { border-color: var(--farm-primary); background: var(--farm-primary); color: #fff; } .farm-page .nav-pills .nav-link:not(.active):hover, .farm-page .nav-tabs .nav-link:not(.active):hover { border-color: var(--farm-border-strong); background: var(--farm-surface-low); color: var(--farm-primary); } .farm-page .table { --bs-table-hover-bg: #f6faf7; color: var(--farm-ink); font-size: 0.88rem; } .farm-page .table thead th { border-bottom-color: var(--farm-border); color: var(--farm-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .farm-page .table td { border-color: var(--farm-border); vertical-align: middle; } .farm-page .form-control, .farm-page .form-select, .farm-page .input-group-text { border-color: var(--farm-border); border-radius: 8px; } .farm-page .input-group > .form-control, .farm-page .input-group > .form-select, .farm-page .input-group > .input-group-text { border-radius: 0; } .farm-page .input-group > :first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .farm-page .input-group > :last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .farm-page .form-control:focus, .farm-page .form-select:focus, .farm-page .form-check-input:focus { border-color: var(--farm-primary); box-shadow: 0 0 0 3px rgba(15, 82, 56, 0.16); } .farm-page .form-check-input:checked { border-color: var(--farm-primary); background-color: var(--farm-primary); } .farm-page .alert { border-radius: 8px; border-color: var(--farm-border); } .farm-page .alert-danger { border-color: var(--farm-danger-soft); background: #fff7f6; color: var(--farm-danger); } .farm-page .alert-warning { border-color: var(--farm-warning-soft); background: #fffaf0; color: var(--farm-warning); } .farm-page .alert-info, .farm-page .alert-success { border-color: var(--farm-primary-soft); background: #f5fbf7; color: var(--farm-primary); } .farm-page .breadcrumb { --bs-breadcrumb-divider-color: var(--farm-muted); color: var(--farm-muted); } .farm-page .breadcrumb a { color: var(--farm-primary); text-decoration: none; } .farm-page .progress { overflow: hidden; border-radius: 999px; background: var(--farm-surface-low); } .farm-page .progress-bar, .farm-page .bg-primary, .farm-page .bg-success { background-color: var(--farm-primary-container) !important; } .farm-page .bg-warning { background-color: #d79a21 !important; } .farm-page .bg-danger { background-color: var(--farm-danger) !important; } @media (max-width: 768px) { .farm-page h1, .farm-page .h3 { font-size: 1.5rem; } } /* ── Farm Locations Page ───────────────────────────────────────────────────── */ .location-icon { color: var(--farm-primary); opacity: 0.85; } /* Side panel */ .location-panel-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); z-index: 1040; animation: fadeIn 150ms ease; } .location-panel { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100vw); z-index: 1050; border-radius: 0; border-left: 1px solid var(--hw-line); display: flex; flex-direction: column; animation: slideInRight 180ms cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; } .location-panel .card-header { background: var(--hw-surface); border-bottom: 1px solid var(--hw-line); padding: 1rem 1.25rem; } .location-panel .card-body { flex: 1; padding: 1.25rem; } .location-panel .card-footer { background: var(--hw-surface-muted); border-top: 1px solid var(--hw-line); padding: 0.875rem 1.25rem; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }