@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap'); /* ===================================================================== WhatsApp Portal — "Liquid Glass" theme (override layer) Loads AFTER style.css + blue.css. Re-skins the whole app without touching markup. Light/dark via [data-theme] on . Author: redesign 2026 — see _redesign/RESEARCH.md ===================================================================== */ /* ----------------------------- TOKENS -------------------------------- */ :root, :root[data-theme="dark"]{ --wa-green:#25d366; --wa-green-2:#1faf57; --wa-teal:#128c7e; --wa-teal-deep:#075e54; --wa-blue:#34b7f1; --wa-bg-1:#04130f; --wa-bg-2:#062b25; --wa-bg-3:#02100c; --wa-blob-1:rgba(37,211,102,.30); --wa-blob-2:rgba(52,183,241,.18); --wa-blob-3:rgba(18,140,126,.28); --wa-glass:rgba(20,42,37,.55); --wa-glass-2:rgba(28,54,48,.66); --wa-glass-hi:rgba(255,255,255,.10); /* top inner highlight */ --wa-border:rgba(255,255,255,.12); --wa-border-strong:rgba(255,255,255,.20); --wa-text:#e8f6ef; --wa-text-dim:rgba(232,246,239,.62); --wa-text-mute:rgba(232,246,239,.40); --wa-heading:#f3fff9; --wa-input-bg:rgba(255,255,255,.05); --wa-input-bg-focus:rgba(255,255,255,.09); --wa-blur:18px; --wa-radius:18px; --wa-radius-sm:12px; --wa-radius-lg:26px; --wa-shadow:0 18px 48px -20px rgba(0,0,0,.75), 0 4px 14px -8px rgba(0,0,0,.6); --wa-shadow-lift:0 34px 70px -24px rgba(0,0,0,.85), 0 8px 22px -10px rgba(0,0,0,.55); --wa-glow:0 0 0 1px rgba(37,211,102,.30), 0 10px 36px -10px rgba(37,211,102,.45); --wa-topbar-h:66px; --wa-top-offset:calc(var(--wa-topbar-h) + 20px); --wa-side-w:256px; --wa-side-w-collapsed:80px; --wa-ease:cubic-bezier(.22,1,.36,1); /* recolors any (multicolor) PNG icon to WhatsApp green — used for active/hover/decorative icons */ --wa-green-filter:brightness(0) saturate(100%) invert(67%) sepia(72%) saturate(627%) hue-rotate(93deg) brightness(95%) contrast(88%); } :root[data-theme="light"]{ --wa-bg-1:#d3f2e0; --wa-bg-2:#bde8d2; --wa-bg-3:#e2f6eb; --wa-blob-1:rgba(37,211,102,.30); --wa-blob-2:rgba(52,183,241,.20); --wa-blob-3:rgba(18,140,126,.26); --wa-glass:rgba(255,255,255,.62); --wa-glass-2:rgba(255,255,255,.78); --wa-glass-hi:rgba(255,255,255,.75); --wa-border:rgba(7,94,84,.14); --wa-border-strong:rgba(7,94,84,.22); --wa-text:#0c2e26; --wa-text-dim:rgba(12,46,38,.66); --wa-text-mute:rgba(12,46,38,.45); --wa-heading:#063a31; --wa-input-bg:rgba(255,255,255,.55); --wa-input-bg-focus:rgba(255,255,255,.92); --wa-shadow:0 20px 50px -26px rgba(7,94,84,.40), 0 4px 14px -8px rgba(7,94,84,.18); --wa-shadow-lift:0 36px 70px -28px rgba(7,94,84,.45), 0 10px 24px -12px rgba(7,94,84,.22); --wa-glow:0 0 0 1px rgba(37,211,102,.35), 0 12px 34px -12px rgba(37,211,102,.40); } /* ----------------------------- BASE ---------------------------------- */ html,body{ height:100%; } /* template sets html{background:#fff}; make the page base green so no white shows behind the glass */ html{ background:var(--wa-bg-2) !important; } body, body.fix-sidebar{ font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif !important; color:var(--wa-text) !important; background: radial-gradient(1200px 800px at 12% -10%, var(--wa-blob-1), transparent 60%), radial-gradient(1000px 700px at 110% 10%, var(--wa-blob-2), transparent 55%), radial-gradient(900px 900px at 50% 120%, var(--wa-blob-3), transparent 55%), linear-gradient(135deg, var(--wa-bg-1), var(--wa-bg-2) 55%, var(--wa-bg-3)) !important; background-attachment:fixed !important; letter-spacing:.1px; -webkit-font-smoothing:antialiased; transition:background .6s var(--wa-ease), color .3s ease; } /* slow fluidic drift behind the glass */ body::before{ content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none; background: radial-gradient(38% 38% at 20% 30%, var(--wa-blob-1), transparent 70%), radial-gradient(34% 34% at 80% 65%, var(--wa-blob-3), transparent 70%), radial-gradient(30% 30% at 60% 15%, var(--wa-blob-2), transparent 70%); filter:blur(40px) saturate(140%); opacity:.9; animation:wa-drift 26s var(--wa-ease) infinite alternate; } @keyframes wa-drift{ 0%{ transform:translate3d(0,0,0) scale(1) rotate(0deg); } 50%{ transform:translate3d(2%,-3%,0) scale(1.08) rotate(4deg); } 100%{ transform:translate3d(-2%,2%,0) scale(1.04) rotate(-3deg); } } #wrapper{ position:relative; z-index:1; } h1,h2,h3,h4,h5,.box-title,.page-title{ font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif !important; color:var(--wa-heading) !important; letter-spacing:-.01em; } a{ color:var(--wa-green); transition:color .2s ease; } a:hover,a:focus{ color:var(--wa-teal); text-decoration:none; } /* scrollbars */ *{ scrollbar-width:thin; scrollbar-color:var(--wa-teal) transparent; } *::-webkit-scrollbar{ width:10px; height:10px; } *::-webkit-scrollbar-thumb{ background:linear-gradient(var(--wa-green),var(--wa-teal)); border-radius:20px; border:2px solid transparent; background-clip:padding-box; } *::-webkit-scrollbar-track{ background:transparent; } ::selection{ background:var(--wa-green); color:#04130f; } /* glass utility used across components */ .wa-glass, .white-box,.card,.panel,.box,.modal-content,.dropdown-menu, .right-sidebar,.steamline,.table-responsive.custom-table{ background:var(--wa-glass) !important; -webkit-backdrop-filter:blur(var(--wa-blur)) saturate(160%); backdrop-filter:blur(var(--wa-blur)) saturate(160%); border:1px solid var(--wa-border) !important; border-radius:var(--wa-radius) !important; box-shadow:var(--wa-shadow), inset 0 1px 0 var(--wa-glass-hi) !important; } /* ---------------------------- TOP BAR -------------------------------- */ .navbar.navbar-default.navbar-static-top, .navbar.navbar-default{ display:block !important; position:fixed !important; top:0; left:0; right:0; z-index:1030; min-height:var(--wa-topbar-h) !important; height:var(--wa-topbar-h) !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } .navbar .navbar-header{ display:flex !important; align-items:center; gap:4px; flex-wrap:nowrap; width:100% !important; max-width:none !important; float:none !important; position:relative; height:var(--wa-topbar-h) !important; margin:10px 16px 0 16px !important; padding:0 14px 0 0 !important; background:var(--wa-glass-2) !important; -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); border:1px solid var(--wa-border) !important; border-radius:var(--wa-radius) !important; box-shadow:var(--wa-shadow), inset 0 1px 0 var(--wa-glass-hi) !important; } .top-left-part, .fix-sidebar .top-left-part{ position:static !important; display:flex !important; align-items:center; background:transparent !important; height:var(--wa-topbar-h) !important; width:auto !important; border:0 !important; float:none !important; } /* template offsets the top-links by the sidebar width in fix-sidebar mode — reset for our flex bar */ .navbar-top-links.navbar-left, .fix-sidebar .navbar-left{ margin-left:0 !important; } a.logo{ display:flex; align-items:center; gap:10px; line-height:var(--wa-topbar-h) !important; height:var(--wa-topbar-h); padding:0 14px 0 8px !important; } a.logo strong,a.logo span{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:800 !important; font-size:21px; letter-spacing:-.02em; background:linear-gradient(120deg,var(--wa-green),var(--wa-blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } a.logo::before{ content:""; width:30px; height:30px; border-radius:9px; flex:0 0 auto; background:linear-gradient(140deg,var(--wa-green),var(--wa-teal-deep)); box-shadow:0 6px 16px -6px var(--wa-green), inset 0 1px 0 rgba(255,255,255,.4); -webkit-mask:none; } .navbar-top-links.navbar-left{ float:left; margin:0; height:var(--wa-topbar-h); display:flex; align-items:center; } .navbar-top-links.navbar-left>li>a{ color:var(--wa-text-dim) !important; font-weight:700; letter-spacing:.14em; font-size:11px; text-transform:uppercase; } .total-credit{ position:static !important; float:right; display:inline-flex; align-items:center; gap:6px; margin:0 6px !important; padding:0 16px !important; height:38px; color:var(--wa-text) !important; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif !important; background:linear-gradient(135deg,rgba(37,211,102,.18),rgba(52,183,241,.14)) !important; border:1px solid var(--wa-border-strong); border-radius:30px; box-shadow:inset 0 1px 0 var(--wa-glass-hi); } .total-credit .hide-menu{ font-family:'JetBrains Mono',monospace; color:var(--wa-green); } /* profile button */ .btn.dropdown-toggle.profile{ background:var(--wa-input-bg) !important; color:var(--wa-text) !important; border:1px solid var(--wa-border) !important; border-radius:30px !important; height:42px; margin:0 4px !important; padding:0 14px 0 6px !important; display:inline-flex; align-items:center; gap:8px; font-weight:600; box-shadow:none !important; transition:all .25s var(--wa-ease); } .btn.dropdown-toggle.profile:hover{ background:var(--wa-input-bg-focus) !important; border-color:var(--wa-green) !important; box-shadow:var(--wa-glow) !important; } .btn.dropdown-toggle.profile img,.profile .menu-ico{ width:30px !important; height:30px !important; border-radius:50%; object-fit:cover; border:2px solid var(--wa-green); margin:0 !important; } .dropdown-menu.profile-wth{ margin-top:8px; padding:8px !important; min-width:210px; } .dropdown-menu>li>a{ color:var(--wa-text) !important; border-radius:10px; padding:10px 12px !important; display:flex; align-items:center; gap:10px; transition:all .2s ease; } .dropdown-menu>li>a:hover{ background:rgba(37,211,102,.14) !important; color:var(--wa-green) !important; } .dropdown-menu>li>a img{ width:22px !important; height:22px !important; filter:brightness(0) !important; opacity:.55; } :root[data-theme="dark"] .dropdown-menu>li>a img{ filter:brightness(0) invert(1) !important; opacity:.7; } .dropdown-menu>li>a:hover img{ filter:var(--wa-green-filter) !important; opacity:1; } /* ---------------------------- SIDEBAR -------------------------------- */ .navbar-default.sidebar{ position:fixed !important; top:var(--wa-top-offset) !important; left:14px !important; bottom:14px !important; width:var(--wa-side-w) !important; margin:0 !important; padding:0 !important; z-index:1025; background:var(--wa-glass-2) !important; -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); border:1px solid var(--wa-border) !important; border-radius:var(--wa-radius-lg) !important; box-shadow:var(--wa-shadow), inset 0 1px 0 var(--wa-glass-hi) !important; overflow-x:hidden; overflow-y:auto; transition:width .35s var(--wa-ease), transform .35s var(--wa-ease); } /* Neutralize slimScroll's fixed-width wrapper so the sidebar can collapse cleanly (native scroll instead) */ .sidebar .sidebar-nav, .sidebar .slimscrollsidebar, .navbar-default.sidebar .slimScrollDiv{ width:100% !important; height:auto !important; max-height:none !important; overflow:visible !important; background:transparent !important; } .navbar-default.sidebar .slimScrollBar, .navbar-default.sidebar .slimScrollRail{ display:none !important; } /* keep the menu visible inside the fixed glass sidebar (Bootstrap collapses .navbar-collapse) */ .navbar-default.sidebar .navbar-collapse{ display:block !important; height:auto !important; max-height:none !important; padding:0 !important; overflow:visible !important; } /* template makes #side-menu position:fixed width:230px — make it flow inside the sidebar so it follows the width (incl. collapse) */ #side-menu{ position:static !important; width:100% !important; overflow:visible !important; top:auto !important; bottom:auto !important; height:auto !important; padding:14px 12px !important; } #side-menu>li{ margin:3px 0; } #side-menu li a{ color:var(--wa-text-dim) !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:600; font-size:14.5px; border:0 !important; border-radius:14px !important; padding:12px 14px !important; display:flex; align-items:center; gap:4px; white-space:nowrap; position:relative; transition:all .25s var(--wa-ease); } #side-menu li a .menu-ico,#side-menu li a img{ width:24px !important; height:24px; margin-right:12px !important; flex:0 0 auto; transition:transform .25s var(--wa-ease), filter .2s ease, opacity .2s ease; } /* monochrome menu icons: dark-slate silhouettes in light theme, white in dark theme */ #side-menu li a img{ filter:brightness(0) !important; opacity:.5; } :root[data-theme="dark"] #side-menu li a img{ filter:brightness(0) invert(1) !important; opacity:.72; } #side-menu>li>a:hover,#side-menu>li>a:focus{ background:rgba(37,211,102,.12) !important; color:var(--wa-heading) !important; transform:translateX(3px); } #side-menu>li>a:hover img{ transform:scale(1.12); } #side-menu>li>a.active,#side-menu>li.active>a{ background:linear-gradient(120deg,rgba(37,211,102,.24),rgba(18,140,126,.16)) !important; color:var(--wa-heading) !important; font-weight:700; box-shadow:inset 0 1px 0 var(--wa-glass-hi); } /* active / hover menu icons -> green (both themes) */ #side-menu>li>a:hover img,#side-menu>li>a.active img,#side-menu>li.active>a img, #side-menu .nav-second-level li a:hover img,#side-menu .nav-second-level li a.active img, #side-menu ul>li>a.active img{ filter:var(--wa-green-filter) !important; opacity:1 !important; } #side-menu>li>a.active::before{ content:""; position:absolute; left:-12px; top:18%; bottom:18%; width:4px; border-radius:4px; background:linear-gradient(var(--wa-green),var(--wa-blue)); box-shadow:0 0 12px var(--wa-green); } /* nested submenu: indented, with a vertical guide line */ .nav .nav-second-level{ position:relative; padding:2px 0 4px 30px !important; margin:2px 0 6px; list-style:none; } .nav .nav-second-level::before{ content:""; position:absolute; left:24px; top:2px; bottom:8px; width:2px; border-radius:2px; background:var(--wa-border-strong); } #side-menu .nav-second-level li a{ font-size:13px !important; color:var(--wa-text-mute) !important; padding:8px 12px !important; border-radius:10px !important; } #side-menu .nav-second-level li a img,#side-menu .nav-second-level li a .menu-ico{ width:18px !important; height:18px !important; margin-right:10px !important; } #side-menu .nav-second-level li a:hover{ color:var(--wa-green) !important; background:rgba(37,211,102,.10) !important; } #side-menu .nav-second-level li a.active,#side-menu ul>li>a.active{ color:var(--wa-green) !important; background:rgba(37,211,102,.16) !important; font-weight:600; } .fa.arrow{ color:var(--wa-text-mute); } /* admin sidebar credit line */ .sidebar #side-menu>li b{ color:var(--wa-text-dim); } .sidebar #side-menu>li b span{ color:var(--wa-green) !important; font-family:'JetBrains Mono',monospace; } /* ------------------------ COLLAPSED SIDEBAR -------------------------- */ html.wa-collapsed .navbar-default.sidebar{ width:var(--wa-side-w-collapsed) !important; } html.wa-collapsed #side-menu{ padding:14px 8px !important; } html.wa-collapsed #side-menu li a{ justify-content:center !important; padding:12px 0 !important; } html.wa-collapsed #side-menu li a .menu-ico,html.wa-collapsed #side-menu li a img{ margin:0 !important; } /* hide ALL top-level label text in collapsed mode (incl. bare text not wrapped in .hide-menu, e.g. standalone "Credit Report") */ html.wa-collapsed #side-menu>li>a{ font-size:0 !important; } html.wa-collapsed #side-menu>li>a .menu-ico,html.wa-collapsed #side-menu>li>a img{ font-size:initial !important; } html.wa-collapsed #side-menu .hide-menu, html.wa-collapsed #side-menu .fa.arrow, html.wa-collapsed #side-menu .nav-second-level, html.wa-collapsed #side-menu>li b{ display:none !important; } html.wa-collapsed #page-wrapper{ margin-left:calc(var(--wa-side-w-collapsed) + 28px) !important; } /* --------------------------- PAGE BODY ------------------------------- */ #page-wrapper{ display:flex !important; flex-direction:column; box-sizing:border-box !important; margin:0 0 0 calc(var(--wa-side-w) + 28px) !important; /* top padding (not margin) = topbar offset, so it stays inside the box and adds no extra scroll height */ padding:var(--wa-top-offset) 26px 22px 26px !important; min-height:100vh !important; background:transparent !important; transition:margin-left .35s var(--wa-ease); } /* sticky footer: content grows to fill, footer sits at the bottom (no mid-page float / extra scroll) */ #page-wrapper>.container-fluid{ flex:1 0 auto; } #page-wrapper>.footer{ flex:0 0 auto; } .container-fluid{ padding:0 !important; } .row.bg-title,.bg-title{ background:transparent !important; border:0 !important; box-shadow:none !important; margin:0 0 22px !important; padding:6px 4px !important; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; } .page-title{ font-size:26px !important; font-weight:800 !important; margin:0 0 2px !important; } .bg-title span{ color:var(--wa-text-dim); } .breadcrumb{ background:var(--wa-glass) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--wa-border); border-radius:30px !important; padding:8px 16px !important; margin:0 !important; float:right; } .breadcrumb>li,.breadcrumb a{ color:var(--wa-text-dim) !important; } .breadcrumb .active,.bg-title .breadcrumb .active{ color:var(--wa-green) !important; } /* cards */ .white-box,.card,.panel{ padding:24px !important; margin-bottom:24px; transition:transform .4s var(--wa-ease), box-shadow .4s var(--wa-ease), border-color .3s ease; } .white-box:hover,.card:hover,.panel:hover{ transform:translateY(-5px); box-shadow:var(--wa-shadow-lift), inset 0 1px 0 var(--wa-glass-hi) !important; border-color:var(--wa-border-strong) !important; } .box-title{ font-size:14px !important; text-transform:uppercase; letter-spacing:.08em; color:var(--wa-text-dim) !important; font-weight:700 !important; margin:0 0 14px !important; } .white-box h1{ color:var(--wa-heading) !important; font-family:'Bricolage Grotesque',sans-serif !important; font-size:2.6rem !important; display:flex; align-items:center; } .dashboard-ico{ width:46px; margin-right:14px; filter:var(--wa-green-filter); } /* ---------------------------- BUTTONS -------------------------------- */ .btn{ border-radius:12px !important; font-weight:700 !important; letter-spacing:.02em; border:0; transition:all .28s var(--wa-ease); position:relative; overflow:hidden; } .btn-info,.btn-primary,.btn-custom,.button--primary,.btn-success{ background:linear-gradient(135deg,var(--wa-green),var(--wa-teal)) !important; color:#04130f !important; box-shadow:0 12px 26px -12px var(--wa-green), inset 0 1px 0 rgba(255,255,255,.4) !important; } .btn-info:hover,.btn-primary:hover,.btn-custom:hover,.button--primary:hover,.btn-success:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px var(--wa-green), inset 0 1px 0 rgba(255,255,255,.5) !important; color:#04130f !important; opacity:1 !important; } .btn-danger{ background:linear-gradient(135deg,#ff5d5d,#d63a3a) !important; color:#fff !important; box-shadow:0 12px 26px -12px rgba(214,58,58,.7) !important; } .btn-warning{ background:linear-gradient(135deg,#ffd166,#f0a92c) !important; color:#3a2a00 !important; } .btn-default,.btn-secondary{ background:var(--wa-input-bg) !important; color:var(--wa-text) !important; border:1px solid var(--wa-border) !important; } .btn-default:hover,.btn-secondary:hover{ background:var(--wa-input-bg-focus) !important; border-color:var(--wa-green) !important; } /* sheen sweep */ .btn::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transition:left .6s var(--wa-ease); } .btn:hover::after{ left:140%; } /* status pill reuse */ .btn-success{ display:inline-block; } /* template ".button--primary" (deliveryapp/search) — kill the navy skew fill, make it green */ .button{ background:transparent !important; border-radius:12px !important; } .button--primary{ background:linear-gradient(135deg,var(--wa-green),var(--wa-teal)) !important; color:#04130f !important; border-radius:12px !important; box-shadow:0 12px 26px -12px var(--wa-green), inset 0 1px 0 rgba(255,255,255,.4) !important; } .button--primary::before{ background:rgba(255,255,255,.20) !important; } .button--primary span{ color:#04130f !important; position:relative; } /* ----------------------------- FORMS --------------------------------- */ .form-control,select.form-control,textarea.form-control,.input-group .form-control{ background:var(--wa-input-bg) !important; color:var(--wa-text) !important; border:1px solid var(--wa-border) !important; border-radius:12px !important; box-shadow:none !important; transition:all .25s var(--wa-ease); height:auto; padding:11px 14px !important; } .form-control::placeholder{ color:var(--wa-text-mute) !important; } .form-control:focus{ background:var(--wa-input-bg-focus) !important; border-color:var(--wa-green) !important; box-shadow:0 0 0 4px rgba(37,211,102,.18) !important; outline:none; } label,.custom-form label{ color:var(--wa-text-dim) !important; font-weight:600; } .input-group-addon{ background:rgba(37,211,102,.14) !important; color:var(--wa-green) !important; border:1px solid var(--wa-border) !important; border-radius:12px 0 0 12px !important; } .input-group .form-control{ border-radius:0 12px 12px 0 !important; } .custom-form .img-thumbnail,.img-thumbnail{ background:var(--wa-input-bg) !important; border:1px solid var(--wa-border) !important; border-radius:12px !important; } .checkbox label,.radio label{ color:var(--wa-text-dim) !important; } .mandatory{ color:#ff7a7a !important; } /* Fix (2026-07-10): long unbreakable strings — an email value, or one-word labels like "Description" — overflowing a narrow Bootstrap flex column (col-lg-2/4/6) and overlapping the adjacent label/field. Flex items default to min-width:auto so they won't shrink below their content width; reset to 0 + allow wrap. */ .form-group.row > [class*="col-"]{ min-width:0; overflow-wrap:break-word; word-break:break-word; } .form-group.row > label{ min-width:0; overflow-wrap:break-word; } /* ===================== DASHBOARD (index.php) redesign 2026-07-15 ===================== */ .wa-stats{ display:flex; flex-wrap:wrap; gap:22px; margin:6px 0 26px; } .wa-stats > [class*="col-"]{ flex:1 1 calc(33.333% - 15px); min-width:210px; max-width:calc(33.333% - 15px); width:auto; padding:0; } .white-box.wa-stat{ position:relative; overflow:hidden; min-height:158px; display:flex; padding:22px 24px !important; margin:0; } .white-box.wa-stat .wa-stat-a{ display:flex; flex-direction:column; gap:16px; width:100%; text-decoration:none !important; color:inherit; } .wa-stat-head{ display:flex; align-items:center; gap:13px; } .wa-stat-ico{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; flex:0 0 46px; border-radius:14px; color:var(--wa-green); background:rgba(37,211,102,.14); border:1px solid var(--wa-border); box-shadow:inset 0 1px 0 var(--wa-glass-hi); transition:all .3s var(--wa-ease); } .wa-stat-ico svg{ width:23px; height:23px; } .wa-stat-label{ font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--wa-text-dim) !important; line-height:1.25; margin:0; overflow-wrap:break-word; min-width:0; } .wa-stat-value{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:2.7rem; line-height:1; color:var(--wa-heading) !important; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:auto; } .white-box.wa-stat::after{ content:""; position:absolute; right:-46px; top:-46px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle,rgba(37,211,102,.17),transparent 70%); pointer-events:none; } .white-box.wa-stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--wa-green),transparent); opacity:.7; } .white-box.wa-stat:hover .wa-stat-ico{ background:rgba(37,211,102,.24); transform:translateY(-2px); } @media (max-width:575px){ .wa-stats > [class*="col-"]{ flex:1 1 100%; max-width:none; min-width:0; } } .white-box.wa-recent{ padding:24px 26px !important; } .wa-recent .box-title{ margin:0 0 8px !important; } .wa-recent table{ width:100%; border-collapse:collapse; margin:0; } .wa-recent th{ font-family:'Plus Jakarta Sans',sans-serif; text-transform:uppercase; letter-spacing:.07em; font-size:11.5px; font-weight:700; color:var(--wa-text-dim) !important; text-align:left; padding:12px 14px; border-bottom:1px solid var(--wa-border-strong); } .wa-recent td{ padding:15px 14px; border-bottom:1px solid var(--wa-border); color:var(--wa-text); vertical-align:middle; } .wa-recent tbody tr:last-child td{ border-bottom:0; } .wa-recent tbody tr{ transition:background .2s ease; } .wa-recent tbody tr:hover{ background:rgba(37,211,102,.06); } .wa-recent .wa-sno{ color:var(--wa-text-mute); font-family:'JetBrains Mono',monospace; font-weight:700; } .wa-recent .wa-user{ font-weight:600; } .wa-recent .wa-empty{ text-align:center; color:var(--wa-text-mute); padding:26px; } .wa-msgcount{ font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--wa-green); background:rgba(37,211,102,.10); padding:4px 10px; border-radius:8px; font-size:13px; } .wa-status{ display:inline-block; padding:6px 15px; border-radius:999px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; text-transform:capitalize; letter-spacing:.02em; box-shadow:0 4px 12px -4px rgba(0,0,0,.4); } .wa-status--delivered{ color:#04130f; background:linear-gradient(135deg,#25d366,#128c7e); } .wa-status--pending,.wa-status--process{ color:#3a2c00; background:linear-gradient(135deg,#ffd454,#f0a800); } .wa-status--discard,.wa-status--failed{ color:#fff; background:linear-gradient(135deg,#ff6b6b,#d63a3a); } /* ----------------------------- TABLES -------------------------------- */ .table{ color:var(--wa-text) !important; border-collapse:separate !important; border-spacing:0; } .table>thead>tr>th,.table>thead>th,.custom-table.table-responsive th{ color:var(--wa-text-dim) !important; text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:700; border-bottom:1px solid var(--wa-border-strong) !important; background:rgba(37,211,102,.07) !important; padding:14px 12px !important; } .table>tbody>tr>td,.table td,.table th{ border-color:var(--wa-border) !important; color:var(--wa-text) !important; padding:13px 12px !important; vertical-align:middle; } .table.table-bordered,.table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{ border-color:var(--wa-border) !important; } /* force themed row colors over DataTables/Bootstrap white striping (fixes invisible text on white rows) */ .table>tbody>tr,.table>tbody>tr>td, table.dataTable>tbody>tr,table.dataTable>tbody>tr>td{ background-color:transparent !important; color:var(--wa-text) !important; } .table-striped>tbody>tr:nth-of-type(odd), table.dataTable>tbody>tr.odd,table.dataTable.stripe>tbody>tr.odd,table.dataTable.display>tbody>tr.odd{ background-color:rgba(255,255,255,.05) !important; } :root[data-theme="light"] .table-striped>tbody>tr:nth-of-type(odd), :root[data-theme="light"] table.dataTable>tbody>tr.odd{ background-color:rgba(7,94,84,.05) !important; } .table>tbody>tr:hover,table.dataTable>tbody>tr:hover{ background-color:rgba(37,211,102,.12) !important; } .table thead tr>th:first-child{ border-top-left-radius:12px; } .table thead tr>th:last-child{ border-top-right-radius:12px; } /* DataTables chrome */ .dataTables_wrapper{ color:var(--wa-text-dim) !important; } .dataTables_filter input,.dataTables_length select, .custom-table.table-responsive .dataTables_length select,.custom-table.table-responsive .dataTables_filter input{ background:var(--wa-input-bg) !important; color:var(--wa-text) !important; border:1px solid var(--wa-border) !important; border-radius:10px !important; padding:8px 12px !important; } .dataTables_wrapper .dataTables_paginate .paginate_button, .custom-table.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button{ background:var(--wa-input-bg) !important; border:1px solid var(--wa-border) !important; border-radius:10px !important; color:var(--wa-text-dim) !important; margin:0 3px !important; padding:6px 12px !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .custom-table.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:linear-gradient(135deg,var(--wa-green),var(--wa-teal)) !important; color:#04130f !important; border-color:transparent !important; } table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after{ color:var(--wa-green); } .dt-button,.buttons-csv,.buttons-html5{ background:linear-gradient(135deg,var(--wa-green),var(--wa-teal)) !important; color:#04130f !important; border:0 !important; border-radius:10px !important; font-weight:700; padding:8px 16px !important; } /* ----------------------------- ALERTS -------------------------------- */ .alert{ border:1px solid var(--wa-border) !important; border-radius:14px !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--wa-text) !important; box-shadow:var(--wa-shadow); } .alert-success{ background:rgba(37,211,102,.16) !important; border-color:rgba(37,211,102,.4) !important; } .alert-danger{ background:rgba(255,93,93,.16) !important; border-color:rgba(255,93,93,.4) !important; } .alert-info{ background:rgba(52,183,241,.16) !important; border-color:rgba(52,183,241,.4) !important; } .alert-warning{ background:rgba(255,193,80,.18) !important; border-color:rgba(255,193,80,.5) !important; color:var(--wa-text) !important; } .alert .close{ color:var(--wa-text) !important; opacity:.7; text-shadow:none; } /* low-balance banner */ .wa-lowbal{ display:flex; align-items:center; gap:10px; font-weight:600; } .wa-lowbal::before{ content:"⚠"; font-size:20px; } /* table action buttons: consistent circular size + tidy wrapping */ td .btn-circle,.btn-circle{ width:34px !important; height:34px !important; padding:0 !important; line-height:1 !important; display:inline-flex !important; align-items:center; justify-content:center; border-radius:50% !important; margin:2px !important; } .btn-circle.btn-sm{ width:30px !important; height:30px !important; } td:has(.btn-circle),.action-cell{ white-space:nowrap; } /* --------------------- MODALS / DROPDOWNS / TABS --------------------- */ .modal-content{ padding:6px !important; } .modal-header,.modal-footer{ border-color:var(--wa-border) !important; } .modal-title{ color:var(--wa-heading) !important; } .modal-backdrop.in{ opacity:.55; background:#02100c; } .nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover, .customtab li.active a,.customtab li.active a:hover{ background:linear-gradient(135deg,var(--wa-green),var(--wa-teal)) !important; color:#04130f !important; border-color:transparent !important; } /* --------------------------- PLUGINS --------------------------------- */ /* select2 */ .select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{ background:var(--wa-input-bg) !important; border:1px solid var(--wa-border) !important; border-radius:12px !important; color:var(--wa-text) !important; min-height:44px; } .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--wa-text) !important; line-height:42px; } .select2-dropdown{ background:var(--wa-glass-2) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--wa-border) !important; border-radius:12px !important; color:var(--wa-text) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--wa-green) !important; color:#04130f !important; } .select2-search--dropdown .select2-search__field{ background:var(--wa-input-bg) !important; color:var(--wa-text) !important; border:1px solid var(--wa-border) !important; border-radius:8px; } .select2-container--default .select2-selection--multiple .select2-selection__choice{ background:rgba(37,211,102,.2) !important; border:0 !important; color:var(--wa-text) !important; border-radius:8px; } /* summernote */ .note-editor.note-frame,.note-editor.note-airframe{ border:1px solid var(--wa-border) !important; border-radius:14px !important; overflow:hidden; background:var(--wa-input-bg) !important; } .note-toolbar,.note-editor .note-toolbar{ background:var(--wa-glass-2) !important; border-bottom:1px solid var(--wa-border) !important; } .note-editable{ background:transparent !important; color:var(--wa-text) !important; } .note-btn,.note-editor .btn-default{ background:var(--wa-input-bg) !important; color:var(--wa-text) !important; border:1px solid var(--wa-border) !important; } /* alertify */ .alertify-notifier .ajs-message{ background:var(--wa-glass-2) !important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--wa-border) !important; border-radius:12px !important; color:var(--wa-text) !important; box-shadow:var(--wa-shadow) !important; } .alertify-notifier .ajs-message.ajs-success{ border-color:rgba(37,211,102,.5) !important; } /* bootstrap-treeview */ .treeview .list-group-item,.list-group-item{ background:var(--wa-glass) !important; color:var(--wa-text) !important; border:1px solid var(--wa-border) !important; border-radius:10px !important; margin-bottom:6px; } .treeview span.indent{ color:var(--wa-text-mute); } .treeview .list-group-item:hover,.list-group-item:hover{ background:rgba(37,211,102,.12) !important; } /* magnific popup is overlay only - leave */ /* footer */ .footer{ background:transparent !important; color:var(--wa-text-mute) !important; padding:18px !important; margin-top:20px; border-top:1px solid var(--wa-border); } .footer a{ color:var(--wa-green) !important; } /* ---------------------- THEME / SIDEBAR TOGGLES ---------------------- */ .wa-iconbtn{ -webkit-appearance:none; appearance:none; cursor:pointer; width:42px; height:42px; border-radius:50%; border:1px solid var(--wa-border); background:var(--wa-input-bg); color:var(--wa-text); font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:all .25s var(--wa-ease); } .wa-iconbtn:hover{ background:var(--wa-input-bg-focus); border-color:var(--wa-green); color:var(--wa-green); box-shadow:var(--wa-glow); transform:translateY(-1px); } #wa-sidebar-toggle{ margin:0 2px 0 4px !important; } #wa-theme-toggle{ margin:0 6px 0 2px !important; } /* topbar flex ordering — robust across both shells */ .navbar .navbar-header>*{ flex:0 0 auto; } .navbar .navbar-header>.navbar-toggle{ order:0; } .navbar .navbar-header>#wa-sidebar-toggle{ order:1; } .navbar .navbar-header>.top-left-part{ order:2; margin-right:auto !important; } .navbar .navbar-header>.navbar-top-links{ order:5; } .navbar .navbar-header>.total-credit{ order:6; } .navbar .navbar-header>#wa-theme-toggle{ order:7; } .navbar .navbar-header>.profile{ order:8; } .navbar .navbar-header>.dropdown-menu{ order:9; } /* floating toggle for standalone pages (login/register) */ .wa-float-toggles{ position:fixed; top:18px; right:18px; z-index:2000; display:flex; gap:10px; } :root[data-theme="dark"] .wa-theme-sun{ display:inline; } :root[data-theme="dark"] .wa-theme-moon{ display:none; } :root[data-theme="light"] .wa-theme-sun{ display:none; } :root[data-theme="light"] .wa-theme-moon{ display:inline; } /* --------------------------- LOGIN / REGISTER ------------------------ */ .preloader{ background:linear-gradient(135deg,var(--wa-bg-1),var(--wa-bg-2)) !important; } section#wrapper.login-register{ position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; background:transparent !important; padding:24px; } .login-register .login-box{ width:100%; max-width:430px; } .login-register .white-box{ padding:38px 34px !important; border-radius:var(--wa-radius-lg) !important; background:var(--wa-glass-2) !important; box-shadow:var(--wa-shadow-lift), inset 0 1px 0 var(--wa-glass-hi) !important; } .login-register .white-box:hover{ transform:none; } .logo-login-design{ display:inline-flex; align-items:center; justify-content:center; width:78px; height:78px; border-radius:24px; margin-bottom:6px; font-size:32px; color:#04130f; background:linear-gradient(140deg,var(--wa-green),var(--wa-teal-deep)); box-shadow:0 16px 36px -12px var(--wa-green), inset 0 1px 0 rgba(255,255,255,.5); animation:wa-float 5s var(--wa-ease) infinite alternate; } @keyframes wa-float{ from{ transform:translateY(0); } to{ transform:translateY(-8px); } } .login-register .box-title{ font-size:21px !important; color:var(--wa-heading) !important; text-transform:none; letter-spacing:-.01em; } .error-ul{ list-style:none; padding:0; margin:0; } /* ----------------------------- RESPONSIVE ---------------------------- */ @media (max-width:991px){ .navbar-default.sidebar{ transform:translateX(-115%); } html.wa-mobile-open .navbar-default.sidebar{ transform:translateX(0); } #page-wrapper,html.wa-collapsed #page-wrapper{ margin-left:0 !important; } .total-credit{ display:none !important; } } @media (max-width:575px){ .navbar .navbar-header{ margin:8px !important; } #page-wrapper{ padding:16px !important; } .breadcrumb{ float:none; display:inline-block; margin-top:8px !important; } } /* staggered page-load reveal for cards */ @keyframes wa-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } .white-box,.card{ animation:wa-rise .5s var(--wa-ease) both; } .row:nth-child(1) .white-box{ animation-delay:.04s; } .row:nth-child(2) .white-box{ animation-delay:.10s; } .row:nth-child(3) .white-box{ animation-delay:.16s; } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } body::before{ animation:none !important; } }