/*
 * [x-cloak] — kept here for reference but NOT sufficient on its own.
 * Alpine.js does not initialize on dynamically-rendered HTML column content
 * (Livewire v3 morphing does not trigger Alpine on these nodes), so x-cloak
 * is never removed and panels stay hidden permanently. Removed in favour of
 * the <details>/<summary> approach below.
 *
 * [x-cloak] { display: none !important; }
 */

/* Remove any gap Filament adds between the sidebar and the main content area.
   Each element keeps its own internal padding (sidebar: px-6, content: px-8). */
.fi-layout {
    gap: 0 !important;
}

/* Ignored renewal rows: dim all cells except the first (actions) column */
tr.renewal-ignored > td {
    opacity: 0.4;
}
tr.renewal-ignored > td:first-child {
    opacity: 1;
}

/* Action group dropdown: expand to fit labels, never clip or truncate */
.fi-dropdown-panel {
    width: max-content !important;
    max-width: none !important;
}
.fi-dropdown-item,
.fi-dropdown-panel button,
.fi-dropdown-panel a,
.fi-dropdown-panel li {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
}

/* Client column: each option stays on one piece, wraps between options */
.client-option {
    white-space: nowrap;
}

/* ── Popover (<details>/<summary>) ───────────────────────────────────────── */

/* Inline wrapper that provides the stacking context for the absolute panel */
.renewal-popover-wrapper {
    position: relative;
    display: inline-block;
}

/* <details> itself must be inline so it doesn't break the row layout */
.renewal-popover {
    display: inline;
    position: relative;
}

/* Hide the browser's default disclosure triangle */
.renewal-popover > summary {
    list-style: none;
    display: inline;
}
.renewal-popover > summary::-webkit-details-marker {
    display: none;
}

/* The panel floats absolutely below the summary so it never pushes rows apart */
.renewal-popover-panel {
    position: absolute;
    top: 1.4em; /* just below the summary line */
    left: 0;
    z-index: 100;
    min-width: 12rem;
    white-space: pre-wrap;
}

/* Client column: stack each option (name + buttons) in its own flex row */
.renewal-client-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* ── Settings form ───────────────────────────────────────────────────────── */

/*
 * Masonry layout for settings sections.
 *
 * Filament 5's Group renders: .settings-sections-masonry > .fi-sc > div (per section).
 * Masonry targets .fi-sc as container and its > div (wire:key wrappers) as items.
 * display:block overrides Filament's display:grid so Masonry can use absolute positioning.
 * Item widths (calc 50% - 12px) define 2 columns with a 24px gutter.
 */
.settings-sections-masonry > .fi-sc {
    display: block !important;
    position: relative;
}
.settings-sections-masonry > .fi-sc > div {
    width: calc(50% - 12px);
    margin-bottom: 1.5rem;
}
@media (max-width: 1023px) {
    .settings-sections-masonry > .fi-sc > div {
        width: 100%;
    }
}

/* Each field spans the full width of the section (no column split inside section grid) */
.settings-inline-section .fi-fo-field-wrp {
    grid-column: 1 / -1;
}

/* Action icon buttons in table columns: stay inline with adjacent text.
   Filament 5's global CSS sets button { display: block }, which would
   break the layout. This class is applied to every <button> and <a>
   rendered by action-button.blade.php. */
.strand-action-btn {
    display: inline-flex;
    align-items: center;
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */

/* Pill container: 28×16 px, padded 2px each side so the 12px thumb fits flush */
.renewal-switch-on,
.renewal-switch-off {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 1.75rem;        /* 28px */
    height: 1rem;          /* 16px */
    border-radius: 9999px;
    padding: 0 0.125rem;   /* 2px */
}
.renewal-switch-on  { background-color: var(--primary-500); }
.renewal-switch-off { background-color: var(--gray-300); }

/* Thumb: 12×12 px white circle */
.renewal-switch-thumb {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: white;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    margin-left: 0;
    transition: margin-left 0.2s ease;
}
.renewal-switch-on .renewal-switch-thumb {
    margin-left: 0.75rem; /* 12px = container(28) - thumb(12) - padding(2×2) */
}

/* On click: slide thumb to ON position and flash primary colour before Livewire responds */
.renewal-switch-off {
    transition: background-color 0.15s ease;
}
.renewal-switch-off:active {
    background-color: var(--primary-500);
}
.renewal-switch-off:active .renewal-switch-thumb {
    margin-left: 0.75rem;
}