/* YESCAFFE CRM — tema „Liquid Glass” (aspect modern, în stil Apple: sticlă translucidă, blur, colțuri mari, lumină de sus). Se activează cu (Setări → Configurare aplicație → Stil). Tema „clasic” = app.css neschimbat. */ :root[data-style="glass"]{ --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --radius:18px; --blur:22px; --glass:rgba(255,255,255,.52); --glass-2:rgba(255,255,255,.34); --glass-strong:rgba(255,255,255,.74); --glass-line:rgba(255,255,255,.72); --glass-line-2:rgba(28,25,23,.08); --glass-hi:rgba(255,255,255,.85); --glass-shadow:0 10px 34px rgba(40,36,60,.10),0 1px 2px rgba(40,36,60,.05); --glass-shadow-lg:0 30px 80px rgba(40,36,60,.22),0 2px 6px rgba(40,36,60,.08); --bg:#EEF0F5; --surface:#FFFFFF; --surface-2:rgba(28,25,23,.05); --line:rgba(28,25,23,.09); --line-strong:rgba(28,25,23,.16); --ink:#1B1B1F; --muted:#6B6B75; --faint:#9A9AA5; --accent:#6B4632; --accent-ink:#FFFFFF; --accent-soft:#EFE4DC; --accent-line:#C9A98F; --good:#1F8A47; --good-soft:#DDF4E4; --warn:#9A6A0F; --warn-soft:#FBEFD1; --bad:#C0392B; --bad-soft:#F9DEDA; --info:#2F5F8F; --info-soft:#DDE8F3; --shadow:var(--glass-shadow); --blob1:#D9B48F; --blob2:#A9C6EA; --blob3:#F1C7C0; --blob4:#CFE6D8; } @media (prefers-color-scheme: dark){ :root[data-style="glass"]:not([data-theme="light"]){ --glass:rgba(38,38,46,.55); --glass-2:rgba(255,255,255,.05); --glass-strong:rgba(38,38,46,.78); --glass-line:rgba(255,255,255,.12); --glass-line-2:rgba(255,255,255,.06); --glass-hi:rgba(255,255,255,.16); --glass-shadow:0 10px 34px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3); --glass-shadow-lg:0 30px 80px rgba(0,0,0,.6); --bg:#101014; --surface:#1C1C22; --surface-2:rgba(255,255,255,.06); --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --ink:#F2F2F5; --muted:#A5A5B0; --faint:#73737E; --accent:#C8A27E; --accent-ink:#1C1917; --accent-soft:#33281F; --accent-line:#6B4E3A; --good:#6CCB86; --good-soft:#1E3526; --warn:#E3B348; --warn-soft:#3A2E12; --bad:#F08A7E; --bad-soft:#3E1F1B; --info:#8AB4E0; --info-soft:#1C2C3D; --shadow:var(--glass-shadow); --blob1:#4A3222; --blob2:#1E2A48; --blob3:#3A2230; --blob4:#183028; } } :root[data-style="glass"][data-theme="dark"]{ --glass:rgba(38,38,46,.55); --glass-2:rgba(255,255,255,.05); --glass-strong:rgba(38,38,46,.78); --glass-line:rgba(255,255,255,.12); --glass-line-2:rgba(255,255,255,.06); --glass-hi:rgba(255,255,255,.16); --glass-shadow:0 10px 34px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3); --glass-shadow-lg:0 30px 80px rgba(0,0,0,.6); --bg:#101014; --surface:#1C1C22; --surface-2:rgba(255,255,255,.06); --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --ink:#F2F2F5; --muted:#A5A5B0; --faint:#73737E; --accent:#C8A27E; --accent-ink:#1C1917; --accent-soft:#33281F; --accent-line:#6B4E3A; --good:#6CCB86; --good-soft:#1E3526; --warn:#E3B348; --warn-soft:#3A2E12; --bad:#F08A7E; --bad-soft:#3E1F1B; --info:#8AB4E0; --info-soft:#1C2C3D; --shadow:var(--glass-shadow); --blob1:#4A3222; --blob2:#1E2A48; --blob3:#3A2230; --blob4:#183028; } @media (max-width:760px){:root[data-style="glass"]{--blur:16px;--radius:16px}} /* fundal: pete moi de culoare, fixe, în spatele întregii aplicații */ [data-style="glass"] body{background:var(--bg);letter-spacing:-.005em} [data-style="glass"] body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none; background: radial-gradient(42% 38% at 8% 6%,var(--blob1) 0%,transparent 70%), radial-gradient(36% 40% at 92% 12%,var(--blob2) 0%,transparent 70%), radial-gradient(40% 36% at 78% 92%,var(--blob3) 0%,transparent 70%), radial-gradient(34% 30% at 18% 88%,var(--blob4) 0%,transparent 70%), var(--bg); animation:glass-drift 40s ease-in-out infinite alternate} @keyframes glass-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,1.5%,0) scale(1.06)}} @media (prefers-reduced-motion:reduce){[data-style="glass"] body::before{animation:none}} [data-style="glass"] h1,[data-style="glass"] h2,[data-style="glass"] h3{letter-spacing:-.02em} [data-style="glass"] .topbar h1{font-weight:700;font-size:26px} [data-style="glass"] .kpi .v{font-weight:700;letter-spacing:-.03em} /* suprafețe de sticlă */ [data-style="glass"] .panel,[data-style="glass"] .kpi,[data-style="glass"] .card,[data-style="glass"] .vcard,[data-style="glass"] .anncard,[data-style="glass"] .clcard,[data-style="glass"] .pcard,[data-style="glass"] .sigcard,[data-style="glass"] .myveh{ background:linear-gradient(180deg,var(--glass-hi) 0%,rgba(255,255,255,0) 38%) no-repeat,var(--glass); background-size:100% 100%; border:1px solid var(--glass-line);box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(var(--blur)) saturate(170%);backdrop-filter:blur(var(--blur)) saturate(170%)} [data-style="glass"] .panel .pb .kpi,[data-style="glass"] .panel .card,[data-style="glass"] .drawer .kpi,[data-style="glass"] .modal .kpi{ -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-2);border-color:var(--glass-line-2);box-shadow:none} [data-style="glass"] .panel .ph{border-bottom-color:var(--glass-line-2)} [data-style="glass"] .panel+.panel{margin-top:14px} [data-style="glass"] .kpi{border-radius:var(--radius)} [data-style="glass"] .card{border-radius:14px} [data-style="glass"] .kpi:hover,[data-style="glass"] .card:hover,[data-style="glass"] .vcard:hover,[data-style="glass"] .pcard:hover{border-color:var(--glass-line);box-shadow:var(--glass-shadow),0 0 0 1px var(--glass-line-2)} [data-style="glass"] .col{background:var(--glass-2);border:1px solid var(--glass-line-2);border-radius:var(--radius)} [data-style="glass"] .empty{color:var(--muted)} [data-style="glass"] .bulkbar{background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border-radius:999px;box-shadow:var(--glass-shadow)} [data-style="glass"] .phero{border-radius:calc(var(--radius) + 8px)} /* bara laterală: panou de sticlă plutitor */ [data-style="glass"] .app{grid-template-columns:246px 1fr} [data-style="glass"] .side{margin:12px 0 12px 12px;height:calc(100vh - 24px);top:12px;overflow-y:auto;scrollbar-width:thin;border-radius:24px;border:1px solid var(--glass-line); background:linear-gradient(180deg,var(--glass-hi) 0%,rgba(255,255,255,0) 30%) no-repeat,var(--glass); box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(calc(var(--blur) + 8px)) saturate(180%);backdrop-filter:blur(calc(var(--blur) + 8px)) saturate(180%)} [data-style="glass"] .nav button{border-radius:12px;padding:9px 11px;transition:background .18s,color .18s,transform .18s} [data-style="glass"] .nav button:hover{background:var(--glass-2)} [data-style="glass"] .nav button.active{background:var(--glass-strong);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.08),inset 0 1px 0 var(--glass-hi);font-weight:600} [data-style="glass"] .nav button.active .cnt{background:var(--accent);color:var(--accent-ink)} [data-style="glass"] .nav .sep{background:var(--glass-line-2)} [data-style="glass"] .userbox{border-top-color:var(--glass-line-2)} [data-style="glass"] .brand .mark{border-radius:8px;border-width:0;background:var(--glass-strong);box-shadow:inset 0 0 0 1.5px var(--ink)} [data-style="glass"] .brand .mark b{border-radius:6px 0 0 6px} /* butoane, câmpuri */ [data-style="glass"] .btn{border-radius:12px;border:1px solid var(--glass-line);background:linear-gradient(180deg,var(--glass-hi),rgba(255,255,255,0) 60%) no-repeat,var(--glass-strong);box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .15s,box-shadow .15s,background .15s} [data-style="glass"] .btn:hover{background:linear-gradient(180deg,var(--glass-hi),rgba(255,255,255,0) 60%) no-repeat,var(--surface);box-shadow:0 4px 12px rgba(0,0,0,.08)} [data-style="glass"] .btn:active{transform:scale(.97)} [data-style="glass"] .btn.primary{border:0;color:var(--accent-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 82%,#fff) 0%,var(--accent) 55%,color-mix(in srgb,var(--accent) 88%,#000) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px color-mix(in srgb,var(--accent) 38%,transparent)} [data-style="glass"] .btn.primary:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent)} [data-style="glass"] .btn.ghost{border-color:transparent;background:transparent;box-shadow:none} [data-style="glass"] .btn.ghost:hover{background:var(--glass-2)} [data-style="glass"] .btn.sm{border-radius:10px} [data-style="glass"] .iconbtn{border-radius:12px;border-color:var(--glass-line);background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))} [data-style="glass"] input[type=text],[data-style="glass"] input[type=search],[data-style="glass"] input[type=number],[data-style="glass"] input[type=date],[data-style="glass"] input[type=tel],[data-style="glass"] input[type=email],[data-style="glass"] input[type=password],[data-style="glass"] input[type=url],[data-style="glass"] select,[data-style="glass"] textarea{ border-radius:12px;border:1px solid var(--glass-line-2);background:var(--glass-strong);box-shadow:inset 0 1px 2px rgba(0,0,0,.04)} [data-style="glass"] input:focus,[data-style="glass"] select:focus,[data-style="glass"] textarea:focus{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent),inset 0 1px 2px rgba(0,0,0,.04)} [data-style="glass"] .chip{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} [data-style="glass"] .code{border-radius:8px} [data-style="glass"] .swatch{border-radius:10px} /* tabele, liste, file */ [data-style="glass"] th{border-bottom-color:var(--glass-line-2);color:var(--muted)} [data-style="glass"] td{border-bottom-color:var(--glass-line-2)} [data-style="glass"] tr.row:hover td,[data-style="glass"] .item:hover{background:var(--glass-2)} [data-style="glass"] tr.selected td{background:color-mix(in srgb,var(--accent) 10%,transparent)} [data-style="glass"] .item{border-bottom-color:var(--glass-line-2)} [data-style="glass"] .tabs{gap:4px;padding:4px;background:var(--glass-2);border-radius:14px;width:max-content;max-width:100%} [data-style="glass"] .tabs button{border-radius:10px;border-bottom:0;padding:8px 12px;transition:background .18s,color .18s} [data-style="glass"] .tabs button.active{background:var(--glass-strong);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.08),inset 0 1px 0 var(--glass-hi)} [data-style="glass"] .tabs button::after,[data-style="glass"] .tabs button.active::after{display:none} [data-style="glass"] .seg,[data-style="glass"] .authseg,[data-style="glass"] .ptabs{background:var(--glass-2);border-color:var(--glass-line-2);border-radius:999px} [data-style="glass"] .tl .ev .dot{box-shadow:0 0 0 3px var(--glass-2)} /* fișă client / aparat (drawer), ferestre, notificări */ [data-style="glass"] .overlay,[data-style="glass"] .modal-wrap{background:rgba(20,16,12,.28);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)} [data-style="glass"] .drawer{background:linear-gradient(180deg,var(--glass-hi) 0%,rgba(255,255,255,0) 20%) no-repeat,color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(calc(var(--blur) + 14px)) saturate(180%);backdrop-filter:blur(calc(var(--blur) + 14px)) saturate(180%);border-left:1px solid var(--glass-line);box-shadow:var(--glass-shadow-lg)} @media (min-width:761px){[data-style="glass"] .drawer{margin:12px;height:calc(100% - 24px);border-radius:24px;border:1px solid var(--glass-line)}} [data-style="glass"] .drawer section{border-bottom-color:var(--glass-line-2)} [data-style="glass"] .modal{border-radius:22px;border:1px solid var(--glass-line);background:linear-gradient(180deg,var(--glass-hi) 0%,rgba(255,255,255,0) 22%) no-repeat,color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(calc(var(--blur) + 14px)) saturate(180%);backdrop-filter:blur(calc(var(--blur) + 14px)) saturate(180%);box-shadow:var(--glass-shadow-lg)} [data-style="glass"] .modal .mh,[data-style="glass"] .modal .mf{border-color:var(--glass-line-2)} [data-style="glass"] .toast{background:rgba(28,25,23,.78);color:#fff;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.14);box-shadow:var(--glass-shadow-lg);padding:11px 18px} [data-style="glass"] .toast.err{background:color-mix(in srgb,var(--bad) 82%,transparent)} [data-style="glass"] .notif,[data-style="glass"] .annpop,[data-style="glass"] .tour-box,[data-style="glass"] .bell-pop,[data-style="glass"] .welcome .wbox{border-radius:20px;border:1px solid var(--glass-line);background:linear-gradient(180deg,var(--glass-hi) 0%,rgba(255,255,255,0) 30%) no-repeat,color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:blur(calc(var(--blur) + 10px)) saturate(180%);backdrop-filter:blur(calc(var(--blur) + 10px)) saturate(180%);box-shadow:var(--glass-shadow-lg)} [data-style="glass"] .notif{border-left:4px solid var(--accent)} [data-style="glass"] .annpop{border-left:5px solid var(--info)} [data-style="glass"] .bell-pop .ph{background:transparent} [data-style="glass"] .welcome{background:color-mix(in srgb,var(--bg) 40%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} [data-style="glass"] .lightbox{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} /* autentificare & portal clienți */ [data-style="glass"] .auth{background:transparent} [data-style="glass"] .auth .box{border-radius:26px;border:1px solid var(--glass-line);background:linear-gradient(180deg,var(--glass-hi) 0%,rgba(255,255,255,0) 30%) no-repeat,var(--glass);-webkit-backdrop-filter:blur(calc(var(--blur) + 12px)) saturate(180%);backdrop-filter:blur(calc(var(--blur) + 12px)) saturate(180%);box-shadow:var(--glass-shadow-lg)} [data-style="glass"] .auth-bg .orb{opacity:.7} [data-style="glass"] .auth .btn.big{border-radius:14px} [data-style="glass"] .phead{background:linear-gradient(180deg,var(--glass-hi) 0%,rgba(255,255,255,0) 40%) no-repeat,var(--glass);border:1px solid var(--glass-line);border-radius:22px;margin-top:10px;padding-inline:14px;-webkit-backdrop-filter:blur(calc(var(--blur) + 6px)) saturate(180%);backdrop-filter:blur(calc(var(--blur) + 6px)) saturate(180%);box-shadow:var(--glass-shadow);top:10px} [data-style="glass"] .ptabs button.active{box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.35)} [data-style="glass"] .cartbar{border-radius:22px;border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:blur(calc(var(--blur) + 6px)) saturate(180%);backdrop-filter:blur(calc(var(--blur) + 6px)) saturate(180%);box-shadow:var(--glass-shadow-lg)} [data-style="glass"] .pcard{border-radius:20px} /* mobil: bară de jos plutitoare, ca pe iPhone */ @media (max-width:760px){ [data-style="glass"] .tabbar{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));border-radius:24px;border:1px solid var(--glass-line);padding:6px 4px; background:linear-gradient(180deg,var(--glass-hi) 0%,rgba(255,255,255,0) 40%) no-repeat,var(--glass);-webkit-backdrop-filter:blur(calc(var(--blur) + 10px)) saturate(180%);backdrop-filter:blur(calc(var(--blur) + 10px)) saturate(180%);box-shadow:var(--glass-shadow-lg)} [data-style="glass"] .tabbar button{border-radius:14px;transition:background .18s} [data-style="glass"] .tabbar button.active{background:var(--glass-strong);box-shadow:0 1px 3px rgba(0,0,0,.08),inset 0 1px 0 var(--glass-hi)} [data-style="glass"] .main{padding-block:12px 104px} [data-style="glass"] .drawer{border-radius:22px 22px 0 0;margin-top:14px;height:calc(100% - 14px)} [data-style="glass"] .tabs{width:auto} } @media print{[data-style="glass"] *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important}[data-style="glass"] body::before{display:none}} /* intervenție în curs (timp la aparat) — comun ambelor stiluri */ .sess-live{margin-top:12px;padding:10px 14px;border-radius:14px;background:var(--warn-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);animation:rise .4s cubic-bezier(.2,.8,.2,1) both} .sess-live .sess-min{font-variant-numeric:tabular-nums;font-weight:700;color:var(--warn)} .tbl-wrap{overflow-x:auto} tr.muted td{color:var(--muted)}