/* ============================================================ PPC Team Tracker -- design system (V2) CSS variables drive both the light theme (default) and the dark theme (toggled via [data-theme="dark"] on ), so every page just uses var(--x) and gets both for free. ============================================================ */ :root{ color-scheme: light; --brand:#C8102E; /* overridden inline per-page from company_settings */ --brand-2:#F2A93B; --bg:#F2F4F8; --card:#FFFFFF; --text:#1F2328; --text-soft:#6B7280; --border:#E5E7EB; --sidebar:#111A33; --sidebar-text:#9AA3BD; --sidebar-active-bg: rgba(200,16,46,0.15); --green:#16A34A; --green-bg:#DCFCE7; --green-text:#15803D; --amber:#F2A93B; --amber-bg:#FEF3C7; --amber-text:#B45309; --red-bg:#FEE2E2; --red-text:#B91C1C; --blue-bg:#DBEAFE; --blue-text:#1D4ED8; --purple-bg:#EDE9FE; --purple-text:#6D28D9; } [data-theme="dark"]{ color-scheme: dark; --bg:#0E0F12; --card:#1A1B1F; --text:#F3F4F6; --text-soft:#9CA3AF; --border:#2A2B30; --sidebar:#0A0E1C; --sidebar-text:#828AA3; --sidebar-active-bg: rgba(200,16,46,0.22); } *{ box-sizing: border-box; } body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); transition: background .15s, color .15s; } a{ color: var(--brand); } /* ---------- legacy wrappers (install.php / standalone pages) ---------- */ .wrap{ max-width:1080px; margin:0 auto; padding:20px 20px 60px; } .auth-wrap{ max-width:380px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; } /* ---------- app shell (sidebar + header + content) ---------- */ .shell{ display:flex; min-height:100vh; } .sidebar{ width:252px; background:var(--sidebar); color:var(--sidebar-text); display:flex; flex-direction:column; flex-shrink:0; transition:width .2s; } .sidebar.collapsed{ width:74px; } .sb-logo{ display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,0.08); } .sb-logo .mark{ width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:15px; } .sb-logo-img{ width:36px; height:36px; border-radius:9px; object-fit:contain; background:#fff; flex-shrink:0; } .sb-logo .word{ font-weight:800; font-size:14.5px; color:#fff; letter-spacing:.4px; white-space:nowrap; overflow:hidden; } .sb-logo .word small{ display:block; font-weight:600; font-size:10px; color:var(--brand-2); letter-spacing:1.4px; text-transform:none; } .sidebar.collapsed .word{ display:none; } .sb-nav{ flex:1; padding:14px 10px; overflow-y:auto; } .sb-section-label{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:#5b6178; padding:14px 12px 6px; } .sidebar.collapsed .sb-section-label{ display:none; } .sb-link{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--sidebar-text); text-decoration:none; margin-bottom:2px; cursor:pointer; } .sb-link svg{ width:18px; height:18px; flex-shrink:0; } .sb-link:hover{ background:rgba(255,255,255,0.06); color:#fff; } .sb-link.active{ background:var(--sidebar-active-bg); color:#fff; border-left:3px solid var(--brand); padding-left:9px; } .sb-link.soon{ opacity:.45; cursor:default; } .sb-link.soon:hover{ background:transparent; color:var(--sidebar-text); } .soon-badge{ margin-left:auto; font-size:9px; background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:99px; letter-spacing:.4px; } .sidebar.collapsed .sb-link span.label, .sidebar.collapsed .soon-badge{ display:none; } .sb-company{ padding:16px 18px; border-top:1px solid rgba(255,255,255,0.08); font-size:11.5px; line-height:1.9; color:#838aa3; } .sidebar.collapsed .sb-company{ display:none; } .sb-company b{ color:#e3e5ee; display:block; font-size:12.5px; margin-bottom:3px; } .main{ flex:1; min-width:0; } .topbar{ display:flex; align-items:center; justify-content:space-between; padding:13px 24px; background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; gap:16px; } .topbar .left{ display:flex; align-items:center; gap:14px; } .topbar .left button{ background:none; border:none; cursor:pointer; color:var(--text-soft); padding:6px; border-radius:6px; } .topbar .left button:hover{ background:var(--bg); } .topbar h1{ font-size:17px; margin:0; font-weight:700; } .topbar .right{ display:flex; align-items:center; gap:12px; } .datebox{ display:flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:9px; padding:7px 12px; font-size:12.5px; font-weight:600; color:var(--text-soft); } .datebox svg{ width:15px; height:15px; } .icon-btn{ width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-soft); position:relative; flex-shrink:0; } .icon-btn:hover{ background:var(--bg); } .icon-btn svg{ width:17px; height:17px; } .profile-wrap{ position:relative; } .profile{ display:flex; align-items:center; gap:8px; cursor:pointer; background:none; border:none; padding:0; } .avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; } .profile .pname{ display:block; font-size:13px; font-weight:700; line-height:1.2; color:var(--text); text-align:left; } .profile .prole{ display:block; font-size:11px; color:var(--text-soft); text-align:left; } .profile-menu{ display:none; position:absolute; right:0; top:calc(100% + 8px); background:var(--card); border:1px solid var(--border); border-radius:10px; min-width:170px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:20; } .profile-menu.open{ display:block; } .profile-menu a{ display:block; padding:8px 10px; border-radius:7px; font-size:13px; color:var(--text); text-decoration:none; } .profile-menu a:hover{ background:var(--bg); } .content{ padding:20px 24px 60px; max-width:1320px; } /* ---------- KPI cards ---------- */ .kpi-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:20px; } @media (max-width:1100px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .kpi-row{ grid-template-columns:1fr; } } .kpi-row.kpi-row-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:1100px){ .kpi-row.kpi-row-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .kpi-row.kpi-row-4{ grid-template-columns:1fr; } } .kpi-row.kpi-row-3{ grid-template-columns:repeat(3,1fr); } @media (max-width:1100px){ .kpi-row.kpi-row-3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .kpi-row.kpi-row-3{ grid-template-columns:1fr; } } .kpi{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; } .kpi .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .kpi .ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; } .kpi .ic svg{ width:17px; height:17px; } .kpi .delta{ font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:99px; white-space:nowrap; } .delta.up{ color:var(--green-text); background:var(--green-bg); } .delta.down{ color:var(--red-text); background:var(--red-bg); } .delta.warn{ color:var(--amber-text); background:var(--amber-bg); } .kpi .label{ font-size:12px; color:var(--text-soft); font-weight:600; margin-bottom:3px; } .kpi .value{ font-size:20px; font-weight:800; letter-spacing:-.3px; } .kpi .sub{ font-size:11.5px; color:var(--text-soft); margin-top:6px; } .progress{ height:6px; background:var(--bg); border-radius:99px; margin-top:8px; overflow:hidden; } .progress > div{ height:100%; border-radius:99px; } .skeleton{ background:linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%); background-size:200% 100%; animation:skeleton-pulse 1.3s ease-in-out infinite; border-radius:8px; } @keyframes skeleton-pulse{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } /* ---------- section headings / callouts / pills ---------- */ .sec-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:4px; } .sec-h h2{ font-size:15px; margin:0; font-weight:700; border-left:3px solid var(--brand); padding-left:9px; } .callout{ background:rgba(37,99,235,0.07); border:1px solid rgba(37,99,235,0.18); color:#1d4ed8; font-size:12.5px; border-radius:10px; padding:10px 14px; margin-bottom:6px; } [data-theme="dark"] .callout{ color:#93c5fd; } .field-row{ display:flex; align-items:center; gap:12px; margin:14px 0 16px; flex-wrap:wrap; } .field-row label{ font-size:12.5px; font-weight:600; color:var(--text-soft); } .pill{ font-size:11px; font-weight:700; color:var(--brand); background:rgba(200,16,46,0.1); padding:5px 10px; border-radius:99px; } .phase-tag{ font-size:10px; font-weight:700; color:#fff; background:var(--sidebar); padding:3px 9px; border-radius:99px; letter-spacing:.3px; } .badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; } .badge.active{ color:var(--green-text); background:var(--green-bg); } .badge.inactive{ color:var(--text-soft); background:var(--border); } /* ---------- buttons ---------- */ .btn{ border:none; border-radius:9px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; } .btn-primary{ background:var(--brand); color:#fff; } .btn-primary:hover{ filter:brightness(0.92); } .btn-secondary{ background:var(--card); color:var(--text); border:1px solid var(--border); } .btn-secondary:hover{ background:var(--bg); } .btn-ghost{ background:rgba(200,16,46,0.08); color:var(--brand); } .btn-danger{ background:var(--card); color:#dc2626; border:1px solid #fecaca; padding:5px 10px; font-size:12px; } .btn-danger:hover{ background:#fef2f2; } .btn-small{ padding:5px 10px; font-size:12px; } /* ---------- cards / forms / tables ---------- */ .card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:18px; } .card h2{ font-size:15px; margin:0 0 4px; } .card .sub{ color:var(--text-soft); font-size:12px; margin:0 0 14px; } .row-between{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; } .field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .field-grid label, label.block{ font-size:11px; color:var(--text-soft); display:block; margin-bottom:3px; font-weight:600; } input, select, textarea{ font-family:inherit; background:var(--card); color:var(--text); } .field-grid input, .form-field input, .form-field select{ width:100%; border:1px solid var(--border); border-radius:7px; padding:7px 9px; font-size:13px; } .form-field{ margin-bottom:12px; } textarea.paste-box{ width:100%; min-height:78px; resize:vertical; border:1px solid var(--border); border-radius:7px; padding:6px 8px; font-size:12px; margin-bottom:8px; } table{ width:100%; border-collapse:collapse; font-size:12.5px; } table th, table td{ padding:9px 8px; border-bottom:1px solid var(--border); text-align:left; } table th{ color:var(--text-soft); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; } .status{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; } .status.released{ color:var(--green-text); background:var(--green-bg); } .status.pending{ color:var(--amber-text); background:var(--amber-bg); } .status.ready{ color:var(--blue-text); background:var(--blue-bg); } .snap th, .snap td{ text-align:center; } .snap th{ color:#fff; text-transform:none; font-size:12px; } .snap td:first-child, .snap th:first-child{ text-align:left; color:var(--text-soft); font-weight:600; } .snapshot-table th{ font-weight:700; color:#fff; } .grid2{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; margin-bottom:18px; } @media (max-width:1000px){ .grid2{ grid-template-columns:1fr; } } .member-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:16px 0 10px; } @media (max-width:800px){ .member-cards{ grid-template-columns:1fr; } } .mcard{ border:1px solid var(--border); border-radius:12px; overflow:hidden; } .mcard .head{ padding:10px 14px; font-weight:700; font-size:13.5px; color:#fff; display:flex; justify-content:space-between; align-items:center; } .mcard .body{ padding:12px 14px; background:var(--bg); } .mcard textarea.paste-box{ width:100%; font-size:11.5px; border:1px solid var(--border); border-radius:6px; padding:7px 9px; min-height:58px; background:var(--card); color:var(--text); resize:vertical; font-family:inherit; margin-bottom:0; } .mini-fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; font-size:12px; } .mini-fields div b{ display:block; color:var(--text-soft); font-weight:600; margin-bottom:3px; font-size:10.5px; } .mini-fields div input{ width:100%; display:block; border:1px solid var(--border); border-radius:7px; padding:6px 8px; background:var(--card); font-weight:600; font-size:12.5px; color:var(--text); } .add-another{ display:block; text-align:center; border:1.5px dashed var(--border); border-radius:10px; padding:10px; margin-top:14px; color:var(--brand); font-weight:700; font-size:12.5px; cursor:pointer; text-decoration:none; } .netgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; text-align:center; } @media (max-width:900px){ .netgrid{ grid-template-columns:repeat(2,1fr); } } .netgrid .icwrap{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; } .netgrid .icwrap svg{ width:18px; height:18px; } .netgrid .n{ font-size:17px; font-weight:800; } .netgrid .l{ font-size:11.5px; color:var(--text-soft); margin-top:2px; } .co-badge{ display:flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border:1px solid var(--border); border-radius:10px; } .co-badge .ic{ width:30px; height:30px; border-radius:8px; background:rgba(200,16,46,0.1); color:var(--brand); display:flex; align-items:center; justify-content:center; } .co-badge .ic svg{ width:15px; height:15px; } .co-badge .t1{ font-size:12.5px; font-weight:700; line-height:1.2; } .co-badge .t2{ font-size:10.5px; color:var(--text-soft); } .dot{ position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--brand); border:2px solid var(--card); } .summary-box{ background:var(--bg); border:1px dashed var(--border); border-radius:10px; padding:14px 16px; margin-top:14px; font-size:13px; line-height:1.7; } .summary-box strong{ font-size:14px; } .chart-wrap{ height:280px; margin-top:8px; } .stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; border-top:1px solid var(--border); padding-top:14px; } @media (max-width:600px){ .stat-strip{ grid-template-columns:repeat(2,1fr); } } .stat-strip .s{ text-align:center; } .stat-strip .s .l{ font-size:11px; color:var(--text-soft); margin-bottom:3px; } .stat-strip .s .v{ font-size:14.5px; font-weight:800; } .empty-state{ text-align:center; color:var(--text-soft); padding:30px 10px; font-size:13px; } .alert{ border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:14px; } .alert-error{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; } .alert-success{ background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; } .alert-info{ background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; } .swatch{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; } .member-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; } .member-card{ border-radius:10px; overflow:hidden; border:1px solid var(--border); } .member-card .head{ padding:9px 14px; font-weight:700; font-size:13.5px; color:#fff; display:flex; justify-content:space-between; align-items:center; } .member-card .body{ padding:12px 14px; background:var(--bg); } .member-card .photo{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.5); } .creds-table td, .creds-table th{ text-align:left; } code.pw{ background:#fef9c3; color:#1f2328; padding:2px 6px; border-radius:4px; font-weight:700; } /* ---------- Phase 4: Network Sales matrix ---------- */ .matrix-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; } .matrix-wrap table{ font-size:12px; margin:0; } .matrix-wrap th, .matrix-wrap td{ white-space:nowrap; padding:6px 7px; } .matrix-wrap th:first-child, .matrix-wrap td:first-child{ position:sticky; left:0; background:var(--card); z-index:2; text-align:left; box-shadow:1px 0 0 var(--border); } .matrix-wrap input.cell{ width:74px; border:1px solid var(--border); border-radius:6px; padding:4px 5px; font-size:11.5px; text-align:right; } .matrix-wrap tr.totals-row td{ font-weight:700; background:var(--bg); } .matrix-wrap tr.totals-row td:first-child{ background:var(--bg); } .matrix-wrap td.total-cell{ font-weight:700; } .inline-add{ display:flex; align-items:center; gap:8px; margin-top:10px; } .inline-add input{ border:1px solid var(--border); border-radius:7px; padding:6px 9px; font-size:12.5px; width:200px; } /* legacy header, kept harmless in case any page still references it */ header.app-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; flex-wrap:wrap; gap:12px; } header.app-header h1{ font-size:20px; margin:0 0 4px; } nav.app-nav{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; } nav.app-nav a{ color:var(--text); text-decoration:none; font-size:13px; font-weight:600; } /* ============================================================ V4 UI additions -- forms, responsive tables, pagination, toasts, dark-mode-aware alerts, and a mobile off-canvas sidebar. All additive; existing class rules are untouched. ============================================================ */ /* ---- form + filter grids used by the V4 module pages ---- */ .form-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px 14px; margin-bottom:14px; } .filter-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px 12px; align-items:end; } .form-grid .form-field-wide, .filter-grid .form-field-wide{ grid-column:span 2; } .form-grid .form-field, .filter-grid .form-field{ margin-bottom:0; } .form-field input[type="text"], .form-field input[type="number"], .form-field input[type="date"], .form-field input[type="month"], .form-field input[type="search"], .form-field input[type="file"], .form-field select, .form-field textarea{ width:100%; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:13px; background:var(--card); color:var(--text); transition:border-color .12s, box-shadow .12s; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(200,16,46,.14); } @media (max-width:900px){ .form-grid{ grid-template-columns:repeat(2,1fr); } .filter-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .form-grid, .filter-grid{ grid-template-columns:1fr; } .form-grid .form-field-wide, .filter-grid .form-field-wide{ grid-column:span 1; } } .table-search{ border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:13px; background:var(--card); color:var(--text); min-width:170px; } /* ---- horizontal-scroll wrapper so wide tables never blow out layout ---- */ .table-responsive{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ---- pagination ---- */ .pagination{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; } .page-link{ min-width:34px; text-align:center; padding:6px 11px; border:1px solid var(--border); border-radius:8px; font-size:12.5px; font-weight:600; color:var(--text); text-decoration:none; } .page-link:hover{ background:var(--bg); } .page-link.active{ background:var(--brand); color:#fff; border-color:var(--brand); } /* ---- toast / flash animation + auto-dismiss ---- */ [data-toast]{ animation:toastIn .3s ease; } @keyframes toastIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } } .alert.toast-hide{ animation:toastOut .45s ease forwards; } @keyframes toastOut{ to{ opacity:0; transform:translateY(-8px); } } /* ---- dark-mode-aware alerts + danger button (existing ones were light-only) ---- */ [data-theme="dark"] .alert-error{ background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.4); color:#fca5a5; } [data-theme="dark"] .alert-success{ background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.4); color:#86efac; } [data-theme="dark"] .alert-info{ background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.4); color:#93c5fd; } [data-theme="dark"] .btn-danger{ background:transparent; border-color:rgba(220,38,38,.45); color:#f87171; } [data-theme="dark"] .btn-danger:hover{ background:rgba(220,38,38,.12); } /* ---- loading bar shown during navigation/submits ---- */ #nprogress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--brand),var(--brand-2)); z-index:9999; transition:width .2s ease, opacity .3s ease; opacity:0; } #nprogress.active{ opacity:1; } /* ---- responsive table: stack into cards on phones ---- */ @media (max-width:640px){ .table-responsive table{ border:0; font-size:13px; } .table-responsive thead{ position:absolute; left:-9999px; top:-9999px; } .table-responsive tr{ display:block; border:1px solid var(--border); border-radius:10px; margin-bottom:10px; padding:4px 12px; background:var(--card); } .table-responsive td{ display:flex; align-items:center; justify-content:space-between; gap:14px; border:0; border-bottom:1px solid var(--border); padding:8px 0; text-align:right; } .table-responsive tr td:last-child{ border-bottom:0; } .table-responsive td::before{ content:attr(data-label); font-weight:700; color:var(--text-soft); font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; text-align:left; } .table-responsive td[data-label="Actions"]{ justify-content:flex-end; padding-top:10px; } .table-responsive td[data-label="Actions"]::before{ content:""; } } /* ---- mobile off-canvas sidebar + overlay ---- */ .sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; } .sidebar-overlay.show{ display:block; } @media (max-width:768px){ .sidebar{ position:fixed; left:0; top:0; bottom:0; z-index:50; width:252px; transform:translateX(-100%); transition:transform .25s ease; } .sidebar.mobile-open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.3); } /* ignore the desktop "collapsed" narrow mode on phones -- show full labels */ .sidebar.collapsed{ width:252px; } .sidebar.collapsed .word{ display:block; } .sidebar.collapsed .sb-link span.label{ display:inline; } .sidebar.collapsed .sb-section-label{ display:block; } .sidebar.collapsed .sb-company{ display:block; } .sidebar.collapsed .soon-badge{ display:inline-block; } .content{ padding:16px 14px 50px; } .topbar{ padding:11px 14px; } .datebox{ display:none; } .topbar h1{ font-size:15.5px; } } @media (max-width:380px){ .kpi .value{ font-size:18px; } .profile .pname, .profile .prole{ max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } } /* legacy tables (not built with data-label stacking) just scroll within their card on small screens, so they never push the page wider than the viewport. */ .table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ============================================================ V4.1 dashboard date filter bar ============================================================ */ .dash-filter{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; } .df-presets{ display:flex; flex-wrap:wrap; gap:6px; } .df-presets button{ border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; transition:background .12s, color .12s, border-color .12s; } .df-presets button:hover{ background:var(--bg); } .df-presets button.active{ background:var(--brand); color:#fff; border-color:var(--brand); } .df-select{ display:none; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:13px; background:var(--card); color:var(--text); width:100%; } .df-custom{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .df-custom label{ font-size:11.5px; font-weight:600; color:var(--text-soft); display:flex; flex-direction:column; gap:3px; } .df-custom input[type="date"]{ border:1px solid var(--border); border-radius:8px; padding:6px 9px; font-size:12.5px; background:var(--card); color:var(--text); } .df-showing{ font-size:12.5px; color:var(--text-soft); font-weight:600; } .df-showing strong{ color:var(--text); } .df-spinner{ font-size:12px; color:var(--brand); font-weight:700; margin-left:auto; } /* On phones/tablets the chip row becomes a single compact dropdown. */ @media (max-width:768px){ .df-presets{ display:none; } .df-select{ display:block; } .dash-filter{ flex-direction:column; align-items:stretch; } .df-custom{ justify-content:space-between; } .df-spinner{ margin-left:0; } } /* =========================================================================== V5 additions: Network Sales status, filters, lifetime pivot, PPC date filter =========================================================================== */ /* Approved reuses the green "released" pill; add the red Reversal pill. */ .status.approved{ color:var(--green-text); background:var(--green-bg); } .status.reversal{ color:var(--red-text); background:var(--red-bg); } /* Preset chip rows rendered as links (PPC date filter on dashboard/member). */ .df-presets a{ border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:8px; padding:7px 11px; font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none; line-height:1; display:inline-block; } .df-presets a:hover{ background:var(--bg); } .df-presets a.active{ background:var(--brand); color:#fff; border-color:var(--brand); } /* Inline "edit day" date picker inside the filter bar. */ .df-editpick{ display:flex; align-items:center; gap:8px; } .df-inline{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-soft); } .df-inline input[type="date"]{ border:1px solid var(--border); border-radius:8px; padding:6px 9px; font-size:12.5px; background:var(--card); color:var(--text); } /* Keep these chip rows visible (and horizontally scrollable) on mobile, since they have no dropdown fallback like the Business Overview filter does. */ @media (max-width:768px){ .df-presets.keep-mobile{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; } .df-presets.keep-mobile a{ flex:0 0 auto; } } /* Network Sales filter bar. */ .filter-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; } .filter-bar > label{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--text-soft); text-transform:uppercase; letter-spacing:.3px; } .filter-bar select, .filter-bar input[type="date"]{ border:1px solid var(--border); border-radius:8px; padding:7px 9px; font-size:12.5px; background:var(--card); color:var(--text); min-width:130px; } .filter-bar .f-custom{ display:flex; gap:10px; align-items:flex-end; } .filter-bar .f-custom label{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--text-soft); } @media (max-width:560px){ .filter-bar{ flex-direction:column; align-items:stretch; } .filter-bar select, .filter-bar input[type="date"]{ width:100%; } } /* Per-amount status select inside the entry matrix cells. */ .matrix-wrap td .cell-status{ display:block; margin-top:4px; width:74px; border:1px solid var(--border); border-radius:6px; padding:2px 3px; font-size:10.5px; font-weight:700; background:var(--card); color:var(--text); } .cell-status.st-pending{ color:var(--amber-text); border-color:var(--amber); } .cell-status.st-approved{ color:var(--green-text); border-color:var(--green); } .cell-status.st-reversal{ color:var(--red-text); border-color:#ef4444; } .matrix-wrap td .cell-badge{ margin-top:4px; } /* Lifetime-column pivot table. */ .pivot-table{ font-size:12.5px; width:100%; } .pivot-table th, .pivot-table td{ white-space:nowrap; text-align:right; padding:8px 10px; } .pivot-table th:first-child, .pivot-table td:first-child{ text-align:left; position:sticky; left:0; background:var(--card); box-shadow:1px 0 0 var(--border); } .pivot-table thead th{ background:var(--bg); } .pivot-table tr.totals-row td{ background:var(--bg); } .pivot-table th:last-child, .pivot-table td:last-child{ background:rgba(200,16,46,0.04); } /* ===== V5.1 currency selector (topbar) ===== */ .cur-select{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--card); border-radius:10px; padding:4px 8px; color:var(--text-soft); } .cur-select svg{ width:16px; height:16px; flex:0 0 auto; } .cur-select select{ border:0; background:transparent; color:var(--text); font-size:13px; font-weight:700; cursor:pointer; padding:2px 2px; outline:none; } .cur-select select:focus{ outline:none; } @media (max-width:560px){ .topbar .datebox{ display:none; } .cur-select{ padding:4px 6px; } } .usd-hint{ display:inline-block; font-size:11px; font-weight:700; color:var(--amber-text); background:var(--amber-bg); border-radius:6px; padding:1px 7px; margin-left:4px; } /* =========================================================================== V5.1.1 — tidy up the PPC "edit day + presets" filter row (admin & member) =========================================================================== */ .dash-filter .df-editpick{ align-items:center; gap:8px; padding-right:14px; margin-right:2px; border-right:1px solid var(--border); } .dash-filter .df-inline{ gap:8px; white-space:nowrap; } .dash-filter .df-inline input[type="date"]{ font-weight:600; } .df-presets a{ box-shadow:0 1px 0 rgba(0,0,0,.02); } .df-presets a.active{ box-shadow:0 1px 6px rgba(200,16,46,.25); } @media (max-width:768px){ /* stacked on phones: drop the divider, let the date picker sit on its own row */ .dash-filter .df-editpick{ border-right:0; padding-right:0; margin-right:0; width:100%; } } /* ===== V5.1.4 cost-currency entry (daily updates) ===== */ .cost-ccy-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 8px; } .cost-ccy-label{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text-soft); white-space:nowrap; } .cost-ccy{ border:1px solid var(--border); border-radius:8px; padding:5px 8px; font-size:12.5px; font-weight:700; background:var(--card); color:var(--text); cursor:pointer; } .cost-ccy-note{ font-size:11.5px; color:var(--text-soft); } .usd-eq{ display:none; margin-top:4px; font-size:11px; font-weight:700; color:var(--green-text); } .usd-eq.show{ display:block; } /* ===== V5.2 auto-calculated total fields ===== */ .auto-field{ background:var(--bg)!important; font-weight:700; color:var(--text-soft); cursor:not-allowed; } .auto-tag{ display:inline-block; margin-left:5px; font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--green-text); background:var(--green-bg); border-radius:5px; padding:1px 5px; vertical-align:middle; } /* ===== V5.2 settings: multi-assign + delete + all-time toggle ===== */ .assign-form{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .assign-checks{ display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; } .assign-checks label{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; } .assign-checks input[type="checkbox"]{ width:15px; height:15px; } .assign-save{ flex:0 0 auto; } .seg-toggle{ display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; } .seg-toggle a{ padding:7px 12px; font-size:12.5px; font-weight:700; color:var(--text-soft); text-decoration:none; background:var(--card); } .seg-toggle a + a{ border-left:1px solid var(--border); } .seg-toggle a.active{ background:var(--brand); color:#fff; } /* V7: Paid status pill for network sales (req #6) */ .status.paid{ background:#e0edff; color:#1d4ed8; } .st-paid{ color:#1d4ed8; } /* V7: 5-up KPI row for network status summary (Pending/Approved/Reversal/Paid/Total) */ .kpi-row.kpi-row-5{ grid-template-columns:repeat(5,1fr); } @media (max-width:1100px){ .kpi-row.kpi-row-5{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .kpi-row.kpi-row-5{ grid-template-columns:1fr; } } /* ===== V7 req #1: master-date calendar popover ===== */ .datebox-wrap{ position:relative; display:inline-flex; } button.datebox{ cursor:pointer; font:inherit; border:1px solid var(--border,#e5e7eb); background:var(--card,#fff); } button.datebox:hover{ background:var(--hover,#f5f5f7); } .datecal{ position:absolute; top:calc(100% + 8px); right:0; z-index:200; width:288px; background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.18); padding:14px; } .dc-head{ display:flex; align-items:center; gap:4px; margin-bottom:10px; } .dc-title{ flex:1; text-align:center; font-weight:800; font-size:14px; color:var(--text,#111); } .dc-nav{ border:1px solid var(--border,#e5e7eb); background:var(--card,#fff); color:var(--text,#111); border-radius:8px; width:28px; height:28px; cursor:pointer; font-size:15px; line-height:1; } .dc-nav:hover{ background:var(--hover,#f5f5f7); } .dc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .dc-dow{ text-align:center; font-size:11px; font-weight:700; color:var(--text-soft,#6b7280); padding:4px 0; } .dc-day{ border:none; background:transparent; color:var(--text,#111); border-radius:8px; height:32px; cursor:pointer; font-size:13px; } .dc-day:hover{ background:var(--hover,#f0f0f3); } .dc-day.dc-today{ box-shadow:inset 0 0 0 1px var(--border,#cbd5e1); font-weight:700; } .dc-day.dc-sel{ background:var(--brand,#C8102E); color:#fff; font-weight:700; } .dc-empty{ height:32px; } .dc-foot{ margin-top:10px; text-align:center; } .dc-today-btn{ border:1px solid var(--border,#e5e7eb); background:var(--card,#fff); color:var(--text,#111); border-radius:8px; padding:6px 14px; font-size:12.5px; font-weight:700; cursor:pointer; } .dc-today-btn:hover{ background:var(--hover,#f5f5f7); } /* =========================================================================== V7.1 — header/profile responsiveness, mobile tables, network All-Time pill =========================================================================== */ /* Header: never let the right-hand cluster overflow or clip the profile. */ .topbar{ flex-wrap:nowrap; } .topbar h1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .topbar .right{ min-width:0; flex-wrap:wrap; justify-content:flex-end; row-gap:8px; } .profile{ max-width:190px; } .profile .pname, .profile .prole{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* All-Time indicator pill in the Network Sales entry filter. */ .alltime-pill{ display:inline-flex; align-items:center; font-size:12px; font-weight:800; color:var(--brand); background:rgba(200,16,46,.08); border:1px solid var(--brand); border-radius:9px; padding:6px 12px; letter-spacing:.2px; } /* Keep the master-date calendar usable on phones (compact, not hidden). */ @media (max-width:560px){ .topbar{ padding:10px 12px; gap:10px; } .topbar .datebox{ display:inline-flex !important; padding:6px 9px; font-size:11px; } .topbar .datebox svg{ width:14px; height:14px; } .datecal{ right:auto; left:50%; transform:translateX(-50%); width:min(92vw,300px); } .profile .pname, .profile .prole{ display:none; } /* avatar only, no clipping */ .cur-select{ padding:4px 6px; } .cur-select select{ font-size:12px; } } @media (max-width:400px){ .topbar .datebox #masterDateLabel{ display:none; } /* icon-only on very small screens */ } /* Mobile tables: horizontal scroll fallback for any table not already wrapped in a .table-scroll / .matrix-wrap / .table-responsive container. */ @media (max-width:768px){ .card > table, table.tbl-mobile{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; } }