/*
 * Panel style overrides.
 *
 * Previously this lived in a custom Vite theme (resources/css/filament/
 * management/theme.css). Filament v4 requires Tailwind v4 for custom themes,
 * which would have forced the public site's CSS build to Tailwind v4 as well.
 * The theme only ever carried the rule below, so it is registered as a plain
 * CSS asset instead and the panel uses Filament's precompiled default theme.
 */
.fi-fo-rich-editor {
    overflow: hidden;
}

/*
 * Images migrated from Trix (Filament v3) carry their intrinsic pixel size,
 * e.g. width="4000" height="2252". TipTap's image node turns those into an
 * inline `width: 4000px; height: 2252px`, so once max-width caps the width the
 * fixed height leaves a tall, stretched image. Let the height follow the
 * width; resizing (when enabled) always preserves the aspect ratio anyway.
 */
.fi-fo-rich-editor .tiptap img {
    max-width: 100%;
    height: auto !important;
}

/*
 * Image captions (App\Filament\RichEditor\FigureCaptionPlugin): a <figure>
 * holds the image followed by its caption text. Mirrors the public site's
 * .text-editor-content figure styles in resources/css/app.css.
 */
.fi-fo-rich-editor .tiptap figure {
    position: relative;
    margin-block: 1rem;
    text-align: start;
    font-size: 0.875em;
    color: var(--gray-500);
}

.fi-fo-rich-editor .tiptap figure img:not(.ProseMirror-separator) {
    display: block;
    margin: 0 0 0.5rem;
}

/* No caption yet: ProseMirror then ends the figure with a trailing <br>, on
   whose (empty) line the placeholder sits. */
.fi-fo-rich-editor .tiptap figure:has(> br.ProseMirror-trailingBreak)::after {
    content: "Write a caption";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    pointer-events: none;
    color: var(--gray-400);
}

.fi-fo-rich-editor .tiptap:lang(bn) figure:has(> br.ProseMirror-trailingBreak)::after {
    content: "ক্যাপশন লিখুন";
}

/*
 * Google Analytics widgets (bezhansalleh/filament-google-analytics).
 *
 * The plugin's views use Tailwind utilities and expect them to be compiled
 * into a custom theme via @source. Without a theme those utilities don't exist
 * in Filament's precompiled CSS, so the date-range dropdowns are re-created
 * here, scoped to the plugin's markup.
 */

/* Stat widgets (ga-stats.blade.php): filter beside the stat label. Below
   320px it collapses to a funnel icon; from 320px it is a regular select. */
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn:has(.fi-wi-chart-filter) {
    container-type: inline-size;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn > .flex-1 {
    flex: 1 1 0%;
}

.fi-wi-stats-overview-stat .fi-wi-chart-filter.fi-input-wrp {
    position: relative;
    width: calc(var(--spacing) * 9);
    margin-inline: auto;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-wi-stats-overview-stat .fi-wi-chart-filter .fi-input-wrp-prefix {
    padding-inline-start: calc(var(--spacing) * 2) !important;
}

.fi-wi-stats-overview-stat .fi-wi-chart-filter .fi-input-wrp-content-ctn > div {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--spacing) * 9);
    pointer-events: none;
}

.fi-wi-stats-overview-stat .fi-wi-chart-filter .fi-input-wrp-content-ctn > div .fi-icon {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    transition: opacity 300ms;
}

.fi-wi-stats-overview-stat .fi-wi-chart-filter:hover .fi-input-wrp-content-ctn > div .fi-icon {
    color: var(--primary-500);
}

.dark .fi-wi-stats-overview-stat .fi-wi-chart-filter:hover .fi-input-wrp-content-ctn > div .fi-icon {
    color: var(--primary-400);
}

.fi-wi-stats-overview-stat .fi-wi-chart-filter .fi-input-wrp-content-ctn > div .fi-icon.opacity-0 {
    opacity: 0;
}

.fi-wi-stats-overview-stat .fi-wi-chart-filter select.fi-select-input {
    width: 100%;
    cursor: pointer;
    background-size: 0 !important;
}

@container (min-width: 320px) {
    .fi-wi-stats-overview-stat .fi-wi-chart-filter.fi-input-wrp {
        width: auto;
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    }

    .fi-wi-stats-overview-stat .fi-wi-chart-filter .fi-input-wrp-content-ctn > div {
        display: none;
    }

    .fi-wi-stats-overview-stat .fi-wi-chart-filter select.fi-select-input {
        background-size: 24px !important;
    }
}

/* Table widgets (Support\SelectAction): header select with a loading spinner. */
.fi-ac-select-action .fi-input-wrp {
    position: relative;
}

.fi-ac-select-action select.fi-select-input {
    padding-inline-end: calc(var(--spacing) * 8);
}

.fi-ac-select-action select.fi-select-input.pl-8 {
    padding-inline-start: calc(var(--spacing) * 8);
}

.fi-ac-select-action .fi-input-wrp > div {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(var(--spacing) * 2);
    align-items: center;
    justify-content: center;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gray-400);
}

.fi-ac-select-action .fi-input-wrp > div.hidden {
    display: none;
}

.dark .fi-ac-select-action .fi-input-wrp > div {
    color: var(--gray-300);
}