/*
 * Form readability fixes for the panel.
 *
 * Plain CSS registered through FilamentAsset, for the usual reason: the panel
 * ships a PRE-COMPILED stylesheet holding only the classes Filament itself
 * uses, so utilities written in a Blade view or passed to extraAttributes()
 * resolve to nothing.
 *
 * These rules target Filament's own class names deliberately. The problem they
 * solve — long Arabic option labels wrapping into ragged multi-line blocks —
 * affects every checkbox list in the panel, not one screen.
 */

/* ------------------------------------------------------- checkbox lists */

/*
 * Align the box with the FIRST line of its label rather than the centre of a
 * wrapped block. Centring is fine on one line and looks broken on three.
 */
.fi-fo-checkbox-list-option {
    align-items: start;
}

.fi-fo-checkbox-list-option-label {
    line-height: 1.5;
    /*
     * Keeps the last line of a wrapped label from being a single orphan word,
     * which is what made the two-word grade names look ragged. Ignored by
     * browsers that do not support it, which simply get today's behaviour.
     */
    text-wrap: pretty;
}

/*
 * A little vertical room between options.
 *
 * Filament packs them tightly, which reads fine for one-line English labels and
 * turns into an unbroken wall when Arabic labels wrap.
 */
.fi-fo-checkbox-list-options {
    row-gap: 0.4rem;
}

/*
 * Opt-in modifier for lists whose options are known to be short.
 *
 * Holds each option on a single line and hands the overflow to an ellipsis, so
 * the grid keeps even rows instead of some cells being four lines tall. Only
 * applied where the full text is not needed to tell options apart.
 */
.alz-checklist .fi-fo-checkbox-list-option-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------- dark theme */

.dark .fi-fo-checkbox-list-option-label {
    color: rgb(228 228 231);
}

/* ------------------------------------------------------------ alerts page */

.alr-root {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*
 * The banner carries the meaning of an empty table.
 *
 * "No rows" means "everyone is here" during the alert window and "it is too
 * early to say" outside it. Those are opposite facts and must not look alike.
 */
.alr-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.75rem;
    background-color: rgb(255 255 255);
}

.alr-banner-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    margin-top: 0.1rem;
}

.alr-banner-title {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
}

.alr-banner-text {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: rgb(82 82 91);
}

.alr-banner-action {
    margin-inline-start: auto;
    flex: none;
}

.alr-banner--active {
    border-color: rgb(254 205 211);
    background-color: rgb(255 241 242);
}

.alr-banner--active .alr-banner-icon { color: rgb(225 29 72); }
.alr-banner--active .alr-banner-title { color: rgb(159 18 57); }

.alr-banner--warning {
    border-color: rgb(253 230 138);
    background-color: rgb(255 251 235);
}

.alr-banner--warning .alr-banner-icon { color: rgb(217 119 6); }
.alr-banner--warning .alr-banner-title { color: rgb(146 64 14); }

.alr-banner--quiet .alr-banner-icon { color: rgb(113 113 122); }

.dark .alr-banner {
    border-color: rgb(63 63 70);
    background-color: rgb(39 39 42);
}

.dark .alr-banner-text { color: rgb(161 161 170); }

.dark .alr-banner--active {
    border-color: rgb(159 18 57);
    background-color: rgb(136 19 55 / 0.3);
}

.dark .alr-banner--active .alr-banner-title { color: rgb(253 164 175); }

.dark .alr-banner--warning {
    border-color: rgb(146 64 14);
    background-color: rgb(120 53 15 / 0.3);
}

.dark .alr-banner--warning .alr-banner-title { color: rgb(253 230 138); }

/* -------------------------------------------------- password requirements */

.pws {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Four segments, one per satisfied rule, so progress is visible at a glance. */
.pws-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
}

.pws-seg {
    height: 0.3rem;
    border-radius: 999px;
    background-color: rgb(228 228 231);
    transition: background-color 0.15s ease;
}

.pws-seg--on.pws-seg--weak { background-color: rgb(244 63 94); }
.pws-seg--on.pws-seg--fair { background-color: rgb(245 158 11); }
.pws-seg--on.pws-seg--strong { background-color: rgb(16 185 129); }

.pws-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgb(82 82 91);
}

.pws-ok {
    color: rgb(5 150 105);
    font-weight: 500;
}

.pws-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.3rem 1rem;
}

.pws-rule {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgb(113 113 122);
    transition: color 0.15s ease;
}

/*
 * Green is the signal the whole component exists to give, but it is never the
 * ONLY signal: the ○ becomes a ✓ as well, so the state is still readable to
 * someone who cannot distinguish the two colours.
 */
.pws-rule--met {
    color: rgb(5 150 105);
    font-weight: 600;
}

.pws-mark {
    flex: none;
    width: 1rem;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1;
}

.dark .pws-seg { background-color: rgb(63 63 70); }
.dark .pws-label { color: rgb(161 161 170); }
.dark .pws-rule { color: rgb(161 161 170); }
.dark .pws-rule--met { color: rgb(52 211 153); }
.dark .pws-ok { color: rgb(52 211 153); }

/* Alpine sets x-cloak until it has initialised; without this the ✓ flashes. */
[x-cloak] { display: none !important; }