/* ========================================================================== PILOS Point of Sale — app/admin design system ("app-ui") -------------------------------------------------------------------------- Fintech-app look: soft grey page, WHITE rounded cards, blue-gradient header band, floating rounded bottom-nav with small icons. Brand: blue #2563EB / deep blue #1D4ED8 / navy #0F172A / green #10B981. TWO SKINS sharing every component class: • USER APP ... white sidebar, colour logo, blue accents • ADMIN ...... navy sidebar (.sidebar.admin), white logo Loaded via _shell.php (emitted in ) so it overrides per-page CSS. ========================================================================== */ :root{ --navy:#0F172A; --navy-deep:#0B1222; --accent:#2563EB; --accent-dark:#1D4ED8; --accent2:#10B981; --accent2-dark:#059669; --accent-gold:#EAB308; --accent-purple:#7c5cff; --accent-red:#EF4444; --grad-blue:linear-gradient(135deg,#3B82F6 0%,#2563EB 45%,#1D4ED8 100%); --grad-navy:linear-gradient(135deg,#1E293B 0%,#0F172A 100%); /* light content surfaces */ --page:#EEF2F8; --surface:#ffffff; --surface-2:#F5F8FC; --ink:#0F172A; --ink-muted:#64748B; --ink-faint:#94A3B8; --line:#E8EDF5; /* sidebar (user app = light) */ --sb-bg:#ffffff; --sb-ink:#334155; --sb-faint:#94A3B8; --sb-line:#EDF1F7; --sidebar-w:250px; --topbar-h:62px; --bottomnav-h:64px; --fab-size:50px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --shadow-sm:0 1px 3px rgba(15,23,42,.05); --shadow:0 8px 26px rgba(37,99,235,.09); --shadow-lg:0 18px 44px rgba(15,23,42,.14); } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;color:var(--ink);overflow-x:hidden;min-height:100vh;background:var(--page)} a{color:inherit} .app-container{display:block} /* Kill legacy per-page mobile hamburgers — the shell provides one FAB */ .mobile-menu-btn{display:none !important} /* ========================================================================== SIDEBAR — user app: clean WHITE panel, colour wordmark, small icons ========================================================================== */ .sidebar{position:fixed;top:0;left:-100%;width:var(--sidebar-w);height:100%; background:var(--sb-bg);border-right:1px solid var(--sb-line); z-index:1200;overflow-y:auto;transition:left .34s cubic-bezier(.4,0,.2,1); box-shadow:12px 0 40px rgba(15,23,42,.08);display:flex;flex-direction:column;color:var(--sb-ink)} .sidebar.active{left:0} .sidebar::-webkit-scrollbar{width:3px} .sidebar::-webkit-scrollbar-thumb{background:rgba(15,23,42,.12);border-radius:3px} .sidebar-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px); z-index:1199;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s} .sidebar-overlay.active{opacity:1;visibility:visible} .sidebar-header{padding:22px 18px 14px;text-align:center} .sidebar-header::after{content:'';display:block;height:1px;margin-top:14px; background:linear-gradient(90deg,transparent,var(--sb-line),transparent)} .sidebar-header .logo,.sidebar-header a{display:block;text-decoration:none} .logo-wrap{width:auto;height:auto;background:none;border:none;border-radius:0;margin:0 auto 8px; display:flex;align-items:center;justify-content:center;box-shadow:none} .logo-wrap img{width:104px;height:auto;object-fit:contain} /* admin: white chip behind the stacked logo so it pops on the navy sidebar */ .sidebar.admin .logo-wrap{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09); border-radius:var(--r-md);padding:12px 18px;width:fit-content;margin:0 auto 9px} .sidebar-header h2{font-size:9.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--sb-faint)} .sidebar-nav{padding:12px 12px;flex:1} .nav-section-label{font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase; color:var(--sb-faint);padding:0 12px;margin:14px 0 6px} .sidebar-nav a,.sidebar-nav .nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm); color:var(--sb-ink);text-decoration:none;font-size:13px;font-weight:600;transition:all .18s; margin-bottom:2px;border:1px solid transparent;position:relative} .sidebar-nav a i,.sidebar-nav .nav-item i{width:26px;height:26px;font-size:12px;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center;border-radius:8px; background:var(--surface-2);color:var(--accent);transition:all .18s} .sidebar-nav a:hover,.sidebar-nav .nav-item:hover{background:var(--surface-2);color:var(--accent-dark)} .sidebar-nav a.active,.sidebar-nav .nav-item.active{ background:var(--grad-blue);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.30)} .sidebar-nav a.active i,.sidebar-nav .nav-item.active i{background:rgba(255,255,255,.18);color:#fff} .nav-divider{height:1px;margin:10px 12px;background:var(--sb-line)} .sidebar-footer{margin-top:auto;padding:12px 12px 20px;border-top:1px solid var(--sb-line)} .sidebar-footer a,.sidebar-footer .nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm); color:var(--sb-ink);text-decoration:none;font-size:13px;font-weight:600;transition:all .18s;border:1px solid transparent;margin-bottom:3px} .sidebar-footer a i,.sidebar-footer .nav-item i{width:26px;height:26px;font-size:12px;display:inline-flex;align-items:center;justify-content:center; border-radius:8px;background:var(--surface-2);color:var(--accent)} .sidebar-footer a:hover,.sidebar-footer .nav-item:hover{background:var(--surface-2);color:var(--accent-dark)} .sidebar-footer .nav-item.active{background:var(--grad-blue);color:#fff} .sidebar-footer .nav-item.active i{background:rgba(255,255,255,.18);color:#fff} .sidebar-footer a.logout{color:var(--accent-red)} .sidebar-footer a.logout i{background:rgba(239,68,68,.10);color:var(--accent-red)} .sidebar-footer a.logout:hover{background:rgba(239,68,68,.08)} /* ========================================================================== ADMIN SKIN — navy sidebar so the admin console is instantly different ========================================================================== */ .sidebar.admin{background:var(--grad-navy);border-right:1px solid rgba(255,255,255,.06);color:#CBD5E1} .sidebar.admin .sidebar-header::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)} .sidebar.admin .sidebar-header h2{color:#7C8CA5} .sidebar.admin .nav-section-label{color:#5B6B85} .sidebar.admin .sidebar-nav a,.sidebar.admin .sidebar-nav .nav-item{color:#B6C2D6} .sidebar.admin .sidebar-nav a i,.sidebar.admin .sidebar-nav .nav-item i{background:rgba(255,255,255,.07);color:#7EA6FF} .sidebar.admin .sidebar-nav a:hover,.sidebar.admin .sidebar-nav .nav-item:hover{background:rgba(255,255,255,.06);color:#fff} .sidebar.admin .sidebar-nav a.active,.sidebar.admin .sidebar-nav .nav-item.active{ background:var(--grad-blue);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.45)} .sidebar.admin .sidebar-nav a.active i,.sidebar.admin .sidebar-nav .nav-item.active i{background:rgba(255,255,255,.18);color:#fff} .sidebar.admin .nav-divider{background:rgba(255,255,255,.08)} .sidebar.admin .sidebar-footer{border-top-color:rgba(255,255,255,.08)} .sidebar.admin .sidebar-footer a{color:#B6C2D6} .sidebar.admin .sidebar-footer a i{background:rgba(255,255,255,.07);color:#7EA6FF} .sidebar.admin .sidebar-footer a:hover{background:rgba(255,255,255,.06);color:#fff} .sidebar.admin .sidebar-footer a.logout{color:#FCA5A5} .sidebar.admin .sidebar-footer a.logout i{background:rgba(239,68,68,.16);color:#FCA5A5} /* ========================================================================== MAIN + BLUE GRADIENT TOP BAR (like the reference app header) ========================================================================== */ .main-content{min-height:100vh;position:relative;z-index:1;margin-left:0} .top-bar{display:flex;justify-content:space-between;align-items:center;padding:0 18px;height:var(--topbar-h); background:var(--grad-blue);border-bottom:none; position:sticky;top:0;z-index:100;box-shadow:0 10px 26px rgba(37,99,235,.25)} .page-title h1{font-size:16px;font-weight:800;color:#fff;letter-spacing:.2px} .page-title p{font-size:11px;color:rgba(255,255,255,.75);margin-top:1px} .top-right{display:flex;align-items:center;gap:10px} .notif-btn{position:relative;cursor:pointer;width:36px;height:36px;background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;transition:all .2s} .notif-btn:hover{background:rgba(255,255,255,.24)} .notif-btn i{font-size:14px;color:#fff} .notif-badge{position:absolute;top:-5px;right:-5px;background:var(--accent-red);color:#fff;border-radius:50%; min-width:17px;height:17px;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff} .user-badge{display:flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;border-radius:100px; padding:4px 12px 4px 4px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);transition:all .2s} .user-badge:hover{background:rgba(255,255,255,.24)} .user-avatar{width:30px;height:30px;background:#fff;border-radius:50%; display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:var(--accent-dark);flex-shrink:0} .user-badge .u-name{font-size:12px;font-weight:600;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .plan-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);font-size:10.5px;font-weight:700;color:#fff} .plan-pill i{font-size:10px;color:#FEF08A} .plan-pill.warn{background:rgba(234,179,8,.25);border-color:rgba(253,230,138,.5);color:#FEF9C3} .plan-pill.danger{background:rgba(239,68,68,.3);border-color:rgba(254,202,202,.5);color:#FEE2E2} /* ---- CONTENT ---- */ .content-container{padding:16px 14px;padding-bottom:calc(var(--bottomnav-h) + 34px)} .welcome-card{position:relative;border-radius:var(--r-xl);padding:22px 20px;margin-bottom:14px; background:var(--grad-blue);color:#fff;box-shadow:0 14px 34px rgba(37,99,235,.30);overflow:hidden} .welcome-card::before{content:'';position:absolute;top:-60px;right:-40px;width:220px;height:220px; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none} .welcome-card::after{content:'';position:absolute;bottom:-70px;left:-30px;width:180px;height:180px; background:radial-gradient(circle,rgba(16,185,129,.25),transparent 70%);pointer-events:none} .welcome-card h2{font-size:20px;font-weight:800;line-height:1.3;margin-bottom:6px;color:#fff} .welcome-card p{font-size:12.5px;color:rgba(255,255,255,.85);margin-bottom:14px} .welcome-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* ---- STAT CARDS — white rounded cards, 2 per row (like the reference) ---- */ .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px} .stat-card{position:relative;border-radius:var(--r-lg);padding:16px 15px;background:var(--surface); border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .2s,box-shadow .2s} .stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .stat-card::after{content:'';position:absolute;top:14px;bottom:14px;left:0;width:4px;border-radius:0 4px 4px 0} .c-blue::after{background:var(--accent)}.c-green::after{background:var(--accent2)} .c-gold::after{background:var(--accent-gold)}.c-purple::after{background:var(--accent-purple)}.c-red::after{background:var(--accent-red)} .stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .stat-label{font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-faint)} .stat-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px} .c-blue .stat-icon{background:rgba(37,99,235,.10);color:var(--accent-dark)} .c-green .stat-icon{background:rgba(16,185,129,.12);color:var(--accent2-dark)} .c-gold .stat-icon{background:rgba(234,179,8,.13);color:#A16207} .c-purple .stat-icon{background:rgba(124,92,255,.11);color:var(--accent-purple)} .c-red .stat-icon{background:rgba(239,68,68,.10);color:var(--accent-red)} .stat-value{font-size:23px;font-weight:800;line-height:1;margin-bottom:4px;color:var(--ink)} .stat-sub{font-size:10px;color:var(--ink-muted)} .stat-sub.up{color:var(--accent2-dark)}.stat-sub.down{color:var(--accent-red)} /* ---- PANELS / TABLES / LISTS ---- */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-sm)} .panel-title{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:9px;color:var(--ink)} .panel-title i{color:var(--accent);font-size:13px} .panel-title .spacer,.spacer{margin-left:auto} .panel-link{font-size:12px;color:var(--accent-dark);text-decoration:none;font-weight:700} .panels-two{display:block} .data-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .data-table table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px} .data-table th{text-align:left;padding:10px 12px;color:var(--ink-faint);font-weight:700;font-size:10px; text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)} .data-table td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap} .data-table tr:hover td{background:var(--surface-2)} .pill{padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;display:inline-block} .pill.ok{background:rgba(16,185,129,.12);color:var(--accent2-dark)} .pill.warn{background:rgba(234,179,8,.14);color:#A16207} .pill.bad{background:rgba(239,68,68,.10);color:var(--accent-red)} .list-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px} .list-row:last-child{border-bottom:none} .list-row .r{text-align:right} .muted{color:var(--ink-faint)} .empty-state{text-align:center;color:var(--ink-faint);padding:34px 16px} .empty-state i{font-size:34px;opacity:.3;display:block;margin-bottom:10px} /* ---- BUTTONS ---- */ .ui-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-sm);border:1px solid transparent; font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s} .ui-btn.primary{background:#fff;color:var(--accent-dark)} .ui-btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.14)} .ui-btn.ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff} .ui-btn.ghost:hover{background:rgba(255,255,255,.26)} .ui-btn.blue{background:var(--grad-blue);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.3)} .ui-btn.blue:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(37,99,235,.4)} /* ---- QUICK ACTIONS — small icon tiles, 2 per row on phones ---- */ .quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px} .quick-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:14px 6px;text-align:center;text-decoration:none;color:var(--ink-muted);font-size:11px;font-weight:600;transition:all .2s; display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--shadow-sm)} .quick-item:hover{border-color:rgba(37,99,235,.35);color:var(--accent-dark);transform:translateY(-3px);box-shadow:var(--shadow)} .qi-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:15px; background:rgba(37,99,235,.10);color:var(--accent-dark)} .quick-item:hover .qi-icon{background:var(--grad-blue);color:#fff} /* ---- FLASH ---- */ .flash{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:14px;font-size:13px;font-weight:600} .flash-success{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:var(--accent2-dark)} .flash-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);color:var(--accent-red)} /* ---- FLOATING BOTTOM NAV + FAB (mobile — like the reference app) ---- */ .bottom-nav{display:none;position:fixed;bottom:10px;left:10px;right:calc(var(--fab-size) + 26px);height:var(--bottomnav-h); background:rgba(255,255,255,.97);border:1px solid var(--line);backdrop-filter:blur(20px);z-index:300;align-items:stretch; border-radius:20px;box-shadow:0 14px 34px rgba(15,23,42,.16);padding:0 4px} .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; text-decoration:none;color:var(--ink-faint);font-size:9px;font-weight:600;border-radius:14px;margin:6px 2px;transition:all .18s} .bn-item i{font-size:15px} .bn-item.active{color:#fff;background:var(--grad-blue);box-shadow:0 6px 14px rgba(37,99,235,.35)} .bn-gap{display:none} .menu-toggle{display:none;position:fixed;right:10px;bottom:calc(10px + (var(--bottomnav-h) - var(--fab-size))/2); width:var(--fab-size);height:var(--fab-size);background:var(--grad-blue); border:none;border-radius:16px;cursor:pointer;align-items:center;justify-content:center;z-index:400;box-shadow:0 10px 24px rgba(37,99,235,.45)} .ham-bars{width:20px;height:15px;display:flex;flex-direction:column;justify-content:space-between} .ham-bars span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .32s,opacity .22s} .menu-toggle.open .ham-bars span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .menu-toggle.open .ham-bars span:nth-child(2){opacity:0} .menu-toggle.open .ham-bars span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* ---- RESPONSIVE ---- */ @media(min-width:768px){ .sidebar{left:0} .main-content{margin-left:var(--sidebar-w)} .top-bar{padding:0 26px} .content-container{padding:26px 30px 40px} .stats-grid{grid-template-columns:repeat(4,1fr);gap:16px} .stat-value{font-size:28px} .quick-grid{grid-template-columns:repeat(6,1fr);gap:12px} .panels-two{display:grid;grid-template-columns:1fr 1fr;gap:18px} .panels-two .panel{margin-bottom:0} } @media(max-width:767px){ .bottom-nav{display:flex} .menu-toggle{display:flex} html,body{max-width:100%;overflow-x:hidden} } /* ========================================================================== HARDENING — the shell skin must win over any legacy per-page inline CSS. These lock the skin-critical properties so no old page style can break the unified design. ========================================================================== */ .top-bar{background:var(--grad-blue) !important;border-radius:0 !important;border-bottom:none !important; box-shadow:0 10px 26px rgba(37,99,235,.25) !important;margin:0 !important} .top-bar .page-title h1,.page-title h1{color:#fff !important} .top-bar .page-title p,.page-title p{color:rgba(255,255,255,.78) !important} .top-bar .user-avatar,.user-avatar{background:#fff !important;color:var(--accent-dark) !important; box-shadow:none !important} .sidebar{background:var(--sb-bg) !important} .sidebar.admin{background:var(--grad-navy) !important} .bottom-nav{background:rgba(255,255,255,.97) !important} body{background:var(--page) !important} /* ========================================================================== MOBILE APP-GRADE HARDENING (phones < 768px) 1. Stat/KPI boxes: ALWAYS exactly two small fixed boxes per row. 2. No cut information: every table scrolls sideways inside itself. 3. Top bar wraps instead of clipping its buttons. ========================================================================== */ @media(max-width:767px){ .stats-grid,.stats,.kpis,.summary-cards{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important} .stats-grid>*,.stats>*,.kpis>*,.summary-cards>*{min-width:0 !important} .stat-card,.kpi,.summary-card{padding:12px !important;border-radius:14px !important} .stat-card .v,.kpi .v,.stat-card .value,.summary-card .value{font-size:19px !important;line-height:1.15} .stat-card .label,.stat-card .l,.kpi .l,.summary-card .label{font-size:10px !important;letter-spacing:.4px} .summary-card .sub{font-size:9px !important} .stat-value{font-size:19px !important} .stat-label{font-size:9px !important} .main-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .main-content table::-webkit-scrollbar{height:5px} .main-content table::-webkit-scrollbar-thumb{background:rgba(37,99,235,.35);border-radius:4px} .main-content{margin-left:0 !important;max-width:100vw;overflow-x:hidden} .main-content img,.main-content canvas{max-width:100% !important} .top-bar{flex-wrap:wrap;height:auto !important;min-height:54px;padding:10px 14px !important;gap:8px;row-gap:6px} .page-title h1{font-size:15px !important} .page-title p{font-size:10.5px !important} .top-right{flex-wrap:wrap;gap:6px} .top-right .ui-btn,.top-bar .btn{padding:8px 12px !important;font-size:12px !important} .filters-bar{padding:12px !important} .search-input{min-width:0 !important;width:100%} } @media(min-width:768px){ .main-content{margin-left:var(--sidebar-w) !important} } /* Sidebar open on mobile: lock page scroll behind the menu */ body.nav-open{overflow:hidden !important} /* ========================================================================== MENU + GRID GUARANTEES — no page CSS may break these ========================================================================== */ /* The slide-in menu ALWAYS appears above everything when opened */ .sidebar{z-index:1200 !important} .sidebar.active{left:0 !important;visibility:visible !important;transform:none !important;display:flex !important} .sidebar-overlay{z-index:1199 !important} .menu-toggle{z-index:1300 !important} /* Stat grids can never push wider than the screen (minmax(0) beats long numbers) */ .stats-grid,.stats,.kpis{max-width:100%} @media(min-width:768px){ .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important} .stats,.kpis{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;gap:14px !important} .stats>*,.kpis>*,.stats-grid>*{min-width:0 !important} } /* Tablet / landscape phones (768–1099px): keep 4 small columns, not cut */ @media(min-width:768px) and (max-width:1099px){ .stat-card,.kpi{padding:14px 12px !important} .stat-value,.stat-card .v,.kpi .v{font-size:20px !important} } /* Compact stat icons on phones so boxes stay SMALL and fixed */ @media(max-width:767px){ .stat-icon{width:26px !important;height:26px !important;font-size:11px !important;border-radius:8px !important} .stat-header{margin-bottom:6px !important} .stat-sub{font-size:9px !important} .stat-card,.kpi{box-shadow:var(--shadow-sm) !important} .panel{padding:14px !important} .panel-title{font-size:13px !important} .content-container{padding:12px 10px calc(var(--bottomnav-h) + 34px) !important} } /* Grid children may shrink below content width (stops tables stretching columns) */ @media(max-width:767px){ .main-content .grid>*,.main-content [class*="-grid"]>*,.main-content .panels-two>*{min-width:0 !important} } /* Bare h1/p inside the gradient top bar (legacy pages) are always white */ .top-bar h1{color:#fff !important;font-size:16px !important} .top-bar>p,.top-bar p{color:rgba(255,255,255,.8) !important;font-size:11px !important} /* ========================================================================== CHARTS — make every admin/app chart render correctly (no giant blocks, no huge empty boxes). Applies over each page's inline styles. ========================================================================== */ /* CSS bar chart (.bars): a single month must NOT stretch to full width. */ .bars{display:flex !important;align-items:flex-end !important;justify-content:flex-start !important; gap:16px !important;height:180px !important;padding:10px 4px 0 !important;overflow-x:auto;-webkit-overflow-scrolling:touch} .bars .col{flex:0 0 auto !important;width:56px !important;max-width:64px !important; display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%} .bars .bar{width:38px !important;max-width:38px !important; background:linear-gradient(180deg,#3B82F6,#1D4ED8) !important;border-radius:8px 8px 0 0;min-height:4px} .bars .amt{font-size:11px;color:#374151;margin-bottom:6px;white-space:nowrap} .bars .mon{font-size:11px;color:#9ca3af;margin-top:8px;white-space:nowrap} /* Chart.js canvases: constrain height so they never become giant empty boxes. */ .chart-card,.card{min-width:0} .chart-card canvas,.card canvas,canvas.chartjs-render-monitor{max-height:260px !important} .chart-card{position:relative} @media(max-width:767px){ .chart-card canvas,.card canvas{max-height:220px !important} .bars{height:150px !important} .charts-row{grid-template-columns:1fr !important;gap:12px !important} } /* Fixed-height wrapper for Chart.js canvases (works with maintainAspectRatio:false) */ .chart-wrap{position:relative;height:240px;width:100%} .chart-wrap canvas{position:absolute;inset:0;width:100% !important;height:100% !important} @media(max-width:767px){ .chart-wrap{height:200px} }