/* ========================================================= AgriSync — Design tokens ========================================================= */ :root { --brand: #6a5acd; --brand-dark: #5646b8; --brand-light: #8e6fce; --accent-pink: #ec4899; --accent-pink-light: #f472b6; --accent-green: #22c55e; --ink: #1e1b2e; --muted: #6b7280; --border: #e5e5f0; --bg: #f4f5fb; --surface: #ffffff; --text: #2b2740; --card-radius: 14px; --shadow-sm: 0 2px 8px rgba(30, 27, 46, 0.06); --shadow-md: 0 8px 24px rgba(30, 27, 46, 0.08); } /* Dark mode overrides (toggled via [data-theme="dark"] on ) */ [data-theme="dark"] { --border: #2c2a3d; --bg: #14121f; --surface: #1c1a2b; --text: #e8e6f2; --muted: #9a95b3; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); } [data-theme="dark"] body { background: var(--bg); color: var(--text); } [data-theme="dark"] .card, [data-theme="dark"] .topbar, [data-theme="dark"] .login-card, [data-theme="dark"] .table { background: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] .table thead th { color: var(--muted); border-color: var(--border); } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: var(--border); color: var(--text); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] .topbar-user-btn, [data-theme="dark"] .topbar-search { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .topbar-user-name { color: var(--text); } [data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .dropdown-item { color: var(--text); } [data-theme="dark"] .dropdown-item:hover { background: var(--bg); color: var(--text); } * { -webkit-tap-highlight-color: transparent; } body { background: var(--bg); color: #2b2740; font-size: 0.95rem; } a { color: var(--brand); } /* ========================================================= Auth pages (login / register / forgot-password) ========================================================= */ .login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand), var(--brand-light)); padding: 1.25rem; } .login-card { background: #fff; border-radius: 18px; padding: 2.5rem; width: 100%; max-width: 400px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); } @media (max-width: 480px) { .login-card { padding: 1.75rem 1.5rem; border-radius: 14px; } } /* ========================================================= Stat cards ========================================================= */ .stat-card { border-radius: var(--card-radius); padding: 1.25rem 1.5rem; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-light)); margin-bottom: 1rem; box-shadow: var(--shadow-sm); } .stat-card.pink { background: linear-gradient(135deg, var(--accent-pink), var(--accent-pink-light)); } .stat-card h3 { font-size: 2rem; font-weight: 700; margin-bottom: 0; word-break: break-word; } .stat-card span { opacity: .85; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; } @media (max-width: 575.98px) { .stat-card { padding: 1rem 1.1rem; } .stat-card h3 { font-size: 1.4rem; } .stat-card span { font-size: .72rem; } } /* ========================================================= Cards, tables, forms, buttons — general polish ========================================================= */ .card { border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); } .card h5, .card h4 { font-weight: 700; } .table { font-size: 0.9rem; margin-bottom: 0; } .table thead th { text-transform: uppercase; font-size: 0.72rem; letter-spacing: .04em; color: var(--muted); border-bottom-width: 1px; white-space: nowrap; } .table-responsive { border-radius: 10px; -webkit-overflow-scrolling: touch; /* Defensive reset: a table must NEVER get a vertical scrollbar of its own — only the page scrolls. (Some pages used to nest an extra overflow wrapper around .table-responsive, which under certain zoom levels made Chromium/Edge box the table into a tiny scrollable area. Table markup should now only ever have ONE overflow wrapper: .table-responsive itself.) */ max-height: none !important; overflow-y: visible !important; } .table thead th { background: var(--bg); } /* Round the outer corners of the table without clipping the "Actions" dropdown menus (overflow:hidden on the wrapper would cut those off). */ .table thead tr:first-child th:first-child { border-top-left-radius: 10px; } .table thead tr:first-child th:last-child { border-top-right-radius: 10px; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; } .table tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; } .table tbody tr:hover { background: var(--bg); } [data-theme="dark"] .table thead th { background: rgba(255, 255, 255, 0.03); } .btn { border-radius: 8px; font-weight: 500; } .btn-primary { background: var(--brand); border-color: var(--brand); } .btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); } .btn-outline-primary { color: var(--brand); border-color: var(--brand); } .btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); } /* Touch-friendly tap targets on mobile */ @media (max-width: 575.98px) { .btn { min-height: 44px; padding-top: 0.55rem; padding-bottom: 0.55rem; } .btn-sm { min-height: 38px; } .form-control, .form-select { min-height: 44px; } } .form-control:focus, .form-select:focus { border-color: var(--brand-light); box-shadow: 0 0 0 0.2rem rgba(106, 90, 205, 0.15); } .badge { font-weight: 500; } /* ========================================================= App shell: sidebar + topbar ========================================================= */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 250px; flex-shrink: 0; background: var(--ink); color: #cfcbe0; padding: 1.25rem 0.75rem; overflow-y: auto; } /* Mobile (< 992px): sidebar becomes an off-canvas drawer, hidden until toggled. */ @media (max-width: 991.98px) { .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 0 0 30px rgba(0,0,0,0.3); width: 82vw; max-width: 300px; } .sidebar.is-open { transform: translateX(0); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1044; } .sidebar-backdrop.is-open { display: block; } } .sidebar-brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; padding: 0 0.5rem 1.25rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 0.75rem; } .sidebar-subtitle { font-size: 0.7rem; opacity: 0.6; } .sidebar-menu { list-style: none; padding: 0; margin: 0; } .sidebar-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; margin: 1rem 0.75rem 0.35rem; } .sidebar-menu .nav-link { display: flex; align-items: center; gap: 0.6rem; color: #cfcbe0; padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.92rem; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .sidebar-menu .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; } .sidebar-menu .nav-link.active { background: var(--brand); color: #fff; } .sidebar-submenu { list-style: none; padding: 0.15rem 0 0.35rem 0; margin: 0; } .sidebar-submenu .nav-link { padding-left: 2.1rem; font-size: 0.85rem; } @media (max-width: 991.98px) { /* Extra tap room on mobile since fingers are less precise than a mouse */ .sidebar-menu .nav-link { padding-top: 0.7rem; padding-bottom: 0.7rem; } } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; background: #fff; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .topbar-role.badge { background: var(--brand); color: #fff; font-weight: 500; padding: 0.4rem 0.75rem; } .sidebar-toggle-btn { display: none; border: none; background: transparent; font-size: 1.4rem; line-height: 1; padding: 0.4rem 0.6rem; margin-right: 0.5rem; border-radius: 8px; } .sidebar-toggle-btn:active { background: var(--bg); } /* Topbar search (visual affordance) */ .topbar-search { display: flex; align-items: center; gap: 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem; color: var(--muted); font-size: 0.85rem; margin-left: 0.75rem; min-width: 220px; } /* Topbar icon buttons (theme toggle, notifications) */ .topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: none; background: transparent; color: var(--muted); font-size: 1.05rem; text-decoration: none; } .topbar-icon-btn:hover { background: var(--bg); color: var(--text); } /* Topbar user dropdown */ .topbar-user-btn { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 0.3rem 0.75rem 0.3rem 0.3rem; cursor: pointer; } .topbar-user-btn:hover { background: var(--bg); } .topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-light)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .topbar-user-name { font-size: 0.88rem; color: #2b2740; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-caret { font-size: 0.7rem; color: var(--muted); } @media (max-width: 991.98px) { .sidebar-toggle-btn { display: inline-flex; align-items: center; justify-content: center; } .topbar { padding: 0.6rem 0.85rem; gap: 0.5rem; } main.container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 1.25rem !important; } } @media (max-width: 400px) { .topbar-user-name { display: none !important; } } /* ========================================================= Public site (anonymous visitors) ========================================================= */ .public-navbar { background: linear-gradient(135deg, var(--brand), var(--brand-light)); } .public-hero { border-radius: 20px; padding: 3.5rem 3rem; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-light)); margin-bottom: 2rem; } @media (max-width: 767.98px) { .public-hero { padding: 2rem 1.5rem; border-radius: 14px; } .public-hero h1 { font-size: 1.75rem; } .public-hero .fs-5 { font-size: 1rem !important; } } .public-hero h1 { font-weight: 800; } .public-card { border: none; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding: 1.5rem; height: 100%; } /* ========================================================= Charts — every Chart.js canvas lives inside a fixed-height, position:relative wrapper. This is required for Chart.js's responsive resizing to work correctly: without it, a chart's container height depends on the canvas and the canvas's height depends on the container — a feedback loop that (especially for doughnut/pie charts) can spiral into a wildly oversized canvas, or collapse bar charts into a huge blank canvas with one tiny bar. ========================================================= */ .chart-box { position: relative; width: 100%; height: 260px; } @media (max-width: 575.98px) { .chart-box { height: 220px; } } canvas { max-width: 100%; } /* ========================================================= Small-screen layout helpers used across list/detail pages ========================================================= */ @media (max-width: 575.98px) { h3, .h3 { font-size: 1.35rem; } h4, .h4 { font-size: 1.15rem; } .d-flex.justify-content-between.align-items-center.mb-4 { flex-wrap: wrap; gap: 0.75rem; } } /* ========================================================= Dynamic Theme System — color presets (toggled via [data-color-preset] on , persisted in localStorage by the Theme Configuration panel) ========================================================= */ [data-color-preset="ocean"] { --brand: #2563eb; --brand-dark: #1d4ed8; --brand-light: #60a5fa; } [data-color-preset="sunset"] { --brand: #ea580c; --brand-dark: #c2410c; --brand-light: #fb923c; } [data-color-preset="forest"] { --brand: #16a34a; --brand-dark: #15803d; --brand-light: #4ade80; } [data-color-preset="berry"] { --brand: #db2777; --brand-dark: #be185d; --brand-light: #f472b6; } [data-color-preset="slate"] { --brand: #475569; --brand-dark: #334155; --brand-light: #94a3b8; } /* ========================================================= Dynamic Theme System — density (toggled via [data-density] on ; "comfortable" is the default already baked into the base rules above) ========================================================= */ [data-density="compact"] .card-body { padding: 0.85rem 1.1rem; } [data-density="compact"] .table td, [data-density="compact"] .table th { padding: 0.4rem 0.6rem; } [data-density="compact"] .sidebar-menu .nav-link { padding: 0.4rem 0.65rem; font-size: 0.87rem; } [data-density="compact"] .sidebar-submenu .nav-link { padding-left: 1.8rem; } [data-density="compact"] .topbar { padding: 0.5rem 1.25rem; } [data-density="compact"] main.container-fluid { padding-top: 1rem !important; padding-bottom: 1rem !important; } [data-density="compact"] .stat-card { padding: 0.9rem 1.1rem; } [data-density="compact"] .btn { padding-top: 0.32rem; padding-bottom: 0.32rem; } [data-density="spacious"] .card-body { padding: 1.75rem 2rem; } [data-density="spacious"] .table td, [data-density="spacious"] .table th { padding: 0.95rem 1rem; } [data-density="spacious"] .sidebar-menu .nav-link { padding: 0.85rem 1rem; font-size: 0.97rem; } [data-density="spacious"] .sidebar-submenu .nav-link { padding-left: 2.4rem; } [data-density="spacious"] .topbar { padding: 1.1rem 2rem; } [data-density="spacious"] main.container-fluid { padding-top: 2.25rem !important; padding-bottom: 1rem; } [data-density="spacious"] .stat-card { padding: 1.6rem 1.9rem; } [data-density="spacious"] .btn { padding-top: 0.65rem; padding-bottom: 0.65rem; } /* ========================================================= Theme Configuration panel (offcanvas) ========================================================= */ .theme-panel { width: 360px; background: var(--surface); color: var(--text); } .theme-panel .offcanvas-header { border-bottom: 1px solid var(--border); align-items: flex-start; } .theme-panel .offcanvas-title { color: var(--text); } .theme-section-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 0.6rem; } .theme-mode-group, .theme-density-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .theme-option-btn { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.65rem 0.4rem; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .theme-option-btn i { font-size: 1.05rem; } .theme-option-btn:hover { border-color: var(--brand-light); } .theme-option-btn.active { border-color: var(--brand); background: rgba(106, 90, 205, 0.1); color: var(--brand-dark); } [data-theme="dark"] .theme-option-btn.active { background: rgba(255, 255, 255, 0.06); color: #fff; } .theme-swatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .theme-swatch-btn { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.65rem 0.3rem; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font-size: 0.72rem; font-weight: 600; color: var(--text); transition: border-color .15s ease; } .theme-swatch-btn:hover { border-color: var(--brand-light); } .theme-swatch-btn .swatch-dot { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } .theme-swatch-btn.active { border-color: var(--brand); } .theme-swatch-btn.active .swatch-dot { outline: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); } /* ========================================================= Notification bell — badge + live dropdown ========================================================= */ .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; } .notif-dropdown { width: 340px; max-width: 90vw; padding: 0; border: 1px solid var(--border); overflow: hidden; } .notif-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.85rem; color: var(--text); } .notif-dropdown-header .btn-link { font-size: 0.76rem; font-weight: 600; text-decoration: none; } .notif-dropdown-list { max-height: 340px; overflow-y: auto; } .notif-item { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s ease; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--bg); } .notif-item.unread { background: rgba(106, 90, 205, 0.06); } .notif-item .notif-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; } .notif-item.read .notif-dot { background: transparent; } .notif-item-body { flex: 1; min-width: 0; } .notif-item-message { font-size: 0.83rem; color: var(--text); margin-bottom: 0.15rem; white-space: normal; word-break: break-word; } .notif-item.read .notif-item-message { color: var(--muted); } .notif-item-time { font-size: 0.7rem; color: var(--muted); } .notif-dropdown-footer { display: block; text-align: center; padding: 0.65rem; font-size: 0.8rem; font-weight: 600; border-top: 1px solid var(--border); color: var(--brand); text-decoration: none; } .notif-dropdown-footer:hover { background: var(--bg); color: var(--brand-dark); } .notif-empty { font-size: 0.85rem; } /* ========================================================= Mobile-friendly tables — every in the app is auto-labeled by JS (see _Layout.cshtml) and stacks into readable "cards" below the md breakpoint instead of a cramped, tiny horizontal-scroll grid. ========================================================= */ @media (max-width: 767.98px) { .table-responsive { overflow-x: visible; } table.table-stack thead { display: none; } table.table-stack, table.table-stack tbody, table.table-stack tr { display: block; width: 100%; } table.table-stack tr { margin-bottom: 0.75rem; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); } table.table-stack tbody tr:last-child { margin-bottom: 0; } table.table-stack td { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.65rem 0.9rem !important; text-align: right; white-space: normal; border: none !important; border-bottom: 1px solid var(--border) !important; } table.table-stack td:last-child { border-bottom: none !important; } table.table-stack td[data-label]::before { content: attr(data-label); flex-shrink: 0; margin-right: auto; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); text-align: left; } table.table-stack td:not([data-label]) { justify-content: flex-end; } table.table-stack td:not([data-label]):empty { display: none; } /* full-width message rows, e.g. "No records found" (has a colspan) */ table.table-stack td[colspan] { display: block; text-align: center; } [data-theme="dark"] table.table-stack tr { box-shadow: none; } }