/*!
 * Laravel Reports – shared UI styles (filter form, picker/dropdown, preview frame).
 *
 * Single source of truth for the Blade components and the Vue/React stubs.
 * Theme the UI by overriding the --reports-* variables below in your app CSS,
 * e.g.  :root { --reports-primary: #b91c1c; --reports-row-gap: 20px; }
 */

:root {
    /* Typography */
    --reports-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --reports-font-size: 13px;
    --reports-text: #111827;
    --reports-label: #374151;
    --reports-muted: #6b7280;

    /* Surfaces & lines */
    --reports-page-bg: #f3f4f6;
    --reports-bg: #fff;
    --reports-border: #d1d5db;
    --reports-border-soft: #e5e7eb;

    /* Brand */
    --reports-primary: #0f766e;
    --reports-primary-contrast: #fff;
    --reports-accent-soft-bg: #ecfdf5;
    --reports-accent-soft-border: #a7f3d0;
    --reports-accent-soft-text: #065f46;

    /* Shape & metrics */
    --reports-radius-sm: 6px;
    --reports-radius: 7px;
    --reports-radius-lg: 12px;
    --reports-control-padding: 6px 9px;
    --reports-value-width: min(400px, 90vw);
    --reports-operator-space: 104px;
    --reports-row-gap: 24px;
    --reports-column-gap: 20px;
    --reports-card-padding: 24px 26px;
    --reports-label-width: 140px;

    /* Preview frame */
    --reports-frame-chrome-bg: #111827;
    --reports-frame-chrome-text: #f9fafb;
    --reports-frame-button-bg: #1f2937;
    --reports-frame-button-border: #4b5563;
    --reports-frame-viewport-bg: #e5e7eb;
    --reports-frame-viewport-padding: 28px;
}

/* ==========================================================================
   Form page
   ========================================================================== */

.report-page {
    margin: 0;
    background: var(--reports-page-bg);
    color: var(--reports-text);
    font-family: var(--reports-font);
}

.report-form-page { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; }
.report-form-page__head h1 { margin: 0 0 4px; font-size: 22px; }
.report-form-page__head p { margin: 0 0 20px; color: var(--reports-muted); font-size: 14px; }

/* ==========================================================================
   Filter form
   ========================================================================== */

.report-filter {
    display: grid;
    grid-template-columns: minmax(var(--reports-label-width), max-content) minmax(0, 1fr);
    align-items: center;
    gap: var(--reports-row-gap) var(--reports-column-gap);
    padding: var(--reports-card-padding);
    background: var(--reports-bg);
    border: 1px solid var(--reports-border-soft);
    border-radius: var(--reports-radius-lg);
    color: var(--reports-text);
    font-family: var(--reports-font);
    font-size: var(--reports-font-size);
}

.report-filter *,
.report-filter *::before,
.report-filter *::after { box-sizing: border-box; }

.report-filter__label { color: var(--reports-label); font-weight: 600; }
.report-filter__control { display: flex; align-items: center; gap: 8px; min-width: 0; }

.report-filter__control input[type="text"],
.report-filter__control input[type="search"],
.report-filter__control input[type="number"],
.report-filter__control input[type="date"] {
    font: inherit;
    padding: var(--reports-control-padding);
    border: 1px solid var(--reports-border);
    border-radius: var(--reports-radius);
    background: var(--reports-bg);
    color: var(--reports-text);
}

.report-filter__control input[type="text"],
.report-filter__control input[type="search"] { width: 100%; max-width: var(--reports-value-width); }

.report-filter__control select {
    font: inherit;
    max-width: 100%;
    padding: var(--reports-control-padding);
    border: 1px solid var(--reports-border);
    border-radius: var(--reports-radius);
    background: var(--reports-bg);
    color: var(--reports-text);
}

.report-filter__text,
.report-filter__number,
.report-filter__date {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(var(--reports-value-width) + var(--reports-operator-space));
}

.report-filter__text > [data-value-single] { flex: 1 1 auto; min-width: 0; }

.report-filter__text select,
.report-filter__number select,
.report-filter__date select { min-width: 96px; flex-shrink: 0; }

/* The value area of number/date matches the text fields (400px / 90vw);
   "zwischen" splits it evenly between the two fields. */
.report-filter__number > span,
.report-filter__date > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: var(--reports-value-width);
    max-width: 100%;
    min-width: 0;
}

.report-filter__number input,
.report-filter__date input { flex: 1 1 0; width: auto; min-width: 0; }

.report-filter__number input[type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.report-filter__number input[type="number"]::-webkit-outer-spin-button,
.report-filter__number input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

.report-filter__range-sep { color: #9ca3af; }
.report-filter__hidden { display: none !important; }
.report-filter__list { display: flex; flex-direction: column; gap: 5px; }
.report-filter__row { display: flex; gap: 5px; align-items: center; }

.report-filter__actions { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; }

.report-filter__button {
    font: inherit;
    padding: 7px 14px;
    border: 1px solid var(--reports-border);
    border-radius: var(--reports-radius);
    background: #f9fafb;
    color: var(--reports-text);
    cursor: pointer;
}

.report-filter__button--primary {
    border-color: var(--reports-primary);
    background: var(--reports-primary);
    color: var(--reports-primary-contrast);
}

.report-filter__reset { color: var(--reports-muted); text-decoration: none; font-size: var(--reports-font-size); }
.report-filter__add { font: inherit; width: 28px; border-radius: var(--reports-radius); border: 1px dashed #9ca3af; background: var(--reports-bg); cursor: pointer; }
.report-filter__empty { grid-column: 1 / -1; color: var(--reports-muted); }

/* Multiselect dropdown */

.report-multiselect { position: relative; flex: 1 1 auto; min-width: 0; }

/* No operator select: widen to the value column + operator column so the
   right edge lines up with the operator+value rows (text/number/date). */
.report-multiselect__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: min(calc(var(--reports-value-width) + var(--reports-operator-space)), 100%);
    padding: var(--reports-control-padding);
    font: inherit;
    text-align: left;
    border: 1px solid var(--reports-border);
    border-radius: var(--reports-radius);
    background: var(--reports-bg);
    color: var(--reports-text);
    cursor: pointer;
}

.report-multiselect__summary { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.report-multiselect__caret { color: var(--reports-muted); }

.report-multiselect__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    max-width: 480px;
    max-height: 260px;
    overflow: auto;
    padding: 6px;
    background: var(--reports-bg);
    border: 1px solid var(--reports-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
}

.report-multiselect__option { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--reports-radius-sm); cursor: pointer; }
.report-multiselect__option:hover { background: #f3f4f6; }

/* Dual-list picker */

.report-picker__summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-picker__chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }

.report-picker__chip {
    padding: 1px 8px;
    font-size: 12px;
    color: var(--reports-accent-soft-text);
    background: var(--reports-accent-soft-bg);
    border: 1px solid var(--reports-accent-soft-border);
    border-radius: 999px;
}

.report-picker__dialog { width: min(720px, 92vw); padding: 16px; border: 1px solid var(--reports-border); border-radius: var(--reports-radius-lg); }
.report-picker__grid { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 10px; }
.report-picker__panel ul { height: 280px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; border: 1px solid var(--reports-border-soft); border-radius: 8px; }
.report-picker__item { padding: 4px 8px; font-size: var(--reports-font-size); cursor: pointer; }
.report-picker__item.is-active { background: var(--reports-primary); color: var(--reports-primary-contrast); }
.report-picker__arrows { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.report-picker__arrows button { font: inherit; border: 1px solid var(--reports-border); border-radius: var(--reports-radius); background: #f9fafb; cursor: pointer; }
.report-picker__footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.report-picker__panel input[type="search"] { width: 100%; font: inherit; padding: var(--reports-control-padding); border: 1px solid var(--reports-border); border-radius: var(--reports-radius); }

@media (max-width: 640px) {
    .report-filter { grid-template-columns: minmax(0, 1fr); gap: 18px 16px; padding: 20px; }
    .report-filter__actions { grid-column: 1; justify-content: flex-start; }

    /* Stack the operator above its value(s) so narrow phones never overflow
       the card (no horizontal scrolling). */
    .report-filter__text,
    .report-filter__number,
    .report-filter__date { flex-direction: column; align-items: stretch; }

    .report-filter__text > select,
    .report-filter__number > select,
    .report-filter__date > select { align-self: flex-start; }

    .report-filter__number > span,
    .report-filter__date > span { flex-direction: column; align-items: stretch; }

    .report-filter__number input,
    .report-filter__date input { width: 100%; }

    .report-filter__range-sep { display: none; }

    .report-multiselect { min-width: 0; }
    .report-multiselect__toggle { max-width: 100%; }
    .report-multiselect__panel { max-width: min(480px, 90vw); }
    .report-picker__chips { max-width: 100%; }
}

/* ==========================================================================
   Preview frame
   ========================================================================== */

.report-preview { margin: 0; background: var(--reports-frame-viewport-bg); }

.report-frame__chrome {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 16px;
    background: var(--reports-frame-chrome-bg);
    color: var(--reports-frame-chrome-text);
}

.report-frame__title { font-weight: 600; }
.report-frame__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.report-frame__locale {
    padding: 5px 10px;
    font: inherit;
    border: 1px solid var(--reports-frame-button-border);
    border-radius: var(--reports-radius-sm);
    background: var(--reports-frame-button-bg);
    color: var(--reports-frame-chrome-text);
    cursor: pointer;
}

.report-frame__button {
    padding: 5px 12px;
    font: inherit;
    border: 1px solid var(--reports-frame-button-border);
    border-radius: var(--reports-radius-sm);
    background: var(--reports-frame-button-bg);
    color: var(--reports-frame-chrome-text);
    text-decoration: none;
    cursor: pointer;
}

.report-frame__zoom { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.report-frame__viewport { padding: var(--reports-frame-viewport-padding); background: var(--reports-frame-viewport-bg); }
.report-frame__iframe { display: block; width: 100%; border: 0; }

@media (max-width: 640px) {
    .report-frame__viewport { padding: 14px; }
}

@media print {
    .report-frame__chrome,
    .report-frame__viewport { display: none; }
}