/* ═══════════════════════════════════════════════
   Glance Live Search - Admin UI
   Color: Bleu (#123375) / Violet (#645fe5)
   ═══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   SVG ISOLATION - protection against themes / plugins
   ══════════════════════════════════════════════════ */

/* Prevents global theme rules (max-width:100%, height:auto) from
   breaking inline icon dimensions in our admin interface.
   Scoped to plugin containers - does NOT affect WP notices. */

.glse-header svg,
.glse-card svg,
.glse-sidebar svg {
    display: inline-block;
    max-width: none !important;
    max-height: none !important;
    overflow: visible;
    vertical-align: middle;
}

/* Prevents "svg { fill: currentColor }" or "svg * { fill: inherit }" rules
   common in themes from filling our stroke-only icons. */

.glse-header svg[fill="none"],
.glse-card svg[fill="none"],
.glse-sidebar svg[fill="none"],
.glse-header svg[fill="none"] *,
.glse-card svg[fill="none"] *,
.glse-sidebar svg[fill="none"] * {
    fill: none !important;
}

/* Nav icons: layout only. The size lives with the rest of the nav rules, and
   an !important here would outrank the media query that grows the icons once
   the labels are dropped - the block above already neutralises the theme rules
   this was defending against. */

.glse-nav-icon svg {
    display: block;
    flex-shrink: 0;
}

/* ══════════════════════
   PRO BADGES & LOCKS
   ══════════════════════ */

.glse-pro-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--glse-secondary);
    border-radius: 4px;
    padding: 1px 6px;
    vertical-align: middle;
    line-height: 1.5;
}

/* ── Sous-section (ex: Mobile dans Comportement) ── */

.glse-subsection {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.glse-subsection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 8px;
    padding: 0;
}

.glse-subsection-title svg {
    color: var(--glse-text-secondary);
    flex-shrink: 0;
}

:root {
    --glse-accent: #123375;
    --glse-secondary: #645fe5;
    --glse-accent-hover: #0d2560;
    --glse-accent-light: #e6ecf7;
    --glse-accent-medium: #8fa8d8;
    --glse-accent-text: #123375;
    --glse-accent-glow: rgba(18,51,117,.15);
    --glse-accent-glow-strong: rgba(18,51,117,.25);
    --glse-surface: #ffffff;
    --glse-border: #dde3ef;
    --glse-border-light: #edf0f7;
    --glse-text-primary: #000000;   /* true black - labels, values, headings */
    --glse-text-secondary: #4a5570;
    --glse-text-muted: #6b7488;   /* 4.7:1 on white - AA; was #8a93a8 at 3.1:1 */
}

/* ── Reset - scoped to plugin UI containers, not WP notices ── */

.glse-wrap { max-width: none; margin-right: 20px; }

body.js [class*="glse-dep-"],
body.js .glse-design-row { display: none; }

.glse-header *,
.glse-card *,
.glse-sidebar * { box-sizing: border-box; }

.glse-header h1,
.glse-header h2,
.glse-header h3,
.glse-card h1,
.glse-card h2:not(.hndle),
.glse-card h3,
.glse-sidebar h1,
.glse-sidebar h2,
.glse-sidebar h3 { margin: 0; padding: 0; }

/* ══════════════════════
   HEADER
   ══════════════════════ */

.glse-header {
    position: relative;
    /* Tighter than the 24px column gap: the header is a band the eye
       crosses, not a sibling of the panels below it. */
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--glse-surface);
    border: 1px solid var(--glse-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(18,51,117,.04);
}

.glse-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
}

.glse-header-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* Reads as a statement, not a caption: the logo carries the name, this
   carries what the plugin does. The rule between them is what keeps the two
   from merging into one long wordmark. */

.glse-header-tagline {
    padding-left: 18px;
    border-left: 2px solid var(--glse-border);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--glse-text-primary);
    letter-spacing: -.005em;
}

.glse-header-logo {
    height: 44px;
    width: auto;
    display: block;
}

/* ══════════════════════
   LAYOUT
   ══════════════════════ */

.glse-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* Notices land above the header, where the wp-header-end marker puts them.
   Their default margin is tuned for a stock admin page and leaves them inset
   and flush against what follows. */

.glse-wrap > .notice,
.glse-wrap > .updated,
.glse-wrap > .error {
    margin: 0 0 14px;
}

/* ══════════════════════
   MAIN CARD
   ══════════════════════ */

.glse-card {
    flex: 1 1 0%;
    min-width: 0;
    background: var(--glse-surface);
    border: 1px solid var(--glse-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(18,51,117,.04);
    overflow: hidden;
}

.glse-card-inner {
    display: flex;
    min-height: 480px;
}

/* ── Vertical Nav ── */

.glse-nav {
    width: 210px;
    flex-shrink: 0;
    padding: 16px 12px;
    background: #f3f7fc;
    border-right: 1px solid var(--glse-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.glse-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--glse-text-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    border: 1px solid transparent;
}

.glse-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: .85;
    transition: opacity .15s;
}

/* The markup draws these at stroke-width 2. Thickening them here keeps the
   icons level with the label now that it carries more weight - an outline icon
   next to bold text otherwise reads as faded. */

.glse-nav-icon svg { width: 18px; height: 18px; stroke-width: 2.25; }

.glse-nav-item:hover {
    background: var(--glse-accent-light);
    color: var(--glse-accent-text);
}

.glse-nav-item:hover .glse-nav-icon { opacity: 1; }

/* Weight alone no longer separates the active tab from the rest, so the
   contrast is carried by colour, the border and a heavier stroke. */

.glse-nav-item--active {
    background: var(--glse-accent-light);
    color: var(--glse-accent-text);
    font-weight: 700;
    border-color: var(--glse-accent-medium);
    box-shadow: 0 0 0 1px var(--glse-accent-glow);
}

.glse-nav-item--active .glse-nav-icon {
    opacity: 1;
    color: var(--glse-accent);
}

.glse-nav-item--active .glse-nav-icon svg { stroke-width: 2.6; }

/* ── Content area ── */

.glse-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.glse-settings-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Panel header ──
   The nav in the first column already names the open tab, so this heading
   repeats it. It earns its place only below 480px, where the nav drops its
   labels and the icon alone has to carry the name - shown again there.
   Hiding it costs nothing to assistive tech: the panel takes its accessible
   name from aria-labelledby, which points at the tab, not at this heading. */

.glse-panel-header {
    display: none;
    /* No side padding: the panel around it already sets the column's
       gutter, and adding a second one pushed the title in past the
       fields it introduces. */
    padding: 0;
}

.glse-panel-header h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--glse-text-primary);
    letter-spacing: -.01em;
}

/* ── Tab panels ── */

/* The top padding is the panel's own: the heading above used to supply it,
   and it is hidden at this width. Below 480px it comes back and brings its
   own, so the panel drops this there rather than stacking the two. */

/*
 * Le bas est plus genereux que le haut a dessein : la derniere ligne d'une
 * section peut ouvrir un panneau de couleur, et 12px le laissaient coller au
 * bord arrondi de la carte.
 */
.glse-tab-panel { display: none; flex: 1; padding: 22px 28px 28px; }

.glse-tab-panel--active {
    display: block;
    animation: glseFadeIn .2s ease;
}

@keyframes glseFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
.glse-tab-panel {
        animation: none !important;
    }
}

/* ── Form table - minimal overrides on top of WP native .form-table ── */

.glse-tab-panel .form-table { margin: 0; }

.glse-tab-panel .form-table th { vertical-align: middle; }

.glse-tab-panel .form-table td { vertical-align: middle; }

/* The panel height summary, sitting above the table rather than in a cell.
   Set apart from the field descriptions below it: it reports on the section
   as a whole, not on any one control. */

.glse-panel-size {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 4px 0 18px;
    padding: 11px 14px;
    border: 1px solid var(--glse-border);
    border-left: 3px solid var(--glse-accent-medium);
    border-radius: 8px;
    background: #f7f9fc;
    font-style: normal;
    font-size: 13px;
    line-height: 1.6;
    color: var(--glse-text-secondary);
}

.glse-panel-size strong { color: var(--glse-text-primary); }

/* ── Inputs - WP native throughout ── */


/*
 * Les etiquettes qui enveloppent leur case a cocher, et elles seules.
 *
 * Sans le `>` la regle atteignait 47 etiquettes au lieu de 20 : les intitules
 * de ligne, les miennes au-dessus de chaque controle, et surtout celle dont le
 * selecteur de couleur enveloppe son champ. Ce champ heritait alors d'un
 * curseur en forme de main - une zone de saisie qui se presente comme un bouton
 * - et d'une mise en boite flex qu'il n'avait pas demandee.
 */
.glse-tab-panel td > label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* ── Design preset cards ── */

.glse-preset-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 8px;
}

.glse-preset-card {
    flex: 0 0 auto;
    width: 136px;
    border: 2px solid var(--glse-border);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.glse-preset-card:hover {
    border-color: var(--glse-accent-medium);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(18,51,117,.1);
}

.glse-preset-card--active {
    border-color: var(--glse-accent);
    box-shadow: 0 0 0 3px var(--glse-accent-glow);
}

.glse-preset-card--active .glse-preset-name {
    color: var(--glse-accent);
}

.glse-preset-card input[type="radio"] {
    display: none !important;
    width: auto; height: auto;
    background: none; border: none;
    border-radius: 0;
}

.glse-preset-card input[type="radio"]::after { display: none; }

.glse-preset-preview {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
}

.glse-preset-bar {
    display: flex;
    align-items: center;
    padding: 0 5px 0 9px;
    height: 28px;
    width: 100%;
    gap: 5px;
    background: #fff;
}

.glse-preset-bar-ph {
    flex: 1;
    font-size: 8.5px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
}

.glse-preset-bar-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The name closes the card now that the description is gone, so it carries
   the bottom padding the description used to provide. */

.glse-preset-name {
    text-align: center;
    padding: 6px 6px 7px;
    font-size: 11.5px;
    font-weight: 700;
    border-top: 1px solid var(--glse-border-light);
    color: var(--glse-text-primary);
}

/* ── Override label styles inside preset grid ── */

.glse-tab-panel .glse-preset-grid label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: inherit;
    color: inherit;
}

/* ── Toggle switches ── */

.glse-tab-panel input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 40px; height: 22px;
    background: #d1cdd8;
    background-image: none;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.glse-tab-panel input[type="checkbox"]::before {
    display: none !important;
}

.glse-tab-panel input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    transition: transform .2s cubic-bezier(.175,.885,.32,1.275);
}

.glse-tab-panel input[type="checkbox"]:checked {
    background: var(--glse-accent);
    background-image: none;
}

.glse-tab-panel input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

.glse-tab-panel input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px var(--glse-accent-glow-strong);
    outline: none;
}

@keyframes glseFadeInOut {
    0%   { opacity: 0; transform: translateY(-4px); }
    8%   { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Save footer - uses WP .button .button-primary ── */

.glse-form-footer {
    padding: 16px 28px;
    border-top: 1px solid var(--glse-border);
    background: #f3f7fc;
    margin-top: auto;
}

.glse-form-footer .button-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.glse-spin {
    display: inline-block;
    animation: glseBtnSpin .7s linear infinite;
    vertical-align: middle;
}

@keyframes glseBtnSpin { to { transform: rotate(360deg); } }

/* ══════════════════════
   SIDEBAR
   ══════════════════════ */

.glse-sidebar {
    width: 260px;
    flex: 0 0 260px;
    position: sticky;
    top: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.glse-sidebar-card {
    background: var(--glse-surface);
    border: 1px solid var(--glse-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: hidden;
}

.glse-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 700;
    color: var(--glse-text-primary);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--glse-border-light);
    background: #f3f7fc;
}

.glse-sidebar-header svg { color: var(--glse-accent); flex-shrink: 0; }

.glse-sidebar-body { padding: 14px 18px; }

.glse-sidebar-label {
    margin: 10px 0 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--glse-text-muted);
}

.glse-code-block {
    background: var(--glse-accent-light);
    border: 1px solid var(--glse-accent-medium);
    border-radius: 8px;
    padding: 9px 14px;
    margin-bottom: 4px;
}

.glse-code-block code {
    font-size: 12px;
    color: var(--glse-accent-text);
    background: none; border: none; padding: 0;
    word-break: break-all;
    font-weight: 500;
}

/* ══════════════════════
   RESPONSIVE
   ══════════════════════ */

/* ── Tablet ≤ 1200px ── */

@media (max-width: 1200px) {
.glse-layout { flex-direction: column; }

.glse-header,
.glse-card,
.glse-sidebar { width: 100%; }

.glse-card { flex: 0 0 auto; }

.glse-sidebar {
        flex: 0 0 auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

.glse-sidebar-card { flex: 1 1 auto; min-width: 0; }
}

/* ── WP Mobile ≤ 782px ── */

@media (max-width: 782px) {
/* Wrap spacing */

.glse-wrap { margin-right: 10px; margin-left: 0; }

.glse-layout { gap: 16px; }

/* Header - wrap badge on small widths */

.glse-header { border-radius: 10px; margin-bottom: 12px; }

.glse-header-inner {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

.glse-header-logo { height: 36px; }

/* The header wraps at this width, so the sentence would stack under the logo
   and cost two or three lines of screen. It restates the readme rather than
   telling the merchant anything the page needs. */

.glse-header-tagline { display: none; }

/* Card - full width, auto height */

.glse-header,
.glse-card {
        width: 100%;
        flex: 0 0 auto;
        border-radius: 10px;
    }

.glse-card-inner {
        flex-direction: column;
        min-height: auto;
    }

/* Nav - horizontal scrollable pills */

.glse-nav {
        width: 100%;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--glse-border);
        padding: 8px 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
    }

.glse-nav::-webkit-scrollbar { display: none; }

.glse-nav-item {
        white-space: nowrap;
        padding: 9px 14px;
        border-radius: 8px;
        min-height: 40px;
    }

.glse-nav-label { font-size: 12px; }

/* Content panels */

.glse-tab-panel { padding: 16px 16px 12px; }

/* Form table - stack label/input vertically */

.glse-tab-panel .form-table th {
        display: block;
        width: 100%;
        padding: 12px 0 2px 0;
    }

.glse-tab-panel .form-table td {
        display: block;
        padding: 4px 0 10px 0;
    }

/* Toggles - bigger for touch (44px tap target) */

.glse-tab-panel input[type="checkbox"] {
        width: 44px; height: 24px;
    }

.glse-tab-panel input[type="checkbox"]::after {
        width: 18px; height: 18px;
    }

.glse-tab-panel input[type="checkbox"]:checked::after {
        transform: translateX(20px);
    }

/* Save button - full width */

.glse-form-footer { padding: 14px 16px; }

.glse-form-footer .button-primary {
        width: 100%;
        justify-content: center;
    }

/* Sidebar - stack full width auto */

.glse-sidebar {
        width: 100%;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 12px;
        position: static;
    }

.glse-sidebar-card {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }
}

/* ── Small phones ≤ 480px ── */

@media (max-width: 480px) {
.glse-wrap { margin-right: 6px; }

/* Header compact */

.glse-header { border-radius: 8px; margin-bottom: 10px; }

.glse-header-inner { padding: 12px 14px; }

.glse-header-logo { height: 30px; }

.glse-header,
.glse-card { width: 100%; border-radius: 8px; }

/* Nav - icon-only mode */

.glse-nav { padding: 6px 8px; justify-content: center; overflow-x: visible; }

.glse-nav-item { padding: 10px 14px; gap: 0; }

.glse-nav-label { display: none; }

.glse-nav-icon { width: 22px; height: 22px; }

.glse-nav-icon svg { width: 20px; height: 20px; }

/* Tighter content padding */

.glse-tab-panel { padding: 0 12px 10px; }

/* The nav went icon-only just above, so this is the only place the open tab
   is named. Flush with the fields below it. */

.glse-panel-header {
    display: block;
    padding: 12px 0 2px;
}

.glse-panel-header h2 { font-size: 14px; }

.glse-form-footer { padding: 12px; }

/* Color picker - ensure hex code wraps */

.glse-tab-panel input[type="color"] { width: 34px; height: 30px; }

.glse-tab-panel code { font-size: 11px; }

/* Sidebar compact */

.glse-code-block { padding: 7px 10px; }

.glse-code-block code { font-size: 11px; }

.glse-sidebar-body { padding: 10px 14px; }

.glse-sidebar-header { padding: 12px 14px; font-size: 11px; }
}

/* ══════════════════════
   ANALYTICS PANEL
   - Uses WP native: .postbox, .widefat, .tablenav, .notice, .button
   ══════════════════════ */

/* ══ Analytics ═══════════════════════════════════════════════════════
   Four figures, two lists, one chart. Plain CSS - no charting library. */

.glse-analytics {
    padding: 4px 0 16px;
}

.glse-analytics-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.glse-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.glse-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.glse-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--glse-text-secondary);
}

.glse-stat-value {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: #000000;
}

.glse-stat-delta {
    font-size: 12px;
    font-weight: 600;
}

.glse-stat-delta--up { color: #007017; }

.glse-stat-delta--down { color: #b32d2e; }

.glse-stat-delta--flat { color: var(--glse-text-secondary); }

.glse-stat-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--glse-text-secondary);
}

.glse-panel {
    padding: 16px 18px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.glse-panel h3 {
    margin: 0 0 12px;
    font-size: 14px;
}

.glse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.glse-grid .glse-panel { margin-bottom: 0; }

.glse-table {
    width: 100%;
    border-collapse: collapse;
}

.glse-table th,

/* Dismiss link on the upgrade notice. Takes its colour from the stylesheet:
   an inline #999 sat at 2.8:1 on white, below the readable minimum. */
.glse-notice-dismiss {
    color: var(--glse-text-muted);
    text-decoration: none;
}

.glse-notice-dismiss:hover {
    color: var(--glse-text-secondary);
    text-decoration: underline;
}

/* Locked rows and preset overlays. The free build renders these through
   pro_lock(), so they belong in the shared sheet rather than the paid one. */

.glse-pro-locked {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--glse-text-secondary);
    margin-top: 4px;
}

.glse-pro-locked a {
    color: var(--glse-secondary);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.glse-pro-locked a:hover { text-decoration: underline; }

/* Locked preset cards */

.glse-preset-card--locked { opacity: .55; cursor: not-allowed; }

.glse-preset-preview--locked { position: relative; }

.glse-preset-lock-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.glse-preset-custom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 0;
    color: var(--glse-accent);
    opacity: .5;
}

.glse-preset-card--active .glse-preset-custom-icon { opacity: 1; }

/* ══════════════════════
   UPGRADE PANEL
   ══════════════════════ */

.glse-upgrade-panel { padding: 0; }

.glse-upgrade-hero {
    text-align: center;
    padding: 36px 32px 28px;
    background: linear-gradient(140deg, #f4f2ff 0%, #fafafe 100%);
    border-bottom: 1px solid var(--glse-border-light);
}
.glse-upgrade-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--glse-secondary);
    border-radius: 50%;
    color: #fff;
    margin-bottom: 14px;
}
.glse-upgrade-hero h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--glse-text-primary);
}
.glse-upgrade-hero p {
    color: var(--glse-text-secondary);
    font-size: 13px;
    margin: 0 0 20px;
}
.glse-upgrade-cta.button-primary {
    background: var(--glse-secondary) !important;
    border-color: var(--glse-secondary) !important;
    font-size: 13px !important;
    padding: 7px 22px !important;
    height: auto !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
}
.glse-upgrade-cta.button-primary:hover {
    background: #524db8 !important;
    border-color: #524db8 !important;
}

.glse-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.glse-upgrade-group {
    padding: 18px 24px;
    border-right: 1px solid var(--glse-border-light);
    border-bottom: 1px solid var(--glse-border-light);
}
.glse-upgrade-group:nth-child(2n) { border-right: none; }
.glse-upgrade-group:nth-last-child(-n+2) { border-bottom: none; }
.glse-upgrade-group h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--glse-secondary);
    margin: 0 0 10px;
}
.glse-upgrade-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.glse-upgrade-group ul li {
    font-size: 13px;
    color: var(--glse-text-secondary);
    padding: 4px 0 4px 18px;
    position: relative;
}
.glse-upgrade-group ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--glse-secondary);
    font-weight: 700;
}

@media (max-width: 680px) {
    .glse-upgrade-grid { grid-template-columns: 1fr; }
    .glse-upgrade-group:nth-child(2n) { border-right: none; }
    .glse-upgrade-group { border-bottom: 1px solid var(--glse-border-light); }
    .glse-upgrade-group:last-child { border-bottom: none; }
}

.glse-table td {
    padding: 7px 8px;
    text-align: left;
    border-bottom: 1px solid #f0f0f1;
}

.glse-table th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--glse-text-secondary);
}

.glse-table th:not(:first-child),
.glse-table td:not(:first-child) {
    width: 90px;
    text-align: right;
}

.glse-table tr:last-child td { border-bottom: 0; }

.glse-bad { color: #b32d2e; font-weight: 600; }

.glse-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 90px;
}

.glse-spark-col {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
}

/*
 * Pas de hauteur plancher ici : elle s'appliquait aussi aux jours vides et
 * doublait le probleme cote PHP. Une barre ne se voit que si elle represente
 * quelque chose.
 */
.glse-spark-bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: #2271b1;
    opacity: .75;
    transition: opacity .15s ease;
}

/* Un jour sans recherche : un trait de base, qui se lit comme une absence. */
.glse-spark-bar--empty {
    height: 1px;
    border-radius: 0;
    background: var(--glse-border);
    opacity: 1;
}

.glse-spark-col:hover .glse-spark-bar { opacity: 1; }

.glse-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
    color: var(--glse-text-secondary);
}

.glse-pager-links { display: flex; align-items: center; gap: 8px; }

.glse-pager-links a { text-decoration: none; }

.glse-empty {
    padding: 28px;
    text-align: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.glse-empty p { margin: 0 0 6px; }

.glse-muted { color: var(--glse-text-secondary); }

.glse-analytics-footer { margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
.glse-spark-bar { transition: none; }
}

/* Inline caveat under a control whose value would be silently ineffective. */

.glse-warn {
    color: #8a6100;
}

/* Only the Free build renders this tab - Pro has nothing to upsell. The rules
   stay here because this stylesheet is the superset the Free one is derived
   from: an orphan scan run against Pro alone will flag them, and it is wrong. */

.glse-nav-item--cta {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--glse-border);
    color: var(--glse-secondary);
    font-weight: 700;
}

.glse-nav-item--cta .glse-nav-icon { color: var(--glse-secondary); opacity: 1; }

.glse-nav-item--cta:hover {
    background: #f0eeff;
    color: var(--glse-secondary);
}

.glse-nav-item--cta:hover .glse-nav-icon { opacity: 1; }

.glse-nav-item--cta.glse-nav-item--active {
    background: #ece9ff;
    color: var(--glse-secondary);
    border-color: #b5b0f0;
    box-shadow: 0 0 0 1px rgba(100,95,229,.15);
}

.glse-nav-item--cta.glse-nav-item--active .glse-nav-icon {
    opacity: 1;
    color: var(--glse-secondary);
}

.glse-table td {
    padding: 7px 8px;
    text-align: left;
    border-bottom: 1px solid #f0f0f1;
}

.glse-table td:not(:first-child) {
    width: 90px;
    text-align: right;
}

/* Rendered by the free build too - kept out of the paid sheet. */

.glse-license-key-input {
    flex: 1;
    min-width: 0;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-family: monospace;
    border: 1px solid var(--glse-border) !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    color: var(--glse-text-primary) !important;
    transition: border-color .2s, box-shadow .2s;
}

.glse-license-key-input:focus {
    border-color: var(--glse-accent) !important;
    box-shadow: 0 0 0 3px var(--glse-accent-glow) !important;
    outline: none !important;
    background: #fff !important;
}

.glse-license-key-input::placeholder {
    color: var(--glse-text-secondary);
    opacity: .5;
    font-family: monospace;
}

.glse-license-key-submit {
    flex-shrink: 0;
    background: var(--glse-accent) !important;
    border-color: var(--glse-accent-hover) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    height: auto !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: background .15s;
}

.glse-license-key-submit:hover {
    background: var(--glse-accent-hover) !important;
}

/* ══════════════════════════════
   SIDEBAR: LICENSE KEY LINK
   ══════════════════════════════ */

.glse-sidebar-license-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, .75) !important;
    text-decoration: none !important;
    transition: color .15s;
}

.glse-sidebar-license-link svg {
    flex-shrink: 0;
    opacity: .75;
}

.glse-sidebar-license-link:hover {
    color: #fff !important;
}

.glse-sidebar-license-link:hover svg {
    opacity: 1;
}

/* ══════════════════════
   SIDEBAR UPGRADE CTA
   ══════════════════════ */

.glse-sidebar-card.glse-sidebar-upgrade-card {
    background: var(--glse-accent);
    border: none;
    color: #fff;
    padding: 18px;
}

.glse-sidebar-upgrade-badge {
    margin-bottom: 10px;
}

.glse-sidebar-card.glse-sidebar-upgrade-card .glse-pro-badge {
    background: rgba(255,255,255,.25);
    font-size: 11px;
    padding: 2px 8px;
}

.glse-sidebar-upgrade-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.35;
}

.glse-sidebar-upgrade-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 12px;
    color: rgba(255,255,255,.85);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.glse-sidebar-upgrade-btn {
    display: block;
    text-align: center;
    background: #fff;
    color: var(--glse-accent) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}

.glse-sidebar-upgrade-btn:hover {
    background: var(--glse-accent-light);
    color: var(--glse-accent-hover) !important;
}

/* ── Save confirmation notice ── */

.glse-save-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 28px 0;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    animation: glseFadeInOut 4s ease-in-out forwards;
}

.glse-save-notice--success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.glse-save-notice--success svg {
    color: #16a34a;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   Design tab - grouped rows, colour pickers, preview
   ═══════════════════════════════════════════════════════ */

/*
 * Deux colonnes, et deux seulement.
 *
 * Quatre ne tenaient pas : la grille depassait la cellule et la derniere
 * colonne de la ligne « Bouton » sortait de l'ecran. Des colonnes en fraction
 * plutot qu'en pixels ne peuvent plus deborder, et comme les quatre lignes
 * partagent la meme grille, la premiere colonne de « Fond » reste alignee avec
 * celle de « Bouton ». Une ligne de quatre controles occupe alors deux rangees
 * au lieu de sortir du cadre.
 */
/* Un fieldset qui ne sert qu'a nommer son groupe, sans imposer de mise en page. */
.glse-control-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.glse-control-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px 24px;
    margin: 0;
    padding: 0;
    border: 0;
    max-width: 720px;
}

.glse-color-control,
.glse-number-control {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.glse-control-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1d2327;
    line-height: 1.3;
}

.glse-control-help {
    font-size: 11px;
    line-height: 1.4;
    color: #646970;
}

/* ── Champs numeriques ── */

.glse-number-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.glse-unit {
    font-size: 12px;
    color: #646970;
}

/* ── Selecteur de couleur WordPress ── */

/*
 * Une pastille, rien d'autre.
 *
 * Le bouton natif affiche « Selectionner une couleur » a cote de la couleur,
 * ce qui repete douze fois la meme phrase et pousse le champ hexadecimal a la
 * ligne suivante. Le libelle de la ligne dit deja de quelle couleur il s'agit.
 * Les 30px de padding gauche du bouton sont l'emplacement de la pastille : le
 * texte retire, il ne reste qu'a rendre le bouton carre.
 */
.glse-color-control .wp-picker-container .wp-color-result-text {
    display: none;
}

.glse-color-control .wp-picker-container .wp-color-result.button {
    width: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

/* Pastille, valeur et « Par defaut » sur une seule ligne quand le panneau est
   ouvert. */
.glse-color-control .wp-picker-container {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/*
 * La valeur reste lisible sans ouvrir le panneau.
 *
 * close() pose la classe `hidden` sur cette enveloppe, et l'y laisser aurait
 * demande un clic par couleur pour lire neuf valeurs. Le forcer visible ne
 * gene rien : la fermeture d'un selecteur ne depend pas de cette classe mais
 * du panneau lui-meme, que WordPress masque par un style en ligne pose sur
 * `.iris-picker` - hors d'atteinte d'une feuille de style.
 *
 * Ce qui ferme les selecteurs est ailleurs encore : `.wp-picker-container`
 * arrete tout clic avant `body` (color-picker.js:226), et un clic qui atteint
 * `body` ferme tout ce qui est ouvert. Rien de tout cela ne passe par `hidden`.
 */
.glse-color-control .wp-picker-input-wrap {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/*
 * Le panneau reste dans le flux, comme WordPress le prevoit.
 *
 * Il a ete mis en position absolue pour eviter que son ouverture ne repousse la
 * grille. C'etait une erreur : .glse-card porte overflow:hidden pour ses angles
 * arrondis, un element sorti du flux depasse le bas de la carte et s'y fait
 * couper net. Sur la derniere ligne de la section il ne restait presque rien a
 * voir.
 *
 * Dans le flux, le panneau occupe sa place, la carte grandit, rien n'est
 * rogne. La base a 100 % le fait passer sur sa propre ligne plutot que de se
 * serrer a cote de la pastille.
 */
.glse-color-control .wp-picker-holder {
    flex-basis: 100%;
}

/* ── Apercu ── */

.glse-preview {
    margin: 0 0 22px;
    padding: 18px 20px 20px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
}

.glse-preview-caption {
    margin: 0 0 14px;
    font-size: 12px;
    color: #50575e;
}

.glse-preview-stage {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.glse-preview-state {
    flex: 1 1 260px;
    min-width: 240px;
}

.glse-preview-state-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #646970;
}

/*
 * Reprend les regles de la façade qui lisent ces memes variables, limitees a
 * celles qui sont reglables : c'est un apercu des reglages, pas une seconde
 * copie de la feuille de style.
 */
.glse-preview-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 0 14px;
    height: var(--glse-bar-height, 48px);
    background: var(--glse-bar-bg, #f4f4f5);
    border: var(--glse-border-width, 1px) solid var(--glse-border-color, #e5e7eb);
    border-radius: var(--glse-radius, 14px);
    box-sizing: border-box;
}

.glse-preview-bar--focus {
    background: var(--glse-bar-bg-focus, #fff);
    outline: 2px solid var(--glse-focus-ring-color, #2563eb);
    outline-offset: 2px;
}

.glse-preview-text {
    flex: 1 1 auto;
    color: var(--glse-placeholder-color, #6e6e78);
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Le bouton d'apercu se survole : c'est la seule facon de montrer une couleur
 * qui ne se voit qu'au survol. Elle etait la seule des treize a n'apparaitre
 * nulle part avant l'enregistrement.
 */
.glse-preview-btn:hover {
    background: var(--glse-btn-hover, #0e2a5c);
}

.glse-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--glse-bar-height, 48px) - 14px);
    height: calc(var(--glse-bar-height, 48px) - 14px);
    background: var(--glse-btn-bg, #2563eb);
    color: var(--glse-btn-color, #fff);
    border-radius: var(--glse-btn-radius, 10px);
    flex-shrink: 0;
}

/* ── Ecrans etroits ── */

@media (max-width: 782px) {
    .glse-control-group {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .glse-preview-stage {
        gap: 18px;
    }
}
