/* ============================================================ Moate Asset Manager — app shell Layout & branding only (Trial step 1). The --brand colour is injected on from tbl_schools.brand_colour (data-driven, not hardcoded — see PROJECT_PLAN.md Multi-Tenant Readiness #3). ============================================================ */ :root { --brand: #1b3a6b; /* fallback; overridden inline from the school row */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --success: #059669; --success-light: #d1fae5; --warning: #d97706; --warning-light: #fef3c7; --danger: #dc2626; --danger-light: #fee2e2; --sidebar-width: 260px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--gray-50); color: var(--gray-800); min-height: 100vh; } .app-layout { min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background: var(--brand); color: white; z-index: 100; overflow-y: auto; transition: transform 0.2s ease; } .sidebar-header { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .sidebar-header .school-crest { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; background: white; padding: 3px; object-fit: contain; } .sidebar-header h2 { font-size: 16px; font-weight: 700; } .sidebar-header .school-name { font-size: 12px; color: rgba(255, 255, 255, 0.65); margin-top: 2px; } .sidebar-nav { padding: 12px; } .nav-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.45); padding: 14px 8px 4px; font-weight: 600; } .sidebar-nav a.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: rgba(255, 255, 255, 0.85); text-decoration: none; cursor: pointer; font-size: 14px; transition: background 0.15s, color 0.15s; } .sidebar-nav a.nav-item:hover { background: rgba(255, 255, 255, 0.1); color: white; } .sidebar-nav a.nav-item.active { background: rgba(255, 255, 255, 0.2); color: white; font-weight: 600; } .nav-item .nav-icon { width: 20px; text-align: center; font-size: 16px; } /* ---------- Main content ---------- */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; } .topbar { background: white; border-bottom: 1px solid var(--gray-200); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; } .topbar-left { display: flex; align-items: center; gap: 12px; } .topbar h1 { font-size: 20px; font-weight: 700; } .topbar-actions { display: flex; gap: 8px; align-items: center; } .online-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--success-light); color: var(--success); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .page-content { padding: 24px; } /* ---------- Cards (shared building block) ---------- */ .card { background: white; border-radius: 10px; border: 1px solid var(--gray-200); margin-bottom: 20px; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); } .card-header h3 { font-size: 15px; font-weight: 600; } .card-body { padding: 20px; } /* ---------- Mobile sidebar toggle ---------- */ .mobile-menu-btn { display: none; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--gray-700); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 90; } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } .mobile-menu-btn { display: block; } .sidebar-overlay.show { display: block; } .topbar { padding: 12px 16px; } .page-content { padding: 16px; } } /* ============================================================ Items page — filters, data grid, badges, pagination, detail. Accent colour uses var(--brand) (the school's colour) so the grid stays data-driven like the rest of the shell. ============================================================ */ /* ---------- Buttons ---------- */ .btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; line-height: 1.2; } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-primary { background: var(--brand); color: white; } .btn-primary:hover { filter: brightness(1.1); } .btn-outline { background: white; color: var(--gray-700); border: 1px solid var(--gray-300); } .btn-outline:hover { background: var(--gray-50); } .btn.disabled { opacity: 0.5; cursor: default; pointer-events: none; } /* ---------- Filters bar ---------- */ .filters-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; } .filters-bar input, .filters-bar select { padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 14px; background: white; } .filters-bar input { min-width: 200px; } .filters-bar input:focus, .filters-bar select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.12); } /* ---------- Data table ---------- */ .table-wrap { padding: 0; overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 16px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); white-space: nowrap; } .data-table td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--gray-100); } .data-table tr:last-child td { border-bottom: none; } .data-table tr.clickable { cursor: pointer; } .data-table tr.clickable:hover td { background: var(--gray-50); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .barcode-cell { font-weight: 600; } .empty-state { text-align: center; color: var(--gray-500); padding: 32px 16px !important; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge-success { background: var(--success-light); color: var(--success); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-danger { background: var(--danger-light); color: var(--danger); } /* ---------- Table footer + pagination ---------- */ .table-footer { padding: 12px 20px; border-top: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .row-count { font-size: 13px; color: var(--gray-500); } .pagination { display: flex; gap: 4px; flex-wrap: wrap; } .page-current { background: var(--brand); color: white; border: 1px solid var(--brand); } /* ---------- Read-only detail panel ---------- */ .detail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .detail-field label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-500); margin-bottom: 4px; } .detail-field > div { font-size: 14px; color: var(--gray-800); } .detail-field-wide { grid-column: 1 / -1; } .detail-note { margin-top: 16px; font-size: 12px; color: var(--gray-400); font-style: italic; } /* ============================================================ Stock Check — mobile-first scan flow (Trial step 4). Reuses .card/.badge/.btn/.empty-state/.mono from above; the dark scan area + coloured result banners mirror the mockup, with the accent colour data-driven via var(--brand). ============================================================ */ .stock-check-container { max-width: 640px; } /* Small neutral badge used for the building code on the room banner. */ .badge-neutral { background: var(--gray-100); color: var(--gray-600); } .trial-note { display: flex; gap: 10px; align-items: flex-start; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: var(--gray-600); } .trial-note span { font-size: 16px; line-height: 1.2; } /* ---------- Form row (building / room selectors) ---------- */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; } .form-group label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-500); margin-bottom: 6px; } .form-group select { padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 15px; background: white; } .form-group select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.12); } .form-group select:disabled { background: var(--gray-100); color: var(--gray-400); } .room-hint, .room-banner { font-size: 13px; } .room-hint { margin-top: 10px; color: var(--gray-400); } .room-banner { margin-bottom: 16px; color: var(--gray-700); } .room-banner strong { color: var(--gray-900); } .room-selected-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ---------- Running totals ---------- */ .stock-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; } .stock-stat { background: white; border-radius: 8px; padding: 14px; text-align: center; border: 1px solid var(--gray-200); } .stock-stat-value { font-size: 26px; font-weight: 700; line-height: 1.1; } .stock-stat-value.stat-scanned { color: var(--success); } .stock-stat-value.stat-moved { color: var(--warning); } .stock-stat-label { font-size: 11px; color: var(--gray-500); text-transform: uppercase; font-weight: 600; margin-top: 4px; } /* ---------- Dark scan area (compact — external scanner types into the box) ---------- */ .scan-area { background: var(--gray-900); border-radius: 12px; padding: 14px 16px; text-align: center; color: white; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .scan-area .scan-icon { font-size: 22px; line-height: 1; flex: none; } .scan-area input { flex: 1 1 auto; min-width: 0; padding: 10px 14px; border-radius: 8px; border: 2px solid var(--gray-600); background: var(--gray-800); color: white; font-size: 18px; text-align: center; letter-spacing: 2px; } .scan-area input::placeholder { color: var(--gray-500); letter-spacing: 0; } .scan-area input:focus { outline: none; border-color: var(--brand); } /* On-screen keyboard show/hide toggle */ .scan-area .kb-toggle { flex: none; background: var(--gray-800); color: white; border: 2px solid var(--gray-600); border-radius: 8px; padding: 8px 11px; font-size: 18px; line-height: 1; cursor: pointer; } .scan-area .kb-toggle:hover { background: var(--gray-700); } .scan-area .kb-toggle.kb-off { border-color: var(--brand); color: var(--brand); } /* Hint sits under the row */ .scan-area { flex-wrap: wrap; } .scan-area .scan-hint { flex: 1 0 100%; color: var(--gray-400); font-size: 12px; text-align: center; margin-top: 2px; } /* ---------- Result banner ---------- */ .scan-result { border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; } .scan-result.found-same { background: var(--success-light); border: 1px solid var(--success); } .scan-result.found-moved { background: var(--warning-light); border: 1px solid var(--warning); } .scan-result.not-found { background: var(--danger-light); border: 1px solid var(--danger); } .scan-result .result-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .scan-result .result-detail { font-size: 13px; color: var(--gray-600); } /* ---------- Scanned items list ---------- */ .scanned-header { display: flex; align-items: center; justify-content: space-between; } .scan-count { font-size: 13px; color: var(--gray-500); } .scanned-items-list { padding: 0; max-height: 340px; overflow-y: auto; } .scanned-item-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--gray-100); font-size: 13px; } .scanned-item-row:last-child { border-bottom: none; } .scanned-item-info { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .scanned-item-barcode { font-weight: 600; } .scanned-item-desc { color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }