/* =============================================================================
   Custom Date Picker — standalone, reusable admin plugin
   -----------------------------------------------------------------------------
   A trigger button + calendar popover that replaces the native
   <input type="date">. The real value lives in a hidden <input> so it submits
   and is read exactly like a normal field.

   Markup is produced by  app/views/admin/elements/filters/custom_date_picker.html
   Behaviour is driven by  public/admin_panel/js/global/custom_date_picker.js

   All classes are namespaced `cdp-` and all design tokens are scoped to
   `.cdp-datefield` so the plugin never collides with a host page's styles.
   Override any token by re-declaring it on `.cdp-datefield` in the host page.
   ========================================================================== */

.cdp-datefield {
    /* Palette / tokens (scoped — do not leak to :root) */
    --cdp-primary:          #179138;
    --cdp-primary-soft:     rgba(23, 145, 56, 0.12);
    --cdp-content-primary:  #1a1a1a;
    --cdp-content-tertiary: #6c6c6c;
    --cdp-content-secondary:#3a3a3a;
    --cdp-gray-50:  #f9f9f9;
    --cdp-gray-100: #f2f2f2;
    --cdp-gray-300: #d4d4d4;
    --cdp-gray-400: #b4b4b4;
    --cdp-green-50:  #e6f5ec;
    --cdp-green-100: #b3e0c4;
    --cdp-green-700: #0e5722;
    --cdp-red-50:  #fef2f2;
    --cdp-red-100: #fde2e2;
    --cdp-red-600: #dc2626;
    --cdp-bg:            #ffffff;
    --cdp-border-card:   #e8e8e8;
    --cdp-border-input:  #d4d4d4;
    --cdp-border-subtle: #f2f2f2;
    --cdp-radius-sm: 8px;
    --cdp-radius-md: 12px;
    --cdp-radius-lg: 16px;
    --cdp-radius-full: 9999px;
    --cdp-shadow: 0px 8px 30px rgba(0, 0, 0, 0.15);
    --cdp-fast: 120ms;
    --cdp-default: 200ms;
    --cdp-easing: cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Trigger ───────────────────────────────────────────────────────────────*/
.cdp-trigger {
    display: inline-flex; align-items: center; gap: 8px; min-width: 138px;
    padding: 8px 12px; font-size: 13px; font-weight: 500; line-height: 1;
    color: var(--cdp-content-primary); background: var(--cdp-bg);
    border: 1px solid var(--cdp-border-input); border-radius: var(--cdp-radius-md);
    cursor: pointer; outline: none; text-align: left; white-space: nowrap;
    transition: border-color var(--cdp-default) var(--cdp-easing), box-shadow var(--cdp-default) var(--cdp-easing);
}
.cdp-trigger:hover { border-color: var(--cdp-gray-400); }
.cdp-trigger.is-open,
.cdp-trigger:focus-visible { border-color: var(--cdp-primary); box-shadow: 0 0 0 3px var(--cdp-primary-soft); }
.cdp-ico { font-size: 16px; color: var(--cdp-content-tertiary); flex-shrink: 0; }
.cdp-trigger.is-open .cdp-ico,
.cdp-datefield.has-value .cdp-ico { color: var(--cdp-primary); }
.cdp-text { flex: 1; color: var(--cdp-content-tertiary); font-weight: 500; }
.cdp-datefield.has-value .cdp-text { color: var(--cdp-content-primary); font-weight: 600; }

/* ── Per-field clear (X) — hidden until a value is set ─────────────────────*/
.cdp-clear {
    display: none; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0; padding: 0;
    color: var(--cdp-content-tertiary); background: var(--cdp-bg);
    border: 1px solid var(--cdp-border-input); border-radius: var(--cdp-radius-sm);
    cursor: pointer; transition: all var(--cdp-fast) var(--cdp-easing);
}
.cdp-clear i { font-size: 15px; line-height: 1; }
.cdp-datefield.has-value .cdp-clear { display: inline-flex; }
.cdp-clear:hover { color: var(--cdp-red-600); border-color: var(--cdp-red-100); background: var(--cdp-red-50); }

/* ── Calendar popover ──────────────────────────────────────────────────────*/
.cdp-cal {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 1200;
    width: 300px; padding: 16px 16px 12px;
    background: var(--cdp-bg); border: 1px solid var(--cdp-border-card);
    border-radius: var(--cdp-radius-lg); box-shadow: var(--cdp-shadow);
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity var(--cdp-fast) var(--cdp-easing), transform var(--cdp-fast) var(--cdp-easing);
}
.cdp-cal.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cdp-cal.align-right { left: auto; right: 0; }

.cdp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cdp-cal-title {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 15px; font-weight: 700; color: var(--cdp-content-primary);
    background: none; border: none; padding: 4px 6px; margin: -4px -6px;
    border-radius: var(--cdp-radius-sm); cursor: pointer;
}
.cdp-cal-title:hover { background: var(--cdp-gray-50); }
.cdp-cal-title i { font-size: 16px; color: var(--cdp-content-tertiary); }
.cdp-cal-nav { display: inline-flex; align-items: center; gap: 4px; }
.cdp-cal-nav button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; color: var(--cdp-content-secondary);
    background: var(--cdp-bg); border: 1px solid var(--cdp-border-card);
    border-radius: var(--cdp-radius-sm); cursor: pointer;
    transition: all var(--cdp-fast) var(--cdp-easing);
}
.cdp-cal-nav button:hover { background: var(--cdp-gray-50); border-color: var(--cdp-gray-300); color: var(--cdp-content-primary); }
.cdp-cal-nav button i { font-size: 18px; line-height: 1; }

.cdp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cdp-cal-wd {
    display: flex; align-items: center; justify-content: center; height: 30px;
    font-size: 11px; font-weight: 600; color: var(--cdp-content-tertiary);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.cdp-cal-day {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 36px; font-size: 13px; font-weight: 500; color: var(--cdp-content-primary);
    background: none; border: none; border-radius: var(--cdp-radius-full); cursor: pointer;
    transition: background var(--cdp-fast) var(--cdp-easing), color var(--cdp-fast) var(--cdp-easing);
}
.cdp-cal-day:hover { background: var(--cdp-gray-100); }
.cdp-cal-day.is-outside { color: var(--cdp-gray-400); }
.cdp-cal-day.is-today { color: var(--cdp-primary); font-weight: 700; }
.cdp-cal-day.is-today::after {
    content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--cdp-primary);
}
.cdp-cal-day.is-selected,
.cdp-cal-day.is-selected:hover { background: var(--cdp-primary); color: #fff; font-weight: 600; }
.cdp-cal-day.is-selected.is-today { color: #fff; }
.cdp-cal-day.is-selected.is-today::after { background: #fff; }
.cdp-cal-day.is-disabled { color: var(--cdp-gray-300); cursor: not-allowed; }
.cdp-cal-day.is-disabled:hover { background: none; }

/* ── Month quick-select (opened via the header chevron) ────────────────────*/
.cdp-cal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cdp-cal-month {
    display: flex; align-items: center; justify-content: center; height: 40px;
    font-size: 13px; font-weight: 500; color: var(--cdp-content-primary);
    background: var(--cdp-gray-50); border: 1px solid transparent; border-radius: var(--cdp-radius-sm); cursor: pointer;
    transition: all var(--cdp-fast) var(--cdp-easing);
}
.cdp-cal-month:hover { background: var(--cdp-gray-100); }
.cdp-cal-month.is-current { background: var(--cdp-green-50); color: var(--cdp-green-700); border-color: var(--cdp-green-100); font-weight: 600; }

/* ── Footer (Clear / Today) ────────────────────────────────────────────────*/
.cdp-cal-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cdp-border-subtle);
}
.cdp-cal-foot button { background: none; border: none; padding: 4px 6px; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: var(--cdp-radius-sm); }
.cdp-cal-clear { color: var(--cdp-content-tertiary); }
.cdp-cal-clear:hover { color: var(--cdp-content-primary); background: var(--cdp-gray-50); }
.cdp-cal-today { color: var(--cdp-primary); }
.cdp-cal-today:hover { background: var(--cdp-green-50); }