/* ============ TEME EXPERIMENTALE METRIX (sticloase) ============ Fundal bogat (gradiente) + panouri translucide „glass" (backdrop-blur). Palete inspirate din mock-uri, păstrând coloristica METRIX (roșu→roz→violet→albastru). Se aplică prin clase pe : t- (+ .glass pt stil sticlos, +.has-sidebar pt meniu stânga). */ /* ---------- bază GLASS (comună) ---------- */ body.glass{background-attachment:fixed} body.glass .dash{ background:var(--glass-shell); border:1px solid var(--glass-border); backdrop-filter:blur(22px) saturate(1.2); -webkit-backdrop-filter:blur(22px) saturate(1.2); box-shadow:0 32px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); } body.glass .k, body.glass .health, body.glass .hc{ background:var(--glass-panel); border-color:var(--glass-border); } /* interiorul panoului OMOGEN (feedback user): secțiunile mari fără fundal propriu și fără linii */ body.glass .card, body.glass .pt, body.glass #ordCaption, body.glass .prodrow, body.glass .tblwrap{background:transparent} body.glass .body{background:transparent;gap:0} body.glass .pt{border-right:0;border-bottom:0} body.glass .pt:hover{background:var(--glass-panel)} body.glass .prodrow, body.glass #ordCaption{border-top:0} body.glass .kpis{gap:12px;padding:16px 18px;background:transparent} body.glass .kpis .k{ border:1px solid var(--glass-border); border-radius:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } body.glass .body{padding:0 18px 16px} body.glass .card{border:0;border-radius:0} body.glass .seg{background:var(--glass-panel);border:1px solid var(--glass-border);border-radius:12px} body.glass .pill{background:var(--glass-panel);border:1px solid var(--glass-border)} body.glass .hmenu-panel, body.glass .pmenu, body.glass .fxbox{background:var(--glass-shell);backdrop-filter:blur(20px);border:1px solid var(--glass-border)} body.glass .prodrow{border-radius:0;overflow:hidden;margin:0} body.glass .tblwrap{margin:0;border:0;border-radius:0;background:transparent} body.glass .ordtbl thead th{background:transparent} body.glass .top{padding:16px 18px 4px} body.glass .iconbtn:hover{background:var(--glass-panel)} /* ---------- 1. AURORA (violet/albastru) ---------- */ body.t-aurora{background: radial-gradient(1200px 720px at 12% -12%, #2c1a52 0%, transparent 55%), radial-gradient(1000px 620px at 102% -4%, #431436 0%, transparent 50%), radial-gradient(950px 900px at 50% 118%, #12224e 0%, transparent 55%), #0a0812; --glass-shell:rgba(24,20,40,.5); --glass-panel:rgba(255,255,255,.045); --glass-border:rgba(165,140,255,.14); --line:rgba(255,255,255,.06); --line2:rgba(255,255,255,.09); } /* ---------- 2. OCEAN (albastru profund) ---------- */ body.t-ocean{background: radial-gradient(1100px 720px at 8% -8%, #10285a 0%, transparent 55%), radial-gradient(900px 700px at 104% 6%, #1b1256 0%, transparent 55%), radial-gradient(1000px 820px at 50% 120%, #0b2f5c 0%, transparent 55%), #060a15; --glass-shell:rgba(12,22,42,.55); --glass-panel:rgba(255,255,255,.045); --glass-border:rgba(120,175,255,.16); --line:rgba(255,255,255,.06); --line2:rgba(255,255,255,.09); } /* ---------- 4. MIDNIGHT (aproape negru, subtil) ---------- */ body.t-midnight{background: radial-gradient(1200px 800px at 50% -20%, #141824 0%, transparent 60%), radial-gradient(800px 600px at 100% 100%, #1a1330 0%, transparent 55%), #06070b; --glass-shell:rgba(16,18,26,.6); --glass-panel:rgba(255,255,255,.035); --glass-border:rgba(255,255,255,.08); --line:rgba(255,255,255,.05); --line2:rgba(255,255,255,.08); } /* ---------- 5. WHITE 2 (Midnight în ALB: glass deschis, subtil; tokens compleți ca body.white) ---------- */ body.t-white2{background: radial-gradient(1200px 800px at 50% -20%, #e9ebf2 0%, transparent 60%), radial-gradient(800px 600px at 100% 100%, #e8e5f2 0%, transparent 55%), #f6f7fa; --glass-shell:rgba(255,255,255,.65); --glass-panel:rgba(255,255,255,.7); --glass-border:rgba(90,95,125,.16); --bg:#f6f7fa; --shell:#ffffff; --panel:#ffffff; --panel2:#fafafa; --inset:#f2f2f5; --line:rgba(60,65,95,.1); --line2:rgba(60,65,95,.18); --ink:#1d1c2e; --ink-strong:#131226; --ink2:#3f3e55; --mut:#6d6c80; --mut2:#9493a6; --gold:#a07320; --gold2:#8a611a; --goldsoft:#f6edd7; --goldline:#e3d2a4; --green:#1d8a5f; --greenline:#bfe3d2; --greensoft:#e7f4ec; --red:#b14f3c; --redline:#edcbc1; --blue:#356fb0; --blueline:#c2d6ee; --bluesoft:#e8f0f9; --violet:#6a4ca6; --violetline:#d9cdf0; --violetsoft:#efe9fb; --orange:#c96a1f; --logo-ink:#131226; --track:#e5e7f0; --grid:#e9ebf3; --rowline:#eff0f7; --prodbg:#ffffff; } /* fundalul temelor: ancorat de VIEWPORT, nu de înălțimea documentului — altfel „petele" de lumină sar când listele se lungesc/scurtează (shorthand-ul background: din teme reseta attachment la scroll) */ body.glass{background-attachment:fixed !important;min-height:100vh} /* ============ STIL „PANEL" (dashboard în panou de sticlă) ============ Dashboard-ul păstrează lățimea maximă standard, centrat, și NU se mișcă la deschiderea meniului. La Onyx meniul lateral + ☰ din stânga sunt SCOASE: meniul e hamburgerul din DREAPTA (#menuBtn unde există în pagină, altfel .mx-hmenu injectat de themes.js), ca pe prima pagină. Regulile de sidebar/☰ de mai jos rămân pentru o eventuală temă panel cu sidebar:1. */ body.panel .dash{border-radius:24px} body.panel .sb-ctrls{display:none} body.panel .sidebar .sb-top{display:none} body.panel .side-hot{display:none !important} body.panel.has-sidebar .wrap{margin-left:auto} /* ☰ vizibil doar la panel CU meniu lateral; static în header unde există .top (altfel flotant în colț) */ body.panel.has-sidebar .side-show{display:flex} body.panel .top .side-show{position:static;width:34px;height:34px;flex:none;border-radius:10px;background:var(--glass-panel,rgba(255,255,255,.05));border:1px solid var(--glass-border,rgba(255,255,255,.12));color:var(--ink)} body.panel .top .side-show:hover{border-color:var(--line2)} /* meniul flotant: lângă panou, începe sub linia header-ului, înalt cât conținutul (se termină imediat sub Deconectare, padding simetric). Absolut, nu fixed: NU urmărește scroll-ul paginii. */ body.panel .sidebar{position:absolute;left:max(8px,calc(50% - 818px));right:auto;top:92px;bottom:auto;height:auto;z-index:80; border:1px solid var(--glass-border,rgba(255,255,255,.1));border-radius:18px; background:var(--glass-shell,rgba(18,16,28,.62));backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2); box-shadow:0 24px 70px rgba(0,0,0,.45);padding:14px 12px; transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .22s ease} body.panel .sidebar .snav .logout-row{margin-top:6px} body.panel.has-sidebar:not(.side-off) .sidebar{transform:none;opacity:1} body.panel.side-off .sidebar{transform:translateX(170px);opacity:0;pointer-events:none} /* ---------- 15. ONYX (panel — negru grafit + auriu METRIX) ---------- */ body.t-onyx{background:#0a0a0e; --glass-shell:rgba(20,21,28,.5); --glass-panel:rgba(255,255,255,.045); --glass-border:rgba(255,255,255,.1); --line:rgba(255,255,255,.05); --line2:rgba(255,255,255,.08); --side-on:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.06)); } /* meniul hamburger injectat de themes.js (paginile fără #menuBtn) — VIZIBIL pe toate temele/paginile, ca meniul sus-dreapta să fie consistent peste tot (produse/teste/…) */ .mx-hmenu{display:inline-flex} /* fără .top/.controls în pagină: buton flotant în colțul din DREAPTA sus (oglinda vechiului ☰) */ .mx-hmenu.mx-float{position:fixed;top:16px;right:14px;z-index:90} .mx-hmenu.mx-float .hmenu-btn{width:38px;height:38px;border-radius:11px;background:var(--glass-shell,rgba(18,16,28,.7));backdrop-filter:blur(18px);border:1px solid var(--glass-border,rgba(255,255,255,.12));color:var(--ink)} /* meniul se deschide elegant, de sus în jos */ .hmenu-panel:not([hidden]){transform-origin:top right;animation:hmenuDrop .22s cubic-bezier(.4,0,.2,1) both} @keyframes hmenuDrop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}} /* meniuri glass MAI PUȚIN transparente (text lizibil) pe Aurora / Ocean / Midnight / Onyx; White și White 2 rămân cum sunt */ body.t-aurora .hmenu-panel, body.t-aurora .mx-hmenu-panel{background:rgba(26,22,44,.93)} body.t-ocean .hmenu-panel, body.t-ocean .mx-hmenu-panel{background:rgba(12,24,46,.93)} body.t-midnight .hmenu-panel, body.t-midnight .mx-hmenu-panel{background:rgba(18,20,30,.94)} body.t-onyx .hmenu-panel, body.t-onyx .mx-hmenu-panel{background:rgba(22,23,30,.95)} /* popover „Țări comenzi" (glob) de pe dashboard */ .country-pop{z-index:95;min-width:148px;padding:11px 12px;border-radius:14px;transform-origin:top right; animation:hmenuDrop .2s cubic-bezier(.4,0,.2,1); background:var(--panel2,#14161c);border:1px solid var(--line2,rgba(255,255,255,.14)); box-shadow:0 20px 56px rgba(0,0,0,.42)} .country-pop[hidden]{display:none} .country-pop .cptitle{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--mut);margin-bottom:9px} .country-pop .cptitle{text-align:center} .country-pop .mflags{align-items:center} .country-pop .mfrow{justify-content:center} /* ============ SIDEBAR STÂNGA (glass) ============ */ .sidebar{position:fixed;top:0;left:0;bottom:0;width:216px;z-index:60;display:none;flex-direction:column;padding:20px 14px 16px;gap:3px; background:var(--glass-shell,rgba(18,16,28,.62));backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2); border-right:1px solid var(--glass-border,rgba(255,255,255,.08));box-shadow:2px 0 40px rgba(0,0,0,.35);transition:transform .32s cubic-bezier(.4,0,.2,1)} body.has-sidebar .sidebar{display:flex} /* dash-ul stă MEREU centrat la dimensiunea lui (feedback user) — meniul alunecă peste, nu împinge */ body.has-sidebar .wrap{margin-left:auto} .sidebar .sb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:0 6px} .sidebar .sb-logo{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;letter-spacing:.012em;text-transform:uppercase; background:linear-gradient(90deg,#ff4d4d 0%,#ff2d8e 36%,#9b5cff 62%,#3b86ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-decoration:none} .sidebar .sb-ctrls{display:flex;gap:4px} .sidebar .sb-ctrls button{width:26px;height:26px;border-radius:8px;border:1px solid var(--glass-border,rgba(255,255,255,.1));background:transparent;color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s} .sidebar .sb-ctrls button:hover{color:var(--ink);border-color:var(--line2)} .sidebar .sb-ctrls button.on{color:var(--gold2);border-color:var(--gold)} .sidebar #sbPin{display:none} /* pin scos: nu mai există împingere, doar apare/dispare din margine */ .sidebar .sb-ctrls svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2} .sidebar .snav{display:flex;flex-direction:column;gap:2px;overflow-y:auto} .sidebar .snav a,.sidebar .snav button{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--ink2); text-decoration:none;font-size:13.5px;font-family:inherit;background:transparent;border:0;cursor:pointer;width:100%;text-align:left;transition:.15s} .sidebar .snav a:hover,.sidebar .snav button:hover{background:var(--glass-panel,rgba(255,255,255,.06));color:var(--ink-strong)} .sidebar .snav a.on{background:var(--side-on,linear-gradient(90deg,rgba(155,92,255,.28),rgba(59,134,255,.14)));color:#fff} .sidebar .snav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none} .sidebar .snav .logout-row{margin-top:auto;color:var(--red)} /* ascuns complet */ body.side-off .sidebar{transform:translateX(-110%)} body.side-off .wrap{margin-left:auto} /* nefixat (unpinned): overlay peste conținut, apare la hover pe marginea stângă */ body.has-sidebar.side-unpinned .wrap{margin-left:auto} body.has-sidebar.side-unpinned .sidebar{transform:translateX(-110%)} body.has-sidebar.side-unpinned .sidebar:hover, body.has-sidebar.side-unpinned.side-peek .sidebar{transform:translateX(0)} body.side-off.side-unpinned .sidebar{transform:translateX(-110%)} /* buton flotant de dezvăluire (când e ascuns complet) */ .side-show{position:fixed;top:16px;left:14px;z-index:62;display:none;width:38px;height:38px;border-radius:11px;align-items:center;justify-content:center;cursor:pointer; background:var(--glass-shell,rgba(18,16,28,.7));backdrop-filter:blur(18px);border:1px solid var(--glass-border,rgba(255,255,255,.12));color:var(--ink)} .side-show svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2} body.side-off .side-show{display:flex} /* zonă „fierbinte" pe marginea stângă pt peek când e nefixat */ .side-hot{position:fixed;top:0;left:0;bottom:0;width:14px;z-index:59;display:none} body.has-sidebar.side-unpinned .side-hot{display:block} @media(max-width:820px){ body.has-sidebar .wrap{margin-left:auto} body.has-sidebar .sidebar{transform:translateX(-110%)} body.has-sidebar.side-peek .sidebar{transform:translateX(0)} .side-hot{display:block} } /* ---------- picker de teme (drawer vertical pe dreapta, fundal liber ca să vezi tema live) ---------- */ .thememodal{position:fixed;inset:0;z-index:200;display:flex;align-items:stretch;justify-content:flex-end;padding:0;background:transparent} .thememodal[hidden]{display:none} .thememodal .tmcard{width:296px;max-width:86vw;height:100%;overflow-y:auto;background:var(--glass-shell,rgba(20,18,30,.92));border:1px solid var(--glass-border,rgba(255,255,255,.12));border-right:0;border-radius:18px 0 0 18px;padding:18px 18px 24px;backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);box-shadow:-28px 0 80px rgba(0,0,0,.5);animation:tmslide .28s cubic-bezier(.4,0,.2,1)} @keyframes tmslide{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}} .thememodal .tmhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .thememodal .tmhead b{font-family:'Fraunces',serif;font-size:19px;color:var(--ink-strong)} .thememodal .tmsub{font-size:12.5px;color:var(--mut);margin-bottom:16px} .thememodal .tmclose{background:none;border:1px solid var(--line2);color:var(--mut);border-radius:9px;padding:6px 12px;font-family:inherit;font-size:12.5px;cursor:pointer} .thememodal .tmclose:hover{color:var(--ink);border-color:var(--mut2)} .themegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px} .theme-sw{display:flex;flex-direction:column;gap:8px;background:none;border:1.5px solid var(--line2);border-radius:14px;padding:8px;cursor:pointer;transition:.15s;font-family:inherit} .theme-sw:hover{border-color:var(--mut2)} .theme-sw.on{border-color:#9b5cff;box-shadow:0 0 0 3px rgba(155,92,255,.22)} .theme-sw .sw-prev{height:48px;border-radius:9px;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} .theme-sw .sw-name{font-size:12.5px;color:var(--ink2);font-weight:600;text-align:left;display:flex;align-items:center;gap:5px} .theme-sw.on .sw-name{color:var(--ink-strong)} .theme-sw .sw-side{font-size:11px;color:#9b5cff;font-style:normal}