/* ==================================================
   BASE
================================================== */

body {
    background: var(--color-bg, #0b0b0d);
    color: var(--color-text, #ffffff);
}

/* ==================================================
   CREATE WIDGET CONFIGURATOR V8
================================================== */
.widget-builder{display:block;min-height:calc(100vh - 80px);background:#050505}
.widget-builder-form{display:block}
.widget-builder-left{width:100%;padding:0;border:0}
.widget-config-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 34px 20px;border-bottom:1px solid rgba(255,255,255,.08);background:#08080a}
.widget-config-head h2{margin:0;font-size:1.55rem}.widget-config-head p{margin:5px 0 0;color:#8f96a3;font-size:.88rem}
.widget-config-head .config-save{width:auto;min-width:180px;margin:0;padding:12px 20px;border-radius:10px}
.widget-config-nav{display:flex;align-items:stretch;gap:8px;padding:12px 34px;background:#0b0b0e;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:20}
.config-menu{position:relative;min-width:135px}.config-menu summary{list-style:none;cursor:pointer;padding:11px 15px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:#121216;color:#e8eaf0;font-size:.88rem;font-weight:650;white-space:nowrap}.config-menu summary::-webkit-details-marker{display:none}.config-menu[open] summary{border-color:rgba(34,211,238,.45);background:#17181d}
.config-menu .config-panel{position:absolute;left:0;top:calc(100% + 8px);width:min(720px,calc(100vw - 68px));padding:20px;background:#101114;border:1px solid rgba(255,255,255,.11);border-radius:12px;box-shadow:0 20px 45px rgba(0,0,0,.42);z-index:50;max-height:70vh;overflow:auto}
.config-menu:first-child .config-panel{width:min(560px,calc(100vw - 68px))}
.config-panel .form-group{margin-bottom:14px}.config-panel .form-group:last-child{margin-bottom:0}
.config-section-title{margin:2px 0 10px;color:#e5e7eb;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.config-section-title:not(:first-child){margin-top:20px}.config-panel label{display:block;margin-bottom:7px;color:#aeb4bf;font-size:.82rem}.config-panel input[type=text],.config-panel input[type=number],.config-panel select{width:100%;height:42px;background:#17181d;border:1px solid #2a2d35;border-radius:8px;color:#f4f5f7;padding:0 12px}.config-panel input:focus,.config-panel select:focus{outline:none;border-color:#22d3ee;box-shadow:0 0 0 2px rgba(34,211,238,.1)}
.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.settings-grid .form-group{min-width:0}.color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.color-control{min-width:0}.color-control label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.color-control input[type=color]{display:block;width:46px;height:30px;padding:2px;border:1px solid #30333b;border-radius:7px;background:#17181d;cursor:pointer}
.checkbox-stack{display:flex;flex-direction:column;gap:9px}.checkbox-stack label,.checkbox-group label{display:flex;align-items:center;gap:9px;margin:0;padding:9px 10px;background:#17181d;border:1px solid #292c34;border-radius:8px;color:#e5e7eb;cursor:pointer}.checkbox-stack input,.checkbox-group input{width:16px;height:16px;accent-color:#22d3ee}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice{display:flex!important;align-items:center;gap:8px;padding:10px!important;border:1px solid #2b2e36!important;border-radius:8px;cursor:pointer;background:#17181d}.choice:has(input:checked){border-color:#22d3ee!important;box-shadow:0 0 0 1px rgba(34,211,238,.3)}.choice input{margin:0}.integration-choice-list{display:flex;flex-direction:column;gap:6px}.integration-choice{display:flex!important;align-items:center;justify-content:flex-start;gap:6px;padding:8px 10px!important;border:1px solid #2b2e36!important;border-radius:7px;cursor:pointer;background:#17181d;color:#e5e7eb!important;margin:0!important}.integration-choice:has(input:checked){border-color:#22d3ee!important;box-shadow:0 0 0 1px rgba(34,211,238,.3)}.integration-choice input[type=radio]{width:14px;height:14px;min-width:14px;margin:0;accent-color:#22d3ee}.integration-choice span{line-height:1.2}.integration-choice-list + .builder-help{margin-top:8px}
.builder-help{font-size:.78rem;opacity:.65;margin:.4rem 0 0}.conditional[hidden]{display:none!important}
.widget-builder-right{width:100%;padding:28px 34px 40px;background:#08080a;position:relative;overflow:visible}.widget-builder-right::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(34,211,238,.045),transparent 65%);pointer-events:none}
.widget-preview-wrapper{width:100%;max-width:none;margin:0;position:relative;z-index:2}.widget-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.82rem;color:#9ca3af}.widget-preview-live{display:flex;align-items:center;gap:8px}.widget-preview-live::before{content:"";width:7px;height:7px;border-radius:999px;background:#22d3ee;box-shadow:0 0 8px rgba(34,211,238,.7)}.widget-preview-type{opacity:.7}
.widget-preview-shell{width:100%;background:#fff;border:1px solid #24262d;border-radius:10px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.28)}.widget-preview-shell iframe{display:block;width:100%;height:520px;border:0;background:#fff}
.widget-preview-embed{margin-top:18px}.widget-preview-embed label{display:block;margin-bottom:7px;font-size:.82rem;color:#9ca3af}.widget-embed-code{width:100%;min-height:80px;padding:10px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:#0b0b0d;color:#e5e7eb;font-family:monospace;resize:vertical}.widget-preview-embed .btn-primary{width:auto;margin-top:9px;padding:10px 15px;border-radius:8px;font-size:.9rem}
@media(max-width:900px){.widget-config-head{padding:22px 18px}.widget-config-nav{padding:10px 18px;overflow-x:auto}.config-menu .config-panel{position:fixed;left:18px;right:18px;top:135px;width:auto!important;max-height:65vh}.widget-builder-right{padding:22px 18px 32px}.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.widget-config-head{display:block}.widget-config-head .config-save{margin-top:14px;width:100%}.widget-config-nav{gap:6px}.config-menu{min-width:auto}.config-menu summary{padding:10px 11px}.choice-grid,.settings-grid,.color-grid{grid-template-columns:1fr}.widget-preview-shell iframe{height:520px}}

/* ==================================================
   (TON CSS ORIGINAL COMPLET)
================================================== */

.widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
    padding: 20px 0;
}

.widget-card {
    background: var(--secondary-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.widget-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.widget-card-header {
    padding: 20px 24px 0;
    border-bottom: 1px solid var(--border-color);
}

.widget-card-header h3 {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
}

.widget-type {
    display: inline-block;
    background: rgba(17, 183, 238, 0.15);
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.widget-card-body {
    padding: 20px 24px;
    color: var(--text-muted);
}

.created-date {
    font-size: 1rem;
}

.meta {
    margin: 8px 0 0 0;
}

.widget-card-actions {
    padding: 16px 24px;
    background: #151515;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-action {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.9rem;
    flex: 1;
    text-align: center;
    min-width: 100px;
}

.btn-action.preview   { background: #1f2937; color: #60a5fa; }
.btn-action.edit      { background: #166534; color: #86efac; }
.btn-action.duplicate { background: #4338ca; color: #c4d0ff; }
.btn-action.delete    { background: #991b1b; color: #fda4af; }

.widget-container {
    padding: var(--space-s);
}

.widget-title {
    color: var(--widget-accent-color);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-s);
}

.widget-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-s) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-small);
}

.widget-team {
    flex: 1;
}

.widget-team-home {
    text-align: left;
}

.widget-team-away {
    text-align: right;
}

.widget-team-secondary {
    display: block;
    opacity: 0.5;
}

.widget-score {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--widget-accent-color);
    white-space: nowrap;
    padding: 0 var(--space-m);
}

.widget-position {
    width: 25px;
    font-weight: bold;
    color: var(--widget-accent-color);
}

.widget-rank {
    width: 25px;
    opacity: 0.6;
}

.widget-points {
    width: 40px;
    text-align: right;
    font-weight: bold;
}

.widget-message {
    text-align: center;
    padding: var(--space-l);
    opacity: 0.6;
    font-size: var(--font-size-small);
}

.widget-error {
    text-align: center;
    padding: var(--space-l);
    color: var(--color-danger);
    font-size: var(--font-size-small);
}

.ft-standings{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ft-row{
    display:grid;
    grid-template-columns:
        40px
        minmax(220px,1fr)
        60px
        55px
        55px
        55px
        55px
        60px
        60px
        70px;

    align-items:center;

    gap:8px;

    padding:12px 14px;

    background:#111827;

    border-radius:8px;
}

.ft-header{
    font-weight:700;
    background:#1f2937;
}

.ft-col-rank{
    text-align:center;
    font-weight:700;
}

.ft-col-stat{
    text-align:center;
}

.ft-points{
    font-weight:700;
}

.ft-team{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.ft-team-logo{
    width:24px;
    height:24px;
    object-fit:contain;
    flex-shrink:0;
}

.ft-team-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media(max-width:900px){

    .ft-row{

        grid-template-columns:
            35px
            minmax(140px,1fr)
            55px
            50px
            50px
            50px
            50px;
    }

    .ft-row > :nth-child(8),
    .ft-row > :nth-child(9),
    .ft-row > :nth-child(10){
        display:none;
    }

}

.ft-header{
    font-weight:700;
    background:#1f2937;
}

.ft-team{
    display:flex;
    align-items:center;
    gap:10px;
}

.ft-team img{
    width:24px;
    height:24px;
}

.ft-team span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ft-match{
    background:#111827;
    border-radius:12px;
    padding:12px;
    margin-bottom:10px;
}

.ft-teams{
    color:#fff;
    font-weight:600;
    font-size:15px;
}

.ft-date{
    color:#9ca3af;
    font-size:13px;
    margin-top:4px;
}

.ft-standings-widget.density-normal .ft-row {
    padding: 12px;
}

.ft-standings-widget.density-compact .ft-row {
    padding: 6px;
}

.ft-standings-widget.hide-logo .ft-team-logo {
    display: none;
}


/* ==================================================
   WIDGET MANAGEMENT / PREVIEW PAGES
================================================== */
.widgets-page, .widget-page {
    color: var(--color-text, #ffffff);
}
.widgets-page h1, .widget-page h1,
.widgets-page h2, .widget-page h2,
.widgets-page h3, .widget-page h3,
.widgets-page p, .widget-page label,
.widgets-page .page-header, .widget-page .page-header {
    color: var(--color-text, #ffffff);
}
.widgets-page .page-header, .widget-page .page-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:32px 0 20px;
}
.page-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}
.widgets-page .btn-action {
    color:#fff;
}
.widgets-page .btn-action.preview { background:#1f2937; color:#93c5fd; }
.widgets-page .btn-action.edit { background:#075985; color:#bae6fd; }
.widgets-page .btn-action.duplicate { background:#3730a3; color:#c7d2fe; }
.widgets-page .btn-action.delete { background:#991b1b; color:#fecaca; }
.widgets-page .widget-card-header h3,
.widgets-page .widget-card-body .meta,
.widgets-page .widget-card-body .created-date { color:var(--color-text, #fff); }
.widgets-page .widget-card-body .meta,
.widgets-page .widget-card-body .created-date { opacity:.78; }
.preview-frame {
    background:#fff;
    border:1px solid var(--border-color,#333);
    border-radius:12px;
    padding:12px;
}
.preview-frame iframe { display:block; width:100%; min-height:600px; border:0; background:#fff; }
@media(max-width:700px){
    .widgets-page .page-header, .widget-page .page-header { align-items:flex-start; flex-direction:column; }
    .page-actions { width:100%; justify-content:flex-start; }
}

/* ==================================================
   FINAL WIDGET MANAGEMENT PAGES
================================================== */
.widgets-page, .widget-page {
    color: var(--color-text, #f3f4f6);
}
.widgets-page .page-header, .widget-page .page-header {
    background: var(--secondary-dark, #15171b);
    border: 1px solid var(--border-color, #2b2f36);
    border-radius: 14px;
    padding: 20px 22px;
}
.widgets-page .page-header h1, .widget-page .page-header h1,
.widgets-page .page-header h2, .widget-page .page-header h2 {
    color: #fff !important;
    margin: 0;
}
.widgets-page .widget-card {
    background: var(--secondary-dark, #15171b);
    border: 1px solid var(--border-color, #2b2f36);
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.widgets-page .widget-card-header {
    border-bottom-color: var(--border-color, #2b2f36);
}
.widgets-page .widget-card-header h3,
.widgets-page .widget-card-body,
.widgets-page .widget-card-body .meta,
.widgets-page .widget-card-body .created-date {
    color: #f3f4f6 !important;
}
.widgets-page .widget-card-actions {
    background: #101216;
    border-top: 1px solid var(--border-color, #2b2f36);
}
.widgets-page .btn-action {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 8px 11px;
    text-decoration: none;
    font-weight: 650;
}
.widgets-page .btn-action.preview { background:#20242b; color:#e5e7eb; }
.widgets-page .btn-action.edit { background:#123b56; color:#d9f2ff; }
.widgets-page .btn-action.duplicate { background:#30266a; color:#e7e0ff; }
.widgets-page .btn-action.delete { background:#551d22; color:#ffd5d8; }
.widgets-page .btn-action:hover { filter:brightness(1.12); transform:translateY(-1px); }
.widget-page .preview-frame {
    background: #fff;
    border: 1px solid #30343b;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.widget-page .preview-frame iframe {
    background: #fff;
    border-radius: 8px;
}
.widget-page .page-actions .btn-primary,
.widget-page .page-actions .btn-secondary {
    width: auto;
    margin-top: 0;
}

/* Actions de la page de prévisualisation : toujours visibles sur le fond sombre. */
.widget-page .page-actions {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
}
.widget-page .page-actions .btn-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px !important;
    background: #171a1f !important;
    color: #f3f4f6 !important;
    border: 1px solid #22d3ee !important;
    border-radius: 8px;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    white-space: nowrap;
    position: relative;
    z-index: 31;
}
.widget-page .page-actions .btn-secondary:hover {
    background: #20252c !important;
    color: #ffffff !important;
}

/* Tous les boutons de navigation de la page : même aspect bleu / blanc. */
.widget-page .page-actions .btn-primary,
.widget-page .page-actions .btn-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 17px !important;
    background: #11b7ee !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 5px 12px rgba(36,99,235,.18);
    opacity: 1 !important;
    visibility: visible !important;
}
.widget-page .page-actions .btn-primary:hover,
.widget-page .page-actions .btn-secondary:hover {
    background: #0ea5d8 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.widget-preview-wrapper iframe{display:block;width:100%!important;max-width:none!important;}

/* Bordure : activation séparée des réglages, dans l'ordre logique. */
.config-panel .border-toggle{min-width:0;margin:0!important}.config-panel .border-toggle label{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0;padding:0;background:none;border:0}.config-panel .border-toggle input{width:14px;height:14px;margin:0}.config-panel .border-options{display:contents}.config-panel .border-options[hidden]{display:none!important}.config-panel .border-options.is-disabled{opacity:.45}.config-panel .border-options input:disabled{cursor:not-allowed}
/* Taille uniforme des cases a cocher du configurateur : independante des regles generales des formulaires. */
.config-panel input[type="checkbox"],
.config-panel input[type="checkbox"]:not([class]) {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
}

.normal-checkbox-grid{grid-template-columns:1fr 1fr}.normal-checkbox-grid .normal-check{min-height:42px!important;padding:8px 10px!important;font-size:14px}.normal-checkbox-grid input[type=checkbox],.choice-grid input[type=checkbox]{width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;margin:0!important;accent-color:#22d3ee}.normal-checkbox-grid .normal-check span{line-height:1.25}@media(max-width:600px){.normal-checkbox-grid{grid-template-columns:1fr}}.player-order-control{margin-top:12px;padding-top:12px;border-top:1px solid #2b2e36}.player-order-control label{display:block;font-weight:600;margin-bottom:6px}.player-order-control select{width:100%;max-width:360px}.normal-check input[type=checkbox]{width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important}
.ft-manager-panel{margin-top:16px}.ft-manager-main{display:flex;align-items:center;gap:16px;padding:18px}.ft-manager-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#e8f7ef;display:grid;place-items:center;font-weight:800;font-size:22px}.ft-manager-avatar img{width:100%;height:100%;object-fit:cover}.ft-manager-main h3{margin:0 0 5px}.ft-manager-main p{margin:0;color:#64748b;font-size:13px}
.ft-manager-panel{margin-top:16px}.ft-manager-main{display:flex;align-items:center;gap:16px;padding:18px}.ft-manager-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#e8f7ef;display:grid;place-items:center;font-weight:800;font-size:22px}.ft-manager-avatar img{width:100%;height:100%;object-fit:cover}.ft-manager-main h3{margin:0 0 5px}.ft-manager-main p{margin:0;color:#64748b;font-size:13px}

/* Match center: optional competition, round, venue and referee metadata. */
.ft-center-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin-top:12px;font-size:.88em;opacity:.88}
.ft-center-competition,.ft-center-round,.ft-center-venue,.ft-center-referee{display:inline-flex;align-items:center;gap:4px}