/* datepicker.css */
@layer cm.components {
  .cm-datepicker {
    position: fixed;
    z-index: var(--z-dropdown, 800);
    inline-size: min(19rem, calc(100vw - 1.5rem));
    box-sizing: border-box;
    padding: 0.625rem;
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 10px 30px rgba(2, 6, 23, 0.14));
  }
  .cm-datepicker *,
  .cm-datepicker *::before,
  .cm-datepicker *::after { box-sizing: border-box; }

  .cm-datepicker-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-block-end: 0.5rem;
  }
  .cm-datepicker-title {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text, #0f172a);
    text-transform: capitalize;
  }
  .cm-datepicker-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    color: var(--text-2, #475569);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    transition: background var(--dur-fast, 120ms) var(--ease-std, ease), color var(--dur-fast, 120ms) var(--ease-std, ease);
  }
  .cm-datepicker-nav:hover { background: var(--surface-2, #f1f5f9); color: var(--text, #0f172a); }
  .cm-datepicker-nav svg { display: block; }

  .cm-datepicker-grid { display: block; }
  .cm-datepicker-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .cm-datepicker-week--head { margin-block-end: 0.25rem; }
  .cm-datepicker-wd {
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-3, #94a3b8);
    padding-block: 0.25rem;
  }

  .cm-datepicker-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 2.125rem;
    padding: 0;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--text, #0f172a);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    transition: background var(--dur-fast, 120ms) var(--ease-std, ease), color var(--dur-fast, 120ms) var(--ease-std, ease);
  }
  .cm-datepicker-day:hover:not(.is-disabled):not(.is-selected) { background: var(--surface-2, #f1f5f9); }
  .cm-datepicker-day.is-outside { color: var(--text-3, #94a3b8); }
  .cm-datepicker-day.is-today { box-shadow: inset 0 0 0 1px var(--brand, #2563eb); font-weight: 600; }
  .cm-datepicker-day.is-selected {
    background: var(--brand, #2563eb);
    color: var(--brand-contrast, #fff);
    font-weight: 600;
    box-shadow: none;
  }
  .cm-datepicker-day.is-selected.is-today { box-shadow: inset 0 0 0 1px var(--surface, #fff); }
  .cm-datepicker-day.is-disabled {
    color: var(--text-3, #94a3b8);
    opacity: 0.4;
    cursor: not-allowed;
  }

  .cm-datepicker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--line, #e2e8f0);
  }
  .cm-datepicker-btn {
    flex: 0 0 auto;
    block-size: var(--control-h, 38px);
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brand, #2563eb);
    background: var(--brand-50, #eff6ff);
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    transition: background var(--dur-fast, 120ms) var(--ease-std, ease);
  }
  .cm-datepicker-btn:hover { background: var(--surface-2, #f1f5f9); }
  .cm-datepicker-btn--ghost {
    color: var(--text-2, #475569);
    background: transparent;
    border-color: var(--line, #e2e8f0);
  }

  .cm-datepicker :focus-visible {
    outline: 2px solid var(--brand, #2563eb);
    outline-offset: 1px;
  }
}