/* ========================================================================== MyBiz web portal - design system Mirrors the MyBiz mobile app: emerald palette, Poppins, Material icons, rounded cards, light + dark themes, bottom navigation on phones. Theme: follows the device by default; the toggle stores "light" or "dark" in localStorage and sets data-theme on (see assets/app.js). ========================================================================== */ /* ---------- Tokens ---------- */ :root { color-scheme: light; --bg: #F4F8F6; --surface: #FFFFFF; --surface-2: #F6FAF8; --surface-3: #EAF2EE; --border: #E2EBE6; --text: #0F1F19; --muted: #5B6E66; --primary: #059669; --primary-strong: #047857; --primary-soft: #D1FAE5; --on-primary: #FFFFFF; --ok: #047857; --ok-bg: #D1FAE5; --out: #C2410C; --out-bg: #FFEDD5; --warn: #B45309; --warn-bg: #FEF3C7; --bad: #B91C1C; --bad-bg: #FEE2E2; --on-bad: #FFFFFF; --info: #0E7490; --info-bg: #CFFAFE; --violet: #6D28D9; --violet-bg: #EDE9FE; --hero: linear-gradient(135deg, #10B981 0%, #047857 55%, #064E3B 100%); --shadow: 0 1px 2px rgba(2, 44, 34, .05), 0 10px 28px -14px rgba(2, 44, 34, .16); --shadow-lg: 0 30px 80px -24px rgba(2, 44, 34, .45); --scrim: rgba(3, 15, 11, .55); --radius: 14px; --radius-sm: 11px; --sidebar-width: 236px; --bottom-nav: 64px; /* legacy names still referenced by page-level markup */ --primary-dark: var(--primary-strong); --primary-light: var(--primary-soft); --secondary: var(--text); --dark: var(--text); --gray: var(--muted); --gray-light: var(--border); --light: var(--surface-2); --success: var(--ok); --danger: var(--bad); --warning: var(--warn); --accent: var(--primary); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #09130F; --surface: #0E1A16; --surface-2: #0F1D18; --surface-3: #132621; --border: #1F3A31; --text: #E6F2EC; --muted: #9DB3A9; --primary: #34D399; --primary-strong: #6EE7B7; --primary-soft: #0B3B2C; --on-primary: #03281D; --ok: #34D399; --ok-bg: #0B3B2C; --out: #FB923C; --out-bg: #45200C; --warn: #FBBF24; --warn-bg: #3F2E08; --bad: #F87171; --bad-bg: #451A1A; --on-bad: #450A0A; --info: #22D3EE; --info-bg: #0B3A44; --violet: #A78BFA; --violet-bg: #2A1F52; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6); --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, .8); --scrim: rgba(0, 0, 0, .65); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #09130F; --surface: #0E1A16; --surface-2: #0F1D18; --surface-3: #132621; --border: #1F3A31; --text: #E6F2EC; --muted: #9DB3A9; --primary: #34D399; --primary-strong: #6EE7B7; --primary-soft: #0B3B2C; --on-primary: #03281D; --ok: #34D399; --ok-bg: #0B3B2C; --out: #FB923C; --out-bg: #45200C; --warn: #FBBF24; --warn-bg: #3F2E08; --bad: #F87171; --bad-bg: #451A1A; --on-bad: #450A0A; --info: #22D3EE; --info-bg: #0B3A44; --violet: #A78BFA; --violet-bg: #2A1F52; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6); --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, .8); --scrim: rgba(0, 0, 0, .65); } /* ---------- Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } img { max-width: 100%; } ::selection { background: var(--primary-soft); color: var(--text); } /* ---------- Icons: Font Awesome class names drawn with Material Symbols Rounded ---------- */ .fas, .far, .fab { font-family: 'Material Symbols Rounded' !important; font-weight: 400; font-style: normal; font-size: 1.25em; line-height: 1; display: inline-block; vertical-align: -0.22em; letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .fas::before, .far::before, .fab::before { content: 'circle'; font-family: inherit; } .fa-trash::before { content: 'delete'; } .fa-edit::before { content: 'edit'; } .fa-building::before { content: 'domain'; } .fa-shopping-cart::before { content: 'today'; } .fa-save::before { content: 'save'; } .fa-exclamation-triangle::before { content: 'warning'; } .fa-exchange-alt::before { content: 'swap_horiz'; } .fa-wallet::before { content: 'account_balance_wallet'; } .fa-times::before { content: 'close'; } .fa-sync-alt::before { content: 'sync'; } .fa-sign-in-alt::before { content: 'login'; } .fa-sign-out-alt::before { content: 'logout'; } .fa-plus-circle::before { content: 'add_circle'; } .fa-plus::before { content: 'add'; } .fa-mobile-alt::before { content: 'smartphone'; } .fa-filter::before { content: 'filter_list'; } .fa-file-pdf::before { content: 'picture_as_pdf'; } .fa-eye::before { content: 'visibility'; } .fa-eye-slash::before { content: 'visibility_off'; } .fa-calendar-week::before { content: 'date_range'; } .fa-calendar-alt::before { content: 'calendar_month'; } .fa-angle-right::before, .fa-chevron-right::before { content: 'chevron_right'; } .fa-angle-left::before, .fa-chevron-left::before { content: 'chevron_left'; } .fa-chevron-down::before, .fa-angle-down::before { content: 'expand_more'; } .fa-angle-double-right::before { content: 'last_page'; } .fa-angle-double-left::before { content: 'first_page'; } .fa-users::before, .fa-user-group::before { content: 'group'; } .fa-times-circle::before { content: 'cancel'; } .fa-check-circle::before { content: 'check_circle'; } .fa-shield-alt::before { content: 'verified_user'; } .fa-rocket::before { content: 'rocket_launch'; } .fa-paper-plane::before { content: 'send'; } .fa-layer-group::before { content: 'layers'; } .fa-key::before { content: 'key'; } .fa-info-circle::before { content: 'info'; } .fa-home::before { content: 'home'; } .fa-heart::before { content: 'favorite'; } .fa-hand-holding-usd::before { content: 'request_quote'; } .fa-credit-card::before { content: 'account_balance'; } .fa-chart-line::before { content: 'show_chart'; } .fa-bolt::before { content: 'bolt'; } .fa-bars::before { content: 'menu'; } .fa-arrow-left::before { content: 'arrow_back'; } .fa-address-book::before { content: 'contacts'; } .fa-receipt::before { content: 'receipt_long'; } .fa-history::before { content: 'receipt_long'; } .fa-moon::before { content: 'dark_mode'; } .fa-sun::before { content: 'light_mode'; } .fa-adjust::before { content: 'brightness_auto'; } .fa-ellipsis::before { content: 'grid_view'; } .fa-arrow-up-right::before { content: 'north_east'; } .fa-arrow-down-left::before { content: 'south_west'; } /* ---------- App shell ---------- */ .container { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; background: var(--surface); border-right: 1px solid var(--border); padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 4px; z-index: 1000; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 12px; } .brand img { width: 36px; height: 36px; border-radius: 11px; box-shadow: 0 6px 16px -6px rgba(5, 150, 105, .6); } .brand strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; } .brand small { display: block; font-size: 10.5px; color: var(--muted); } .nav-label { padding: 10px 12px 4px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .nav-links { list-style: none; display: grid; gap: 2px; } .nav-links a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 11px; color: var(--muted); font-weight: 500; font-size: 13px; transition: background .15s, color .15s; } .nav-links a i { font-size: 20px; width: 22px; text-align: center; } .nav-links a:hover { background: var(--surface-3); color: var(--text); } .nav-links a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; } .nav-links a.active i { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .sidebar-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); } .user-card { display: flex; align-items: center; gap: 11px; padding: 6px 8px; min-width: 0; } .user-card .who { min-width: 0; } .user-card strong { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-card small { color: var(--muted); font-size: 11px; } .avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 12px; letter-spacing: .02em; } .logout-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 11px; border: 1px solid var(--border); color: var(--bad); font-weight: 600; font-size: 12.5px; transition: background .15s; } .logout-link:hover { background: var(--bad-bg); } .theme-switch { display: flex; background: var(--surface-3); border-radius: 11px; padding: 3px; gap: 3px; } .theme-switch button { flex: 1; display: grid; place-items: center; padding: 6px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } .theme-switch button i { font-size: 18px; } .theme-switch button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); } .main-content { flex: 1; min-width: 0; margin-left: var(--sidebar-width); min-height: 100vh; } .header { position: sticky; top: 0; z-index: 900; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding: 10px 22px; } .header-content { display: flex; align-items: center; gap: 10px; } .header h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-logo { display: none; width: 34px; height: 34px; border-radius: 11px; } .icon-btn { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: background .15s, color .15s; } .icon-btn:hover { background: var(--surface-3); color: var(--text); } .icon-btn i { font-size: 20px; } /* Paybill switcher chip */ .pb-switch { position: relative; } .pb-switch summary, .pb-chip { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: 12.5px; max-width: min(240px, 38vw); min-width: 0; } .pb-chip { cursor: default; } .pb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-chip i { font-size: 20px; flex: none; } .pb-switch summary::-webkit-details-marker { display: none; } .pb-switch summary span, .pb-switch summary { } .pb-switch summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-switch summary i { font-size: 20px; flex: none; } .pb-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; z-index: 1100; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-lg); } .pb-menu button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; } .pb-menu button:hover { background: var(--surface-3); } .pb-menu button.current { background: var(--primary-soft); } .pb-menu .avatar { width: 34px; height: 34px; font-size: 12.5px; background: var(--surface-3); } .pb-menu strong { display: block; font-size: 13px; font-weight: 600; } .pb-menu small { color: var(--muted); font-size: 11.5px; } .pb-menu i.tick { margin-left: auto; color: var(--primary); } .content-area { padding: 18px 22px 32px; } /* ---------- Bottom navigation (phones/tablets) ---------- */ .bottom-nav { display: none; } .more-sheet, .more-scrim { display: none; } @media (max-width: 1023px) { .sidebar { display: none; } .main-content { margin-left: 0; } body { padding-bottom: calc(var(--bottom-nav) + env(safe-area-inset-bottom, 0px)); } .header { padding: 9px 14px; } .header h2 { font-size: 16px; } .header-logo { display: block; } .content-area { padding: 14px 14px 24px; } .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 1000; height: calc(var(--bottom-nav) + env(safe-area-inset-bottom, 0px)); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); } .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10.5px; font-weight: 500; border-radius: 14px; position: relative; } .bottom-nav i { font-size: 22px; padding: 2px 16px; border-radius: 999px; transition: background .2s, color .2s; } .bottom-nav .active { color: var(--primary); font-weight: 600; } .bottom-nav .active i { background: var(--primary-soft); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .more-scrim { position: fixed; inset: 0; z-index: 1100; background: var(--scrim); backdrop-filter: blur(2px); display: none; } .more-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150; background: var(--surface); border-radius: 28px 28px 0 0; border: 1px solid var(--border); border-bottom: 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); display: block; max-height: 88vh; overflow-y: auto; } body.more-open .more-scrim { display: block; } body.more-open .more-sheet { transform: none; } body.more-open { overflow: hidden; } .more-sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto 14px; } .more-sheet h3 { font-size: 17px; margin: 4px 4px 12px; } .more-list { display: grid; gap: 8px; margin-bottom: 16px; } .more-list a { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 500; } .more-list a .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); } .more-list a small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; } .more-list a.danger { color: var(--bad); } .more-list a.danger .ic { background: var(--bad-bg); color: var(--bad); } } /* ---------- Cards, sections ---------- */ .tabs, .filters, .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .tabs { overflow: hidden; margin-bottom: 14px; } .tab-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); } .tab-btn { background: transparent; border: 0; font-weight: 600; font-size: 14px; color: var(--text); padding: 0; cursor: default; } .tab-btn.active { color: var(--text); } button.tab-btn:not(.active) { cursor: pointer; padding: 8px 14px; border-radius: 11px; font-size: 12.5px; background: var(--primary); color: var(--on-primary); } button.tab-btn:not(.active):hover { background: var(--primary-strong); } .tab-content { padding: 16px; } .tab-content:has(> .table-container:first-child) { padding: 0; } .tab-content[style*="padding: 0"] { padding: 0 !important; } .section-title { font-size: 14px; font-weight: 600; margin: 2px 2px 8px; display: flex; align-items: center; justify-content: space-between; } .section-title a { font-size: 12px; color: var(--primary); font-weight: 600; } /* ---------- Dashboard: hero balance card, quick actions, stats ---------- */ .hero-card { position: relative; overflow: hidden; color: #fff; border-radius: 20px; padding: 18px 22px; margin-bottom: 14px; background: var(--hero); box-shadow: 0 22px 46px -22px rgba(5, 150, 105, .75); } .hero-card::before, .hero-card::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; } .hero-card::before { width: 260px; height: 260px; right: -70px; top: -90px; } .hero-card::after { width: 190px; height: 190px; right: 120px; bottom: -110px; background: rgba(255, 255, 255, .06); } .hero-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; } .hero-top .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); flex: none; } .hero-top .ic i { font-size: 20px; } .hero-top strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; } .hero-top small { display: block; font-size: 11px; opacity: .8; } .hero-eye { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; } .hero-eye:hover { background: rgba(255, 255, 255, .24); } .hero-label { position: relative; z-index: 1; margin-top: 12px; font-size: 11.5px; opacity: .8; } .hero-amount { position: relative; z-index: 1; font-size: clamp(26px, 5vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; word-break: break-word; } .hero-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .hero-updated { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .85; } .hero-updated i { font-size: 18px; } .hero-refresh { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .2); color: #fff; font-weight: 600; font-size: 12px; } .hero-refresh:hover { background: rgba(255, 255, 255, .3); } .hero-refresh i { font-size: 17px; margin: 0; } .balance-hidden .hero-amount { letter-spacing: .12em; } .quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 96px)); gap: 6px; margin-bottom: 16px; } .quick-actions a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 14px; font-size: 12px; font-weight: 500; transition: background .15s; } .quick-actions a:hover { background: var(--surface-3); } .quick-actions .qi { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; } .quick-actions .qi i { font-size: 23px; margin: 0; } .qi.out { background: var(--out-bg); color: var(--out); } .qi.in { background: var(--ok-bg); color: var(--ok); } .qi.info { background: var(--info-bg); color: var(--info); } .qi.warn { background: var(--warn-bg); color: var(--warn); } .stats-container, .account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; } .stat-card, .stat-badge { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow); position: relative; } .stat-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-direction: row-reverse; } .stat-header h3 { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; flex: 1; } .stat-header i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin: 0; background: var(--primary-soft); color: var(--primary); font-size: 18px; flex: none; } .stat-card.green .stat-header i { background: var(--ok-bg); color: var(--ok); } .stat-card.blue .stat-header i { background: var(--info-bg); color: var(--info); } .stat-card.purple .stat-header i { background: var(--violet-bg); color: var(--violet); } .stat-card.orange .stat-header i { background: var(--out-bg); color: var(--out); } .stat-card.red .stat-header i { background: var(--bad-bg); color: var(--bad); } .stat-value { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; word-break: break-word; } .stat-change { font-size: 11px; color: var(--muted); margin-top: 2px; } .stat-content { display: flex; align-items: center; gap: 12px; } .stat-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 20px; background: var(--primary-soft); color: var(--primary); } .stat-badge:nth-child(2) .stat-icon { background: var(--ok-bg); color: var(--ok); } .stat-badge:nth-child(3) .stat-icon { background: var(--bad-bg); color: var(--bad); } .stat-badge:nth-child(1) .stat-icon { background: var(--violet-bg); color: var(--violet); } .stat-icon i { margin: 0; } .stat-info { flex: 1; min-width: 0; } .stat-info h3 { font-size: 12px; font-weight: 500; color: var(--muted); } .mini-strip { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin: -6px 0 24px; box-shadow: var(--shadow); } .mini-strip > div { display: flex; align-items: center; gap: 12px; } .mini-strip > div + div { border-left: 1px solid var(--border); padding-left: 18px; } .mini-strip i { font-size: 24px; } .mini-strip small { display: block; color: var(--muted); font-size: 11.5px; } .mini-strip strong { font-size: 14px; font-weight: 600; } /* ---------- Forms ---------- */ .form-group { margin-bottom: 12px; } .form-group label, .filter-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 12px; color: var(--text); } .form-group small { display: block; margin-top: 4px; color: var(--muted) !important; font-size: 11px !important; } .form-control { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 13px; transition: border-color .15s, box-shadow .15s, background .15s; } input.form-control, select.form-control { height: 40px; } .form-control::placeholder { color: var(--muted); opacity: .75; } .form-control:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); } select.form-control, .rows-selector select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394A3A0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; } .form-control:disabled { opacity: .6; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: 13px; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s, border-color .15s; } .btn:active { transform: scale(.985); } .btn i { margin: 0; font-size: 18px; } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-strong); } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } .btn-outline:hover { background: var(--surface-3); } .btn-danger, .btn-delete { background: var(--bad); color: var(--on-bad); } .btn-danger:hover, .btn-delete:hover { filter: brightness(1.06); } /* compact row actions */ .action-buttons { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .action-btn, .btn-sm, .btn-delete-sm, .btn-edit { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 0; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter .15s; text-decoration: none; line-height: 1.2; } .action-btn i, .btn-sm i, .btn-delete-sm i { margin: 0; font-size: 16px; } .action-btn:hover, .btn-sm:hover, .btn-delete-sm:hover { filter: brightness(.95); } .edit-btn, .btn-edit { background: var(--warn-bg); color: var(--warn); } .delete-btn, .btn-delete-sm, .btn-sm.btn-delete { background: var(--bad-bg); color: var(--bad); } .view-btn { background: var(--primary-soft); color: var(--primary); } .btn-edit:hover, .btn-delete:hover { filter: brightness(.95); } /* ---------- Alerts and badges ---------- */ .alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius-sm); font-weight: 500; font-size: 12.5px; border: 1px solid transparent; } .alert::before { font-family: 'Material Symbols Rounded'; font-size: 20px; line-height: 1.1; flex: none; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .alert-success { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); } .alert-success::before { content: 'check_circle'; } .alert-error, .alert-danger { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); } .alert-error::before, .alert-danger::before { content: 'error'; } .status-badge, .pill { background: var(--surface-3); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; border: 0; } .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-completed, .status-active, .pill.ok { background: var(--ok-bg); color: var(--ok); } .status-pending, .pill.warn { background: var(--warn-bg); color: var(--warn); } .status-failed, .status-inactive, .pill.bad { background: var(--bad-bg); color: var(--bad); } .pill.info { background: var(--info-bg); color: var(--info); } code { background: var(--surface-3); padding: 2px 8px; border-radius: 7px; font-size: 12px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace !important; color: var(--text); } /* ---------- Tables ---------- */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .tabs .table-container { border: 0; border-radius: 0; box-shadow: none; } .table-container table { width: 100%; border-collapse: collapse; min-width: 640px; } .table-container th { background: var(--surface-2); color: var(--muted); text-align: left; white-space: nowrap; padding: 9px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--border); } .table-container td { padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; vertical-align: middle; } .table-container tbody tr:last-child td { border-bottom: 0; } @media (min-width: 721px) { .table-container td { white-space: nowrap; } } .table-container tbody tr { transition: background .12s; } .table-container tbody tr:hover { background: var(--surface-2); } .table-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 16px; border-bottom: 1px solid var(--border); } .rows-selector { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 12px; } .rows-selector span { color: var(--muted) !important; } .rows-selector strong { color: var(--text) !important; } .rows-selector select { height: 32px; padding: 4px 30px 4px 10px; border: 1px solid var(--border); border-radius: 10px; background-color: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; } .export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 12px; cursor: pointer; } .export-btn:hover { background: var(--surface-3); } .export-btn i { margin: 0; font-size: 18px; color: var(--bad); } /* Filters */ .filters { padding: 12px 16px; margin-bottom: 12px; } .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; } .filter-group { min-width: 0; } .filter-group .form-control { margin: 0; } .filter-row .form-group, .filter-group { margin-bottom: 0; } .filter-actions { display: flex; gap: 8px; align-items: flex-end; } .filter-actions .btn { flex: 1; } .filters-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; border: 0; background: transparent; cursor: pointer; font-weight: 600; font-size: 14px; padding: 2px 0; } .filters-toggle span { display: inline-flex; align-items: center; gap: 8px; } .filters-toggle .count { background: var(--primary); color: var(--on-primary); border-radius: 999px; font-size: 11px; padding: 1px 8px; } .filters-toggle i.chev { transition: transform .2s; } .filters.open .filters-toggle i.chev { transform: rotate(180deg); } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 10px; border-top: 1px solid var(--border); } .pagination a, .pagination span, .pagination-btn { min-width: 32px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500; font-size: 12px; } .pagination a:hover, .pagination-btn:hover { background: var(--surface-3); } .pagination .active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .pagination .disabled { border: 0; background: transparent; color: var(--muted); min-width: 20px; padding: 0 2px; } .pagination .pagination-info, .pagination-info { border: 0 !important; background: transparent !important; color: var(--muted); font-size: 12.5px; } .pagination i { margin: 0; font-size: 16px; } /* ---------- Modals (bottom sheets on phones) ---------- */ .modal { display: none; position: fixed; inset: 0; z-index: 1200; padding: 16px; background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); align-items: center; justify-content: center; } .modal.active { display: flex; } .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--shadow-lg); animation: sheetIn .24s cubic-bezier(.2, .8, .2, 1); } @keyframes sheetIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 8px; } .modal-header h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .modal-header h3 i { margin: 0 !important; font-size: 21px; } .modal-close, .close-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; flex: none; background: var(--surface-3); color: var(--muted); font-size: 20px; line-height: 1; display: grid; place-items: center; } .modal-close:hover, .close-btn:hover { color: var(--text); } .modal-body { padding: 4px 18px 6px; } .modal-footer { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 10px 18px 16px; } .modal-content > form:not(:has(.modal-body)) { padding: 4px 18px 16px; } .delete-warning { background: var(--bad-bg); color: var(--bad); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; margin-bottom: 10px; } .delete-warning p { margin: 4px 0; } .delete-info { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 10px; } .delete-info p { margin: 3px 0; font-size: 12px; } .delete-info strong { color: var(--muted); font-weight: 500; } /* ---------- Misc components ---------- */ .empty-state { text-align: center; padding: 36px 16px; color: var(--muted); } .empty-state i { font-size: 44px; margin-bottom: 8px; color: var(--primary); opacity: .55; } .empty-state h3 { color: var(--text); font-size: 15px; margin-bottom: 4px; } .account-header { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; box-shadow: var(--shadow); } .account-header h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .account-header p { margin: 2px 0; } .back-btn { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 12px; } .back-btn:hover { background: var(--surface-3); } .back-btn i { margin: 0; font-size: 17px; } .segmented { display: flex; gap: 3px; padding: 3px; background: var(--surface-3); border-radius: 14px; margin-bottom: 12px; max-width: 360px; } .segmented a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 11px; font-weight: 600; font-size: 12.5px; color: var(--muted); } .segmented a i { margin: 0; font-size: 18px; } .segmented a.active { background: var(--primary-soft); color: var(--primary); box-shadow: var(--shadow); } .form-card { padding: 14px 16px; margin-bottom: 14px; } .form-card form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; align-items: start; } .form-card form .btn { grid-column: 1 / -1; justify-self: start; } .quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .quick-amounts button { padding: 4px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer; } .quick-amounts button:hover { background: var(--primary-soft); color: var(--primary); border-color: transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* ---------- Auth + landing pages ---------- */ .auth-wrap { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; background: var(--surface); } .auth-hero { position: relative; overflow: hidden; background: var(--hero); color: #fff; text-align: center; padding: 56px 20px 84px; } .auth-hero::before, .auth-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); } .auth-hero::before { width: 320px; height: 320px; right: -90px; top: -120px; } .auth-hero::after { width: 240px; height: 240px; left: -100px; bottom: -80px; } .auth-hero img { width: 84px; height: 84px; border-radius: 26px; box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .45); position: relative; z-index: 1; } .auth-hero h1 { position: relative; z-index: 1; margin-top: 16px; font-size: 30px; font-weight: 800; letter-spacing: -.01em; } .auth-hero p { position: relative; z-index: 1; opacity: .85; font-size: 14px; } .auth-card { background: var(--surface); border-radius: 32px 32px 0 0; margin-top: -32px; position: relative; z-index: 2; padding: 32px 26px 28px; width: 100%; max-width: 460px; margin-inline: auto; align-self: start; } .auth-card h2 { font-size: 24px; font-weight: 700; margin-bottom: 4px; } .auth-card .lead { color: var(--muted); margin-bottom: 22px; } .password-wrapper { position: relative; } .password-wrapper .form-control { padding-right: 48px; } .toggle-password { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; } .toggle-password:hover { background: var(--surface-3); color: var(--text); } .toggle-password i { margin: 0; } .auth-foot { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 22px; } .theme-fab { position: fixed; top: 14px; right: 14px; z-index: 50; background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; } .theme-fab:hover { background: rgba(255, 255, 255, .28); color: #fff; } /* ---------- Wide screens / small phones ---------- */ @media (max-width: 520px) { .header-logo { display: none !important; } } @media (max-width: 720px) { .quick-actions { grid-template-columns: repeat(4, 1fr); gap: 2px; } .quick-actions .qi { width: 46px; height: 46px; } .hero-card { padding: 16px 16px; border-radius: 20px; } input.form-control, select.form-control { height: 42px; font-size: 14px; } .stats-container, .account-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .account-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; } .account-stats .stat-badge { padding: 10px 8px; } .account-stats .stat-content { flex-direction: column; text-align: center; gap: 6px; } .account-stats .stat-icon { width: 34px; height: 34px; font-size: 18px; } .account-stats .stat-info h3 { font-size: 10.5px; } .stat-card { padding: 11px 12px; } .stat-value { font-size: 16px; } .mini-strip { padding: 12px 14px; } .mini-strip > div + div { padding-left: 12px; } .filters-toggle { display: flex; } .filters .filter-row { display: none; margin-top: 12px; grid-template-columns: 1fr; } .filters.open .filter-row { display: grid; } .filters { padding: 10px 14px; } .tabs { background: transparent; border: 0; box-shadow: none; overflow: visible; } .tab-header { padding: 2px 2px 8px; border: 0; } .tab-content { padding: 0; } .table-controls { padding: 0 2px 8px; border: 0; } .tab-content[style], .tab-content { padding: 0 !important; } /* Tables become card lists: each row is a card, each cell a "label: value" line. */ .table-container { background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0; } .table-container table, .table-container tbody { display: block; min-width: 0; width: 100%; } .table-container thead { display: none; } .table-container tbody { display: grid; gap: 8px; } .table-container tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 14px; box-shadow: var(--shadow); } .table-container tbody tr:hover { background: var(--surface); } .table-container td { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: right; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; word-break: break-word; } .table-container td:last-child { border-bottom: 0; } .table-container td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 500; text-align: left; flex: none; } .table-container td[data-label=""]::before, .table-container td[colspan]::before { display: none; } .table-container td[data-label=""] { justify-content: flex-end; } .table-container td[colspan] { display: block; text-align: center; border: 0; padding: 30px 0; color: var(--muted); } .pagination { border: 0; padding: 14px 0; } /* Modals slide up as bottom sheets */ .modal { padding: 0; align-items: flex-end; } .modal-content { max-width: none; max-height: 92vh; border-radius: 28px 28px 0 0; border-bottom: 0; animation: sheetUp .28s cubic-bezier(.2, .8, .2, 1); } .modal-content::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--border); margin: 10px auto 0; } .modal-footer .btn { flex: 1; } .form-card form { grid-template-columns: 1fr; } @keyframes sheetUp { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } } .auth-hero { padding: 44px 20px 76px; } } @media (min-width: 1024px) { .auth-wrap { grid-template-rows: 1fr; grid-template-columns: 1.1fr 1fr; } .auth-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; } .auth-hero img { width: 108px; height: 108px; border-radius: 32px; } .auth-hero h1 { font-size: 40px; } .auth-hero p { font-size: 16px; } .auth-card { margin-top: 0; align-self: center; border-radius: 0; padding: 40px 48px; max-width: 520px; } } @media print { .sidebar, .header, .bottom-nav, .more-sheet, .more-scrim, .btn, .filters, .export-btn { display: none !important; } .main-content { margin-left: 0 !important; } body { background: #fff; color: #000; } .table-container { overflow: visible !important; box-shadow: none !important; border: 1px solid #999 !important; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------- Landing page ---------- */ .land-hero { position: relative; overflow: hidden; background: var(--hero); color: #fff; padding: 0 clamp(16px, 5vw, 64px) 96px; } .land-hero::before, .land-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; } .land-hero::before { width: 420px; height: 420px; right: -120px; top: -160px; } .land-hero::after { width: 300px; height: 300px; left: -110px; bottom: -120px; } .land-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; } .land-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; } .land-brand img { width: 36px; height: 36px; border-radius: 11px; } .land-nav-actions { display: flex; align-items: center; gap: 10px; } .theme-fab-inline { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; } .theme-fab-inline:hover { background: rgba(255, 255, 255, .26); color: #fff; } .land-login { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-weight: 600; font-size: 13px; } .land-login:hover { background: rgba(255, 255, 255, .28); } .land-login i { font-size: 18px; } .land-hero-body { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; padding-top: clamp(36px, 8vw, 80px); } .land-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 500; } .land-badge i { font-size: 16px; } .land-hero h1 { margin-top: 16px; font-size: clamp(28px, 5vw, 46px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } .land-hero h1 span { color: #A7F3D0; } .land-hero p { margin: 14px auto 0; max-width: 620px; font-size: clamp(13px, 1.6vw, 15.5px); opacity: .88; } .land-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } .land-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: 13.5px; } .land-btn i { font-size: 19px; } .land-btn-solid { background: #fff; color: #047857; } .land-btn-solid:hover { background: #ECFDF5; } .land-btn-ghost { background: rgba(255, 255, 255, .16); color: #fff; } .land-btn-ghost:hover { background: rgba(255, 255, 255, .26); } .land-features { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 0 clamp(16px, 5vw, 64px) 40px; margin-top: -56px; } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .feature-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; background: var(--ok-bg); color: var(--ok); } .feature-icon i { margin: 0; font-size: 22px; } .feature-icon.violet { background: var(--violet-bg); color: var(--violet); } .feature-icon.info { background: var(--info-bg); color: var(--info); } .feature-icon.warn { background: var(--warn-bg); color: var(--warn); } .feature-card h3 { font-size: 14.5px; margin-bottom: 4px; } .feature-card p { color: var(--muted); font-size: 12.5px; } .land-foot { text-align: center; color: var(--muted); font-size: 12px; padding: 4px 16px 28px; }