/* ==========================================================================
   Custom Date/Datetime Picker — shared component
   Loaded once (via @once in partials/datetime-picker.blade.php) regardless
   of how many pickers appear on a page. Calendar-grid visual language
   matches the Economic Calendar page's own hand-built picker
   (.eco-cal-dp-*) -- same look, generalized into a reusable form-field
   widget with .dtp-* class names instead of a page-specific prefix.
   ========================================================================== */

.dtp-wrap{ position:relative; }

/* Real <input> stays a fully valid, constraint-validated form control
   (so `required` and Laravel's server-side validation both keep working)
   -- just stacked invisibly behind the trigger button rather than
   display:none, so a native validation bubble still anchors in the right
   place if the field is left empty. */
.dtp-real{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; z-index:-1; pointer-events:none;
}

.dtp-trigger{
  position:relative; z-index:1; width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
.dtp-trigger::after{
  content:''; margin-left:auto; flex:0 0 auto;
  width:9px; height:9px; border-right:1.6px solid var(--ink-300); border-bottom:1.6px solid var(--ink-300);
  transform:rotate(45deg); translate:0 -2px;
}
.dtp-trigger:empty::before{ content:attr(data-placeholder); color:var(--ink-300); }

.dtp-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:40; width:280px;
  background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:10px;
  box-shadow:0 10px 28px rgba(43,44,38,.16); padding:12px;
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.dtp-panel.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.dtp-cal-head{ display:flex; align-items:center; gap:5px; margin-bottom:8px; }
/* Jump directly to any month/year instead of only stepping one month at
   a time via the nav arrows -- essential for a birthdate picker, which
   otherwise needs dozens of clicks to reach a decades-old date. */
.dtp-cal-month-select, .dtp-cal-year-select{
  flex:1 1 auto; min-width:0; font-family:var(--font-mono); font-size:12px; font-weight:700;
  color:var(--ink-900); border:1px solid var(--line); border-radius:6px; padding:4px 4px;
  background:var(--paper-sunk); cursor:pointer;
}
.dtp-cal-month-select{ flex-grow:1.4; }
.dtp-cal-month-select:focus, .dtp-cal-year-select:focus{ outline:none; border-color:var(--brass); }
.dtp-cal-nav{
  flex:0 0 auto; width:24px; height:24px; border-radius:5px; border:1px solid var(--line);
  background:var(--paper-sunk); color:var(--ink-700); cursor:pointer; font-size:14px; line-height:1;
  transition:background .15s ease, color .15s ease;
}
.dtp-cal-nav:hover{ background:var(--brass-wash); color:var(--brass-deep); }

.dtp-cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.dtp-cal-dow{ margin-bottom:4px; }
.dtp-cal-dow span{
  text-align:center; font-family:var(--font-mono); font-size:10px; color:var(--ink-500);
  text-transform:uppercase; letter-spacing:.03em; padding:2px 0;
}
.dtp-cal-day{
  aspect-ratio:1; border-radius:6px; border:none; background:transparent; color:var(--ink-900);
  font-family:var(--font-ui); font-size:12.5px; cursor:pointer;
  transition:background .13s ease, color .13s ease;
}
.dtp-cal-day:hover{ background:var(--brass-wash); }
.dtp-cal-day.today{ color:var(--brass-deep); font-weight:700; }
.dtp-cal-day.selected{ background:var(--chrome); color:#FFFFFF; font-weight:600; }
/* Days outside a min/max constraint (e.g. the 12 days after an 18th
   birthday cutoff falling inside its own month) -- visible so the
   month's real shape stays intact, but unpickable and visually muted. */
.dtp-cal-day.disabled{ color:var(--ink-300); cursor:default; pointer-events:none; }
.dtp-cal-day.disabled:hover{ background:transparent; }

.dtp-time-row{
  display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line);
}
.dtp-time-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-500);
}
.dtp-time-input{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-900);
  border:1px solid var(--line); border-radius:6px; padding:5px 8px;
  background:var(--paper-sunk); flex:1;
}
.dtp-time-input:focus{ outline:none; border-color:var(--brass); background:var(--paper-raised); }