/* ================= DataGhoul — shared styles ================= */ :root{ --ink:#0f0f18; --panel:#181729; --panel-2:#1f1d35; --mint:#7ff0c0; --gold:#e8b563; --paper:#eeecf2; --muted:#928fa3; --hair: rgba(238,236,242,0.10); --danger:#ef8b7a; } /* ---------- Light theme (standard for Page 2 onward) ---------- Page 1 keeps the original dark theme; every page after it uses this light palette: white canvas, grey ribbon bands, soft beige for highlight panels. Apply by adding class="theme-light" to . */ body.theme-light{ --ink:#ffffff; --panel:#ffffff; --panel-2:#f1f1ee; --mint:#3b6ea5; --gold:#a8722e; --paper:#1d1d24; --muted:#6a6d75; --hair: rgba(20,20,30,0.10); --danger:#c0392b; --ribbon:#eef0f1; --beige:#f4ecdd; --lightblue:#e8eff5; } body.theme-light .topbar{ background:var(--ribbon); margin:0 -32px; padding:22px 32px 20px; border-bottom:1px solid var(--hair); } body.theme-light table.users-table thead tr{ background:var(--ribbon); } body.theme-light .modal-card{ border:1px solid var(--hair); box-shadow:0 12px 40px rgba(20,20,30,0.10); } body.theme-light .field input, body.theme-light .field select{ background:#ffffff; border:1px solid rgba(20,20,30,0.16); } body.theme-light .beige-panel{ background:var(--beige); border-radius:20px; padding:56px 48px; } @media (max-width:800px){ body.theme-light .topbar{ margin:0 -22px; padding:18px 22px 16px; } } /* ================= Left button rail (Page 2 onward) ================= Every future dashboard button goes in .side-nav as a .side-btn so they stay the same size/shape automatically — just add more elements, no per-button styling needed. */ .dash-layout{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start; padding:48px 0 80px; } .side-nav{ display:flex; flex-direction:column; gap:10px; background:var(--lightblue, var(--panel-2)); border:1px solid var(--hair); border-radius:16px; padding:16px; } .side-nav-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); padding:6px 8px 10px; } .side-btn{ display:flex; align-items:center; width:100%; min-height:44px; padding:0 16px; border-radius:10px; border:1px solid var(--hair); background:#ffffff; color:var(--paper); font-family:'Inter', sans-serif; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; transition:border-color 0.2s, background 0.2s; box-sizing:border-box; } .side-btn:hover{ border-color:var(--mint); background:var(--beige); } .dash-main{ display:flex; justify-content:flex-end; } .dash-panel-compact{ background:var(--beige); border-radius:18px; padding:32px 34px; max-width:420px; width:100%; text-align:left; } .dash-panel-compact .eyebrow{ justify-content:flex-start; margin-bottom:14px; } .dash-panel-compact h1{ font-family:'Fraunces', serif; font-weight:400; font-style:italic; font-size:21px; margin:0 0 12px; color:var(--paper); line-height:1.35; } .dash-panel-compact p{ color:var(--muted); font-size:14px; margin:0 0 20px; } @media (max-width:800px){ .dash-layout{ grid-template-columns:1fr; gap:20px; } .dash-main{ justify-content:flex-start; } .dash-panel-compact{ max-width:100%; } } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--ink); color:var(--paper); font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased; line-height:1.6; } ::selection{ background:var(--mint); color:#0f0f18; } .wrap{ max-width:1080px; margin:0 auto; padding:0 32px; } /* ---------- top mark ---------- */ .topbar{ display:flex; align-items:center; justify-content:space-between; padding:28px 0 0; gap:16px; flex-wrap:wrap; } .mark{ font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.14em; color:var(--muted); text-transform:uppercase; } .mark span{ color:var(--mint); } .topbar-left{ display:flex; align-items:center; gap:12px; } .topbar-logo{ display:flex; align-items:center; } .topbar-logo img{ height:56px; max-width:280px; object-fit:contain; display:block; } .topbar-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } /* ---------- buttons ---------- */ .btn{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; border-radius:999px; padding:10px 20px; border:1px solid var(--hair); background:transparent; color:var(--paper); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:border-color 0.2s, color 0.2s, background 0.2s; } .btn:hover{ border-color:var(--mint); color:var(--mint); } .btn-primary{ background:var(--mint); border-color:var(--mint); color:#0f0f18; font-weight:600; } .btn-primary:hover{ background:#93f5cc; color:#0f0f18; border-color:#93f5cc; } .btn-ghost{ border-color:transparent; color:var(--muted); padding:10px 8px; } .btn-ghost:hover{ color:var(--mint); } .btn-small{ padding:6px 14px; font-size:11.5px; } .btn-danger{ color:#c0392b !important; } .btn-danger:hover{ color:#e05a45 !important; } .btn-danger:hover{ border-color:var(--danger); color:var(--danger); } /* ---------- user chip / role badge ---------- */ .user-chip{ display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted); } .user-chip .who{ color:var(--paper); } .topbar-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid var(--hair); display:none; flex-shrink:0; } .role-badge{ display:inline-block; padding:3px 10px; border-radius:999px; border:1px solid rgba(127,240,192,0.35); color:var(--mint); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; } /* ---------- hero ---------- */ .hero{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; padding:64px 0 80px; } .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:0 0 22px; } .eyebrow::before{ content:""; display:inline-block; width:22px; height:1px; background:var(--gold); margin-right:10px; vertical-align:middle; } h1.slogan{ font-family:'Fraunces', serif; font-weight:500; font-style:italic; font-size:clamp(30px, 4vw, 46px); line-height:1.18; margin:0 0 28px; color:var(--paper); max-width:620px; } h1.slogan em{ font-style:normal; color:var(--mint); } .role-line{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px; } .name{ font-family:'Fraunces', serif; font-weight:400; font-size:26px; color:var(--paper); } .role{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--muted); letter-spacing:0.02em; } .hero-desc{ color:var(--muted); font-size:16px; max-width:520px; margin:0 0 28px; } /* ---------- photo signature ---------- */ .photo-stage{ position:relative; width:100%; max-width:400px; margin:0 auto; aspect-ratio:1/1; } .photo-stage svg.halo{ position:absolute; inset:0; width:100%; height:100%; } .photo-frame{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64%; height:64%; border-radius:50%; overflow:hidden; -webkit-mask-image: radial-gradient(circle at center, black 58%, rgba(0,0,0,0.55) 74%, transparent 92%); mask-image: radial-gradient(circle at center, black 58%, rgba(0,0,0,0.55) 74%, transparent 92%); filter: grayscale(18%) contrast(1.03); } .photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; } .photo-ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:66.5%; height:66.5%; border-radius:50%; border:1px solid rgba(127,240,192,0.25); } /* ---------- section shared ---------- */ section{ padding:64px 0; border-top:1px solid var(--hair); } .section-head{ display:grid; grid-template-columns:220px 1fr; gap:40px; } .section-label{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); } .section-body p{ color:var(--muted); font-size:16.5px; max-width:640px; margin:0 0 16px; } .section-body p:last-child{ margin-bottom:0; } .section-body strong{ color:var(--paper); font-weight:600; } /* ---------- focus items ---------- */ .focus-grid{ display:grid; grid-template-columns:1fr; gap:0; } .focus-item{ display:grid; grid-template-columns:220px 1fr; gap:40px; padding:22px 0; border-top:1px solid var(--hair); } .focus-item:first-child{ border-top:none; padding-top:0; } .focus-tag{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--mint); letter-spacing:0.06em; text-transform:uppercase; padding-top:2px; } .focus-item h3{ font-family:'Fraunces', serif; font-weight:400; font-size:20px; margin:0 0 8px; color:var(--paper); } .focus-item p{ color:var(--muted); font-size:15.5px; margin:0; max-width:560px; } /* ---------- slogan banner ---------- */ .banner{ border-top:1px solid var(--hair); padding:70px 0; text-align:center; } .banner p{ font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:clamp(22px, 3.4vw, 34px); line-height:1.4; color:var(--paper); max-width:760px; margin:0 auto; } .banner p em{ font-style:normal; color:var(--gold); font-family:'IBM Plex Mono', monospace; font-size:0.5em; letter-spacing:0.08em; text-transform:uppercase; vertical-align:middle; display:inline-block; margin-top:14px; } /* ---------- footer ---------- */ footer{ border-top:1px solid var(--hair); padding:40px 0 48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; } .contact-link{ font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--paper); text-decoration:none; border-bottom:1px solid var(--mint); padding-bottom:2px; transition:color 0.2s, border-color 0.2s; } .contact-link:hover{ color:var(--mint); } .foot-note{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted); letter-spacing:0.04em; } .foot-right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .visit-counter{ display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted); letter-spacing:0.04em; padding:6px 12px; border:1px solid var(--hair); border-radius:999px; } .visit-counter .dot{ width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 6px 1px rgba(127,240,192,0.6); flex-shrink:0; } .visit-counter .visit-num{ color:var(--paper); font-weight:500; } .page-num{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted); letter-spacing:0.04em; } /* ================= Login module ================= */ .login-trigger-wrap{ position:relative; } .modal-overlay{ position:fixed; inset:0; background:rgba(9,9,15,0.72); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; padding:5vh 24px; overflow-y:auto; z-index:100; } .modal-overlay.open{ display:flex; } .modal-card{ width:100%; max-width:380px; max-height:90vh; overflow-y:auto; background:var(--panel); border:1px solid var(--hair); border-radius:16px; padding:36px 32px; position:relative; } .modal-card.modal-wide{ max-width:720px; } .modal-close{ position:absolute; top:18px; right:18px; background:none; border:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:4px; } .modal-close:hover{ color:var(--mint); } .modal-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; } .modal-title{ font-family:'Fraunces', serif; font-weight:400; font-size:24px; margin:0 0 24px; color:var(--paper); } .field{ margin-bottom:18px; } .field label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .field input, .field select, .field textarea{ width:100%; background:var(--panel-2); border:1px solid var(--hair); border-radius:8px; padding:11px 14px; color:var(--paper); font-family:'Inter', sans-serif; font-size:14.5px; outline:none; transition:border-color 0.2s; } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--mint); } .field select{ cursor:pointer; } .field textarea{ resize:vertical; min-height:44px; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; } .form-grid .field.full{ grid-column:1 / -1; } /* ---------- Lockable fields (e.g. Customer Unique ID / Customer Code) ---------- Locked (default): grey background, read-only. Unlock button flips it to editable + white background, so it's obvious at a glance whether typing into the box will do anything. */ .lock-input-row{ display:flex; gap:8px; align-items:stretch; } .lock-input-row input{ flex:1; min-width:0; } .lock-input-row input:disabled{ background:var(--panel-2) !important; color:var(--muted); cursor:not-allowed; } body.theme-light .lock-input-row input:not(:disabled){ background:#ffffff; } .lock-toggle-btn{ flex-shrink:0; width:44px; border:1px solid var(--hair); border-radius:8px; background:var(--panel-2); color:var(--muted); cursor:pointer; font-size:14px; transition:border-color 0.2s, color 0.2s; } .lock-toggle-btn:hover{ border-color:var(--mint); color:var(--mint); } .lock-toggle-btn.unlocked{ color:var(--gold); border-color:var(--gold); } .triple-code-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px; } .triple-code-grid .sub-label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } @media (max-width:800px){ .triple-code-grid{ grid-template-columns:1fr; gap:14px 0; } } .form-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:8px; } .form-error{ color:var(--danger); font-size:13px; font-family:'IBM Plex Mono', monospace; margin:-8px 0 18px; min-height:16px; } .form-success{ color:var(--mint); font-size:13px; font-family:'IBM Plex Mono', monospace; margin:-8px 0 18px; } .form-success:empty{ display:none; } .align-checklist{ max-height:360px; overflow-y:auto; border:1px solid var(--hair); border-radius:10px; padding:6px 0; margin-bottom:16px; } .align-check-row{ display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:13.5px; color:var(--paper); } .align-check-row:hover{ background:var(--beige); } .align-check-label{ display:flex; align-items:center; gap:10px; cursor:pointer; flex:1; min-width:0; } .align-check-label input{ width:16px; height:16px; flex:none; } .align-check-row .btn-danger{ flex:none; } .picker-row{ display:flex; gap:12px; padding:8px 0 32px; flex-wrap:wrap; } .picker-row select{ min-width:240px; } /* ================= Filter bar (Sales Overview / Supervisors Dashboard) ================= */ .filter-bar{ background:var(--panel-2); border:1px solid var(--hair); border-radius:14px; padding:18px 22px; margin:20px 0 8px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 24px; } .filter-field{ display:flex; flex-direction:column; gap:6px; } .filter-field label{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); } .filter-field select, .filter-field input[type="date"]{ background:var(--panel); border:1px solid var(--hair); border-radius:9px; padding:9px 12px; color:var(--paper); font-family:'Inter', sans-serif; font-size:13.5px; min-width:160px; } .filter-field select:focus, .filter-field input[type="date"]:focus{ outline:none; border-color:var(--mint); } .filter-field select:disabled, .filter-field select.disabled-select{ opacity:0.5; cursor:not-allowed; background:var(--hair); } .filter-attribution{ display:flex; flex-direction:column; gap:6px; } .filter-attribution-options{ display:flex; flex-wrap:wrap; gap:6px 16px; } .filter-check{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--paper); cursor:pointer; } .filter-check input{ width:15px; height:15px; cursor:pointer; } .filter-bar .btn-primary{ padding:10px 22px; } .filters-toggle-btn{ margin:20px 0 8px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; } .downloads-row{ display:flex; align-items:center; gap:14px; margin-bottom:24px; } .downloads-row .muted-cell{ font-size:12.5px; } /* ================= Sales Rep dashboard header ================= */ .rep-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:8px; } .rep-photo-square{ width:96px; height:96px; border-radius:14px; background:var(--panel-2); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; } .rep-photo-square img{ width:100%; height:100%; object-fit:cover; } .rep-photo-square .rep-photo-placeholder{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--muted); text-align:center; padding:0 8px; } .negative-perf-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:24px; } @media (max-width:700px){ .filter-bar{ align-items:stretch; } .filter-field select, .filter-field input[type="date"]{ min-width:0; width:100%; } } .helper-text{ color:var(--muted); font-size:12.5px; margin-top:-8px; margin-bottom:20px; line-height:1.5; } /* ---------- Personal Settings (page9) — read-only detail rows for the restricted (non-Superadmin) view, and the photo delete button ---------- */ .ps-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--accent-2, #a8722e); font-weight:700; margin:20px 0 6px; } .ps-section-label:first-child{ margin-top:0; } .ps-readonly-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 24px; } .ps-row{ border-top:1px solid var(--hair); padding:10px 0; } .ps-row-label{ font-size:11.5px; color:var(--muted); margin-bottom:3px; } .ps-row-value{ font-size:14px; font-weight:600; } .photo-delete-btn{ margin-left:8px; } @media (max-width:640px){ .ps-readonly-grid{ grid-template-columns:1fr; } } /* ================= Supplier Performance per-Customer MTD report (page25) ================= */ .reports-link-list{ display:flex; flex-direction:column; gap:2px; padding:8px 0 40px; } .reports-link-item{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:12px; border:1px solid transparent; color:var(--paper); text-decoration:none; font-size:14.5px; transition:background 0.15s, border-color 0.15s; } .reports-link-item:before{ content:"•"; color:var(--mint); font-size:20px; line-height:0; } .reports-link-item:hover{ background:var(--panel-2); border-color:var(--hair); } .reports-link-item .reports-link-desc{ color:var(--muted); font-size:12.5px; margin-left:4px; } .msel{ position:relative; } .msel-box{ background:var(--panel); border:1px solid var(--hair); border-radius:9px; padding:9px 12px; min-width:260px; max-width:360px; cursor:pointer; display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-height:20px; } .msel-box:hover{ border-color:var(--mint); } .msel-placeholder{ color:var(--muted); font-size:13.5px; } .msel-chip{ background:var(--mint); color:#0f0f18; font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; } .msel-chip span.x{ cursor:pointer; opacity:0.7; } .msel-chip span.x:hover{ opacity:1; } .msel-panel{ position:absolute; top:calc(100% + 6px); left:0; z-index:40; background:var(--panel); border:1px solid var(--hair); border-radius:12px; width:340px; max-height:320px; display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(0,0,0,0.25); } .msel-search{ border:none; border-bottom:1px solid var(--hair); background:transparent; padding:12px 14px; font-size:13.5px; color:var(--paper); font-family:'Inter',sans-serif; } .msel-search:focus{ outline:none; } .msel-list{ overflow-y:auto; padding:6px 0; } .msel-opt{ display:flex; align-items:center; gap:9px; padding:8px 14px; cursor:pointer; font-size:13.5px; } .msel-opt:hover{ background:var(--panel-2); } .msel-opt input{ width:14px; height:14px; cursor:pointer; } .perc-preview{ margin-top:26px; } .perc-branch-head td{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); padding-top:18px !important; } .perc-hl-green{ background:#c7e7bb !important; } .perc-hl-pink{ background:#f7c9ce !important; color:#a6141f !important; } .perc-hl-blue{ background:#bcdcf2 !important; color:#0b4a7a !important; font-weight:700; text-align:center; } .perc-neg-font{ color:#a6141f !important; } .perc-total-row td{ background:#d7e6f0 !important; font-weight:700; } .perc-total-row.perc-neg td{ background:#f7c9ce !important; color:#a6141f !important; } .perc-diff-row td{ background:#c7e7bb; color:#0b7a2b; font-weight:700; font-size:15.5px; } .perc-diff-row.perc-neg td{ background:#f7c9ce; color:#a6141f; } .perc-nodata-row td{ background:#f7c9ce !important; color:#a6141f !important; font-style:italic; } #pcTable thead th{ text-align:center; } #pcTable tbody td:nth-child(2){ text-align:center; } /* ================= Dashboard / blank page ================= */ .dash-hero{ padding:80px 0 100px; text-align:center; } .dash-hero .eyebrow{ justify-content:center; display:flex; align-items:center; } .dash-hero h1{ font-family:'Fraunces', serif; font-weight:400; font-style:italic; font-size:clamp(28px, 4vw, 40px); margin:0 0 18px; color:var(--paper); } .dash-hero p{ color:var(--muted); font-size:16px; max-width:480px; margin:0 auto 34px; } /* ================= Users table ================= */ .table-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:44px 0 24px; } .table-toolbar h1{ font-family:'Fraunces', serif; font-weight:400; font-size:28px; margin:0; color:var(--paper); } .users-table-wrap{ overflow-x:auto; border-top:1px solid var(--hair); padding-bottom:60px; } /* Bounded, independently-scrollable list window — used on pages whose record lists can run long (Customers, Customer Rep Alignment) so the buttons/sections below the list stay within easy reach instead of being pushed far down the page. The list itself scrolls inside this box; the rest of the page scrolls normally. */ .users-table-wrap.table-window{ max-height:52vh; overflow-y:auto; padding-bottom:0; border:1px solid var(--hair); border-radius:10px; } .table-window table.users-table thead th{ position:sticky; top:0; z-index:5; background:var(--panel); } body.theme-light .table-window table.users-table thead th{ background:var(--ribbon); } .search-input{ background:var(--panel-2); border:1px solid var(--hair); border-radius:10px; padding:10px 16px; color:var(--paper); font-family:'Inter', sans-serif; font-size:13.5px; min-width:280px; } .search-input:focus{ outline:none; border-color:var(--mint); } .search-input:disabled{ opacity:0.5; cursor:not-allowed; background:var(--hair); } table.users-table{ width:100%; border-collapse:collapse; min-width:720px; } table.users-table th{ text-align:left; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); padding:16px 14px; border-bottom:1px solid var(--hair); } table.users-table td{ padding:16px 14px; border-bottom:1px solid var(--hair); font-size:14.5px; color:var(--paper); vertical-align:middle; } table.users-table td.muted-cell{ color:var(--muted); } table.users-table tr:hover td{ background:rgba(127,240,192,0.03); } @media (max-width:800px){ .hero{ grid-template-columns:1fr; padding:44px 0 56px; gap:44px; } .hero .photo-stage{ order:-1; max-width:280px; } .section-head, .focus-item{ grid-template-columns:1fr; gap:12px; } section{ padding:44px 0; } .wrap{ padding:0 22px; } footer{ flex-direction:column; align-items:flex-start; } .form-grid{ grid-template-columns:1fr; } .modal-card{ padding:28px 22px; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } /* ================= Overview dashboard ================= */ .overview-header{ padding:44px 0 8px; } .overview-header h1{ font-family:'Fraunces', serif; font-weight:400; font-size:28px; margin:0 0 6px; color:var(--paper); } .overview-header p{ color:var(--muted); font-size:14px; margin:0; } .stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; padding:28px 0; } .stat-card{ background:var(--panel-2); border:1px solid var(--hair); border-radius:14px; padding:20px 22px; } .stat-card .stat-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .stat-card .stat-value{ font-family:'Fraunces', serif; font-size:26px; color:var(--paper); } .chart-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-bottom:60px; } .chart-card{ background:var(--panel-2); border:1px solid var(--hair); border-radius:14px; padding:22px 24px 10px; } .chart-card.full{ grid-column:1 / -1; } .chart-card h3{ font-family:'Inter', sans-serif; font-weight:600; font-size:14px; color:var(--paper); margin:0 0 16px; } .chart-card canvas{ max-height:280px; } @media (max-width:900px){ .stat-grid{ grid-template-columns:repeat(2, 1fr); } .chart-grid{ grid-template-columns:1fr; } } /* ================= Top reps by branch list ================= */ .reps-section{ padding-bottom:60px; } .reps-section h3{ font-family:'Inter', sans-serif; font-weight:600; font-size:14px; color:var(--paper); margin:0 0 16px; } .reps-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; } .reps-branch-card{ background:var(--panel-2); border:1px solid var(--hair); border-radius:14px; padding:20px 20px 8px; min-width:0; } .reps-branch-card .branch-title{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; } .rep-row{ display:flex; flex-direction:column; gap:5px; padding:10px 0; border-top:1px solid var(--hair); } .rep-row:first-of-type{ border-top:none; } .rep-row-top{ display:flex; align-items:baseline; gap:8px; } .rep-row .rep-rank{ font-family:'Fraunces', serif; font-style:italic; color:var(--gold); font-size:15px; flex-shrink:0; } .rep-row .rep-name{ color:var(--paper); font-size:13px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; display:inline-block; } .rep-row .rep-amount{ color:var(--muted); font-size:12px; font-family:'IBM Plex Mono', monospace; padding-inline-start:23px; } /* ================= User photo uploader ================= */ .photo-uploader{ display:flex; align-items:center; gap:18px; margin-bottom:22px; } .photo-square{ width:88px; height:88px; border-radius:12px; background:var(--panel-2); border:1px dashed var(--hair); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; } .photo-square img{ width:100%; height:100%; object-fit:cover; } .photo-square .photo-placeholder{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); text-align:center; padding:0 6px; } .photo-uploader-controls{ display:flex; flex-direction:column; gap:8px; } .photo-uploader-controls .photo-status{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); min-height:14px; } @media (max-width:900px){ .reps-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .reps-grid{ grid-template-columns:1fr; } } /* ================= Upload page ================= */ .upload-header{ padding:44px 0 8px; } .upload-header h1{ font-family:'Fraunces', serif; font-weight:400; font-size:28px; margin:0 0 6px; color:var(--paper); } .upload-header p{ color:var(--muted); font-size:14px; margin:0; } .dropzone{ margin:28px 0; border:2px dashed var(--hair); border-radius:16px; padding:48px 24px; text-align:center; cursor:pointer; transition:border-color 0.2s, background 0.2s; } .dropzone.dragover{ border-color:var(--mint); background:var(--beige); } .dropzone p{ color:var(--muted); margin:0 0 6px; } .dropzone .dz-file{ color:var(--paper); font-weight:600; } .upload-log{ background:var(--panel-2); border:1px solid var(--hair); border-radius:14px; padding:20px 22px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted); max-height:320px; overflow-y:auto; margin-bottom:24px; } .upload-log .log-line{ padding:3px 0; } .upload-log .log-line.ok{ color:var(--mint); } .upload-log .log-line.err{ color:var(--danger); } .progress-bar-outer{ height:8px; background:var(--hair); border-radius:4px; overflow:hidden; margin:16px 0 24px; display:none; } .progress-bar-inner{ height:100%; background:var(--mint); width:0%; transition:width 0.2s; } .summary-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:60px; display:none; } .summary-grid .stat-card{ background:var(--panel-2); border:1px solid var(--hair); border-radius:14px; padding:20px 22px; } @media (max-width:700px){ .summary-grid{ grid-template-columns:1fr; } } /* ================= RTL / Arabic support ================= */ html[dir="rtl"] body.lang-ar, body.lang-ar{ font-family: 'Noto Kufi Arabic', 'Inter', sans-serif; } body.lang-ar .slogan, body.lang-ar .modal-title{ font-family: 'Noto Kufi Arabic', 'Fraunces', serif; } html[dir="rtl"] .topbar-right{ flex-direction:row-reverse; } html[dir="rtl"] .hero{ direction:rtl; } html[dir="rtl"] .role-line{ flex-direction:row-reverse; justify-content:flex-end; } html[dir="rtl"] .focus-item{ direction:rtl; } html[dir="rtl"] footer{ flex-direction:row-reverse; } html[dir="rtl"] .foot-right{ flex-direction:row-reverse; } html[dir="rtl"] .modal-close{ left:20px; right:auto; } html[dir="rtl"] .field label{ text-align:right; } /* ================= Sticky header (topbar + ribbon), pin toggle ================= */ /* #ribbonMount is just an empty mount point that dgRenderRibbon() fills with the .ribbon markup — its own box ends up exactly as tall as .ribbon itself. A position:sticky element can never travel past the bounds of its containing block, so with a same-height wrapper the ribbon had no room to actually "travel" down the page and immediately released back into normal flow (looked like it wasn't sticking at all, unlike the topbar whose parent, .wrap, spans the full page). display:contents drops the wrapper from layout entirely so .ribbon's effective containing block becomes .wrap instead. */ #ribbonMount{ display:contents; } .topbar{ position:sticky; top:0; z-index:60; } .ribbon{ position:sticky; top:var(--dg-topbar-h, 76px); z-index:59; } body.dg-header-unpinned .topbar, body.dg-header-unpinned .ribbon{ position:relative; top:auto; } .ribbon-pin-btn{ position:absolute; top:50%; right:4px; transform:translateY(-50%); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:1px solid var(--hair); border-radius:7px; background:var(--panel-2); color:var(--muted); cursor:pointer; z-index:21; padding:0; flex-shrink:0; } .ribbon-pin-btn::before{ content:"📌"; font-size:12px; opacity:0.55; transform:rotate(35deg); transition:transform 0.15s, opacity 0.15s; } .ribbon-pin-btn.pinned::before{ opacity:1; transform:rotate(0deg); } .ribbon-pin-btn:hover{ border-color:var(--mint); } html[dir="rtl"] .ribbon-pin-btn{ right:auto; left:4px; } /* ================= Ribbon navigation ================= */ .ribbon{ border-bottom:1px solid var(--hair); } /* Full-bleed background band to the actual viewport edges, without ever making .ribbon's own box wider than the viewport (the previous margin:-100vw/padding:100vw approach made the box ~2 viewports wide, which both caused the page to drift/scroll horizontally AND — because a body-level overflow-x:hidden was tried as a fix for that — broke position:sticky on every browser that treats a non-visible overflow on an ancestor as disqualifying descendants from sticking. This pseudo- element approach keeps .ribbon itself at normal width (so sticky keeps working) while still painting edge-to-edge. */ .ribbon::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:var(--dg-vw, 100vw); margin-left:calc(-1 * var(--dg-vw, 100vw) / 2 + 50%); background:var(--panel-2); z-index:-1; } .ribbon-inner{ position:relative; max-width:1180px; margin:0 auto; display:flex; gap:1px; flex-wrap:wrap; padding:0 40px 0 4px; } html[dir="rtl"] .ribbon-inner{ padding:0 4px 0 40px; } .ribbon-tab{ display:inline-block; padding:14px 13px; font-family:'Inter', sans-serif; font-size:12.5px; font-weight:500; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; transition:color 0.15s, border-color 0.15s; } .ribbon-tab:hover{ color:var(--paper); } .ribbon-tab-active{ color:var(--paper); border-bottom-color:var(--gold); } /* NOTE: no flex-direction override needed here — .ribbon-inner already inherits direction:rtl from , and CSS flexbox's default flex-direction:row already follows the inline direction, so it lays the tabs out right-to-left on its own. Adding flex-direction:row-reverse on top of that double-reverses it back to a left-to-right look, which was the bug reported. */ .ribbon-tab-wrap{ position:relative; } .ribbon-tab-wrap:hover .ribbon-dropdown{ display:flex; } .ribbon-dropdown{ display:none; position:absolute; top:100%; left:0; background:var(--panel-2); border:1px solid var(--hair); border-radius:0 0 10px 10px; flex-direction:column; min-width:220px; z-index:20; box-shadow:0 12px 24px rgba(0,0,0,0.25); } .ribbon-sub-item{ padding:11px 18px; font-family:'Inter', sans-serif; font-size:13px; color:var(--muted); text-decoration:none; white-space:nowrap; border-bottom:1px solid var(--hair); } .ribbon-sub-item:last-child{ border-bottom:none; } .ribbon-sub-item:hover{ color:var(--paper); background:var(--beige); } html[dir="rtl"] .ribbon-dropdown{ left:auto; right:0; } /* ================= Survey module (page28) ================= */ .svy-crumbs{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:16px; } .svy-crumbs .svy-crumb-link{ color:var(--mint); cursor:pointer; text-decoration:none; } .svy-crumbs .svy-crumb-link:hover{ text-decoration:underline; } .svy-crumbs .svy-sep{ opacity:0.5; } .svy-empty-state{ text-align:center; color:var(--muted); font-size:14px; padding:70px 20px; border:1px dashed var(--hair); border-radius:14px; } .svy-rep-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; padding-bottom:40px; } .svy-rep-card{ background:var(--panel-2); border:1px solid var(--hair); border-radius:14px; padding:18px 20px; cursor:pointer; transition:border-color 0.15s, transform 0.15s; } .svy-rep-card:hover{ border-color:var(--mint); transform:translateY(-2px); } .svy-rep-card .svy-rep-name{ font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px; color:var(--paper); margin-bottom:4px; } .svy-rep-card .svy-rep-meta{ font-size:11.5px; color:var(--muted); margin-bottom:12px; } .svy-rep-card .svy-rep-count{ font-family:'Fraunces', serif; font-size:22px; color:var(--mint); } .svy-rep-card .svy-rep-count-label{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-left:6px; } .svy-rep-card .svy-rep-last{ font-size:11px; color:var(--muted); margin-top:10px; padding-top:10px; border-top:1px solid var(--hair); } .svy-rep-card.svy-rep-empty{ opacity:0.55; cursor:default; } .svy-rep-card.svy-rep-empty:hover{ transform:none; border-color:var(--hair); } .svy-list-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; } .svy-list-toolbar input[type="text"], .svy-list-toolbar input[type="date"]{ background:var(--panel-2); border:1px solid var(--hair); border-radius:8px; padding:9px 12px; color:var(--paper); font-size:13.5px; outline:none; } .svy-list-toolbar input:focus{ border-color:var(--mint); } .svy-list-toolbar-spacer{ flex:1 1 auto; } .svy-select-all-label{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); cursor:pointer; } .svy-row-check{ flex:none; width:18px; height:18px; cursor:pointer; accent-color:var(--mint); } .svy-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; background:var(--panel-2); border:1px solid var(--hair); border-radius:12px; margin-bottom:10px; cursor:pointer; transition:border-color 0.15s; } .svy-row.svy-row-selected{ border-color:var(--mint); background:rgba(31,174,124,0.08); } .svy-row:hover{ border-color:var(--mint); } .svy-row .svy-row-main{ min-width:0; } .svy-row .svy-row-customer{ font-weight:600; font-size:14px; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .svy-newcust-tag{ display:inline-block; font-size:10px; font-weight:700; color:var(--mint); border:1px solid var(--mint); border-radius:20px; padding:2px 8px; margin-inline-start:8px; vertical-align:middle; white-space:nowrap; } .svy-row .svy-row-sub{ font-size:11.5px; color:var(--muted); margin-top:3px; } .svy-row .svy-row-date{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--muted); white-space:nowrap; flex:none; } .svy-row .svy-row-thumb{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex:none; border:1px solid var(--hair); } .svy-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-bottom:22px; } .svy-detail-field{ font-size:13.5px; } .svy-detail-field .svy-df-label{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; } .svy-detail-field .svy-df-value{ color:var(--paper); } .svy-detail-field.svy-df-full{ grid-column:1 / -1; } .svy-section-title{ font-family:'Inter', sans-serif; font-weight:600; font-size:13px; color:var(--paper); margin:22px 0 12px; padding-top:16px; border-top:1px solid var(--hair); } .svy-photo-grid{ display:flex; flex-wrap:wrap; gap:10px; } .svy-photo-thumb{ width:110px; height:110px; border-radius:10px; object-fit:cover; border:1px solid var(--hair); cursor:pointer; transition:opacity 0.15s; } .svy-photo-thumb:hover{ opacity:0.8; } .svy-match-box{ background:var(--beige); border:1px solid var(--hair); border-radius:12px; padding:16px 18px; margin-top:8px; } .svy-match-box .svy-match-title{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; } .svy-no-match{ font-size:12.5px; color:var(--muted); font-style:italic; } .svy-addr-fill{ margin-top:10px; display:flex; gap:8px; } .svy-addr-fill input{ flex:1; background:var(--panel); border:1px solid var(--hair); border-radius:8px; padding:9px 12px; font-size:13px; color:var(--paper); } .svy-lightbox-overlay{ position:fixed; inset:0; background:rgba(9,9,15,0.9); display:none; align-items:center; justify-content:center; z-index:200; padding:24px; cursor:zoom-out; } .svy-lightbox-overlay.open{ display:flex; } .svy-lightbox-overlay img{ max-width:92vw; max-height:92vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.5); } .svy-stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:26px; } @media (max-width:900px){ .svy-stat-grid{ grid-template-columns:repeat(2,1fr); } } /* ================= Sales Rep's Current Location (page29) ================= */ .rloc-stat-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-bottom:22px; } @media (max-width:1000px){ .rloc-stat-grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:560px){ .rloc-stat-grid{ grid-template-columns:repeat(2, 1fr); } } .rloc-stat-card{ background:var(--panel-2); border:1px solid var(--hair); border-radius:14px; padding:16px 18px; text-align:center; } .rloc-stat-card.rloc-total{ border-color:var(--mint); } .rloc-stat-card .rloc-stat-label{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .rloc-stat-card .rloc-stat-value{ font-family:'Fraunces', serif; font-size:24px; color:var(--paper); } .rloc-stat-card .rloc-stat-value.rloc-dash{ color:var(--muted); font-size:18px; } .rloc-map-wrap{ position:relative; display:flex; height:min(72vh, 640px); min-height:420px; border:1px solid var(--hair); border-radius:16px; overflow:hidden; background:var(--panel-2); margin-bottom:40px; } .rloc-map-wrap:fullscreen{ height:100vh; border-radius:0; margin-bottom:0; } .rloc-map-area{ position:relative; flex:1 1 auto; min-width:0; } #rlocMap{ position:absolute; inset:0; } .rloc-list-panel{ width:0; flex:0 0 auto; overflow:hidden; background:var(--panel-2); border-right:1px solid var(--hair); display:flex; flex-direction:column; transition:width 0.25s ease; } .rloc-list-panel.open{ width:320px; } html[dir="rtl"] .rloc-list-panel{ border-right:none; border-left:1px solid var(--hair); order:2; } html[dir="rtl"] .rloc-map-area{ order:1; } .rloc-list-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; border-bottom:1px solid var(--hair); font-size:13px; font-weight:600; color:var(--paper); flex:0 0 auto; } .rloc-list-head select{ font-size:12px; padding:4px 6px; border-radius:6px; border:1px solid var(--hair); background:var(--panel-2); color:var(--paper); } .rloc-list-body{ overflow-y:auto; flex:1 1 auto; } .rloc-rep-row{ padding:12px 16px; border-bottom:1px solid var(--hair); cursor:pointer; transition:background 0.15s; } .rloc-rep-row:hover{ background:var(--panel-2); } .rloc-rep-row .rloc-rep-name{ font-size:13.5px; font-weight:600; color:var(--paper); margin-bottom:3px; } .rloc-rep-row .rloc-rep-meta{ font-size:11.5px; color:var(--muted); line-height:1.5; } .rloc-rep-row .rloc-rep-ago{ font-size:10.5px; color:var(--mint); margin-top:3px; } .rloc-map-controls{ /* Sits below Leaflet's own +/- zoom control (which is always physically top-left regardless of page direction, ~72px tall including margin) so the two sets of buttons never overlap and both stay clickable. */ position:absolute; top:96px; z-index:500; display:flex; flex-direction:column; gap:8px; inset-inline-start:12px; } .rloc-ctrl-btn{ width:34px; height:34px; border-radius:8px; border:1px solid var(--hair); background:#fff; color:#333; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.18); } .rloc-ctrl-btn:hover{ background:#f3f3f3; } .rloc-view-toggle{ position:absolute; top:12px; z-index:500; inset-inline-end:12px; display:flex; border-radius:8px; overflow:hidden; border:1px solid var(--hair); box-shadow:0 2px 8px rgba(0,0,0,0.18); } .rloc-view-btn{ border:none; background:#fff; color:#333; cursor:pointer; font-family:'Inter', sans-serif; font-size:12px; font-weight:600; padding:8px 12px; } .rloc-view-btn + .rloc-view-btn{ border-left:1px solid var(--hair); } html[dir="rtl"] .rloc-view-btn + .rloc-view-btn{ border-left:none; border-right:1px solid var(--hair); } .rloc-view-btn.active{ background:var(--mint); color:#fff; } .rloc-view-btn:hover:not(.active){ background:#f3f3f3; } .rloc-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13.5px; background:rgba(0,0,0,0.03); pointer-events:none; z-index:100; } .rloc-marker-icon{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.55)); } .rloc-tooltip{ font-size:12px; line-height:1.6; text-align:start; } .rloc-tooltip b{ display:block; font-size:13px; margin-bottom:2px; } /* ================= Sales Rep Last Login Log (page30) ================= */ .rll-toolbar{ display:flex; gap:12px; align-items:center; margin-bottom:20px; } .rll-search{ flex:1; max-width:340px; padding:10px 14px; border-radius:10px; border:1px solid var(--hair); background:var(--panel-2); color:var(--paper); font-size:13.5px; } .rll-checkbox-label{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); white-space:nowrap; cursor:pointer; } .rll-checkbox-label input{ cursor:pointer; } .spinner-inline{ color:var(--muted); padding:30px 0; text-align:center; font-size:13.5px; } /* ================= Hierarchy Report / Organization Chart (page32) ================= */ .orgc-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; } .orgc-toolbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .orgc-legend{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .orgc-legend-item{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); } .orgc-legend-swatch{ width:13px; height:13px; border-radius:4px; flex:0 0 auto; } .orgc-meta{ font-size:12.5px; color:var(--muted); margin:0 0 14px; } .orgc-zoom-controls{ display:flex; align-items:center; gap:6px; border:1px solid var(--hair); border-radius:10px; padding:4px 6px; background:#fbfbfa; } .orgc-zoom-btn{ width:26px; height:26px; border-radius:7px; border:1px solid var(--hair); background:#fff; color:#1c1c22; font-size:16px; line-height:1; cursor:pointer; } .orgc-zoom-btn:hover{ background:var(--mint); color:#fff; border-color:var(--mint); } .orgc-zoom-label{ font-size:12px; color:var(--muted); width:40px; text-align:center; font-family:'IBM Plex Mono', monospace; } .orgc-fit-btn{ padding:6px 10px; font-size:12px; } /* Fixed-height, both-axis scrollable viewport — the canvas inside is scaled via CSS transform for zoom, with a "sizer" wrapper kept at the true scaled footprint so these scrollbars track what's actually visible. */ /* Contained within .wrap (like the rest of the page) — the diagram itself stretches to fill this box edge-to-edge via the fit-to-width zoom below, rather than the box itself breaking out to the full browser width. */ .orgc-viewport{ position:relative; width:100%; height:min(72vh, 680px); overflow:auto; border:1px solid var(--hair); border-radius:16px; background: linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(180deg, rgba(0,0,0,0.025) 1px, transparent 1px) 0 0/24px 24px, #fbfbfa; margin-bottom:24px; } .orgc-intro{ color:var(--muted); font-size:14px; line-height:1.55; margin:0 0 18px; } .orgc-zoom-sizer{ position:relative; } .orgc-canvas{ position:relative; transform-origin:0 0; } .orgc-region-bar{ position:absolute; z-index:0; display:flex; align-items:center; padding:0 10px; background:#f5da8a; border-radius:5px; font-size:11px; font-weight:700; letter-spacing:0.02em; color:#5a4a1a; font-family:'Inter', Arial, sans-serif; } body.lang-ar .orgc-region-bar{ justify-content:flex-end; } /* Dense box, no connector lines: a thin colored left bar (level color) carries the hierarchy cue; text wraps up to 2 lines instead of shrinking, so every box keeps a small, fixed footprint. Two size variants: "header" for NSD/RSM/DSM (wider, room for all 3 fields) and "col" for the narrow Supervisor/Sales-Rep columns stacked beneath each DSM. */ .orgc-node{ position:absolute; z-index:1; border-radius:5px; overflow:hidden; background:#ffffff; border:1px solid rgba(20,20,30,0.12); border-left-width:4px; border-left-style:solid; box-shadow:0 1px 2px rgba(20,20,30,0.07); font-family:'Inter', Arial, sans-serif; padding:2px 5px 2px 7px; display:flex; flex-direction:column; justify-content:center; gap:0; } /* Physical (not logical) left/right swap for RTL — html2canvas doesn't reliably rasterize CSS logical border properties, and this accent bar needs to survive the PDF export intact. */ body.lang-ar .orgc-node{ border-left-width:1px; border-right-width:4px; border-right-style:solid; padding:2px 7px 2px 5px; } .orgc-name{ font-weight:600; color:#1c1c22; line-height:1.15; white-space:normal; overflow:hidden; word-break:break-word; } .orgc-pos{ color:#4a4a55; line-height:1.15; margin-top:1px; white-space:normal; overflow:hidden; word-break:break-word; } .orgc-node-header .orgc-name{ font-size:7.5px; max-height:17.5px; } .orgc-node-header .orgc-pos{ font-size:6.3px; max-height:14.6px; } .orgc-node-col .orgc-name{ font-size:6.6px; max-height:15.2px; } .orgc-node-col .orgc-pos{ font-size:5.6px; white-space:nowrap; text-overflow:ellipsis; } .orgc-email{ color:#8b8b96; line-height:1.15; font-family:'IBM Plex Mono', monospace; margin-top:1px; font-size:5.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .orgc-node-blank{ opacity:0.75; } .orgc-node-blank .orgc-name{ font-style:italic; color:#6a6a76; } .orgc-empty-state{ display:none; padding:60px 20px; text-align:center; color:var(--muted); font-size:14px; } .orgc-loading{ padding:60px 20px; text-align:center; color:var(--muted); font-size:14px; } body.lang-ar .orgc-name, body.lang-ar .orgc-pos, body.lang-ar .orgc-email{ direction:rtl; text-align:right; } /* ================= Change Requests (page34 / page35) ================= */ .cr-badge{ position:absolute; top:6px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--danger); color:#fff; font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:600; line-height:16px; text-align:center; display:none; } .cr-badge.show{ display:inline-block; } html[dir="rtl"] .cr-badge{ right:auto; left:2px; } .cr-section{ margin-bottom:34px; } .cr-section-title{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:flex; align-items:center; gap:10px; } .cr-section-title .cr-count{ background:var(--panel-2); border:1px solid var(--hair); border-radius:20px; padding:1px 9px; font-size:11px; color:var(--paper); } .cr-pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; letter-spacing:0.02em; white-space:nowrap; } .cr-pill-new{ background:rgba(148,163,184,0.18); color:#94a3b8; } .cr-pill-pending{ background:rgba(234,179,8,0.16); color:#eab308; } .cr-pill-completed{ background:rgba(34,197,94,0.16); color:#22c55e; } .cr-pill-rejected{ background:rgba(239,68,68,0.16); color:#ef4444; } .cr-pill-notapproved{ background:rgba(234,179,8,0.16); color:#eab308; } .cr-approvals{ display:flex; flex-direction:column; gap:6px; } .cr-approval-chip{ display:flex; align-items:center; gap:7px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--muted); } .cr-approval-chip .cr-dot{ width:14px; height:14px; border-radius:50%; background:var(--hair); flex-shrink:0; border:1px solid var(--hair); transition:background 0.15s, border-color 0.15s; } .cr-approval-chip.approved{ color:#22c55e; font-weight:600; } .cr-approval-chip.approved .cr-dot{ background:#22c55e; border-color:#22c55e; } .cr-approval-chip.na{ opacity:0.35; } /* Message preview box shown directly in the Change Request list/log rows (page34/page35) — everything else in the row is kept compact so this box has room to actually show the request text instead of forcing users to open each row just to read it. */ .cr-table-tight th, .cr-table-tight td{ padding:10px 10px; font-size:12.5px; } .cr-table-tight td.muted-cell{ font-size:11.5px; } .cr-msg-box{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:230px; min-width:160px; font-size:12px; line-height:1.4; color:var(--paper); background:var(--panel-2); border:1px solid var(--hair); border-radius:8px; padding:6px 10px; cursor:default; } .cr-toggle-row{ display:flex; align-items:center; justify-content:space-between; background:var(--panel-2); border:1px solid var(--hair); border-radius:10px; padding:12px 16px; margin:14px 0; } .cr-toggle-label{ font-size:13.5px; color:var(--paper); } .cr-switch{ position:relative; width:42px; height:24px; border-radius:14px; background:var(--hair); border:none; cursor:pointer; transition:background 0.15s; flex-shrink:0; } .cr-switch::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left 0.15s; } .cr-switch.on{ background:var(--mint); } .cr-switch.on::after{ left:21px; } html[dir="rtl"] .cr-switch::after{ left:auto; right:3px; } html[dir="rtl"] .cr-switch.on::after{ right:21px; left:auto; } .cr-message-box{ background:var(--panel-2); border:1px solid var(--hair); border-radius:10px; padding:16px; font-size:14px; line-height:1.6; color:var(--paper); white-space:pre-wrap; word-break:break-word; min-height:80px; margin-bottom:16px; } .cr-meta-row{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:16px; font-size:12.5px; color:var(--muted); } .cr-meta-row strong{ color:var(--paper); font-weight:600; } .cr-fab{ position:fixed; bottom:26px; right:26px; width:52px; height:52px; border-radius:50%; background:var(--mint); color:#0c0f0e; border:none; font-size:26px; line-height:52px; text-align:center; cursor:pointer; box-shadow:0 10px 22px rgba(0,0,0,0.35); } html[dir="rtl"] .cr-fab{ right:auto; left:26px; } .cr-filter-bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:18px; } .cr-filter-field{ min-width:160px; } .cr-filter-field label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } .cr-filter-field select, .cr-filter-field input{ width:100%; background:var(--panel-2); border:1px solid var(--hair); border-radius:8px; padding:9px 12px; color:var(--paper); font-size:13.5px; } /* ========================================================================= Database Design page (ER / relationships diagram) — page36 ========================================================================= */ .dbd-viewport{ position:relative; width:100%; height:min(72vh, 680px); overflow:auto; border:1px solid var(--hair); border-radius:16px; background: linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(180deg, rgba(0,0,0,0.025) 1px, transparent 1px) 0 0/24px 24px, #fbfbfa; margin-bottom:24px; cursor:grab; } .dbd-viewport.dbd-dragging{ cursor:grabbing; } .dbd-intro{ color:var(--muted); font-size:14px; line-height:1.55; margin:0 0 18px; } .dbd-zoom-sizer{ position:relative; } .dbd-canvas{ position:relative; transform-origin:0 0; } .dbd-loading{ padding:60px 20px; text-align:center; color:var(--muted); font-size:14px; } .dbd-zone-label{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:0.04em; fill:#7a7a86; text-transform:uppercase; } .dbd-table-box{ fill:#ffffff; stroke:#c9c9d2; stroke-width:1.2; } .dbd-table-name{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600; fill:#1c1c26; } .dbd-field{ font-family:"IBM Plex Mono",monospace; font-size:9.3px; fill:#4b4b56; } .dbd-field-pk{ font-family:"IBM Plex Mono",monospace; font-size:9.3px; font-weight:700; fill:#1c1c26; text-decoration:underline; } .dbd-field-fk{ font-family:"IBM Plex Mono",monospace; font-size:9.3px; font-style:italic; fill:#3b5f8a; } .dbd-pk-row{ fill:#fff6dd; } .dbd-pk-badge{ font-family:"IBM Plex Mono",monospace; font-size:7.6px; font-weight:700; fill:#a8722e; } .dbd-fk-badge{ font-family:"IBM Plex Mono",monospace; font-size:7.6px; font-weight:700; fill:#3b5f8a; } .dbd-rel-line{ fill:none; stroke:#9a9aa8; stroke-width:1.1; } .dbd-rel-self{ stroke:#c07a5a; } .dbd-rel-tag{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:700; fill:#7a7a86; } .dbd-drift-mount{ margin:0 0 14px; } .dbd-drift-banner{ display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:10px; font-size:13.5px; line-height:1.5; } .dbd-drift-banner.dbd-drift-ok{ background:#eaf7ee; border:1px solid #bfe6c9; color:#1e6b34; } .dbd-drift-banner.dbd-drift-warn{ background:#fdf3e3; border:1px solid #f0d49a; color:#8a5a00; } .dbd-drift-icon{ flex:0 0 auto; font-size:15px; line-height:1.4; } .dbd-drift-list{ margin:6px 0 0; padding-inline-start:18px; } .dbd-drift-list li{ margin:2px 0; } /* ---- System Architecture page (page37) — reuses .dbd-viewport/.dbd-canvas ---- */ .arc-box{ stroke-width:1.2; } .arc-box-client{ fill:#eef5fc; stroke:#a6cdea; } .arc-box-hosting{ fill:#eef8f0; stroke:#a9dcb8; } .arc-box-core{ fill:#fef4e7; stroke:#f0c58a; } .arc-box-side{ fill:#f4eefb; stroke:#c9b3ea; } .arc-box-email{ fill:#f4eefb; stroke:#c9b3ea; } .arc-box-note{ fill:#fdf7e3; stroke:#e8b563; } .arc-node-title{ font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; fill:#1c1c26; } .arc-node-sub{ font-family:"IBM Plex Mono",monospace; font-size:10px; fill:#4b4b56; } .arc-note-title{ font-family:"IBM Plex Mono",monospace; font-size:13.5px; font-weight:700; fill:#8a5a00; } .arc-flow-line{ fill:none; stroke:#9a9aa8; stroke-width:1.3; } .arc-flow-label{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; fill:#7a7a86; } /* ---- IT Readiness Summary page (page38) ---- */ .itr-legend{ display:flex; gap:16px; flex-wrap:wrap; margin:0 0 18px; } .itr-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px; } .itr-badge-ok{ background:#eaf7ee; color:#1e6b34; } .itr-badge-warn{ background:#fdf3e3; color:#8a5a00; } .itr-badge-gap{ background:#fdeceb; color:#a33a2c; } .itr-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; } @media (max-width:900px){ .itr-cards{ grid-template-columns:1fr; } } .itr-card{ border:1px solid var(--hair); border-radius:14px; padding:16px 18px; background:var(--panel); } .itr-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .itr-card-title{ font-family:"Fraunces",serif; font-size:15.5px; font-weight:560; margin:0; color:var(--paper); } .itr-card-body{ font-size:13px; line-height:1.6; color:var(--muted); margin:0; } /* ---- Consent gate overlay (js/consentGate.js) — included on every authenticated page ---- */ body.dgc-locked{ overflow:hidden; } .dgc-overlay{ position:fixed; inset:0; z-index:99999; background:rgba(15,15,24,0.72); display:flex; align-items:center; justify-content:center; padding:24px; } .dgc-card{ width:100%; max-width:820px; max-height:88vh; background:var(--panel); border-radius:18px; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.35); overflow:hidden; } .dgc-card-head{ padding:24px 28px 14px; border-bottom:1px solid var(--hair); } .dgc-card-head h2{ margin:0 0 6px; font-family:"Fraunces",serif; font-size:22px; font-weight:560; color:var(--paper); } .dgc-card-sub{ margin:0; font-size:13px; color:var(--muted); } .dgc-scroll{ flex:1; overflow-y:auto; padding:20px 28px; } .dgc-lang-label{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; } .dgc-lang-block p{ font-size:13.5px; line-height:1.7; color:var(--paper); margin:0 0 12px; } .dgc-lang-block-ar p{ text-align:right; font-family:"Noto Kufi Arabic",sans-serif; } .dgc-divider{ border:none; border-top:1px solid var(--hair); margin:20px 0; } .dgc-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 28px; border-top:1px solid var(--hair); } .dgc-scroll-hint{ font-size:12px; color:var(--muted); } .dgc-card-foot #dgcAcceptBtn:disabled{ opacity:0.45; cursor:not-allowed; } /* ---- Consent Log page (page39) ---- */ .cl-golive-box{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; border-radius:14px; border:1px solid var(--hair); background:var(--panel); margin-bottom:20px; } .cl-golive-status{ font-size:14.5px; font-weight:600; color:var(--paper); display:flex; align-items:center; gap:8px; margin-bottom:4px; } .cl-golive-sub{ font-size:12.5px; color:var(--muted); } .cl-live-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; } .cl-live-dot.cl-live-on{ background:#3fbf6f; } .cl-live-dot.cl-live-off{ background:#9a9aa8; } /* ---- Current Terms & Conditions box (page39) — reuses .dgc-lang-block styling ---- */ .cl-terms-box{ border:1px solid var(--hair); border-radius:14px; background:var(--panel); margin-bottom:20px; overflow:hidden; } .cl-terms-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; border-bottom:1px solid var(--hair); } .cl-terms-title{ font-size:14.5px; font-weight:600; color:var(--paper); } .cl-terms-version{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted); margin-top:2px; } .cl-terms-scroll{ max-height:340px; overflow-y:auto; padding:18px 20px; } .cl-terms-scroll .dgc-lang-block p{ font-size:13px; } /* ---- Admin Settings re-auth modal (js/adminReauth.js) ---- */ .arg-overlay{ position:fixed; inset:0; z-index:99998; background:rgba(15,15,24,0.72); display:flex; align-items:center; justify-content:center; padding:24px; } .arg-card{ width:100%; max-width:380px; background:var(--panel); border-radius:16px; padding:26px 26px 22px; box-shadow:0 20px 60px rgba(0,0,0,0.35); } .arg-card h2{ margin:0 0 8px; font-family:"Fraunces",serif; font-size:19px; font-weight:560; color:var(--paper); } .arg-sub{ margin:0 0 18px; font-size:12.5px; color:var(--muted); line-height:1.5; } .arg-card input[type="password"]{ width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--hair); background:var(--panel-2); color:var(--paper); font-size:14px; margin-bottom:8px; } .arg-error{ color:var(--danger); font-size:12.5px; margin-bottom:8px; } .arg-actions{ display:flex; gap:10px; margin-top:6px; } .arg-actions .btn{ flex:1; } .ribbon-lock-icon{ font-size:11px; margin-inline-start:-4px; opacity:0.75; } .otp-code-input{ font-size:22px; letter-spacing:10px; text-align:center; font-family:"IBM Plex Mono",monospace; } .dbd-legend{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .dbd-legend-item{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); } .dbd-legend-swatch{ width:13px; height:13px; border-radius:4px; flex:0 0 auto; } /* ========================================================================= Customer Invoices — page40 ========================================================================= */ .inv-table td.inv-neg, .inv-table td.inv-neg *{ color:#c0392b; font-weight:700; } .inv-type-return{ color:#c0392b; font-weight:700; } /* Squeezed layout — smaller font/padding so more invoice rows fit on screen. Scoped to .inv-table only, doesn't touch other tables that share the base .users-table styles. Headings centered; Date stays on one line; the two count columns are narrow (wrapped heading text) and center-aligned data; Grand Total is right-aligned. */ table.inv-table th{ padding:8px 6px; font-size:10px; white-space:nowrap; text-align:center; } table.inv-table td{ padding:5px 7px; font-size:12px; } table.inv-table td, table.inv-table th{ line-height:1.25; } table.inv-table td.inv-cell-nowrap, table.inv-table th:first-child{ white-space:nowrap; } table.inv-table th.inv-th-wrap{ white-space:normal; max-width:64px; } table.inv-table td.inv-cell-center{ text-align:center; } table.inv-table td.inv-cell-right{ text-align:right; } table.inv-table th.inv-sortable{ cursor:pointer; user-select:none; } table.inv-table th.inv-sortable:hover{ color:var(--paper); background:rgba(127,240,192,0.08); } table.inv-table th .inv-sort-arrow{ font-size:9px; opacity:0.8; } .inv-list-toolbar{ display:flex; justify-content:flex-start; align-items:center; margin:0 0 10px; } .inv-list-toolbar .btn{ font-size:12.5px; padding:9px 16px; } .inv-list-toolbar .btn:disabled{ opacity:0.4; cursor:not-allowed; } .inv-pagination{ display:flex; align-items:center; justify-content:center; gap:14px; padding:18px 0 40px; font-size:13px; color:var(--muted); } .inv-pagination button{ background:var(--panel-2); border:1px solid var(--hair); border-radius:8px; padding:7px 16px; font-size:13px; color:var(--paper); cursor:pointer; } .inv-pagination button:disabled{ opacity:0.4; cursor:default; } .modal-card.modal-invoice{ max-width:1040px; width:94vw; } .inv-viewer{ display:flex; gap:24px; margin:18px 0 22px; align-items:flex-start; } .inv-viewer-info{ flex:0 0 220px; background:var(--panel-2); border:1px solid var(--hair); border-radius:12px; padding:16px 18px; font-size:13px; } .inv-viewer-info .inv-info-row{ margin-bottom:12px; } .inv-viewer-info .inv-info-row:last-child{ margin-bottom:0; } .inv-viewer-info .inv-info-label{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; } .inv-viewer-info .inv-info-value{ font-weight:600; color:var(--paper); } .inv-viewer-lines{ flex:1 1 auto; min-width:0; } .inv-viewer-lines-scroll{ max-height:52vh; overflow-y:auto; overflow-x:auto; border:1px solid var(--hair); border-radius:12px; } .inv-lines-table{ width:100%; border-collapse:collapse; font-size:12.5px; } .inv-lines-table th{ position:sticky; top:0; background:var(--panel-2); text-align:start; padding:9px 12px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--hair); white-space:nowrap; } .inv-lines-table td{ padding:8px 12px; border-bottom:1px solid var(--hair); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; } .inv-lines-table tr:last-child td{ border-bottom:none; } .inv-lines-table tfoot td{ font-weight:700; border-top:2px solid var(--hair); border-bottom:none; background:var(--panel-2); }