/* * PersianDatePicker widget styles (framework-agnostic, from persian-datepicker.md §5). * Theme colour is the site brand teal (#0d9488) instead of the doc's default blue. */ /* Visibility toggle used by the script */ .pdp-popup.hidden { display: none; } /* The visible input is forced to LTR so the digits read naturally */ .mcdp-rtl-input { direction: ltr; text-align: center; } /* Popup container. The script appends it to and positions it from the input's bounding rect, so no overflow:hidden ancestor (panel-card, table-responsive) can clip it. z-index must clear the sticky admin topbar (1020). */ .pdp-popup { position: fixed; z-index: 1100; width: 18rem; background: #fff; padding: 0.75rem; border-radius: 0.75rem; box-shadow: 0 0 0 1px #e2e8f0, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); direction: rtl; } /* Header: nav buttons + title */ .pdp-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .pdp-title { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: #1e293b; } .pdp-nav-btn { display: flex; align-items: center; justify-content: center; height: 2rem; width: 2rem; border: 0; background: transparent; border-radius: 0.5rem; color: #475569; cursor: pointer; } .pdp-nav-btn:hover { background: #f1f5f9; } /* SVG chevron. Base points LEFT; "previous" button is mirrored to point RIGHT (RTL). */ .pdp-nav-icon { height: 1rem; width: 1rem; } .pdp-nav-prev .pdp-nav-icon { transform: scaleX(-1); } .pdp-year-input { width: 4rem; text-align: center; font-size: 0.875rem; padding: 0.125rem 0.25rem; border: 0; border-radius: 0.375rem; background: #f8fafc; box-shadow: inset 0 0 0 1px #e2e8f0; color: inherit; } .pdp-year-input:focus { outline: none; box-shadow: inset 0 0 0 2px #0d9488; } /* Day grid */ .pdp-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 0.25rem; } .pdp-weekday { padding: 0.25rem 0; text-align: center; font-size: 0.75rem; font-weight: 500; color: #94a3b8; } .pdp-day { display: flex; align-items: center; justify-content: center; height: 2rem; width: 2rem; border-radius: 0.5rem; font-size: 0.875rem; color: #334155; cursor: pointer; } .pdp-day:hover { background: #f0fdfa; color: #0f766e; } .pdp-day-empty { height: 2rem; width: 2rem; } .pdp-day-today { box-shadow: inset 0 0 0 1px #5eead4; } .pdp-day-selected, .pdp-day-selected:hover{ background: #0d9488; color: #fff; } .pdp-day-disabled, .pdp-day-disabled:hover{ cursor: not-allowed; color: #cbd5e1; background: transparent; } /* Footer actions */ .pdp-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #f1f5f9; } .pdp-link { font-size: 0.75rem; font-weight: 500; color: #0d9488; cursor: pointer; } /* Brief red outline shown by the script on invalid manual input */ .mcdp-rtl-input.ring-red-400 { box-shadow: inset 0 0 0 2px #f87171; } /* Dark theme — this file is plain CSS (not Tailwind), so it needs its own explicit overrides. پنل مدیریت تم را روی می‌گذارد (نه کلاس .dark)؛ هر دو پوشش داده می‌شوند. چون پاپ‌آپ فرزند body است، انتخابگر باید از ریشه بیاید. */ :where(.dark, [data-theme="dark"]) .pdp-popup { background: #1e293b; box-shadow: 0 0 0 1px #334155, 0 10px 15px -3px rgba(0,0,0,.3), 0 4px 6px -4px rgba(0,0,0,.3); } :where(.dark, [data-theme="dark"]) .pdp-title { color: #f1f5f9; } :where(.dark, [data-theme="dark"]) .pdp-nav-btn { color: #94a3b8; } :where(.dark, [data-theme="dark"]) .pdp-nav-btn:hover { background: #334155; } :where(.dark, [data-theme="dark"]) .pdp-year-input { background: #0f172a; box-shadow: inset 0 0 0 1px #334155; color: #f1f5f9; } :where(.dark, [data-theme="dark"]) .pdp-year-input:focus { box-shadow: inset 0 0 0 2px #0d9488; } :where(.dark, [data-theme="dark"]) .pdp-weekday { color: #64748b; } :where(.dark, [data-theme="dark"]) .pdp-day { color: #cbd5e1; } :where(.dark, [data-theme="dark"]) .pdp-day:hover { background: #134e4a; color: #5eead4; } :where(.dark, [data-theme="dark"]) .pdp-day-today { box-shadow: inset 0 0 0 1px #0d9488; } :where(.dark, [data-theme="dark"]) .pdp-day-selected, :where(.dark, [data-theme="dark"]) .pdp-day-selected:hover { background: #0d9488; color: #fff; } :where(.dark, [data-theme="dark"]) .pdp-day-disabled, :where(.dark, [data-theme="dark"]) .pdp-day-disabled:hover { color: #475569; background: transparent; } :where(.dark, [data-theme="dark"]) .pdp-footer { border-top-color: #334155; }