/*
 * en-masse EasyAdmin theme - component polish
 * ===========================================
 * Small, upgrade-safe refinements on top of variables.css plus the styles for
 * the bundle's own components (sidebar logo, dashboard stat cards, pending
 * tables). Custom components are namespaced with `enmasse-` so they never
 * collide with EasyAdmin / Bootstrap classes. No !important is used.
 */

/* ---- Buttons: subtle motion on hover ---- */
.btn {
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.btn-primary:hover:not(:disabled),
.action-new:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px var(--ea-brand-accent-ring);
}

/* ---- Sidebar brand logo ---- */
.enmasse-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.enmasse-brand-logo {
    max-height: 30px;
    width: auto;
    flex: 0 0 auto;
}

.enmasse-brand-text {
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Sidebar menu count badges (pending-work queues) ---- */
.menu-item .menu-item-badge {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    border-radius: 999px;
}

/* ================================================================
   Dashboard scaffold components
   ================================================================ */

.enmasse-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.enmasse-stat-card {
    display: block;
    padding: 1.1rem 1.25rem;
    background: var(--content-bg, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

a.enmasse-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    border-color: var(--ea-brand-accent-soft-border, var(--ea-brand-accent));
}

.enmasse-stat-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.enmasse-stat-card__label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6b7280);
}

.enmasse-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    color: var(--ea-brand-accent);
    background: var(--ea-brand-accent-soft);
    flex: 0 0 auto;
}

.enmasse-stat-card__value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
}

.enmasse-stat-card__hint {
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
}

.enmasse-stat-card__value--accent {
    color: var(--ea-brand-accent);
}

.enmasse-panel {
    background: var(--content-bg, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.enmasse-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    font-weight: 600;
}

.enmasse-panel__body {
    padding: 0.25rem 0;
}

.enmasse-panel__empty {
    padding: 1.5rem 1.1rem;
    color: var(--text-muted, #6b7280);
    text-align: center;
}

/* ================================================================
   Branded login page (@EnmasseAdmin/page/login.html.twig)
   ================================================================ */

.enmasse-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--ea-brand-accent-soft), transparent 60%),
        var(--body-bg, #f4f5f7);
}

.enmasse-login__card {
    width: 100%;
    max-width: 400px;
    padding: 2rem 2rem 1.75rem;
    background: var(--content-bg, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.enmasse-login__brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.enmasse-login__logo {
    max-height: 44px;
    width: auto;
    color: var(--ea-brand-accent);
}

.enmasse-login__wordmark {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ea-brand-accent);
}

.enmasse-login__subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted, #6b7280);
}

.enmasse-login__field {
    margin-bottom: 1rem;
}

.enmasse-login__field label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.85rem;
}

/* The login inputs are not inside EA's .form-widget, so brand their focus
   ring here (otherwise Bootstrap's default blue ring shows through). */
.enmasse-login .form-control:focus {
    border-color: var(--ea-brand-accent);
    box-shadow: 0 0 0 0.2rem var(--ea-brand-accent-ring);
    outline: 0;
}

.enmasse-login__forgot {
    margin-top: 0.4rem;
    font-size: 0.82rem;
}

.enmasse-login__remember {
    margin-bottom: 1rem;
}

.enmasse-login__submit {
    width: 100%;
    margin-top: 0.5rem;
}

.enmasse-login__error {
    margin-bottom: 1rem;
}

/* ================================================================
   Confirmation page (ConfirmActionTrait)
   ================================================================ */

.enmasse-confirm {
    max-width: 640px;
}

.enmasse-confirm__message {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.enmasse-confirm__summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.5rem;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--ea-brand-accent-soft);
    border-radius: 10px;
}

.enmasse-confirm__summary dt {
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.enmasse-confirm__summary dd {
    margin: 0;
}

.enmasse-confirm__form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* ================================================================
   Mobile: sticky bottom action bar for NEW/EDIT forms
   ================================================================ */
@media (max-width: 767.98px) {
    .ea-edit .form-actions,
    .ea-new .form-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 1rem -1rem -1rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: var(--content-bg, #fff);
        border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    }

    .ea-edit .form-actions .btn,
    .ea-new .form-actions .btn {
        flex: 1 1 auto;
    }
}

/* ================================================================
   Index lists: use the full available width
   ================================================================ */
/* EasyAdmin caps the content wrapper (~1440px), which on wide screens leaves a
   large band of empty space to the right of the datagrid. Widen only the index
   pages so lists fill the width; edit/new forms keep the readable default.
   `body.ea-index` outranks EasyAdmin's `.content-wrapper` rule on its own. Both
   properties are set because EasyAdmin has moved the cap from `max-width` to the
   logical `max-inline-size` across versions. */
body.ea-index .content-wrapper {
    max-width: 100%;
    max-inline-size: 100%;
}

/* ================================================================
   Embedded collection forms: stack label above input
   ================================================================ */
/* EasyAdmin renders each sub-field of an accordion collection item as a
   horizontal flex row (label pinned to ~20% on the left, widget on the right).
   Inside the narrow grid columns that sub-forms live in, the label wraps to two
   or three lines while the widget stays put, so the inputs no longer line up.
   Stack them like the rest of the form instead: label on its own line above a
   full-width widget. The `.accordion-body` in the selector keeps this more
   specific than EasyAdmin's own rule, so no !important is needed. */
.form-group.field-collection .accordion-item .accordion-body .form-group {
    display: block;
    align-items: stretch;
    padding: 8px 0;
}

.form-group.field-collection .accordion-item .accordion-body .form-group > label,
.form-group.field-collection .accordion-item .accordion-body .form-group .form-control-label {
    display: block;
    width: 100%;
    margin-bottom: 6px;
}

/* ================================================================
   Drag-and-drop list ordering (scripts/enmasse-sortable.js)
   A grip handle column is prepended to sortable index lists; dragging a row
   reorders it and the new order is persisted to the reorder endpoint. Colors
   use EasyAdmin's own tokens so they adapt to the light/dark scheme.
   ================================================================ */
th.enmasse-drag-col,
td.enmasse-drag-col {
    width: 38px;
    text-align: center;
    padding-inline: 6px;
}

.enmasse-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--text-muted, #6b7280);
    cursor: grab;
    transition: color 0.15s ease, background 0.15s ease;
}

.enmasse-drag-handle:hover {
    color: var(--ea-brand-accent, #4f46e5);
    background: var(--ea-brand-accent-soft, color-mix(in srgb, var(--ea-brand-accent, #4f46e5) 12%, transparent));
}

.enmasse-drag-handle:active {
    cursor: grabbing;
}

.datagrid tbody tr.enmasse-dragging {
    opacity: 0.55;
    background: var(--ea-brand-accent-soft, color-mix(in srgb, var(--ea-brand-accent, #4f46e5) 10%, transparent));
}

.enmasse-reorder-toast {
    position: fixed;
    inset-block-end: 20px;
    inset-inline-end: 20px;
    z-index: 1080;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--ea-brand-accent, #4f46e5);
    color: var(--ea-brand-on-accent, #fff);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.enmasse-reorder-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.enmasse-reorder-toast[data-state="ok"] {
    background: #16a34a;
    color: #fff;
}

.enmasse-reorder-toast[data-state="error"] {
    background: #dc2626;
    color: #fff;
}

/* ================================================================
   Visual media picker (Field/MediaPickerField + scripts/enmasse-media-picker.js)
   Replaces the plain <select> of stringified entities with a thumbnail preview
   plus a modal gallery to pick an image from the media library.
   ================================================================ */
.enmasse-media-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 560px;
}

.enmasse-media-preview {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 14px;
    border: 1px solid var(--border-color, #e3e7ee);
    border-radius: 10px;
    background: var(--body-bg, #fff);
    color: var(--text-color, #1f2937);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.enmasse-media-preview:hover {
    border-color: var(--ea-brand-accent, #4f46e5);
    box-shadow: 0 0 0 0.2rem var(--ea-brand-accent-ring, rgba(79, 70, 229, 0.25));
}

.enmasse-media-preview-img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
    border: 1px solid var(--border-color, #e3e7ee);
}

.enmasse-media-preview-name {
    font-size: 14px;
    word-break: break-word;
}

.enmasse-media-preview-empty {
    color: var(--text-muted, #6b7280);
    font-size: 14px;
}

.enmasse-media-choose {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    background: var(--ea-brand-accent, #4f46e5);
    color: var(--ea-brand-on-accent, #fff);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.enmasse-media-choose:hover {
    background: var(--ea-brand-accent-hover, color-mix(in srgb, var(--ea-brand-accent, #4f46e5) 88%, #000));
}

.enmasse-media-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(15, 20, 25, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
}

.enmasse-media-modal {
    width: min(920px, 100%);
    background: var(--body-bg, #fff);
    color: var(--text-color, #1f2937);
    border: 1px solid var(--border-color, #e3e7ee);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden;
}

.enmasse-media-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color, #e3e7ee);
}

.enmasse-media-search {
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 1px solid var(--border-color, #e3e7ee);
    border-radius: 10px;
    font-size: 15px;
    background: var(--body-bg, #fff);
    color: var(--text-color, #1f2937);
}

.enmasse-media-search:focus {
    outline: none;
    border-color: var(--ea-brand-accent, #4f46e5);
    box-shadow: 0 0 0 0.2rem var(--ea-brand-accent-ring, rgba(79, 70, 229, 0.25));
}

.enmasse-media-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: none;
    background: color-mix(in srgb, var(--text-color, #1f2937) 8%, transparent);
    border-radius: 6px;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
}

.enmasse-media-close:hover {
    background: color-mix(in srgb, var(--text-color, #1f2937) 14%, transparent);
}

.enmasse-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    padding: 18px;
    overflow-y: auto;
}

.enmasse-media-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-color, #1f2937) 6%, transparent);
    color: var(--text-color, #1f2937);
    cursor: pointer;
    transition: border-color 0.12s ease, transform 0.12s ease;
}

.enmasse-media-tile:hover {
    transform: translateY(-2px);
    border-color: var(--border-color, #e3e7ee);
}

.enmasse-media-tile.is-selected {
    border-color: var(--ea-brand-accent, #4f46e5);
}

.enmasse-media-tile-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: var(--body-bg, #fff);
}

.enmasse-media-tile-none {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #6b7280);
    font-size: 26px;
    border: 1px dashed var(--border-color, #e3e7ee);
}

.enmasse-media-tile-name {
    font-size: 12px;
    line-height: 1.3;
    word-break: break-word;
    text-align: center;
}