/* ===================================================================== Orizoe Admin — design system Hand-written, no framework/CDN. Brand colors pulled from real assets: navy from the mobile app's own button colour (Color(0xFF14284E) in home_page_widget.dart), lime green/black from assets/images/Orizoe_Services_logo.jpg. ===================================================================== */ :root { /* Brand */ --navy-900: #0d1a33; --navy-800: #14284e; --navy-700: #1c3a6e; --green-500: #8dc63f; --green-600: #6ea52c; --green-100: #eef7e0; /* Neutrals */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; /* Semantic */ --success: #16a34a; --success-soft: #dcfce7; --warning: #d97706; --warning-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; /* Elevation */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14); /* Shape & motion */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --fast: 150ms; --slow: 260ms; --sidebar-width: 252px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* overflow-x:hidden on both html and body: this is the page-level backstop against the exact "gray gutter down the right edge on mobile" bug — caused by something on the page (the widest single culprit is .table-scroll's table, which is deliberately min-width:640px so its own columns don't get crushed) making the *document* wider than the visual viewport. .table-scroll already scopes its own overflow-x:auto so that table scrolls internally, but without a hard clamp here too, a wider- than-viewport document can still leave every 100%-wide element upstream (cards, grid, banner) rendering narrower than the actual screen relative to that inflated document width — the same content, just not stretched all the way to the true right edge, which is what read as a gutter. */ html, body { overflow-x: hidden; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; background: var(--gray-50); color: var(--gray-800); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } /* Global safety net: any free-text field a user can type into — query/ incident "Details", a pause reason, task instructions — can contain a long unbroken token (a URL, a run-on word) with no whitespace for white-space:normal to wrap at. Without this, that one field would widen its card past the viewport and force the whole page to scroll horizontally on a phone. th/td already had their own copy of this before .table-scroll existed; this covers every other text container (cards, alerts, badges) with one rule instead of chasing each one individually. */ body { overflow-wrap: anywhere; } /* pointer-events:none is load-bearing, not decorative: an SVG drawn with fill="none" (stroke-only, which every icon here is) doesn't register clicks in its own unpainted middle in some browsers — clicking the visual center of e.g. the sidebar's close (X) icon could miss the surrounding