/* ═══════════════════════════════════════════════════════════════════════════ AITS date picker — panel styling. Paired with assets/js/aits-datepicker.js. Uses the --aits-* tokens, which are declared with identical values in aitoolsay-admin.css (admin) and custom.ltr/rtl.css (public), so one sheet serves both sides of the site. ═══════════════════════════════════════════════════════════════════════ */ /* The native panel is suppressed ONLY on fields the script has claimed. With JS off, `data-aits-dp` is never stamped and the browser's own picker stays reachable — a field you cannot open is worse than an unbranded one. */ input[data-aits-dp]::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; } /* The icon moves onto the input's own background, so it survives the indicator being switched off and needs no extra element in the markup. */ input[data-aits-dp] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232060C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 17px 17px; padding-inline-end: 40px; cursor: pointer; } [dir="rtl"] input[data-aits-dp] { background-position: left 12px center; } input[data-aits-dp][type="time"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232060C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); } body.theme-dark input[data-aits-dp] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CBEFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); } body.theme-dark input[data-aits-dp][type="time"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CBEFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); } /* ── The panel ────────────────────────────────────────────────────── Fixed, and parented to by the script — see the note there. The z-index clears the admin's sticky bars and the SweetAlert layer without reaching the search overlay's 2147480000. */ .aitsdp { position: fixed; z-index: 2147470000; display: none; width: 320px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 14px; background: var(--aits-card, #fff); border: 1px solid var(--aits-line, #E7ECF3); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 6px rgba(16, 24, 40, .06), 0 22px 54px -16px rgba(16, 24, 40, .28); font-size: 13px; color: var(--aits-txt, #3D4757); animation: aitsdp-in .16s ease-out; } .aitsdp.is-open { display: block; } .aitsdp * { box-sizing: border-box; } /* A datetime panel carries two extra columns and needs the room for them. 320px was the date-only width and the time columns had nowhere to go — the calendar overflowed straight across them. Stamped by the script, so a date-only field keeps the narrower panel. 416, not 396: at 396 the day cells resolved to 29.6px against the 39px a date-only panel gives them, so the same calendar looked cramped purely because the field happened to carry a time. 416 puts them back at ~33.6px. */ .aitsdp.has-time { width: 416px; } body.theme-dark .aitsdp { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .5), 0 22px 54px -16px rgba(0, 0, 0, .7); } @keyframes aitsdp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ── Head ───────────────────────────────────────────────────────────── */ .aitsdp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .aitsdp .aitsdp-title { flex: 1; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--aits-ink, #0B1220); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .16s ease, color .16s ease; } .aitsdp .aitsdp-nav { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--aits-mut, #6B7686); cursor: pointer; transition: background-color .16s ease, color .16s ease, transform .16s ease; } .aitsdp-nav svg { width: 15px; height: 15px; } @media (hover: hover) { .aitsdp .aitsdp-title:hover { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); } .aitsdp .aitsdp-nav:hover { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); } .aitsdp .aitsdp-nav:active { transform: scale(.92); } } body.theme-dark .aitsdp .aitsdp-title:hover, body.theme-dark .aitsdp .aitsdp-nav:hover { background: rgba(54, 128, 237, .2); color: var(--aits-blue-light, #8CBEFA); } /* ── Calendar ───────────────────────────────────────────────────────── */ .aitsdp-body { display: flex; gap: 12px; align-items: flex-start; } .aitsdp-cal { flex: 1 1 auto; min-width: 0; } .aitsdp-dow, .aitsdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .aitsdp-dow { margin-bottom: 4px; color: var(--aits-mut, #6B7686); font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .04em; } /* height, NOT aspect-ratio + min-height. Those two together tie a cell's WIDTH to its minimum height, which gave the grid a 250px floor it would never go under — so `min-width: 0` on the calendar could not shrink it and the whole grid spilled sideways over the time columns. A fixed height leaves the width entirely to the grid's 1fr tracks, which is what lets the panel be sized by its content instead of fighting it. */ .aitsdp .aitsdp-day { height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--aits-txt, #3D4757); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .14s ease, color .14s ease, transform .14s ease; } /* Leading/trailing days stay legible rather than being dimmed to noise — they are still selectable, and a target you can hit but cannot read is a trap. */ .aitsdp .aitsdp-day.is-out { color: var(--aits-faint, #98A2B3); font-weight: 500; } /* Today is marked with a ring, not a fill: a fill here competes with the SELECTED day and the two are different statements. */ .aitsdp .aitsdp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--aits-blue-line, #CFE0FA); } .aitsdp .aitsdp-day.is-on { background: var(--aits-blue-dark, #2060C0); color: #fff; box-shadow: 0 4px 12px -4px rgba(54, 128, 237, .55); } @media (hover: hover) { .aitsdp .aitsdp-day:hover:not(.is-on) { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); } body.theme-dark .aitsdp .aitsdp-day:hover:not(.is-on) { background: rgba(54, 128, 237, .22); color: var(--aits-blue-light, #8CBEFA); } .aitsdp .aitsdp-day:active { transform: scale(.94); } } /* ── Month / year jump ──────────────────────────────────────────────── */ .aitsdp-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .aitsdp .aitsdp-yr, .aitsdp .aitsdp-mo { padding: 8px 0; border: 0; border-radius: 9px; background: transparent; color: var(--aits-txt, #3D4757); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .14s ease, color .14s ease; } .aitsdp .aitsdp-mo { color: var(--aits-mut, #6B7686); } .aitsdp .aitsdp-yr.is-on, .aitsdp .aitsdp-mo.is-on { background: var(--aits-blue-dark, #2060C0); color: #fff; } @media (hover: hover) { .aitsdp .aitsdp-yr:hover:not(.is-on), .aitsdp .aitsdp-mo:hover:not(.is-on) { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); } } /* ── Time columns ───────────────────────────────────────────────────── */ .aitsdp-time { display: flex; gap: 8px; flex: 0 0 auto; padding-inline-start: 12px; border-inline-start: 1px solid var(--aits-line, #E7ECF3); } .aitsdp-tcol { display: flex; flex-direction: column; min-width: 0; } /* Without these the columns are two anonymous runs of digits and you have to guess which is which — the numbers alone never say "hour" or "minute". */ .aitsdp-colhead { margin-bottom: 5px; color: var(--aits-mut, #6B7686); font-size: 10.5px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .06em; } .aitsdp-col { display: flex; flex-direction: column; gap: 2px; width: 52px; max-height: 214px; padding-inline-end: 4px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; scrollbar-width: thin; scrollbar-color: var(--aits-line-soft, #F0F3F8) transparent; } .aitsdp .aitsdp-t { scroll-snap-align: center; } .aitsdp-col::-webkit-scrollbar { width: 5px; } .aitsdp-col::-webkit-scrollbar-track { background: transparent; } .aitsdp-col::-webkit-scrollbar-thumb { background: var(--aits-line, #E7ECF3); border-radius: 4px; } .aitsdp-col::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-line, #CFE0FA); } body.theme-dark .aitsdp-col { scrollbar-color: rgba(255, 255, 255, .16) transparent; } body.theme-dark .aitsdp-col::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); } .aitsdp .aitsdp-t { flex: 0 0 auto; padding: 7px 0; border: 0; border-radius: 8px; background: transparent; color: var(--aits-txt, #3D4757); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .14s ease, color .14s ease; } .aitsdp .aitsdp-t.is-on { background: var(--aits-blue-dark, #2060C0); color: #fff; } @media (hover: hover) { .aitsdp .aitsdp-t:hover:not(.is-on) { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); } body.theme-dark .aitsdp .aitsdp-t:hover:not(.is-on) { background: rgba(54, 128, 237, .22); color: var(--aits-blue-light, #8CBEFA); } } /* ── Foot ───────────────────────────────────────────────────────────── */ .aitsdp-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--aits-line, #E7ECF3); } .aitsdp .aitsdp-ghost { padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--aits-mut, #6B7686); font: inherit; font-weight: 650; cursor: pointer; transition: background-color .16s ease, color .16s ease; } .aitsdp .aitsdp-ghost[data-done] { margin-inline-start: auto; } /* The one filled control in the panel, on the same ramp every primary button on this install uses — white on --aits-blue measures 3.84:1, white on --aits-blue-dark measures 6.01:1. */ .aitsdp .aitsdp-done { margin-inline-start: auto; padding: 8px 18px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #357FEC 0%, #2B6BCC 30%, #1B4E9C 100%); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 6px 16px -6px rgba(53, 127, 236, .5); transition: transform .16s ease, box-shadow .16s ease; } @media (hover: hover) { .aitsdp .aitsdp-ghost:hover { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); } body.theme-dark .aitsdp .aitsdp-ghost:hover { background: rgba(54, 128, 237, .2); color: var(--aits-blue-light, #8CBEFA); } .aitsdp .aitsdp-done:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -6px rgba(53, 127, 236, .6); } } .aitsdp .aitsdp-done:active { transform: scale(.97); } .aitsdp :focus-visible { outline: 2px solid var(--aits-blue, #3680ED); outline-offset: 2px; } /* ── Phone: a bottom sheet ────────────────────────────────────────── A 320px panel anchored to a field is fine on a laptop and cramped on a phone, where it can also end up half under the keyboard. Below 560px it docks to the bottom edge full width instead — the script's inline top/left are overridden with !important because they are set per-open from measured coordinates that mean nothing in this layout. */ @media (max-width: 560px) { .aitsdp { top: auto !important; left: 0 !important; right: 0; bottom: 0; width: 100%; max-width: none; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; animation: aitsdp-up .2s ease-out; } @keyframes aitsdp-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } /* The two-column layout survives here now that the calendar can shrink, but the sheet is full-width so there is room to give the grid back its generous cells and the time columns a wider tap target. */ .aitsdp.has-time { width: 100%; } .aitsdp-body { gap: 10px; } .aitsdp .aitsdp-day { height: 40px; } .aitsdp-time { padding-inline-start: 10px; } .aitsdp-col { width: 58px; max-height: 196px; } .aitsdp .aitsdp-t { padding: 10px 0; } } /* Very narrow phones cannot hold a calendar and two time columns side by side at a legible size, so the time drops BELOW the calendar and its columns run the full width. Measured, not guessed: 7 x 30px cells plus two 58px columns plus the gutters needs ~330px of inner width, which a 360px device does not have once its own 16px margins are taken. */ @media (max-width: 400px) { .aitsdp-body { flex-direction: column; } .aitsdp-time { width: 100%; padding-inline-start: 0; padding-top: 10px; border-inline-start: 0; border-top: 1px solid var(--aits-line, #E7ECF3); } .aitsdp-tcol { flex: 1 1 0; } .aitsdp-col { width: 100%; max-height: 128px; } } @media (prefers-reduced-motion: reduce) { .aitsdp { animation: none; } .aitsdp .aitsdp-day, .aitsdp .aitsdp-nav, .aitsdp .aitsdp-done { transition: none; } .aitsdp .aitsdp-day:active, .aitsdp .aitsdp-nav:active, .aitsdp .aitsdp-done:hover, .aitsdp .aitsdp-done:active { transform: none; } }