:root{ color-scheme: dark; /* Dark palette (inspired by the provided UI) */ --bg:#050505; --bg2:#0b0b0b; --panel:#111111; --card:#0d0d0d; --border:rgba(254,87,7,.20); --border-rgb: 254,87,7; --primary-rgb: 254,87,7; --primary-200:#ffb18c; --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.66); --muted2:rgba(255,255,255,.52); --accent:#FE5707; --accent-rgb: 254,87,7; --accent2:#22c55e; --danger:#ef4444; --danger-rgb: 239,68,68; --link: var(--accent); --shadow:0 14px 44px rgba(0,0,0,.35); --radius:18px; --font: "Vazirmatn", "IRANSansX", "IRANSans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Tahoma", Arial; } /* Light theme overrides (toggled by data-theme="light" on OR class="theme-light") */ :root[data-theme="light"], html.theme-light, body.theme-light{ color-scheme: light; --bg:#f7f7f7; --bg2:#f0f0f0; --panel:#ffffff; --card:#ffffff; --border:rgba(10,10,10,.12); --border-rgb: 10,10,10; --primary-rgb: 254,87,7; --primary-200:#FE5707; --text:rgba(15,23,42,.92); --muted:rgba(15,23,42,.62); --muted2:rgba(15,23,42,.52); --accent:#FE5707; --accent-rgb: 254,87,7; --accent2:#22c55e; --danger:#ef4444; --danger-rgb: 239,68,68; --link: var(--accent); --shadow:0 14px 44px rgba(2,6,23,.10); --radius:18px; --font: "Vazirmatn", "IRANSansX", "IRANSans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Tahoma", Arial; } *{box-sizing:border-box} /* Force HTML hidden attribute to work even when author CSS sets display:flex/inline-flex */ [hidden]{display:none !important;} html,body{height:100%} html,body{max-width:100%;overflow-x:hidden} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;} body{ margin:0; font-family:var(--font); background:linear-gradient(160deg, var(--bg), var(--bg2) 55%, var(--bg)); color:var(--text); } /* Ensure Firefox form controls use the same font */ button,input,select,textarea{font-family:var(--font)} html[data-theme="light"] .sidebar, body.theme-light .sidebar{ background:rgba(255,255,255,.86); } html[data-theme="light"] .card, body.theme-light .card{ background:rgba(255,255,255,.92); } html[data-theme="light"] .out, body.theme-light .out{ background:rgba(2,6,23,.04); } html[data-theme="light"] .modal__panel, body.theme-light .modal__panel{ background:rgba(255,255,255,.96); } html[data-theme="light"] .nav__item, body.theme-light .nav__item, html[data-theme="light"] .navGroup__btn, body.theme-light .navGroup__btn{ background:rgba(2,6,23,.02); } html[data-theme="light"] .nav__item.is-active, body.theme-light .nav__item.is-active{ background:rgba(var(--accent-rgb),.12); } /* Light mode: use the orange brand accent for sidebar text */ html[data-theme="light"] .sidebar, body.theme-light .sidebar{ color:#FE5707; } html[data-theme="light"] .sidebar .muted, body.theme-light .sidebar .muted{ color: rgba(254,87,7,.78); } html[data-theme="light"] .nav__item, body.theme-light .nav__item, html[data-theme="light"] .navGroup__btn, body.theme-light .navGroup__btn{ color:#FE5707; } html[data-theme="light"] .nav__ico, body.theme-light .nav__ico{ color: currentColor; } html[data-theme="light"] .navGroup__chev:hover, body.theme-light .navGroup__chev:hover{ background: rgba(2,6,23,.03); } .layout{ display:grid; grid-template-columns: 280px 1fr; min-height:100vh; } .sidebar{ background:rgba(15,23,42,.82); border-left:1px solid var(--border); padding:16px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:14px; /* prevent expanded menus from spilling under the footer */ overflow:hidden; } .brand__title{font-size:20px;font-weight:800;letter-spacing:.3px} .brand__sub{font-size:12px;color:var(--muted);margin-top:2px} .activebox{ background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius); padding:12px; } .activebox__label{color:var(--muted);font-size:12px} .activebox__value{margin-top:6px;font-weight:700} .activebox__actions{margin-top:10px} .nav{ display:flex; flex-direction:column; justify-content:flex-start; gap:8px; /* make the menu scroll inside the sidebar so footer stays clean */ flex:1 1 auto; min-height:0; overflow:auto; padding-bottom:10px; } /* Hide the scrollbar in the sidebar nav (still scrollable with wheel/touch) */ .nav{ scrollbar-width:none; -ms-overflow-style:none; } .nav::-webkit-scrollbar{ width:0; height:0; } .navbtn{ border:1px solid var(--border); background:rgba(255,255,255,.02); color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer; text-align:right; transition:.15s ease; } .navbtn:hover{transform:translateY(-1px);box-shadow:var(--shadow)} .navbtn.active{ background:rgba(79,140,255,.18); border-color:rgba(79,140,255,.45); } .footer{margin-top:auto;display:flex;flex-direction:column;gap:6px} .link{color:var(--muted);text-decoration:none} .link:hover{color:var(--text)} .main{padding:18px 18px 40px} .topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; } .topbar__title{font-weight:900;font-size:18px} .topbar__right{display:flex;gap:8px;align-items:center} .card{ background:linear-gradient(180deg, rgba(15,25,48,.86), rgba(15,25,48,.68)); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); backdrop-filter: blur(6px); } .card h2{margin:0 0 10px;font-size:16px} .h3{margin:0 0 8px;font-size:14px} .small{font-size:12px} .grid2{display:grid;grid-template-columns: 1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} @media (max-width: 1180px){ .grid3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width: 980px){ .layout{grid-template-columns: 1fr} .sidebar{position:relative;height:auto} .grid2{grid-template-columns:1fr} .grid3{grid-template-columns:1fr} } .form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 16px;align-items:start} .form label{display:flex;flex-direction:column;gap:6px;width:100%} .form label.check{flex-direction:row;gap:8px;align-items:center} /* Switch (checkbox) inside forms */ .form label.check{ user-select:none; } .form label.check input[type="checkbox"]{ appearance:none; width:46px; height:28px; padding:0; margin:0; border-radius:999px; border:1px solid rgba(148,163,184,.35); background:rgba(148,163,184,.18); position:relative; cursor:pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); flex:0 0 auto; } .form label.check input[type="checkbox"]::before{ content:""; position:absolute; width:22px; height:22px; border-radius:999px; inset-block-start:2px; inset-inline-start:2px; background:rgba(255,255,255,.90); box-shadow:0 10px 18px rgba(0,0,0,.25); transition: inset-inline-start .16s ease, transform .16s ease; } .form label.check input[type="checkbox"]:checked{ background:rgba(var(--accent-rgb),.30); border-color:rgba(var(--accent-rgb),.55); } .form label.check input[type="checkbox"]:checked::before{ inset-inline-start: calc(100% - 2px - 22px); transform: translateZ(0); } html[data-theme="light"] .form label.check input[type="checkbox"], body.theme-light .form label.check input[type="checkbox"]{ border-color: rgba(15,23,42,.18); background: rgba(2,6,23,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.92); } html[data-theme="light"] .form label.check input[type="checkbox"]:checked, body.theme-light .form label.check input[type="checkbox"]:checked{ background: rgba(var(--accent-rgb),.20); border-color: rgba(var(--accent-rgb),.55); } /* Settings: key-from-file row alignment */ .keyFileRow{ align-items:center; gap:12px; } .keyFileRow .check{ white-space:nowrap; } .keyFileRow .filepick{ flex:1 1 360px; } .form label > input, .form label > select, .form label > textarea{width:100%; box-sizing:border-box} /* فیلتر بازه زمانی (جمع‌وجور) */ .filter-mini{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } html[data-theme="light"] .filter-mini, body.theme-light .filter-mini{ border-color:rgba(15,23,42,.12); background:linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); } .filter-mini__toggle{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0} .filter-mini__fields{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap} .filter-mini__field{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted)} .filter-mini__field input{width:150px;min-width:150px} .input--sm{padding:8px 10px;border-radius:10px;font-size:12px} /* فرم‌ها: چیدمان تمیزتر و کمتر تکراری (ورودی‌ها خودشان قاب دارند) */ .form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px 14px; align-items:start; } .form label{display:flex;flex-direction:column;gap:6px;width:100%} /* روی فرم‌های قبلی که از label.check استفاده می‌کنند */ .form label.check{flex-direction:row;gap:8px;align-items:center} /* برای فرم‌های شلوغ: گرید ۱۲ ستونه با امکان کوچک/بزرگ کردن فیلدها */ .form--pro{ grid-template-columns:repeat(12, minmax(0, 1fr)); } .form--pro > label{grid-column: span 6;} .form--pro > .row, .form--pro > .formmsg, .form--pro > .formsep{grid-column: span 12;} .form--pro > label.col-12{grid-column: span 12;} .form--pro > label.col-8{grid-column: span 8;} .form--pro > label.col-6{grid-column: span 6;} .form--pro > label.col-5{grid-column: span 5;} .form--pro > label.col-4{grid-column: span 4;} .form--pro > label.col-3{grid-column: span 3;} .form--pro > label.col-2{grid-column: span 2;} .form--pro > .col-12{grid-column: span 12;} .form--pro > .col-8{grid-column: span 8;} .form--pro > .col-6{grid-column: span 6;} .form--pro > .col-5{grid-column: span 5;} .form--pro > .col-4{grid-column: span 4;} .form--pro > .col-3{grid-column: span 3;} .form--pro > .col-2{grid-column: span 2;} /* جداکننده/تیتر داخل فرم‌ها */ .formsep{ display:flex; align-items:center; gap:10px; margin-top:2px; padding-top:8px; color:var(--muted); font-weight:800; font-size:12px; } .formsep::before{ content:""; flex:1 1 auto; height:1px; background:rgba(148,163,184,.24); } .formsep::after{ content:""; flex:10 10 auto; height:1px; background:rgba(148,163,184,.14); } html[data-theme="light"] .formsep::before, html[data-theme="light"] .formsep::after, body.theme-light .formsep::before, body.theme-light .formsep::after{ background:rgba(15,23,42,.12); } /* در عرض‌های کمتر (موبایل): فرم‌ها ستونیِ کامل نشوند؛ ترکیبی و خوانا باشند */ @media (max-width: 980px){ /* فرم‌های ساده: 1 یا 2 ستون بسته به فضا */ .form{grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));} /* فرم‌های Pro: همان گرید ۱۲ ستونه، ولی اسپن‌ها برای موبایل بهینه می‌شوند */ .form--pro{grid-template-columns:repeat(12, minmax(0, 1fr));} /* پیش‌فرض: فیلدها تمام‌عرض (تا ریز نشوند) */ .form--pro > label{grid-column: span 12;} .form--pro > .row, .form--pro > .formmsg, .form--pro > .formsep{grid-column: span 12;} /* فیلدهای کوچک‌تر: دو ستونه */ .form--pro > label.col-4, .form--pro > label.col-3, .form--pro > label.col-2{grid-column: span 6;} /* نیم‌عرضِ اجباری (برای جاهایی مثل لوگو/امضاء یا تلفن/ایمیل) */ .form--pro > label.keep-half{grid-column: span 6 !important;} /* اسپن‌های دقیق برای موبایل (sm-*) — فقط در صورت نیاز روی همان فیلد بگذار */ .form--pro > label.sm-12{grid-column: span 12 !important;} .form--pro > label.sm-7{grid-column: span 7 !important;} .form--pro > label.sm-6{grid-column: span 6 !important;} .form--pro > label.sm-5{grid-column: span 5 !important;} /* سایر اجزاءِ غیر-لیبل که col-* دارند */ .form--pro > .col-12{grid-column: span 12;} .form--pro > .col-8{grid-column: span 12;} .form--pro > .col-6{grid-column: span 12;} .form--pro > .col-5{grid-column: span 12;} .form--pro > .col-4, .form--pro > .col-3, .form--pro > .col-2{grid-column: span 12;} } /* دیگر label به شکل باکس تکراری نیست؛ اگر جایی باکس خواستی از .fieldbox استفاده کن */ .fieldbox{ padding:10px 10px; border-radius:16px; border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } html[data-theme="light"] .fieldbox, body.theme-light .fieldbox{ border-color:rgba(15,23,42,.09); background:linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); } .field{display:flex;flex-direction:column;gap:6px} label{color:var(--muted);font-size:12px} input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{ padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); color:var(--text); outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, select:hover, textarea:hover{ border-color:rgba(255,255,255,.14); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus{ border-color:rgba(79,140,255,.55); box-shadow: 0 0 0 3px rgba(79,140,255,.16), inset 0 1px 0 rgba(255,255,255,.06); } /* ---------------- File inputs (nicer upload boxes) ---------------- */ input[type="file"]{ padding:10px 12px; border-radius:14px; border:1px dashed rgba(148,163,184,.35); background:rgba(255,255,255,.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } html[data-theme="light"] input[type="file"], body.theme-light input[type="file"]{ border-color:rgba(15,23,42,.18); background:rgba(2,6,23,.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } input[type="file"]::file-selector-button{ border:1px solid rgba(var(--accent-rgb),.40); background:rgba(var(--accent-rgb),.10); color:var(--accent); border-radius:12px; padding:8px 12px; margin-inline-end:10px; cursor:pointer; } input[type="file"]::file-selector-button:hover{ background:rgba(var(--accent-rgb),.16); } input[type="file"]:hover{ border-color:rgba(var(--accent-rgb),.35); } input[type="file"]:focus{ border-color:rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14), inset 0 1px 0 rgba(255,255,255,.06); } /* File pick (custom, for private key selection) */ .filepick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:14px; border:1px dashed rgba(148,163,184,.35); background:rgba(255,255,255,.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .filepick__name{ flex:1 1 220px; min-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html[data-theme="light"] .filepick, body.theme-light .filepick{ border-color:rgba(15,23,42,.18); background:rgba(255,255,255,.80); box-shadow: 0 8px 16px rgba(2,6,23,.05); } @media (max-width: 520px){ .filepick{gap:8px;} .filepick__name{flex-basis:100%; min-width:0;} } /* کنترل‌های فرم در حالت روشن */ html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="light"] select, html[data-theme="light"] textarea, body.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.theme-light select, body.theme-light textarea{ background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)); border-color:rgba(15,23,42,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, html[data-theme="light"] select:hover, html[data-theme="light"] textarea:hover, body.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, body.theme-light select:hover, body.theme-light textarea:hover{ border-color:rgba(15,23,42,.20); } /* رفع مشکل خوانایی منوی کشویی در حالت شب */ select, option{ background-color: rgba(15,23,42,.98); color: var(--text); } html[data-theme="light"] select, html[data-theme="light"] option, body.theme-light select, body.theme-light option{ background-color:#ffffff; color: var(--text); } textarea{resize:vertical} .muted{color:var(--muted)} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-start} .sortHeadBtn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:0;color:inherit;font:inherit;cursor:pointer} .sortHeadBtn__dir{font-size:11px;opacity:.8} .sortHeadBtn.is-active{font-weight:700} .invRowActions{flex-wrap:nowrap;gap:4px;align-items:center;white-space:nowrap} .invRowActions .btn{flex:0 0 auto} .invActionsCell{white-space:nowrap} .invActionBtn{background:transparent !important;border:1px solid var(--border) !important;box-shadow:none !important} .invActionBtn:hover{background:rgba(var(--accent-rgb),.08) !important;border-color:rgba(var(--accent-rgb),.35) !important} /* عملیات فهرست فاکتور: دکمه‌ها داخل باکس مربعی */ .invActionBtn.btn--iconOnly{min-width:34px;width:34px;height:34px;border-radius:0 !important} .invActionBtn .btn__ico svg{width:15px;height:15px} /* عملیات داخل جدول (طرف حساب/کالا): مرتب و جمع‌وجور */ .opActions{ display:flex; gap:8px; flex-wrap:nowrap; align-items:center; justify-content:flex-start; } .opActions .btn{ min-width:92px; justify-content:center; } /* نسخه جمع‌وجور برای ردیف‌های شلوغ (طرف حساب/کالا) */ .opActions--mini{ gap:6px; } .opActions--mini .btn{ min-width:0; padding-inline:10px; } /* نوار عملیات گروهی (انتخاب‌شده/حذف انتخاب‌شده/حذف همه) */ .bulkActions{ display:flex; gap:8px; align-items:center; justify-content:flex-start; flex-wrap:wrap; } @media (max-width: 640px){ .opActions{ flex-wrap:wrap; gap:6px; } .opActions .btn{ min-width:84px; } } /* عملیات داخل جدول (تنظیمات شرکت): دکمه‌ها هم‌اندازه و زیر هم */ .opsRow{ gap:8px; flex-wrap:nowrap; flex-direction:column; align-items:stretch; } .opsRow .btn{ width:100%; min-width:0; justify-content:center; } .opsRow .btn--sm{min-width:0} /* تنظیمات چاپ: ردیف دکمه‌ها و پیش‌نمایش مرتب‌تر */ .printActions{gap:10px;flex-wrap:wrap;align-items:center} .printActionBtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex:1 1 100%;min-width:0} .printActions--split{align-items:flex-start} /* Connection ID is alphanumeric: keep it LTR so the whole value is readable (esp. on mobile) */ #c_clientId{direction:ltr;text-align:left;unicode-bidi:plaintext} .imgPreview{ max-height:64px; max-width:200px; display:none; border:1px solid var(--border); border-radius:12px; padding:6px; background:rgba(255,255,255,.88); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="dark"] .imgPreview{background:rgba(2,6,23,.55)} .btn{ display:inline-flex; position:relative; align-items:center; justify-content:center; gap:8px; white-space:nowrap; border:1px solid rgba(var(--accent-rgb),.55); background:linear-gradient(180deg, rgba(var(--accent-rgb),.98), rgba(var(--accent-rgb),.78)); color:#fff; padding:10px 12px; border-radius:14px; cursor:pointer; box-shadow:0 12px 30px rgba(var(--accent-rgb),.16); transition:transform .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease; } .btn svg{width:18px;height:18px;flex:0 0 18px} .btn:hover{filter:brightness(1.03);transform:translateY(-1px)} .btn:active{transform:translateY(0);filter:brightness(.98)} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none} /* حاشیه/هایلایت ظریف برای دکمه‌های اصلی نارنجی */ .btn:not(.btn--ghost):not(.btn--danger)::after{ content:""; position:absolute; inset:1px; border-radius:inherit; border:1px solid rgba(255,255,255,.22); pointer-events:none; } html[data-theme="dark"] .btn:not(.btn--ghost):not(.btn--danger)::after{ border-color: rgba(255,255,255,.18); } @keyframes popIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } .btn.btn-in{animation:popIn .18s ease-out both} .btn--ghost{ border:1px solid rgba(var(--accent-rgb),.28); background:rgba(255,255,255,.04); color:var(--accent); box-shadow:none; } .btn--ghost:hover{background:rgba(var(--accent-rgb),.08)} .btn--danger{ border:1px solid rgba(var(--danger-rgb),.60); background:linear-gradient(180deg, rgba(var(--danger-rgb),.96), rgba(var(--danger-rgb),.70)); color:#fff; box-shadow:0 12px 30px rgba(var(--danger-rgb),.12); } .divider{height:1px;background:var(--border);margin:8px 0} .kv{display:grid;grid-template-columns: 160px 1fr;gap:8px;align-items:center;margin-top:10px} .kv__k{color:var(--muted);font-size:12px} .kv__v{font-weight:700} .out{ background:rgba(0,0,0,.25); border:1px solid var(--border); border-radius:12px; padding:12px; overflow:auto; min-height:180px; } .out--sm{min-height:auto;max-height:360px;white-space:pre-wrap} .msgbox{ padding:10px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.03); line-height:1.9; } .msgbox--ok{border-color:rgba(34,197,94,.45)} .msgbox--err{border-color:rgba(255,90,95,.55)} .table{ width:100%; border-collapse:collapse; font-size:13px; } .table th,.table td{ border-bottom:1px solid var(--border); padding:10px 8px; text-align:right; vertical-align:top; } .table th{color:var(--muted);font-weight:700} .th-sort{cursor:pointer;user-select:none;white-space:nowrap} .th-sort:hover{color:var(--text)} .th-sort .sort-ind{margin-right:6px;color:var(--muted2);font-size:11px} .th-sort.is-active{color:var(--text)} .badge{ display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.03); font-size:12px; } /* green "active" label in settings */ .badge--active{ border-color: rgba(46, 204, 113, .65); background: rgba(46, 204, 113, .14); color: #2ecc71; font-weight: 800; } .tablewrap{overflow:auto} /* Some markup uses tableWrap (capital W). Keep both. */ .tableWrap{overflow:auto} .tablewrap,.tableWrap{-webkit-overflow-scrolling:touch;max-width:100%;width:100%} /* جدول طرف حساب: ستون‌ها متناسب با محتوا باشند، بدون بزرگ‌کردن کل باکس فهرست */ .table--fit{width:100%;table-layout:auto} .table--customers{width:100%;table-layout:auto} .table--customers th,.table--customers td{white-space:nowrap} .table--customers thead th{text-align:center;vertical-align:middle;} .table--customers thead .sortHeadBtn{margin-inline:auto;justify-content:center;} .table--customers .custCol--code, .table--customers .custCol--nid, .table--customers .custCol--phone, .table--customers .custCol--ops{ width:1%; } .table--customers .custCol--name{ width:auto; white-space:normal; word-break:break-word; min-width:220px; } .table--customers .custCol--nid, .table--customers .custCol--phone{ direction:ltr; text-align:left; unicode-bidi:plaintext; min-width:0; } .table--customers .custCol--ops{min-width:108px;text-align:center;} .table--customers thead .custCol--ops{padding-inline:14px;} /* فرم طرف حساب: متن نوع خریدار داخل select واضح‌تر دیده شود */ #cust_buyerType{font-size:13px;padding-inline-start:14px} /* ---------------- Settings (mobile-friendly) ---------------- */ /* Companies list as cards (used on narrow screens) */ .companyCards{display:flex;flex-direction:column;gap:10px} .companyCard{ border:1px solid var(--border); border-radius:16px; padding:12px; background:rgba(255,255,255,.02); } .companyCard__head{display:flex;flex-direction:column;gap:6px;margin-bottom:8px} .companyCard__badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .companyCard__name{font-weight:900;font-size:14px} .companyCard__meta .kv{margin:0;grid-template-columns:110px 1fr;gap:6px} .companyCard__url{ direction:ltr; text-align:left; unicode-bidi:plaintext; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .companyCard__actions{margin-top:10px} html[data-theme="light"] .companyCard, body.theme-light .companyCard{ background:rgba(255,255,255,.92); border-color:rgba(15,23,42,.10); box-shadow:0 10px 22px rgba(2,6,23,.06); } /* Settings rows that tend to overflow on small screens */ @media (max-width: 640px){ .keyFileRow{align-items:stretch;} .keyFileRow .check{width:100%;} .keyFileRow .filepick{flex:1 1 auto; min-width:0; width:100%;} /* Settings: connection id field feels too tight on phones */ #c_clientId{min-height:46px;} } /* Settings (narrow screens): keep print actions split (buttons + previews side-by-side) and do NOT show an empty previews column when no assets exist. */ @media (max-width: 980px){ .printActions--split{flex-wrap:nowrap;align-items:stretch;gap:12px;} .printActionBtns{flex:1 1 auto; min-width:0;} .printActionBtns .btn{flex:1 1 100%; width:100%;} .printActionBtns .muted.small{flex:1 1 100%; width:100%;} .printActions--split .imgPreview{max-width:100%;max-height:118px;} /* Connection id readability */ #c_clientId{min-height:46px;} } .n{direction:ltr;text-align:left;unicode-bidi:plaintext} .c{text-align:center} .in{ padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); width:100%; } .in--wide{min-width:180px} .btn--sm{padding:6px 10px;border-radius:12px;font-size:12px} .btn--sm svg{width:16px;height:16px;flex:0 0 16px} /* Extra small buttons (for edit/delete inside dense tables) */ .btn--xs{padding:4px 8px;border-radius:10px;font-size:11px;gap:6px;line-height:1;min-height:28px} .btn--xs svg{width:14px;height:14px;flex:0 0 14px} /* عملیات جدول (طرف حساب/کالا): دکمه‌های ویرایش/حذف جمع‌وجور و استاندارد */ .opActions--mini .btn.btn--xs{padding:4px 8px;min-height:28px;min-width:72px} .opActions--mini{gap:6px} .span2{grid-column:1 / -1} /* Small icon/text helpers */ .btn__ico{display:inline-flex;align-items:center;justify-content:center} .btn__text{display:inline-block;line-height:1} /* Theme toggle (system/day/night) */ #btnThemeToggle .ico--system, #btnThemeToggle .ico--sun, #btnThemeToggle .ico--moon{display:none} html[data-theme-mode="system"] #btnThemeToggle .ico--system{display:block} html[data-theme-mode="light"] #btnThemeToggle .ico--sun{display:block} html[data-theme-mode="dark"] #btnThemeToggle .ico--moon{display:block} /* ---- v7 UI aliases (new ids/classes) ---- */ .brand{font-size:20px;font-weight:800;letter-spacing:.3px} .brand--logo{ position:relative; display:flex; align-items:center; min-width:0; padding:0; background:transparent !important; border:0 !important; box-shadow:none !important; } .brandLogoImg{ display:block; width:min(100%, 250px); height:54px; object-fit:contain; object-position:right center; } .brandLogoImg--light, .brandLogoImg--dark{display:none;} html[data-theme="light"] .brandLogoImg--light, body.theme-light .brandLogoImg--light{display:block;} html[data-theme="dark"] .brandLogoImg--dark{display:block;} .brandRow{display:flex;align-items:center;justify-content:space-between;gap:10px} .brandActions{display:flex;align-items:center;gap:8px} /* Top-right icon buttons (fullscreen + help): icon-only, no border box */ .topIconBtn{ width:40px;height:40px;flex:0 0 40px;padding:0;border-radius:14px; border:0 !important; background:transparent !important; box-shadow:none !important; } .topIconBtn:hover{ background:rgba(var(--accent-rgb),.08) !important; } .topIconBtn:active{ background:rgba(var(--accent-rgb),.12) !important; } .topIconBtn svg{width:18px;height:18px;flex:0 0 18px} .fsBtn svg{width:18px;height:18px;flex:0 0 18px} .fsBtn .ico--fs-exit{display:none} .fsBtn.is-on .ico--fs{display:none} .fsBtn.is-on .ico--fs-exit{display:block} .sidebar__footer{margin-top:auto;color:var(--muted);font-size:12px} /* Footer controls (theme + timer) */ .sidebar__footerTop{justify-content:space-between;align-items:flex-start;gap:10px} .sidebar__footerBottom{justify-content:space-between;align-items:center;margin-top:8px} /* Footer meta (username + rotating clock) */ .footerMeta{display:flex;flex-direction:column;gap:6px;min-width:0} /* A tiny "gold board"-like ticker: Jalali (weekday+date) -> Gregorian -> Time (big) */ .clockTicker{ position:relative; height:42px; padding:0 10px; border-radius:14px; border:1px solid rgba(251,191,36,.28); background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.92)); color:rgba(253,224,71,.95); text-shadow:0 1px 0 rgba(0,0,0,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); max-width:260px; overflow:hidden; } .clockTicker__track{display:flex;flex-direction:column;will-change:transform} .clockTicker__slide{ height:42px; display:flex; align-items:center; justify-content:center; padding:0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .clockTicker__slide--jalali, .clockTicker__slide--greg{font-size:12px;font-weight:700;opacity:.95} .clockTicker__slide--time{ font-size:22px; font-weight:900; direction:ltr; font-variant-numeric:tabular-nums; letter-spacing:.6px; } html[data-theme="light"] .clockTicker, body.theme-light .clockTicker{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 26px rgba(2,6,23,.14); } /* Clock ticker in the sidebar footer: match the UI chips (same style as theme toggle) */ .clockTicker--ui{ /* a bit taller so the time/date never looks clipped */ height:44px; /* کمی فضای مفید بیشتر برای متن‌های بلند تاریخ */ padding:0 8px; border-radius:14px; border:1px solid rgba(var(--accent-rgb),.28); background:rgba(255,255,255,.04); /* Match requested text color for the rotating date/time ticker */ color:#ffb18c; text-shadow:none; box-shadow:none; max-width:320px; } .clockTicker--ui .clockTicker__slide{padding:0 4px} .clockTicker--ui .clockTicker__slide{height:44px} .clockTicker--ui .clockTicker__slide--jalali, .clockTicker--ui .clockTicker__slide--greg{font-size:12px;font-weight:800;opacity:1} .clockTicker--ui .clockTicker__slide--time{font-size:22px;font-weight:900;color:inherit;line-height:1} :root[data-theme="light"] .clockTicker--ui, html.theme-light .clockTicker--ui, body.theme-light .clockTicker--ui{ background:rgba(2,6,23,.03); border-color:rgba(var(--accent-rgb),.22); /* In day mode: use a stronger theme accent for readability */ color: var(--accent); } .footerControls{display:flex;flex-direction:column;align-items:center;gap:6px} .footerControls--bar{width:100%;align-items:stretch} .footerControls__top{ /* Stable footer layout (prevents jumping/misalignment) */ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .footerActionsMini{ display:flex; flex-direction:column; align-items:stretch; gap:8px; /* کمی فضای بیشتری به باکس اسلاید تاریخ/ساعت بده (بدون تغییر ترکیب) */ flex:0 1 112px; min-width:0; } .footerMetaMini{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-width:0; } .clockTicker--ui{width:100%;max-width:none} .footerUserMini{ width:100%; display:flex; align-items:center; gap:8px; justify-content:space-between; } .footerUserMini #envLabel{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .footerLinkChip, .footerInfoChip{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:14px; border:1px solid rgba(var(--accent-rgb),.22); background:rgba(255,255,255,.03); color:var(--text); padding:0 12px; font-weight:700; line-height:1; } .footerLinkChip{ width:100%; cursor:pointer; transition:border-color .18s ease, background .18s ease, transform .08s ease; } .footerLinkChip:hover{ border-color:rgba(var(--accent-rgb),.35); background:rgba(var(--accent-rgb),.08); } .footerLinkChip:active{ transform:translateY(1px); } .footerLinkChip:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); } .sidebar__footerBottom{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:8px; } .sidebar__footerBottom #userNameLabel{ color:var(--muted); } @media (max-width: 460px){ .sidebar__footerBottom{ grid-template-columns:1fr; } } @media (max-width: 460px){ .footerControls__top{flex-direction:column;align-items:stretch} .footerActionsMini{flex:1 1 auto} #btnThemeToggle,#sessionTimer{width:100%} } /* When the viewport is medium (e.g. mobile/off-canvas sidebar on a wider screen), stack footer rows so the date/time ticker has enough width (prevents truncation). */ @media (max-width: 920px) and (min-width: 461px){ .footerControls__top{flex-direction:column;align-items:stretch} .footerMetaMini{order:1} .footerActionsMini{order:2;flex-direction:row;gap:10px;flex:1 1 auto} #btnThemeToggle,#sessionTimer{flex:1 1 0;min-width:0;width:auto} #btnThemeToggle .btn__text{white-space:nowrap} } /* On narrow sidebars, make the ticker a touch more compact to avoid truncation */ @media (max-width: 420px){ .clockTicker--ui .clockTicker__slide--jalali, .clockTicker--ui .clockTicker__slide--greg{font-size:11px} .clockTicker--ui .clockTicker__slide--time{font-size:20px} } .btn--icon{min-width:0;padding:6px 8px;border-radius:12px} /* Sidebar footer: make all chips/buttons the same height for a neat aligned look */ .sidebar__footer #btnThemeToggle, .sidebar__footer #sessionTimer, .sidebar__footer .clockTicker--ui{min-height:44px} .sidebar__footer #btnThemeToggle{height:44px;padding:0 10px;border-radius:14px} .sidebar__footer #sessionTimer{height:44px;border-radius:14px;padding:0 10px} .sidebar__footer .timerChip{height:44px;padding:0 10px;border-radius:14px} .sidebar__footer .btn--icon{width:44px;height:44px;padding:0;border-radius:14px} /* دکمه روز/شب و تایمر کمی جمع‌وجورتر شود تا جا برای ساعت/تاریخ باز شود */ #btnThemeToggle{min-width:84px;font-size:11.5px} #btnThemeToggle .btn__text{white-space:nowrap} #sessionTimer{display:inline-flex;align-items:center;gap:6px;min-width:84px;justify-content:center;text-align:center;direction:ltr} .timerChip{ padding:8px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text); text-shadow:none; box-shadow:none; } .timerChip svg{width:16px;height:16px;flex:0 0 16px} html[data-theme="light"] .timerChip, body.theme-light .timerChip{ background:rgba(255,255,255,.92); box-shadow:0 10px 22px rgba(2,6,23,.06); } /* فیلدهای ناقص هنگام ذخیره */ .invalid{ border-color:rgba(239,68,68,.95) !important; box-shadow:0 0 0 3px rgba(239,68,68,.14) !important; } .nav__item{ position:relative; border:1px solid var(--border); background:rgba(255,255,255,.02); color:var(--text); padding:11px 12px; border-radius:16px; cursor:pointer; text-align:right; transition:.15s ease; display:flex; align-items:center; justify-content:space-between; gap:10px; } .nav__content{display:flex;align-items:center;gap:10px;min-width:0} .nav__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav__ico{width:18px;height:18px;flex:0 0 18px;opacity:.92} .nav__item:hover{transform:translateY(-1px);box-shadow:var(--shadow)} .nav__item::before{ content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:6px;height:6px; border-radius:999px; background:transparent; } .nav__item.is-active{ background:rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),.40); } .nav__item.is-active::before{ background:rgba(var(--accent-rgb),.95); box-shadow:0 0 0 6px rgba(var(--accent-rgb),.10); } /* --- Collapsible nav group (Account) --- */ .navGroup{display:flex;flex-direction:column;gap:6px} .navGroup__btn{ position:relative; border:1px solid var(--border); background:rgba(255,255,255,.02); color:var(--text); padding:11px 12px; border-radius:16px; cursor:pointer; text-align:right; transition:.15s ease; display:flex; align-items:center; justify-content:space-between; gap:10px; } /* Account group button should NOT show the left active dot */ .navGroup__btn::before{ display:none !important; } .navGroup__btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)} .navGroup__chev{display:inline-flex;align-items:center;justify-content:center;opacity:.85;transition:.18s ease} .navGroup__chev{padding:6px;border-radius:12px;cursor:pointer;user-select:none} .navGroup__chev:hover{background:rgba(255,255,255,.04)} .navGroup__chev svg{width:16px;height:16px} .navGroup.is-open .navGroup__chev{transform:rotate(-90deg)} .navGroup:not(.is-open) .navGroup__chev{transform:rotate(90deg)} .navGroup.has-active .navGroup__btn{ background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.32); } /* Tree look: dotted vertical line + dotted branches (RTL-friendly) */ .navTree{ position:relative; display:flex; flex-direction:column; justify-content:flex-start; gap:6px; margin-top:2px; padding-right:26px; } .navTree::before{ content:""; position:absolute; right:12px; top:8px; bottom:8px; border-right:1px dashed rgba(148,163,184,.55); pointer-events:none; } .nav__item--sub{ border-radius:14px; padding:10px 12px; font-size:13px; } .nav__item--sub .nav__ico{width:16px;height:16px;flex:0 0 16px} /* replace the default left dot with a tree node on the right */ .nav__item--sub::before{ content:""; position:absolute; left:auto; right:-17px; top:50%; transform:translateY(-50%); width:6px;height:6px; border-radius:999px; background:rgba(148,163,184,.85); } .nav__item--sub::after{ content:""; position:absolute; left:auto; right:-17px; top:50%; transform:translateY(-50%); width:17px; border-top:1px dashed rgba(148,163,184,.55); } .nav__item--sub.is-active::before{ background:rgba(var(--accent-rgb),.95); box-shadow:0 0 0 6px rgba(var(--accent-rgb),.10); } .nav__item--sub.is-active::after{ border-top-color: rgba(var(--accent-rgb),.65); } html[data-theme="light"] .navTree::before, body.theme-light .navTree::before{ border-right-color: rgba(254,87,7,.28); } html[data-theme="light"] .nav__item--sub::before, body.theme-light .nav__item--sub::before{ background: rgba(254,87,7,.35); } html[data-theme="light"] .nav__item--sub::after, body.theme-light .nav__item--sub::after{ border-top-color: rgba(254,87,7,.28); } @media (max-width: 980px){ .navTree{ padding-right:22px; } .navTree::before{ right:10px; } .nav__item--sub::before, .nav__item--sub::after{ right:-15px; } .nav__item--sub::after{ width:15px; } } .page{margin-bottom:18px} .page[hidden]{display:none} h1{margin:0 0 12px;font-size:18px} .card h3{margin:10px 0 8px;font-size:14px;color:var(--text)} hr{border:none;border-top:1px solid var(--border);margin:12px 0} .check{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px} .check input{width:auto} /* prevent base input styles from affecting checkboxes in check labels */ .check input[type="checkbox"]{width:46px} .right{justify-content:flex-end} .modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center} .modal[hidden]{display:none} .modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)} .modal__panel{position:relative;z-index:1;background:rgba(15,25,48,.96);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);width:min(920px, calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto} .modal__header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 14px;border-bottom:1px solid var(--border)} .modal__body{padding:14px} /* inputs inside tables */ .table input.in{min-width:120px} /* ---- Compact message modal + status bar ---- */ #msgModal .modal__panel--sm{ width:min(640px, calc(100vw - 24px)); } #msgModal .modal__header{ padding:10px 12px; } #msgModal .modal__body{ padding:10px 12px; } #msgModal #msgTitle{ font-weight:800; font-size:14px; } #msgModal #msgText{ font-size:13px; padding:10px 10px; border-radius:12px; } #msgModal details#msgMore{ margin-top:8px !important; } #msgModal details#msgMore summary{ cursor:pointer; user-select:none; font-size:12px; color:var(--muted); } #msgModal pre#msgDetails{ font-size:11px; line-height:1.5; max-height:40vh; overflow:auto; } .statusbar{ transition:opacity .22s ease, transform .22s ease; position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:55; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text); padding:8px 12px; border-radius:999px; box-shadow:var(--shadow); font-size:12px; display:flex; align-items:center; gap:8px; max-width:min(92vw, 720px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .statusbar--ok{ background:rgba(34,197,94,.10); } .statusbar--err{ background:rgba(239,68,68,.10); } /* Statusbar light theme contrast */ :root[data-theme="light"] .statusbar, html.theme-light .statusbar, body.theme-light .statusbar{ background:rgba(15,23,42,.92); border-color:rgba(15,23,42,.18); color:rgba(255,255,255,.92); box-shadow:0 12px 28px rgba(2,6,23,.18); } :root[data-theme="light"] .statusbar--ok, html.theme-light .statusbar--ok, body.theme-light .statusbar--ok{ background:rgba(22,163,74,.92); border-color:rgba(22,163,74,.38); color:#fff; } :root[data-theme="light"] .statusbar--err, html.theme-light .statusbar--err, body.theme-light .statusbar--err{ background:rgba(220,38,38,.92); border-color:rgba(220,38,38,.40); color:#fff; } /* SelectX (کشوی سفارشی برای خوانایی در حالت شب/روز) */ .selectx{ position:relative; display:block; width:100%; } .selectx-native{ position:absolute; inset:0; opacity:0; pointer-events:none; } .selectx-btn{ width:100%; min-height:40px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); border-radius:12px; padding:10px 38px 10px 12px; text-align:right; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:var(--shadow-in); } .selectx-btn.is-bad{ border-color:rgba(239,68,68,.65); } .selectx-btn.is-bad:focus{ outline:2px solid rgba(239,68,68,.35); } .selectx-btn:focus{ outline:2px solid rgba(254,87,7,.35); outline-offset:2px; } .selectx-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .selectx-caret{ width:18px; height:18px; flex:0 0 18px; opacity:.9; } .selectx-menu{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80; border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:12px; box-shadow:var(--shadow); max-height:300px; overflow:auto; padding:6px; } .selectx-item{ padding:9px 10px; border-radius:10px; cursor:pointer; user-select:none; } .selectx-item:hover{ background:rgba(255,255,255,.06); } .selectx-item.is-selected{ background:rgba(254,87,7,.25); } .selectx-item.is-disabled{ opacity:.45; cursor:not-allowed; } /* SelectX search (for long lists like countries/cities) */ .selectx-searchWrap{ position:sticky; top:0; z-index:1; background:var(--panel); padding:6px; margin:-6px -6px 6px; border-bottom:1px solid var(--border); border-top-left-radius:12px; border-top-right-radius:12px; } .selectx-search{ width:100%; border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:rgba(255,255,255,.04); color:var(--text); box-shadow:var(--shadow-in); font-size:12px; outline:none; } .selectx-search:focus{ outline:2px solid rgba(254,87,7,.35); outline-offset:2px; } .selectx-items{ display:block; } /* Inline success message under forms */ .formmsg{ margin-top:10px; padding:8px 10px; border-radius:12px; border:1px solid var(--border); font-size:12px; line-height:1.6; } .formmsg--ok{ background:rgba(34,197,94,.10); } .formmsg--err{ background:rgba(239,68,68,.10); } /* ---- WP Announcements ---- */ .wpAnn{ position:fixed; top:12px; left:24px; z-index:100; width:min(360px, 92vw); border:1px solid var(--border); background:rgba(255,255,255,.06); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; backdrop-filter: blur(6px); } .wpAnn__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-bottom:1px solid var(--border); } .wpAnn__title{ font-weight:800; font-size:12px; } .wpAnn__headActions{ display:flex; align-items:center; gap:6px; } .wpAnn__readAll, .wpAnn__readBtn{ border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.05); color:var(--text); cursor:pointer; font-size:11px; padding:5px 8px; line-height:1.2; } .wpAnn__readAll:hover, .wpAnn__readBtn:hover{ background:rgba(255,255,255,.09); } .wpAnn__readState{ font-size:11px; color:var(--muted); white-space:nowrap; } .wpAnn__itemActions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .wpAnn__item--read{ opacity:.72; } .wpAnn__item--unread{ box-shadow:inset 3px 0 0 rgba(255,80,80,.7); } .wpAnn__close{ width:28px; height:28px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; } .wpAnn__close:hover{ background:rgba(255,255,255,.06); } .wpAnn__list{ padding:8px 10px; display:flex; flex-direction:column; gap:8px; } .wpAnn__item{ border:1px solid var(--border); border-radius:12px; padding:8px 10px; background:rgba(0,0,0,.10); } .wpAnn__item--warning{ background:rgba(245,158,11,.10); } .wpAnn__item--error{ background:rgba(239,68,68,.10); } .wpAnn__itemTitle{ font-weight:800; font-size:12px; margin-bottom:4px; } .wpAnn__itemMsg{ font-size:12px; color:var(--text); line-height:1.6; white-space:pre-wrap; } .wpAnn__itemMeta{ margin-top:6px; display:flex; justify-content:space-between; align-items:center; gap:10px; } .wpAnn__itemTime{ font-size:11px; color:var(--muted); } .wpAnn__itemLink{ font-size:11px; color:var(--link); text-decoration:none; } .wpAnn__itemLink:hover{ text-decoration:underline; } /* ---- Announcement bell ---- */ .annBell{ position:fixed; top:12px; left:24px; z-index:120; width:48px; height:48px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); backdrop-filter: blur(6px); } .annBell:hover{background:rgba(255,255,255,.09)} .annBell__icon{display:flex; align-items:center; justify-content:center; line-height:1} .annBell__icon svg{display:block; fill:currentColor} .annBell__badge{ position:absolute; top:6px; left:6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:rgba(255,80,80,.95); color:white; font-size:11px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.2); } .wpAnn{ top:58px; /* فاصله برای دکمه اعلان */ z-index:110; } .wpAnn__ticon{margin-left:6px; display:inline-flex; align-items:center} .wpAnn__ticon svg{display:block; fill:currentColor} /* ---- Pagination + bulk actions ---- */ .pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; } .pager__left,.pager__right{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pager__btn{ padding:6px 10px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font-size:12px; } .pager__btn:hover{background:rgba(255,255,255,.07)} .pager__btn[disabled]{opacity:.45;cursor:not-allowed} .pager__num{min-width:34px;text-align:center} .pager__nums{display:flex;gap:6px;flex-wrap:wrap} .pager__btn.is-active{background:rgba(90,200,250,.18);border-color:rgba(90,200,250,.35)} .bulkbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); flex-wrap:wrap; } .bulkbar__left,.bulkbar__right{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .checkbox{width:16px;height:16px;accent-color:#FE5707} .smallmuted{color:var(--muted);font-size:12px} .form label.span2{grid-column:1/-1} .selectx{min-height:40px} .form input,.form select,.form textarea{width:100%} .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin-top:10px} .form>.row{grid-column:1/-1;justify-content:flex-start} .form>.actions{grid-column:1/-1} .actions.actions--end{justify-content:flex-end} .repSel{width:auto;min-width:120px} @media (min-width: 1100px){ /* به جای ۲×۲، چهار کارت در یک ردیف */ } .statBox{ border:1px solid rgba(148,163,184,.18); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-radius:18px; padding:12px 12px; box-shadow: 0 10px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06); } .statBox__label{color:var(--muted);font-size:12px} .statBox__value{font-size:20px;font-weight:900;margin-top:6px;letter-spacing:.2px} .chartBox{ border:1px solid rgba(148,163,184,.18); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border-radius:20px; padding:12px 12px; box-shadow: 0 10px 28px rgba(0,0,0,.10); } .chartBox__title{margin:0 0 10px 0;font-size:14px;color:var(--text);font-weight:900} .chartBox canvas{width:100%;height:260px;display:block} .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .legend__item{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:6px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.16); background:rgba(255,255,255,.03); } .legend__dot{width:10px;height:10px;border-radius:50%} html[data-theme="light"] .statBox, body.theme-light .statBox{ background:#ffffff; border-color: rgba(15,23,42,.10); box-shadow: 0 10px 28px rgba(2,6,23,.06); } html[data-theme="light"] .chartBox, body.theme-light .chartBox{ background:#ffffff; border-color: rgba(15,23,42,.10); box-shadow: 0 10px 28px rgba(2,6,23,.06); } /* ---------------- داشبورد ---------------- */ .dashGrid{align-items:start} .dashCardHead{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px} .dashStats{margin-top:10px} .dashChartBox{margin-top:14px} .dashCounters{gap:8px;flex-wrap:wrap} .pill{ display:inline-flex;align-items:center;gap:6px; padding:6px 10px;border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); font-size:12px; } .pill b{color:var(--text);font-weight:800} .pill--warn{background:rgba(255,90,95,.10);border-color:rgba(255,90,95,.22)} .eventList{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto;padding-left:2px} .eventItem{ border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-radius:12px; padding:10px 12px; box-shadow:0 8px 22px rgba(0,0,0,.14); } .eventItem__title{font-weight:800;margin-bottom:4px} .eventItem__msg{color:var(--text);opacity:.92;line-height:1.6} .eventItem__meta{margin-top:6px;color:var(--muted);font-size:12px} .eventItem--info{border-right:3px solid var(--accent2)} .eventItem--warn{border-right:3px solid rgba(255,255,255,.22)} .eventItem--error{border-right:3px solid var(--danger)} .dashQuick{justify-content:flex-end;margin-top:10px;gap:8px;flex-wrap:wrap} .topItems{display:flex;flex-direction:column;gap:8px} .topItem{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:8px 10px;border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.04); } .topItem__name{font-weight:800} .topItem__meta{color:var(--muted);font-size:12px;margin-top:2px} .topItem__val{font-weight:900;white-space:nowrap} /* --- Invoice list toolbar (2 rows) --- */ .inv-toolbar2{ display:flex; flex-direction:column; gap:10px; } .inv-toolbar2__row{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; } .inv-toolbar2__row--top{ padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.06); } html[data-theme="light"] .inv-toolbar2__row--top, body.theme-light .inv-toolbar2__row--top{ border-bottom-color:rgba(15,23,42,.10); } /* Top row: search / status / sort / dir */ .inv-toolbar2__row--top .invtf{min-width:160px;flex:0 0 auto} .inv-toolbar2__row--top .invtf--search{min-width:260px;flex:1 1 320px} .inv-toolbar2__row--top .invtf--sort{min-width:190px} .inv-toolbar2__row--top .invtf--dir{min-width:110px} /* Bottom row: date range + actions */ .inv-toolbar2__row--bottom{justify-content:space-between} .inv-dates{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap} .inv-toolbar2__row--bottom .invtf--date{min-width:170px;flex:0 0 auto} /* Make labels compact (and override any form label "pill" styles) */ .inv-toolbar2 label{ display:flex; flex-direction:column; gap:6px; white-space:nowrap; font-size:11px; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } .inv-toolbar2 .input--sm{padding:7px 10px;border-radius:10px;font-size:12px;height:36px;line-height:1.2;box-sizing:border-box} .inv-actions{display:flex;gap:8px;align-items:flex-end;flex:0 0 auto;direction:ltr} .inv-actions .btn{white-space:nowrap} /* --- Upload progress modal --- */ /* --- Invoice form layout (tidy) --- */ .inv-formgrid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; } .inv-col{ border:1px solid var(--border); border-radius:14px; padding:12px; background:rgba(255,255,255,0.02); } .sec-title{ font-weight:800; font-size:14px; margin:0 0 10px 0; } @media (max-width: 980px){ .inv-formgrid{ grid-template-columns:1fr; } } .btn--iconOnly{min-width:32px;width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center} .btn--iconOnly .btn__ico svg{width:16px;height:16px} .opActions--mini .btn--iconOnly{min-width:32px;width:32px;padding:0} /* ---------------- Mobile polish & responsive layout ---------------- */ .mobMenuBtn{ display:none; position:fixed; top:12px; right:12px; z-index:220; width:44px; height:44px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); box-shadow:var(--shadow); cursor:pointer; } .sidebarScrim{ position:fixed; inset:0; z-index:210; /* a bit less "foggy" */ background:rgba(0,0,0,.46); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } @media (max-width: 980px){ /* Use an off-canvas sidebar instead of pushing content down */ .mobMenuBtn{display:inline-flex;align-items:center;justify-content:center} .layout{display:block} .main{padding:64px 12px 28px} .sidebar{ position:fixed; top:0; bottom:0; right:0; height:100dvh; width:min(340px, 88vw); transform:translateX(110%); transition:transform .18s ease; z-index:215; /* less glassy on mobile (dark mode) */ background: rgba(2,6,23,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* prevent the sidebar scrollbar; nav itself scrolls */ overflow:hidden; border-left:1px solid var(--border); border-right:0; box-shadow:var(--shadow); } html[data-theme="light"] .sidebar, body.theme-light .sidebar{ background: rgba(255,255,255,.98); } /* slightly more solid menu items on mobile */ .sidebar .nav__item, .sidebar .navGroup__btn{ background: rgba(255,255,255,.035); } html[data-theme="light"] .sidebar .nav__item, html[data-theme="light"] .sidebar .navGroup__btn, body.theme-light .sidebar .nav__item, body.theme-light .sidebar .navGroup__btn{ background: rgba(2,6,23,.03); } .sidebar.is-open{ transform:translateX(0); } body.sidebar-open{ overflow:hidden; } } /* IMPORTANT: There is a later rule `html[data-theme="dark"] .sidebar{ background: rgba(15,23,42,.78) }` which overrides the mobile sidebar background and makes it too transparent. Make mobile dark sidebar/scrim more solid with equal (or higher) specificity. */ @media (max-width: 980px){ html[data-theme="dark"] .sidebar{ background: rgba(2,6,23,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-theme="dark"] .sidebarScrim{ /* slightly more transparent than before */ background: rgba(0,0,0,.58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } } @media (max-width: 640px){ .card{padding:12px} h1{font-size:16px} .brand{font-size:18px} /* Prevent iOS input zoom + improve tap targets */ input, select, textarea{ font-size:16px; } .input--sm{ font-size:16px; height:44px; } .btn{ padding:12px 12px; } .btn.btn--sm{ padding:8px 10px; } .btn.btn--xs{ padding:6px 8px; min-height:32px; } /* Stack key/value grids */ .kv{ grid-template-columns:1fr; } .kv b{ color:var(--muted); font-weight:700; } /* Toolbars: each filter full width */ .inv-toolbar2__row--top .invtf, .inv-toolbar2__row--top .invtf--search, .inv-toolbar2__row--top .invtf--sort, .inv-toolbar2__row--top .invtf--dir{ min-width:100% !important; flex:1 1 100% !important; } /* Date range (Invoices + Jobs): keep From/To side-by-side on mobile */ .inv-toolbar2__row--bottom .inv-dates{ width:100%; display:grid; grid-template-columns: 1fr 1fr; gap:10px; align-items:end; } .inv-toolbar2__row--bottom .inv-dates .invtf--date{ min-width:0 !important; flex:0 0 auto !important; width:100%; } .inv-actions{ width:100%; justify-content:stretch; flex-wrap:wrap; } .inv-actions .btn{ flex:1 1 46%; } /* Rows with many buttons */ .row{ align-items:stretch; } .row > .btn{ flex:1 1 46%; } /* But keep table operation buttons compact */ .opsRow{ align-items:center; } .opsRow > .btn{ flex:0 0 auto !important; } /* Tables: readable and scrollable */ .table{ font-size:12px; } .table th,.table td{ padding:8px 6px; } } /* In very narrow screens, keep date range readable but still paired */ @media (max-width: 360px){ .inv-toolbar2__row--bottom .inv-dates{ gap:8px; } } /* ---------------- Inspired light UI (orange + black) ---------------- */ html[data-theme="light"] body{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); } html[data-theme="light"] .sidebar{ background: rgba(255,255,255,.94); border-left-color: rgba(15,23,42,.10); box-shadow: 0 14px 44px rgba(2,6,23,.10); } html[data-theme="light"] .card{ background: #ffffff; border-color: rgba(15,23,42,.10); box-shadow: 0 14px 44px rgba(2,6,23,.10); backdrop-filter: none; } html[data-theme="light"] label{ color: rgba(15,23,42,.70); font-weight: 700; } html[data-theme="light"] .form label:not(.check){ padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="light"] select, html[data-theme="light"] textarea, body.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.theme-light select, body.theme-light textarea{ background: rgba(254,87,7,.06); border-color: rgba(254,87,7,.18); border-radius: 18px; padding: 12px 14px; box-shadow: none; } html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, html[data-theme="light"] select:hover, html[data-theme="light"] textarea:hover{ border-color: rgba(254,87,7,.28); } html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus{ border-color: rgba(254,87,7,.55); box-shadow: 0 0 0 4px rgba(254,87,7,.14); background: rgba(254,87,7,.08); } html[data-theme="light"] .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 16px; border: 1px solid rgba(254,87,7,.85); background: #FE5707; color: #ffffff; font-weight: 800; box-shadow: 0 10px 22px rgba(254,87,7,.18); transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease; } html[data-theme="light"] .btn:hover{ filter: brightness(1.03); } html[data-theme="light"] .btn:active{ transform: translateY(1px); box-shadow: 0 8px 18px rgba(254,87,7,.18); } html[data-theme="light"] .btn--sm{ min-height: 36px; padding: 0 10px; border-radius: 12px; font-size: 12px; } html[data-theme="light"] .btn--ghost{ background: rgba(255,255,255,.86); color: #FE5707; border-color: rgba(254,87,7,.32); box-shadow: 0 8px 16px rgba(2,6,23,.05); } html[data-theme="light"] .btn--ghost:hover{ background: rgba(254,87,7,.10); } html[data-theme="light"] .btn--ghost:active{ transform: translateY(1px); box-shadow: 0 6px 12px rgba(2,6,23,.05); } html[data-theme="light"] .btn--danger{ border-color: rgba(239,68,68,.70); background: rgba(239,68,68,.92); box-shadow: 0 10px 22px rgba(239,68,68,.16); } html[data-theme="light"] .nav__item{ border-radius: 16px; background: rgba(254,87,7,.05); border-color: rgba(254,87,7,.12); color: #FE5707; font-weight: 700; } html[data-theme="light"] .nav__item.is-active{ background: rgba(254,87,7,.12); border-color: rgba(254,87,7,.35); color: #FE5707; } html[data-theme="light"] .nav__item:hover{ background: rgba(254,87,7,.08); } html[data-theme="light"] .filter-mini{ border-color: rgba(15,23,42,.10); background: #ffffff; box-shadow: none; border-radius: 18px; } html[data-theme="light"] .statusbar{ background: rgba(255,255,255,.92); } html[data-theme="light"] .mobMenuBtn{ background: rgba(255,255,255,.92); border-color: rgba(15,23,42,.10); } /* Dark mode: hamburger button was too transparent */ html[data-theme="dark"] .mobMenuBtn{ /* Match the announcement bell: slightly frosted, not fully opaque */ background: rgba(255,255,255,.08); border-color: rgba(148,163,184,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ---------------- Inspired dark UI (orange + black) ---------------- */ html[data-theme="dark"] body{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); } html[data-theme="dark"] .sidebar{ background: rgba(8,8,8,.92); border-left-color: rgba(254,87,7,.18); box-shadow: 0 18px 60px rgba(0,0,0,.35); } html[data-theme="dark"] .card{ background: rgba(15,23,42,.55); border-color: rgba(148,163,184,.18); box-shadow: 0 18px 60px rgba(0,0,0,.28); } html[data-theme="dark"] label{ color: rgba(255,255,255,.70); font-weight: 700; } html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.18); border-radius: 18px; padding: 12px 14px; box-shadow: none; } html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus{ border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.16); background: rgba(var(--accent-rgb),.08); } html[data-theme="dark"] .btn{ min-height: 46px; padding: 0 16px; border-radius: 16px; border-color: rgba(var(--accent-rgb),.78); background: #FE5707; box-shadow: 0 12px 26px rgba(var(--accent-rgb),.16); font-weight: 800; } html[data-theme="dark"] .btn--sm{ min-height: 36px; padding: 0 10px; border-radius: 12px; font-size: 12px; } html[data-theme="dark"] .btn--ghost{ background: rgba(255,255,255,.03); color: #ffb18c; border-color: rgba(var(--accent-rgb),.26); box-shadow: none; } html[data-theme="dark"] .btn--ghost:hover{ background: rgba(var(--accent-rgb),.10); } html[data-theme="dark"] .nav__item{ background: rgba(255,255,255,.02); border-color: rgba(148,163,184,.16); } html[data-theme="dark"] .nav__item:hover{ background: rgba(var(--accent-rgb),.08); } html[data-theme="dark"] .nav__item.is-active{ background: rgba(var(--accent-rgb),.16); border-color: rgba(var(--accent-rgb),.38); } /* ---------------- Layout Optimization (v22) ---------------- */ .page{ max-width:1220px; margin:0 auto 18px; } /* Page header */ .pageHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; } .pageHead h1{ margin:0; } .pageHead__hint{ margin-bottom:2px; } /* Generic vertical stack */ .stack{ display:grid; gap:14px; } /* Invoice (Send) page layout */ .sendGrid{ display:grid; grid-template-columns: 1.7fr .9fr; gap:14px; align-items:start; } .sendMain{ min-width:0; } .sendSide{ min-width:0; } .sendCard{ overflow:visible; } /* Standard invoice layout (Send) */ .sendStd{ display:grid; gap:14px; } .sendStd__top{ display:grid; grid-template-columns: 1.1fr .9fr; /* first col is right in RTL */ gap:14px; align-items:start; } .sendHeaderGrid{ display:grid; grid-template-columns: 1.1fr .9fr; /* first col is right in RTL */ gap:14px; } .sendMetaCard{ justify-self:center; width:min(980px, 100%); } .sendStd__bottom{ display:grid; grid-template-columns: 1.7fr .9fr; /* lines right, left column for pay/totals */ gap:14px; align-items:start; } .sendStd__left{ display:grid; gap:14px; min-width:0; } @media (max-width: 980px){ .sendStd__top, .sendHeaderGrid, .sendStd__bottom{ grid-template-columns:1fr; } .sendMetaCard{ width:100%; justify-self:stretch; } } /* Invoice (Send) - POS inspired layout (v34) */ .sendLayout{ display:grid; gap:14px; align-items:start; } .sendLayout--pos{ /* چیدمان استاندارد (الهام‌گرفته از فرم‌های POS): ردیف ۱: مشخصات فاکتور (راست) + نوع/الگو (چپ) ردیف ۲: خریدار (تمام‌عرض) ردیف ۳: اقلام (تمام‌عرض) ردیف ۴: محاسبات (راست) + پرداخت (چپ) */ /* در RTL، ستون اول = سمت راست */ gap:12px; align-items:start; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "header meta" "buyer buyer" "lines lines" "totals pay"; } .sendArea--buyer{ grid-area: buyer; min-width:0; } .sendArea--header{ grid-area: header; min-width:0; } .sendArea--meta{ grid-area: meta; min-width:0; } .sendArea--lines{ grid-area: lines; min-width:0; } .sendArea--pay{ grid-area: pay; min-width:0; } .sendArea--totals{ grid-area: totals; min-width:0; } .sendArea--help{ grid-area: help; min-width:0; } /* اقلام وسط صفحه (در دسکتاپ) */ .sendLayout--pos .sendArea--lines{ justify-self:center; width:min(1320px, 100%); } /* نوع/الگو در بالا (ستون راست) باید هم‌قد با بقیه کارت‌ها باشد */ .sendLayout--pos .sendMetaCard{ justify-self:stretch; width:100%; } /* top header grid (inside card) */ .invHeaderGrid{ display:grid; /* دو ستون هم‌قد + اجازه‌ی کوچک شدن برای جلوگیری از بیرون‌زدگی */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:12px; margin-top:10px; } /* جلوگیری از بیرون‌زدگی اجزاء داخل کارت «مشخصات فاکتور» */ .invHeaderGrid > *{ min-width:0; } .invHeaderGrid .form:not(.form--pro){ grid-template-columns: 1fr; } /* فرم‌های جمع‌وجورتر برای هدر فاکتور (شماره/تاریخ/ساعت و موضوع/فروشنده) */ .invHdrPro{ gap:10px 12px; } .invHdrPro label{ min-width:0; } /* در عرض‌های متوسط موبایل/تبلت: شماره تمام‌عرض، تاریخ/ساعت کنار هم */ @media (max-width: 820px){ .invHdrPro > label.col-5{ grid-column: span 12 !important; } .invHdrPro > label.col-4, .invHdrPro > label.col-3{ grid-column: span 6 !important; } } @media (min-width: 981px){ .invHeaderGrid .grid2{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .grid2--tight{ gap:10px; } .grid3--tight{ gap:10px; } /* meta (type + pattern) */ .metaRow{ margin-top:10px; } .metaRow.form--pro{ gap:10px 12px; } /* جدول اقلام باید همیشه داخل خودش اسکرول افقی داشته باشد */ .sendCard .tableWrap{ overflow:auto; } .sendMetaCard{ justify-self:center; width:min(980px, 100%); } /* spacing inside areas */ .sendLayout--pos .buyerBar{ margin-top:8px; } .sendLayout--pos #buyerBox{ margin-top:8px; } .sendLayout--pos .tableWrap{ margin-top:8px; } .sendLayout--pos .totals--side{ margin-top:8px; } .sendLayout--pos .sendActions{ margin-top:8px; } /* کمی جمع‌وجورتر کردن کارت‌های ثبت فاکتور (فقط همین صفحه) */ .sendLayout--pos .sendCard{ padding:12px; } .sendLayout--pos .inv-col{ padding:10px; border-radius:14px; } .sendLayout--pos .sec-title{ font-size:12px; margin-bottom:8px; } /* باکس اطلاعات خریدار: حذف فاصله‌ی اضافی و جمع‌وجورتر */ .sendLayout--pos #buyerBox .kv{ margin-top:0; grid-template-columns:120px 1fr; gap:6px 10px; align-items:baseline; } /* Help inside totals card */ .sendHelpDetails{ margin-top:12px; } .sendHelpDetails > summary{ cursor:pointer; list-style:none; user-select:none; font-weight:700; } .sendHelpDetails > summary::-webkit-details-marker{ display:none; } .sendHelpDetails > summary:after{ content:"▾"; display:inline-block; margin-right:8px; transform: translateY(-1px); opacity:.75; } .sendHelpDetails[open] > summary:after{ content:"▴"; } /* keep the wide items table scroll nicely */ .sendArea--lines .table{ min-width: 980px; } /* actions: 2 columns on desktop, 1 column on small screens */ .sendActions{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } .sendActions .btn{ width:100%; } @media (max-width: 980px){ .sendLayout--pos{ grid-template-columns:1fr; grid-template-areas: "header" "meta" "buyer" "lines" "pay" "totals"; } .invHeaderGrid{ grid-template-columns:1fr; } .sendMetaCard{ width:100%; justify-self:stretch; } .sendArea--lines .table{ min-width: 940px; } } @media (max-width: 560px){ .metaRow{ grid-template-columns:1fr; } .sendActions{ grid-template-columns:1fr; } } .cardHeadRow{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; } .cardHeadRow h2{ margin:0; } .inv-col--soft{ background:rgba(255,255,255,.02); } body.theme-light .inv-col--soft{ background:rgba(2,6,23,.02); } /* Buyer controls */ .buyerBar{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; } .buyerBar__code{ flex:1 1 260px; min-width:220px; } .buyerBar__actions{ display:flex; gap:8px; flex-wrap:wrap; } .buyerBar__actions .btn{ white-space:nowrap; } .sendSideSticky{ position:sticky; top:12px; } .sendActions{ display:grid; gap:10px; } .sendActions .btn{ width:100%; } /* Slightly tighter totals inside side panel */ .totals--side .totals__row{ padding:10px 10px; border-radius:14px; } .totals--side .totals__pay{ border-radius:16px; } @media (max-width: 980px){ .sendGrid{ grid-template-columns: 1fr; } .sendSideSticky{ position:static; } } @media (max-width: 520px){ .buyerBar__actions .btn{ flex:1 1 46%; } .sendActions .btn{ padding:12px 14px; border-radius:16px; } } /* ---------------- Invoice (Send) rebuilt layout v1 ---------------- */ .invSend{ display:grid; gap:12px; align-items:start; } .invSend--v1{ max-width:1480px; margin-inline:auto; } .invSend__top{ display:grid; gap:12px; align-items:start; /* در RTL، ستون اول = سمت راست */ grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } .invSend__bottom{ display:grid; gap:12px; align-items:start; /* در RTL، ستون اول = سمت راست */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .invCard{ padding:12px; } .invSend .cardHeadRow{ align-items:baseline; } .invSend .cardHeadRow h2{ font-size:15px; font-weight:900; } .invHdrBlocks{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:12px; margin-top:10px; } .invHdrBlock{ background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:14px; padding:10px; min-width:0; } body.theme-light .invHdrBlock, html[data-theme="light"] .invHdrBlock{ background:rgba(2,6,23,.02); } .invHdrGrid{ gap:10px 12px; } .invMetaGrid{ margin-top:10px; gap:10px 12px; } .buyerRow{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:8px; } .buyerRow__code{ flex:1 1 260px; min-width:220px; } .buyerRow__actions{ display:flex; gap:8px; flex-wrap:wrap; } .buyerRow__actions .btn{ white-space:nowrap; } .buyerFacts{ display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap:10px; margin-top:10px; } .fact{ grid-column: span 6; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:14px; padding:10px; min-width:0; } body.theme-light .fact, html[data-theme="light"] .fact{ background:rgba(2,6,23,.02); } .fact--wide{ grid-column: span 12; } .fact__k{ display:block; color:var(--muted); font-size:12px; } .fact__v{ display:block; margin-top:6px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fact--wide .fact__v{ white-space:normal; line-height:1.7; font-weight:700; } .tableWrap--lines{ margin-top:8px; overflow:auto; } .invCard--lines .table{ min-width:980px; } /* Let the lines table grow with long numbers inside its own scroller (prevents page overflow) */ .invCard--lines .table.table--lines{ width:max-content; min-width:980px; } /* actions: 3 columns on desktop for a shorter card */ .sendActions.sendActions--wide{ grid-template-columns: repeat(3, 1fr); } @media (max-width: 1100px){ .invHdrBlocks{ grid-template-columns:1fr; } } @media (max-width: 980px){ .invSend__top{ grid-template-columns:1fr; } .invSend__bottom{ grid-template-columns:1fr; } .sendActions.sendActions--wide{ grid-template-columns: 1fr 1fr; } .fact{ grid-column: span 12; } } @media (max-width: 520px){ .sendActions.sendActions--wide{ grid-template-columns: 1fr; } .buyerRow__actions .btn{ flex:1 1 46%; } } /* ---------------- Mobile hamburger menu: darker (less glass) in Night mode ---------------- */ /* Place this at the end so it wins against the global dark sidebar "glass" rules. */ @media (max-width: 980px){ html[data-theme="dark"] .sidebar{ background: rgba(2,6,23,.94) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } html[data-theme="dark"] .sidebarScrim{ background: rgba(0,0,0,.58) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } /* slightly more solid menu items to avoid seeing the page through them */ html[data-theme="dark"] .sidebar .nav__item, html[data-theme="dark"] .sidebar .navGroup__btn{ background: rgba(255,255,255,.05) !important; } } /* ---------------- Invoice (Send) clean layout v2 ---------------- */ .invSend--v2{ width:100%; max-width:1480px; margin-inline:auto; } /* Head card: invoice meta (right) + buyer (left) merged into ONE card تا فضای خالی بزرگ زیر ستون کوتاه‌تر ایجاد نشود */ .invSend--v2 .invCard--head{ padding:10px; } .invSend--v2 .invHeadGrid{ display:grid; gap:12px; align-items:start; /* در RTL، ستون اول سمت راست می‌نشیند */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .invSend--v2 .invHeadCol{ min-width:0; } .invSend--v2 .invHeadCol--buyer{ border-inline-start:1px solid var(--border); padding-inline-start:12px; } .invSend--v2 .invTopGrid{ margin-top:8px; gap:8px 10px; } .invSend--v2 .invTopGrid label{ min-width:0; gap:4px; } /* Buyer: denser and readable */ .invSend--v2 .invHeadCol--buyer .buyerRow{ margin-top:8px; gap:8px; } .invSend--v2 .invHeadCol--buyer .buyerRow__code{ flex:1 1 180px; min-width:160px; } .invSend--v2 .invHeadCol--buyer .buyerRow__actions{ gap:6px; } /* keep 2-column facts (base style), just make them tighter */ .invSend--v2 .invHeadCol--buyer .buyerFacts{ gap:8px; margin-top:10px; } .invSend--v2 .invHeadCol--buyer .fact{ padding:8px 10px; border-radius:12px; } .invSend--v2 .invHeadCol--buyer .fact:not(.fact--wide){ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .invSend--v2 .invHeadCol--buyer .fact:not(.fact--wide) .fact__k{ display:inline; white-space:nowrap; } .invSend--v2 .invHeadCol--buyer .fact:not(.fact--wide) .fact__v{ margin-top:0; white-space:nowrap; } /* Prevent long buyer values from causing horizontal overflow (mobile) */ .invSend--v2 .invHeadCol--buyer .fact__v{ min-width:0; overflow-wrap:anywhere; word-break:break-word; } .invSend--v2 .invHeadCol--buyer .fact:not(.fact--wide){ align-items:flex-start; } .invSend--v2 .invHeadCol--buyer .fact:not(.fact--wide) .fact__v{ flex:1 1 auto; } /* Numeric buyer facts should be LTR to avoid RTL caret/scroll quirks */ #buyerTinView, #buyerPostView, #buyerPhoneView{ direction:ltr; unicode-bidi:plaintext; text-align:left; } /* Bottom row: merged into ONE card (no empty column), inside it two columns (totals right / payments left) */ .invSend--v2 .invSend__bottom{ grid-template-columns:1fr; } .invSend--v2 .invCard--bottom{ padding:10px; } .invSend--v2 .invBottomGrid{ display:grid; gap:12px; align-items:start; /* در RTL، ستون اول سمت راست می‌نشیند */ grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .invSend--v2 .invBottomCol{ min-width:0; } /* Actions grid: 2 columns desktop, 1 column mobile */ .invSend--v2 .sendActions.sendActions--grid{ grid-template-columns: 1fr 1fr; } /* RTL + numeric inputs: keep them LTR so the page doesn't "pull" sideways on mobile */ .page--send #invNumber, .page--send #issueJalali, .page--send #refTaxId, .page--send #buyerCode, .page--send .table--lines input.n{ direction:ltr; unicode-bidi:plaintext; text-align:left; } /* Lines table: slightly tighter so it looks like a POS grid */ .page--send .table--lines{ font-size:12px; } .page--send .table--lines th, .page--send .table--lines td{ padding:9px 6px; } /* Keep large numbers inside the table scroller (not the page) */ .page--send .tableWrap--lines{ max-width:100%; overflow:auto; overscroll-behavior-x:contain; } .page--send .table--lines th, .page--send .table--lines td{ white-space:nowrap; } .page--send .table--lines td[data-calc]{ min-width:120px; } .page--send .table--lines td[data-calc], .page--send .table--lines td.n{ direction:ltr; text-align:left; } .page--send .table--lines td[data-calc]{ font-variant-numeric: tabular-nums; } @media (max-width: 980px){ .invSend--v2 .invHeadGrid{ grid-template-columns:1fr; } .invSend--v2 .invHeadCol--buyer{ border-inline-start:0; padding-inline-start:0; border-top:1px solid var(--border); padding-top:12px; } .invSend--v2 .invHeadCol--buyer .fact{ grid-column: span 12; } .invSend--v2 .invSend__bottom{ grid-template-columns:1fr; } .invSend--v2 .invBottomGrid{ grid-template-columns:1fr; } } @media (max-width: 520px){ .invSend--v2 .sendActions.sendActions--grid{ grid-template-columns:1fr; } } @media (max-width: 640px){ /* Invoice (Send) mobile polish */ .page--send .invSend{ gap:10px; } .page--send .invSend--v2 .invCard--head, .page--send .invSend--v2 .invCard--lines, .page--send .invSend--v2 .invCard--bottom{ padding:12px; } .page--send .invSend--v2 .invHeadGrid, .page--send .invSend--v2 .invBottomGrid{ gap:10px; } /* Buyer row: stack code + actions for narrow phones */ .page--send .invSend--v2 .invHeadCol--buyer .buyerRow{ flex-direction:column; align-items:stretch; } .page--send .invSend--v2 .invHeadCol--buyer .buyerRow__code{ min-width:0; width:100%; } .page--send .invSend--v2 .invHeadCol--buyer .buyerRow__actions{ width:100%; } .page--send .invSend--v2 .invHeadCol--buyer .buyerRow__actions .btn{ flex:1 1 32%; } /* Buyer facts: keep compact (2 columns) on phones */ .page--send .invSend--v2 .invHeadCol--buyer .fact{ grid-column: span 6; } .page--send .invSend--v2 .invHeadCol--buyer .fact.fact--wide{ grid-column: span 12; } /* Lines table: smoother horizontal scroll + tighter cells */ .page--send .tableWrap--lines{ -webkit-overflow-scrolling:touch; } .page--send .table--lines{ font-size:11px; } .page--send .table--lines th, .page--send .table--lines td{ padding:8px 6px; } .page--send .table--lines input.in{ min-width:92px; padding:6px 8px; } .page--send .table--lines td:last-child .row{ gap:6px; } .page--send .table--lines td[data-calc]{ min-width:104px; } } @media (max-width: 420px){ /* Ultra-small phones: facts full width + action buttons 2 columns */ .page--send .invSend--v2 .invHeadCol--buyer .fact{ grid-column: span 12; } .page--send .invSend--v2 .invHeadCol--buyer .buyerRow__actions .btn{ flex:1 1 46%; } } /* ثبت فاکتور: روی دسکتاپ فضای افقی بیشتری بگیر تا جدول اقلام با اعداد بزرگ کمتر به هم بریزد */ .page.page--send{ max-width: min(1600px, calc(100vw - 24px)); } /* اقلام کالا: اعداد محاسباتی طولانی صفحه را به هم نریزند؛ داخل همان جدول قابل اسکرول بمانند */ .page--send .invCard--lines{ min-width:0; } .page--send .tableWrap--lines{ width:100%; max-width:100%; } .page--send .table--lines{ table-layout:auto; } .page--send .table--lines td[data-calc]{ min-width:120px; max-width:168px; overflow:hidden; text-overflow:ellipsis; font-size:11px; } /* ---------------- Invoice send form sizing + line extra modal polish (v154) ---------------- */ /* فیلدهای ردیف اقلام: به اندازه نیاز هر ستون */ .page--send .table--lines td > .in{ max-width:100%; } .page--send .table--lines input[data-f="sstid"]{ min-width:88px; width:96px; } .page--send .table--lines input[data-f="sstt"]{ min-width:180px; width:220px; } .page--send .table--lines input[data-f="mu"]{ min-width:76px; width:84px; } .page--send .table--lines input[data-f="qty"]{ min-width:74px; width:82px; } .page--send .table--lines input[data-f="unitPrice"]{ min-width:118px; width:132px; } .page--send .table--lines input[data-f="discount"]{ min-width:104px; width:118px; } .page--send .table--lines input[data-f="vatRate"]{ min-width:62px; width:72px; } /* دکمه داخل فیلد (مثل «یافتن» داخل ورودی) */ .inAffix{ position:relative; width:100%; min-width:0; } .inAffix > input, .inAffix > .in{ width:100%; box-sizing:border-box; padding-left:72px; /* جا برای دکمه کوچک «یافتن» سمت چپ */ } .inAffix > .inAffix__btn{ position:absolute; left:8px; top:50%; transform:translateY(-50%); z-index:3; white-space:nowrap; padding:3px 7px; min-height:24px; font-size:11px; line-height:1; border-radius:9px; } .inAffix--line > .in{ padding-left:62px; } .inAffix--buyer > input{ padding-left:62px; padding-right:12px; direction:rtl; unicode-bidi:plaintext; text-align:right; /* متن/placeholder از سمت راست شروع شود و زیر دکمه نرود */ } .inAffix--buyer > input::placeholder{ text-align:right; direction:rtl; } #buyerCode{ direction:rtl !important; text-align:right !important; padding-right:12px !important; padding-left:62px !important; } #buyerCode::placeholder{ text-align:right !important; } /* عنوان کالا + دکمه یافتن (داخل همان فیلد) */ .page--send .table--lines .lineTitlePick{ min-width:0; } /* مودال «یافتن»: صفحه‌بندی + جدول قابل اسکرول */ #modalTable .modalPickerPager{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(148,163,184,.16); } #modalTable .modalPickerPager .pager{ margin-top:0; } #modalTable .modalPickerPager .pager__left{ color:var(--muted); font-size:12px; } #modalTable .tablewrap{ max-height:min(52vh, 460px); overflow:auto; border:1px solid rgba(148,163,184,.14); border-radius:12px; } #modalTable .table thead th{ position:sticky; top:0; z-index:1; background:var(--card); } /* ستون عملیات اقلام: دکمه‌ها نفس بکشند و به لبه‌ها نچسبند */ .page--send .table--lines td:last-child{ min-width:156px; } .page--send .table--lines td:last-child .row{ gap:6px; flex-wrap:wrap; justify-content:flex-start; } /* فیلدهای هدر فاکتور: جمع‌وجورتر بر اساس نیاز (بدون شکستن ریسپانسیو) */ .page--send .invTopGrid > label{ min-width:0; } .page--send #invNumber{ max-width:140px; } .page--send #issueJalali{ max-width:170px; } .page--send #invType{ max-width:150px; } .page--send #invSubject{ max-width:190px; } .page--send #invPattern{ max-width:360px; } .page--send #refTaxId{ max-width:260px; } .page--send #invNote{ max-width:520px; } /* Line extra modal (جزئیات ردیف): هدر/فوتر استاندارد + فاصله مناسب از دکمه‌ها */ #lineExtraModal .modal__panel{ width:min(920px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:hidden; display:flex; flex-direction:column; } #lineExtraModal .modal__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); } #lineExtraModal .modal__title{ font-weight:800; font-size:14px; } #lineExtraModal .modal__body{ padding:12px 14px; overflow:auto; } #lineExtraModal #lineExtraHint{ margin:0; padding:8px 10px; border:1px dashed var(--border); border-radius:10px; line-height:1.6; } #lineExtraModal #lineExtraForm{ margin-top:12px !important; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:10px 12px; align-items:start; } #lineExtraModal #lineExtraForm > label{ grid-column:span 4; min-width:0; } #lineExtraModal #lineExtraForm > label > input{ width:100%; min-width:0; } #lineExtraModal .modal__foot{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--border); background:rgba(255,255,255,.02); } html[data-theme="light"] #lineExtraModal .modal__foot, body.theme-light #lineExtraModal .modal__foot{ background:rgba(2,6,23,.02); } @media (max-width: 980px){ #lineExtraModal #lineExtraForm > label{ grid-column:span 6; } } @media (max-width: 640px){ /* موبایل: فیلدهای هدر دوباره تمام‌عرض شوند */ .page--send #invNumber, .page--send #issueJalali, .page--send #invType, .page--send #invSubject, .page--send #invPattern, .page--send #refTaxId, .page--send #invNote{ max-width:100%; } .page--send .table--lines td:last-child{ min-width:148px; } #lineExtraModal .modal__head, #lineExtraModal .modal__body, #lineExtraModal .modal__foot{ padding:10px 12px; } #lineExtraModal #lineExtraForm > label{ grid-column:span 12; } #lineExtraModal .modal__foot{ flex-wrap:wrap; } #lineExtraModal .modal__foot .btn{ flex:1 1 48%; } } /* ---------------- Invoice send hotfixes (v155) ---------------- */ /* 1) منوی کشویی الگو/نوع روی کارت بعدی نیفتد (به‌خصوص حالت شب به‌خاطر stacking context کارت‌ها) */ .page--send .invCard--head, .page--send .invCard--lines{ position: relative; } .page--send .invCard--head{ z-index: 6; overflow: visible; } .page--send .invCard--lines{ z-index: 1; } .page--send .invCard--head .selectx{ position:relative; } .page--send .invCard--head .selectx.open{ z-index: 120; } .page--send .invCard--head .selectx.open .selectx-menu{ z-index: 9999; } /* 2) فیلد یادداشت چاپ تمام‌عرض واقعی باشد (کوچک‌تر از فیلدهای بالا نشود) */ .page--send #invNoteRow, .page--send #invNoteRow > input, .page--send #invNote{ width: 100%; } .page--send #invNote{ max-width: none !important; } /* 3) مقادیر عددی/جمع‌ها زیر ستون خودشان دیده شوند (هم‌راستای هدر) */ .page--send .table--lines td.n, .page--send .table--lines td[data-calc]{ text-align: right; } .page--send .table--lines td[data-calc]{ min-width: 132px; } /* هدر جدول اقلام هم ثابت و خوانا */ .page--send .table--lines thead th{ vertical-align: bottom; } /* ---------------- Invoice send line table tweaks (v156) ---------------- */ /* ردیف اقلام: سلول‌ها عمودی وسط‌چین شوند تا عددهای محاسباتی وسط باکس‌ها دیده شوند */ .page--send .table--lines tbody td{ vertical-align: middle; } .page--send .table--lines tbody td[data-calc], .page--send .table--lines tbody td[data-col="idx"]{ padding-top: 12px; padding-bottom: 12px; line-height: 1.25; font-variant-numeric: tabular-nums; } /* در حالت RTL مقدارهای محاسباتی زیر هدرها تمیزتر بایستند */ .page--send .table--lines tbody td[data-calc]{ text-align: center; } /* ---------------- Invoice send + picker modal polish (v157) ---------------- */ /* مودال یافتن: فاصله بهتر بین عنوان «جستجو» و فیلد + تنفس بیشتر بالای جدول */ #modal .modal__body > .row:first-child{ align-items:flex-end; gap:12px; margin-bottom:12px; } #modal .modal__body > .row:first-child .form{ min-width:0; } #modal .modal__body > .row:first-child .form label{ gap:8px; } #modal .modal__body #modalSearch{ margin-top:0; } #modal #modalTable{ margin-top:4px; } /* ---------------- Invoice send fixes (v158) ---------------- */ /* دکمه پاک کنار کد خریدار: هماهنگ‌تر با دکمه‌های اطراف */ .page--send #btnBuyerClear{ min-height: 34px; padding: 0 14px; border-radius: 12px; font-size: 12px; line-height: 1; } .page--send .buyerRow__actions{ align-items: stretch; } .page--send .buyerRow__actions #btnBuyerClear{ min-width: 64px; } /* فیلد کد طرف حساب: متن/placeholder سمت راست بایستد و زیر دکمه «یافتن» نرود */ .page--send .inAffix--buyer > input, .page--send #buyerCode{ direction: rtl !important; text-align: right !important; unicode-bidi: plaintext; padding-right: 14px !important; padding-left: 58px !important; /* جا برای دکمه یافتن کوچک‌تر */ } .page--send .inAffix--buyer > .inAffix__btn, .page--send .lineTitlePick > .inAffix__btn{ padding: 2px 6px; min-height: 22px; font-size: 10px; border-radius: 8px; left: 7px; } .page--send .inAffix--buyer > .inAffix__btn{ min-width: 42px; } .page--send .inAffix--line > .in{ padding-left: 56px; } /* در حالت ابطالی/اصلاحی/برگشت از فروش: عرض الگو و شناسه مرجع هم‌اندازه و پرکننده ستون */ .page--send #invPatternRow, .page--send #refTaxRow{ min-width: 0; } .page--send #invPatternRow > select, .page--send #refTaxRow > input, .page--send #invPattern, .page--send #refTaxId{ width: 100%; max-width: none !important; } /* دکمه پاک کنار کد خریدار: هم‌ارتفاع با فیلد */ .page--send .buyerRow{ align-items:stretch; } .page--send .buyerRow__code{ display:flex; align-items:flex-end; } .page--send #btnBuyerClear{ min-height: 40px !important; height: 40px; padding: 0 16px !important; border-radius: 12px; font-weight: 700; } .page--send .buyerRow__actions{ align-items:flex-end; } .page--send .buyerRow__actions #btnBuyerClear{ min-width: 70px; } /* اقلام فاکتور: جمع / مالیات / خالص دقیقاً زیر هدر خودشان بنشینند */ .page--send .table--lines thead th:nth-child(9), .page--send .table--lines thead th:nth-child(10), .page--send .table--lines thead th:nth-child(11){ min-width: 136px; width: 136px; text-align: center; } .page--send .table--lines tbody td:nth-child(9), .page--send .table--lines tbody td:nth-child(10), .page--send .table--lines tbody td:nth-child(11){ min-width: 136px; width: 136px; text-align: center !important; direction:ltr; unicode-bidi:isolate; font-variant-numeric: tabular-nums; letter-spacing: .1px; } .page--send .table--lines tbody td[data-calc]{ padding-inline: 10px; } /* محاسبات و عملیات: ظاهر دکمه‌ها زیباتر و حرفه‌ای‌تر */ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ margin-top: 14px; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn{ min-height: 54px; border-radius: 18px; font-weight: 800; font-size: 14px; letter-spacing: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px rgba(2,6,23,.18); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease; } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn:hover{ transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 28px rgba(2,6,23,.22); } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn:active{ transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(2,6,23,.16); } /* چیدمان دلخواه (منظم‌تر) */ .page--send #btnEnqueue{ order:1; } .page--send #btnCreateInvoice{ order:2; } .page--send #btnSendNow{ order:3; } .page--send #btnPrint{ order:4; } .page--send #btnDuplicateInvoice{ order:5; } .page--send #btnCancelInvoice{ order:6; grid-column:1 / -1; } /* دکمه‌های اصلی */ .page--send #btnEnqueue, .page--send #btnCreateInvoice{ border-color: rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .98), rgba(var(--accent-rgb), .84)); color:#fff; } /* دکمه‌های ثانویه (ارسال/چاپ/تکثیر) */ .page--send #btnSendNow, .page--send #btnPrint, .page--send #btnDuplicateInvoice{ border:1px solid rgba(148,163,184,.20); color: var(--text); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(2,6,23,.12); } html[data-theme="light"] .page--send #btnSendNow, html[data-theme="light"] .page--send #btnPrint, html[data-theme="light"] .page--send #btnDuplicateInvoice{ border-color: rgba(15,23,42,.10); background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 22px rgba(2,6,23,.06); } /* ابطال: دکمه شاخص و تمام‌عرض */ .page--send #btnCancelInvoice{ min-height: 52px; border-color: rgba(var(--danger-rgb), .62); background: linear-gradient(180deg, rgba(var(--danger-rgb), .96), rgba(var(--danger-rgb), .78)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 26px rgba(var(--danger-rgb), .16); } @media (max-width: 980px){ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ grid-template-columns:1fr; gap:10px; } .page--send #btnCancelInvoice{ grid-column:auto; } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn{ min-height: 50px; border-radius: 16px; font-size: 13px; } } /* ---------------- Invoice send polish overrides (v160) ---------------- */ /* tax17 label + tooltip icon */ .page--send .lbl__cap--help{ display:inline-flex; align-items:center; gap:6px; } .page--send .helpDot{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:999px; border:1px solid rgba(148,163,184,.28); color:var(--muted); background:rgba(255,255,255,.03); font-size:10px; font-weight:800; line-height:1; cursor:help; user-select:none; } .page--send .helpDot:hover, .page--send .helpDot:focus-visible{ color:var(--text); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .12); outline:none; } /* دکمه پاک کنار کد طرف حساب: هم‌قد فیلد */ .page--send .buyerRow__actions #btnBuyerClear{ height: 44px !important; min-height: 44px !important; padding: 0 18px !important; border-radius: 14px !important; } /* اقلام فاکتور: هم‌راستاسازی دقیق‌تر ستون‌های جمع/مالیات/خالص */ .page--send .table--lines thead th:nth-child(9), .page--send .table--lines thead th:nth-child(10), .page--send .table--lines thead th:nth-child(11), .page--send .table--lines tbody td:nth-child(9), .page--send .table--lines tbody td:nth-child(10), .page--send .table--lines tbody td:nth-child(11){ width: 148px !important; min-width: 148px !important; max-width: 148px !important; box-sizing: border-box; text-align: center !important; } .page--send .table--lines tbody td[data-calc]{ overflow: visible !important; text-overflow: clip !important; white-space: nowrap; font-size: 12px; padding-inline: 8px !important; } /* محاسبات و عملیات: بازطراحی مینیمال و تمیز */ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ margin-top: 12px; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn{ min-height: 46px; border-radius: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0; box-shadow: none !important; transform: none !important; transition: background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease; } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn:hover{ filter: none; } /* نظم چیدمان */ .page--send #btnCreateInvoice{ order:1; } .page--send #btnEnqueue{ order:2; } .page--send #btnSendNow{ order:3; } .page--send #btnPrint{ order:4; } .page--send #btnDuplicateInvoice{ order:5; } .page--send #btnCancelInvoice{ order:6; grid-column: 1 / -1; } /* اولیه‌ها: یک دکمه اصلی، یک دکمه تاکیدی ثانویه */ .page--send #btnCreateInvoice{ color:#fff; border-color: rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .84)); } .page--send #btnEnqueue{ color: var(--text); border:1px solid rgba(var(--accent-rgb), .28); background: linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .08)); } /* ثانویه‌ها */ .page--send #btnSendNow, .page--send #btnPrint, .page--send #btnDuplicateInvoice{ color: var(--text); border:1px solid rgba(148,163,184,.18); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); } .page--send #btnSendNow:hover, .page--send #btnPrint:hover, .page--send #btnDuplicateInvoice:hover, .page--send #btnEnqueue:hover{ border-color: rgba(148,163,184,.28); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)); } .page--send #btnCreateInvoice:hover{ border-color: rgba(var(--accent-rgb), .62); background: linear-gradient(180deg, rgba(var(--accent-rgb), .98), rgba(var(--accent-rgb), .88)); } /* ابطال: واضح اما شیک، نه خیلی توی چشم */ .page--send #btnCancelInvoice{ min-height: 46px; color: #ffd6d6; border: 1px solid rgba(var(--danger-rgb), .34); background: linear-gradient(180deg, rgba(var(--danger-rgb), .14), rgba(var(--danger-rgb), .08)); } .page--send #btnCancelInvoice:hover{ border-color: rgba(var(--danger-rgb), .48); background: linear-gradient(180deg, rgba(var(--danger-rgb), .20), rgba(var(--danger-rgb), .11)); } @media (max-width: 980px){ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ grid-template-columns: 1fr; gap: 8px; } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn, .page--send #btnCancelInvoice{ min-height: 44px; border-radius: 13px; font-size: 12.5px; } } /* ---------------- Invoice send refinements (v161) ---------------- */ /* Tooltip مدرن و بدون مکث برای راهنمای فیلد */ .page--send .helpDot{ position: relative; } .page--send .helpDot[data-tip]::after, .page--send .helpDot[data-tip]::before{ position: absolute; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 50; } .page--send .helpDot[data-tip]::after{ content: attr(data-tip); inset-inline-end: 0; top: calc(100% + 8px); width: min(420px, 78vw); white-space: pre-line; text-align: right; line-height: 1.65; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,.24); background: rgba(8,14,28,.96); color: #e5edf9; box-shadow: 0 16px 36px rgba(2,6,23,.34); transform: translateY(-4px); font-size: 11px; font-weight: 500; } .page--send .helpDot[data-tip]::before{ content: ""; inset-inline-end: 5px; top: calc(100% + 2px); border: 6px solid transparent; border-bottom-color: rgba(8,14,28,.96); transform: translateY(-4px); } .page--send .helpDot[data-tip]:hover::after, .page--send .helpDot[data-tip]:hover::before, .page--send .helpDot[data-tip]:focus-visible::after, .page--send .helpDot[data-tip]:focus-visible::before{ opacity: 1; transform: translateY(0); } /* دکمه‌های عملیات: بازگشت به استایل خوش‌فرم‌تر + نظم بهتر */ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ margin-top: 14px; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn{ min-height: 54px; border-radius: 18px; font-weight: 800; font-size: 14px; letter-spacing: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px rgba(2,6,23,.18); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease; } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn:hover{ transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 28px rgba(2,6,23,.22); } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn:active{ transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(2,6,23,.16); } .page--send #btnEnqueue{ order:1; } .page--send #btnCreateInvoice{ order:2; } .page--send #btnSendNow{ order:3; } .page--send #btnPrint{ order:4; } .page--send #btnDuplicateInvoice{ order:5; } .page--send #btnCancelInvoice{ order:6; grid-column:1 / -1; } .page--send #btnEnqueue, .page--send #btnCreateInvoice{ border-color: rgba(var(--accent-rgb), .55) !important; background: linear-gradient(180deg, rgba(var(--accent-rgb), .98), rgba(var(--accent-rgb), .84)) !important; color:#fff !important; } .page--send #btnSendNow, .page--send #btnPrint, .page--send #btnDuplicateInvoice{ border:1px solid rgba(148,163,184,.20) !important; color: var(--text) !important; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(2,6,23,.12) !important; } html[data-theme="light"] .page--send #btnSendNow, html[data-theme="light"] .page--send #btnPrint, html[data-theme="light"] .page--send #btnDuplicateInvoice{ border-color: rgba(15,23,42,.10) !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 22px rgba(2,6,23,.06) !important; } .page--send #btnCancelInvoice{ min-height: 52px !important; border-color: rgba(var(--danger-rgb), .62) !important; background: linear-gradient(180deg, rgba(var(--danger-rgb), .96), rgba(var(--danger-rgb), .78)) !important; color:#fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 26px rgba(var(--danger-rgb), .16) !important; } /* دکمه پاک کنار کد خریدار: هم‌قد و هماهنگ */ .page--send .buyerRow{ align-items:stretch; } .page--send .buyerRow__code{ display:flex; align-items:flex-end; } .page--send .buyerRow__actions{ align-items:flex-end; } .page--send .buyerRow__actions #btnBuyerClear{ min-height: 44px !important; height: 44px !important; min-width: 74px; padding: 0 16px !important; border-radius: 14px !important; font-weight: 700; } /* اقلام فاکتور: ستون‌های جمع/مالیات/خالص دقیق‌تر + عمودی وسط */ .page--send .table--lines thead th:nth-child(9), .page--send .table--lines thead th:nth-child(10), .page--send .table--lines thead th:nth-child(11), .page--send .table--lines tbody td:nth-child(9), .page--send .table--lines tbody td:nth-child(10), .page--send .table--lines tbody td:nth-child(11){ width: 140px !important; min-width: 140px !important; max-width: 140px !important; text-align: center !important; } .page--send .table--lines tbody td{ vertical-align: middle; } .page--send .table--lines tbody td[data-calc]{ direction:ltr; unicode-bidi:isolate; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.35; padding-top: 15px !important; padding-bottom: 15px !important; } @media (max-width: 980px){ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ grid-template-columns:1fr; gap:10px; } .page--send #btnCancelInvoice{ grid-column:auto; } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn{ min-height: 50px; border-radius: 16px; font-size: 13px; } } /* ---------------- Invoice send refinements (v162) ---------------- */ /* دکمه‌های عملیات پایین: ظریف‌تر و تمیزتر */ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ margin-top: 12px !important; gap: 10px !important; grid-template-columns: repeat(2, minmax(0, 1fr)); } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn{ min-height: 44px !important; height: 44px; border-radius: 14px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0; box-shadow: none !important; transform: none !important; transition: border-color .14s ease, background-color .14s ease, color .14s ease, opacity .14s ease !important; } .page--send #btnCreateInvoice, .page--send #btnEnqueue{ color: #fff !important; border: 1px solid rgba(var(--accent-rgb), .45) !important; background: linear-gradient(180deg, rgba(var(--accent-rgb), .88), rgba(var(--accent-rgb), .78)) !important; } .page--send #btnCreateInvoice:hover, .page--send #btnEnqueue:hover{ border-color: rgba(var(--accent-rgb), .58) !important; background: linear-gradient(180deg, rgba(var(--accent-rgb), .94), rgba(var(--accent-rgb), .82)) !important; } .page--send #btnSendNow, .page--send #btnPrint, .page--send #btnDuplicateInvoice{ color: var(--text) !important; border: 1px solid rgba(148,163,184,.20) !important; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important; } .page--send #btnSendNow:hover, .page--send #btnPrint:hover, .page--send #btnDuplicateInvoice:hover{ border-color: rgba(148,163,184,.32) !important; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important; } .page--send #btnCancelInvoice{ min-height: 44px !important; color: #ffd8d8 !important; border: 1px solid rgba(var(--danger-rgb), .34) !important; background: linear-gradient(180deg, rgba(var(--danger-rgb), .14), rgba(var(--danger-rgb), .08)) !important; box-shadow: none !important; } .page--send #btnCancelInvoice:hover{ border-color: rgba(var(--danger-rgb), .46) !important; background: linear-gradient(180deg, rgba(var(--danger-rgb), .20), rgba(var(--danger-rgb), .11)) !important; } @media (max-width: 980px){ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ grid-template-columns: 1fr !important; gap: 8px !important; } .page--send #btnCancelInvoice{ grid-column: auto !important; } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn{ min-height: 42px !important; border-radius: 13px !important; font-size: 12.5px !important; } } /* ---------------- Invoice send polish (v163) ---------------- */ /* بهبود ظاهر باکس اطلاعات پرداخت + دکمه‌های عملیات پایین (جمع‌وجورتر) */ .page--send .invCard--bottom{ padding: 12px !important; } .page--send .invBottomGrid{ gap: 12px !important; align-items: start; } .page--send .invBottomCol{ border: 1px solid rgba(148,163,184,.12); border-radius: 16px; padding: 12px; background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } .page--send .invBottomCol .cardHeadRow{ margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(148,163,184,.14); } .page--send .invBottomCol .cardHeadRow h2{ margin: 0; font-size: 15px; line-height: 1.3; } /* دکمه‌های عملیات: جمع‌وجورتر، متعادل‌تر، بدون دکمه خیلی پهن */ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ margin-top: 10px !important; gap: 8px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn{ min-height: 40px !important; height: 40px; border-radius: 12px !important; padding: 0 10px !important; font-size: 12.5px !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page--send #btnCancelInvoice{ grid-column: auto !important; } /* سطوح دکمه‌ها ظریف‌تر */ .page--send #btnCreateInvoice, .page--send #btnEnqueue{ box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important; } .page--send #btnSendNow, .page--send #btnPrint, .page--send #btnDuplicateInvoice{ border-color: rgba(148,163,184,.18) !important; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)) !important; } .page--send #btnSendNow:hover, .page--send #btnPrint:hover, .page--send #btnDuplicateInvoice:hover{ border-color: rgba(148,163,184,.28) !important; } .page--send #btnCancelInvoice{ color: #ffdede !important; border-color: rgba(var(--danger-rgb), .28) !important; background: linear-gradient(180deg, rgba(var(--danger-rgb), .12), rgba(var(--danger-rgb), .07)) !important; } /* رسپانسیو */ @media (max-width: 1220px){ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px){ .page--send .invBottomCol{ padding: 10px; border-radius: 14px; } .page--send .invBottomCol .cardHeadRow h2{ font-size: 14px; } .page--send .invBottomCol--totals .sendActions.sendActions--grid{ grid-template-columns: 1fr !important; gap: 7px !important; } .page--send .invBottomCol--totals .sendActions.sendActions--grid .btn{ min-height: 39px !important; height: 39px; border-radius: 11px !important; font-size: 12px !important; } } /* ---------------- Invoice send polish (v164) ---------------- */ /* داک عملیات فاکتور: جای مشخص، جمع‌وجور و آیکن‌دار */ .page--send .invCard--bottom{ display: flex; flex-direction: column; gap: 12px; } .page--send .sendDock{ border-top: 1px dashed rgba(148,163,184,.16); padding-top: 10px; display: grid; gap: 8px; } .page--send .sendDock__group{ display: grid; gap: 8px; } .page--send .sendDock__group--primary{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .page--send .sendDock__group--secondary{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .page--send .sendDock__btn{ width: 100%; min-height: 38px !important; height: 38px; border-radius: 12px !important; padding: 0 10px !important; gap: 6px !important; font-size: 12px !important; font-weight: 700 !important; box-shadow: none !important; } .page--send .sendDock__btn--primary{ min-height: 40px !important; height: 40px; box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important; } .page--send .sendDock__btn .sendDock__ic{ display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 14px; line-height: 1; opacity: .95; flex: 0 0 18px; } .page--send .sendDock__btn .sendDock__tx{ overflow: hidden; text-overflow: ellipsis; } .page--send .sendDock__group--secondary .sendDock__btn{ background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.01)) !important; border-color: rgba(148,163,184,.16) !important; } .page--send .sendDock__group--secondary .sendDock__btn:hover{ border-color: rgba(148,163,184,.28) !important; } .page--send .sendDock__btn--danger{ border-color: rgba(var(--danger-rgb), .30) !important; background: linear-gradient(180deg, rgba(var(--danger-rgb), .14), rgba(var(--danger-rgb), .08)) !important; color: #ffdede !important; } .page--send .sendDock__btn--danger:hover{ border-color: rgba(var(--danger-rgb), .42) !important; } /* غیرفعال‌کردن استایل گرید قبلی دکمه‌ها برای این نسخه */ .page--send .invBottomCol--totals .sendActions.sendActions--grid{ display: none !important; } @media (max-width: 1220px){ .page--send .sendDock__group--secondary{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px){ .page--send .sendDock{ gap: 7px; padding-top: 8px; } .page--send .sendDock__group--primary, .page--send .sendDock__group--secondary{ grid-template-columns: 1fr; } .page--send .sendDock__btn, .page--send .sendDock__btn--primary{ min-height: 37px !important; height: 37px; border-radius: 11px !important; font-size: 11.5px !important; justify-content: flex-start; padding-inline: 12px !important; } .page--send .sendDock__btn .sendDock__ic{ width: 16px; height: 16px; font-size: 13px; flex-basis: 16px; } } /* دکمه‌های داک پایین: آیکن SVG واقعی (نه ایموجی) */ .page--send .sendDock__btn .sendDock__ic{ font-size: 0; /* جلوگیری از تراز نامناسب */ } .page--send .sendDock__btn .sendDock__ic svg{ width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .page--send .sendDock__btn--primary .sendDock__ic svg{ width: 17px; height: 17px; } /* ---------------- Invoice send final tweaks (v166) ---------------- */ /* حذف راهنمای بازشونده پایین کارت عملیات */ .page--send .sendHelpDetails{ display:none !important; } .page--send #btnEnqueue .sendDock__ic svg{ width: 18px; height: 18px; } /* موبایل: هدر خریدار جمع‌وجورتر و جلوگیری از فاصله خالی */ #buyerHint:empty{ display:none; } @media (max-width: 640px){ .page--send .invSend--v2 .invHeadCol--buyer .cardHeadRow{ gap: 6px !important; margin-bottom: 2px; } .page--send .invSend--v2 .invHeadCol--buyer #buyerHint{ display: none !important; } .page--send .invSend--v2 .invHeadCol--buyer .buyerRow{ margin-top: 6px !important; gap: 6px !important; } .page--send .invSend--v2 .invHeadCol--buyer .buyerFacts{ margin-top: 8px !important; gap: 6px !important; } .page--send .invSend--v2 .invHeadCol--buyer .fact{ padding: 7px 9px !important; border-radius: 10px !important; } } /* راهنمای مالیات ماده ۱۷ در موبایل: جمع‌وجور و داخل صفحه */ @media (max-width: 640px){ .page--send .lbl__cap--help{ gap: 5px; align-items: center; flex-wrap: wrap; } .page--send .helpDot{ width: 15px; height: 15px; font-size: 9px; flex: 0 0 15px; } .page--send .helpDot[data-tip]::after{ inset-inline-start: 0; inset-inline-end: auto; top: calc(100% + 6px); width: min(92vw, 340px); max-width: calc(100vw - 28px); max-height: 42vh; overflow: auto; white-space: pre-line; font-size: 10.5px; line-height: 1.55; padding: 8px 10px; border-radius: 10px; } .page--send .helpDot[data-tip]::before{ inset-inline-start: 6px; inset-inline-end: auto; } } /* ---------------- Invoice send follow-up tweaks (v168) ---------------- */ /* درخواست جدید: فشرده‌سازی هدر خریدار در موبایل + Tooltip ماده 17 وسط صفحه + فاصله بهتر دکمه حذف پرداخت + بازگردانی ظاهر select روش پرداخت */ /* 1) موبایل: فاصله بین عنوان خریدار و فیلد کد خریدار کمتر شود */ @media (max-width: 640px){ .page--send .invSend--v2 .invHeadCol--buyer .cardHeadRow{ margin: 0 !important; padding: 0 !important; align-items: center !important; gap: 4px !important; min-height: 0 !important; } .page--send .invSend--v2 .invHeadCol--buyer .cardHeadRow h2{ margin: 0 !important; line-height: 1.15 !important; } .page--send .invSend--v2 .invHeadCol--buyer .cardHeadRow + .buyerRow{ margin-top: 4px !important; } .page--send .invSend--v2 .invHeadCol--buyer .buyerRow__code label{ gap: 4px !important; margin: 0 !important; } } /* 2) راهنمای مالیات ماده 17 روی موبایل وسط صفحه نمایش داده شود */ @media (max-width: 640px){ .page--send .helpDot[data-tip]{ position: relative; z-index: 5; } .page--send .helpDot[data-tip]::after{ left: 50% !important; right: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; transform: translateX(-50%) !important; width: min(92vw, 360px) !important; max-width: calc(100vw - 20px) !important; z-index: 9999; } .page--send .helpDot[data-tip]::before{ left: 50% !important; right: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; transform: translateX(-50%) !important; z-index: 10000; } } /* 3) موبایل: فاصله بین عنوان خریدار و کد خریدار جمع‌تر شود */ @media (max-width: 640px){ .page--send .invSend--v2 .invHeadCol--buyer{ padding-top: 8px !important; } .page--send .invSend--v2 .invHeadCol--buyer .cardHeadRow{ display: block !important; margin: 0 0 4px !important; padding: 0 !important; min-height: 0 !important; gap: 0 !important; } .page--send .invSend--v2 .invHeadCol--buyer .cardHeadRow h2{ margin: 0 !important; line-height: 1.15 !important; } .page--send .invSend--v2 .invHeadCol--buyer #buyerHint{ display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .page--send .invSend--v2 .invHeadCol--buyer .buyerRow{ margin-top: 0 !important; } .page--send .invSend--v2 .invHeadCol--buyer .buyerRow__code label{ gap: 4px !important; margin-top: 0 !important; } } /* 4) Tooltip ماده 17 روی موبایل: وسط صفحه و کاملاً داخل viewport (بدون بریدگی) */ @media (max-width: 640px){ .page--send .helpDot[data-tip]::before{ display: none !important; /* پیکان در حالت fixed لازم نیست */ } .page--send .helpDot[data-tip]::after{ position: fixed !important; inset: auto !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; width: min(94vw, 360px) !important; max-width: calc(100vw - 14px) !important; max-height: min(56vh, 360px) !important; overflow: auto !important; overscroll-behavior: contain; border-radius: 12px !important; padding: 10px 12px !important; font-size: 11px !important; line-height: 1.6 !important; white-space: pre-line !important; box-sizing: border-box; z-index: 10050 !important; transform: translate(-50%, calc(-50% + 6px)) !important; } .page--send .helpDot[data-tip]:hover::after, .page--send .helpDot[data-tip]:focus-visible::after, .page--send .helpDot[data-tip]:active::after{ transform: translate(-50%, -50%) !important; } } /* ---------------- Mobile buyer header spacing hotfix (v156) ---------------- */ /* رفع فاصله زیاد بین عنوان «خریدار» و باکس «کد خریدار» در موبایل */ @media (max-width: 640px){ .page--send .invSend--v2 .invHeadCol--buyer{ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:stretch !important; gap:6px !important; align-content:flex-start !important; min-height:0 !important; height:auto !important; padding-top:8px !important; } .page--send .invSend--v2 .invHeadCol--buyer .cardHeadRow, .page--send .invSend--v2 .invHeadCol--buyer .buyerRow, .page--send .invSend--v2 .invHeadCol--buyer .buyerFacts{ margin-top:0 !important; margin-bottom:0 !important; } .page--send .invSend--v2 .invHeadCol--buyer .cardHeadRow{ display:block !important; min-height:0 !important; line-height:1.15; } .page--send .invSend--v2 .invHeadCol--buyer .cardHeadRow h2{ margin:0 !important; } .page--send .invSend--v2 .invHeadCol--buyer #buyerHint{ display:none !important; } .page--send .invSend--v2 .invHeadCol--buyer .buyerRow{ gap:6px !important; } .page--send .invSend--v2 .invHeadCol--buyer .buyerFacts{ gap:6px !important; } } /* ---------------- Mobile buyer blank-space hotfix (v157) ---------------- */ /* رفع فضای خالی بین عنوان «خریدار» و فیلد «کد خریدار» در موبایل (override نهایی) */ @media (max-width: 640px){ .page--send .invSend--v2 .invHeadCol--buyer{ display:block !important; min-height:0 !important; height:auto !important; padding-top:8px !important; } /* اگر قبلاً flex شده باشد، اجازه نده بین آیتم‌ها فضا پخش شود */ .page--send .invSend--v2 .invHeadCol--buyer > .cardHeadRow, .page--send .invSend--v2 .invHeadCol--buyer > .buyerRow, .page--send .invSend--v2 .invHeadCol--buyer > .buyerFacts{ flex:none !important; align-self:auto !important; } .page--send .invSend--v2 .invHeadCol--buyer > .cardHeadRow{ display:block !important; margin:0 0 4px !important; padding:0 !important; min-height:0 !important; line-height:1.15 !important; } .page--send .invSend--v2 .invHeadCol--buyer > .buyerRow{ margin-top:0 !important; gap:6px !important; } .page--send .invSend--v2 .invHeadCol--buyer > .buyerFacts{ margin-top:8px !important; gap:6px !important; } .page--send .invSend--v2 .invHeadCol--buyer #buyerHint:empty{ display:none !important; } } /* ---------------- Mobile/Tablet buyer gap hard-fix (v158) ---------------- */ /* رفع قطعی فضای خالی بین عنوان خریدار و کد خریدار (تا 980px) */ @media (max-width: 980px){ .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer{ display:grid !important; grid-template-rows:auto auto auto !important; align-content:start !important; align-items:start !important; justify-content:initial !important; row-gap:0 !important; min-height:0 !important; height:auto !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .cardHeadRow{ display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:wrap !important; gap:4px !important; margin:0 0 4px !important; padding:0 !important; min-height:0 !important; height:auto !important; align-self:start !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .cardHeadRow h2{ margin:0 !important; line-height:1.15 !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow{ margin:0 !important; align-self:stretch !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerFacts{ margin-top:8px !important; align-self:stretch !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer #buyerHint, .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer #buyerHint:empty{ display:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } } /* ---------------- Buyer mobile header gap final fix (v159b) ---------------- */ /* رفع فاصله زیاد بین عنوان «خریدار» و باکس «کد خریدار» در موبایل/تبلت */ @media (max-width: 980px){ .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer{ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:stretch !important; align-content:flex-start !important; gap:0 !important; min-height:0 !important; height:auto !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .cardHeadRow, .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow, .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerFacts{ flex:0 0 auto !important; align-self:auto !important; min-height:0 !important; height:auto !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .cardHeadRow{ margin:0 0 4px !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow{ margin-top:0 !important; justify-content:flex-start !important; align-items:flex-end !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow .buyerRow__code{ min-height:0 !important; height:auto !important; align-items:flex-start !important; } } @media (max-width: 640px){ .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow{ flex-direction:column !important; align-items:stretch !important; gap:6px !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow .buyerRow__code{ align-items:stretch !important; } } /* ---------------- Buyer mobile column flex-gap fix (v160) ---------------- */ /* وقتی buyerRow در موبایل ستونی می‌شود، flex:1 روی buyerRow__code باعث ایجاد فضای خالی عمودی می‌شد */ @media (max-width: 640px){ .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow > .buyerRow__code, .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow > .buyerRow__actions{ flex: 0 0 auto !important; min-height: 0 !important; height: auto !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow > .buyerRow__code{ width: 100% !important; } .page--send .invSend--v2 .invHeadCol.invHeadCol--buyer > .buyerRow > .buyerRow__actions{ width: 100% !important; margin-top: 0 !important; align-self: stretch !important; } } /* ---------------- UI polish fixes (v169) ---------------- */ /* سایدبار پایین: بازگشت به حالت متن (بدون باکس) */ .sidebar__footerBottom.sidebar__footerBottom--text{ display:flex !important; flex-direction:column; align-items:flex-start; gap:4px; margin-top:8px; } .sidebar__footerBottom.sidebar__footerBottom--text .footerMetaText{ display:block; width:100%; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; border-radius:0; color:var(--muted); font-size:12px; line-height:1.45; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sidebar__footerBottom.sidebar__footerBottom--text .footerMetaText--user{ color:var(--text); font-weight:700; } html[data-theme="light"] .sidebar__footerBottom.sidebar__footerBottom--text .footerMetaText, body.theme-light .sidebar__footerBottom.sidebar__footerBottom--text .footerMetaText{ color:rgba(15,23,42,.72); } html[data-theme="light"] .sidebar__footerBottom.sidebar__footerBottom--text .footerMetaText--user, body.theme-light .sidebar__footerBottom.sidebar__footerBottom--text .footerMetaText--user{ color:#0f172a; } /* نمای روز: دکمه ابطال واضح‌تر */ html[data-theme="light"] .page--send .sendDock__btn--danger, body.theme-light .page--send .sendDock__btn--danger, html[data-theme="light"] .page--send #btnCancelInvoice, body.theme-light .page--send #btnCancelInvoice{ color: #8f1422 !important; border-color: rgba(var(--danger-rgb), .38) !important; background: linear-gradient(180deg, rgba(var(--danger-rgb), .14), rgba(var(--danger-rgb), .08)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px rgba(var(--danger-rgb), .08) !important; } html[data-theme="light"] .page--send .sendDock__btn--danger:hover, body.theme-light .page--send .sendDock__btn--danger:hover, html[data-theme="light"] .page--send #btnCancelInvoice:hover, body.theme-light .page--send #btnCancelInvoice:hover{ border-color: rgba(var(--danger-rgb), .52) !important; background: linear-gradient(180deg, rgba(var(--danger-rgb), .20), rgba(var(--danger-rgb), .12)) !important; color: #7a0f1b !important; } /* ---------------- UI polish fixes (v170) ---------------- */ /* دکمه ابطال هم‌اندازه با سایر دکمه‌ها (دسکتاپ) */ .page--send .invBottomCol--totals .sendActions.sendActions--grid #btnCancelInvoice{ grid-column:auto !important; min-height:46px !important; } @media (max-width: 980px){ .page--send .invBottomCol--totals .sendActions.sendActions--grid #btnCancelInvoice{ grid-column:auto !important; } } /* پایین سایدبار: نمایش پلن فعلی و نام کاربری زیر ردیف دکمه‌ها/تایمر */ .sidebar__footerBottom.sidebar__footerBottom--text{ direction:ltr; display:grid !important; grid-template-columns:44px minmax(0,1fr) auto; align-items:start; column-gap:8px; row-gap:2px; margin-top:6px; } .sidebar__footerBottom.sidebar__footerBottom--text #userNameLabel{ grid-column:3; justify-self:end; max-width:132px; text-align:right; color:var(--text); font-weight:700; } .sidebar__footerBottom.sidebar__footerBottom--text .footerMetaText{ direction:rtl; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35; } @media (max-width: 460px){ .sidebar__footerBottom.sidebar__footerBottom--text{ grid-template-columns:minmax(0,1fr); row-gap:4px; } } /* سایدبار پایین: پلن فعلی و نام کاربری روبه‌رو و خواناتر */ .sidebar__footerBottom.sidebar__footerBottom--text{ direction: rtl !important; display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; align-items: center !important; column-gap: 10px !important; row-gap: 4px !important; margin-top: 6px !important; } .sidebar__footerBottom.sidebar__footerBottom--text #userNameLabel{ text-align: left !important; direction: ltr; unicode-bidi: plaintext; color: var(--text); font-weight: 700; } .footerUserMini{ display: grid !important; grid-template-columns: minmax(0,1fr) 44px; gap: 8px; align-items: stretch; } .footerUserMini #btnLogout{ width: 44px !important; min-width: 44px !important; height: 44px !important; } /* بهبود روانی اسکرول اقلام زیاد: کاهش هزینه paint در جدول اقلام */ .page--send .tableWrap--lines{ will-change: scroll-position; /* فقط اسکرول افقی را داخل همین باکس نگه دار؛ اسکرول عمودی با چرخ موس به صفحه منتقل شود */ overscroll-behavior-x: contain; overscroll-behavior-y: auto; } .page--send .table--lines tbody .in, .page--send .table--lines tbody .btn, .page--send .table--lines tbody .inAffix{ box-shadow: none !important; filter: none !important; } .page--send .table--lines tbody .btn{ transition: border-color .12s ease, background-color .12s ease, color .12s ease, opacity .12s ease !important; } /* متن پایین سایدبار هم‌رنگ متن پلن فعلی (تیره/Muted) */ /* ---------------- v179: account card alignment + compact logs ---------------- */ .accountGrid{ align-items:start; } .accountGrid > .accountCard{ min-width:0; } .accountCard h2{ line-height:1.25; } #accUserInfo.accountInfoList > .row{ min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in oklab, var(--panel) 94%, #000 6%); } #accUserInfo.accountInfoList > .row > :last-child{ text-align:left; min-width:0; overflow-wrap:anywhere; } .accountCard--user, .accountCard--plan, .accountCard--logs{ border-color: color-mix(in oklab, var(--line) 88%, var(--accent, #FE5707) 12%); } .accountLogItem{ border-radius: 12px; } .accountLogItem .accountLogMeta{ border-top: 1px dashed color-mix(in oklab, var(--line) 85%, var(--accent, #FE5707) 15%); padding-top: 6px; } html[data-theme="light"] #accUserInfo.accountInfoList > .row{ background: color-mix(in oklab, #fff 96%, var(--line) 4%); } @media (max-width: 900px){ #accUserInfo.accountInfoList > .row{ min-height: 40px; padding: 7px 9px; } .accountLogItem .row{ flex-wrap:wrap; } } .accountGrid{ align-items: stretch !important; } .accountGrid > .card{ height: 100%; } .accountGrid > .accountCard{ display:flex; flex-direction:column; } .accountCard--user #accUserInfo{ flex:1 1 auto; } .btn--dangerSoft{ border-color: color-mix(in oklab, var(--danger, #ef4444) 55%, var(--line) 45%) !important; color: color-mix(in oklab, var(--danger, #ef4444) 82%, white 18%) !important; background: color-mix(in oklab, var(--panel) 88%, var(--danger, #ef4444) 12%) !important; } .btn--dangerSoft:hover{ background: color-mix(in oklab, var(--panel) 80%, var(--danger, #ef4444) 20%) !important; border-color: color-mix(in oklab, var(--danger, #ef4444) 70%, var(--line) 30%) !important; } .btn--dangerSoft .btn__ico svg{ width:15px; height:15px; } @media (max-width: 640px){ .btn--dangerSoft .btn__text{ display:none; } .btn--dangerSoft{ width:40px; min-width:40px; padding-inline:0 !important; } } /* Login gate */ body.login-locked{overflow:hidden;} .loginGate{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px;} .loginGate__bg{position:absolute;inset:0;background:radial-gradient(900px 520px at 15% 10%, rgba(254,87,7,.22), transparent 58%), radial-gradient(760px 480px at 90% 85%, rgba(254,87,7,.10), transparent 60%), #050505;} .loginGate__card{position:relative;width:min(460px, calc(100vw - 24px));background:var(--card, #111827);border:1px solid var(--line, rgba(255,255,255,.12));border-radius:22px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);} .loginGate__logoWrap{display:flex;justify-content:center;align-items:center;margin:-2px 0 10px;} .loginGate__logo{display:block;width:min(270px, 82%);height:auto;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,.22));} html[data-theme="light"] .loginGate__logo{filter:drop-shadow(0 8px 20px rgba(15,23,42,.14));} .loginGate__brand{font-weight:900;font-size:20px;margin-bottom:2px;text-align:center;} .loginGate__title{font-weight:900;font-size:18px;margin-bottom:6px;text-align:center;} .loginGate__hint{color:var(--muted, #94a3b8);font-size:13px;line-height:1.8;margin-bottom:12px;text-align:center;} .loginGate__hint b{color:inherit;font-weight:900;} .loginGate__form{display:grid;gap:10px;} .loginGate__form .btn{width:100%;justify-content:center;} .loginGate__card .input{width:100%;} .loginGate__panel[hidden]{display:none!important;} .loginGate__form .formmsg{padding:9px 10px;border-radius:10px;border:1px solid var(--border);font-size:12px;line-height:1.7;} .loginGate__form .formmsg--ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28);color:#22c55e;} .loginGate__form .formmsg--err{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.24);color:#ef4444;} .loginGate__form .formmsg--info{background:rgba(254,87,7,.10);border-color:rgba(254,87,7,.24);color:#ffb18c;} html[data-theme="light"] .loginGate__form .formmsg--ok{color:#15803d;background:rgba(22,163,74,.08);} html[data-theme="light"] .loginGate__form .formmsg--err{color:#b91c1c;background:rgba(220,38,38,.06);} html[data-theme="light"] .loginGate__form .formmsg--info{color:#c84400;background:rgba(254,87,7,.06);} html[data-theme="light"] .loginGate__card{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-color:rgba(148,163,184,.28);box-shadow:0 24px 56px rgba(15,23,42,.12);} html[data-theme="light"] .loginGate__bg{background:radial-gradient(900px 520px at 12% 8%, rgba(254,87,7,.18), transparent 60%), radial-gradient(860px 520px at 88% 16%, rgba(254,87,7,.16), transparent 62%), radial-gradient(800px 500px at 84% 88%, rgba(254,87,7,.08), transparent 58%), linear-gradient(135deg, #fff3ed 0%, #fff0e8 42%, #f7f7f7 100%);} /* v34: compact customer/item actions + narrower customer list + better invoice preview */ .table .opActions--mini{gap:4px;justify-content:center;} .table .opActions--mini .btn--iconOnly{ width:28px; min-width:28px; height:28px; padding:0; background:transparent !important; border-color:transparent !important; box-shadow:none !important; color:var(--muted); border-radius:0 !important; } .table .opActions--mini .btn--iconOnly:hover{ background:rgba(var(--accent-rgb),.08) !important; border-color:transparent !important; color:var(--accent); } .table .opActions--mini .btn--danger.btn--iconOnly{color:#ef4444;} .table .opActions--mini .btn--danger.btn--iconOnly:hover{background:rgba(239,68,68,.08) !important;color:#dc2626;} .table .opActions--mini .btn--iconOnly .btn__ico svg{width:15px;height:15px;} .table--customers .custCol--ops{min-width:74px;text-align:center;} .table--customers thead .custCol--ops{padding-inline:10px;} @media (min-width: 981px){ .grid2--customers{grid-template-columns:minmax(0, 1.08fr) minmax(320px, .92fr);} .card--customersList .row > .form:first-child{flex:0 1 240px !important;max-width:240px;} } /* ---------------- Waybill (pattern 8) layout (v157) ---------------- */ .waybillPanel{ width:100%; } .waybillPanel .waybillStack{ display:flex; flex-direction:column; gap:12px; } /* card look (reuse existing card styles) */ .waybillCard{ padding:12px; } .waybillCardHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .waybillCardTitle{ font-weight:800; } .waybillCardActions{ display:flex; align-items:center; gap:8px; } /* service editor grid */ .waybillServiceGrid{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap:10px; margin-top:10px; } .waybillServiceGrid .wb-col-6{ grid-column: span 6; } .waybillServiceGrid .wb-col-4{ grid-column: span 4; } /* shipped goods list */ .sgBlock .sgList{ display:grid; gap:8px; margin-top:10px; } .sgRow{ display:grid; grid-template-columns: 1.2fr 2fr auto; gap:8px; align-items:end; } .waybillPanel .sgRow label{ display:flex; flex-direction:column; gap:6px; width:100%; } .waybillPanel .sgRow input{ width:100%; box-sizing:border-box; } /* دکمه حذف کالای حمل‌شده: ارتفاع/ابعاد بزرگ‌تر برای لمس راحت */ .sgDelBtn{ min-width:40px; width:40px; height:40px; padding:0; font-size:22px; line-height:40px; } .sgDelBtn.btn--sm{ height:40px; } /* service table inside waybill panel */ .waybillPanel .tableWrap--lines{ margin-top:10px; overflow:auto; } /* waybill services: unit + qty are always fixed, so hide those columns to keep it compact */ .waybillPanel .table--lines th:nth-child(4), .waybillPanel .table--lines td:nth-child(4), .waybillPanel .table--lines th:nth-child(5), .waybillPanel .table--lines td:nth-child(5){ display:none; } @media (max-width: 640px){ .waybillServiceGrid .wb-col-6{ grid-column: span 12; } .waybillServiceGrid .wb-col-4{ grid-column: span 12; } .sgRow{ grid-template-columns: 1fr; align-items:stretch; } .sgRow > button{ justify-self:flex-start; } } /* ---------------- v175: tidy sidebar footer clock layout ---------------- */ /* تاریخ/ساعت عرض کامل فوتر را می‌گیرد؛ دکمه‌ها زیر آن در ردیف‌های منظم می‌مانند. */ .sidebar__footer .footerControls__top{ display:grid !important; direction:ltr; grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) !important; grid-template-areas: "clock clock clock" "timer timer theme" "logout buy buy" !important; gap:8px !important; align-items:stretch !important; justify-content:stretch !important; } .sidebar__footer .footerActionsMini, .sidebar__footer .footerMetaMini, .sidebar__footer .footerUserMini{ display:contents !important; } .sidebar__footer .clockTicker--ui{ grid-area:clock !important; width:100% !important; max-width:none !important; height:48px !important; min-height:48px !important; padding:0 10px !important; } .sidebar__footer .clockTicker--ui .clockTicker__slide{ height:48px !important; min-height:48px !important; padding:0 8px !important; text-align:center !important; line-height:1.25 !important; } .sidebar__footer .clockTicker--ui .clockTicker__slide--jalali, .sidebar__footer .clockTicker--ui .clockTicker__slide--greg{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; font-size:11.5px !important; line-height:1.25 !important; } .sidebar__footer .clockTicker--ui .clockTicker__slide--time{ font-size:21px !important; } .sidebar__footer #btnThemeToggle{ grid-area:theme !important; width:100% !important; min-width:0 !important; height:44px !important; direction:rtl; } .sidebar__footer #sessionTimer{ grid-area:timer !important; width:100% !important; min-width:0 !important; height:44px !important; direction:ltr; } .sidebar__footer #btnLogout{ grid-area:logout !important; width:44px !important; min-width:44px !important; height:44px !important; padding:0 !important; } @media (max-width:360px){ .sidebar__footer .footerControls__top{ grid-template-columns:44px minmax(0,1fr) !important; grid-template-areas: "clock clock" "theme timer" "logout buy" !important; } .sidebar__footer .clockTicker--ui .clockTicker__slide--jalali, .sidebar__footer .clockTicker--ui .clockTicker__slide--greg{ font-size:10.8px !important; } } /* ---------------- v176: timer chip matches sidebar buttons + location selects ---------------- */ .sidebar__footer #sessionTimer.timerChip{ border-radius:14px !important; border:1px solid rgba(var(--accent-rgb),.26) !important; background:rgba(255,255,255,.03) !important; color:#ffb18c !important; box-shadow:none !important; font-weight:800 !important; cursor:default !important; } .sidebar__footer #sessionTimer.timerChip .btn__ico, .sidebar__footer #sessionTimer.timerChip .btn__text{ color:inherit !important; } html[data-theme="light"] .sidebar__footer #sessionTimer.timerChip, body.theme-light .sidebar__footer #sessionTimer.timerChip{ background:rgba(255,255,255,.86) !important; color:#FE5707 !important; border-color:rgba(254,87,7,.32) !important; box-shadow:0 8px 16px rgba(2,6,23,.05) !important; } html[data-theme="dark"] .sidebar__footer #sessionTimer.timerChip{ background:rgba(255,255,255,.03) !important; color:#ffb18c !important; border-color:rgba(var(--accent-rgb),.26) !important; box-shadow:none !important; } #p_province, #p_city, #cust_province, #cust_city{ width:100%; } /* ---------------- v177: compact footer + side-by-side print asset previews + faster SelectX ---------------- */ .sidebar__footer .footerControls__top{ gap:6px !important; } .sidebar__footer .clockTicker--ui{ height:42px !important; min-height:42px !important; border-radius:13px !important; padding:0 8px !important; } .sidebar__footer .clockTicker--ui .clockTicker__slide{ height:42px !important; min-height:42px !important; padding:0 6px !important; } .sidebar__footer .clockTicker--ui .clockTicker__slide--jalali, .sidebar__footer .clockTicker--ui .clockTicker__slide--greg{ font-size:11px !important; line-height:1.18 !important; } .sidebar__footer .clockTicker--ui .clockTicker__slide--time{ font-size:20px !important; } .sidebar__footer #btnLogout, .sidebar__footer .btn--icon{ width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; border-radius:13px !important; } .sidebar__footerBottom{ margin-top:6px !important; gap:6px !important; } @media (max-width:980px){ .printActions--split .imgPreview{max-width:100%;max-height:76px;} } .selectx-hint{ justify-content:center; text-align:center; color:var(--muted); font-size:11.5px; cursor:default !important; } /* ---------------- v178: customer buyer type labels + legal form alignment ---------------- */ .customerForm > label{ min-width:0; } .customerForm #cust_branchRow, .customerForm #cust_caseRow{ grid-column:span 6; } .customerForm.customerForm--legal #cust_regRow, .customerForm.customerForm--legal #cust_branchRow, .customerForm.customerForm--legal #cust_caseRow{ grid-column:span 4; } .customerForm select#cust_buyerType, .customerForm .selectx[data-for="cust_buyerType"] .selectx__button{ letter-spacing:0; } @media (max-width:980px){ .customerForm #cust_branchRow, .customerForm #cust_caseRow{ grid-column:span 6 !important; } .customerForm.customerForm--legal #cust_regRow, .customerForm.customerForm--legal #cust_branchRow{ grid-column:span 6 !important; } .customerForm.customerForm--legal #cust_caseRow{ grid-column:span 12 !important; } } /* ---------------- v181: compact companies table + auto-code hints ---------------- */ #companies .table th, #companies .table td{ vertical-align:middle; } @media (min-width: 641px){ #companies .opsRow{ display:grid !important; grid-template-columns:repeat(2, minmax(92px, 1fr)); gap:6px !important; align-items:center !important; justify-content:center !important; } #companies .opsRow .btn{ width:100% !important; min-height:34px; padding:0 10px; border-radius:12px; } #companies .table th, #companies .table td{ padding-top:8px; padding-bottom:8px; } } @media (max-width: 640px){ #companies .companyCard__actions{ display:grid; grid-template-columns:1fr 1fr; } #companies .companyCard__actions .btn{ width:100%; } } /* ---------------- v181: print asset refresh + slightly lower sidebar footer ---------------- */ .sidebar__footer{ transform:translateY(5px); } /* ---------------- v181: redesigned send queue page ---------------- */ .jobsSummary{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:12px 0 14px; } .jobMetric{ position:relative; overflow:hidden; min-height:86px; padding:12px 14px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); box-shadow:0 12px 30px rgba(0,0,0,.14); } .jobMetric::before{ content:""; position:absolute; inset-inline-start:0; top:0; width:4px; height:100%; background:rgba(var(--accent-rgb),.85); } .jobMetric span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px} .jobMetric b{display:block;font-size:24px;line-height:1.1;color:var(--text);font-weight:950} .jobMetric small{display:block;color:var(--muted2);font-size:11px;margin-top:5px} .jobMetric--ok::before{background:rgba(34,197,94,.9)} .jobMetric--wait::before{background:rgba(245,158,11,.95)} .jobMetric--err::before{background:rgba(var(--danger-rgb),.95)} .jobCards{ display:flex; flex-direction:column; gap:12px; } .jobCard{ position:relative; overflow:hidden; padding:14px; border:1px solid var(--border); border-radius:20px; background: radial-gradient(720px 180px at 95% 0%, rgba(var(--accent-rgb),.10), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.025)); box-shadow:0 14px 40px rgba(0,0,0,.16); } .jobCard::before{ content:""; position:absolute; inset-inline-start:0; top:0; width:5px; height:100%; background:rgba(var(--accent-rgb),.8); } .jobCard.is-ok::before,.jobCard.is-sent::before{background:rgba(34,197,94,.95)} .jobCard.is-failed::before{background:rgba(var(--danger-rgb),.95)} .jobCard.is-processing::before{background:rgba(254,87,7,.95)} .jobCard.is-pending::before{background:rgba(245,158,11,.95)} .jobCard__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-inline-start:2px; } .jobCard__eyebrow{color:var(--muted);font-size:12px;margin-bottom:4px} .jobCard__title{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:18px;font-weight:950;color:var(--text)} .jobCard__id{font-weight:800;color:var(--muted)} .jobCard__statusStack{display:flex;gap:6px;align-items:flex-end;justify-content:flex-start;flex-wrap:wrap;min-width:160px} .jobPill{ display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:5px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.055); color:var(--text); font-size:12px; font-weight:850; white-space:nowrap; } .jobPill.is-ok,.jobPill.is-sent{color:#22c55e;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)} .jobPill.is-failed{color:#ff8b92;border-color:rgba(var(--danger-rgb),.50);background:rgba(var(--danger-rgb),.12)} .jobPill.is-processing{color:#ffb18c;border-color:rgba(254,87,7,.45);background:rgba(254,87,7,.12)} .jobPill.is-pending{color:#fbbf24;border-color:rgba(245,158,11,.46);background:rgba(245,158,11,.12)} .jobPill--remote{opacity:.92} .jobCard__meta{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:13px; } .jobMeta{ min-width:0; padding:10px 11px; border:1px solid rgba(255,255,255,.075); border-radius:14px; background:rgba(0,0,0,.12); } .jobMeta span{display:block;color:var(--muted2);font-size:11px;margin-bottom:4px} .jobMeta b{display:block;color:var(--text);font-size:12px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jobMeta--mono b{direction:ltr;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;unicode-bidi:plaintext} .jobCard__error{ margin-top:12px; padding:10px 12px; border-radius:14px; border:1px solid rgba(var(--danger-rgb),.24); background:rgba(var(--danger-rgb),.08); } .jobCard__error span{display:block;color:#ffb4b9;font-size:12px;font-weight:900;margin-bottom:4px} .jobCard__error p{margin:0;color:var(--text);font-size:12px;line-height:1.8} .jobCard__okHint{ margin-top:12px; padding:9px 12px; border-radius:14px; border:1px solid rgba(34,197,94,.20); background:rgba(34,197,94,.07); color:var(--muted); font-size:12px; } .jobCard__actions{ display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; } .jobCard__actions .btn{min-width:96px} .jobEmpty{ display:flex; gap:12px; align-items:center; padding:18px; margin-top:12px; border:1px dashed var(--border); border-radius:20px; background:rgba(255,255,255,.035); } .jobEmpty__icon .btn__ico{width:34px;height:34px;color:var(--muted)} .jobEmpty b{display:block;color:var(--text);font-size:15px;margin-bottom:4px} .jobEmpty p{margin:0;color:var(--muted);font-size:12px;line-height:1.8} html[data-theme="light"] .jobMetric, body.theme-light .jobMetric, html[data-theme="light"] .jobCard, body.theme-light .jobCard{ background:linear-gradient(180deg, #fff, rgba(248,250,252,.92)); box-shadow:0 12px 32px rgba(15,23,42,.07); } html[data-theme="light"] .jobMeta, body.theme-light .jobMeta{ background:rgba(15,23,42,.025); border-color:rgba(15,23,42,.08); } html[data-theme="light"] .jobCard__error, body.theme-light .jobCard__error{background:rgba(var(--danger-rgb),.07)} html[data-theme="light"] .jobCard__okHint, body.theme-light .jobCard__okHint{background:rgba(34,197,94,.07)} @media (max-width: 1120px){ .jobsSummary{grid-template-columns:repeat(2,minmax(0,1fr))} .jobCard__meta{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width: 640px){ .jobsSummary{grid-template-columns:1fr} .jobCard{padding:12px} .jobCard__top{flex-direction:column;align-items:stretch} .jobCard__statusStack{min-width:0;justify-content:flex-start} .jobCard__meta{grid-template-columns:1fr} .jobCard__actions{justify-content:stretch} .jobCard__actions .btn{flex:1 1 120px;min-width:0} } /* ---------------- v182: compact send queue for large invoice volume ---------------- */ .jobsSummary--compact{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; } .jobsSummary--compact .jobMetric{ min-height:64px; padding:10px 12px; } .jobsSummary--compact .jobMetric b{font-size:20px} .jobListCompact{ display:grid; gap:8px; } .jobRow{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); box-shadow:0 10px 26px rgba(0,0,0,.12); } .jobRow__stripe{ position:absolute; inset:0 auto 0 0; width:4px; background:rgba(148,163,184,.65); } .jobRow.is-ok .jobRow__stripe,.jobRow.is-sent .jobRow__stripe{background:rgba(34,197,94,.95)} .jobRow.is-failed .jobRow__stripe{background:rgba(var(--danger-rgb),.95)} .jobRow.is-processing .jobRow__stripe{background:rgba(254,87,7,.95)} .jobRow.is-pending .jobRow__stripe{background:rgba(245,158,11,.95)} .jobRow__main{ display:grid; grid-template-columns:minmax(250px,1fr) minmax(220px,1.4fr) auto; align-items:center; gap:10px; padding:10px 14px 10px 12px; } .jobRow__primary{ display:flex; align-items:center; gap:10px; min-width:0; } .jobRow__invoice{ display:flex; align-items:center; gap:8px; min-width:0; } .jobRow__invoice b{ color:var(--text); font-size:15px; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jobRow__op{ color:var(--muted); font-size:12px; font-weight:850; background:rgba(255,255,255,.055); border:1px solid var(--border); border-radius:999px; padding:3px 8px; white-space:nowrap; } .jobRow__id{font-size:11px;color:var(--muted);font-weight:800} .jobRow__status{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; } .jobRow__brief{ display:flex; align-items:center; gap:10px; min-width:0; color:var(--muted); font-size:12px; line-height:1.6; } .jobRow__brief > span{ white-space:nowrap; } .jobRow__brief b{color:var(--text);font-weight:850} .jobRow__err{ color:#ffb4b9; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; } .jobRow__ok{color:#86efac} .jobRow__actions{ display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:nowrap; } .jobRow__actions .btn{min-width:0;white-space:nowrap;padding-inline:10px} .jobAdvanced{ border-top:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.10); } .jobAdvanced summary{ cursor:pointer; user-select:none; list-style:none; padding:8px 14px; color:var(--muted); font-weight:900; font-size:12px; } .jobAdvanced summary::-webkit-details-marker{display:none} .jobAdvanced summary::before{ content:"+"; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-inline-end:6px; border-radius:999px; border:1px solid var(--border); color:var(--text); } .jobAdvanced[open] summary::before{content:"−"} .jobAdvanced__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 14px 12px; } .jobAdvanced__cell{ min-width:0; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(255,255,255,.035); padding:8px 10px; } .jobAdvanced__cell span{ display:block; color:var(--muted2); font-size:11px; margin-bottom:4px; } .jobAdvanced__cell b{ display:block; color:var(--text); font-size:12px; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jobAdvanced__cell--mono b{ direction:ltr; text-align:left; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; unicode-bidi:plaintext; } .jobAdvanced__error{ margin:0 14px 12px; border:1px solid rgba(var(--danger-rgb),.22); border-radius:12px; background:rgba(var(--danger-rgb),.08); padding:10px 12px; } .jobAdvanced__error span{ display:block; color:#ffb4b9; font-size:12px; font-weight:900; margin-bottom:4px; } .jobAdvanced__error p{ margin:0; color:var(--text); font-size:12px; line-height:1.8; } html[data-theme="light"] .jobRow, body.theme-light .jobRow{ background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92)); box-shadow:0 10px 24px rgba(15,23,42,.08); } html[data-theme="light"] .jobAdvanced, body.theme-light .jobAdvanced{background:rgba(15,23,42,.025)} html[data-theme="light"] .jobAdvanced__cell, body.theme-light .jobAdvanced__cell{background:rgba(15,23,42,.025);border-color:rgba(15,23,42,.08)} @media (max-width:1100px){ .jobRow__main{grid-template-columns:1fr;align-items:stretch} .jobRow__actions{justify-content:flex-start;flex-wrap:wrap} .jobAdvanced__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ .jobsSummary--compact{grid-template-columns:repeat(2,minmax(0,1fr))} .jobRow__primary{flex-direction:column;align-items:flex-start} .jobRow__brief{flex-wrap:wrap} .jobRow__brief > span{white-space:normal} .jobRow__actions .btn{flex:1 1 110px} .jobAdvanced__grid{grid-template-columns:1fr} } /* ---------------- v183: global queue metrics + compact invoice facts ---------------- */ .jobsSummary--compact .jobMetric{ font:inherit; text-align:start; color:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease; } .jobsSummary--compact .jobMetric:hover{ transform:translateY(-1px); border-color:rgba(var(--accent-rgb),.42); box-shadow:0 14px 34px rgba(0,0,0,.18); } .jobsSummary--compact .jobMetric.is-active{ border-color:rgba(var(--accent-rgb),.72); background:linear-gradient(180deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.055)); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.10), 0 16px 36px rgba(0,0,0,.18); } .jobsSummary--compact .jobMetric.is-active small{ color:rgba(var(--accent-rgb),.95); font-weight:850; } .jobRow__main{ grid-template-columns:minmax(240px,.9fr) minmax(360px,1.8fr) auto; } .jobRow__brief > span b[title]{ max-width:240px; display:inline-block; vertical-align:bottom; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html[data-theme="light"] .jobsSummary--compact .jobMetric.is-active, body.theme-light .jobsSummary--compact .jobMetric.is-active{ background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.035)); } @media (max-width:1100px){ .jobRow__main{grid-template-columns:1fr;} .jobRow__brief > span b[title]{max-width:100%;} } /* ---------------- v184: compact row-based send queue ---------------- */ .jobBulkBar{ display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; margin:8px 0 10px; padding:8px 10px; border:1px solid rgba(var(--border-rgb),.75); background:rgba(15,23,42,.20); border-radius:16px; } .jobSelectAll{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; font-weight:850; cursor:pointer; user-select:none; } .jobBulkBar__count{ color:var(--muted); font-size:12px; margin-inline-start:auto; } .jobBulkBar__count b{color:var(--text);font-weight:950} .jobQueueTableWrap{border-radius:18px;overflow:auto;max-height:min(66vh,760px)} .jobQueueTable{min-width:1180px;font-size:12px} .jobQueueTable th, .jobQueueTable td{padding:8px 9px;vertical-align:middle} .jobQueueTable thead th{ position:sticky; top:0; z-index:2; background:rgba(15,23,42,.96); backdrop-filter:blur(10px); } .jobTableRow{border-inline-start:3px solid transparent} .jobTableRow.is-ok,.jobTableRow.is-sent{border-inline-start-color:rgba(34,197,94,.95)} .jobTableRow.is-failed{border-inline-start-color:rgba(var(--danger-rgb),.95)} .jobTableRow.is-processing{border-inline-start-color:rgba(254,87,7,.95)} .jobTableRow.is-pending{border-inline-start-color:rgba(245,158,11,.95)} .jobTableRow:hover{background:rgba(148,163,184,.075)} .jobCellInvoice{white-space:nowrap;min-width:112px} .jobCellInvoice > div{display:flex;align-items:center;gap:6px;margin-bottom:2px} .jobCellInvoice b{font-size:13px;font-weight:950;color:var(--text)} .jobCellInvoice small{display:block;color:var(--muted2);font-size:10px;direction:ltr;text-align:right} .jobCellTitle{min-width:165px;max-width:240px;font-weight:850;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jobCellBuyer{min-width:150px;max-width:230px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jobCellAmount{min-width:95px;font-weight:900;color:var(--text);white-space:nowrap} .jobCellErr{min-width:190px;max-width:310px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jobTableActions{min-width:260px} .jobActionGroup{display:flex;align-items:center;gap:5px;justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap} .jobActionGroup .btn{min-width:0;padding:6px 8px} .jobActionGroup .btn--iconOnly{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center} .jobActionGroup .btn.is-active{border-color:rgba(var(--primary-rgb),.65);background:rgba(var(--primary-rgb),.16);color:var(--primary-200)} .jobAdvancedRow > td{padding:0 8px 8px !important;background:rgba(15,23,42,.16)} .jobAdvanced--table{margin:0;border-radius:14px;border:1px solid rgba(var(--border-rgb),.65);background:rgba(15,23,42,.22);padding:10px} .jobAdvancedRow[hidden]{display:none!important} html[data-theme="light"] .jobBulkBar, body.theme-light .jobBulkBar, html[data-theme="light"] .jobAdvancedRow > td, body.theme-light .jobAdvancedRow > td, html[data-theme="light"] .jobAdvanced--table, body.theme-light .jobAdvanced--table{background:rgba(15,23,42,.035)} html[data-theme="light"] .jobQueueTable thead th, body.theme-light .jobQueueTable thead th{background:rgba(248,250,252,.96)} @media (max-width:980px){ .jobQueueTableWrap{max-height:none} .jobQueueTable{min-width:980px} .jobBulkBar__count{margin-inline-start:0} } /* ---------------- v185: queue full redesign + compact advanced toggle ---------------- */ .jobBulkBar--redesign{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid rgba(var(--border-rgb),.68); border-radius:16px; background:linear-gradient(180deg,rgba(15,23,42,.52),rgba(15,23,42,.28)); box-shadow:0 12px 30px rgba(0,0,0,.10); } .jobBulkBar__main,.jobBulkBar__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .jobBulkBar--redesign .btn{min-height:32px;padding-block:6px} .jobQueueShell{ margin-top:10px; border:1px solid rgba(var(--border-rgb),.70); border-radius:18px; overflow:hidden; background:rgba(15,23,42,.22); box-shadow:0 18px 45px rgba(0,0,0,.12); } .jobQueueHead, .jobQueueLine{ display:grid; grid-template-columns:34px 34px minmax(220px,1.35fr) minmax(170px,.85fr) minmax(230px,1.05fr) minmax(220px,1fr) minmax(250px,.95fr); align-items:center; gap:10px; } .jobQueueHead{ position:sticky; top:0; z-index:2; padding:9px 12px; color:var(--muted2); font-size:11px; font-weight:900; background:rgba(15,23,42,.96); border-bottom:1px solid rgba(var(--border-rgb),.70); backdrop-filter:blur(12px); } .jobQueueRows{max-height:min(70vh,820px);overflow:auto} .jobQueueItem{ position:relative; border-bottom:1px solid rgba(var(--border-rgb),.52); background:linear-gradient(90deg,rgba(148,163,184,.035),transparent 42%); } .jobQueueItem:last-child{border-bottom:0} .jobQueueItem::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:rgba(148,163,184,.42); } .jobQueueItem.is-ok::before,.jobQueueItem.is-sent::before{background:rgba(34,197,94,.95)} .jobQueueItem.is-failed::before{background:rgba(var(--danger-rgb),.95)} .jobQueueItem.is-processing::before{background:rgba(254,87,7,.95)} .jobQueueItem.is-pending::before{background:rgba(245,158,11,.95)} .jobQueueItem:hover{background:rgba(148,163,184,.075)} .jobQueueLine{padding:9px 12px;min-height:58px} .jobQueueCheck{display:flex;align-items:center;justify-content:center} .jobMoreBtn{ width:26px; height:26px; border-radius:9px; border:1px solid rgba(var(--border-rgb),.75); color:var(--muted); background:rgba(148,163,184,.08); display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; line-height:1; cursor:pointer; transition:.18s ease; } .jobMoreBtn:hover:not(:disabled){color:var(--text);border-color:rgba(var(--primary-rgb),.55);background:rgba(var(--primary-rgb),.13)} .jobMoreBtn.is-active{color:var(--primary-200);border-color:rgba(var(--primary-rgb),.70);background:rgba(var(--primary-rgb),.18)} .jobMoreBtn.is-active{font-size:0} .jobMoreBtn.is-active::after{content:"−";font-size:20px;font-weight:950;line-height:1} .jobMoreBtn:disabled{opacity:.35;cursor:not-allowed} .jobMainInfo{min-width:0} .jobMainInfo__top{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:4px} .jobInvoiceNo{font-size:14px;font-weight:950;color:var(--text);letter-spacing:.1px;white-space:nowrap} .jobQueueId{direction:ltr;color:var(--muted2);font-size:11px;white-space:nowrap} .jobMainInfo__title{color:var(--muted);font-size:12px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .jobBuyerAmount{min-width:0;display:flex;flex-direction:column;gap:4px} .jobBuyerAmount b{color:var(--text);font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jobBuyerAmount span{color:var(--primary-200);font-size:12px;font-weight:950;white-space:nowrap} .jobStatuses{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0} .jobPill--soft{ color:var(--muted); background:rgba(148,163,184,.10); border-color:rgba(var(--border-rgb),.62); } .jobTryBadge{ display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:3px 8px; border-radius:999px; color:var(--muted); background:rgba(148,163,184,.10); border:1px solid rgba(var(--border-rgb),.55); font-size:11px; font-weight:900; white-space:nowrap; } .jobErrCompact{min-width:0;color:var(--muted);font-size:12px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jobErrCompact .jobRow__ok{color:rgba(34,197,94,.9);font-weight:900} .jobRowActions{display:flex;align-items:center;gap:5px;justify-content:flex-start;white-space:nowrap;overflow:hidden} .jobRowActions .btn{min-width:0;padding:6px 8px;min-height:30px} .jobRowActions .btn--iconOnly{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center} .jobAdvancedRowPanel{padding:0 46px 10px 12px;background:rgba(15,23,42,.16)} .jobAdvancedRowPanel[hidden]{display:none!important} .jobAdvanced--inline{margin:0;border-radius:14px;border:1px solid rgba(var(--border-rgb),.65);background:rgba(15,23,42,.24);padding:10px} html[data-theme="light"] .jobBulkBar--redesign, body.theme-light .jobBulkBar--redesign, html[data-theme="light"] .jobQueueShell, body.theme-light .jobQueueShell, html[data-theme="light"] .jobAdvancedRowPanel, body.theme-light .jobAdvancedRowPanel, html[data-theme="light"] .jobAdvanced--inline, body.theme-light .jobAdvanced--inline{background:rgba(15,23,42,.035)} html[data-theme="light"] .jobQueueHead, body.theme-light .jobQueueHead{background:rgba(248,250,252,.96)} html[data-theme="light"] .jobQueueItem, body.theme-light .jobQueueItem{background:rgba(255,255,255,.55)} html[data-theme="light"] .jobQueueItem:hover, body.theme-light .jobQueueItem:hover{background:rgba(15,23,42,.035)} @media (max-width:1180px){ .jobQueueHead{display:none} .jobQueueRows{max-height:none} .jobQueueLine{grid-template-columns:34px 34px minmax(180px,1fr) minmax(150px,.9fr);gap:8px;align-items:start} .jobStatuses,.jobErrCompact,.jobRowActions{grid-column:3 / -1} .jobRowActions{overflow:visible;flex-wrap:wrap} .jobAdvancedRowPanel{padding-inline-start:46px} } @media (max-width:720px){ .jobBulkBar--redesign{align-items:stretch;flex-direction:column} .jobBulkBar__actions .btn{flex:1 1 auto} .jobQueueLine{grid-template-columns:30px 30px minmax(0,1fr);padding:10px;min-height:0} .jobBuyerAmount,.jobStatuses,.jobErrCompact,.jobRowActions{grid-column:3 / -1} .jobBuyerAmount{margin-top:2px} .jobAdvancedRowPanel{padding:0 10px 10px} .jobAdvanced__grid{grid-template-columns:1fr} } /* ---------------- v186: queue list inspired by invoice table + smaller metrics ---------------- */ .jobsSummary--compact{ gap:8px; margin-bottom:8px; } .jobsSummary--compact .jobMetric{ min-height:48px; padding:7px 10px; border-radius:16px; } .jobsSummary--compact .jobMetric span{ font-size:11px; line-height:1.2; } .jobsSummary--compact .jobMetric b{ font-size:16px; line-height:1.15; margin-top:2px; } .jobsSummary--compact .jobMetric small{ font-size:10px; margin-top:2px; opacity:.8; } .jobBulkBar--redesign{ padding:7px 9px; margin:6px 0 8px; border-radius:14px; box-shadow:none; } .jobBulkBar--redesign .btn{ min-height:28px; padding-block:5px; } .jobQueueListWrap{ border-radius:18px; overflow:auto; max-height:min(70vh,820px); border:1px solid rgba(var(--border-rgb),.68); background:rgba(15,23,42,.16); } .jobQueueListTable{ min-width:1180px; font-size:12px; } .jobQueueListTable th, .jobQueueListTable td{ padding:7px 8px; vertical-align:middle; } .jobQueueListTable thead th{ position:sticky; top:0; z-index:3; background:rgba(15,23,42,.96); backdrop-filter:blur(10px); color:var(--muted2); font-size:11px; font-weight:900; white-space:nowrap; } .jobQueueTableRow{ border-inline-start:3px solid transparent; } .jobQueueTableRow:hover{ background:rgba(148,163,184,.075); } .jobQueueTableRow.is-ok, .jobQueueTableRow.is-sent{border-inline-start-color:rgba(34,197,94,.95)} .jobQueueTableRow.is-failed{border-inline-start-color:rgba(var(--danger-rgb),.95)} .jobQueueTableRow.is-processing{border-inline-start-color:rgba(254,87,7,.95)} .jobQueueTableRow.is-pending{border-inline-start-color:rgba(245,158,11,.95)} .jobQInvCell{ min-width:96px; white-space:nowrap; } .jobQInvCell > div{ display:flex; align-items:center; gap:6px; } .jobQInvCell b{ color:var(--text); font-size:13px; font-weight:950; } .jobQInvCell span{ display:inline-flex; align-items:center; min-height:19px; padding:2px 7px; border-radius:999px; color:var(--muted); background:rgba(148,163,184,.10); border:1px solid rgba(var(--border-rgb),.56); font-size:10px; font-weight:900; } .jobQInvCell small{ display:block; direction:ltr; text-align:right; color:var(--muted2); font-size:10px; margin-top:2px; } .jobQTitleCell{ min-width:170px; max-width:260px; font-weight:850; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jobQBuyerCell{ min-width:145px; max-width:225px; color:var(--muted); white-space:normal; overflow:hidden; } .jobQBuyerCell .jobQBuyerPattern{ display:block; color:var(--muted2); font-size:9px; line-height:1.25; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jobQBuyerCell .jobQBuyerName{ display:block; color:var(--text); font-size:11px; font-weight:750; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jobQAmountCell{ min-width:92px; color:var(--text); font-weight:900; white-space:nowrap; } .jobQStatusCell, .jobQRemoteCell{ min-width:118px; white-space:nowrap; } .jobQStatusCell small, .jobQRemoteCell small{ display:block; color:var(--muted2); font-size:10px; margin-top:3px; } .jobQErrCell{ min-width:132px; max-width:190px; color:var(--muted); font-size:10.5px; line-height:1.5; white-space:normal; overflow:hidden; } .jobErrMoreLink{ display:inline-flex; align-items:center; justify-content:center; margin-inline-start:4px; padding:0; border:0; background:transparent; color:var(--primary); font-size:10px; font-weight:700; cursor:pointer; } .jobErrMoreLink:hover{ text-decoration:underline; } .jobQActionsCell{ min-width:236px; } .jobRowActions--table{ display:flex; align-items:center; gap:5px; justify-content:flex-start; overflow:visible; flex-wrap:nowrap; } .jobRowActions--table .btn{ min-width:0; min-height:28px; padding:5px 7px; } .jobRowActions--table .btn--iconOnly{ width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; } .jobMoreBtn--tiny{ width:24px; height:24px; border-radius:8px; font-size:16px; } .jobMoreBtn--tiny.is-active::after{ font-size:18px; } .jobAdvancedTableRow > td{ padding:0 8px 8px !important; background:rgba(15,23,42,.18); } .jobAdvancedTableRow[hidden]{display:none!important} .jobAdvanced--invoiceList{ margin:0; border-radius:14px; border:1px solid rgba(var(--border-rgb),.65); background:rgba(15,23,42,.24); padding:10px; } html[data-theme="light"] .jobQueueListWrap, body.theme-light .jobQueueListWrap, html[data-theme="light"] .jobAdvancedTableRow > td, body.theme-light .jobAdvancedTableRow > td, html[data-theme="light"] .jobAdvanced--invoiceList, body.theme-light .jobAdvanced--invoiceList{ background:rgba(15,23,42,.035); } html[data-theme="light"] .jobQueueListTable thead th, body.theme-light .jobQueueListTable thead th{ background:rgba(248,250,252,.96); } @media (max-width:980px){ .jobsSummary--compact{grid-template-columns:repeat(2,minmax(0,1fr));} .jobQueueListWrap{max-height:none;} .jobQueueListTable{min-width:1080px;} } @media (max-width:640px){ .jobsSummary--compact .jobMetric{min-height:44px;padding:6px 8px;} .jobsSummary--compact .jobMetric b{font-size:15px;} } /* ---------------- v187: compact send queue row actions + sent date ---------------- */ .jobsSummary--compact{ gap:6px; margin-bottom:6px; } .jobsSummary--compact .jobMetric{ min-height:40px; padding:5px 8px; border-radius:14px; } .jobsSummary--compact .jobMetric span{font-size:10px;margin-bottom:1px;} .jobsSummary--compact .jobMetric b{font-size:14px;line-height:1.05;margin-top:0;} .jobsSummary--compact .jobMetric small{font-size:9px;margin-top:1px;} .jobBulkBar--redesign{padding:6px 8px;margin:5px 0 7px;} .jobBulkBar--redesign .btn{min-height:26px;padding:4px 7px;font-size:11px;} .jobQueueListTable{min-width:1240px;font-size:11.5px;} .jobQueueListTable th, .jobQueueListTable td{padding:6px 7px;} .jobQTitleCell{min-width:160px;max-width:240px;} .jobQBuyerCell{min-width:138px;max-width:215px;} .jobQAmountCell{min-width:84px;} .jobQTimeCell{ min-width:132px; max-width:170px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jobQTimeCell b{ display:block; color:var(--text); font-size:11px; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jobQTimeCell small{ display:block; margin-top:2px; color:var(--muted2); font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jobQStatusCell,.jobQRemoteCell{min-width:108px;} .jobQErrCell{min-width:125px;max-width:175px;} .jobQActionsCell{min-width:126px;} .jobRowActions--table{gap:4px;justify-content:center;} .jobRowActions--table .btn, .jobRowActions--table .btn--iconOnly{ width:25px; height:25px; min-width:25px; min-height:25px; padding:0; border-radius:8px; } .jobRowActions--table .btn .btn__ico{width:14px;height:14px;} .jobMoreBtn--tiny{width:22px;height:22px;border-radius:7px;font-size:15px;} @media (max-width: 860px){ .jobQueueListTable{min-width:1120px;} .jobsSummary--compact{grid-template-columns:repeat(2,minmax(0,1fr));} } /* ---------------- v188: send queue filters + compact invoice-like actions ---------------- */ section[data-page="jobs"] .inv-toolbar2 .field.invtf{ margin:0; } section[data-page="jobs"] .inv-toolbar2__row--top .invtf{min-width:160px;flex:0 0 auto;} section[data-page="jobs"] .inv-toolbar2__row--top .invtf--search{min-width:260px;flex:1 1 320px;} section[data-page="jobs"] .inv-toolbar2__row--bottom .invtf--date{min-width:170px;flex:0 0 auto;} section[data-page="jobs"] .inv-toolbar2 label{ display:flex; flex-direction:column; gap:6px; white-space:nowrap; font-size:11px; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } section[data-page="jobs"] .inv-toolbar2 input.input--sm, section[data-page="jobs"] .inv-toolbar2 select.input--sm{ height:36px; min-height:36px; padding:7px 10px; border-radius:10px; font-size:12px; line-height:1.2; box-sizing:border-box; } section[data-page="jobs"] .inv-toolbar2 .inv-dates{ gap:10px; align-items:flex-end; } .jobQActionsCell{min-width:96px!important;width:96px;} .jobRowActions--table{ gap:3px!important; justify-content:center!important; } .jobRowActions--table .btn, .jobRowActions--table .btn--iconOnly{ width:24px!important; height:24px!important; min-width:24px!important; min-height:24px!important; padding:0!important; border-radius:7px!important; box-shadow:none!important; } .jobRowActions--table .btn__ico, .jobRowActions--table .btn .btn__ico{ width:13px!important; height:13px!important; } .jobRowActions--table .btn__txt{display:none!important;} .jobQueueListTable{min-width:1180px;} .jobQErrCell{max-width:170px;} @media (max-width:860px){ section[data-page="jobs"] .inv-toolbar2__row--top .invtf, section[data-page="jobs"] .inv-toolbar2__row--top .invtf--search, section[data-page="jobs"] .inv-toolbar2__row--bottom .invtf--date{min-width:0;flex:1 1 100%;} } /* ---------------- v189: invoice-like queue filters/actions polish ---------------- */ /* جستجو در فهرست فاکتورها و صف ارسال دیگر کشیده و متفاوت نیست */ .inv-toolbar2__row--top .invtf--search{ min-width:220px!important; flex:0 0 240px!important; } .inv-toolbar2__row--bottom .invtf--date{ min-width:170px!important; flex:0 0 170px!important; } .inv-toolbar2 .invtf--search input.input--sm, .inv-toolbar2 .invtf--date input.input--sm{ width:100%; height:36px; min-height:36px; padding:7px 10px; border-radius:10px; font-size:12px; line-height:1.2; box-sizing:border-box; background:var(--input-bg, rgba(15,23,42,.36)); border:1px solid var(--border); } /* دکمه‌های عملیات صف ارسال مثل فهرست فاکتورها قاب مشخص داشته باشند */ .jobRowActions--table .btn, .jobRowActions--table .btn--iconOnly{ border:1px solid var(--border)!important; background:rgba(15,23,42,.30)!important; color:var(--text)!important; } .jobRowActions--table .btn:not(:disabled):hover, .jobRowActions--table .btn--iconOnly:not(:disabled):hover{ background:rgba(var(--primary-rgb),.16)!important; border-color:rgba(var(--accent-rgb),.45)!important; transform:translateY(-1px); } .jobRowActions--table .btn:disabled, .jobRowActions--table .btn--iconOnly:disabled{ opacity:.42; background:rgba(148,163,184,.08)!important; } html[data-theme="light"] .jobRowActions--table .btn, body.theme-light .jobRowActions--table .btn, html[data-theme="light"] .jobRowActions--table .btn--iconOnly, body.theme-light .jobRowActions--table .btn--iconOnly{ background:rgba(255,255,255,.72)!important; border-color:rgba(15,23,42,.14)!important; } /* زمان قبل از عنوان قرار گرفته؛ کمی جمع‌وجورتر شود */ .jobQTimeCell{min-width:122px;max-width:150px;} .jobQTitleCell{min-width:180px;max-width:260px;} .jobQRemoteCell .jobPill--remote{max-width:130px;overflow:hidden;text-overflow:ellipsis;} .jobRemoteManualSelect{ display:inline-flex; width:auto; min-width:108px; max-width:140px; min-height:28px; margin:0; padding:5px 24px 5px 10px; border-radius:999px; font-size:12px; font-weight:850; outline:none; cursor:pointer; text-align:center; text-overflow:ellipsis; } .jobRemoteManualSelect:focus{ border-color:rgba(var(--accent-rgb),.72); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); } .jobRemoteManualSelect:disabled{opacity:.62;cursor:wait;} .jobRemoteManualSelect option{ color:#0f172a; background:#fff; } @media (max-width:860px){ .inv-toolbar2__row--top .invtf--search, .inv-toolbar2__row--bottom .invtf--date{ min-width:0!important; flex:1 1 100%!important; } } /* ---------------- v190: harmonize invoice/jobs filter inputs + invoice-style queue action buttons ---------------- */ /* فیلدهای جستجو و تاریخ در فهرست فاکتورها و صف ارسال مثل سایر فیلترها قاب یکسان بگیرند */ .inv-toolbar2 .field.invtf > label > input.input--sm, .inv-toolbar2 .field.invtf > label > select.input--sm{ width:100% !important; height:52px !important; min-height:52px !important; padding:0 14px !important; border-radius:16px !important; border:1px solid var(--border) !important; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important; color:var(--text) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important; font-size:12.5px !important; line-height:1.2 !important; box-sizing:border-box !important; } .inv-toolbar2 .field.invtf > label > input.input--sm::placeholder{color:var(--muted2);opacity:.9;} .inv-toolbar2 .field.invtf > label > input.input--sm:hover, .inv-toolbar2 .field.invtf > label > select.input--sm:hover{ border-color:rgba(148,163,184,.36) !important; } .inv-toolbar2 .field.invtf > label > input.input--sm:focus, .inv-toolbar2 .field.invtf > label > select.input--sm:focus{ border-color:rgba(var(--accent-rgb),.58) !important; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14), inset 0 1px 0 rgba(255,255,255,.06) !important; } html[data-theme="light"] .inv-toolbar2 .field.invtf > label > input.input--sm, body.theme-light .inv-toolbar2 .field.invtf > label > input.input--sm, html[data-theme="light"] .inv-toolbar2 .field.invtf > label > select.input--sm, body.theme-light .inv-toolbar2 .field.invtf > label > select.input--sm{ background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.74)) !important; border-color:rgba(15,23,42,.14) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95) !important; } /* عرض جستجو دیگر با ظاهر متفاوت تحمیل نشود؛ فقط کمی جا بیشتر از فیلترهای معمولی بگیرد */ .inv-toolbar2__row--top .invtf--search{ flex:1 1 260px !important; min-width:240px !important; max-width:none !important; } .inv-toolbar2__row--bottom .invtf--date{ flex:0 0 190px !important; min-width:190px !important; } @media (max-width:860px){ .inv-toolbar2__row--top .invtf--search, .inv-toolbar2__row--bottom .invtf--date{ flex:1 1 100% !important; min-width:0 !important; } } /* دکمه‌های عملیات صف ارسال دقیقاً شبیه عملیات فهرست فاکتورها: مربعی، مرزبندی‌شده و بدون متن */ .jobQActionsCell{min-width:122px !important;width:122px !important;} .jobRowActions--table{ gap:5px !important; justify-content:center !important; overflow:visible !important; } .jobRowActions--table .btn, .jobRowActions--table .btn--iconOnly{ flex:0 0 auto !important; min-width:34px !important; width:34px !important; min-height:34px !important; height:34px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--border) !important; background:transparent !important; color:#ffb18c !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .jobRowActions--table .btn .btn__ico, .jobRowActions--table .btn__ico{ width:16px !important; height:16px !important; margin:0 !important; } .jobRowActions--table .btn .btn__ico svg, .jobRowActions--table .btn__ico svg{ width:16px !important; height:16px !important; } .jobRowActions--table .btn__txt{display:none !important;} .jobRowActions--table .btn:not(:disabled):hover, .jobRowActions--table .btn--iconOnly:not(:disabled):hover{ background:rgba(var(--accent-rgb),.08) !important; border-color:rgba(var(--accent-rgb),.35) !important; color:var(--accent) !important; transform:none !important; } .jobRowActions--table .btn:disabled, .jobRowActions--table .btn--iconOnly:disabled{ opacity:.38 !important; color:var(--muted2) !important; background:transparent !important; } html[data-theme="light"] .jobRowActions--table .btn, body.theme-light .jobRowActions--table .btn, html[data-theme="light"] .jobRowActions--table .btn--iconOnly, body.theme-light .jobRowActions--table .btn--iconOnly{ background:transparent !important; border-color:rgba(15,23,42,.16) !important; color:#FE5707 !important; } /* ---------------- v191: exact queue filter border alignment + invoice-inspired queue row actions ---------------- */ /* ورودی‌های جستجو/تاریخ و SelectX داخل فیلترهای فهرست فاکتور و صف ارسال، یک قاب کاملاً یکسان دارند. */ .inv-toolbar2 .field.invtf > label > input.input--sm, .inv-toolbar2 .field.invtf > label > .selectx > .selectx-btn{ width:100% !important; height:52px !important; min-height:52px !important; border:1px solid var(--border) !important; border-radius:16px !important; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important; color:var(--text) !important; box-sizing:border-box !important; font-size:12.5px !important; line-height:1.2 !important; } .inv-toolbar2 .field.invtf > label > input.input--sm{ padding:0 14px !important; text-align:right !important; direction:rtl !important; } .inv-toolbar2 .field.invtf > label > .selectx{ width:100% !important; height:52px !important; min-height:52px !important; } .inv-toolbar2 .field.invtf > label > .selectx > .selectx-btn{ padding:0 14px !important; text-align:right !important; direction:rtl !important; } .inv-toolbar2 .field.invtf > label > .selectx > .selectx-btn .selectx-label{ flex:1 1 auto !important; text-align:center !important; } .inv-toolbar2 .field.invtf > label > .selectx > .selectx-btn .selectx-caret{ width:16px !important; height:16px !important; flex:0 0 16px !important; } .inv-toolbar2 .field.invtf > label > input.input--sm:hover, .inv-toolbar2 .field.invtf > label > .selectx > .selectx-btn:hover{ border-color:rgba(148,163,184,.36) !important; } .inv-toolbar2 .field.invtf > label > input.input--sm:focus, .inv-toolbar2 .field.invtf > label > .selectx > .selectx-btn:focus{ border-color:rgba(var(--accent-rgb),.58) !important; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14), inset 0 1px 0 rgba(255,255,255,.06) !important; outline:0 !important; } html[data-theme="light"] .inv-toolbar2 .field.invtf > label > input.input--sm, body.theme-light .inv-toolbar2 .field.invtf > label > input.input--sm, html[data-theme="light"] .inv-toolbar2 .field.invtf > label > .selectx > .selectx-btn, body.theme-light .inv-toolbar2 .field.invtf > label > .selectx > .selectx-btn{ background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.74)) !important; border-color:rgba(15,23,42,.14) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95) !important; } /* عملیات صف ارسال: همان زبان بصری فهرست فاکتورها؛ مربع‌های 34px با حاشیه، آیکن بدون متن و بدون دکمه + جداگانه. */ .jobQActionsCell{min-width:154px !important;width:154px !important;text-align:center !important;} .jobRowActions--table{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:5px !important; flex-wrap:nowrap !important; overflow:visible !important; } .jobRowActions--table .jobActionBtn, .jobRowActions--table .btn.jobActionBtn, .jobRowActions--table .btn--iconOnly.jobActionBtn{ flex:0 0 34px !important; width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--border) !important; background:transparent !important; color:#ffb18c !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .jobRowActions--table .jobActionBtn .btn__ico, .jobRowActions--table .jobActionBtn .btn__ico svg{ width:16px !important; height:16px !important; margin:0 !important; } .jobRowActions--table .jobActionBtn .btn__text, .jobRowActions--table .jobActionBtn .btn__txt{display:none !important;} .jobRowActions--table .jobActionBtn:not(:disabled):hover{ background:rgba(var(--accent-rgb),.08) !important; border-color:rgba(var(--accent-rgb),.35) !important; color:var(--accent) !important; transform:none !important; } .jobRowActions--table .jobActionBtn:disabled{ opacity:.38 !important; color:var(--muted2) !important; background:transparent !important; } html[data-theme="light"] .jobRowActions--table .jobActionBtn, body.theme-light .jobRowActions--table .jobActionBtn{ background:transparent !important; border-color:rgba(15,23,42,.16) !important; color:#FE5707 !important; } /* v31: copyable reference number in send queue invoice details */ .jobAdvanced__copy{ width:100%; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:6px; border:0; background:transparent; padding:0; margin:0; color:var(--text); cursor:pointer; text-align:inherit; font:inherit; } .jobAdvanced__copy b{flex:1;min-width:0;} .jobAdvanced__copy em{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; color:var(--accent); opacity:.9; font-style:normal; } .jobAdvanced__copy em svg{width:15px;height:15px;display:block;} .jobAdvanced__copy:hover b{text-decoration:underline;} .jobQueueListTable .jobQInvCell{min-width:130px;} .jobQueueListTable .jobQInvCell span{white-space:nowrap;} .jobQueueListTable .jobQTimeCell{min-width:150px;max-width:190px;} .invSubjectCell span{ display:block; font-weight:900; color:var(--muted); white-space:nowrap; } .invSubjectCell small{ display:inline-flex; align-items:center; max-width:92px; margin-top:3px; padding:1px 7px; border-radius:999px; border:1px solid rgba(var(--border-rgb),.50); background:rgba(148,163,184,.08); color:var(--muted2); font-size:10px; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } section[data-page="invoices"] .card > .inv-toolbar2, section[data-page="jobs"] .card > .inv-toolbar2{ margin-bottom:12px; padding:12px; border:1px solid rgba(148,163,184,.18); border-radius:22px; background:linear-gradient(180deg, rgba(15,23,42,.34), rgba(15,23,42,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.045); } html[data-theme="light"] section[data-page="invoices"] .card > .inv-toolbar2, body.theme-light section[data-page="invoices"] .card > .inv-toolbar2, html[data-theme="light"] section[data-page="jobs"] .card > .inv-toolbar2, body.theme-light section[data-page="jobs"] .card > .inv-toolbar2{ background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(248,250,252,.58)); border-color:rgba(15,23,42,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); } section[data-page="invoices"] .inv-toolbar2__row, section[data-page="jobs"] .inv-toolbar2__row{ width:100%; gap:12px !important; } section[data-page="invoices"] .inv-toolbar2__row--top, section[data-page="jobs"] .inv-toolbar2__row--top{ display:grid !important; align-items:end !important; border-bottom:1px solid rgba(148,163,184,.12) !important; padding-bottom:12px !important; } section[data-page="invoices"] .inv-toolbar2__row--top{ grid-template-columns:minmax(320px,1.35fr) minmax(150px,.7fr) minmax(180px,.75fr) minmax(110px,.45fr); } section[data-page="jobs"] .inv-toolbar2__row--top{ grid-template-columns:minmax(360px,1.55fr) repeat(4, minmax(145px,.72fr)); } section[data-page="invoices"] .inv-toolbar2__row--top .field.invtf, section[data-page="jobs"] .inv-toolbar2__row--top .field.invtf, section[data-page="invoices"] .inv-toolbar2__row--top .invtf--search, section[data-page="jobs"] .inv-toolbar2__row--top .invtf--search{ min-width:0 !important; max-width:none !important; width:100% !important; flex:none !important; } section[data-page="invoices"] .inv-toolbar2__row--bottom, section[data-page="jobs"] .inv-toolbar2__row--bottom{ display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:end !important; gap:12px !important; justify-content:stretch !important; } section[data-page="invoices"] .inv-dates, section[data-page="jobs"] .inv-dates{ justify-content:flex-start; gap:12px !important; } section[data-page="invoices"] .inv-toolbar2__row--bottom .invtf--date, section[data-page="jobs"] .inv-toolbar2__row--bottom .invtf--date{ flex:0 1 190px !important; min-width:190px !important; max-width:210px !important; } section[data-page="invoices"] .inv-actions, section[data-page="jobs"] .inv-actions{ align-self:end; justify-content:flex-end; gap:8px !important; } section[data-page="invoices"] .inv-actions .btn, section[data-page="jobs"] .inv-actions .btn{ min-height:40px; padding-inline:14px; border-radius:14px; } @media (max-width:1120px){ section[data-page="invoices"] .inv-toolbar2__row--top, section[data-page="jobs"] .inv-toolbar2__row--top{ grid-template-columns:repeat(2,minmax(0,1fr)); } section[data-page="invoices"] .inv-toolbar2__row--top .invtf--search, section[data-page="jobs"] .inv-toolbar2__row--top .invtf--search{ grid-column:1 / -1; } } @media (max-width:720px){ section[data-page="invoices"] .card > .inv-toolbar2, section[data-page="jobs"] .card > .inv-toolbar2{padding:10px;border-radius:18px;} section[data-page="invoices"] .inv-toolbar2__row--top, section[data-page="jobs"] .inv-toolbar2__row--top, section[data-page="invoices"] .inv-toolbar2__row--bottom, section[data-page="jobs"] .inv-toolbar2__row--bottom{ grid-template-columns:1fr !important; } section[data-page="invoices"] .inv-toolbar2__row--bottom .invtf--date, section[data-page="jobs"] .inv-toolbar2__row--bottom .invtf--date{ min-width:0 !important; max-width:none !important; flex:1 1 100% !important; } section[data-page="invoices"] .inv-actions, section[data-page="jobs"] .inv-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; direction:rtl; } section[data-page="invoices"] .inv-actions .btn, section[data-page="jobs"] .inv-actions .btn{width:100%;} } /* v36 - system theme reliability + full-width pages when sidebar is collapsed */ #btnThemeToggle .btn__text{ white-space:nowrap; } /* ---------------- v201: local super admin panel ---------------- */ .adminNotice{ border-color: color-mix(in oklab, var(--line) 82%, var(--accent, #FE5707) 18%); } .adminMiniGrid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; } .adminMiniStat{ border:1px solid var(--line); background: color-mix(in oklab, var(--panel) 92%, #000 8%); border-radius:14px; padding:10px 12px; min-width:0; } .adminMiniStat span{ display:block; color:var(--muted); font-size:12px; margin-bottom:4px; } .adminMiniStat strong{ display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .adminCard{ min-width:0; } .adminInlineSelect{ width:auto; min-width:150px; height:36px; border-radius:12px; padding:0 10px; } .adminList{ display:grid; gap:8px; } .adminListItem{ border:1px solid var(--line); border-radius:14px; padding:10px 12px; background: color-mix(in oklab, var(--panel) 94%, #000 6%); display:grid; gap:6px; min-width:0; } .adminListItem > span, .adminListItem small{ color:var(--muted); line-height:1.7; } .adminKV{ display:grid; gap:7px; } .adminKV > div{ display:flex; justify-content:space-between; gap:10px; border:1px dashed var(--line); border-radius:12px; padding:8px 10px; } .adminKV span{ color:var(--muted); } .adminKV strong{ text-align:left; } .adminPerfLog{ border:1px dashed var(--line); border-radius:14px; padding:10px 12px; color:var(--muted); font-size:12px; line-height:1.8; max-height:150px; overflow:auto; } .adminReplyBox{ border:1px dashed var(--line); border-radius:13px; padding:8px; display:grid; gap:7px; background:rgba(255,255,255,.025); } .adminReplyLabel{ color:var(--muted); font-size:11px; font-weight:800; } .adminReplyInput{ width:100%; min-height:54px; resize:vertical; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04); color:var(--text); padding:8px 10px; line-height:1.7; outline:none; } .adminReplyInput:focus{ outline:2px solid rgba(254,87,7,.26); outline-offset:2px; } .adminReplyMeta{ color:var(--muted); } .adminPager{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); } .adminPager__info, .adminPager__page{ color:var(--muted); font-size:12px; white-space:nowrap; } html[data-theme="light"] .adminMiniStat, html[data-theme="light"] .adminListItem{ background: color-mix(in oklab, #fff 96%, var(--line) 4%); } html[data-theme="light"] .adminReplyBox{ background: color-mix(in oklab, #fff 97%, var(--line) 3%); } @media (max-width: 1050px){ .adminMiniGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ .adminMiniGrid{ grid-template-columns: 1fr; } .adminInlineSelect{ width:100%; } } /* ---------------- v206: admin panel tabs + cleaner admin dashboard ---------------- */ .adminTabs{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:14px 0; padding:8px; border:1px solid var(--line); border-radius:18px; background: color-mix(in oklab, var(--panel) 92%, #000 8%); } .adminTab{ appearance:none; border:1px solid transparent; background:transparent; color:var(--muted); border-radius:14px; padding:9px 14px; cursor:pointer; font-weight:900; font-size:13px; transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .adminTab:hover{ color:var(--text); background:rgba(255,255,255,.06); } .adminTab.is-active{ color:var(--text); border-color: color-mix(in oklab, var(--accent, #FE5707) 50%, var(--line) 50%); background: color-mix(in oklab, var(--panel) 76%, var(--accent, #FE5707) 24%); box-shadow:0 10px 24px rgba(0,0,0,.12); } .adminTabPanel{ animation:adminPanelIn .18s ease both; } @keyframes adminPanelIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } } .adminGuideGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:14px; } .adminGuideCard{ text-align:right; border:1px solid var(--line); border-radius:16px; padding:12px; background:color-mix(in oklab, var(--panel) 94%, #000 6%); color:var(--text); cursor:pointer; display:grid; gap:5px; min-height:78px; } .adminGuideCard:hover{ border-color: color-mix(in oklab, var(--accent, #FE5707) 45%, var(--line) 55%); background:color-mix(in oklab, var(--panel) 82%, var(--accent, #FE5707) 18%); } .adminGuideCard span{ color:var(--muted); font-size:12px; line-height:1.7; } .adminSteps{ display:grid; gap:10px; margin-top:10px; } .adminSteps > div{ display:flex; gap:10px; align-items:flex-start; border:1px dashed var(--line); border-radius:14px; padding:10px 12px; } .adminSteps b{ width:24px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in oklab, var(--accent, #FE5707) 22%, transparent); color:var(--text); flex:0 0 auto; } .adminSteps span{ color:var(--muted); line-height:1.7; } html[data-theme="light"] .adminTabs, html[data-theme="light"] .adminGuideCard{ background: color-mix(in oklab, #fff 96%, var(--line) 4%); } @media (max-width: 760px){ .adminTabs{ overflow:auto; flex-wrap:nowrap; padding:6px; } .adminTab{ white-space:nowrap; flex:0 0 auto; } .adminGuideGrid{ grid-template-columns:1fr; } } .footerLinkChip--gift{ gap:6px; position:relative; } #accPlanInlineMsg{ margin-top:0 !important; min-height:22px; line-height:1.7; } /* ---------------- v208: purchase gift icon position + invoice toggle cleanup ---------------- */ .giftIconSvg{ width:12px; height:12px; display:block; stroke-width:2.25; } .nav__item--gift{ overflow:visible; } .nav__item--gift .nav__content{ padding-inline-end:10px; } .footerLinkChip--gift{ gap:6px; position:relative; overflow:visible; } .nav__item--gift{ overflow:hidden; } .nav__item--gift .nav__content{ padding-inline-end:26px; } .footerLinkChip--gift{ padding-inline-end:30px; } .adminKV--compact{ grid-template-columns:repeat(2, minmax(0,1fr)); } @media (max-width: 700px){ .adminKV--compact{ grid-template-columns:1fr; } } .nav__item[data-nav="acc-plan"] .nav__content{ padding-inline-end:0 !important; } .footerLinkChip--gift{ overflow:visible !important; } /* ---------------- v211: discount code checkout + admin coupon builder ---------------- */ /* ---------------- v214: checkout summary cleanup + final amount emphasis ---------------- */ .adminSalesSummary{ margin-bottom:10px; } .adminSalesSummary > div:first-child strong{ font-size:18px; color:var(--text); } /* ---------------- v57: prettier payment success popup + correction queue title ---------------- */ /* ---------------- v59: richer payment success popup ---------------- */ /* v71 - وضعیت‌ها جمع‌وجور، تغییر دستی سامانه بدون دستکاری وضعیت صف، و نمایش ساده الگو */ .jobQueueListTable .jobQStatusCell, .jobQueueListTable .jobQRemoteCell{ min-width:92px!important; width:92px!important; } .jobQueueListTable .jobQStatusCell .jobPill, .jobQueueListTable .jobQRemoteCell .jobRemoteManualSelect{ width:92px!important; min-width:92px!important; max-width:92px!important; height:28px!important; min-height:28px!important; padding-top:3px!important; padding-bottom:3px!important; border-radius:999px!important; font-size:11.5px!important; line-height:1.15!important; box-sizing:border-box!important; } .jobQueueListTable .jobQStatusCell .jobPill{ padding-inline:8px!important; } .jobQueueListTable .jobQRemoteCell .jobRemoteManualSelect{ padding-inline-start:18px!important; padding-inline-end:8px!important; appearance:auto; } .jobQueueListTable .jobQStatusCell small, .jobQueueListTable .jobQRemoteCell small{ font-size:9.5px!important; margin-top:2px!important; } .invSubjectCell small{ display:block!important; max-width:110px!important; margin-top:2px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--muted2)!important; font-size:10px!important; font-weight:750!important; line-height:1.25!important; } /* v72 - وضعیت سامانه فقط ردیف صف را تغییر بدهد، انتظار استعلام زرد باشد، متن کپسول کامل دیده شود */ .jobQueueListTable .jobQStatusCell, .jobQueueListTable .jobQRemoteCell{ min-width:132px!important; width:132px!important; } .jobQueueListTable .jobQStatusCell .jobPill, .jobQueueListTable .jobQRemoteCell .jobRemoteManualSelect{ width:132px!important; min-width:132px!important; max-width:132px!important; height:28px!important; min-height:28px!important; padding-top:3px!important; padding-bottom:3px!important; border-radius:999px!important; font-size:11px!important; line-height:1.15!important; box-sizing:border-box!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; } .jobQueueListTable .jobQStatusCell .jobPill{ padding-inline:10px!important; } .jobQueueListTable .jobQRemoteCell .jobRemoteManualSelect{ padding-inline-start:20px!important; padding-inline-end:20px!important; text-align:center!important; text-align-last:center!important; direction:rtl!important; } .jobQRemoteCell .jobPill--remote{ max-width:none!important; overflow:visible!important; text-overflow:clip!important; } .jobPill.is-pending, .jobRemoteManualSelect.is-pending{ color:#fbbf24!important; border-color:rgba(245,158,11,.52)!important; background:rgba(245,158,11,.14)!important; } .jobRemoteManualSelect.is-pending:focus{ box-shadow:0 0 0 3px rgba(245,158,11,.14)!important; } /* v74 - نوع الگو وسط زیر موضوع بماند، اما متن موضوع با ستون‌های کناری هم‌ردیف شود */ .invSubjectCell{ text-align:center!important; vertical-align:top!important; padding-top:8px!important; line-height:1.2!important; } .invSubjectCell span{ display:block!important; width:100%!important; text-align:center!important; margin-inline:auto!important; line-height:1.2!important; } .invSubjectCell small{ display:block!important; width:100%!important; max-width:none!important; text-align:center!important; margin-inline:auto!important; margin-top:2px!important; padding:0!important; border:0!important; background:transparent!important; } /* Immutable fields while editing a sent invoice correction */ .page--send.is-sent-correction-lock .immutableFieldWrap, .page--send.is-sent-correction-lock .immutableField{ opacity:.55; filter:grayscale(.25); } .page--send.is-sent-correction-lock .immutableFieldWrap input, .page--send.is-sent-correction-lock .immutableFieldWrap select, .page--send.is-sent-correction-lock .immutableFieldWrap textarea, .page--send.is-sent-correction-lock .immutableFieldWrap button, .page--send.is-sent-correction-lock .immutableField{ cursor:not-allowed !important; } .page--send.is-sent-correction-lock input.immutableField, .page--send.is-sent-correction-lock textarea.immutableField, .page--send.is-sent-correction-lock .immutableFieldWrap input, .page--send.is-sent-correction-lock .selectx.immutableFieldWrap .selectx-btn{ background:rgba(148,163,184,.10) !important; border-color:rgba(148,163,184,.22) !important; } .page--send.is-sent-correction-lock #buyerBox.immutableFieldWrap{ border-color:rgba(148,163,184,.20); } .page--send.is-sent-correction-lock .selectx.immutableFieldWrap .selectx-btn{ opacity:1; } /* Bulk action bars: keep selection actions visible and dim them until rows are selected. */ .bulkActions .bulkSelectionLabel.is-muted, .bulkActions .bulkSelectionCount.is-muted, #invoiceTable .bulkSelectionLabel.is-muted, #invoiceTable .bulkSelectionCount.is-muted{ opacity:.48; } .bulkActions .btn:disabled, #invoiceTable .btn:disabled{ filter:saturate(.72); } .helpBtn .btn__ico svg{width:18px;height:18px;} /* v273: official invoice requests admin table */ .adminOfficialInvoiceTable{ min-width:1080px; } .adminOfficialInvoiceTable .mono{ direction:ltr; unicode-bidi:plaintext; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .adminOfficialInvoiceAddress{ max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---------------- v103: support icon + footer identity + better dashboard + long item titles ---------------- */ .sidebar__footerBottom.sidebar__footerBottom--text{ display:flex !important; flex-direction:row-reverse !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; } .sidebar__footerBottom.sidebar__footerBottom--text #userNameLabel{ order:1; text-align:right !important; direction:rtl !important; unicode-bidi:plaintext !important; color:var(--text) !important; font-weight:800 !important; } .page--send .lineTitlePick{ min-width:240px !important; } .page--send .table--lines input[data-f="sstt"]{ min-width:240px !important; width:300px !important; } .page--send .lineTitlePick > .in, .page--send .inAffix--line > .in{ padding-left:84px !important; padding-right:12px !important; text-align:right !important; direction:rtl !important; unicode-bidi:plaintext !important; } .page--send .lineTitlePick > .inAffix__btn{ min-width:52px; padding-inline:8px !important; } @media (max-width: 1280px){ .page--send .table--lines input[data-f="sstt"]{ width:260px !important; } } .dashHeroHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; padding:16px 18px; border:1px solid rgba(148,163,184,.14); border-radius:18px; background:linear-gradient(135deg, rgba(15,23,42,.95), rgba(12,29,67,.88)); box-shadow:0 16px 40px rgba(2,6,23,.18); } .dashHeroHead h1{ margin:0; } .dashHeroLead{ margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.8; } .dashGrid{ gap:18px !important; align-items:stretch; } .dashCard{ padding:18px !important; border-radius:20px !important; border:1px solid rgba(148,163,184,.14) !important; background: radial-gradient(circle at top right, rgba(var(--accent-rgb),.11), transparent 34%), linear-gradient(180deg, rgba(15,23,42,.98), rgba(11,18,36,.98)) !important; box-shadow:0 18px 42px rgba(2,6,23,.18) !important; } .dashCardHead{ align-items:flex-start !important; gap:12px; margin-bottom:14px; } .dashCardHead h2{ margin:0; font-size:20px; } .dashStats{ gap:12px !important; } .dashStats .statBox{ border-radius:18px; padding:16px 14px; border:1px solid rgba(148,163,184,.14); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .dashStats .statBox__label{ font-size:12px; color:var(--muted); } .dashStats .statBox__value{ margin-top:8px; font-size:22px; font-weight:900; letter-spacing:-.02em; } .dashChartBox, .dashCard .chartBox{ margin-top:14px; padding:14px; border-radius:18px; border:1px solid rgba(148,163,184,.12); background:rgba(255,255,255,.02); } .dashCard .chartBox__title{ margin:0 0 12px; font-size:14px; } .topItems{ display:grid; gap:10px; } .topItem{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; border:1px solid rgba(148,163,184,.12); background:rgba(255,255,255,.028); } .topItem__name{ font-weight:800; line-height:1.7; overflow-wrap:anywhere; } .topItem__meta{ margin-top:3px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; } .topItem__val{ color:var(--accent); font-weight:900; white-space:nowrap; } .eventList{ display:grid; gap:10px; } .eventItem{ padding:14px 14px 12px; border-radius:16px; border:1px solid rgba(148,163,184,.12); background:rgba(255,255,255,.024); transition:transform .15s ease, border-color .15s ease, background-color .15s ease; } .eventItem:hover{ transform:translateY(-1px); border-color:rgba(var(--accent-rgb),.28); background:rgba(255,255,255,.04); } .eventItem__title{ font-weight:800; margin-bottom:4px; } .eventItem__msg{ color:var(--muted); line-height:1.75; } .eventItem__meta{ margin-top:8px; font-size:12px; color:var(--muted); } .dashCounters{ gap:8px !important; flex-wrap:wrap; } .dashQuick{ margin-top:14px; gap:10px !important; flex-wrap:wrap; } .dashQuick .btn{ flex:1 1 140px; min-height:42px; border-radius:14px; font-weight:800; } @media (max-width: 980px){ .dashHeroHead{ padding:14px; border-radius:16px; } .dashCard{ padding:14px !important; border-radius:18px !important; } .dashStats .statBox__value{ font-size:19px; } } /* ---------------- v104: lightweight dashboard redesign + support icon polish ---------------- */ .dashboardPro{ --dash-soft: rgba(255,255,255,.045); --dash-softer: rgba(255,255,255,.026); --dash-line: rgba(148,163,184,.15); } .dashProHero{ position:relative; overflow:hidden; display:flex; align-items:stretch; justify-content:space-between; gap:18px; min-height:142px; margin-bottom:16px; padding:22px; border-radius:26px; border:1px solid var(--dash-line); background: radial-gradient(circle at 15% 15%, rgba(34,197,94,.18), transparent 34%), radial-gradient(circle at 92% 22%, rgba(var(--accent-rgb),.24), transparent 36%), linear-gradient(135deg, rgba(15,23,42,.96), rgba(8,13,26,.96)); box-shadow:0 20px 48px rgba(2,6,23,.20); } .dashProHero__bg{ position:absolute; inset:auto -60px -130px auto; width:270px; height:270px; border-radius:999px; border:42px solid rgba(255,255,255,.045); pointer-events:none; } .dashProHero__main, .dashProHero__actions{position:relative;z-index:1;} .dashProHero__main{max-width:720px;} .dashProHero__eyebrow{ display:inline-flex; align-items:center; gap:7px; margin-bottom:10px; padding:5px 10px; border-radius:999px; color:rgba(255,255,255,.82); background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.09); font-size:12px; font-weight:800; } .dashProHero h1{ margin:0; font-size:clamp(24px, 3.4vw, 38px); letter-spacing:-.04em; } .dashboardPro .dashHeroLead{ max-width:680px; margin:10px 0 0; color:rgba(255,255,255,.70); font-size:14px; line-height:1.9; } .dashHeroIdentity{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; } .dashHeroIdentity__item{ min-width:180px; display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.08); backdrop-filter:blur(8px); } .dashHeroIdentity__item span{ color:rgba(255,255,255,.72); font-size:12px; font-weight:700; } .dashHeroIdentity__item strong{ color:#fff; font-size:15px; font-weight:900; line-height:1.6; } .dashProHero__actions{ display:flex; align-items:flex-start; justify-content:flex-end; gap:10px; flex-wrap:wrap; min-width:220px; } .dashProHero__actions .btn{ min-height:38px; border-radius:14px; font-weight:900; } .dashProStats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:16px; } .dashMetric{ min-width:0; display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:start; gap:12px; padding:16px; border-radius:22px; border:1px solid var(--dash-line); background:linear-gradient(180deg, var(--dash-soft), var(--dash-softer)); box-shadow:0 14px 36px rgba(2,6,23,.13), inset 0 1px 0 rgba(255,255,255,.04); } .dashMetric__icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:16px; color:var(--accent); background:rgba(var(--accent-rgb),.13); border:1px solid rgba(var(--accent-rgb),.18); } .dashMetric__icon svg{width:21px;height:21px;} .dashMetric--vat .dashMetric__icon{ color:#22c55e; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.18); } .dashMetric--count .dashMetric__icon{ color:#a78bfa; background:rgba(167,139,250,.12); border-color:rgba(167,139,250,.18); } .dashMetric--total .dashMetric__icon{ color:#f59e0b; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.18); } .dashboardPro .statBox__label{ color:var(--muted); font-size:12px; font-weight:800; } .dashboardPro .statBox__value{ margin-top:6px; font-size:clamp(19px, 2.1vw, 25px); font-weight:950; letter-spacing:-.035em; overflow-wrap:anywhere; } .dashMetric__hint{ min-height:18px; margin-top:5px; color:var(--muted2); font-size:11.5px; line-height:1.6; } .dashProLayout{ display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(300px, .65fr); gap:16px; align-items:start; } .dashPanel{ min-width:0; border-radius:24px; border:1px solid var(--dash-line); background: radial-gradient(circle at top right, rgba(var(--accent-rgb),.055), transparent 36%), linear-gradient(180deg, var(--dash-soft), var(--dash-softer)); box-shadow:0 16px 42px rgba(2,6,23,.14), inset 0 1px 0 rgba(255,255,255,.035); padding:16px; } .dashPanel--chart, .dashPanel--top{grid-column:1;} .dashPanel--queue, .dashPanel--events{grid-column:2;} .dashPanel__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; } .dashPanel__head h2{ margin:0; font-size:18px; letter-spacing:-.02em; } .dashPanel__head p{ margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.7; } .dashPanel__head--compact{margin-bottom:10px;} .dashCanvasWrap{ position:relative; min-height:270px; padding:6px 2px 0; } .dashCanvasWrap canvas{ width:100%; height:270px; display:block; } .dashQueueCards{ display:grid; gap:10px; } .dashQueueCard{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:18px; background:rgba(255,255,255,.035); border:1px solid rgba(148,163,184,.13); } .dashQueueCard span{ color:var(--muted); font-size:12px; font-weight:800; } .dashQueueCard strong{ font-size:22px; line-height:1; font-weight:950; } .dashQueueCard--warn{ background:rgba(var(--danger-rgb),.08); border-color:rgba(var(--danger-rgb),.16); } .dashQueueCard--warn strong{color:var(--danger);} .dashQuick--stack{ display:grid !important; grid-template-columns:1fr 1fr; margin-top:12px !important; gap:10px !important; } .dashQuick--stack .btn{ min-height:40px; border-radius:15px; } .topItems--pro{display:grid;gap:10px;} .dashboardPro .topItem{ min-width:0; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px; align-items:center; padding:12px 13px; border-radius:18px; border:1px solid rgba(148,163,184,.13); background:rgba(255,255,255,.032); } .dashboardPro .topItem__name{ font-weight:900; line-height:1.65; overflow-wrap:anywhere; } .dashboardPro .topItem__meta{ margin-top:4px; color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; } .dashboardPro .topItem__val{ color:var(--accent2); font-weight:950; white-space:nowrap; } .eventList--pro{ display:grid; gap:10px; max-height:390px; overflow:auto; padding-left:2px; } .dashboardPro .eventItem{ padding:12px 13px; border-radius:18px; border:1px solid rgba(148,163,184,.13); border-right-width:4px; background:rgba(255,255,255,.032); box-shadow:none; transition:transform .14s ease, border-color .14s ease, background-color .14s ease; } .dashboardPro .eventItem:hover{ transform:translateY(-1px); border-color:rgba(var(--accent-rgb),.26); background:rgba(255,255,255,.05); } .dashboardPro .eventItem__title{ margin-bottom:4px; font-weight:900; } .dashboardPro .eventItem__msg{ color:var(--muted); line-height:1.75; } .dashboardPro .eventItem__meta{ margin-top:7px; color:var(--muted2); font-size:12px; } .dashboardPro .muted.small{ padding:12px; border-radius:16px; border:1px dashed rgba(148,163,184,.18); background:rgba(255,255,255,.025); } html[data-theme="light"] .dashboardPro, body.theme-light .dashboardPro{ --dash-soft: rgba(255,255,255,.96); --dash-softer: rgba(255,255,255,.82); --dash-line: rgba(15,23,42,.10); } html[data-theme="light"] .dashProHero, body.theme-light .dashProHero{ background: radial-gradient(circle at 15% 15%, rgba(34,197,94,.12), transparent 35%), radial-gradient(circle at 92% 22%, rgba(var(--accent-rgb),.16), transparent 37%), linear-gradient(135deg, #ffffff, #fff4ee); box-shadow:0 18px 42px rgba(2,6,23,.08); } html[data-theme="light"] .dashProHero__eyebrow, body.theme-light .dashProHero__eyebrow{ color:rgba(15,23,42,.70); background:rgba(254,87,7,.08); border-color:rgba(254,87,7,.12); } html[data-theme="light"] .dashboardPro .dashHeroLead, body.theme-light .dashboardPro .dashHeroLead{ color:var(--muted); } html[data-theme="light"] .dashHeroIdentity__item, body.theme-light .dashHeroIdentity__item{ background:rgba(255,255,255,.72); border-color:rgba(15,23,42,.08); } html[data-theme="light"] .dashHeroIdentity__item span, body.theme-light .dashHeroIdentity__item span{ color:rgba(15,23,42,.58); } html[data-theme="light"] .dashHeroIdentity__item strong, body.theme-light .dashHeroIdentity__item strong{ color:#0f172a; } html[data-theme="light"] .dashMetric, body.theme-light .dashMetric, html[data-theme="light"] .dashPanel, body.theme-light .dashPanel{ box-shadow:0 14px 34px rgba(2,6,23,.07), inset 0 1px 0 rgba(255,255,255,.9); } html[data-theme="light"] .dashQueueCard, body.theme-light .dashQueueCard, html[data-theme="light"] .dashboardPro .topItem, body.theme-light .dashboardPro .topItem, html[data-theme="light"] .dashboardPro .eventItem, body.theme-light .dashboardPro .eventItem{ background:rgba(2,6,23,.025); border-color:rgba(15,23,42,.08); } @media (max-width: 1180px){ .dashProStats{grid-template-columns:repeat(2, minmax(0, 1fr));} .dashProLayout{grid-template-columns:1fr;} .dashPanel--chart, .dashPanel--top, .dashPanel--queue, .dashPanel--events{grid-column:auto;} } @media (max-width: 720px){ .dashProHero{ flex-direction:column; padding:16px; border-radius:22px; } .dashProHero__actions{ min-width:0; justify-content:stretch; } .dashProHero__actions .btn{flex:1 1 130px;} .dashProStats{grid-template-columns:1fr;} .dashMetric{padding:14px;border-radius:20px;} .dashPanel{padding:14px;border-radius:20px;} .dashCanvasWrap{min-height:230px;} .dashCanvasWrap canvas{height:230px;} } /* Password reveal inside login/register forms */ .passwordRevealField{position:relative;display:flex;align-items:center;width:100%;} .passwordRevealField .input{width:100%;padding-left:44px;} .passwordRevealBtn{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:12px;background:color-mix(in srgb,var(--card) 72%,var(--muted) 10%);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease;} .passwordRevealBtn svg{width:18px;height:18px;} .passwordRevealBtn:hover,.passwordRevealBtn.is-active{color:var(--text);background:color-mix(in srgb,var(--primary) 14%,var(--card));} .passwordRevealBtn.is-active::after{content:"";position:absolute;width:21px;height:2px;border-radius:999px;background:currentColor;transform:rotate(-42deg);box-shadow:0 0 0 1px color-mix(in srgb,var(--card) 80%,transparent);} .passwordRevealBtn:active{transform:translateY(-50%) scale(.96);} .accountInfoList{ margin-top:12px; display:grid; grid-template-columns:1fr; gap:8px; } .accountInfoItem{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.03); min-width:0; } .accountInfoItem > span:last-child, .accountInfoItem > strong:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; unicode-bidi:plaintext; text-align:left; } .accountInfoItem .muted{ flex:0 0 auto; } .sidebar__footerBottom.sidebar__footerBottom--text{ direction:rtl !important; display:grid !important; grid-template-columns:1fr !important; gap:6px !important; margin-top:10px !important; } .sidebar__footerBottom.sidebar__footerBottom--text #userNameLabel::before{ content:"نام کاربری"; } .sidebar__footerBottom.sidebar__footerBottom--text #userNameLabel{ order:1 !important; } /* v119 */ .sidebar__footer{padding-bottom:10px;} html:not([data-theme="light"]) .brandLogoImg--dark{display:block;} @media (max-width:520px){.loginGate__logo{width:min(230px, 84%);}.loginGate__logoWrap{margin-bottom:8px;}} /* v123: admin UI must be invisible for normal users */ [data-superadmin-only], [data-superadmin-page]{ display:none !important; } body.is-admin-eligible [data-superadmin-only], body.is-admin-unlocked [data-superadmin-page]{ display:revert !important; } /* Samin Homet brand overrides */ .brand--samin{display:flex;align-items:center;gap:10px;min-width:0;} .brandSamin__mark{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#FE5707;color:#080808;font:900 20px/1 ui-sans-serif,system-ui,sans-serif;box-shadow:0 8px 24px rgba(254,87,7,.22);} .brandSamin__text{font-weight:950;font-size:14px;white-space:nowrap;color:var(--text);letter-spacing:-.2px;} .loginGate__logo--mark{width:72px;height:72px;display:block;filter:drop-shadow(0 12px 26px rgba(254,87,7,.24));} .loginGate__brand{color:#FE5707 !important;font-weight:900;} html[data-theme="dark"] .sidebar, body:not(.theme-light) .sidebar{background:linear-gradient(180deg,#080808 0%,#0d0d0d 100%);} html[data-theme="dark"] .btn--pri, body:not(.theme-light) .btn--pri{color:#090909;} /* ========================================================= VASET HOMET SAMIN — FORMAL UI 407 Fixed light-only visual system. No theme/fullscreen/dashboard UI. ========================================================= */ :root{ color-scheme:light !important; --bg:#f3f4f6 !important; --bg2:#eceff1 !important; --panel:#101112 !important; --card:#ffffff !important; --border:#d9dde3 !important; --border-rgb:217,221,227 !important; --primary-rgb:254,87,7 !important; --primary-200:#ff8b52 !important; --text:#17191c !important; --muted:#68707a !important; --muted2:#8a929c !important; --accent:#FE5707 !important; --accent-rgb:254,87,7 !important; --accent2:#202327 !important; --link:#d94800 !important; --shadow:0 8px 24px rgba(17,24,39,.07) !important; --shadow-in:none !important; --radius:8px !important; --font:"Tahoma","Segoe UI",Arial,sans-serif !important; } html,body{background:#f3f4f6 !important;color:#17191c !important;font-family:var(--font) !important;} body{min-width:0;} [hidden]{display:none !important;} .layout{ display:grid !important; grid-template-columns:252px minmax(0,1fr) !important; min-height:100vh !important; background:#f3f4f6 !important; } .sidebar{ background:#101112 !important; color:#f6f6f6 !important; border:0 !important; border-left:0 !important; padding:0 !important; position:sticky !important; top:0 !important; height:100vh !important; display:flex !important; flex-direction:column !important; gap:0 !important; box-shadow:6px 0 24px rgba(0,0,0,.08) !important; overflow:auto !important; z-index:30; } .brandRow{ min-height:92px !important; padding:22px 20px 18px !important; border-bottom:1px solid rgba(255,255,255,.10) !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; } .brandWordmark{display:flex !important;flex-direction:column !important;gap:5px !important;position:relative !important;padding-right:14px !important;} .brandWordmark::before{content:"" !important;position:absolute !important;right:0 !important;top:1px !important;bottom:1px !important;width:4px !important;background:#FE5707 !important;border-radius:1px !important;} .brandWordmark__name{font-size:16px !important;font-weight:800 !important;letter-spacing:-.2px !important;color:#fff !important;} .brandWordmark__sub{font-size:10px !important;font-weight:500 !important;color:#aeb4bb !important;letter-spacing:.1px !important;} .nav{display:flex !important;flex-direction:column !important;padding:16px 12px 24px !important;gap:4px !important;overflow:visible !important;} .nav__item,.navGroup__btn{ width:100% !important; min-height:44px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; border:0 !important; border-radius:6px !important; background:transparent !important; color:#c8cdd2 !important; box-shadow:none !important; padding:0 12px !important; font-size:13px !important; font-weight:600 !important; cursor:pointer !important; transition:background .15s ease,color .15s ease !important; transform:none !important; } .nav__item::before,.nav__item::after{display:none !important;} .nav__item:hover,.navGroup__btn:hover{background:#1a1c1e !important;color:#fff !important;transform:none !important;box-shadow:none !important;} .nav__item.is-active{background:#FE5707 !important;color:#111 !important;font-weight:800 !important;} .nav__item--sub{margin-right:8px !important;width:calc(100% - 8px) !important;font-size:12px !important;} .nav__content{display:flex !important;align-items:center !important;gap:11px !important;min-width:0 !important;} .nav__ico,.uiIcon{width:18px !important;height:18px !important;display:inline-block !important;vertical-align:middle !important;fill:none !important;stroke:currentColor !important;stroke-width:1.8 !important;flex:0 0 18px !important;} .navGroup__chev .uiIcon{width:14px !important;height:14px !important;transition:transform .15s ease !important;} .navGroup.is-open .navGroup__chev .uiIcon{transform:rotate(90deg) !important;} .navGroup__panel{padding-top:4px !important;} .main{padding:0 28px 48px !important;min-width:0 !important;background:#f3f4f6 !important;} .workspaceHeader{ height:66px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 -28px 26px !important; padding:0 28px !important; background:#fff !important; border-bottom:1px solid #e1e4e8 !important; } .workspaceHeader__title{font-size:14px !important;font-weight:800 !important;color:#17191c !important;} .workspaceHeader__meta{font-size:11px !important;color:#7b828b !important;} .page{max-width:1500px !important;margin:0 auto !important;} .page>h1,.pageHeader h1{font-size:21px !important;font-weight:800 !important;color:#16181b !important;margin:0 0 18px !important;letter-spacing:-.4px !important;} .card{ background:#fff !important; color:#17191c !important; border:1px solid #dde1e6 !important; border-radius:8px !important; box-shadow:0 2px 10px rgba(17,24,39,.04) !important; backdrop-filter:none !important; padding:18px !important; } .card h2{font-size:14px !important;font-weight:800 !important;color:#202327 !important;margin:0 0 14px !important;} .card h3{color:#32363b !important;} .grid2,.grid3{gap:16px !important;} .formsep{color:#d94800 !important;background:#fff4ef !important;border:1px solid #ffd7c4 !important;border-radius:5px !important;font-weight:800 !important;} label{color:#5c646d !important;font-size:11px !important;font-weight:600 !important;} input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{ width:100%; background:#fff !important; color:#17191c !important; border:1px solid #cfd4da !important; border-radius:6px !important; box-shadow:none !important; min-height:40px !important; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,select:focus,textarea:focus{ outline:0 !important; border-color:#FE5707 !important; box-shadow:0 0 0 3px rgba(254,87,7,.10) !important; } select,option{background:#fff !important;color:#17191c !important;} .btn{ min-height:38px !important; border-radius:6px !important; border:1px solid #e14d05 !important; background:#FE5707 !important; color:#111 !important; box-shadow:none !important; font-weight:800 !important; padding:8px 13px !important; transform:none !important; } .btn:hover{background:#e94d00 !important;filter:none !important;transform:none !important;box-shadow:none !important;} .btn::after{display:none !important;} .btn--ghost{background:#fff !important;color:#30343a !important;border:1px solid #cfd4da !important;} .btn--ghost:hover{background:#f5f6f7 !important;border-color:#aeb5bd !important;} .btn--danger{background:#fff !important;color:#a81f1f !important;border-color:#e2a8a8 !important;} .btn--danger:hover{background:#fff3f3 !important;} .tablewrap{border:1px solid #dde1e6 !important;border-radius:7px !important;background:#fff !important;box-shadow:none !important;overflow:auto !important;} .table{color:#24272b !important;background:#fff !important;} .table thead th{background:#f1f3f5 !important;color:#4c535b !important;font-weight:800 !important;border-bottom:1px solid #d7dce1 !important;} .table td{border-bottom:1px solid #eceff2 !important;} .table tbody tr:hover{background:#fff7f2 !important;} .out,.msgbox{background:#f7f8f9 !important;color:#262a2f !important;border-color:#dce1e5 !important;border-radius:6px !important;} .modal__backdrop{background:rgba(10,10,10,.55) !important;backdrop-filter:none !important;} .modal__panel{background:#fff !important;color:#17191c !important;border:0 !important;border-radius:8px !important;box-shadow:0 18px 55px rgba(0,0,0,.20) !important;} .modal__header,.modal__head{border-bottom:1px solid #e3e6e9 !important;background:#fafafa !important;} .statusToast{border-radius:6px !important;box-shadow:0 12px 30px rgba(0,0,0,.16) !important;} .loginGate{ position:fixed !important; inset:0 !important; z-index:5000 !important; display:grid !important; place-items:center !important; padding:24px !important; background:#eceff1 !important; overflow:auto !important; } .loginGate[hidden]{display:none !important;} .loginGate__bg{ position:absolute !important; inset:0 !important; background:linear-gradient(135deg,#101112 0 47.8%,#FE5707 47.8% 50.2%,#eceff1 50.2% 100%) !important; opacity:1 !important; } .loginGate__card{ position:relative !important; z-index:1 !important; width:min(420px,calc(100vw - 32px)) !important; background:#fff !important; border:1px solid #d9dde2 !important; border-radius:8px !important; box-shadow:0 24px 60px rgba(0,0,0,.18) !important; padding:30px !important; color:#17191c !important; } .loginGate__brand{font-size:14px !important;font-weight:900 !important;color:#FE5707 !important;margin-bottom:7px !important;text-align:right !important;} .loginGate__title{font-size:24px !important;font-weight:900 !important;color:#111 !important;margin-bottom:6px !important;text-align:right !important;} .loginGate__hint{color:#707780 !important;font-size:12px !important;margin-bottom:22px !important;text-align:right !important;} .loginGate__form{display:grid !important;gap:14px !important;} .loginGate__form .field{display:grid !important;gap:7px !important;} .passwordRevealField{position:relative !important;display:flex !important;align-items:center !important;} .passwordRevealField .input{padding-left:48px !important;} .passwordRevealBtn{position:absolute !important;left:4px !important;top:4px !important;bottom:4px !important;width:40px !important;border:0 !important;background:transparent !important;color:#676e76 !important;display:grid !important;place-items:center !important;cursor:pointer !important;} .passwordRevealBtn .uiIcon{width:20px !important;height:20px !important;} .filepick,input[type="file"]{background:#fafbfb !important;border-color:#cfd4da !important;border-radius:6px !important;color:#444 !important;} .sendDock{background:#fff !important;border:1px solid #dfe3e7 !important;border-radius:8px !important;box-shadow:0 -4px 20px rgba(17,24,39,.06) !important;} .mobMenuBtn{background:#101112 !important;color:#fff !important;border:1px solid #292c30 !important;border-radius:6px !important;box-shadow:none !important;} .mobMenuBtn .uiIcon{width:20px !important;height:20px !important;} .adminMiniStat,.accountMetric,.statBox{background:#f8f9fa !important;border:1px solid #e1e4e8 !important;border-radius:6px !important;box-shadow:none !important;color:#24272b !important;} .muted,.smallmuted{color:#707780 !important;} @media(max-width:980px){ .layout{grid-template-columns:1fr !important;} .sidebar{position:fixed !important;top:0 !important;right:0 !important;width:min(82vw,300px) !important;height:100vh !important;transform:translateX(110%) !important;transition:transform .18s ease !important;z-index:1002 !important;} .sidebar.is-open{transform:translateX(0) !important;} .main{padding:0 14px 40px !important;} .workspaceHeader{margin:0 -14px 18px !important;padding:0 62px 0 14px !important;height:58px !important;} .workspaceHeader__meta{display:none !important;} } @media(max-width:600px){ .loginGate{padding:14px !important;} .loginGate__card{padding:22px 18px !important;} .loginGate__title{font-size:21px !important;} } /* ========================================================= VASET HOMET SAMIN — 410 UI CORRECTIONS Light dropdowns + strict hidden handling for admin page. ========================================================= */ html body .selectx-menu{ background:#ffffff !important; color:#17191c !important; border:1px solid #cfd4da !important; box-shadow:0 12px 28px rgba(17,24,39,.14) !important; } html body .selectx-searchWrap{ background:#ffffff !important; border-bottom:1px solid #e1e4e8 !important; } html body .selectx-search{ background:#ffffff !important; color:#17191c !important; border-color:#cfd4da !important; } html body .selectx-item{color:#24272b !important;background:#fff !important;} html body .selectx-item:hover{background:#f3f4f6 !important;color:#111 !important;} html body .selectx-item.is-selected{background:#fff1e9 !important;color:#c94300 !important;font-weight:800 !important;} html body .selectx-item.is-disabled{color:#8a929c !important;} /* The admin page must obey HTML hidden; never leak below other pages. */ body.is-admin-unlocked section.page[data-superadmin-page][hidden], section.page[data-superadmin-page][hidden]{display:none !important;} body.is-admin-unlocked section.page[data-superadmin-page]:not([hidden]){display:block !important;} /* 410: all native/custom dropdown controls stay light and readable. */ html body .selectx-btn{ background:#ffffff !important; color:#17191c !important; border-color:#cfd4da !important; box-shadow:none !important; } /* ==========================================================================\n 411 — Formal module redesign\n ========================================================================== */ :root{ --411-bg:#f1f2f4; --411-surface:#ffffff; --411-line:#dfe2e6; --411-line-strong:#c9cdd3; --411-ink:#151719; --411-muted:#6f757d; --411-soft:#f7f8f9; --411-orange:#FE5707; --411-orange-dark:#d94700; --411-black:#141516; } body{background:var(--411-bg)!important;color:var(--411-ink)!important;} .main{padding-bottom:54px!important;} .page{max-width:1500px;margin:0 auto;} .modulePage{animation:moduleIn .18s ease-out;} @keyframes moduleIn{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}} .moduleHero{ display:flex;align-items:flex-end;justify-content:space-between;gap:18px; margin:0 0 18px;padding:0 0 15px;border-bottom:1px solid var(--411-line); } .moduleHero__eyebrow{font-size:10px;font-weight:900;letter-spacing:.6px;color:var(--411-orange);margin-bottom:5px;} .moduleHero__title{margin:0!important;font-size:22px!important;font-weight:900!important;letter-spacing:-.45px!important;color:var(--411-ink)!important;} .moduleHero__desc{margin:5px 0 0;color:var(--411-muted);font-size:11px;line-height:1.9;} .moduleCard,.card{ border:1px solid var(--411-line)!important;border-radius:7px!important;background:var(--411-surface)!important; box-shadow:0 1px 2px rgba(16,24,40,.025)!important;padding:0!important;overflow:visible; } .moduleCard>h2,.moduleCard>h3,.card>h2,.card>h3,.cardHeadRow{ padding:15px 17px 12px;margin:0!important;border-bottom:1px solid #eaecf0; } .moduleCard>h2,.card>h2{font-size:13px!important;font-weight:900!important;position:relative;} .moduleCard>h2::before,.card>h2::before{content:"";display:inline-block;width:3px;height:14px;background:var(--411-orange);margin-left:8px;vertical-align:-2px;border-radius:1px;} .moduleCard>.form,.card>.form,.moduleCard>#companies,.moduleCard>.tablewrap,.moduleCard>.inv-toolbar2,.moduleCard>#invoiceTable,.moduleCard>#jobsTable, .moduleCard>.accountInfoList,.moduleCard>.adminMiniGrid,.moduleCard>.adminPerfLog{margin:0;padding:17px;} .moduleCard>hr{margin:0;border:0;border-top:1px solid #eceef1;} .moduleSplit{display:grid!important;grid-template-columns:minmax(360px,430px) minmax(0,1fr)!important;gap:16px!important;align-items:start!important;} .moduleSplit--settings{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;} .moduleCard--editor{position:sticky;top:82px;} .moduleCard--content{min-width:0;} .form--pro{gap:11px 12px!important;} .formsep{ grid-column:1/-1!important;margin:4px 0 0!important;padding:0 0 8px!important;background:transparent!important; border:0!important;border-bottom:1px dashed #dfe2e6!important;border-radius:0!important;color:#3f444a!important; font-size:10px!important;font-weight:900!important;letter-spacing:.2px; } label{font-size:10.5px!important;font-weight:700!important;color:#5f656c!important;gap:6px!important;} input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,.selectx-btn{ min-height:41px!important;border-radius:5px!important;border:1px solid #cfd3d8!important;background:#fff!important;color:#17191c!important; box-shadow:none!important;padding-inline:10px!important;font-size:12px!important; } input:focus,select:focus,textarea:focus,.selectx-btn:focus{ border-color:var(--411-orange)!important;box-shadow:0 0 0 2px rgba(254,87,7,.10)!important;outline:0!important; } .selectx-menu{border-radius:5px!important;border-color:#cfd3d8!important;box-shadow:0 12px 30px rgba(0,0,0,.14)!important;padding:5px!important;} .selectx-item{border-radius:3px!important;padding:9px 10px!important;font-size:12px;} .row.col-12:has(> .btn){margin-top:4px;padding-top:10px;border-top:1px solid #f0f1f2;} .btn{ min-height:40px!important;border-radius:5px!important;padding:8px 14px!important;font-size:11.5px!important;font-weight:850!important; display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;box-shadow:none!important; transition:background .14s ease,border-color .14s ease,color .14s ease,transform .06s ease!important; } .btn:active{transform:translateY(1px)!important;} .btn__icon{width:16px!important;height:16px!important;} .btn--action{background:var(--411-black)!important;color:#fff!important;border-color:var(--411-black)!important;} .btn--action:hover{background:#292b2e!important;border-color:#292b2e!important;} .btn--utility{background:#fff!important;color:#22262a!important;border-color:#bfc4ca!important;} .btn--utility:hover{background:#f4f5f6!important;border-color:#9fa5ac!important;} .btn--subtle{background:#fff!important;color:#666d75!important;border-color:#d6d9dd!important;} .btn--dark{background:#202225!important;color:#fff!important;border-color:#202225!important;} .moduleToolbar{ display:grid!important;grid-template-columns:minmax(220px,1fr) minmax(160px,220px) auto!important;gap:10px!important; align-items:end!important;padding:14px 16px!important;background:var(--411-soft)!important;border-bottom:1px solid var(--411-line)!important; } .moduleToolbar>.form{min-width:0!important;} .moduleToolbar>.btn{height:41px!important;} .card--customersList>#customersTable,.moduleCard--content>#itemsTable{padding:0 16px 16px;} .tablewrap,.tableWrap{border:1px solid var(--411-line)!important;border-radius:5px!important;overflow:auto!important;background:#fff!important;} .table thead th{background:#f4f5f6!important;color:#454b52!important;font-size:10.5px!important;font-weight:900!important;padding:10px 9px!important;} .table td{padding:10px 9px!important;font-size:11.5px!important;border-bottom-color:#eceef0!important;} .table tbody tr:hover{background:#fff8f4!important;} /* invoices / jobs filter panel */ .moduleCard--data .inv-toolbar2{background:#fff!important;} .inv-toolbar2__row{padding:14px 16px!important;margin:0!important;gap:10px!important;} .inv-toolbar2__row--top{background:#f7f8f9!important;border-bottom:1px solid #e6e8eb!important;display:grid!important;grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(130px,.65fr))!important;} .inv-toolbar2__row--bottom{display:flex!important;justify-content:space-between!important;align-items:end!important;} .inv-dates{display:flex!important;gap:10px!important;} .inv-actions{display:flex!important;gap:7px!important;align-items:center!important;} .moduleCard--data>#invoiceTable,.moduleCard--data>#jobsTable{padding:0 16px 16px!important;} /* Invoice studio */ .modulePage--send .moduleHero{margin-bottom:12px;} .invoiceFlow{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 0 12px;background:#dfe2e6;border:1px solid #dfe2e6;border-radius:6px;overflow:hidden; } .invoiceFlow__step{background:#fff;display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 14px;color:#555c64;} .invoiceFlow__num{font:800 11px/1 "Segoe UI",sans-serif;color:var(--411-orange);min-width:24px;} .invoiceFlow__label{font-size:11px;font-weight:800;} .invSend{gap:12px!important;} .invCard{border-radius:6px!important;} .invCard--head{padding:0!important;overflow:hidden;} .invHeadGrid{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)!important;gap:0!important;} .invHeadCol{padding:0!important;} .invHeadCol+ .invHeadCol{border-right:1px solid #e3e5e8;} .invHeadCol .cardHeadRow{min-height:48px;display:flex;align-items:center;padding:13px 16px!important;background:#fafafa;} .invHeadCol .form,.invHeadCol>.buyerRow,.invHeadCol>.buyerFacts,.invHeadCol>input{margin-inline:16px;} .invHeadCol .form{padding:16px 0!important;} .buyerRow{margin-top:16px!important;} .buyerFacts{margin-top:13px!important;margin-bottom:16px!important;background:#f7f8f9!important;border:1px solid #e2e5e8!important;border-radius:5px!important;padding:5px!important;} .fact{padding:9px 10px!important;border-radius:3px!important;background:#fff!important;border:1px solid #eceef0!important;} .fact__k{font-size:9.5px!important;color:#757b82!important;} .fact__v{font-size:11.5px!important;color:#222!important;} .invCard--lines .cardHeadRow{display:flex!important;align-items:center!important;justify-content:space-between!important;background:#fff!important;} .invoiceLineAdd{min-height:36px!important;background:#1c1e20!important;color:#fff!important;border-color:#1c1e20!important;} .tableWrap--lines{margin:0 16px 16px!important;border-radius:4px!important;} .table--lines input,.table--lines select{min-height:36px!important;border-radius:4px!important;font-size:11px!important;} .invBottomGrid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:0!important;} .invBottomCol{padding:0!important;} .invBottomCol+.invBottomCol{border-right:1px solid #e4e6e9;} .invBottomCol>.cardHeadRow{background:#fafafa!important;min-height:48px;} .totals{margin:14px 16px!important;border:1px solid #e1e4e7!important;border-radius:5px!important;overflow:hidden;} .totals__row{padding:10px 12px!important;background:#fff!important;border-bottom:1px solid #edf0f2!important;} .totals__row:last-child{border-bottom:0!important;} .totals__pay{background:#17191b!important;color:#fff!important;} .invBottomCol>.form{padding:14px 16px!important;} .sendDock{ position:sticky!important;bottom:10px!important;z-index:30!important;margin:14px 14px 14px!important;padding:8px!important; background:#17191b!important;border:1px solid #17191b!important;border-radius:7px!important;box-shadow:0 10px 28px rgba(0,0,0,.18)!important; display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important; } .sendDock__group{display:flex!important;gap:7px!important;align-items:center!important;} .sendDock__group--secondary{flex-wrap:wrap!important;} .invoiceCmd{ min-height:44px!important;border-radius:4px!important;padding:8px 14px!important;border:1px solid #44484d!important; background:#26292c!important;color:#f4f5f6!important;font-size:11px!important; } .invoiceCmd:hover{background:#34373b!important;border-color:#555a60!important;} .invoiceCmd .sendDock__ic{display:grid;place-items:center;width:22px;height:22px;border-radius:3px;background:rgba(255,255,255,.06);} .invoiceCmd--save{background:#fff!important;color:#17191b!important;border-color:#fff!important;min-width:145px;} .invoiceCmd--save:hover{background:#f0f1f2!important;border-color:#f0f1f2!important;} .invoiceCmd--send{background:var(--411-orange)!important;color:#fff!important;border-color:var(--411-orange)!important;min-width:145px;} .invoiceCmd--send:hover{background:var(--411-orange-dark)!important;border-color:var(--411-orange-dark)!important;} .invoiceCmd--cancel{background:#352123!important;color:#ffd8d8!important;border-color:#6d3438!important;} .invoiceCmd--cancel:hover{background:#4a292c!important;} /* account and system */ .accountGrid{display:grid!important;grid-template-columns:minmax(0,640px)!important;} .accountInfoList{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;} .accountInfoItem{border:1px solid #e3e5e8!important;border-radius:5px!important;background:#fafafa!important;padding:12px!important;} .adminNotice{margin-bottom:12px!important;} .adminMiniGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;} .adminMiniStat{background:#fafafa!important;border-radius:5px!important;border-color:#e2e5e8!important;} @media(max-width:1100px){ .moduleSplit,.moduleSplit--settings{grid-template-columns:1fr!important;} .moduleCard--editor{position:static;} .invHeadGrid,.invBottomGrid{grid-template-columns:1fr!important;} .invHeadCol+.invHeadCol,.invBottomCol+.invBottomCol{border-right:0;border-top:1px solid #e3e5e8;} .inv-toolbar2__row--top{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .adminMiniGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} } @media(max-width:700px){ .moduleHero{padding-top:4px;} .moduleHero__title{font-size:19px!important;} .moduleSplit{gap:10px!important;} .moduleToolbar{grid-template-columns:1fr!important;} .invoiceFlow{grid-template-columns:1fr;} .invoiceFlow__step{min-height:40px;} .inv-toolbar2__row--top{grid-template-columns:1fr!important;} .inv-toolbar2__row--bottom{align-items:stretch!important;flex-direction:column!important;} .inv-dates,.inv-actions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;} .sendDock{position:static!important;display:grid!important;grid-template-columns:1fr!important;} .sendDock__group{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%;} .sendDock__group--primary{grid-template-columns:1fr!important;} .invoiceCmd{width:100%!important;min-width:0!important;} .adminMiniGrid,.accountInfoList{grid-template-columns:1fr!important;} } /* 411 final interaction refinements */ body.login-locked .layout, body.login-locked .mobMenuBtn, body.login-locked .sidebarScrim, body.login-locked .modal, body.login-locked #statusBar{ visibility:hidden!important; pointer-events:none!important; } .btn{ background:#202225!important; color:#fff!important; border-color:#202225!important; } .btn:hover{background:#303337!important;border-color:#303337!important;color:#fff!important;} .btn--ghost{ background:#fff!important; color:#34383d!important; border-color:#cfd3d8!important; } .btn--ghost:hover{background:#f5f6f7!important;border-color:#aeb4bb!important;color:#1e2124!important;} .btn--danger{ background:#fff!important; color:#a52323!important; border-color:#d8a0a0!important; } .btn--danger:hover{background:#fff4f4!important;border-color:#c97878!important;color:#8d1717!important;} .btn--sm{min-height:34px!important;padding:6px 10px!important;font-size:10.5px!important;} .btn--action{ background:var(--411-orange)!important; color:#fff!important; border-color:var(--411-orange)!important; } .btn--action:hover{background:var(--411-orange-dark)!important;border-color:var(--411-orange-dark)!important;} .invoiceCmd--save{background:#fff!important;color:#17191b!important;border-color:#fff!important;} .invoiceCmd--send{background:var(--411-orange)!important;color:#fff!important;border-color:var(--411-orange)!important;} .invoiceCmd--copy,.invoiceCmd--print{background:#2a2d30!important;color:#f4f5f6!important;border-color:#484c51!important;} .invoiceCmd--cancel{background:#352123!important;color:#ffd8d8!important;border-color:#6d3438!important;} /* ========================================================= 413 PHYSICAL PURGE + SIMPLIFIED ACTION AREAS ========================================================= */ .workspaceHeader{justify-content:flex-start!important;} .workspaceHeader__meta{display:none!important;} /* Invoice action bar: simple white toolbar instead of dark dock */ .page--send .sendDock{ position:sticky!important; bottom:10px!important; z-index:30!important; margin:14px!important; padding:10px 12px!important; background:#fff!important; border:1px solid #d9dde2!important; border-radius:6px!important; box-shadow:0 8px 22px rgba(17,24,39,.08)!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; } .page--send .sendDock__group{display:flex!important;align-items:center!important;gap:7px!important;} .page--send .invoiceCmd{ min-height:38px!important; border-radius:5px!important; padding:7px 12px!important; font-size:11px!important; background:#fff!important; color:#34383d!important; border:1px solid #cfd3d8!important; box-shadow:none!important; min-width:0!important; } .page--send .invoiceCmd:hover{background:#f5f6f7!important;border-color:#aeb4bb!important;color:#1f2225!important;} .page--send .invoiceCmd .sendDock__ic{display:none!important;} .page--send .invoiceCmd--save{ background:#202225!important;color:#fff!important;border-color:#202225!important; } .page--send .invoiceCmd--save:hover{background:#303337!important;border-color:#303337!important;color:#fff!important;} .page--send .invoiceCmd--send{ background:#FE5707!important;color:#fff!important;border-color:#FE5707!important; } .page--send .invoiceCmd--send:hover{background:#df4b00!important;border-color:#df4b00!important;color:#fff!important;} .page--send .invoiceCmd--cancel{ background:#fff!important;color:#a52323!important;border-color:#d8a0a0!important; } .page--send .invoiceCmd--cancel:hover{background:#fff4f4!important;border-color:#c97878!important;color:#8d1717!important;} /* Queue: remove dashboard-like blocks; keep one clean selection/action row */ .jobsSummary,.jobsSummary--compact{display:none!important;} .jobBulkBar--simple{ margin:0 0 10px!important; padding:8px 10px!important; min-height:46px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; background:#fff!important; border:1px solid #e0e3e7!important; border-radius:5px!important; box-shadow:none!important; } .jobBulkBar--simple .jobBulkBar__main, .jobBulkBar--simple .jobBulkBar__actions{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;} .jobBulkBar--simple .jobBulkBar__count{font-size:10.5px!important;color:#737a82!important;} .jobBulkBar--simple .jobBulkBar__count b{color:#202327!important;} .jobBulkBar--simple .btn{min-height:30px!important;padding:5px 9px!important;font-size:10px!important;} .jobEmpty{ min-height:110px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; padding:22px!important; border:1px dashed #d8dde2!important; border-radius:5px!important; background:#fff!important; color:#5f666e!important; } .jobEmpty b{display:block!important;color:#202327!important;font-size:14px!important;margin-bottom:5px!important;} .jobEmpty p{margin:0!important;font-size:11px!important;} /* ROBAX-only control center */ .controlGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px;} .controlCard{padding:0!important;overflow:hidden;} .controlCard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid #e5e7ea;background:#fafafa;} .controlCard__head h2{margin:0 0 4px!important;font-size:14px!important;color:#202327!important;} .controlCard__head p{margin:0;color:#7a8189;font-size:10.5px;line-height:1.8;} .controlForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;} .controlForm .controlSpan{grid-column:1/-1;} .controlCheck{display:flex!important;align-items:center!important;gap:8px!important;min-height:42px!important;padding:8px 10px!important;border:1px solid #e1e4e8!important;border-radius:5px!important;background:#fff!important;color:#34383d!important;} .controlCheck input{width:16px!important;height:16px!important;min-height:0!important;} .controlUsage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px 16px;} .controlUsage>div{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e4e7ea;border-radius:5px;background:#f8f9fa;padding:10px 12px;} .controlUsage span{font-size:10px;color:#747b83;} .controlUsage strong{font-size:15px;color:#202327;} .controlActions{padding:12px 16px 16px;border-top:1px solid #eceef0;display:flex;justify-content:flex-end;} .featureSwitches{display:grid;gap:0;padding:4px 16px;} .featureSwitch{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:12px 0!important;border-bottom:1px solid #eceef0!important;color:#2a2e32!important;} .featureSwitch:last-child{border-bottom:0!important;} .featureSwitch span{display:grid;gap:2px;} .featureSwitch b{font-size:11.5px;color:#24282c;} .featureSwitch small{font-size:9.5px;color:#81878d;font-weight:500;} .featureSwitch input{width:18px!important;height:18px!important;min-height:0!important;} .killCard{padding:0!important;overflow:hidden;} .killActions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px 16px 16px;} .killBtn{appearance:none;border:1px solid #e0b0b0;background:#fff8f8;color:#7e2020;border-radius:5px;padding:11px 12px;text-align:right;cursor:pointer;display:grid;gap:3px;transition:.15s ease;} .killBtn:hover{background:#fff0f0;border-color:#ca8585;} .killBtn span{font-size:11px;font-weight:900;} .killBtn small{font-size:9.5px;color:#987171;} .killBtn--restore{border-color:#9bc6a5;background:#f6fff8;color:#236b32;} .killBtn--restore:hover{background:#effbf2;border-color:#70aa7d;} .killBtn--restore small{color:#5f8c68;} @media(max-width:900px){ .controlGrid{grid-template-columns:1fr;} .killActions{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:700px){ .page--send .sendDock{position:static!important;display:grid!important;grid-template-columns:1fr!important;} .page--send .sendDock__group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;} .page--send .sendDock__group--primary{grid-template-columns:1fr!important;} .page--send .invoiceCmd{width:100%!important;} .jobBulkBar--simple{align-items:stretch!important;flex-direction:column!important;} .jobBulkBar--simple .jobBulkBar__actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;} .controlForm,.controlUsage{grid-template-columns:1fr;} .killActions{grid-template-columns:1fr;} } /* 413 - ROBAX irreversible source purge */ .purgeCard{padding:0!important;overflow:hidden;border-color:#e6c7c7!important;} .purgeNotice{margin:0 16px 14px;padding:10px 12px;border:1px solid #edc1c1;background:#fff7f7;color:#743030;border-radius:6px;font-size:10.5px;line-height:1.8;} .purgeActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 16px 16px;} .purgeBtn{appearance:none;border:1px solid #d9a5a5;background:#fffafa;color:#6f2222;border-radius:6px;padding:13px 14px;text-align:right;cursor:pointer;display:grid;gap:4px;transition:background .15s ease,border-color .15s ease,transform .08s ease;} .purgeBtn:hover{background:#fff1f1;border-color:#c77575;} .purgeBtn:active{transform:translateY(1px);} .purgeBtn span{font-size:11.5px;font-weight:900;} .purgeBtn small{font-size:9.5px;line-height:1.65;color:#936363;} .purgeBtn--critical{background:#7d1818;color:#fff;border-color:#7d1818;} .purgeBtn--critical:hover{background:#691111;border-color:#691111;} .purgeBtn--critical small{color:#f0caca;} @media(max-width:760px){.purgeActions{grid-template-columns:1fr;}}