/* Sighaty date picker skin ("Ink & Brass"): squared cells, hairline rules,
   brass selection, no pills, no glows, per the token contract. The input
   keeps its page-level skin; this file only adds the picker affordance and
   the popover itself. Loaded after tokens.css so pages stay in control. */

/* the enhanced field: pointer + hidden caret say "opens a calendar", and a
   quiet brass glyph marks the affordance without adding chrome */
.sdp-input{font-family:var(--font-mono);letter-spacing:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='1' y='2.5' width='12' height='10.5' fill='none' stroke='%23B3924D' stroke-width='1.3'/%3E%3Cline x1='1' y1='5.5' x2='13' y2='5.5' stroke='%23B3924D' stroke-width='1.3'/%3E%3Cline x1='4.5' y1='1' x2='4.5' y2='4' stroke='%23B3924D' stroke-width='1.3'/%3E%3Cline x1='9.5' y1='1' x2='9.5' y2='4' stroke='%23B3924D' stroke-width='1.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-inline-end:34px}
html[dir="rtl"] .sdp-input{background-position:left 12px center}
.sdp-input::placeholder{color:var(--faint)}

.sdp-pop{position:fixed;z-index:1000;width:min(320px,calc(100vw - 16px));padding:12px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:0 10px 28px rgba(0,0,0,.45);font-family:var(--font-ar);color:var(--ink);animation:sdp-in .14s var(--ease-settle)}
@keyframes sdp-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sdp-pop{animation:none}}

/* header: nav chips, Gregorian title over the Hijri provenance line */
.sdp-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sdp-nav{appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:var(--r-md);width:30px;height:30px;font-size:1.15em;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.sdp-nav:hover{border-color:var(--gold);color:var(--cream)}
.sdp-nav:focus-visible,.sdp-cell:focus-visible,.sdp-clear:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
/* the title is the zoom-out control: days -> months -> years */
.sdp-title{flex:1;text-align:center;line-height:1.25;appearance:none;border:1px solid transparent;background:transparent;font:inherit;color:inherit;border-radius:var(--r-md);padding:2px 4px;cursor:pointer;min-width:0}
.sdp-title:hover:not(:disabled){border-color:var(--line);background:var(--tint)}
.sdp-title:disabled{cursor:default}
.sdp-title:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.sdp-title .sdp-g{display:block;color:var(--cream);font-weight:600;font-size:.95em}
.sdp-title .sdp-h{display:block;color:var(--brass-lit);font-family:var(--font-mono);font-size:.68em;margin-top:1px}
.sdp-caret{display:inline-block;margin-inline-start:5px;color:var(--brass-lit);font-size:.85em;line-height:1;vertical-align:middle}

/* zoomed-out grids: 3 x 4, same squared cells as the day grid */
.sdp-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.sdp-mcell{appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:var(--r-md);height:44px;font:inherit;font-size:.82em;font-family:var(--font-mono);cursor:pointer;padding:0}
.sdp-mcell:hover:not(:disabled){background:var(--tint);color:var(--cream);border-color:var(--line)}
.sdp-mcell.today{border-color:rgba(179,146,77,.55)}
.sdp-mcell.sel{background:var(--gold);border-color:var(--brass-deep);color:var(--gold-ink);font-weight:600}
.sdp-mcell.sel:hover{background:var(--gold-bright)}
.sdp-mcell.off{opacity:.35;cursor:not-allowed}
.sdp-mcell:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}

/* weekday strip + day grid */
.sdp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.sdp-week span{text-align:center;font-size:.62em;color:var(--faint);font-weight:600;letter-spacing:0;padding:3px 0}
.sdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.sdp-pad{visibility:hidden}
.sdp-cell{appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:var(--r-md);height:34px;font:inherit;font-size:.82em;font-family:var(--font-mono);cursor:pointer;padding:0}
.sdp-cell:hover{background:var(--tint);color:var(--cream);border-color:var(--line)}
.sdp-cell.today{border-color:rgba(179,146,77,.55)}
.sdp-cell.sel{background:var(--gold);border-color:var(--brass-deep);color:var(--gold-ink);font-weight:600}
.sdp-cell.sel:hover{background:var(--gold-bright)}
.sdp-cell.off{opacity:.35;cursor:not-allowed}

/* footer preview: selected date in both calendars, plus clear */
/* footer: the two calendars as editable fields, each writing through to the
   same Gregorian value the input stores */
.sdp-foot{display:flex;align-items:flex-end;gap:8px;border-top:1px solid var(--line);margin-top:8px;padding-top:8px;flex-wrap:wrap}
.sdp-f{flex:1 1 120px;min-width:0;display:block}
.sdp-f>span{display:block;font-size:.62em;color:var(--faint);font-weight:600;margin-bottom:3px}
.sdp-fin{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:var(--r-md);padding:5px 7px;font:inherit;font-size:.72em;font-family:var(--font-mono);letter-spacing:0}
.sdp-fin::placeholder{color:var(--faint)}
.sdp-fin:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--brass-deep)}
.sdp-fin.bad{border-color:var(--danger)}
.sdp-clear{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:var(--r-md);padding:5px 12px;font:inherit;font-size:.75em;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.sdp-clear:hover{border-color:rgba(200,131,111,.55);color:var(--danger)}