/* FreelanceBook v2 — Glassmorphism + Dark/Light Mode */ :root { /* فاصله‌ی توست/اعلان از پایین صفحه (بالای داک شناور) */ --toast-bottom: 6.6rem; /* Purple scale */ --p9:#0d0019; --p8:#1a0033; --p7:#2d0066; --p6:#4c00a8; --p5:#7c3aed; --p4:#a78bfa; --p3:#c4b5fd; --p2:#e9d5ff; --p1:#f5f3ff; /* Status */ --green:#10b981; --green-bg:rgba(16,185,129,.15); --red:#f43f5e; --red-bg:rgba(244,63,94,.15); --gold:#f59e0b; --gold-bg:rgba(245,158,11,.15); --blue:#3b82f6; --blue-bg:rgba(59,130,246,.15); /* Glass (dark) */ --glass:rgba(255,255,255,.06); --glass-h:rgba(255,255,255,.1); --glass-s:rgba(255,255,255,.13); --gb:rgba(255,255,255,.12); --gb2:rgba(255,255,255,.07); /* Text (dark) */ --tx:#f0eeff; --tx2:#c4b5fd; --tx3:#7c6fa0; --tx4:#3d2f5c; /* Shadows */ --sh-sm:0 2px 8px rgba(0,0,0,.35); --sh:0 8px 32px rgba(0,0,0,.4); --sh-lg:0 20px 60px rgba(0,0,0,.5); /* Layout */ --radius-xs:6px; --radius-sm:10px; --radius:16px; --radius-lg:22px; --sw:245px; --tr:.18s ease; } /* Light mode */ [data-theme="light"] { --glass:rgba(255,255,255,.7); --glass-h:rgba(255,255,255,.85); --glass-s:rgba(255,255,255,.9); --gb:rgba(139,92,246,.15); --gb2:rgba(139,92,246,.08); --tx:#1e1333; --tx2:#4b3d6e; --tx3:#9585b8; --tx4:#c4b5fd; --sh-sm:0 2px 8px rgba(109,40,217,.08); --sh:0 8px 32px rgba(109,40,217,.12); --sh-lg:0 20px 60px rgba(109,40,217,.18); /* --p3 در حالت تیره یک بنفش خیلی روشن است (برای متن روی پس‌زمینه‌ی تیره)؛ در حالت روشن همان مقدار روی پس‌زمینه‌ی روشن تقریباً ناخواناست، چون در ده‌ها جا (هاور دراپ‌داون جستجو، تب فعال، بج‌ها، لینک‌ها، آیکن‌ها) به‌عنوان رنگ اصلی متن/آیکن استفاده می‌شود؛ اینجا با یک بنفش تیره جایگزین می‌شود. */ --p3:#5b21b6; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} a,button,.btn,.dock-item,.card,.dcard,.kpi-card,.stat-tile,.type-card,.tab-btn, input,select,textarea,[role="button"],.admin-nav-item{ -webkit-tap-highlight-color:transparent;touch-action:manipulation; } html{font-size:15px} body{ font-family:'Vazirmatn',system-ui,sans-serif; color:var(--tx); line-height:1.65; direction:rtl; min-height:100vh; -webkit-font-smoothing:antialiased; transition:background .3s ease; } /* BG dark */ body:not([data-theme="light"]) { background:var(--p8); } body:not([data-theme="light"])::before{ content:'';position:fixed;inset:0;z-index:-2; background: radial-gradient(ellipse 80% 60% at 15% 10%,rgba(124,58,237,.35) 0%,transparent 60%), radial-gradient(ellipse 60% 50% at 85% 85%,rgba(76,0,168,.4) 0%,transparent 55%), linear-gradient(135deg,#0d0019 0%,#1a0033 50%,#0d0019 100%); } /* BG light */ body[data-theme="light"] { background:#f0eeff; } body[data-theme="light"]::before{ content:'';position:fixed;inset:0;z-index:-2; background: radial-gradient(ellipse 70% 50% at 10% 5%,rgba(196,181,253,.4) 0%,transparent 55%), radial-gradient(ellipse 50% 40% at 90% 90%,rgba(167,139,250,.3) 0%,transparent 50%), linear-gradient(135deg,#f5f3ff 0%,#ede9fe 50%,#f5f3ff 100%); } /* ── Layout ─────────────────────────────────── */ .app-layout{display:flex;flex-direction:column;min-height:100vh} /* ── Top bar (شامل برند کوچک + کاربر) ───────────── */ .main-content{flex:1;display:flex;flex-direction:column;min-height:100vh} .top-bar{ background:rgba(13,0,25,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--gb2);padding:.8rem 1.5rem; display:flex;align-items:center;gap:.8rem;position:sticky;top:0;z-index:50; } [data-theme="light"] .top-bar{background:rgba(245,243,255,.75)} .top-bar-brand{display:flex;align-items:center;gap:.55rem;flex-shrink:0} .brand-logo-sm{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(167,139,250,.4))} .brand-name-sm{ font-weight:800;font-size:.92rem; background:linear-gradient(135deg,#a78bfa,#e879f9); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .page-title{font-size:1rem;font-weight:700;flex:1;color:var(--tx);padding-right:1rem;border-right:1px solid var(--gb2)} .top-bar-actions{display:flex;gap:.4rem} /* ── ساعت و تاریخ شمسی هدر ───────────── */ .header-clock{ display:flex;align-items:center;gap:.45rem; background:rgba(167,139,250,.08);border:1px solid var(--gb2);border-radius:10px; padding:.4rem .7rem;flex-shrink:0; font-weight:700;font-size:.78rem;color:var(--tx2); white-space:nowrap;user-select:none;letter-spacing:.02em; font-variant-numeric:tabular-nums;perspective:200px; } [data-theme="light"] .header-clock{background:rgba(139,92,246,.06)} .header-clock .hc-icon{color:var(--p4);opacity:.75} .header-clock .hc-sep{color:var(--p4);opacity:.45;font-weight:400} .header-clock .hc-date,.header-clock .hc-time{display:inline-flex} .header-clock .hc-ch{ display:inline-block;min-width:.58em;text-align:center; transform-origin:50% 60%;will-change:transform,opacity; } .header-clock .hc-ch.hc-flip{animation:hcFlip .42s cubic-bezier(.34,1.56,.64,1)} .header-clock .hc-ch.hc-colon{animation:hcColonPulse 1.6s ease-in-out infinite;min-width:.3em} @keyframes hcFlip{ 0%{transform:translateY(-55%) rotateX(55deg);opacity:0} 55%{transform:translateY(6%) rotateX(-10deg);opacity:1} 100%{transform:translateY(0) rotateX(0);opacity:1} } @keyframes hcColonPulse{0%,100%{opacity:1}50%{opacity:.25}} @media(prefers-reduced-motion:reduce){ .header-clock .hc-ch.hc-flip{animation:none} .header-clock .hc-ch.hc-colon{animation:none} } .page-content{padding:1.5rem;padding-bottom:7.5rem;flex:1} .user-chip{display:flex;align-items:center} .user-avatar{ width:30px;height:30px; background:linear-gradient(135deg,var(--p5),#e879f9); color:#fff;border-radius:50%; display:flex;align-items:center;justify-content:center; font-weight:800;font-size:.8rem;flex-shrink:0; box-shadow:0 0 12px rgba(124,58,237,.4); } .btn-logout{ color:var(--tx3);text-decoration:none; padding:.4rem;border-radius:8px;transition:all var(--tr); display:flex;align-items:center;flex-shrink:0; } .btn-logout:hover{color:var(--red);background:var(--red-bg)} .btn-logout svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8} /* ── دک شناور پایین صفحه (مک‌اواس‌استایل) ─────────── */ .dock-nav{ position:fixed;bottom:1.8rem;left:50%;transform:translateX(-50%); z-index:200;display:flex;align-items:center;gap:.3rem; padding:.6rem .7rem; background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04)); backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%); border:1px solid rgba(255,255,255,.22); border-radius:28px; box-shadow:0 20px 50px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3),inset 0 1px 1px rgba(255,255,255,.25),inset 0 -1px 1px rgba(0,0,0,.15); max-width:calc(100vw - 1.5rem); overflow-x:auto; transition:transform .25s cubic-bezier(.34,1.56,.64,1); } .dock-nav:hover{transform:translateX(-50%) translateY(-3px)} [data-theme="light"] .dock-nav{ background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.45)); border-color:rgba(255,255,255,.6); box-shadow:0 20px 50px rgba(109,40,217,.22),0 2px 8px rgba(109,40,217,.1),inset 0 1px 1px rgba(255,255,255,.7); } .dock-group{display:flex;align-items:center;gap:.3rem;position:relative} .dock-sep{width:1px;height:30px;background:rgba(255,255,255,.18);margin:0 .4rem;flex-shrink:0} [data-theme="light"] .dock-sep{background:rgba(124,58,237,.18)} .dock-item{ position:relative;display:flex;align-items:center;gap:.5rem; padding:.65rem .95rem;border-radius:18px; color:var(--tx3);text-decoration:none; font-size:.84rem;font-weight:700;white-space:nowrap; transition:color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1); z-index:1; } .dock-item:hover{color:var(--p3);transform:translateY(-4px)} .dock-item:hover .dock-icon{transform:scale(1.12)} .dock-item.active{color:#fff} .dock-item.active::before{ content:'';position:absolute;inset:0;border-radius:18px;z-index:-1; background:linear-gradient(135deg,var(--p5),#9333ea); box-shadow:0 6px 20px rgba(124,58,237,.5); animation:dockPop .35s cubic-bezier(.34,1.56,.64,1); } @keyframes dockPop{ 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} } .dock-icon{width:19px;height:19px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s cubic-bezier(.34,1.56,.64,1)} /* سوییچ تراکنش دستی در فرم دریافت/پرداخت */ .trx-manual-toggle{ display:flex;align-items:center;gap:.55rem; background:rgba(255,255,255,.04);border:1px solid var(--gb2); border-radius:10px;padding:.6rem .8rem;cursor:pointer; font-size:.83rem;font-weight:600;color:var(--tx2); } .trx-manual-toggle input{width:auto;accent-color:var(--p5);cursor:pointer} .dock-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8} .dock-label{flex-shrink:0} /* ── Theme toggle ────────────────────────────── */ .theme-toggle{ width:34px;height:34px;border-radius:9px; background:var(--glass);border:1px solid var(--gb); color:var(--tx2);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all var(--tr); } .theme-toggle:hover{background:var(--glass-h);color:var(--p3)} .theme-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8} /* ── Notification Bell ───────────────────────── */ .notif-bell-wrap{position:relative} .notif-bell{ width:34px;height:34px;border-radius:9px;position:relative; background:var(--glass);border:1px solid var(--gb); color:var(--tx2);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all var(--tr); } .notif-bell:hover{background:var(--glass-h);color:var(--p3)} .notif-bell svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8} .notif-bell.has-unread svg{animation:notifRing 2.2s ease-in-out 1} @keyframes notifRing{0%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-11deg)}30%{transform:rotate(9deg)}40%{transform:rotate(-6deg)}50%{transform:rotate(3deg)}} .notif-badge{ position:absolute;top:-4px;left:-4px;min-width:16px;height:16px;padding:0 3px; border-radius:9px;background:var(--red);color:#fff;font-size:.62rem;font-weight:800; display:flex;align-items:center;justify-content:center;line-height:1; border:2px solid var(--bg2); } .notif-panel{ position:fixed;width:360px;max-width:92vw;max-height:min(58vh,420px); background:var(--glass);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px); border:1px solid var(--gb);border-radius:var(--radius);box-shadow:var(--sh-lg); z-index:850;overflow:hidden;display:flex;flex-direction:column; animation:fbPopIn .16s cubic-bezier(.16,1,.3,1); } [data-theme="light"] .notif-panel{background:rgba(245,243,255,.97)} .notif-panel-header{ display:flex;align-items:center;justify-content:space-between; padding:.9rem 1.1rem;border-bottom:1px solid var(--gb2);flex-shrink:0; } .notif-panel-title{font-size:.88rem;font-weight:800;color:var(--tx)} .notif-panel-header-actions{display:flex;align-items:center;gap:.4rem} .notif-panel-btn{ display:flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700; color:var(--p3);background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.18); border-radius:7px;padding:.32rem .55rem;cursor:pointer;font-family:inherit;transition:all .12s; } .notif-panel-btn:hover{background:var(--p3);color:#fff;border-color:var(--p3)} .notif-panel-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;flex-shrink:0} .notif-panel-btn.danger{color:var(--red);background:var(--red-bg);border-color:rgba(244,63,94,.18);padding:.32rem} .notif-panel-btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red)} .notif-panel-body{overflow-y:auto;flex:1} .notif-item{ display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1.1rem; border-bottom:1px solid var(--gb2);cursor:pointer; transition:background .12s,opacity .18s,transform .18s; position:relative; } .notif-item.removing{opacity:0;transform:scale(.97);pointer-events:none} .notif-item:last-child{border-bottom:none} .notif-item:hover{background:var(--glass-h)} .notif-item.unread{background:rgba(124,58,237,.05)} .notif-item.unread::before{content:'';position:absolute;top:1.1rem;left:.9rem;width:7px;height:7px;border-radius:50%;background:var(--p3);transition:opacity .12s} .notif-item:hover.unread::before{opacity:0} .notif-item-actions{ position:absolute;top:.6rem;left:.55rem;display:flex;gap:.25rem; opacity:0;pointer-events:none;transition:opacity .12s; } .notif-item:hover .notif-item-actions{opacity:1;pointer-events:auto} .notif-item-action{ width:23px;height:23px;border-radius:7px;border:1px solid var(--gb2); background:var(--glass);color:var(--tx3);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0; } .notif-item-action svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.3} .notif-item-action:hover{background:var(--p3);color:#fff;border-color:var(--p3)} .notif-item-action.danger:hover{background:var(--red);color:#fff;border-color:var(--red)} .notif-icon{ width:34px;height:34px;border-radius:9px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .notif-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} .notif-icon.sv-info,.notif-banner-icon.sv-info{background:var(--blue-bg);color:var(--blue)} .notif-icon.sv-success,.notif-banner-icon.sv-success{background:var(--green-bg);color:var(--green)} .notif-icon.sv-warning,.notif-banner-icon.sv-warning{background:var(--gold-bg);color:var(--gold)} .notif-icon.sv-danger,.notif-banner-icon.sv-danger{background:var(--red-bg);color:var(--red)} .notif-body{min-width:0;flex:1} .notif-title{font-size:.82rem;font-weight:700;color:var(--tx);margin-bottom:.15rem} .notif-msg{font-size:.76rem;color:var(--tx3);line-height:1.55;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* بنر لحظه‌ای اعلان جدید — سبک iOS، زیر دکمه‌ی زنگ، خودش بعد از چند ثانیه محو می‌شه */ .notif-banner{ position:fixed;z-index:950;width:320px;max-width:92vw; display:flex;gap:.65rem;align-items:flex-start; background:var(--glass);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px); border:1px solid var(--gb);border-radius:var(--radius); padding:.75rem .85rem;box-shadow:var(--sh-lg); cursor:pointer;opacity:0;transform:translateY(-18px) scale(.94); transition:opacity .28s cubic-bezier(.32,.72,0,1),transform .42s cubic-bezier(.34,1.56,.64,1); } .notif-banner.show{opacity:1;transform:translateY(0) scale(1)} .notif-banner.hide{opacity:0;transform:translateY(-10px) scale(.96);transition:opacity .18s ease,transform .18s ease} [data-theme="light"] .notif-banner{background:rgba(245,243,255,.97)} .notif-banner-icon{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center} .notif-banner-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2} .notif-banner-body{min-width:0;flex:1} .notif-banner-title{font-size:.8rem;font-weight:800;color:var(--tx);margin-bottom:.15rem} .notif-banner-msg{font-size:.73rem;color:var(--tx3);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .notif-time{font-size:.68rem;color:var(--tx3);margin-top:.3rem} .notif-empty{padding:2.5rem 1rem;text-align:center;color:var(--tx3);font-size:.82rem} .notif-empty svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.5;opacity:.4;margin-bottom:.6rem} .notif-empty.notif-error svg{color:var(--red);opacity:.6} .notif-empty.notif-error .btn{margin-top:.8rem} .notif-link-preview{ display:flex;align-items:center;gap:.5rem;margin-top:.7rem;padding:.55rem .7rem; background:var(--glass);border:1px solid var(--gb2);border-radius:9px; font-size:.74rem;color:var(--p3);direction:ltr;text-align:left;overflow:hidden; } .notif-link-preview svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0} .notif-link-preview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── Glass Card ──────────────────────────────── */ .card{ background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid var(--gb);border-radius:var(--radius); padding:1.3rem;box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.08); } .card-title{ font-size:.76rem;font-weight:700;color:var(--tx3); margin-bottom:1rem;display:flex;align-items:center;gap:.45rem; text-transform:uppercase;letter-spacing:.07em; } .card-title svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} /* ── Person Cards (اشخاص) — بازطراحی کامل ───────────────────── دو مشکل قبلی: ۱) ارتفاع نامنظم: چون سربرگ کارت‌ها بسته به تعداد بج‌ها، وجود خط «نماینده» یا تلفن، بین ۱ تا ۳ خط فرق می‌کرد، باکس‌های آماری و دکمه‌ی پایانی در هر کارت روی تراز متفاوتی می‌افتادند. راه‌حل: .pw-info یک ارتفاع ثابت (نه کمینه) دارد به‌همراه overflow:hidden، و محتوایش را عمودی وسط‌چین می‌کند؛ حتی اگر نام شرکت طولانی باشد و به ۲ خط بشکند (line-clamp) یا بج‌ها به خط بعد بروند، جعبه هیچ‌وقت از این ارتفاع فراتر نمی‌رود، پس در همه‌ی کارت‌ها دقیقاً همان‌جا تمام می‌شود. کارت هم فلکسی و ستونی شده تا دکمه‌ی پایانی با margin-top:auto همیشه به کف بچسبد. ۲) تفکیک رنگی: به‌جای رنگ‌آمیزی کل کارت یا حاشیه‌ی کنار (که قبلاً شلوغ و غیرحرفه‌ای بود)، فقط یک نوار باریک بالای کارت + یک رینگ ظریف دور آواتار رنگ می‌گیرد؛ یک سیگنال بصری واحد و خوانا برای هر دسته، بدون رقابت با بج‌های متنی. */ .person-wrap{ display:flex;flex-direction:column;height:100%; position:relative;overflow:hidden; transition:transform var(--tr),box-shadow var(--tr); } .person-wrap:hover{transform:translateY(-3px);box-shadow:var(--sh)} .person-wrap::before{ content:'';position:absolute;top:0;right:0;left:0;height:4px; background:var(--pw-c,transparent); } .person-wrap.pw-client{--pw-c:#a78bfa} .person-wrap.pw-partner{--pw-c:#5b9bf7} .person-wrap.pw-both{--pw-c:#2dd4bf} .person-wrap.pw-company{--pw-c:#f0b429} .pw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-top:.15rem} .pw-id{display:flex;align-items:center;gap:.8rem;min-width:0;flex:1} .pw-avatar{position:relative;flex-shrink:0;border-radius:50%} .pw-avatar .avatar-img,.pw-avatar .user-avatar{box-shadow:0 0 0 3px var(--bg,transparent),0 0 0 4px var(--pw-c,transparent)} .pw-info{min-width:0;flex:1;height:92px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:.32rem} .pw-name{ font-weight:800;font-size:.94rem;line-height:1.3;color:var(--tx); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .pw-subline{font-size:.72rem;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl} .pw-subline.ltr{direction:ltr;text-align:right} .pw-badges{display:flex;gap:.3rem;row-gap:.25rem;flex-wrap:wrap;align-items:center} .pw-actions{display:flex;gap:.25rem;flex-shrink:0} .pw-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-top:1rem} .pw-stat{border-radius:10px;padding:.6rem .4rem;text-align:center;border:1px solid var(--gb2);background:var(--glass-h)} .pw-stat-label{font-size:.64rem;color:var(--tx3);margin-bottom:.25rem;font-weight:600} .pw-stat-value{font-weight:800;font-size:.84rem;color:var(--tx)} .pw-stat.st-green{background:var(--green-bg);border-color:rgba(16,185,129,.22)} .pw-stat.st-green .pw-stat-label,.pw-stat.st-green .pw-stat-value{color:var(--green)} .pw-stat.st-red{background:var(--red-bg);border-color:rgba(244,63,94,.22)} .pw-stat.st-red .pw-stat-label,.pw-stat.st-red .pw-stat-value{color:var(--red)} .pw-footer{margin-top:.9rem;flex:1;display:flex;align-items:flex-end} .pw-footer .btn{flex:1;justify-content:center} /* ── KPI Cards ───────────────────────────────── */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:1.3rem} .kpi-card{ background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid var(--gb);border-radius:var(--radius); padding:1.15rem 1.2rem; box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.1); transition:transform var(--tr),box-shadow var(--tr); position:relative;overflow:hidden; } .kpi-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:var(--kpi-color,var(--p4));opacity:.7; } .kpi-card:hover{transform:translateY(-2px);box-shadow:var(--sh),0 0 25px rgba(124,58,237,.12)} .kpi-icon{margin-bottom:.5rem} .kpi-icon svg{width:22px;height:22px;stroke:var(--kpi-color,var(--p4));fill:none;stroke-width:1.8} .kpi-label{font-size:.7rem;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem} .kpi-value{font-size:1.45rem;font-weight:800;color:var(--kpi-color,var(--p3))} .kpi-sub{font-size:.7rem;color:var(--tx3);margin-top:.2rem} /* ── ردیف کارت‌های آماری افقی (جایگزین جدید کارت‌های مربعی) ── مستطیلی، کم‌ارتفاع، عرض کامل، کنتراست بالا، چیدمان از سمت چپ شروع می‌شود */ .stat-row{ display:flex;flex-direction:row-reverse;gap:.9rem; margin-bottom:1.3rem;width:100%; } .stat-tile{ flex:1 1 0;min-width:0; display:flex;align-items:center;gap:.8rem; background:linear-gradient(135deg,color-mix(in srgb,var(--st-color) 18%,transparent),color-mix(in srgb,var(--st-color) 6%,transparent)); border:1px solid color-mix(in srgb,var(--st-color) 35%,transparent); border-radius:14px; padding:.85rem 1.1rem; box-shadow:var(--sh-sm); transition:transform var(--tr),box-shadow var(--tr); } @supports not (background: color-mix(in srgb, red 10%, transparent)) { .stat-tile{background:var(--glass);border-color:var(--gb)} .stat-tile-icon{background:var(--glass-h)} } .stat-tile[role="button"]{cursor:pointer} .stat-tile:hover{transform:translateY(-2px);box-shadow:var(--sh)} .stat-tile-icon{ width:38px;height:38px;border-radius:11px;flex-shrink:0; background:color-mix(in srgb,var(--st-color) 28%,transparent); display:flex;align-items:center;justify-content:center; } .stat-tile-icon svg{width:19px;height:19px;stroke:var(--st-color);fill:none;stroke-width:1.9} .stat-tile-body{min-width:0;flex:1} .stat-tile-label{font-size:.7rem;color:var(--tx2);font-weight:700;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stat-tile-value{font-size:1.15rem;font-weight:800;color:var(--st-color);white-space:nowrap} .stat-tile-value span{font-size:.66rem;font-weight:600;color:var(--tx3);margin-right:.2rem} @media(max-width:768px){ .stat-row{flex-wrap:wrap} .stat-tile{flex:1 1 45%} } @media(max-width:480px){ .stat-tile{flex:1 1 100%} } /* ── Buttons ─────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:.38rem; padding:.48rem 1rem;border:none;border-radius:var(--radius-sm); font-family:inherit;font-size:.875rem;font-weight:700; cursor:pointer;text-decoration:none; transition:all var(--tr);white-space:nowrap; } .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2} .btn-primary{background:linear-gradient(135deg,var(--p5),#9333ea);color:#fff;box-shadow:0 3px 16px rgba(124,58,237,.4);border:1px solid rgba(167,139,250,.25)} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 24px rgba(124,58,237,.55)} .btn-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 3px 14px rgba(16,185,129,.3);border:1px solid rgba(16,185,129,.25)} .btn-success:hover{transform:translateY(-1px);box-shadow:0 5px 20px rgba(16,185,129,.45)} .btn-danger{background:linear-gradient(135deg,#dc2626,#f43f5e);color:#fff;box-shadow:0 3px 14px rgba(244,63,94,.3);border:1px solid rgba(244,63,94,.25)} .btn-danger:hover{transform:translateY(-1px)} .btn-warning{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;box-shadow:0 3px 14px rgba(245,158,11,.3);border:1px solid rgba(245,158,11,.25)} .btn-ghost{background:var(--glass);color:var(--tx2);border:1px solid var(--gb);backdrop-filter:blur(10px)} .btn-ghost:hover{background:var(--glass-h);color:var(--p3);border-color:rgba(167,139,250,.3)} .btn-sm{padding:.3rem .65rem;font-size:.78rem;border-radius:7px} .btn:disabled{opacity:.7;cursor:default;pointer-events:none;filter:saturate(.7)} .btn-icon{padding:.3rem .42rem} /* ── Tables ──────────────────────────────────── */ .table-wrap{overflow-x:auto;border-radius:var(--radius-sm)} table{width:100%;border-collapse:collapse;font-size:.865rem} thead tr{background:rgba(255,255,255,.04)} th{padding:.65rem .9rem;text-align:right;font-weight:700;font-size:.7rem;color:var(--tx3);border-bottom:1px solid var(--gb2);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em} td{padding:.65rem .9rem;border-bottom:1px solid rgba(255,255,255,.04);color:var(--tx)} tbody tr:hover{background:rgba(255,255,255,.04)} tbody tr:last-child td{border-bottom:none} .td-actions{display:flex;gap:.28rem} /* ── Forms ───────────────────────────────────── */ .form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:1rem} .form-grid.cols-2{grid-template-columns:1fr 1fr} .form-grid.cols-3{grid-template-columns:1fr 1fr 1fr} .form-group{display:flex;flex-direction:column;gap:.28rem} .form-group.full{grid-column:1/-1} label{font-size:.76rem;color:var(--tx2);font-weight:700;letter-spacing:.03em} label .req{color:var(--red)} input,select,textarea{ background:rgba(255,255,255,.06);border:1px solid var(--gb); border-radius:var(--radius-sm);color:var(--tx); font-family:inherit;font-size:.88rem;padding:.52rem .8rem; transition:border-color var(--tr),box-shadow var(--tr),background var(--tr); direction:rtl; } [data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{ background:rgba(255,255,255,.7);border-color:rgba(139,92,246,.2);color:var(--tx); } input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--p4); background:rgba(255,255,255,.09); box-shadow:0 0 0 3px rgba(167,139,250,.15); } input::placeholder,textarea::placeholder{color:var(--tx4)} select option{background:#1a0033;color:var(--tx)} [data-theme="light"] select option{background:#f5f3ff;color:#1e1333} textarea{resize:vertical;min-height:75px} /* Search dropdown */ .search-dropdown{position:relative;width:100%} .search-dropdown input{width:100%} .search-dropdown-list{ position:absolute;top:calc(100% + 4px);right:0;left:0;z-index:300; background:rgba(20,0,45,.95);backdrop-filter:blur(20px); border:1px solid var(--gb);border-radius:var(--radius-sm); max-height:260px;overflow-y:auto;display:none; box-shadow:var(--sh); } [data-theme="light"] .search-dropdown-list{background:rgba(245,243,255,.97)} .search-dropdown-list.open{display:block} .sdl-item{ padding:.7rem 1rem;cursor:pointer;font-size:.92rem; border-bottom:1px solid var(--gb2);transition:background var(--tr); } .sdl-item:hover{background:var(--glass-h);color:var(--p3)} .sdl-item:last-child{border-bottom:none} .sdl-empty{padding:.6rem .8rem;color:var(--tx3);font-size:.82rem} .sdl-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .sdl-item-label{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0;overflow-wrap:break-word;word-break:break-word} .sdl-item-del{ width:26px;height:26px;border-radius:7px;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:var(--tx4);background:transparent;border:none;cursor:pointer; transition:all .15s; } .sdl-item-del:hover{background:var(--red-bg);color:var(--red)} .sdl-item-del svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2} .bank-badge{ width:28px;height:28px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:#fff;font-size:.68rem;font-weight:800; } .bank-badge-sm{width:22px;height:22px;font-size:.6rem} /* ── Badges ──────────────────────────────────── */ .badge{display:inline-flex;align-items:center;padding:.18rem .6rem;border-radius:20px;font-size:.7rem;font-weight:700} .badge-green{background:var(--green-bg);color:var(--green);border:1px solid rgba(16,185,129,.2)} .badge-red{background:var(--red-bg);color:var(--red);border:1px solid rgba(244,63,94,.2)} .badge-gold{background:var(--gold-bg);color:var(--gold);border:1px solid rgba(245,158,11,.2)} .badge-blue{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(59,130,246,.2)} .badge-purple{background:rgba(124,58,237,.15);color:var(--p3);border:1px solid rgba(167,139,250,.2)} .badge-grey{background:rgba(255,255,255,.07);color:var(--tx3);border:1px solid var(--gb2)} /* ── Tabs ────────────────────────────────────── */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--gb2);margin-bottom:1.2rem} .tab-btn{ padding:.5rem 1rem;background:none;border:none; border-bottom:2px solid transparent;color:var(--tx3); font-family:inherit;font-size:.86rem;cursor:pointer; transition:all var(--tr);font-weight:600;margin-bottom:-1px; display:flex;align-items:center;gap:.4rem; } .tab-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .tab-btn:hover{color:var(--p3)} .tab-btn.active{color:var(--p3);border-bottom-color:var(--p4)} .tab-pane{display:none} .tab-pane.active{display:block} /* ── Modal ───────────────────────────────────── */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(5,0,15,.65);backdrop-filter:blur(8px);z-index:200} .modal-box{ display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%); background:rgba(18,0,40,.8);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px); border:1px solid var(--gb);border-radius:var(--radius-lg); box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.1); z-index:201;width:90%;max-width:620px;overflow-y:auto;padding:1.5rem; /* عرض/ارتفاع یکسان برای همه‌ی پاپ‌آپ‌های استاندارد (فاکتور، اشخاص، پروژه و ...) */ height:min(72vh,620px); flex-direction:column; } [data-theme="light"] .modal-box{background:rgba(245,243,255,.92)} .modal-box.wide{max-width:980px;height:min(80vh,700px)} .modal-box.xwide{max-width:1100px;height:min(85vh,760px)} /* دیالوگ‌های کوتاه تأیید/حذف — به‌جای ارتفاع ثابت ۶۲۰px مخصوص فرم‌ها، فقط به اندازه‌ی محتوای واقعی‌شون (یک پیام کوتاه + دو دکمه) جا می‌گیرن */ .modal-box.modal-compact{height:auto;max-width:420px;padding:1.4rem 1.5rem} .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;flex-shrink:0} .modal-title{font-size:1rem;font-weight:800;color:var(--tx)} .modal-close{ background:var(--glass);border:1px solid var(--gb);color:var(--tx3); cursor:pointer;width:28px;height:28px;border-radius:7px; display:flex;align-items:center;justify-content:center;transition:all var(--tr); } .modal-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .modal-close:hover{background:var(--red-bg);color:var(--red);border-color:rgba(244,63,94,.3)} .modal-footer{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--gb2);display:flex;justify-content:flex-end;gap:.5rem;flex-shrink:0} /* ── انتخاب تاریخ شمسی ───────────────────────────────────── */ .jdp-panel{ background:rgba(20,0,45,.97);backdrop-filter:blur(24px); border:1px solid var(--gb);border-radius:14px; padding:.9rem;width:260px;box-shadow:var(--sh-lg); } [data-theme="light"] .jdp-panel{background:rgba(245,243,255,.98)} .jdp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem} .jdp-title{font-size:.88rem;font-weight:800;color:var(--tx)} .jdp-nav{ width:28px;height:28px;border-radius:8px;border:1px solid var(--gb2); background:var(--glass);color:var(--tx2);font-size:1rem;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:all .15s; flex-shrink:0;padding:0; } .jdp-nav svg{display:block} .jdp-nav:hover{background:var(--glass-h);color:var(--p3)} .jdp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:.4rem} .jdp-weekdays span{text-align:center;font-size:.68rem;color:var(--tx4);font-weight:700} .jdp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .jdp-day{ text-align:center;padding:.45rem 0;border-radius:8px;font-size:.82rem; cursor:pointer;color:var(--tx2);transition:all .15s; } .jdp-day:hover{background:var(--glass-h);color:var(--p3)} .jdp-day.selected{background:linear-gradient(135deg,var(--p5),#9333ea);color:#fff;font-weight:800} .jdp-footer{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--gb2);display:flex;justify-content:center} /* ── Alert ───────────────────────────────────── */ .alert{padding:.75rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;font-size:.86rem;font-weight:500;backdrop-filter:blur(10px)} .alert button{background:none;border:none;cursor:pointer;font-size:1rem;opacity:.6;color:inherit} .alert-success{background:var(--green-bg);color:var(--green);border:1px solid rgba(16,185,129,.25)} .alert-error{background:var(--red-bg);color:var(--red);border:1px solid rgba(244,63,94,.25)} .alert-warning{background:var(--gold-bg);color:var(--gold);border:1px solid rgba(245,158,11,.25)} .alert-info{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(59,130,246,.25)} /* ── Dashboard drag grid ─────────────────────── */ .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .dash-widget{cursor:grab} .dash-widget.dragging{opacity:.4} .dash-widget.drag-over{outline:2px dashed var(--p4);outline-offset:3px;border-radius:var(--radius)} .dash-widget.full{grid-column:1/-1} .widget-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem} .widget-drag-handle{color:var(--tx3);cursor:grab;padding:.2rem;display:flex;align-items:center} .widget-drag-handle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} /* ── Invoice items ───────────────────────────── */ .items-table{width:100%;border-collapse:collapse;font-size:.84rem} .items-table th,.items-table td{padding:.42rem .55rem;border:1px solid var(--gb2);text-align:right} .items-table thead{background:rgba(255,255,255,.04)} .items-table th{color:var(--tx3);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em} .items-table input,.items-table select{width:100%;padding:.28rem .48rem;font-size:.83rem;border-radius:5px} .drag-row{cursor:grab} .drag-row:hover{background:rgba(255,255,255,.04)} /* ── Filter bar ──────────────────────────────── */ .filter-bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.9rem} .filter-bar input,.filter-bar select{min-width:140px;max-width:195px} .filter-bar .spacer{flex:1} /* ── Empty state ─────────────────────────────── */ .empty-state{text-align:center;padding:2.5rem 1rem;color:var(--tx3)} .scroll-list{max-height:360px;overflow-y:auto;padding-left:.3rem;margin-left:-.3rem} .empty-state .empty-icon{margin-bottom:.7rem} .empty-state .empty-icon svg{width:40px;height:40px;stroke:var(--tx3);fill:none;stroke-width:1.5;opacity:.5} .empty-state p{font-size:.9rem;margin-bottom:1rem} /* ── Section title ───────────────────────────── */ .section-title{font-size:.7rem;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;margin:1.1rem 0 .65rem;display:flex;align-items:center;gap:.5rem} .section-title::before{content:'';flex:1;height:1px;background:var(--gb2)} /* ── Totals ──────────────────────────────────── */ .total-row{display:flex;justify-content:flex-end;gap:1.4rem;margin-top:.9rem;padding:.85rem 1rem;background:rgba(255,255,255,.04);border:1px solid var(--gb2);border-radius:var(--radius-sm);flex-wrap:wrap;align-items:center} .total-row .tl{font-size:.74rem;color:var(--tx3);font-weight:700} .total-row .tv{font-size:.95rem;font-weight:800;color:var(--tx)} /* ── Person profile grid ─────────────────────── */ .profile-grid{display:grid;grid-template-columns:280px 1fr;gap:1.2rem} .profile-card{background:var(--glass);border:1px solid var(--gb);border-radius:var(--radius);padding:1.3rem;position:sticky;top:5rem} .profile-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--p5),#e879f9);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:#fff;margin:0 auto 1rem;box-shadow:0 0 24px rgba(124,58,237,.4)} .profile-name{text-align:center;font-size:1.1rem;font-weight:800;margin-bottom:.3rem} .profile-role{text-align:center;margin-bottom:1rem} .profile-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem} .profile-stat{background:rgba(255,255,255,.04);border:1px solid var(--gb2);border-radius:var(--radius-sm);padding:.7rem;text-align:center} .profile-stat .ps-val{font-size:1rem;font-weight:800} .profile-stat .ps-lbl{font-size:.68rem;color:var(--tx3);margin-top:.2rem;text-transform:uppercase;letter-spacing:.04em} /* ── Accounts (bank) cards ───────────────────── */ .account-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem} .account-card{ background:linear-gradient(160deg,rgba(124,58,237,.1),rgba(20,0,45,.4)); border:1px solid var(--gb);border-radius:18px;padding:1.2rem; box-shadow:var(--sh-sm);position:relative;overflow:hidden; transition:transform .2s,box-shadow .2s; } .account-card:hover{transform:translateY(-3px);box-shadow:var(--sh)} [data-theme="light"] .account-card{background:linear-gradient(160deg,rgba(124,58,237,.08),rgba(255,255,255,.6))} .account-card::before{ content:'';position:absolute;top:-30%;left:-20%;width:140%;height:140%; background:radial-gradient(circle,rgba(167,139,250,.08) 0%,transparent 60%); pointer-events:none; } .account-card .ac-type{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem} .account-card .ac-icon-wrap{width:32px;height:32px;border-radius:9px;background:rgba(167,139,250,.15);display:flex;align-items:center;justify-content:center;color:var(--p3)} .account-card .ac-name{font-size:1rem;font-weight:800;margin-bottom:.15rem;position:relative;z-index:1} .account-card .ac-bankname{font-size:.78rem;color:var(--tx3);margin-bottom:.6rem} .account-card .ac-balance-label{font-size:.68rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem} .account-card .ac-balance{font-size:1.55rem;font-weight:900;color:var(--green);margin:0 0 .6rem;position:relative;z-index:1;direction:ltr;text-align:right} .account-card .ac-card{font-size:.76rem;color:var(--tx3);font-family:monospace;letter-spacing:.04em;direction:ltr;text-align:right} /* ── Auth ────────────────────────────────────── */ .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem} .auth-box{background:rgba(18,0,40,.75);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--gb);border-radius:var(--radius-lg);padding:2.1rem;width:100%;max-width:390px;box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.1)} [data-theme="light"] .auth-box{background:rgba(245,243,255,.9)} .auth-logo{text-align:center;font-size:2.2rem;margin-bottom:.4rem} .auth-title{text-align:center;font-size:1.35rem;font-weight:800;margin-bottom:.2rem;background:linear-gradient(135deg,#a78bfa,#e879f9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .auth-sub{text-align:center;color:var(--tx3);font-size:.83rem;margin-bottom:1.5rem} .auth-form{display:flex;flex-direction:column;gap:.85rem} .auth-link{text-align:center;margin-top:.9rem;font-size:.83rem;color:var(--tx3)} .auth-link a{color:var(--p3);text-decoration:none;font-weight:700} /* ── Scrollbar: مخفی همه‌جا، اسکرول همچنان کار می‌کند ───────── */ *{ scrollbar-width:none; -ms-overflow-style:none; } *::-webkit-scrollbar{ width:0; height:0; display:none; } /* ── Utils ───────────────────────────────────── */ .text-green{color:var(--green)!important}.text-red{color:var(--red)!important} .text-gold{color:var(--gold)!important}.text-accent{color:var(--p3)!important} .text-muted{color:var(--tx3)!important}.text-center{text-align:center} .fw-700{font-weight:700}.fw-800{font-weight:800} .mt-1{margin-top:.5rem}.mt-2{margin-top:1rem} .mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem} .d-none{display:none!important} .gap-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .full-w{width:100%} /* ── Responsive ──────────────────────────────── */ @media(max-width:900px){.profile-grid{grid-template-columns:1fr}} @media(max-width:768px){ html{font-size:14.5px} .dash-grid{grid-template-columns:1fr} .form-grid.cols-2,.form-grid.cols-3{grid-template-columns:1fr} .kpi-grid{grid-template-columns:1fr 1fr} .modal-box{width:95%;padding:1.2rem} .page-title{display:none} .header-clock{font-size:.7rem;padding:.32rem .55rem;gap:.32rem} .header-clock .hc-icon{display:none} .dock-label{display:none} .dock-item{padding:.6rem .7rem} .dock-nav{bottom:1.1rem;border-radius:22px} :root{--toast-bottom:5.4rem} .top-bar{padding:.65rem 1rem} .page-content{padding:1.1rem;padding-bottom:7rem} .account-cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .type-cards{grid-template-columns:1fr} .filter-bar input,.filter-bar select{min-width:120px} /* دکمه‌ها و آیکون‌ها بزرگ‌تر برای لمس راحت‌تر روی موبایل */ .theme-toggle,.btn-logout,.modal-close,.jdp-nav{min-width:38px;min-height:38px} .btn{padding:.55rem 1.05rem} .btn-sm{padding:.42rem .8rem} .dock-icon svg{width:19px;height:19px} table{font-size:.82rem} th,td{padding:.55rem .6rem} } @media(max-width:600px){ .settings-grid{grid-template-columns:1fr!important} .dgrid,.pill-row,.stat3-row{grid-template-columns:1fr!important} .dcol-left{grid-column:auto!important} .plan-grid{grid-template-columns:1fr 1fr!important} .profile-stat-grid{grid-template-columns:1fr 1fr} } @media(max-width:480px){ html{font-size:14px} .kpi-grid{grid-template-columns:1fr} .page-content{padding:.9rem;padding-bottom:6.5rem} .brand-name-sm{display:none} .account-cards{grid-template-columns:1fr} .filter-bar{flex-direction:column;align-items:stretch} .filter-bar input,.filter-bar select,.filter-bar .btn{max-width:none;width:100%} .filter-bar .spacer{display:none} .modal-box{width:100%;max-width:100%;height:100dvh;top:0;left:0;transform:none;border-radius:0;padding:1rem} .modal-box.wide,.modal-box.xwide{max-width:100%;height:100dvh} .td-actions{flex-wrap:wrap} .dock-nav{padding:.5rem .55rem;gap:.15rem} .dock-item{padding:.55rem .5rem} .dock-sep{margin:0 .2rem} .total-row{justify-content:space-between} .otp-boxes input{width:auto;flex:1} } @media(max-width:380px){ .type-cards,.stat3-row,.dgrid,.pill-row{grid-template-columns:1fr!important} .settings-grid,.plan-grid{grid-template-columns:1fr!important} .profile-stat-grid{grid-template-columns:1fr} .dock-icon svg{width:18px;height:18px} .header-clock .hc-date,.header-clock .hc-sep{display:none} } /* حالت لمسی: هاورهای دائمی حذف شوند تا روی موبایل رنگ گیر نکنند */ @media(hover:none) and (pointer:coarse){ .card:hover,.dcard:hover,.kpi-card:hover,.account-card:hover,.type-card:hover{transform:none;box-shadow:var(--sh-sm)} .dock-item:hover{transform:none} } .tag-picker-row{display:flex;align-items:center;gap:.55rem;padding:.4rem .6rem;border:1px solid var(--gb2);border-radius:var(--radius-sm);background:var(--glass)} .tag-picker-row input{border:none!important;background:transparent!important;padding:.2rem 0!important;flex:1;min-width:0} .tag-picker-row input:focus{box-shadow:none!important} .tag-picker-row #tagInputBadge:empty{width:20px;height:20px;border-radius:50%;border:2px dashed var(--tx3);display:inline-block;flex-shrink:0} .tag-picker-row #bankInputBadge:empty,.tag-picker-row #accTypeInputBadge:empty{width:20px;height:20px;border-radius:50%;border:2px dashed var(--tx3);display:inline-block;flex-shrink:0} /* ── فرم مشترک «شخص جدید/ویرایش» (منتقل‌شده از persons.php تا در همه صفحات — داشبورد، فاکتور، تراکنش — هم درست نمایش داده شود) ── */ .avatar-img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--gb)} .avatar-img-lg{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--gb)} .type-cards{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:.4rem 0 .2rem} .entity-switch{display:flex;gap:.4rem;background:rgba(255,255,255,.04);border:1px solid var(--gb2);border-radius:12px;padding:.3rem;margin-bottom:1rem} .es-btn{ flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem; padding:.6rem .8rem;border-radius:9px;border:none;background:transparent; color:var(--tx3);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer; transition:all .2s; } .es-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8} .es-btn.active{background:linear-gradient(135deg,var(--p5),#9333ea);color:#fff;box-shadow:0 3px 12px rgba(124,58,237,.35)} .es-btn:not(.active):hover{background:var(--glass-h);color:var(--p3)} .entity-badge-icon{ position:absolute;bottom:-2px;left:-2px; width:20px;height:20px;border-radius:50%; background:var(--p6);border:2px solid var(--p8); display:flex;align-items:center;justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.3); } [data-theme="light"] .entity-badge-icon{border-color:#f5f3ff} .entity-badge-icon svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:2} /* یک ردیف چک‌باکس ساده برای گزینه‌های تکی (مثلاً «ثبت به‌عنوان فاکتور تأییدشده») */ .check-row{ display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.85rem;color:var(--tx2); padding:.75rem .9rem;background:var(--glass-h);border:1px solid var(--gb);border-radius:var(--radius-sm); transition:var(--tr); } .check-row:hover{background:var(--glass-s)} .check-row input[type="checkbox"]{width:17px;height:17px;accent-color:#7c3aed;cursor:pointer;flex-shrink:0} .type-card{ border:2px solid var(--gb);border-radius:14px;padding:1.1rem;cursor:pointer; transition:all .2s;position:relative;background:rgba(255,255,255,.03); } .type-card:hover{border-color:rgba(167,139,250,.4);background:var(--glass-h)} .type-card.selected{border-color:var(--p4);background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(76,0,168,.1));box-shadow:0 0 0 1px var(--p4) inset} .type-card input{position:absolute;opacity:0;pointer-events:none} .type-card .tc-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:.6rem;background:rgba(167,139,250,.15);color:var(--p3)} .type-card .tc-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7} .type-card .tc-title{font-size:.95rem;font-weight:800;margin-bottom:.3rem;color:var(--tx)} .type-card .tc-desc{font-size:.76rem;color:var(--tx3);line-height:1.5} .type-card .tc-check{position:absolute;top:.8rem;left:.8rem;width:20px;height:20px;border-radius:50%;border:2px solid var(--gb);display:flex;align-items:center;justify-content:center;transition:all .2s;background:rgba(0,0,0,.2)} .type-card.selected .tc-check{background:var(--p5);border-color:var(--p5)} .type-card.selected .tc-check svg{display:block} .type-card .tc-check svg{display:none;width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3} .avatar-upload-wrap{display:flex;align-items:center;gap:1rem;margin-bottom:.3rem;flex-wrap:wrap} .avatar-preview-box{ width:84px;height:84px;border-radius:50%; border:2px dashed var(--gb);background:rgba(255,255,255,.04); display:flex;align-items:center;justify-content:center;flex-shrink:0; color:var(--tx3);font-size:1.6rem;font-weight:800;overflow:hidden;position:relative; } .avatar-preview-box img{width:100%;height:100%;object-fit:cover} .avatar-actions{display:flex;flex-direction:column;gap:.4rem} .avatar-hint{font-size:.7rem;color:var(--tx4)} .avatar-zoom-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem} .avatar-zoom-row input[type=range]{flex:1;accent-color:var(--p5)} .field-note{font-size:.72rem;color:var(--tx4);margin-top:.35rem;line-height:1.5} .balance-input-wrap{position:relative;display:flex} .balance-input-wrap input{flex:1;padding-left:4.2rem} .balance-suffix{ position:absolute;left:.4rem;top:50%;transform:translateY(-50%); background:rgba(167,139,250,.15);color:var(--p3); font-size:.74rem;font-weight:700;padding:.35rem .7rem; border-radius:7px;pointer-events:none; } /* ── ویجت باتری اشتراک (سراسری — استفاده در داشبورد و تنظیمات) ── */ .battery-shell{position:relative;height:14px;border:2px solid var(--gb);border-radius:5px;background:rgba(255,255,255,.04);overflow:hidden;margin:0 4px} .battery-shell::after{content:'';position:absolute;right:-5px;top:3px;width:3px;height:6px;background:var(--gb);border-radius:2px 0 0 2px} .battery-fill{position:absolute;top:2px;bottom:2px;left:2px;border-radius:3px;transition:width 1s ease;animation:batteryPulse 2.2s ease-in-out infinite} @keyframes batteryPulse{0%,100%{opacity:1}50%{opacity:.62}} /* ── فرم فاکتور (منتقل‌شده از invoices.php تا در داشبورد هم درست نمایش داده شود) ── */ /* تفکیک رنگی نوع فاکتور در جدول */ #invTable tr[data-type="sale"]{border-right:2px solid rgba(16,185,129,.35)} #invTable tr[data-type="purchase"]{border-right:2px solid rgba(244,63,94,.35)} .inv-type-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:20px;font-size:.74rem;font-weight:800} .inv-type-pill.sale{background:rgba(16,185,129,.14);color:var(--green)} .inv-type-pill.purchase{background:rgba(244,63,94,.14);color:var(--red)} .inv-type-pill svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2} /* منوی کشویی عملیات مرحله فاکتور — پنل سراسری روی body */ .stage-menu-wrap{display:inline-block} .stage-menu{ z-index:650; background:rgba(20,0,45,.97);backdrop-filter:blur(20px); border:1px solid var(--gb);border-radius:10px; min-width:200px;padding:.35rem;box-shadow:var(--sh-lg); } [data-theme="light"] .stage-menu{background:rgba(245,243,255,.98)} .stage-menu-item{ display:flex;align-items:center;gap:.55rem;width:100%; padding:.55rem .7rem;border:none;background:transparent; font-family:inherit;font-size:.84rem;font-weight:700; border-radius:7px;cursor:pointer;text-align:right;transition:background .15s; } .stage-menu-item:hover{background:var(--glass-h)} .stage-menu-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0} /* فرم فاکتور — بخش‌بندی رنگی */ .inv-section{ border-radius:14px;padding:1.1rem;margin-bottom:1rem; border:1px solid var(--gb2);background:rgba(255,255,255,.025); } .inv-section-title{ font-size:.74rem;font-weight:800;color:var(--tx3); text-transform:uppercase;letter-spacing:.06em; display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem; } .inv-section-title svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .inv-section.sec-basic{border-color:rgba(167,139,250,.18);background:rgba(124,58,237,.04)} .inv-section.sec-items{border-color:rgba(16,185,129,.16);background:rgba(16,185,129,.03)} .inv-section.sec-extra{border-color:rgba(245,158,11,.16);background:rgba(245,158,11,.03)} /* فیلد تخفیف با سوییچ تومان/درصد */ .discount-input-wrap{position:relative;display:inline-flex;align-items:center} .discount-input-wrap input{width:110px;padding:.28rem .4rem;padding-left:2rem;text-align:center} .discount-input-wrap.full{width:100%} .discount-input-wrap.full input{width:100%;padding:.52rem 2rem .52rem .8rem} .discount-mode-btn{ position:absolute;left:.25rem;top:50%;transform:translateY(-50%); width:22px;height:22px;border-radius:6px;border:none;cursor:pointer; background:rgba(167,139,250,.2);color:var(--p3);font-size:.75rem;font-weight:800; display:flex;align-items:center;justify-content:center;transition:all .15s; } .discount-mode-btn:hover{background:rgba(167,139,250,.32)} .discount-mode-btn.is-percent{background:rgba(245,158,11,.22);color:var(--gold)} /* بدج قرمز اعلان (تیکت‌های خوانده‌نشده) روی آیتم‌های دک */ .dock-icon{position:relative} .dock-badge{ position:absolute; top:-7px; left:-9px; min-width:16px; height:16px; padding:0 3px; border-radius:50%; background:var(--red); color:#fff; font-size:.62rem; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px rgba(13,0,25,.9); z-index:2; } [data-theme="light"] .dock-badge{ box-shadow:0 0 0 2px rgba(245,243,255,.95); } /* ===================================================== انیمیشن‌های یکپارچه‌ی سایت: پاپ‌آپ‌ها، اخطارها/توست‌ها، هاورها (این بخش عمداً در انتهای فایل است تا رفتار واحد را جایگزین تنظیمات پراکنده‌ی قبلی کند و روی کل اپ + پنل ادمین اعمال شود) ===================================================== */ @keyframes fbFadeIn { from{opacity:0} to{opacity:1} } @keyframes fbFadeOut { from{opacity:1} to{opacity:0} } @keyframes fbModalIn { from{opacity:0; transform:translate(-50%,-50%) scale(.95)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} } @keyframes fbModalOut { from{opacity:1; transform:translate(-50%,-50%) scale(1)} to{opacity:0; transform:translate(-50%,-50%) scale(.95)} } @keyframes fbToastIn { from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)} } @keyframes fbToastOut { from{opacity:1; transform:translate(-50%,0)} to{opacity:0; transform:translate(-50%,14px)} } @keyframes fbPopIn { from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} } /* پاپ‌آپ اصلی (مودال) — چه در اپ چه در پنل ادمین */ .modal-overlay{ animation:fbFadeIn .18s ease; } .modal-overlay.closing{ animation:fbFadeOut .15s ease forwards; } .modal-box{ animation:fbModalIn .22s cubic-bezier(.16,1,.3,1); } .modal-box.closing{ animation:fbModalOut .15s ease forwards; } /* پاپ‌آپ‌های کوچک شناور: تقویم شمسی، منوهای کشویی، سرچ‌باکس */ .jdp-panel, .search-dropdown, .stage-menu, .svc-panel, .dropdown-panel{ animation: fbPopIn .16s cubic-bezier(.16,1,.3,1); } /* پاپ‌آپ مسدودکننده‌ی پایان اشتراک — با انیمیشن و پشتیبانی کامل از تم روشن/تیره */ .sublock-overlay{ position:fixed; inset:0; z-index:9000; background:rgba(5,0,15,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:1rem; animation:fbFadeIn .3s ease; } [data-theme="light"] .sublock-overlay{ background:rgba(30,19,51,.32); } .sublock-box{ background:var(--glass-s); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); border:1px solid var(--gb); border-radius:var(--radius-lg); box-shadow:var(--sh-lg); padding:2.2rem 1.8rem; max-width:400px; width:100%; text-align:center; animation:fbModalIn .35s cubic-bezier(.16,1,.3,1); } .sublock-icon{ width:64px; height:64px; border-radius:50%; margin:0 auto 1.1rem; background:var(--gold-bg); color:var(--gold); display:flex; align-items:center; justify-content:center; } .sublock-title{ font-weight:800; font-size:1.05rem; color:var(--tx); margin-bottom:.5rem; } .sublock-text{ font-size:.85rem; color:var(--tx3); line-height:1.9; margin-bottom:1.6rem; } .sublock-actions{ display:flex; flex-direction:column; gap:.7rem; } .sublock-actions a{ display:block; padding:.85rem; border-radius:var(--radius-xs); text-decoration:none; font-weight:700; font-size:.88rem; transition:var(--tr); } .sublock-actions a.primary{ background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; } .sublock-actions a.primary:hover{ filter:brightness(1.08); } .sublock-actions a.secondary{ background:var(--glass-h); color:var(--tx2); border:1px solid var(--gb); } .sublock-actions a.secondary:hover{ background:var(--glass-s); } /* اخطار و توست */ .alert{ animation: fbFadeIn .2s ease; } .alert.closing{ animation: fbToastOut .18s ease forwards; } .alert.toast-anim{ animation: fbToastIn .22s cubic-bezier(.16,1,.3,1); } .alert.toast-anim.closing{ animation: fbToastOut .18s ease forwards; } /* ── هاورهای یکپارچه: همه با یک زمان‌بندی و منحنی واحد ── */ .btn, .dock-item, .admin-nav-item, .modal-close, .theme-toggle, .card, .dcard, .kpi-card, .stat-tile, .type-card, .table-wrap tr, table.admin-table tr, .tab-btn, .badge, .user-chip, a{ transition: transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr), border-color var(--tr), opacity var(--tr) !important; } .btn:hover:not(:disabled){ transform:translateY(-1px); } .btn:active:not(:disabled){ transform:translateY(0) scale(.98); } .card:hover, .dcard:hover{ transform:translateY(-2px); box-shadow:var(--sh-lg); } .admin-kpi:hover, .admin-section:hover{ box-shadow:var(--sh-lg); } .table-wrap tbody tr:hover td, table.admin-table tbody tr:hover td{ background:var(--glass-h); } /* ===================================================== انیمیشن ورود/خروج بین صفحات + نوار لودینگ بالای صفحه (روی کل اپ + پنل ادمین اعمال می‌شود چون هر دو app.css/app.js را لود می‌کنند) ===================================================== */ @keyframes fbPageIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} } @keyframes fbPageOut { from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-8px)} } .page-content{ animation:fbPageIn .42s cubic-bezier(.16,1,.3,1) both; } html.fb-page-leaving .page-content, html.fb-page-leaving .auth-card-wrap{ animation:fbPageOut .16s ease forwards !important; } /* نوار لودینگ بالای صفحه (شبیه یوتیوب/گیت‌هاب) هنگام رفتن به صفحه‌ی بعد */ .fb-loadbar{ position:fixed; top:0; right:0; left:0; height:3px; width:0%; z-index:99999; pointer-events:none; opacity:0; background:linear-gradient(90deg,#7c3aed,#e879f9,#a78bfa); box-shadow:0 0 10px rgba(167,139,250,.7),0 0 4px rgba(167,139,250,.9); } .fb-loadbar.is-loading{ opacity:1; transition:width 4s cubic-bezier(.1,.6,.2,1); } .fb-loadbar.is-done{ opacity:1; transition:width .3s ease; } .fb-loadbar.is-hidden{ transition:opacity .3s ease; opacity:0; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ===================================================== بنر نصب اپلیکیشن (PWA) — اندروید/ویندوز با پرامپت بومی، آیفون با راهنما ===================================================== */ .pwa-install-banner{ position:fixed; right:1rem; left:1rem; bottom:calc(var(--toast-bottom, 6.6rem) + .3rem); z-index:2000; margin:0 auto; max-width:430px; display:flex; align-items:flex-start; gap:.7rem; background:var(--glass-s); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); border:1px solid var(--gb); border-radius:var(--radius); padding:.9rem 1rem; box-shadow:var(--sh-lg); animation:fbToastIn .3s cubic-bezier(.16,1,.3,1); } .pwa-install-banner.closing{ animation:fbToastOut .2s ease forwards; } .pwa-install-icon{width:40px;height:40px;border-radius:11px;flex-shrink:0;object-fit:contain;background:var(--glass-h);padding:6px} .pwa-install-body{flex:1;min-width:0} .pwa-install-title{font-size:.83rem;font-weight:800;color:var(--tx)} .pwa-install-sub{font-size:.72rem;color:var(--tx3);margin-top:.2rem;line-height:1.7} .pwa-install-sub b{color:var(--p3)} .pwa-install-actions{display:flex;gap:.5rem;margin-top:.6rem} .pwa-install-actions .btn{padding:.4rem .85rem;font-size:.76rem} .pwa-install-close{background:none;border:none;color:var(--tx3);cursor:pointer;padding:.3rem;display:flex;flex-shrink:0;border-radius:6px;transition:var(--tr)} .pwa-install-close:hover{color:var(--red);background:var(--red-bg)} .pwa-install-close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2} @media(max-width:480px){ .pwa-install-banner{ right:.7rem; left:.7rem; padding:.8rem .85rem } } /* ── صفحه‌ی چت پشتیبانی (support.php) ─────────────────────── دو ستون: لیست تیکت‌ها (سایدبار) + پنل گفتگوی تیکت فعال. کلاس‌ها با پیشوند tk- تا با استایل‌های قدیمی .ticket-* (که فقط تو admin.css بودن و سمت کاربر اصلاً لود نمی‌شدن) تداخل نداشته باشه. */ .tk-app{ display:grid;grid-template-columns:300px 1fr;gap:1rem; height:min(560px, calc(100vh - 230px));min-height:400px; } .tk-sidebar{ background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid var(--gb);border-radius:var(--radius); display:flex;flex-direction:column;overflow:hidden; } .tk-sidebar-header{ display:flex;justify-content:space-between;align-items:center;gap:.5rem; padding:1rem 1.1rem;border-bottom:1px solid var(--gb2);font-weight:800;font-size:.9rem;flex-shrink:0; } .tk-list{flex:1;overflow-y:auto} .tk-list-empty{padding:2.5rem 1rem;text-align:center;color:var(--tx3);font-size:.8rem} .tk-list-item{padding:.85rem 1.1rem;border-bottom:1px solid var(--gb2);border-inline-start:3px solid transparent;cursor:pointer;transition:background .12s} .tk-list-item:hover{background:var(--glass-h)} .tk-list-item.active{background:rgba(124,58,237,.1);border-inline-start-color:var(--p3)} .tk-list-item-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.4rem} .tk-list-subject{font-weight:700;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .tk-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0} .tk-list-item-bottom{display:flex;justify-content:space-between;align-items:center;gap:.5rem} .tk-list-date{font-size:.68rem;color:var(--tx3);flex-shrink:0} .tk-list-preview{font-size:.74rem;color:var(--tx3);margin-top:.35rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-chat{ background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid var(--gb);border-radius:var(--radius); display:flex;flex-direction:column;overflow:hidden; } .tk-empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;color:var(--tx3);font-size:.84rem;padding:2rem} .tk-empty-state svg{width:50px;height:50px;stroke:currentColor;fill:none;stroke-width:1.3;opacity:.35} .tk-chat-header{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.2rem;border-bottom:1px solid var(--gb2);flex-shrink:0} .tk-back-btn{display:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--gb2);background:var(--glass);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--tx2)} .tk-back-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2} .tk-chat-subject{font-weight:800;font-size:.9rem} .tk-chat-meta{display:flex;align-items:center;gap:.5rem;margin-top:.3rem;font-size:.72rem;color:var(--tx3)} .tk-messages{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.6rem} .tk-bubble-row{display:flex} .tk-bubble-row.from-user{justify-content:flex-start} .tk-bubble-row.from-admin{justify-content:flex-end} .tk-bubble{max-width:72%;padding:.65rem .9rem;border-radius:14px;font-size:.85rem;line-height:1.7;white-space:pre-wrap;word-break:break-word} .tk-bubble.from-user{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;border-bottom-right-radius:4px} .tk-bubble.from-admin{background:var(--glass-h);border:1px solid var(--gb2);border-bottom-left-radius:4px} .tk-bubble-time{font-size:.65rem;margin-top:.35rem;opacity:.75} .tk-bubble-row.new-msg{animation:fbPopIn .25s cubic-bezier(.16,1,.3,1)} .tk-composer{display:flex;gap:.5rem;align-items:flex-end;padding:.9rem 1.1rem;border-top:1px solid var(--gb2);flex-shrink:0} .tk-composer textarea{flex:1;resize:none;max-height:120px;min-height:42px;line-height:1.5;overflow-y:auto} .tk-send-btn{width:40px;height:40px;border-radius:50%;background:var(--p3);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .12s,opacity .12s} .tk-send-btn:hover{transform:scale(1.06)} .tk-send-btn:disabled{opacity:.5;cursor:default;transform:none} .tk-send-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2} .tk-closed-banner{padding:.9rem;text-align:center;color:var(--tx3);font-size:.8rem;border-top:1px solid var(--gb2);flex-shrink:0} .tk-icon-btn{ width:40px;height:40px;border-radius:50%;border:1px solid var(--gb2);background:var(--glass); color:var(--tx2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; transition:all .12s; } .tk-icon-btn:hover{background:var(--glass-h);color:var(--tx)} .tk-icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2} .tk-icon-btn.recording{background:var(--red);border-color:var(--red);color:#fff;animation:tkPulse 1.2s ease-in-out infinite} @keyframes tkPulse{0%,100%{box-shadow:0 0 0 0 rgba(244,63,94,.5)}50%{box-shadow:0 0 0 8px rgba(244,63,94,0)}} .tk-attach-preview{ display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.6rem 1.1rem; border-top:1px solid var(--gb2);background:var(--glass-h);font-size:.78rem;color:var(--tx2); } .tk-attach-chip{display:flex;align-items:center;gap:.5rem;background:var(--glass);border:1px solid var(--gb2);border-radius:10px;padding:.35rem .5rem} .tk-attach-chip img{width:36px;height:36px;object-fit:cover;border-radius:7px} .tk-attach-chip button{width:24px;height:24px;border-radius:50%;border:none;background:var(--red-bg);color:var(--red);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .tk-attach-chip button svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4} .tk-bubble-img{max-width:220px;max-height:220px;border-radius:10px;display:block;cursor:pointer} /* پلیر سفارشی ویس (نه