/* =================================================================== ZatpatBill Admin — Design System Style reference: "InApp Inventory Dashboard" template (orange accent, white sidebar, Poppins font, tinted stat cards). Loaded AFTER assets/css/adminlte.min.css. All new components use the `.zb-` prefix. Targeted overrides of AdminLTE's `.app-*` classes are used only for layout-shell restyling — no AdminLTE JS-required classes/attributes are touched. =================================================================== */ /* ---------- 0. Force light theme (safety net) ---------- */ :root { color-scheme: light; } html { color-scheme: light !important; } body, .app-wrapper, .app-main, .app-content-header, .app-content { background-color: var(--bg-page) !important; color: var(--text-primary) !important; } /* adminlte.min.js auto-detects the OS/browser's dark mode preference (matchMedia('prefers-color-scheme: dark')) and flips 's data-bs-theme to "dark" at runtime, AFTER the page's server-rendered data-bs-theme="light" — the safety-net rule above brute-forces a few page-shell elements back to light with !important, but never touched .table, so every table body (Shops/Users, Subscriptions, etc.) still picked up Bootstrap's dark --bs-table-bg/--bs-table-color whenever the viewer's system was in dark mode. Overriding the custom properties directly here (with !important) makes it immune to that JS toggle, the same way the elements above are. */ .table { --bs-table-bg: var(--bg-card) !important; --bs-table-color: var(--text-primary) !important; --bs-table-striped-bg: var(--gray-50) !important; --bs-table-hover-bg: var(--gray-50) !important; } .app-content-header h3, .app-content-header p { color: var(--text-primary) !important; } /* ---------- 1. Design Tokens ---------- */ :root { /* Brand accent — orange (reference palette) */ --accent: #E66239; --accent-light: rgba(230, 98, 57, 0.1); --accent-border: rgba(230, 98, 57, 0.25); --accent-dark: #c94f29; /* Grays */ --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #e5e5e5; --gray-300: #d4d4d4; --gray-400: #a3a3a3; --gray-500: #737373; --gray-600: #525252; --gray-700: #404040; --gray-800: #262626; --gray-900: #171717; /* Neutrals */ --bg-page: #fafafa; --bg-card: #ffffff; --bg-sidebar: #ffffff; --bg-nav: #ffffff; /* Text */ --text-primary: #262626; --text-secondary: #525252; --text-muted: #a3a3a3; --text-on-accent: #ffffff; /* Borders */ --border: #e5e5e5; --border-input: #d4d4d4; /* Shadows */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.08); --shadow-sidebar: 1px 0 0 var(--border); /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* Status colors — green / cyan(blue) / amber(yellow) / red */ --green: #00C951; --green-bg: rgba(0, 201, 81, 0.1); --green-border: rgba(0, 201, 81, 0.25); --green-text: #00964a; --cyan: #00B8DB; --blue-bg: rgba(0, 184, 219, 0.1); --blue-border: rgba(0, 184, 219, 0.25); --blue-text: #007a91; --yellow: #F0B100; --yellow-bg: rgba(240, 177, 0, 0.1); --yellow-border: rgba(240, 177, 0, 0.25); --yellow-text: #936b00; --amber-bg: var(--yellow-bg); --amber-border: var(--yellow-border); --amber-text: var(--yellow-text); --red: #FB2C36; --red-bg: rgba(251, 44, 54, 0.1); --red-border: rgba(251, 44, 54, 0.25); --red-text: #c81f27; --purple: #9333ea; --purple-bg: rgba(147, 51, 234, 0.1); --purple-border: rgba(147, 51, 234, 0.25); --purple-text: #7c3aed; --gray-bg: var(--gray-100); --gray-text: var(--gray-600); --sidebar-width: 240px; --navbar-height: 60px; --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ---------- 2. Base ---------- */ body { font-family: var(--font-sans); background: var(--bg-page); color: var(--text-primary); font-size: 0.9rem; } * { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } /* ---------- 3. Sidebar — white, bordered ---------- */ .app-sidebar { background: var(--bg-sidebar) !important; box-shadow: var(--shadow-sidebar); border-right: 1px solid var(--border) !important; width: var(--sidebar-width); } .app-sidebar .sidebar-brand { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; height: var(--navbar-height); display: flex; align-items: center; } .app-sidebar .brand-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .app-sidebar .brand-link::before { content: ''; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--accent); flex-shrink: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") center/60% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") center/60% no-repeat; } .app-sidebar .brand-text { font-weight: 600; font-size: 1rem; color: var(--text-primary) !important; letter-spacing: -0.01em; } .app-sidebar .sidebar-wrapper { padding: 0 0.75rem; } .app-sidebar .nav-item { margin-bottom: 0.1rem; } .app-sidebar .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-md); color: var(--text-secondary) !important; font-size: 0.85rem; font-weight: 400; transition: background 150ms ease, color 150ms ease; } .app-sidebar .nav-link .nav-icon { font-size: 1.05rem; width: 1.15rem; text-align: center; opacity: 0.85; } .app-sidebar .nav-link p { margin: 0; } .app-sidebar .nav-link:hover { background: var(--accent-light); color: var(--accent) !important; } .app-sidebar .nav-link.active { background: var(--accent-light); color: var(--accent) !important; font-weight: 500; } .zb-nav-divider { height: 1px; background: var(--border); margin: 0.75rem 0.6rem; list-style: none; } /* ---------- 4. Top Navbar ---------- */ .app-header.navbar { background: var(--bg-nav) !important; border-bottom: 1px solid var(--border); min-height: var(--navbar-height); } .app-header .nav-link { color: var(--text-secondary) !important; border-radius: var(--radius-full); transition: background 150ms ease; } .app-header .nav-link:hover { background: var(--gray-100); color: var(--text-primary) !important; } .zb-user-pill { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.6rem 0.3rem 0.3rem; border-radius: var(--radius-full); background: var(--gray-100); } .zb-user-pill__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .zb-user-pill__name { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); } .zb-logout-link { font-size: 0.85rem; font-weight: 400; color: var(--text-secondary); text-decoration: none; padding: 0.4rem 0.75rem; border-radius: var(--radius-md); transition: background 150ms ease, color 150ms ease; } .zb-logout-link:hover { background: var(--red-bg); color: var(--red-text); } /* ---------- 5. Main content area ---------- */ .app-content-header { background: transparent; padding: 1.5rem 1.5rem 0; } .app-content-header h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; } .app-content { padding: 1rem 1.5rem 2rem; } /* ---------- 6. Cards ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; border-top-left-radius: var(--radius-lg) !important; border-top-right-radius: var(--radius-lg) !important; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .card-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin: 0; } .card-body { padding: 1.25rem; } /* ---------- 7. Dashboard Stat Cards ---------- */ .zb-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; } .zb-stats-grid--wide { grid-template-columns: 1fr; } @media (max-width: 991px) { .zb-stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .zb-stats-grid { grid-template-columns: 1fr; } } .zb-stat-card { border-radius: var(--radius-lg); padding: 1.25rem; display: flex; align-items: flex-start; gap: 0.9rem; transition: transform 150ms ease, box-shadow 150ms ease; border: 1px solid; background: var(--bg-card); } .zb-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .zb-stat-icon--indigo { background: var(--accent); } .zb-stat-icon--green { background: var(--green); } .zb-stat-icon--amber { background: var(--yellow); } .zb-stat-icon--gray { background: var(--gray-500); } .zb-stat-icon--slate { background: var(--gray-500); } .zb-stat-icon--purple { background: var(--purple); } .zb-stat-icon--violet { background: var(--cyan); } .zb-stat-card:has(.zb-stat-icon--indigo) { background: var(--accent-light); border-color: var(--accent-border); } .zb-stat-card:has(.zb-stat-icon--green) { background: var(--green-bg); border-color: var(--green-border); } .zb-stat-card:has(.zb-stat-icon--amber) { background: var(--amber-bg); border-color: var(--amber-border); } .zb-stat-card:has(.zb-stat-icon--gray) { background: var(--gray-100); border-color: var(--border); } .zb-stat-card:has(.zb-stat-icon--slate) { background: var(--gray-100); border-color: var(--border); } .zb-stat-card:has(.zb-stat-icon--purple) { background: var(--purple-bg); border-color: var(--purple-border); } .zb-stat-card:has(.zb-stat-icon--violet) { background: var(--blue-bg); border-color: var(--blue-border); } .zb-stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; color: #fff; } .zb-stat-body { flex: 1; min-width: 0; } .zb-stat-number { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--text-primary); letter-spacing: -0.01em; } .zb-stat-label { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.15rem; } .zb-stat-link, .zb-stat-footer { display: inline-block; margin-top: 0.6rem; font-size: 0.8rem; font-weight: 500; color: var(--accent); text-decoration: none; } .zb-stat-link:hover, .zb-stat-footer:hover { color: var(--accent-dark); } /* ---------- 8. Tables ---------- */ .table { margin-bottom: 0; } .table thead th { background: var(--gray-100); color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border: none; padding: 0.8rem 1rem; } .table tbody td { padding: 0.85rem 1rem; border-top: 1px solid var(--border); border-bottom: none; font-size: 0.85rem; vertical-align: middle; } .table.table-striped tbody tr:nth-of-type(odd) { background: transparent; } .table tbody tr { transition: background 120ms ease; } .table tbody tr:hover { background: var(--gray-50); } .table tbody tr.table-active, .table tbody tr.zb-focused-row { background: var(--accent-light) !important; border-left: 3px solid var(--accent); } .zb-table-scroll { max-height: 400px; overflow-y: auto; } /* ---------- 9. Badges ---------- */ .badge { font-weight: 500; font-size: 0.72rem; padding: 0.3rem 0.6rem; border-radius: var(--radius-full); } .badge.text-bg-success { background: var(--green-bg) !important; color: var(--green-text) !important; } .badge.text-bg-warning { background: var(--amber-bg) !important; color: var(--amber-text) !important; } .badge.text-bg-danger { background: var(--red-bg) !important; color: var(--red-text) !important; } .badge.text-bg-primary { background: var(--blue-bg) !important; color: var(--blue-text) !important; } .badge.text-bg-info { background: var(--blue-bg) !important; color: var(--blue-text) !important; } .badge.text-bg-secondary{ background: var(--gray-100) !important; color: var(--gray-text) !important; } .badge.text-bg-dark { background: var(--purple-bg) !important; color: var(--purple-text) !important; } .badge.text-bg-light { background: var(--gray-100) !important; color: var(--gray-text) !important; } /* ---------- 10. Buttons ---------- */ .btn { border-radius: var(--radius-md); font-weight: 500; font-size: 0.85rem; padding: 0.5rem 1rem; transition: all 150ms ease; } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.78rem; } .btn-primary { background: var(--accent); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .btn-outline-primary { color: var(--accent); border-color: var(--accent-border); background: transparent; } .btn-outline-primary:hover { background: var(--accent-light); color: var(--accent-dark); border-color: var(--accent-border); } .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border); background: transparent; } .btn-outline-secondary:hover { background: var(--gray-100); color: var(--text-primary); border-color: var(--border); } .btn-outline-dark { color: var(--text-primary); border-color: var(--border); } .btn-outline-dark:hover { background: var(--gray-800); color: #fff; } .btn-outline-danger { color: var(--red-text); border-color: var(--red-border); } .btn-outline-danger:hover { background: var(--red); border-color: var(--red); color: #fff; } .btn-outline-success { color: var(--green-text); border-color: var(--green-border); } .btn-outline-success:hover { background: var(--green); border-color: var(--green); color: #fff; } .btn-outline-warning { color: var(--amber-text); border-color: var(--amber-border); background: transparent; } .btn-outline-warning:hover { background: var(--yellow); border-color: var(--yellow); color: #fff; } .btn-danger { background: var(--red); border-color: var(--red); } .btn-danger:hover { background: #d81f28; border-color: #d81f28; } .btn-link { color: var(--text-secondary); text-decoration: none; font-weight: 400; } .btn-link:hover { color: var(--accent); } /* ---------- 11. Forms ---------- */ .form-control, .form-select { border: 1px solid var(--border-input); border-radius: var(--radius-md); padding: 0.5rem 0.8rem; font-size: 0.85rem; transition: border-color 150ms ease, box-shadow 150ms ease; /* Same dark-mode-JS issue as the table fix above — text color was never forced light-mode-readable, so it inherited Bootstrap's dark --bs-body-color and looked washed-out/low-contrast on the white input background. */ background-color: #fff !important; color: var(--text-primary) !important; } .form-select option { color: var(--text-primary); background-color: #fff; } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .form-label { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); margin-bottom: 0.4rem; } .form-text { font-size: 0.78rem; color: var(--text-muted); } .mb-3 { margin-bottom: 1.15rem !important; } /* ---------- 12. Alerts ---------- */ .alert { border: none; border-radius: var(--radius-md); border-left: 4px solid; font-size: 0.85rem; padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.5rem; } .alert-success { background: var(--green-bg); color: #065f2f; border-left-color: var(--green); } .alert-danger { background: var(--red-bg); color: #7a1217; border-left-color: var(--red); } .alert-warning { background: var(--amber-bg); color: #5c4300; border-left-color: var(--yellow); } .alert-light { background: var(--gray-100); color: var(--text-secondary); border-left-color: var(--border-input); } /* ---------- 13. Danger Zone ---------- */ .zb-danger-zone { background: var(--red-bg); border: 1px solid var(--red-border); border-left: 4px solid var(--red); border-radius: var(--radius-lg); overflow: hidden; } .zb-danger-zone__header { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; font-weight: 600; color: var(--red-text); font-size: 0.92rem; border-bottom: 1px solid var(--red-border); } .zb-danger-zone__body { padding: 1.25rem; } /* ---------- 14. Footer ---------- */ .app-footer { background: transparent; border-top: 1px solid var(--border); padding: 1rem 1.5rem; font-size: 0.8rem; color: var(--text-muted); } /* ---------- 15. Info card (user_detail.php) ---------- */ .zb-info-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-card); height: 100%; } .zb-info-card__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.35rem; } .zb-info-card__value { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.2rem; } .zb-info-card__sub { font-size: 0.8rem; color: var(--text-secondary); } /* ---------- 16. QR Setup ---------- */ .zb-qr-setup { display: flex; flex-direction: column; gap: 1.25rem; } .zb-qr-step { display: flex; gap: 0.9rem; align-items: flex-start; } .zb-qr-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .zb-qr-step-body { flex: 1; min-width: 0; } .zb-qr-step-title { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.2rem; } .zb-qr-step-desc { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.75rem; } #qrcode { display: inline-block; padding: 1rem; background: #fff; border-radius: var(--radius-md); border: 1px solid var(--border); } /* ---------- 17. Empty states ---------- */ .zb-empty, .zb-empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); } .zb-empty i, .zb-empty-state i { font-size: 2rem; opacity: 0.4; margin-bottom: 0.5rem; display: block; } .zb-empty p { margin: 0; font-size: 0.85rem; } /* ---------- 18. Login Page ---------- */ body.zb-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-page); font-family: var(--font-sans); color: var(--text-primary); } .zb-login-card { width: 100%; max-width: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); margin: 1rem; overflow: hidden; } .zb-login-header { padding: 2rem 2rem 1.5rem; text-align: center; border-bottom: 1px solid var(--border); } .zb-login-logo { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.25rem; } .zb-login-logo-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .zb-login-brand { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); text-align: left; line-height: 1.2; } .zb-login-brand span { color: var(--accent); } .zb-login-tagline { font-size: 0.75rem; color: var(--text-muted); text-align: left; } .zb-login-step-title { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; } .zb-login-step-desc { font-size: 0.82rem; color: var(--text-secondary); } .zb-login-body { padding: 1.75rem 2rem 2rem; } .zb-step-indicator { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 1.25rem; } .zb-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); } .zb-step-dot.active { background: var(--accent); width: 20px; border-radius: var(--radius-full); transition: width 200ms ease; } .zb-login-footer { padding: 0 2rem 1.5rem; text-align: center; } .zb-otp-input { text-align: center; letter-spacing: 0.6em; font-size: 1.4rem; font-weight: 600; padding-left: 0.6em !important; } /* ---------- 19. Page-level action bars & callouts ---------- */ .zb-page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .zb-callout { background: var(--gray-100); border: 1px solid var(--border); border-left: 4px solid var(--gray-400); border-radius: var(--radius-md); padding: 0.85rem 1.1rem; font-size: 0.82rem; color: var(--text-secondary); margin-top: 1rem; } /* ---------- 20. 2FA status badge ---------- */ .zb-2fa-status { font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.03em; } .zb-2fa-status--on { background: var(--green-bg); color: var(--green-text); } .zb-2fa-status--off { background: var(--gray-100); color: var(--gray-text); } /* ---------- 21. Compact inline row controls ---------- */ .zb-row-controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .zb-row-controls-inline { display: flex; align-items: center; gap: 0.4rem; background: var(--gray-100); border-radius: var(--radius-md); padding: 0.3rem; } .zb-row-controls-inline .form-select, .zb-row-controls-inline .form-control { border: 1px solid var(--border); background: #fff; } /* ---------- 22. Responsive ---------- */ @media (max-width: 991px) { .app-content-header, .app-content { padding-left: 1rem; padding-right: 1rem; } .table-responsive { border-radius: var(--radius-lg); } } @media (max-width: 767px) { .card-body { padding: 1rem; } .app-content-header h3 { font-size: 1.1rem; } } /* ---------- 23. Misc ---------- */ code { background: var(--gray-100); color: var(--purple-text); padding: 0.15rem 0.45rem; border-radius: var(--radius-sm); font-size: 0.8rem; } hr { border-color: var(--border); } ::selection { background: var(--accent-light); color: var(--accent-dark); }