/**
 * LangForge Admin Styles
 * Design system: Inter font, accent #0EC49E, cubic-bezier easing
 * Organized: Tokens → Base → Components → Plugin-specific → Scoped → Responsive
 */

/* =============================================
 1. CSS Custom Properties (Design Tokens)
 ============================================= */
:root {
    /* ── Shared tokens (same across all Forge plugins) ── */
    --bg-light:       #F8F9FC;
    --surface:        #FFFFFF;
    --border:         #E5E7EB;
    --text-primary:   #1A1A2E;
    --text-secondary: #4B5563;
    --text-muted:     #6B7280;
    --status-success: #10B981;
    --status-warning: #F59E0B;
    --status-error:   #EF4444;
    --status-success-light: #ECFDF5;
    --status-warning-light: #FFFBEB;
    --status-error-light:   #FEF2F2;
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   14px;
    --radius-xl:   16px;
    --radius-pill: 100px;
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
    --shadow-card: 0 24px 64px rgba(0,0,0,0.08);
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-base:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.lf-admin {
    /* ── LangForge accent palette (scoped — won't leak to other plugins) ── */
    --accent:         #0EC49E;
    --accent-hover:   #0CB38E;
    --accent-active:  #0A9B7C;
    --accent-light:   #34D9B4;
    --accent-muted:   #99F6E0;
    --accent-subtle:  #F0FDF9;
    --on-accent:      #0C1A3A;
    --shadow-btn:     0 4px 24px color-mix(in srgb, #0EC49E 35%, transparent);
    /* Legacy aliases */
    --avl-primary:          #0EC49E;
    --avl-primary-hover:    #0CB38E;
    --avl-primary-light:    #F0FDF9;
    --avl-success:          #10B981;
    --avl-success-light:    #ECFDF5;
    --avl-warning:          #F59E0B;
    --avl-warning-light:    #FFFBEB;
    --avl-danger:           #EF4444;
    --avl-danger-light:     #FEF2F2;
    --avl-text:             #1A1A2E;
    --avl-text-secondary:   #4B5563;
    --avl-border:           #E5E7EB;
    --avl-bg:               #F8F9FC;
    --avl-bg-white:         #FFFFFF;
    --avl-radius:           16px;
    --avl-radius-sm:        6px;
    --avl-shadow:           0 1px 3px rgba(0,0,0,0.08);
    --avl-shadow-md:        0 4px 16px rgba(0,0,0,0.08);
}

/* =============================================
 2. Scoped Font Application / Base Typography
 ============================================= */
.lf-admin .wrap {
    font-family: var(--font-sans);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.55;
}

.lf-admin .wrap p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px;
}

/* Muted helper text — Settings API description, form hints. Slightly smaller
 than body but generous line-height so stacked hints stay readable. */
.lf-admin .wrap .description,
.lf-admin .wrap p.description,
.lf-admin .form-table .description {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Form-table rhythm — breathe a bit so labels + inputs aren't cramped. */
.lf-admin .wrap .form-table th {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    padding: 18px 10px 18px 0;
    color: var(--text-primary);
}
.lf-admin .wrap .form-table td {
    padding: 14px 10px;
    font-size: 14px;
    line-height: 1.55;
}

/* Standalone labels (outside form-table). */
.lf-admin .wrap label {
    font-size: 14px;
    line-height: 1.5;
}

/* =============================================
 3. Branded Page Header (.avl-header)
 ============================================= */
.avl-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--accent);
}

.avl-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
}

.avl-header .avl-version {
    display: inline-block;
    padding: 3px 10px;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* =============================================
 4. Language Badge (.lf-lang-badge)
 ============================================= */
.lf-lang-badge {
    /* explicit line-height + vertical-align keeps the badge at a
 stable visual height regardless of the admin's base font-size. WP
 admin's default line-height inherits from the cell (~1.43), which
 made this badge tower when users bumped their admin font. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    min-height: 22px;
    line-height: 22px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    min-width: 28px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

.lf-missing {
    color: var(--text-muted);
    opacity: 0.6;
}

/* =============================================
 5. Post Editor Meta Box
 ============================================= */
/* Ensure accent tokens on post edit pages (body may lack .lf-admin) */
#lf_language_box,
.lf-language-box {
    --accent:         #0EC49E;
    --accent-hover:   #0CB38E;
    --accent-active:  #0A9B7C;
    --accent-light:   #34D9B4;
    --accent-muted:   #99F6E0;
    --accent-subtle:  #F0FDF9;
    --on-accent:      #0C1A3A;
}

/* LearnDash Course tabs hide every sidebar postbox outside the
 Course Page tab with `body[data-active-tab] #side-sortables .postbox`.
 Keep the canonical LangForge Language box visible there too, without
 re-opening unrelated third-party metaboxes. */
body.post-type-sfwd-courses[data-active-tab]:not([data-active-tab="post-body-content"]) #side-sortables #lf_language_box {
    display: block !important;
}

.lf-language-box {
    padding: 4px 0;
}

.lf-language-box select {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    font-family: var(--font-sans);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.lf-language-box select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    outline: none;
}

.lf-translation-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* grid row keeps a stable rhythm across states (linked / empty) and
 never wraps. Columns: language label | translation title (or dash) |
 actions — the title column uses minmax(0,1fr) so long titles truncate
 with ellipsis instead of shoving buttons down to the next line. Must
 stay in sync with the inline-style override in class-post-translation.php
 (the metabox re-emits the same selectors at higher specificity). */
.lf-translation-item {
    margin: 0;
    padding: 8px 8px 8px 10px;
    background: var(--bg-light);
    border-left: 3px solid var(--accent);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: minmax(34px, max-content) minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    line-height: 1.4;
    transition: background 0.25s var(--ease-out);
}

.lf-translation-item:hover {
    background: var(--accent-subtle);
}

.lf-translation-item:last-child {
    border-bottom: none;
}

.lf-lang-name {
    min-width: 34px;
    max-width: 46px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lf-edit-translation {
    min-width: 0;
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s var(--ease-out);
}

.lf-edit-translation:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.lf-translation-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    justify-self: end;
    min-width: 0;
}

.lf-unlink-btn {
    background: var(--status-error);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 3px 10px;
    font-size: 14px;
    line-height: 1.2;
    transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.lf-unlink-btn:hover {
    background: #C53030;
    transform: translateY(-1px);
}

.lf-create-translation,
.lf-link-translation {
    /* pin height via min-height + line-height so the "+ Create" /
 "Link existing" CTAs don't bloat when the admin font-size is
 increased. Also set vertical-align:middle to prevent baseline
 drift inside the metabox's flex row. Keeping !important because
 WP core .button rules otherwise win on specificity. */
    font-size: 12px !important;
    padding: 0 7px !important;
    min-height: 28px !important;
    line-height: 26px !important;     /* 28 − 2px border = 26 interior */
    border-radius: var(--radius-sm) !important;
    vertical-align: middle;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}

/* =============================================
 6. Settings Language Table (.lf-languages-table)
 ============================================= */
.lf-languages-table {
    margin-top: 16px;
    max-width: 900px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.lf-languages-table thead {
    background: var(--bg-light);
}

.lf-languages-table thead th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
}

.lf-languages-table .active-language {
    background: var(--status-success-light);
}

.lf-languages-table td,
.lf-languages-table th {
    padding: 12px 14px;
    vertical-align: middle;
}

.lf-languages-table tbody tr {
    transition: background 0.25s var(--ease-out);
}

.lf-languages-table tbody tr:hover {
    background: var(--accent-subtle);
}

.lf-languages-table input[type="checkbox"],
.lf-languages-table input[type="radio"] {
    margin: 0;
}

.lf-languages-table code {
    background: var(--bg-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--accent);
    font-weight: 600;
}

/* =============================================
 7. String Translation (.lf-string-filters, .lf-strings-table, .lf-add-string-form)
 ============================================= */
.lf-string-filters {
    margin: 20px 0;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.lf-string-filters label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.lf-string-filters select {
    padding: 8px 32px 8px 10px !important;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border) !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: var(--surface);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.lf-string-filters select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important;
    outline: none;
}

.lf-string-filters .button {
    padding: 8px 18px !important;
    border-radius: var(--radius-lg) !important;
    border: 1.5px solid var(--accent) !important;
    color: var(--accent) !important;
    background: var(--surface) !important;
    font-weight: 600 !important;
    transition: all 0.25s var(--ease-out) !important;
}

.lf-string-filters .button:hover {
    background: var(--accent-subtle) !important;
    transform: translateY(-1px);
}

/* (2026-04-30): drop the table-as-card styling that was breaking
 horizontal scroll. The table is now placed inside .lf-strings-tablewrap
 which carries the rounded card visuals; the table itself must be a
 plain table with overflow:visible so position:sticky on cells uses the
 wrap as the scroll context (table with overflow:hidden was previously
 captured as the sticky context, which doesn't scroll, so sticky cells
 would not detach from the table edge as the wrap scrolled).

 table-layout switches to auto + width:max-content so language columns
 size to their content + min-width hints, instead of dividing the
 viewport equally and ending up at 80px each when 8+ langs are active. */
.lf-strings-tablewrap {
    margin-top: 16px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.lf-strings-table {
    overflow: visible;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

.lf-strings-table th,
.lf-strings-table td {
    box-sizing: border-box;
    vertical-align: top;
    padding: 10px 12px;
}

.lf-strings-table textarea {
    width: 100%;
    min-height: 50px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-sans);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    resize: vertical;
    box-sizing: border-box;
}

.lf-strings-table textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    outline: none;
}

.lf-strings-table code {
    background: var(--bg-light);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.lf-add-string-form {
    background: var(--surface);
    padding: 20px 24px;
    margin: 24px 0;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

/* =============================================
 8. Cards (.avl-card, .avl-card-header, .forge-card)
 ============================================= */
.avl-card,
.forge-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.avl-card:hover,
.forge-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

/* Glow variant */
.forge-card--glow {
    border-color: var(--accent-muted);
}

.forge-card--glow:hover {
    box-shadow: var(--shadow-card),
                0 0 0 2px var(--accent-muted),
                0 0 32px color-mix(in srgb, var(--accent) 20%, transparent);
}

.avl-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.avl-card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-sans);
}

/* =============================================
 9. Progress Bars (.avl-progress-track, .forge-progress)
 ============================================= */
.avl-progress-track,
.forge-progress {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.avl-progress-bar,
.forge-progress__bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
    transition: width 0.4s var(--ease-out);
}

/* Color variants on legacy class */
.avl-progress-bar--success { background: var(--status-success); }
.avl-progress-bar--warning { background: var(--status-warning); }
.avl-progress-bar--danger  { background: var(--status-error); }
.avl-progress-bar--primary { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%); }

/* =============================================
 10. Notices / Toasts (.lf-notice, .avl-toast)
 ============================================= */
.lf-notice {
    padding: 14px 18px;
    margin: 16px 0;
    border: 1px solid var(--accent-muted);
    border-left: 4px solid var(--accent);
    background: var(--accent-subtle);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-sans);
}

.lf-notice.warning {
    border-color: #FDE68A;
    border-left-color: var(--status-warning);
    background: var(--status-warning-light);
}

.lf-notice.error {
    border-color: #FECACA;
    border-left-color: var(--status-error);
    background: var(--status-error-light);
}

.avl-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 14px 22px;
    background: var(--text-primary);
    color: #fff;
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 500;
    box-shadow: var(--shadow-md);
    z-index: 100000;
    animation: avl-toast-in 0.35s var(--ease-out);
}

.avl-toast--success { background: var(--status-success); }
.avl-toast--error   { background: var(--status-error); }

@keyframes avl-toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* =============================================
 11. Loading States (.lf-loading, .lf-spinner)
 ============================================= */
.lf-loading {
    opacity: 0.5;
    pointer-events: none;
}

.lf-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: lf-spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes lf-spin {
    to { transform: rotate(360deg); }
}

/* =============================================
 12. Buttons — Core System
 ============================================= */

/* Base legacy button */
.avl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    transition: all 0.3s var(--ease-out);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Legacy primary — maps to forge primary */
.avl-btn--primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-btn);
}

.avl-btn--primary:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn);
}

/* Legacy secondary */
.avl-btn--secondary {
    background: var(--bg-light);
    color: var(--text-primary);
    border: 1.5px solid var(--border);
}

.avl-btn--secondary:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: translateY(-1px);
}

/* Legacy danger */
.avl-btn--danger {
    background: var(--status-error-light);
    color: var(--status-error);
    border: 1.5px solid var(--status-error);
}

.avl-btn--danger:hover {
    background: var(--status-error);
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- Forge Design System Buttons ---------- */

/* Primary — filled with shimmer sweep */
.forge-btn--primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: var(--radius-lg);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-sans);
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-btn);
    transition: background 0.3s var(--ease-out),
                transform 0.3s var(--ease-out),
                box-shadow 0.3s var(--ease-out);
}

/* Shimmer sweep element */
.forge-btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 65%
    );
    background-size: 200% 100%;
    background-position: -100% 0;
    transition: background-position 0.6s var(--ease-out);
}

.forge-btn--primary:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn);
}

.forge-btn--primary:hover::after {
    background-position: 200% 0;
}

.forge-btn--primary:active {
    background: var(--accent-active);
    transform: translateY(0);
}

/* Secondary — outlined */
.forge-btn--secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-sans);
    border: 1.5px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.25s var(--ease-out),
                background  0.25s var(--ease-out),
                transform   0.25s var(--ease-out);
}

.forge-btn--secondary:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--accent);
    transform: translateY(-1px);
}

/* =============================================
 13. Form Inputs — Standalone Classes
 ============================================= */

/* Text / URL / email / password / number */
.forge-input {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--surface);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    box-sizing: border-box;
}

.forge-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    outline: none;
}

/* Select with custom arrow */
.forge-select {
    display: block;
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%234B5563' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    box-sizing: border-box;
    cursor: pointer;
}

.forge-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    outline: none;
}

/* =============================================
 14. Tabs (.forge-tabs)
 ============================================= */
.forge-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 4px;
}

.forge-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.25s var(--ease-out),
                background 0.25s var(--ease-out),
                box-shadow 0.25s var(--ease-out);
}

.forge-tabs__tab:hover {
    color: var(--accent);
}

.forge-tabs__tab--active,
.forge-tabs__tab.is-active {
    background: var(--surface);
    color: var(--accent);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* =============================================
 15. Badges (.forge-badge, .lf-lang-badge aliased above)
 ============================================= */
.forge-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-sans);
    line-height: 1;
    white-space: nowrap;
}

.forge-badge--accent   { background: var(--accent-subtle);          color: var(--accent); }
.forge-badge--success  { background: var(--status-success-light);   color: var(--status-success); }
.forge-badge--warning  { background: var(--status-warning-light);   color: var(--status-warning); }
.forge-badge--error    { background: var(--status-error-light);     color: var(--status-error); }
.forge-badge--neutral  { background: var(--bg-light);               color: var(--text-secondary); }

/* =============================================
 16. Alerts (.forge-alert)
 ============================================= */
.forge-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-size: 14px;
    font-family: var(--font-sans);
    line-height: 1.5;
}

/* Info / default — uses accent palette */
.forge-alert,
.forge-alert--info {
    background: var(--accent-subtle);
    border-color: var(--accent-muted);
    color: var(--on-accent);
}

.forge-alert--success {
    background: var(--status-success-light);
    border-color: #6EE7B7;
    color: #065F46;
}

.forge-alert--warning {
    background: var(--status-warning-light);
    border-color: #FDE68A;
    color: #92400E;
}

.forge-alert--error {
    background: var(--status-error-light);
    border-color: #FECACA;
    color: #991B1B;
}

/* =============================================
 17. Menu Language Select (.lf-menu-lang-select)
 ============================================= */
.lf-menu-lang-select {
    min-width: 150px;
    padding: 8px 36px 8px 12px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    font-family: var(--font-sans);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    -webkit-appearance: none;
    appearance: none;
}

/* =============================================
 18. Languages Card (.lf-languages-card)
 ============================================= */
.lf-languages-card {
    max-width: 820px;
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.lf-languages-card .lf-languages-table {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.lf-lang-flag    { font-size: 18px; margin-right: 8px; vertical-align: middle; }
.lf-lang-english { color: var(--text-secondary); font-size: 14px; margin-left: 4px; }

/* Display name input */
.lf-display-input {
    width: 80px !important;
    padding: 5px 10px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    font-family: var(--font-sans) !important;
    transition: border-color 0.25s var(--ease-out) !important;
}

.lf-display-input:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* Empty state */
.lf-empty-state {
    text-align: center;
    padding: 30px 20px !important;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Row entrance animation */
.lf-languages-card tr {
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.lf-lang-added {
    animation: lf-row-in 0.4s var(--ease-out);
}

@keyframes lf-row-in {
    from { background: var(--accent-subtle); opacity: 0.5; }
    to   { background: transparent;          opacity: 1; }
}

/* =============================================
 19. Remove Language Button (.lf-remove-lang-btn)
 ============================================= */
.lf-remove-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: all 0.25s var(--ease-out);
}

.lf-remove-lang-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lf-remove-lang-btn:hover {
    background: var(--status-error-light);
    border-color: var(--status-error);
    color: var(--status-error);
}

/* =============================================
 20. Add Language Autocomplete
 ============================================= */
.lf-add-language-wrap {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
}

.lf-add-language-input-wrap {
    position: relative;
    max-width: 360px;
}

.lf-add-lang-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-size: 18px;
    pointer-events: none;
}

.lf-add-language-input-wrap input {
    width: 100%;
    padding: 10px 12px 10px 36px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-family: var(--font-sans) !important;
    background: var(--surface) !important;
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.lf-add-language-input-wrap input:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

.lf-add-language-input-wrap input::placeholder {
    color: var(--text-muted);
}

/* Dropdown */
.lf-language-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    z-index: 10000;
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.lf-language-dropdown.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lf-lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s var(--ease-out);
    border-bottom: 1px solid var(--bg-light);
    font-size: 14px;
}

.lf-lang-option:last-child { border-bottom: none; }

.lf-lang-option:hover { background: var(--accent-subtle); }

.lf-opt-flag { font-size: 18px; flex-shrink: 0; }

.lf-opt-name        { flex: 1; min-width: 0; }
.lf-opt-name span   { color: var(--text-muted); font-size: 14px; }

.lf-lang-option code {
    background: var(--bg-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--accent);
    font-weight: 600;
    flex-shrink: 0;
}

.lf-lang-no-results {
    color: var(--text-muted);
    cursor: default;
    font-style: italic;
    justify-content: center;
}

.lf-lang-no-results:hover { background: transparent; }

/* =============================================
 21. Language Column Quick Links (.lf-col-trans)
 ============================================= */

/* tight line-height on the column cell so the badge + links
 control vertical rhythm, not inherited admin line-height. Without
 this, bumping the admin base font-size would stretch every posts-list
 row. The inner inline-flex pills (.lf-lang-badge + .lf-col-trans)
 each have their own min-height + line-height so they visually stay
 the same size as on default font. */
.column-lf_language {
    line-height: 1;
    white-space: normal;
    min-width: 130px;        /* WC squeezes this cell otherwise */
}

/* follow-up #2 (2026-04-24, second retest): the earlier 140px
 width + inline-flex wrap combo fixed the vertical stacking but, with
 WooCommerce's already-wide column set (name + sku + stock + price +
 date + categories + tags + trash + ...), forced the table over the
 viewport → whole page got a horizontal scrollbar. Two adjustments:

 (a) narrow the column to ~92px so 6–7 pills fit in a single row;
 (b) make the pills themselves compact on product screen only (smaller
 font, tighter padding, 18px height) so we can actually fit six
 `+code` entries inside 92px without wrap. On Posts/Pages the
 regular sizing stays because those screens have fewer siblings
 competing for horizontal space.

 Keep `max-width` intentionally tight — admins with 10+ languages will
 see pills wrap to a second line, which costs vertical space but
 NEVER triggers horizontal scroll on the whole products table. */
body.post-type-product th#lf_language,
body.post-type-product td.column-lf_language {
    width: 92px;
    min-width: 92px;
    max-width: 120px;
}

body.post-type-product .lf-lang-cell {
    gap: 2px;
}

body.post-type-product .lf-lang-cell .lf-lang-badge {
    padding: 0 5px;
    min-height: 18px;
    line-height: 18px;
    font-size: 10px;
}

body.post-type-product .lf-lang-cell .lf-col-trans {
    padding: 0 4px;
    min-height: 18px;
    line-height: 18px;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    min-width: 18px;
    margin: 0;
}

/* follow-up #2: hide "+create" dashed pills on the WC product
 list specifically — with 6–10 languages the cell would wrap to 3+
 rows of mostly-unused creation buttons and inflate every product row.
 Existing-translation pills stay visible (important cue). Users still
 create translations from the metabox on the product edit screen. */
body.post-type-product .lf-lang-cell .lf-col-trans--create {
    display: none;
}
.column-lf_language .lf-lang-badge,
.column-lf_language .lf-col-trans {
    margin-bottom: 2px;
}

/* inline-flex wrapper for badge + pills. WooCommerce's products
 list renders the language column at half the width of the regular
 Posts list; without a flex container the pills wrap one-per-line and
 "stack vertically", bloating every row and throwing off other column
 alignment. flex-wrap lets them flow to a second line only when the
 column is genuinely too narrow for them all. */
.lf-lang-cell {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    line-height: 1;
    vertical-align: middle;
}
.lf-col-trans {
    /* fixed min-height + matching line-height decouple these
 per-language pills from the cell's inherited line-height, which
 would otherwise stretch every row in the posts/pages list when
 the admin font-size was bumped. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    min-height: 20px;
    line-height: 20px;
    margin: 1px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s var(--ease-out);
    vertical-align: middle;
    box-sizing: border-box;
}

.lf-col-trans--exists {
    background: var(--accent-subtle);
    color: var(--accent);
}

.lf-col-trans--exists:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.lf-col-trans--create {
    background: var(--bg-light);
    color: var(--text-muted);
    border: 1px dashed var(--border);
    cursor: pointer;
}

.lf-col-trans--create:hover {
    background: var(--status-success-light);
    color: var(--status-success);
    border-color: var(--status-success);
}

/* =============================================
 22. Language Filter Links (.lf-language-filters)
 ============================================= */
.lf-language-filters { display: inline; }

.lf-language-filters a {
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: color 0.2s var(--ease-out);
}

.lf-language-filters a.current {
    font-weight: 700;
    color: var(--accent);
}

/* =============================================
 23. Taxonomy Term Translations
 ============================================= */
.avl-term-translations { max-width: 500px; }

.avl-term-translation-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.avl-term-translation-item:last-child { border-bottom: none; }

/* =============================================
 24. Visual Diff Panel (.lf-diff-*)
 ============================================= */
.lf-diff-notice {
    margin: 8px 0;
    padding: 10px 14px;
    background: var(--status-warning-light);
    border: 1px solid #FDE68A;
    border-radius: var(--radius-sm);
    overflow: hidden;
    word-wrap: break-word;
}

.lf-diff-notice-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    flex-wrap: wrap;
}

.lf-diff-ago {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 400;
}

.lf-diff-actions .button {
    border-radius: 14px !important;
    font-size: 14px !important;
    font-family: var(--font-base) !important;
    padding: 6px 14px !important;
    height: auto !important;
    line-height: 1.4 !important;
    border: 1.5px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    transition: all 0.2s var(--ease-spring) !important;
    box-shadow: none !important;
}
.lf-diff-actions .button:hover {
    transform: translateY(-1px);
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-subtle) !important;
}
.lf-diff-actions .button-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.lf-diff-actions .button-primary:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: #fff !important;
}

.lf-diff-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-top: 8px;
    overflow: hidden;
}

.lf-diff-panel-header {
    background: var(--bg-light);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.lf-diff-section {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.lf-diff-section:last-child { border-bottom: none; }

.lf-diff-section-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.lf-diff-body {
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

.lf-diff-added {
    background: #D4EDDA;
    color: #155724;
    border-radius: 2px;
    padding: 0 2px;
}

.lf-diff-removed {
    background: #F8D7DA;
    color: #721C24;
    text-decoration: line-through;
    border-radius: 2px;
    padding: 0 2px;
}

/* =============================================
 25. Dashboard Widget / Stats Grid
 ============================================= */
.avl-dashboard-stats { padding: 4px 0; }

/* =============================================
 26. Scoped Global Styles (.lf-admin)
 Applies design tokens to all WP form elements
 on LangForge admin pages.
 ============================================= */

/* Font on wrap */
.lf-admin .wrap {
    font-family: var(--font-sans);
}

/* Selects */
.lf-admin .wrap select,
.lf-admin .form-table select {
    padding: 10px 36px 10px 14px !important;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-color: var(--surface) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.lf-admin .wrap select:focus,
.lf-admin .form-table select:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* Text inputs & textareas */
.lf-admin .wrap input[type="text"],
.lf-admin .wrap input[type="url"],
.lf-admin .wrap input[type="password"],
.lf-admin .wrap input[type="number"],
.lf-admin .wrap input[type="email"],
.lf-admin .wrap input[type="search"],
.lf-admin .wrap textarea,
.lf-admin .form-table input[type="text"],
.lf-admin .form-table input[type="url"],
.lf-admin .form-table textarea {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: var(--font-sans) !important;
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out) !important;
    background: var(--surface) !important;
}

.lf-admin .wrap input[type="text"]:focus,
.lf-admin .wrap input[type="url"]:focus,
.lf-admin .wrap input[type="password"]:focus,
.lf-admin .wrap input[type="number"]:focus,
.lf-admin .wrap input[type="email"]:focus,
.lf-admin .wrap input[type="search"]:focus,
.lf-admin .wrap textarea:focus,
.lf-admin .form-table input[type="text"]:focus,
.lf-admin .form-table input[type="url"]:focus,
.lf-admin .form-table textarea:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* File inputs */
.lf-admin .wrap input[type="file"] {
    padding: 10px 16px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    width: 100%;
    max-width: 400px;
}

.lf-admin .wrap input[type="file"]:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--accent);
}

.lf-admin .wrap input[type="file"]::file-selector-button {
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    margin-right: 10px;
    transition: background 0.25s var(--ease-out);
}

.lf-admin .wrap input[type="file"]::file-selector-button:hover {
    background: var(--accent-hover);
}

/* Custom checkboxes */
.lf-admin .wrap input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    vertical-align: middle;
    position: relative;
    margin: 0 10px 0 0;
    flex-shrink: 0;
}

.lf-admin .wrap input[type="checkbox"]:checked {
    border-color: var(--accent);
    background: var(--accent);
}

.lf-admin .wrap input[type="checkbox"]::before {
    display: none !important;
}

.lf-admin .wrap input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lf-admin .wrap input[type="checkbox"]:hover {
    border-color: var(--accent);
}

/* Custom radios */
.lf-admin .wrap input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    vertical-align: middle;
    position: relative;
    margin: 0 6px 0 0;
    flex-shrink: 0;
}

.lf-admin .wrap input[type="radio"]:checked {
    border-color: var(--accent);
    background: var(--surface);
}

.lf-admin .wrap input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

.lf-admin .wrap input[type="radio"]:hover {
    border-color: var(--accent);
}

/* Label alignment */
.lf-admin .wrap label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.lf-admin .form-table label { margin-bottom: 4px; }

/* Primary button */
.lf-admin .wrap .button-primary,
.lf-admin .wrap input[type="submit"].button-primary {
    background: var(--accent) !important;
    background-image: none !important;
    border-color: var(--accent) !important;
    color: var(--on-accent) !important;
    border-radius: var(--radius-lg) !important;
    text-shadow: none !important;
    box-shadow: var(--shadow-btn) !important;
    padding: 8px 22px !important;
    font-weight: 600 !important;
    font-family: var(--font-sans) !important;
    transition: all 0.3s var(--ease-out) !important;
}

.lf-admin .wrap .button-primary:hover,
.lf-admin .wrap input[type="submit"].button-primary:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn) !important;
}

/* Secondary / outline buttons */
.lf-admin .wrap .button:not(.button-primary) {
    border-radius: var(--radius-lg) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    padding: 8px 18px !important;
    font-weight: 500 !important;
    font-family: var(--font-sans) !important;
    transition: all 0.25s var(--ease-out) !important;
}

.lf-admin .wrap .button:not(.button-primary):hover {
    border-color: var(--accent) !important;
    background: var(--accent-subtle) !important;
    color: var(--accent) !important;
    transform: translateY(-1px);
}

/* Tables */
.lf-admin .wrap table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    width: 100%;
}
/* (2026-04-30): the String Translation matrix is the one
 exception — it has its own scrolling wrapper (.lf-strings-tablewrap)
 carrying the rounded card visuals, and the table itself MUST keep
 overflow:visible / width:max-content / table-layout:auto so the
 sticky first columns work and language cells size to content + the
 220px min-width hint instead of dividing the viewport equally. */
.lf-admin .wrap .lf-strings-table {
    overflow: visible;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.lf-admin .wrap table thead th {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: var(--bg-light);
    border-bottom: 2px solid var(--border);
    padding: 12px 16px;
    text-align: left;
}

.lf-admin .wrap table:not(.form-table) tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--bg-light);
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.5;
}

.lf-admin .wrap table tbody tr:last-child td { border-bottom: none; }

.lf-admin .wrap table tbody tr {
    transition: background 0.25s var(--ease-out);
}

.lf-admin .wrap table tbody tr:hover {
    background: var(--accent-subtle);
}

.lf-admin .wrap table tbody td a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.lf-admin .wrap table tbody td a:hover {
    text-decoration: underline;
    color: var(--accent-hover);
}

/* form-table reset */
.lf-admin .wrap table.form-table {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.lf-admin .wrap table.form-table td,
.lf-admin .wrap table.form-table th {
    border-bottom: 1px solid var(--bg-light);
}

/* avl-card inside wrap */
.lf-admin .avl-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

/* Stats grid */
.lf-admin .avl-stats-grid { gap: 16px; }

/* Page titles */
.lf-admin .wrap > h1:first-child {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    font-family: var(--font-sans);
    color: var(--text-primary);
    padding-bottom: 14px;
    border-bottom: 2px solid var(--accent);
    margin: 0 0 24px;
}

/* Section headers */
.lf-admin .wrap > h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    font-family: var(--font-sans);
    color: var(--text-primary);
    margin: 32px 0 12px;
}
.lf-admin .wrap > h3,
.lf-admin .avl-card h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    font-family: var(--font-sans);
    color: var(--text-primary);
    margin: 24px 0 10px;
}

/* WP notices */
.lf-admin .wrap .notice {
    border-radius: var(--radius-md);
    border-left-width: 4px;
    font-family: var(--font-sans);
}

/* Postboxes */
.lf-admin .postbox {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Inline code */
.lf-admin .wrap code {
    background: var(--bg-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--accent);
}

/* Toggle — 44×24 px track with 20px knob */
.forge-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.forge-toggle__track {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: var(--radius-pill);
    transition: background 0.3s var(--ease-out);
    flex-shrink: 0;
}

.forge-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--surface);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s var(--ease-out);
}

.forge-toggle input:checked ~ .forge-toggle__track,
.forge-toggle__track.is-on {
    background: var(--accent);
}

.forge-toggle input:checked ~ .forge-toggle__track .forge-toggle__knob,
.forge-toggle__track.is-on .forge-toggle__knob {
    transform: translateX(20px);
}

/* =============================================
 27. Responsive Adjustments
 ============================================= */
@media (max-width: 782px) {
    .lf-string-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .lf-translation-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .lf-languages-table {
        font-size: 14px;
    }

    .lf-languages-table td,
    .lf-languages-table th {
        padding: 8px 6px;
    }

    .forge-tabs {
        flex-wrap: wrap;
    }

    .forge-btn--primary,
    .forge-btn--secondary {
        width: 100%;
        justify-content: center;
    }
}

/* WP/3rd-party notices: full width, normal WP styling */
.lf-admin .wrap > .notice:not(.forge-upgrade-notice),
.lf-admin .wrap > .error:not(.forge-upgrade-notice),
.lf-admin .wrap > .updated:not(.forge-upgrade-notice),
.lf-admin .wrap > div[class*="wpml-"] {
    max-width: none !important;
    margin: 5px 0 10px !important;
}

/* Forge upgrade notice: match plugin content width */
.lf-admin .forge-upgrade-notice {
    max-width: inherit !important;
    box-sizing: border-box !important;
}

/* Make .wrap a flex column so we can reorder children */
.lf-admin .wrap {
    display: flex !important;
    flex-direction: column !important;
}

/* Hidden h1 for WP notice insertion point */
.lf-admin .wrap > .wp-heading-inline { order: -10; }

/* WP/3rd-party notices: order 1 (first) */
.lf-admin .wrap > .notice:not(.forge-upgrade-notice),
.lf-admin .wrap > .error:not(.forge-upgrade-notice),
.lf-admin .wrap > .updated:not(.forge-upgrade-notice),
.lf-admin .wrap > div[class*="wpml-"],
.lf-admin .wrap > div[id*="wpml-"],
.lf-admin .wrap > div[id*="setting-error"] {
    order: 1 !important;
}

/* Forge upgrade notice: order 2 (after WP notices, before content) */
.lf-admin .wrap > .forge-upgrade-notice {
    order: 2 !important;
}

/* All other content: order 3 */
.lf-admin .wrap > *:not(.notice):not(.error):not(.updated):not(.forge-upgrade-notice):not(.wp-heading-inline):not(div[class*="wpml-"]):not(div[id*="wpml-"]):not(div[id*="setting-error"]) {
    order: 3 !important;
}

/* ── Freemius pages: reset button overrides ── */
.lf-admin .fs-actions .button,
.lf-admin .fs-actions .button-primary,
.lf-admin #fs_connect .button,
.lf-admin #fs_connect .button-primary {
  padding: 0 12px !important;
  height: 36px !important;
  line-height: 34px !important;
  border-radius: 4px !important;
  overflow: visible !important;
  transform: none !important;
}
.lf-admin .fs-actions .button-primary::after,
.lf-admin #fs_connect .button-primary::after {
  display: none !important;
}

/* =============================================================================
 Branded admin header (shared pattern across Forge plugins)
 Background uses --accent / --accent-active vars from the per-plugin scope.
 ============================================================================= */
/* Guard against horizontal scroll on our admin pages. Some content
 (comparison tables, license keys, long URLs) can exceed the WP content
 area on narrower viewports and shift the whole layout. */
.lf-admin.wrap, .sf-admin.wrap, .ff-admin.wrap, .fdf-admin.wrap,
.lf-admin .wrap, .sf-admin .wrap, .ff-admin .wrap, .fdf-admin .wrap { overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
.lf-admin table, .sf-admin table, .ff-admin table, .fdf-admin table { max-width: 100%; }

.sf-brand-header { display: none; }
.lf-admin .sf-brand-header,
.ff-admin .sf-brand-header,
.fdf-admin .sf-brand-header,
.sf-admin .sf-brand-header {
    display: block;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-active) 100%);
    margin: 10px 20px 18px 0;
    border-radius: 12px;
    padding: 14px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    position: relative;
    overflow: hidden;
}
.lf-admin .sf-brand-header::after,
.ff-admin .sf-brand-header::after,
.fdf-admin .sf-brand-header::after,
.sf-admin .sf-brand-header::after {
    /* Credits-widget forces overflow:visible on the header so its dropdown
 escapes. We can't rely on overflow:hidden to clip this decorative glow,
 so keep it entirely inside the header's right edge. */
    content: '';
    position: absolute;
    top: -30%;
    right: 0;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
    pointer-events: none;
}
.sf-brand-header__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1400px;
    position: relative;
    z-index: 1;
}
.sf-brand-header__logo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    background: #fff;
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    object-fit: contain;
    display: block;
}
.sf-brand-header__text { flex: 1; color: #fff; min-width: 0; }
.sf-brand-header__title { font-size: 17px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.2; }
.sf-brand-header__tagline { font-size: 14px; opacity: 0.88; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-brand-header__version { font-size: 14px; color: #fff; background: rgba(255,255,255,0.20); padding: 3px 10px; border-radius: 100px; font-weight: 600; letter-spacing: 0.3px; flex-shrink: 0; }
.fs-full-size-wrapper ~ .sf-brand-header,
.fs-full-size-wrapper .sf-brand-header { display: none; }

/* =============================================================================
 follow-up: design-system checkboxes
 Applied to every checkbox inside our admin scopes. Uses --accent so each
 plugin gets its own brand color.
 ============================================================================= */
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]),
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]),
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]),
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]) {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    vertical-align: middle;
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):hover,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):hover,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):hover,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):hover {
    border-color: var(--accent);
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):focus-visible,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):focus-visible,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):focus-visible,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked {
    background: var(--accent);
    border-color: var(--accent);
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked::after,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked::after,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked::after,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.sf-admin input[type="checkbox"]:not(.sf-raw):not([role]):disabled,
.lf-admin input[type="checkbox"]:not(.sf-raw):not([role]):disabled,
.ff-admin input[type="checkbox"]:not(.sf-raw):not([role]):disabled,
.fdf-admin input[type="checkbox"]:not(.sf-raw):not([role]):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Radios — same style, circular */
.sf-admin input[type="radio"]:not(.sf-raw),
.lf-admin input[type="radio"]:not(.sf-raw),
.ff-admin input[type="radio"]:not(.sf-raw),
.fdf-admin input[type="radio"]:not(.sf-raw) {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    vertical-align: middle;
    margin: 0;
}
.sf-admin input[type="radio"]:not(.sf-raw):hover,
.lf-admin input[type="radio"]:not(.sf-raw):hover,
.ff-admin input[type="radio"]:not(.sf-raw):hover,
.fdf-admin input[type="radio"]:not(.sf-raw):hover {
    border-color: var(--accent);
}
.sf-admin input[type="radio"]:not(.sf-raw):checked,
.lf-admin input[type="radio"]:not(.sf-raw):checked,
.ff-admin input[type="radio"]:not(.sf-raw):checked,
.fdf-admin input[type="radio"]:not(.sf-raw):checked {
    border-color: var(--accent);
}
.sf-admin input[type="radio"]:not(.sf-raw):checked::after,
.lf-admin input[type="radio"]:not(.sf-raw):checked::after,
.ff-admin input[type="radio"]:not(.sf-raw):checked::after,
.fdf-admin input[type="radio"]:not(.sf-raw):checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.sf-admin input[type="radio"]:not(.sf-raw):focus-visible,
.lf-admin input[type="radio"]:not(.sf-raw):focus-visible,
.ff-admin input[type="radio"]:not(.sf-raw):focus-visible,
.fdf-admin input[type="radio"]:not(.sf-raw):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Credit-cost badge (AI-triggering buttons) */
.lf-credits-badge{display:inline-block;font-size:14px;font-weight:600;padding:1px 5px;border-radius:3px;background:rgba(0,0,0,0.15);color:inherit;vertical-align:middle;margin-left:3px;letter-spacing:0.3px;line-height:1.4;opacity:0.9;}
button .lf-credits-badge,.button .lf-credits-badge,a.button .lf-credits-badge{background:rgba(255,255,255,0.25);color:#fff;}

.lf-credits-badge svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -1px;
}
.lf-credits-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ============================================================
 * Translation Memory admin page (lf-tm)
 *
 * Audit-r3 fix (L1): page promised by USER_GUIDE / KB.
 * Surface: search + filters + paginated table + edit modal +
 * delete + TMX import / export.
 * ============================================================ */
.lf-tm-page .lf-tm-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 8px;
  padding:14px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.lf-tm-page .lf-tm-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.lf-tm-page .lf-tm-filters input[type=search]{
  min-width:240px;
}
.lf-tm-page .lf-tm-arrow{
  font-size:18px;
  color:#6b7280;
}
.lf-tm-page .lf-tm-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.lf-tm-page .lf-tm-actions .button .dashicons{
  vertical-align:text-bottom;
  font-size:16px;
  width:16px;
  height:16px;
}
.lf-tm-page .lf-tm-status{
  margin:0 4px 12px;
  font-size:13px;
  color:#4b5563;
  display:flex;
  align-items:center;
  gap:6px;
}
.lf-tm-page .lf-tm-status #lf-tm-count{
  font-weight:600;
  color:#0e8a7a;
}
.lf-tm-page .lf-tm-spinner{
  background-image:url(/wp-admin/images/spinner.gif);
  background-size:20px 20px;
  background-position:center;
  width:20px;
  height:20px;
  visibility:hidden;
  margin:0;
  float:none;
}
.lf-tm-page .lf-tm-spinner.is-active{ visibility:visible; }
.lf-tm-page .lf-tm-table th{ font-weight:600; }
.lf-tm-page .lf-tm-table .lf-tm-col-source,
.lf-tm-page .lf-tm-table .lf-tm-col-target{ width:32%; }
.lf-tm-page .lf-tm-table .lf-tm-col-langs{ width:120px; }
.lf-tm-page .lf-tm-table .lf-tm-col-meta{ width:90px; }
.lf-tm-page .lf-tm-table .lf-tm-col-actions{ width:120px; text-align:right; }
.lf-tm-page .lf-tm-text{
  max-height:5.4em;
  line-height:1.4;
  overflow:hidden;
  word-break:break-word;
}
.lf-tm-page .lf-tm-pill{
  display:inline-block;
  padding:1px 6px;
  font-size:12px;
  font-weight:600;
  background:rgba(14,138,122,.10);
  color:#0e8a7a;
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.lf-tm-page .lf-tm-cell-actions .button-small .dashicons{
  font-size:14px;
  width:14px;
  height:14px;
  vertical-align:text-bottom;
}
.lf-tm-page .lf-tm-empty{
  background:#fff;
  border:1px dashed #d1d5db;
  border-radius:10px;
  padding:24px;
  margin:18px 0;
  text-align:center;
}
.lf-tm-page .lf-tm-empty h2{ margin-top:0; }
.lf-tm-page .lf-tm-empty-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:14px;
}

/* TM modals (edit + import) */
.lf-tm-modal[hidden]{ display:none !important; }
.lf-tm-modal .lf-tm-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  z-index:100000;
}
.lf-tm-modal .lf-tm-modal-dialog{
  position:fixed;
  z-index:100001;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  padding:24px;
  width:min(640px,calc(100vw - 40px));
  max-height:calc(100vh - 60px);
  overflow:auto;
}
.lf-tm-modal .lf-tm-modal-close{
  position:absolute;
  top:10px;
  right:14px;
  background:transparent;
  border:0;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  color:#6b7280;
}
.lf-tm-modal .lf-tm-modal-close:hover{ color:#1f2937; }
.lf-tm-modal h2{ margin-top:0; }
.lf-tm-modal .lf-tm-edit-row{
  margin:12px 0;
}
.lf-tm-modal .lf-tm-edit-row label{
  display:block;
  font-weight:600;
  margin-bottom:4px;
  font-size:13px;
  color:#374151;
}
.lf-tm-modal textarea{
  width:100%;
  font-family:inherit;
  font-size:14px;
  resize:vertical;
}
.lf-tm-modal textarea[readonly]{
  background:#f9fafb;
  color:#4b5563;
}
.lf-tm-modal .lf-tm-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}
.lf-tm-modal .lf-tm-import-result{
  margin-top:14px;
  padding:10px 12px;
  background:#f3f4f6;
  border-radius:6px;
}

/* ─── Forge button polish (no hover underline + dashicon vertical-center) ───
 * Applied 2026-04-29 to all 4 Forge plugins. Three goals:
 * 1. Buttons never underline on hover — they're buttons, not links.
 * 2. Dashicon + text inside a button share the same baseline (the WP
 * dashicons font has a 1-line-height that's slightly above the
 * button's text baseline by default).
 * 3. Inline-style "danger" buttons (red text + red border) keep their
 * colors regardless of cascade — see the !important inline styles
 * on Disconnect Google / Clear buttons. */
.lf-admin.wrap .button,
.lf-admin.wrap .button:hover,
.lf-admin.wrap .button:focus,
.lf-admin.wrap .button-primary,
.lf-admin.wrap .button-primary:hover,
.lf-admin.wrap .button-primary:focus,
.lf-admin.wrap a.button,
.lf-admin.wrap a.button-primary {
  text-decoration: none !important;
}
.lf-admin.wrap .button,
.lf-admin.wrap .button-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  vertical-align: middle;
}
.lf-admin.wrap .button .dashicons,
.lf-admin.wrap .button-primary .dashicons {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
}
/* End Forge button polish */

/* ─── Forge admin-notice positioning fix ───
 * Freemius and WP-core notices ("Yee-haw! Your plan was successfully
 * upgraded.", license callouts, etc.) sometimes get caught inside
 * flex H1 wrappers, ending up rendered to the right of the page
 * title rather than as a proper banner. Force them block-level, full
 * width, with normal margin — same behaviour as on stock WP screens.
 */
.lf-admin.wrap .notice,
.lf-admin.wrap .fs-notice,
.lf-admin.wrap .updated,
.lf-admin.wrap .update-nag,
.lf-admin.wrap .error {
  display: block !important;
  position: relative !important;
  float: none !important;
  width: auto !important;
  clear: both !important;
  margin: 12px 0 !important;
  padding: 12px 16px !important;
  box-sizing: border-box;
}
.lf-admin.wrap > h1 {
  /* Notices are sometimes injected as siblings of the H1 by JS — keep
 the H1 block-level so they don't get pulled into a flex row. */
  display: block !important;
}
/* End Forge admin-notice positioning fix */
