/* ============================================================================
   ethi-duet-datepicker.css — Duet Date Picker Theme (Self-Hosted)
   
   Combines Duet's default theme variables with GCWeb/WET4 overrides.
   No CDN dependency — this single file replaces:
     https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/themes/default.css
   
   Duet Date Picker v1.4.0 — https://github.com/duetds/date-picker
   License: MIT
   
   CREATED:  2026-02-11
   UPDATED:  2026-02-15 — Height match with .form-control, SVG icon via CSS,
                          Bootstrap 3 focus glow (#66afe9), error state mirroring,
                          transparent borderless toggle button, tight icon focus
   ============================================================================ */

/* ── Duet base theme variables (from default.css) ─────────────── */
:root {
  --duet-color-primary: #005fcc;
  --duet-color-text: #333;
  --duet-color-text-active: #fff;
  --duet-color-placeholder: #666;
  --duet-color-button: #f5f5f5;
  --duet-color-surface: #fff;
  --duet-color-overlay: rgba(0, 0, 0, 0.8);
  --duet-color-border: #333;
  --duet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --duet-font-normal: 400;
  --duet-font-bold: 600;
  --duet-radius: 4px;
  --duet-z-index: 600;
}

/* ── GCWeb/WET4 overrides ─────────────────────────────────────── */
duet-date-picker {
  --duet-color-primary: #2b4380;
  --duet-color-text: #333;
  --duet-color-text-active: #fff;
  --duet-color-button: transparent;
  --duet-font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --duet-radius: 3px;
  --duet-z-index: 600;
  display: block;
  width: 100%;
}

/* ── Match .form-control height exactly ──────────────────────── */
/* Bootstrap 3 .form-control: height:34px + 1px border = 36px     */
/* outer. font-size:14px, padding:6px 12px, line-height:1.428.    */
/* Border: 1px solid #ccc matching Bootstrap 3 default.           */
duet-date-picker .duet-date__input {
  height: 36px !important;
  padding: 6px 36px 6px 12px !important;
  font-size: 14px !important;
  line-height: 1.428571429 !important;
  box-sizing: border-box !important;
  border: 1px solid #ccc !important;
  border-radius: 3px !important;
  width: 100% !important;
}

/* ── Focus: Bootstrap 3 blue glow (matches .form-control:focus) ─ */
/* border-color: #66afe9                                            */
/* box-shadow: inset 0 1px 1px rgba(0,0,0,.075),                   */
/*             0 0 8px rgba(102,175,233,.6)                        */
duet-date-picker .duet-date__input:focus {
  border-color: #66afe9 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) !important;
  outline: none !important;
}

/* ── Print: hide the toggle button ────────────────────────────── */
@media print {
  duet-date-picker .duet-date__toggle {
    display: none !important;
  }
}

/* ── High contrast mode ───────────────────────────────────────── */
@media (forced-colors: active) {
  duet-date-picker {
    forced-color-adjust: none;
  }
}

/* ── Mobile responsiveness for calendar dialog ──────────────── */
/* Duet's dialog has a fixed ~310px width that can overflow on    */
/* narrow Android screens (320px viewport). These rules constrain */
/* the dialog to the viewport and scale inner elements down.      */

/* Dialog container: constrain to viewport */
duet-date-picker .duet-date__dialog {
  max-width: calc(100vw - 20px) !important;
  box-sizing: border-box !important;
}

/* Dialog content: prevent overflow */
duet-date-picker .duet-date__dialog-content {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Calendar table: scale down on very narrow screens */
duet-date-picker .duet-date__table {
  width: 100% !important;
  table-layout: fixed !important;
}

/* Day buttons: shrink on small screens */
@media (max-width: 359px) {
  duet-date-picker .duet-date__dialog {
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: calc(100vw - 16px) !important;
  }

  duet-date-picker .duet-date__cell {
    padding: 1px !important;
  }

  duet-date-picker .duet-date__day {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  duet-date-picker .duet-date__select select {
    font-size: 13px !important;
  }

  duet-date-picker .duet-date__nav button {
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* Medium small screens (360px-399px) */
@media (min-width: 360px) and (max-width: 399px) {
  duet-date-picker .duet-date__dialog {
    max-width: calc(100vw - 16px) !important;
  }

  duet-date-picker .duet-date__day {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ── Calendar icon: Custom SVG via CSS ────────────────────────── */
/* Icon always stays #333. Toggle is fully transparent with zero   */
/* visible border or background. Focus outline fits tight to icon. */

/* Hide Duet's default SVG */
duet-date-picker .duet-date__toggle svg {
  display: none !important;
}

/* Ensure wrapper is a positioning context for the toggle */
duet-date-picker .duet-date__wrapper {
  position: relative !important;
}

/* Toggle button: absolutely centered vertically */
duet-date-picker .duet-date__toggle {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  cursor: pointer;
  box-sizing: border-box !important;
}

/* Focus: thin black outline, snug to icon */
duet-date-picker .duet-date__toggle:focus {
  outline: 1px solid #000 !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* Hover: stay fully transparent */
duet-date-picker .duet-date__toggle:hover {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Validation error state ──────────────────────────────────── */
/* Mirrored from hidden native input via MutationObserver in JS.  */
/* Only border-color changes — no extra box-shadow, matching the  */
/* same weight as WET-BOEW .error on standard .form-control.      */

/* Red border on the text input (border-color only, no inset shadow) */
duet-date-picker.error .duet-date__input {
  border-color: #d3080c !important;
}

/* Red focus glow on the text input in error state */
duet-date-picker.error .duet-date__input:focus {
  border-color: #d3080c !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(211, 8, 12, .4) !important;
  outline: none !important;
}