/* ============================================================
   SAP-style inputs (SapDateInput, SapDecimalInput)
   Theme-aware: colors y glyphs vienen de tokens en themes.css.
   El icono del calendario se pinta con un SVG mask + currentColor
   para que contraste con el texto del input en cualquier theme.
   ============================================================ */

.sap-date-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    /* Una fecha siempre se muestra "dd.mm.aaaa" (10 chars) + glifo de calendario.
       Sin este cap el control hereda width:100% del contenedor y en filtros/forms
       se estira a toda la columna (se ve enorme). El cap lo deja del tamano del
       contenido; en celdas mas angostas que el cap, width:100% sigue mandando, asi
       que no rompe grids. Override por modulo/pagina via --sap-date-input-width. */
    max-width: var(--sap-date-input-width, 8.5rem);
}

.sap-date-input {
    flex: 1;
    min-width: 0;
    font-variant-numeric: tabular-nums;
    /* Reserva espacio para el glifo de calendario a la derecha. */
    padding-right: 22px;
}

.sap-date-input-invalid,
.sap-decimal-input-invalid {
    border: 1px solid var(--g-err) !important;
    background-color: var(--g-err-bg) !important;
    color: var(--g-err) !important;
}

/* Picker nativo "fantasma" — opacidad 0, ocupa el area del icono y
   abre el calendar nativo del navegador (que ya respeta color-scheme
   del theme via [data-theme]). */
.sap-date-input-picker {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    color-scheme: inherit;
}

.sap-date-input-picker::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

/* Glyph calendario visible. SVG mask + currentColor → contrasta con
   el texto del input en cualquier theme (light o dark). */
.sap-date-input-wrap::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    pointer-events: none;
    z-index: 1;
    background-color: var(--text-muted, currentColor);
    opacity: 0.7;
    transition: opacity .12s ease, background-color .12s ease;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") no-repeat center / contain;
}

.sap-date-input-wrap:hover::after {
    opacity: 0.95;
    background-color: var(--text);
}

.sap-date-input-wrap:has(.sap-date-input:focus)::after {
    opacity: 1;
    background-color: var(--accent);
}

.sap-date-input-wrap:has(.sap-date-input:disabled)::after,
.sap-date-input-wrap:has(.sap-date-input[readonly])::after {
    opacity: 0.35;
}

.sap-date-input,
.sap-decimal-input {
    /* Heredan estilos del CssClass que pase el caller (va01-grid-input, mc01-grid-input, etc).
       Por defecto, no imponemos color/borde para no romper paletas existentes. */
}

/* ============================================================
   Native <input type="date"> globales — contraste en dark themes
   ------------------------------------------------------------
   Los browsers respetan color-scheme del [data-theme] para el
   chrome del picker (popup), pero el ::-webkit-calendar-picker-
   indicator (icono dentro del input) varia segun engine. Forzamos
   visibilidad y reactividad al theme.
   ============================================================ */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.65;
    filter: var(--date-picker-icon-filter, none);
    transition: opacity .12s ease;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Inputs nativos heredan color-scheme del [data-theme] para que el
   popup calendar use chrome dark/light coherente con el theme. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    color-scheme: inherit;
}

/* Cap de ancho para date inputs NATIVOS (los que NO usan SapDateInput).
   Su contenido es fijo (dd/mm/aaaa + spinner + icono nativo), pero sin esto
   heredan width:100% del contenedor (rl-inp, zsf10-w100, mc01-control...) y se
   estiran a toda la columna. max-width solo recorta: los inputs ya angostos
   quedan igual, no rompe layouts. Override por pagina via --sap-native-date-width.
   No afecta el picker fantasma de SapDateInput (tiene width:18px fijo). */
input[type="date"] {
    max-width: var(--sap-native-date-width, 11rem);
}