/*
* Alpine.js x-cloak: hide elements until Alpine hydrates (prevents menu flash on load)
*/
[x-cloak] {
    display: none !important;
}

/*
* Design tokens (aligned to templates/element/theme.php for custom/third-party overrides)
*/
:root {
    --color-text: #334155;      /* slate-700 */
    --color-text-muted: #64748B; /* slate-500 */
    --color-surface: #F8FAFC;   /* slate-50 */
    --color-surface-white: #FFF;
    --color-border: #E2E8F0;    /* slate-200 */
    --color-border-light: #F1F5F9; /* slate-100 */
    --color-primary: #2B4BD7;    /* cobalt */
    --color-primary-focus: rgba(43, 75, 215, 0.18);
    --color-ink: #101A33;
    --color-violet-ai: #7C3AED;

    /* Subtle elevation (cards, inputs, panels) */
    --shadow-subtle: 0 1px 2px rgba(16, 26, 51, 0.04), 0 6px 20px -6px rgba(16, 26, 51, 0.1), 0 2px 0 rgba(226, 232, 240, 0.75);
    --shadow-subtle-edge: 0 1px 2px rgba(16, 26, 51, 0.04), 0 2px 0 rgba(226, 232, 240, 0.9);
}
body {
    position: relative;
    min-height: 100vh;
    background-color: #F8FAFC; /* slate-50: neutral, professional */
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("../img/illustrations/world_white.svg");
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: min(32%, 380px) auto;
    opacity: 0.05;
    pointer-events: none;
}

/*
* Subtle surfaces & form controls (shared across app + marketing)
*/
.surface-subtle {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-subtle);
}
.field-subtle {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-subtle-edge);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-subtle:focus {
    border-color: #94ADF4;
    outline: none;
    box-shadow:
        0 1px 2px rgba(43, 75, 215, 0.06),
        0 2px 0 rgba(43, 75, 215, 0.2),
        0 0 0 3px rgba(43, 75, 215, 0.12);
}

/*
* Duolingo-style chunky form controls (auth screens).
* Thick border + 3D bottom edge that mirrors .btn-3d. Each input gets a
* bold focus state in the macaw accent. Variants map the focus color to
* a different playful accent (--field-accent) so each field can carry its
* own meaning (email=macaw, password=fox, name=leaf, ...).
*/
.field-3d {
    --field-edge: #E2E8F0;
    --field-edge-active: #1899D6;
    --field-accent: #1CB0F6;
    display: block;
    width: 100%;
    border-radius: 0.875rem;
    border: 2px solid var(--field-edge);
    background-color: #fff;
    padding: 0.8125rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: #101A33;
    box-shadow: 0 3px 0 var(--field-edge);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-3d::placeholder {
    color: #94A3B8;
    font-weight: 500;
}
.field-3d:hover {
    border-color: #CBD5E1;
}
.field-3d:focus,
.field-3d:focus-visible {
    outline: none;
    border-color: var(--field-accent);
    box-shadow: 0 3px 0 var(--field-edge-active);
}
.field-3d--macaw  { --field-accent: #1CB0F6; --field-edge-active: #1899D6; }
.field-3d--leaf   { --field-accent: #58CC02; --field-edge-active: #46A302; }
.field-3d--fox    { --field-accent: #FF9600; --field-edge-active: #E08600; }

/* Auth panel: chunky white card with the 3D bottom edge, like the modals */
.auth-card {
    border-radius: 1.5rem;
    border: 1px solid #E2E8F0;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(16, 26, 51, 0.04),
        0 8px 28px -8px rgba(16, 26, 51, 0.12),
        0 4px 0 rgba(226, 232, 240, 0.85);
}

/* Auth label: bold, uppercase-ish, small — like Duolingo field captions */
.auth-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 0.375rem;
}

/* Floating translation bubbles on the auth brand panel */
.auth-bubble {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 20px -6px rgba(16, 26, 51, 0.35);
}
.pill-subtle {
    border: 1px solid var(--color-border);
    font-weight: 700;
    box-shadow: var(--shadow-subtle-edge);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.pill-subtle:hover {
    background: #F8FAFC;
}
.pill-subtle--active {
    border-color: #94ADF4;
    background: #EEF3FF;
    color: #2B4BD7;
    box-shadow:
        0 1px 2px rgba(43, 75, 215, 0.06),
        0 2px 0 rgba(43, 75, 215, 0.2);
}
.peer:checked ~ .pill-subtle {
    border-color: #94ADF4;
    background: #EEF3FF;
    color: #2B4BD7;
    box-shadow:
        0 1px 2px rgba(43, 75, 215, 0.06),
        0 2px 0 rgba(43, 75, 215, 0.2);
}

/*
* Misc (specific components: nav tabs, cards, filter inputs)
*/
button.nav-link.active {
    background-color: white !important;
    border-top-right-radius: 0.375rem; /* spacing-1.5 */
    border-top-left-radius: 0.375rem;
    border-top: 2px solid var(--color-primary);
}

/*
* Spinner / Loading States
*/
.htmx-indicator {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid #E2E8F0;
    box-shadow: var(--shadow-subtle);
}
.htmx-request .htmx-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}
.htmx-request.htmx-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inline spinner inside the translate workspace search field */
.translate-filter-spinner {
    display: none;
}
.translate-filter-spinner.htmx-request {
    display: block;
}

/*
* Tomselect
*/
.ts-dropdown {
    z-index: 200;
}
.ts-wrapper:not(.form-control, .form-select).single .ts-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
}
.separator {
    border-right: 1px solid #EFF2F6;
}

/*
* Translation Input Styles
*/
.translation-comments {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 33em;
}

/*
* History modal (legacy id hook for translations.js)
*/
#historyModal {
    transition: opacity 0.3s ease;
}
#historyModal.hidden {
    opacity: 0;
    pointer-events: none;
}
#historyModal:not(.hidden) {
    opacity: 1;
    pointer-events: all;
}

/*
* Content card (list pages): table flush inside card, no double shadow
*/
.content-card-table .table {
    border-radius: 0;
    box-shadow: none;
}

/*
* Datatables (hex aligned to Tailwind: gray-700, gray-50, blue-500)
*/
.table {
    width: 100%;
    background-color: var(--color-surface-white);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.table thead th {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border) !important;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-align: auto !important;
}
.table tbody td {
    padding: 1rem 1.25rem;
    color: #475569; /* slate-600 */
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.15s ease;
}
.table tbody tr:last-child td {
    border-bottom: none;
}
.table tbody tr:hover {
    background-color: var(--color-surface);
}
.dataTables_wrapper .search-bar {
    width: auto;
    max-width: 15rem;
    margin-bottom: 0;
    margin-left: auto;
}
.dataTables_wrapper .dt-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 1.5rem 1rem;
}
.dataTables_wrapper .dataTables_length select {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: 1px solid #CBD5E1; /* slate-300 */
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    background-color: var(--color-surface-white);
}
.dataTables_wrapper .dataTables_length select:hover,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--color-primary);
}
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}

/*
* Compact DataTables search (toolbar-integrated)
*/
.dt-search,
.dataTables_wrapper .dataTables_filter {
    position: relative;
    width: 15rem;
    max-width: 100%;
    margin: 0;
}
.dt-search label,
.dataTables_wrapper .dataTables_filter label {
    display: block;
    margin: 0;
    font-size: 0;
    line-height: 0;
}
.dt-search input,
.dataTables_wrapper .dataTables_filter input {
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem;
    margin: 0;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    background-color: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    color: #2B4BD7;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
    box-shadow: var(--shadow-subtle-edge);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dt-search input::placeholder,
.dataTables_wrapper .dataTables_filter input::placeholder {
    color: #64748B;
    font-weight: 600;
    opacity: 1;
}
.dt-search input:hover,
.dataTables_wrapper .dataTables_filter input:hover {
    border-color: #CBD5E1;
}
.dt-search input:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #94ADF4;
    background-color: #fff;
    outline: none;
    box-shadow:
        0 1px 2px rgba(43, 75, 215, 0.06),
        0 2px 0 rgba(43, 75, 215, 0.2),
        0 0 0 3px rgba(43, 75, 215, 0.12);
}
.dt-search-icon {
    position: absolute;
    top: calc(50% - 2px);
    left: 0.75rem;
    z-index: 1;
    transform: translateY(-50%);
    color: #2B4BD7;
    font-size: 1.125rem;
    line-height: 1;
    pointer-events: none;
}
.dt-search:focus-within .dt-search-icon {
    color: #1E37A8;
}
.dt-search-slot {
    flex: 0 0 auto;
    width: 16rem;
    max-width: min(16rem, 46vw);
}
table.dataTable.no-footer {
    border-bottom: none;
    margin-bottom: 0.625rem; /* spacing-2.5 */
}

/* Stili paginazione */
.dataTables_wrapper .dataTables_paginate {
    padding: 0.75rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.375rem 0.75rem;
    margin: 0 0.125rem;
    border: 1px solid #CBD5E1; /* slate-300 */
    border-radius: 9999px;
    color: var(--color-text) !important;
    background: var(--color-surface-white);
    font-size: 0.8125rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #EEF3FF !important; /* sky-tint */
    border-color: #94ADF4; /* cobalt-300 */
    color: #1E37A8 !important; /* cobalt-deep */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #ADB5BD !important; /* gray-400 */
    cursor: not-allowed;
    background-color: var(--color-surface-white);
    border-color: #CBD5E1;
    opacity: 0.65;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0.375rem;
    color: var(--color-text);
}
.dataTables_wrapper .dataTables_info {
    padding: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* Modal backdrop - semi-transparent with blur */
.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Modal shell & panel (Duolingo-style chunky cards) */
.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow-y: auto;
}
.modal-centering {
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-panel {
    position: relative;
    width: 100%;
    margin-inline: auto;
    background-color: #fff;
    border-radius: 1.25rem;
    border: 1px solid #E2E8F0;
    box-shadow:
        0 1px 2px rgba(16, 26, 51, 0.04),
        0 6px 20px -6px rgba(16, 26, 51, 0.1),
        0 2px 0 rgba(226, 232, 240, 0.75);
    overflow: hidden;
}
.modal-panel--sm { max-width: 28rem; }
.modal-panel--md { max-width: 32rem; }
.modal-panel--lg { max-width: 42rem; }

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #F1F5F9;
    background: #fff;
}
.modal-header-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #101A33;
    letter-spacing: -0.01em;
}
.modal-header-subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #64748B;
}
.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 9999px;
    color: #94A3B8;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.modal-close:hover {
    background-color: #F1F5F9;
    color: #475569;
    border-color: #E2E8F0;
}
.modal-close:focus-visible {
    outline: 2px solid #2B4BD7;
    outline-offset: 2px;
}

.modal-body {
    padding: 1.5rem;
}
.modal-body--flush {
    padding: 0;
}
.modal-body--centered {
    padding: 2rem 1.5rem;
    text-align: center;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #F1F5F9;
    background: #fff;
}

.modal-progress-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2B4BD7;
}
.modal-progress-track {
    width: 100%;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: #F1F5F9;
    overflow: hidden;
    border: 1px solid #E2E8F0;
}
.modal-progress-bar {
    height: 100%;
    border-radius: 9999px;
    background-image: linear-gradient(135deg, #2B4BD7, #7C3AED);
    transition: width 0.3s ease-out;
}

/* SweetAlert2 — aligned with modal / Duolingo design system */
.swal2-popup.swal-app-popup {
    border-radius: 1.25rem;
    border: 1px solid #E2E8F0;
    box-shadow:
        0 1px 2px rgba(16, 26, 51, 0.04),
        0 6px 20px -6px rgba(16, 26, 51, 0.1),
        0 2px 0 rgba(226, 232, 240, 0.75);
    padding: 1.5rem 1.5rem 1.25rem;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.swal2-title.swal-app-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #101A33;
    letter-spacing: -0.01em;
}
.swal2-html-container.swal-app-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #64748B;
}
.swal2-actions.swal-app-actions {
    gap: 0.75rem;
    margin-top: 1.25rem;
    width: auto;
}
button.swal2-styled.swal-app-btn {
    margin: 0;
    min-width: 5rem;
    box-shadow: 0 2px 0 var(--edge, #1E37A8);
}
button.swal2-styled.swal-app-btn:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--edge, #1E37A8);
}
.swal2-icon.swal-app-icon {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    border-width: 2px;
}

/* Language column chips (translate page) */
.language-chip {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #64748B;
    box-shadow:
        0 1px 2px rgba(16, 26, 51, 0.04),
        0 2px 0 rgba(226, 232, 240, 0.9);
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease,
        opacity 0.15s ease;
}
.language-chip:hover {
    border-color: #CBD5E1;
    color: #334155;
}
.language-chip:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(16, 26, 51, 0.04);
}
.language-chip--inactive {
    opacity: 0.85;
}
.language-chip--inactive:hover {
    opacity: 1;
    background: #F8FAFC;
}
.language-chip--active {
    border-color: #94ADF4;
    background: #F8FAFF;
    color: #2B4BD7;
    box-shadow:
        0 1px 2px rgba(43, 75, 215, 0.06),
        0 2px 0 rgba(43, 75, 215, 0.2);
    opacity: 1;
}
.language-chip--active:hover {
    background: #EEF3FF;
    border-color: #5F7FEA;
    color: #1E37A8;
}
.language-chip--active:active {
    box-shadow: 0 1px 2px rgba(43, 75, 215, 0.06);
}
.language-chip__name {
    max-width: 4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.language-chip__progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 0.75rem;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.language-chip__fill--progress {
    background: rgba(255, 150, 0, 0.08);
}
.language-chip__fill--complete {
    background: rgba(88, 204, 2, 0.08);
}
.language-badge {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #FF9600;
}
.language-badge-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 0.375rem;
    background: #58CC02;
    color: #fff;
    box-shadow: 0 1px 0 #46A302;
}

/* Member languages modal: collapse allowed languages when restrict is off (CSS-only) */
.member-languages-allowed {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
        grid-template-rows 0.25s ease,
        opacity 0.2s ease,
        margin-top 0.25s ease;
}
.member-languages-allowed__inner {
    min-height: 0;
    overflow: hidden;
}
.member-languages-panel:not(:has(.languages-restricted-toggle:checked)) .member-languages-allowed {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: -1.5rem;
    pointer-events: none;
}

/* Column Animations (language toggle in translate page) */
.column-transition {
    transition:
        opacity 0.3s ease,
        width 0.3s ease,
        padding 0.3s ease;
}
.column-hiding {
    opacity: 0;
    width: 0;
    padding-left: 0;
    padding-right: 0;
}
.column-hidden {
    display: none;
    opacity: 1;
    width: auto;
    padding: initial;
}
.column-showing {
    display: table-cell;
    opacity: 0;
    width: 0;
    padding-left: 0;
    padding-right: 0;
}
.column-visible {
    opacity: 1;
    width: auto;
    padding: initial;
}

/* Textarea adaptive */
textarea[name="translation"] {
    resize: none;
    overflow-y: hidden;
    min-height: 60px;
    transition: height 0.2s ease-out;
}