/* ============================================================ MODERN FORM UI — গ্লোবাল আধুনিক ফর্ম স্টাইল (shop247 / lyceumSystems) সব মডিউলের ফরম, ইনপুট, সিলেক্ট, বাটন ও টেবিলে স্বয়ংক্রিয়ভাবে প্রযোজ্য ============================================================ */ :root { --mf-primary: #2563eb; --mf-primary-hover: #1d4ed8; --mf-ring: rgba(37, 99, 235, .35); --mf-radius: .75rem; --mf-transition: .2s cubic-bezier(.4, 0, .2, 1); } /* ---------- ইনপুট / সিলেক্ট / টেক্সটেরিয়া (কম specificity — মডিউলের নিজস্ব ডিজাইন অক্ষত থাকে) ---------- */ :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { border-radius: var(--mf-radius) !important; transition: border-color var(--mf-transition), box-shadow var(--mf-transition), background-color var(--mf-transition) !important; } :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus { outline: none !important; border-color: var(--mf-primary) !important; box-shadow: 0 0 0 3px var(--mf-ring) !important; } /* ---------- ইনপুট-গ্রুপ (লেবেল + ইনপুট + আইকন-বাটন এক টুকরো) ---------- সব মডিউলের লেবেলে একই id="inputGroup-sizing-sm" থাকে — সেটাকে হুক হিসেবে ব্যবহার ৩ ধরনের গ্রুপ কভার হয়: ১) লেবেল+ইনপুট ২) লেবেল+ইনপুট+বাটন(Search) ৩) লেবেল+ইনপুট+বাটন(Clear) */ /* গ্রুপ লেবেল: বাম কোণা গোল, ডান চ্যাপ্টা + সব ফরমে একই রঙ/স্টাইল */ span[id="inputGroup-sizing-sm"] { border-radius: var(--mf-radius) 0 0 var(--mf-radius) !important; background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #334155 !important; font-weight: 600; } @media (prefers-color-scheme: dark) { span[id="inputGroup-sizing-sm"] { background-color: #334155 !important; border-color: #475569 !important; color: #e2e8f0 !important; } } /* লেবেলের ঠিক পরের ইনপুট/সিলেক্ট: বাম চ্যাপ্টা + সব ফরমে একই বর্ডার রঙ */ span[id="inputGroup-sizing-sm"] + input, span[id="inputGroup-sizing-sm"] + select { border-radius: 0 var(--mf-radius) var(--mf-radius) 0 !important; border-color: #cbd5e1 !important; } @media (prefers-color-scheme: dark) { span[id="inputGroup-sizing-sm"] + input, span[id="inputGroup-sizing-sm"] + select { border-color: #475569 !important; } } /* গ্রুপের শেষে আইকন-বাটন থাকলে (Search/Clear): ইনপুট পুরো চ্যাপ্টা, বাটন ডানে গোল */ .flex:has(> span[id="inputGroup-sizing-sm"] + input + button) > span[id="inputGroup-sizing-sm"] + input, .flex:has(> span[id="inputGroup-sizing-sm"] + select + button) > span[id="inputGroup-sizing-sm"] + select { border-radius: 0 !important; } /* MR No. টাইপ গ্রুপ (sales/payment/cash_receive): ইনপুট ভিতরের div-এ মোড়া, ক্লিয়ার বাটন absolute — এই গ্রুপের ইনপুট দুই পাশেই চ্যাপ্টা থাকবে */ .flex:has(> span[id="inputGroup-sizing-sm"] + div > button) > span[id="inputGroup-sizing-sm"] + div > input { border-radius: 0 !important; } .flex:has(> span[id="inputGroup-sizing-sm"] + div > button) > span[id="inputGroup-sizing-sm"] + div > input:focus { box-shadow: none !important; border-color: var(--mf-primary) !important; } .flex:has(> span[id="inputGroup-sizing-sm"]) > button { border-radius: 0 var(--mf-radius) var(--mf-radius) 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* ফোকাস রিং ইনপুটের ভিতরে না ঢুকে পুরো গ্রুপের চারপাশে */ .flex:has(> span[id="inputGroup-sizing-sm"]):focus-within { border-radius: var(--mf-radius); box-shadow: 0 0 0 3px var(--mf-ring); } .flex:has(> span[id="inputGroup-sizing-sm"]):focus-within input, .flex:has(> span[id="inputGroup-sizing-sm"]):focus-within select { border-color: var(--mf-primary) !important; box-shadow: none !important; } /* ভ্যালিডেশন (লাল) স্টেটেও গ্রুপ একসাথে থাকবে */ span[id="inputGroup-sizing-sm"] + input.is-invalid, span[id="inputGroup-sizing-sm"] + select.is-invalid { border-radius: 0 var(--mf-radius) var(--mf-radius) 0 !important; box-shadow: none !important; border-color: #ef4444 !important; } .flex:has(> span[id="inputGroup-sizing-sm"] + input + button) > span[id="inputGroup-sizing-sm"] + input.is-invalid, .flex:has(> span[id="inputGroup-sizing-sm"] + select + button) > span[id="inputGroup-sizing-sm"] + select.is-invalid { border-radius: 0 !important; } /* head.php-এর কাস্টম সিলেক্ট (module-select) একই রেডিয়াসে */ .module-select-parent > span:first-child { border-radius: var(--mf-radius) 0 0 var(--mf-radius); } .module-select-control, .module-select-input { border-radius: 0 var(--mf-radius) var(--mf-radius) 0; } /* ভ্যালিডেশন স্টেট */ input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .25) !important; } input.is-valid, select.is-valid, textarea.is-valid { border-color: #22c55e !important; } .field-error-msg { color: #ef4444; font-size: .75rem; margin-top: .25rem; display: block; animation: mfSlideDown .2s ease-out; } @keyframes mfSlideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---------- বাটন ---------- */ button, input[type="submit"], input[type="button"] { transition: transform var(--mf-transition), box-shadow var(--mf-transition), background-color var(--mf-transition), filter var(--mf-transition) !important; } button:not(:disabled):hover { transform: translateY(-1px); } button:not(:disabled):active { transform: translateY(0) scale(.97); } button:disabled { opacity: .6; cursor: not-allowed; transform: none !important; } /* ---------- বাটনের আইকন + টেক্সট অ্যালাইনমেন্ট ---------- সব বাটনে আইকন ও টেক্সট উল্লম্বভাবে মাঝ বরাবর থাকবে। গ্রিড-লেআউট বাটন (যেমন সাইডবারের report-menu-toggle) বাদ — তাদের লেআউট নষ্ট হবে না */ button:not([class*="grid-cols"]):not([class*="report-menu-toggle"]):not([class*="text-left"]):not([class*="justify-"]) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .5rem; text-align: center; } /* বাটনের ভিতরের আইকন: শrink হবে না, লাইনের সাথে মাঝ বরাবর বসবে */ button > svg { flex: 0 0 auto; vertical-align: middle; line-height: 1; } /* বাটনের ভিতরের টেক্সট-স্প্যান/স্ট্রং-ও মাঝ বরাবর */ button > span, button > strong, button > small { min-width: 0; } button > span.module-details { display: block; text-align: left; } /* লোডিং স্পিনার টেক্সটের সাথে মাঝ বরাবর */ button .mf-spinner { margin-right: .25rem; } /* রিপল ইফেক্ট */ .mf-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: mfRipple .55s ease-out forwards; pointer-events: none; } @keyframes mfRipple { to { transform: scale(3.2); opacity: 0; } } /* সাবমিট বাটনের লোডিং স্পিনার */ .mf-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: mfSpin .7s linear infinite; vertical-align: middle; margin-right: .5rem; } @keyframes mfSpin { to { transform: rotate(360deg); } } /* ---------- কার্ড/সেকশন ---------- */ .card, .bg-white, .bg-slate-800 { transition: box-shadow .25s ease; } /* ---------- স্ক্রলবার ---------- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .45); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .7); } /* ---------- প্রিন্ট ---------- */ @media print { .mf-spinner, .field-error-msg { display: none !important; } } /* ---------- রিডিউসড মোশন ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }