/* * Persian (Jalali) date picker styling — the popup built by * wwwroot/js/persian-datepicker.js. * * Loaded by BOTH layouts (Views/Shared/_AdminLayout.cshtml for the form * builder's own date fields, Views/Shared/_Layout.cshtml for the public * form pages a visitor fills in), so it must not depend on any admin-only * custom property: every var() below carries a literal fallback. * * The popup is position:fixed and appended to (see position() in the * JS), so it deliberately owns a high z-index and no positioning context of * its own. */ .pdp-input.is-invalid { border-color: #d92d20 !important; background: #fff5f4; } .pdp-popup { position: fixed; z-index: 1400; width: 268px; padding: 10px; font-family: inherit; direction: rtl; background: var(--admin-card, #fff); border: 1px solid var(--admin-border, #e2e5ea); border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, .18); } /* --- header: ‹ month year › ------------------------------------- */ .pdp-head { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .pdp-nav { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--admin-accent, #b58b3c); cursor: pointer; background: var(--admin-bg, #f5f6f8); border: 1px solid var(--admin-border, #e2e5ea); border-radius: 8px; } .pdp-nav:hover { background: rgba(181, 139, 60, .14); } .pdp-select { flex: 1; min-width: 0; padding: 5px 6px; font: inherit; font-size: .8rem; background: var(--admin-bg, #f5f6f8); border: 1px solid var(--admin-border, #e2e5ea); border-radius: 8px; } /* --- calendar grid ---------------------------------------------- */ .pdp-weekdays, .pdp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .pdp-weekdays { margin-bottom: 4px; font-size: .72rem; color: #6b7280; text-align: center; } .pdp-day { padding: 6px 0; font: inherit; font-size: .82rem; text-align: center; cursor: pointer; background: none; border: 1px solid transparent; border-radius: 8px; } .pdp-day:hover { background: var(--admin-bg, #f5f6f8); } .pdp-day.is-empty { cursor: default; background: none; } .pdp-day.is-today { font-weight: 700; color: var(--admin-accent, #b58b3c); border-color: var(--admin-accent, #b58b3c); } .pdp-day.is-selected { color: #fff; background: var(--admin-accent, #b58b3c); border-color: var(--admin-accent, #b58b3c); } /* --- footer ------------------------------------------------------ */ .pdp-foot { display: flex; gap: 6px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--admin-border, #e2e5ea); } .pdp-action { flex: 1; padding: 6px; font: inherit; font-size: .78rem; color: var(--admin-accent, #b58b3c); cursor: pointer; background: var(--admin-bg, #f5f6f8); border: 1px solid var(--admin-border, #e2e5ea); border-radius: 8px; } .pdp-action:hover { background: rgba(181, 139, 60, .14); } .pdp-action-muted { color: #6b7280; }