/* ========================================================================== SHC DatePicker + Custom Select — Smart Hatch Calculator Pro All popups are appended to to escape overflow:hidden containers. Theme is applied via a class (.shc-theme-dark / .shc-theme-light) that the JS copies from the nearest .shc-wrap ancestor. ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ SHARED: Body-appended popup theme tokens When the JS detects the host theme it adds shc-theme-dark/light to the popup element. These blocks define all --shc-* vars for that context. ══════════════════════════════════════════════════════════════════════════ */ .shc-dp.shc-theme-dark, .shc-sel-dropdown.shc-theme-dark { --shc-surface: #131625; --shc-surface2: #1a1e30; --shc-border: rgba(255,255,255,.08); --shc-accent: #6c63ff; --shc-accent2: #4ecdc4; --shc-text-muted: #8b90b0; color: #e8eaf6; } .shc-dp.shc-theme-light, .shc-sel-dropdown.shc-theme-light { --shc-surface: #ffffff; --shc-surface2: #f5f6ff; --shc-border: rgba(0,0,0,.08); --shc-accent: #6c63ff; --shc-accent2: #4ecdc4; --shc-text-muted: #6b7280; color: #1a1e2e; } /* ══════════════════════════════════════════════════════════════════════════ DATE PICKER ══════════════════════════════════════════════════════════════════════════ */ /* ── Wrapper ─────────────────────────────────────────────────────── */ .shc-dp-wrapper { position: relative; display: flex; flex-direction: column; } /* ── Trigger button ──────────────────────────────────────────────── */ .shc-dp-trigger { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--shc-surface2, rgba(128,128,128,.10)); border: 1.5px solid var(--shc-border, rgba(128,128,128,.18)); color: inherit; border-radius: var(--shc-radius-sm, 8px); padding: 12px 14px; font-size: .95rem; font-family: inherit; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s, color .2s; outline: none; } .shc-dp-trigger:hover { border-color: var(--shc-accent, #6c63ff); } .shc-dp-trigger.has-value { color: inherit; } .shc-dp-trigger.shc-dp-active, .shc-dp-trigger:focus { border-color: var(--shc-accent, #6c63ff); box-shadow: 0 0 0 3px rgba(108,99,255,.2); color: inherit; } .shc-dp-trigger-icon { font-size: 1rem; flex-shrink: 0; opacity: .7; } .shc-dp-trigger-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .6; } .shc-dp-trigger.has-value .shc-dp-trigger-text { opacity: 1; } .shc-dp-chevron, .shc-sel-chevron { flex-shrink: 0; opacity: .5; transition: transform .2s; display: flex; align-items: center; } .shc-dp-trigger.shc-dp-active .shc-dp-chevron { transform: rotate(180deg); opacity: .8; } /* ── Popup calendar ──────────────────────────────────────────────── */ .shc-dp { position: absolute; z-index: 99999; width: 300px; background: var(--shc-surface, #1a1e30); border: 1.5px solid var(--shc-border, rgba(128,128,128,.18)); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 4px 20px rgba(108,99,255,.15); overflow: hidden; opacity: 0; transform: translateY(8px) scale(.97); pointer-events: none; transition: opacity .18s ease, transform .18s ease; font-family: inherit; } .shc-dp.shc-dp-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } .shc-dp.shc-theme-dark { box-shadow: 0 24px 72px rgba(0,0,0,.7), 0 4px 24px rgba(108,99,255,.2); background: #131625; } .shc-dp.shc-theme-light { background: #ffffff; } /* ── Header ──────────────────────────────────────────────────────── */ .shc-dp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--shc-border, rgba(128,128,128,.12)); background: linear-gradient(135deg, rgba(108,99,255,.14) 0%, rgba(78,205,196,.07) 100%); } .shc-dp-title { display: flex; flex-direction: column; align-items: center; line-height: 1.2; } .shc-dp-month-label { font-size: .95rem; font-weight: 700; } .shc-dp-year-label { font-size: .78rem; color: var(--shc-text-muted, rgba(128,128,128,.85)); font-weight: 500; } /* Navigation arrows — SVG, colour via currentColor */ .shc-dp-nav { background: transparent; border: 1.5px solid var(--shc-border, rgba(128,128,128,.2)); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: inherit; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, color .15s; padding: 0; } .shc-dp-nav svg { pointer-events: none; } .shc-dp-nav:hover { background: var(--shc-accent, #6c63ff); border-color: var(--shc-accent, #6c63ff); color: #fff; transform: scale(1.08); } .shc-dp-nav:active { transform: scale(.95); } /* ── Weekdays ────────────────────────────────────────────────────── */ .shc-dp-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; padding: 10px 10px 4px; } .shc-dp-weekdays span { text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--shc-accent, #6c63ff); opacity: .8; padding: 2px 0; } /* ── Day grid ────────────────────────────────────────────────────── */ .shc-dp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; padding: 4px 10px 10px; } .shc-dp-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 500; border-radius: 50%; cursor: default; transition: background .13s, color .13s, transform .1s; position: relative; user-select: none; } .shc-dp-blank { pointer-events: none; } .shc-dp-day { cursor: pointer; } .shc-dp-day:hover { background: rgba(108,99,255,.15); color: var(--shc-accent, #6c63ff); transform: scale(1.12); } .shc-dp-day:active { transform: scale(.95); } .shc-dp-day.is-today { font-weight: 800; color: var(--shc-accent2, #4ecdc4); } .shc-dp-day.is-today::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--shc-accent2, #4ecdc4); } .shc-dp-day.is-selected { background: linear-gradient(135deg, var(--shc-accent,#6c63ff), #9c94ff); color: #fff !important; font-weight: 700; box-shadow: 0 4px 14px rgba(108,99,255,.45); transform: scale(1.1); } .shc-dp-day.is-selected::after { display: none; } .shc-dp-day.is-selected:hover { transform: scale(1.15); background: linear-gradient(135deg, #5a52e8, #8a84ff); } /* ── Footer ──────────────────────────────────────────────────────── */ .shc-dp-footer { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--shc-border, rgba(128,128,128,.12)); } .shc-dp-today, .shc-dp-clear { flex: 1; padding: 8px 12px; border-radius: 8px; font-size: .78rem; font-weight: 700; font-family: inherit; cursor: pointer; border: 1.5px solid; transition: background .15s, color .15s, transform .12s; } .shc-dp-today { background: linear-gradient(135deg, var(--shc-accent,#6c63ff), #9c94ff); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(108,99,255,.35); } .shc-dp-today:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(108,99,255,.45); } .shc-dp-clear { background: transparent; border-color: var(--shc-border, rgba(128,128,128,.2)); color: var(--shc-text-muted, rgba(128,128,128,.85)); } .shc-dp-clear:hover { background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.4); color: #ff6b6b; } /* ══════════════════════════════════════════════════════════════════════════ CUSTOM SELECT ══════════════════════════════════════════════════════════════════════════ */ .shc-sel-wrapper { position: relative; display: flex; flex-direction: column; } /* ── Trigger button (mirrors .shc-dp-trigger) ────────────────────── */ .shc-sel-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: var(--shc-surface2, rgba(128,128,128,.10)); border: 1.5px solid var(--shc-border, rgba(128,128,128,.18)); color: inherit; border-radius: var(--shc-radius-sm, 8px); padding: 12px 14px; font-size: .95rem; font-family: inherit; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s; outline: none; } .shc-sel-trigger:hover, .shc-sel-trigger.shc-sel-active { border-color: var(--shc-accent, #6c63ff); box-shadow: 0 0 0 3px rgba(108,99,255,.2); } .shc-sel-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .6; text-align: left; } .shc-sel-trigger.has-value .shc-sel-text { opacity: 1; } .shc-sel-trigger.shc-sel-active .shc-sel-chevron { transform: rotate(180deg); opacity: .8; } /* ── Dropdown panel — appended to body ──────────────────────────── */ .shc-sel-dropdown { position: absolute; z-index: 99998; min-width: 200px; background: var(--shc-surface, #1a1e30); border: 1.5px solid var(--shc-border, rgba(128,128,128,.18)); border-radius: 10px; overflow: hidden auto; max-height: 280px; opacity: 0; pointer-events: none; transform: translateY(6px) scale(.98); transition: opacity .15s ease, transform .15s ease; box-shadow: 0 16px 48px rgba(0,0,0,.3), 0 4px 16px rgba(108,99,255,.1); } .shc-sel-dropdown.shc-sel-open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); } .shc-sel-dropdown.shc-theme-dark { background: #131625; box-shadow: 0 20px 60px rgba(0,0,0,.7); } .shc-sel-dropdown.shc-theme-light { background: #ffffff; } /* ── Options ─────────────────────────────────────────────────────── */ .shc-sel-option { padding: 10px 16px; font-size: .9rem; cursor: pointer; transition: background .12s, color .12s; border-bottom: 1px solid var(--shc-border, rgba(128,128,128,.08)); white-space: nowrap; } .shc-sel-option:last-child { border-bottom: none; } .shc-sel-option:hover { background: rgba(108,99,255,.14); color: var(--shc-accent, #6c63ff); } .shc-sel-option.is-selected { background: rgba(108,99,255,.18); color: var(--shc-accent, #6c63ff); font-weight: 700; } .shc-sel-option.is-disabled { opacity: .4; cursor: default; pointer-events: none; } /* Scrollbar styling for the dropdown */ .shc-sel-dropdown::-webkit-scrollbar { width: 4px; } .shc-sel-dropdown::-webkit-scrollbar-track { background: transparent; } .shc-sel-dropdown::-webkit-scrollbar-thumb { background: var(--shc-accent, #6c63ff); border-radius: 4px; opacity: .5; }