/* NetCore Pro — shared site utility classes * These extend Tailwind (which is loaded as a runtime script) with project-specific * helpers. Both site and admin reference this file so that helper classes used * in views always exist. */ /* ---------- Site (dark) helpers ---------- */ .gradient-text { background: linear-gradient(90deg, #06b6d4, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; } .card-dark { background: #131826; border: 1px solid #1e293b; transition: border-color .2s, box-shadow .2s, transform .2s; } .card-dark:hover { border-color: #06b6d4; box-shadow: 0 0 30px rgba(6, 182, 212, 0.1); } .btn-primary { background: linear-gradient(90deg, #06b6d4, #3b82f6); transition: all .2s; } .btn-primary:hover { box-shadow: 0 0 20px rgba(6, 182, 212, 0.5); transform: translateY(-1px); } .btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; } /* ---------- Admin (light) helpers ---------- */ .btn-indigo { background: linear-gradient(90deg, #4f46e5, #7c3aed); color: #fff; transition: all .2s; } .btn-indigo:hover { box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4); } .btn-indigo:disabled { opacity: .6; cursor: not-allowed; } /* Secondary admin button (e.g. "انصراف"/"آپلود"). Works in BOTH light and dark. Using explicit color so it never gets confused with the surrounding bg. */ .btn-secondary { background: #e2e8f0; /* slate-200 */ color: #1e293b; /* slate-800 — readable on light bg */ border: 1px solid #cbd5e1; /* slate-300 */ transition: all .2s; } .btn-secondary:hover { background: #cbd5e1; } .btn-secondary:disabled { opacity: .6; cursor: not-allowed; } .stat-card { background: var(--admin-card, #fff); color: var(--admin-text, #1e293b); border-radius: 12px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .table-row:hover { background: var(--admin-hover, #f1f5f9); } /* ========================================================================== Admin Dark Theme (toggled by data-admin-theme="dark" on ) The light theme uses Tailwind utility colors (bg-white / text-slate-800 etc.) directly in admin pages.js. To "darkify" without rewriting every page we map the most-used Tailwind classes via attribute selectors on . ========================================================================== */ html[data-admin-theme="dark"] { --admin-bg: #0f172a; /* slate-900 */ --admin-card: #1e293b; /* slate-800 */ --admin-card2: #0b1220; /* even darker */ --admin-border:#334155; /* slate-700 */ --admin-text: #e2e8f0; /* slate-200 */ --admin-muted: #94a3b8; /* slate-400 */ --admin-hover: #273449; color-scheme: dark; } html[data-admin-theme="dark"] body { background: var(--admin-bg) !important; color: var(--admin-text) !important; } html[data-admin-theme="dark"] header.bg-white, html[data-admin-theme="dark"] .bg-white { background: var(--admin-card) !important; color: var(--admin-text) !important; } html[data-admin-theme="dark"] .bg-slate-50 { background: var(--admin-card2) !important; } html[data-admin-theme="dark"] .bg-slate-100 { background: var(--admin-hover) !important; } html[data-admin-theme="dark"] .border-slate-200, html[data-admin-theme="dark"] .border-slate-100, html[data-admin-theme="dark"] .border-gray-200 { border-color: var(--admin-border) !important; } html[data-admin-theme="dark"] .text-slate-800, html[data-admin-theme="dark"] .text-slate-900, html[data-admin-theme="dark"] .text-gray-800, html[data-admin-theme="dark"] .text-gray-900 { color: var(--admin-text) !important; } html[data-admin-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; } html[data-admin-theme="dark"] .text-slate-600, html[data-admin-theme="dark"] .text-gray-600, html[data-admin-theme="dark"] .text-gray-500, html[data-admin-theme="dark"] .text-slate-500 { color: var(--admin-muted) !important; } html[data-admin-theme="dark"] .text-slate-400 { color: #94a3b8 !important; } html[data-admin-theme="dark"] .text-slate-300 { color: #cbd5e1 !important; } html[data-admin-theme="dark"] .divide-slate-200 > * + * { border-color: var(--admin-border) !important; } html[data-admin-theme="dark"] .stat-card, html[data-admin-theme="dark"] .stat-card * { color: var(--admin-text); } html[data-admin-theme="dark"] .stat-card { background: var(--admin-card) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } html[data-admin-theme="dark"] table { color: var(--admin-text); } html[data-admin-theme="dark"] thead tr, html[data-admin-theme="dark"] thead.bg-slate-50 { background: var(--admin-card2) !important; } html[data-admin-theme="dark"] tbody tr.table-row:hover { background: var(--admin-hover) !important; } html[data-admin-theme="dark"] tbody tr { border-color: var(--admin-border) !important; } html[data-admin-theme="dark"] input[type=text], html[data-admin-theme="dark"] input[type=email], html[data-admin-theme="dark"] input[type=password], html[data-admin-theme="dark"] input[type=number], html[data-admin-theme="dark"] input[type=search], html[data-admin-theme="dark"] input[type=tel], html[data-admin-theme="dark"] input[type=url], html[data-admin-theme="dark"] input[type=date], html[data-admin-theme="dark"] input:not([type]), html[data-admin-theme="dark"] textarea, html[data-admin-theme="dark"] select { background: var(--admin-card2) !important; color: var(--admin-text) !important; border-color: var(--admin-border) !important; } html[data-admin-theme="dark"] input::placeholder, html[data-admin-theme="dark"] textarea::placeholder { color: var(--admin-muted) !important; } html[data-admin-theme="dark"] .modal-backdrop > div { background: var(--admin-card) !important; color: var(--admin-text) !important; } html[data-admin-theme="dark"] .modal-backdrop .border-slate-200 { border-color: var(--admin-border) !important; } /* === FIX: light-gray helper buttons (انصراف / تغییر وضعیت / ...) were invisible in dark mode because: - Tailwind's .bg-slate-200 stays #e2e8f0 (very light) - body text in dark mode becomes #e2e8f0 (also very light) → button background ≈ button text → unreadable. We re-color all such "secondary" buttons in dark mode so they have a distinct dark background with a light foreground. Same fix is applied to bg-slate-100 / bg-gray-100 / bg-gray-200 used for the same purpose. */ html[data-admin-theme="dark"] button.bg-slate-200, html[data-admin-theme="dark"] button.bg-slate-100, html[data-admin-theme="dark"] button.bg-gray-100, html[data-admin-theme="dark"] button.bg-gray-200, html[data-admin-theme="dark"] .btn-secondary, html[data-admin-theme="dark"] a.bg-slate-200, html[data-admin-theme="dark"] a.bg-slate-100 { background: #334155 !important; /* slate-700 */ color: #e2e8f0 !important; /* slate-200 */ border-color: #475569 !important; /* slate-600 */ } html[data-admin-theme="dark"] button.bg-slate-200:hover, html[data-admin-theme="dark"] button.bg-slate-100:hover, html[data-admin-theme="dark"] button.bg-gray-100:hover, html[data-admin-theme="dark"] button.bg-gray-200:hover, html[data-admin-theme="dark"] .btn-secondary:hover, html[data-admin-theme="dark"] a.bg-slate-200:hover, html[data-admin-theme="dark"] a.bg-slate-100:hover { background: #475569 !important; } /* Buttons that only have a border (e.g. "انصراف" with border-slate-300) become invisible in dark mode because the border-color matches the dark background. Give them a dark inner fill + light border + light text. */ html[data-admin-theme="dark"] button.border-slate-300, html[data-admin-theme="dark"] button.border-slate-200, html[data-admin-theme="dark"] a.border-slate-300, html[data-admin-theme="dark"] a.border-slate-200 { border-color: #475569 !important; /* slate-600 */ color: #e2e8f0 !important; } html[data-admin-theme="dark"] button.border-slate-300:hover, html[data-admin-theme="dark"] a.border-slate-300:hover { background: var(--admin-hover) !important; } /* Disabled-style email box on profile page (bg-slate-100 input) — keep readable in dark mode. */ html[data-admin-theme="dark"] input.bg-slate-100, html[data-admin-theme="dark"] input.bg-gray-100 { background: var(--admin-card2) !important; color: var(--admin-muted) !important; } /* Modal default surface fallback: when an admin page renders its own modal wrapper (not via showModal) with bg-black/50 backdrop and a bg-white inner panel, the inner panel was already covered by .bg-white rule above. Just make sure the border between sticky header and body is visible. */ html[data-admin-theme="dark"] .border-t, html[data-admin-theme="dark"] .border-b { border-color: var(--admin-border) !important; } /* Light "informational" tints used in lists (e.g. bg-amber-50 / bg-indigo-50) wash out the text in dark mode. Tone them down to a subtle dark tint. */ html[data-admin-theme="dark"] .bg-indigo-50 { background: rgba(99,102,241,0.12) !important; color: var(--admin-text) !important; } html[data-admin-theme="dark"] .bg-amber-50 { background: rgba(245,158,11,0.12) !important; color: var(--admin-text) !important; } html[data-admin-theme="dark"] .bg-emerald-50, html[data-admin-theme="dark"] .bg-green-50 { background: rgba(16,185,129,0.12) !important; color: var(--admin-text) !important; } html[data-admin-theme="dark"] .bg-red-50 { background: rgba(239,68,68,0.12) !important; color: var(--admin-text) !important; } html[data-admin-theme="dark"] .bg-indigo-100 { background: rgba(99,102,241,0.18) !important; color: var(--admin-text) !important; } /* Tabs underline border on /admin/site-content: in dark mode the underline container was using border-slate-200 → invisible. Already covered above, but the active indigo line and transparent inactive line still work. */ html[data-admin-theme="dark"] .hover\\:bg-slate-50:hover, html[data-admin-theme="dark"] .hover\\:bg-slate-100:hover { background: var(--admin-hover) !important; } html[data-admin-theme="dark"] .hover\\:bg-gray-50:hover, html[data-admin-theme="dark"] .hover\\:bg-gray-100:hover { background: var(--admin-hover) !important; } html[data-admin-theme="dark"] .shadow, html[data-admin-theme="dark"] .shadow-sm, html[data-admin-theme="dark"] .shadow-md, html[data-admin-theme="dark"] .shadow-lg { box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; } /* Sidebar keeps its purple gradient in dark mode too — looks fine and is iconic. */ /* Theme-toggle button (in admin header) */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: #475569; cursor: pointer; transition: all .2s; } .theme-toggle-btn:hover { background: #f1f5f9; color: #4f46e5; } html[data-admin-theme="dark"] .theme-toggle-btn { color: #fbbf24; } html[data-admin-theme="dark"] .theme-toggle-btn:hover { background: var(--admin-hover); color: #fde047; } .badge { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; display: inline-block; } .badge-pending { background: #fef3c7; color: #92400e; } .badge-confirmed { background: #dbeafe; color: #1e40af; } .badge-shipping { background: #e0e7ff; color: #5b21b6; } .badge-delivered { background: #d1fae5; color: #065f46; } .badge-cancelled { background: #fee2e2; color: #991b1b; } .badge-open { background: #fef3c7; color: #92400e; } .badge-answered { background: #dbeafe; color: #1e40af; } .badge-closed { background: #e2e8f0; color: #475569; } .badge-approved { background: #d1fae5; color: #065f46; } .badge-rejected { background: #fee2e2; color: #991b1b; } .badge-active { background: #d1fae5; color: #065f46; } .badge-blocked { background: #fee2e2; color: #991b1b; } .badge-unread { background: #ddd6fe; color: #5b21b6; } .badge-read { background: #e2e8f0; color: #475569; } .badge-published { background: #d1fae5; color: #065f46; } .badge-draft { background: #e2e8f0; color: #475569; } .modal-backdrop { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); } .sidebar { background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%); } .sidebar-link { color: rgba(255,255,255,0.85); } .sidebar-link:hover { background: rgba(255,255,255,0.1); color: #fff; } .sidebar-link.active { background: rgba(255,255,255,0.2); color: #fff; font-weight: 600; } /* ============================================================ Responsive admin sidebar (off-canvas drawer on mobile) ============================================================ Desktop (>=768px): sidebar is a fixed permanent rail on the right (RTL). Mobile (<768px) : sidebar slides off-canvas; toggled by the hamburger, backed by a dimmed overlay. JS adds/removes .is-open. */ /* --- Mobile: drawer behaviour --- */ @media (max-width: 767.98px) { /* The drawer sits above the overlay, slid out to the right edge by default. */ #sidebar.sidebar { display: block !important; /* override Tailwind `hidden` */ width: 17rem; /* a touch wider than 16rem for comfy touch targets */ max-width: 85vw; transform: translateX(110%); /* fully off-screen to the right (RTL) */ transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: -8px 0 24px -8px rgba(15,23,42,.45); z-index: 60; will-change: transform; } #sidebar.sidebar.is-open { transform: translateX(0); } /* Dimmed backdrop behind the drawer */ #sidebar-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s ease; z-index: 55; } #sidebar-overlay.is-visible { opacity: 1; visibility: visible; } /* Lock the page behind the open drawer */ body.sidebar-open { overflow: hidden; } } /* --- Desktop: overlay never shows, drawer is the permanent rail --- */ @media (min-width: 768px) { #sidebar-overlay { display: none !important; } #sidebar.sidebar { transform: none !important; } } /* Reduced-motion users get an instant (non-sliding) drawer */ @media (prefers-reduced-motion: reduce) { #sidebar.sidebar { transition: none !important; } #sidebar-overlay { transition: none !important; } } /* ============================================================ Responsive tables & content (admin) ============================================================ */ /* Guard against any wide child pushing the layout past the viewport */ [data-admin] #main-content { max-width: 100%; overflow-x: hidden; } [data-admin] #main-content > * { max-width: 100%; } /* Smooth, momentum scrolling for tables that still scroll (none should on mobile thanks to the card layout, but keep the desktop wrapper sane). */ [data-admin] .overflow-x-auto { -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; } [data-admin] .overflow-x-auto > table { min-width: 100%; } /* Truncate long text cells on desktop too */ [data-admin] .cell-truncate { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------ MOBILE: turn every .responsive-table into a stack of cards. Each row becomes a card; each cell shows its column label (from data-label) on the right and its value on the left. This eliminates ALL horizontal scrolling inside cards. ------------------------------------------------------------ */ @media (max-width: 640px) { [data-admin] table.responsive-table { font-size: 13px; } /* The wrapper no longer needs to scroll — the cards fit the width */ [data-admin] .overflow-x-auto:has(> table.responsive-table) { overflow-x: visible; } [data-admin] table.responsive-table, [data-admin] table.responsive-table tbody, [data-admin] table.responsive-table tr, [data-admin] table.responsive-table td { display: block; width: 100%; box-sizing: border-box; } /* Hide the original header row — labels come from data-label */ [data-admin] table.responsive-table thead { display: none; } /* Each row is a rounded card */ [data-admin] table.responsive-table tr { border: 1px solid #e2e8f0; border-radius: .75rem; padding: .35rem .25rem; margin-bottom: .75rem; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); } [data-admin] table.responsive-table tr:last-child { margin-bottom: 0; } /* Each cell: label on the right, value on the left (RTL) */ [data-admin] table.responsive-table td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; padding: .45rem .75rem !important; border: 0; border-bottom: 1px dashed #eef2f7; white-space: normal; word-break: break-word; min-height: 2.5rem; } [data-admin] table.responsive-table td:last-child { border-bottom: 0; } [data-admin] table.responsive-table td::before { content: attr(data-label); flex: 0 0 auto; font-weight: 700; color: #64748b; font-size: 12px; margin-left: .5rem; white-space: nowrap; } /* Cells without a label (shouldn't happen) just align normally */ [data-admin] table.responsive-table td:not([data-label])::before { content: ""; } /* Media cell (product image): label on top-ish, image to the side */ [data-admin] table.responsive-table td.cell-media img { width: 3rem; height: 3rem; } /* Truncated cells expand fully inside the card */ [data-admin] table.responsive-table td.cell-truncate { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; } /* Action cells: buttons grouped, larger touch targets */ [data-admin] table.responsive-table td.cell-actions { justify-content: flex-end; gap: 1rem; } [data-admin] table.responsive-table td.cell-actions button, [data-admin] table.responsive-table td.cell-actions a { font-size: 1.05rem; padding: .15rem .35rem; } /* Modals fill nearly the whole viewport on phones and never overflow */ [data-admin] .modal-backdrop > div, #modal-root .modal-backdrop > div { max-width: 100% !important; width: 100% !important; margin: 0 .25rem; max-height: 92vh; } /* Page header title shrinks a touch so it fits next to the hamburger */ [data-admin] header h1 { font-size: 1rem; line-height: 1.4; } /* Cards / panels get a hair less padding to claw back horizontal space */ [data-admin] main { padding: .75rem !important; } } /* Dark theme cards */ html[data-admin-theme="dark"] [data-admin] table.responsive-table tr { background: var(--admin-card) !important; border-color: var(--admin-border) !important; } @media (max-width: 640px) { html[data-admin-theme="dark"] [data-admin] table.responsive-table td { border-bottom-color: var(--admin-border) !important; } html[data-admin-theme="dark"] [data-admin] table.responsive-table td::before { color: var(--admin-muted) !important; } } /* Tighten dashboard stat cards on very small phones (2-up grid) */ @media (max-width: 380px) { [data-admin] .grid.grid-cols-2 { gap: .5rem !important; } } /* In single-column modal forms (mobile), neutralise col-span-2 so a field tagged for the desktop 2-col layout simply fills the one available column instead of forcing a phantom second track. */ @media (max-width: 767.98px) { [data-admin] .grid.grid-cols-1 > .col-span-2, #modal-root .grid.grid-cols-1 > .col-span-2 { grid-column: span 1 / span 1 !important; } } /* Faint scrollbar for any region that still scrolls (e.g. nested order items) */ [data-admin] .overflow-x-auto::-webkit-scrollbar { height: 6px; } [data-admin] .overflow-x-auto::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 999px; } html[data-admin-theme="dark"] [data-admin] .overflow-x-auto::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); } /* ---------- Animations ---------- */ .toast { animation: ncp-slideIn .3s ease-out; } @keyframes ncp-slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .spinner { border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; width: 1rem; height: 1rem; animation: ncp-spin .8s linear infinite; display: inline-block; opacity: .6; } @keyframes ncp-spin { to { transform: rotate(360deg); } } /* ---------- Accessibility ---------- */ .skip-link { position: absolute; top: -40px; right: 0; background: #06b6d4; color: #fff; padding: 8px 16px; z-index: 1000; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; transition: top .2s; } .skip-link:focus { top: 0; outline: 2px solid #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Visible focus rings */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- Custom scrollbar (dark sites only) ---------- */ .scrollbar-dark::-webkit-scrollbar { width: 8px; height: 8px; } .scrollbar-dark::-webkit-scrollbar-track { background: #0a0e1a; } .scrollbar-dark::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; } .scrollbar-dark::-webkit-scrollbar-thumb:hover { background: #334155; } /* ---------- line-clamp fallback (when Tailwind plugin not present) ---------- */ .line-clamp-1, .line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-1 { -webkit-line-clamp: 1; } .line-clamp-2 { -webkit-line-clamp: 2; } .line-clamp-3 { -webkit-line-clamp: 3; } /* ---------- Prose tweaks for RTL article bodies ---------- */ .prose-rtl h2 { font-size: 1.4rem; font-weight: 700; margin: 1.4em 0 .6em; } .prose-rtl h3 { font-size: 1.2rem; font-weight: 700; margin: 1.2em 0 .5em; } .prose-rtl p { line-height: 1.9; margin: .8em 0; } .prose-rtl ul { list-style: disc; padding-right: 1.5em; } .prose-rtl ol { list-style: decimal; padding-right: 1.5em; } .prose-rtl code { background: rgba(6,182,212,0.1); color: #67e8f9; padding: .15em .4em; border-radius: 4px; font-family: ui-monospace, monospace; font-size: .9em; } .prose-rtl pre { background: #0a0e1a; padding: 1em; border-radius: 8px; overflow-x: auto; } .prose-rtl a { color: #06b6d4; text-decoration: underline; } .prose-rtl img { max-width: 100%; border-radius: 8px; margin: 1em 0; } .prose-rtl blockquote { border-right: 4px solid #06b6d4; padding-right: 1em; color: #94a3b8; font-style: italic; margin: 1em 0; }