/* ===================================================================
   Pétanque Tournois — CSS principal
   Variables → Reset → Layout → Components → Admin → Utilities
   =================================================================== */

:root {
    --color-primary:    #2563eb;
    --color-primary-d:  #1d4ed8;
    --color-secondary:  #64748b;
    --color-success:    #16a34a;
    --color-danger:     #dc2626;
    --color-warning:    #d97706;
    --color-info:       #0891b2;
    --color-bg:         #f8fafc;
    --color-surface:    #ffffff;
    --color-border:     #e2e8f0;
    --color-text:       #1e293b;
    --color-muted:      #64748b;

    --font-sans:        system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --radius:           .5rem;
    --radius-lg:        1rem;
    --shadow:           0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --shadow-lg:        0 10px 15px -3px rgba(0,0,0,.1);

    --sidebar-w:        240px;
}

/* ---------------------------------------------------------------
   Reset
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.6; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ---------------------------------------------------------------
   Layout public
--------------------------------------------------------------- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: .75rem 0;
    position: sticky; top: 0; z-index: 100;
    box-shadow: var(--shadow);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.logo { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; font-weight: 700; color: var(--color-text); }
.logo:hover { text-decoration: none; }
.logo-icon { font-size: 1.5rem; }

.main-nav { display: flex; align-items: center; gap: 1.5rem; }
.main-nav a, .main-nav .btn-link { color: var(--color-text); font-size: .95rem; }

.main-content { min-height: calc(100vh - 130px); padding: 2rem 0; }

.site-footer { background: var(--color-text); color: #94a3b8; padding: 1.5rem 0; text-align: center; font-size: .875rem; margin-top: 4rem; }

/* ---------------------------------------------------------------
   Admin layout
--------------------------------------------------------------- */
.admin-layout { background: #f1f5f9; }

.admin-wrapper { display: flex; min-height: 100vh; }

.admin-sidebar {
    width: var(--sidebar-w);
    background: #1e293b;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 200;
}

.sidebar-logo { padding: 1.25rem 1.5rem; font-size: 1.1rem; font-weight: 700; color: #fff; border-bottom: 1px solid #334155; }
.sidebar-logo a { color: inherit; }

.sidebar-nav { flex: 1; padding: 1rem 0; }
.sidebar-nav .nav-item { display: block; padding: .625rem 1.5rem; color: #94a3b8; transition: background .15s, color .15s; }
.sidebar-nav .nav-item:hover, .sidebar-nav .nav-item.active { background: #334155; color: #fff; text-decoration: none; }

.sidebar-footer { padding: 1rem 1.5rem; border-top: 1px solid #334155; }

.admin-main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; }

.admin-topbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: .75rem 2rem; font-size: .875rem; }

.admin-content { padding: 2rem; flex: 1; }

/* ---------------------------------------------------------------
   Hero
--------------------------------------------------------------- */
.hero { text-align: center; padding: 4rem 1rem; }
.hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; color: var(--color-text); }
.hero-sub { font-size: 1.15rem; color: var(--color-muted); max-width: 600px; margin: 0 auto 2rem; }

/* ---------------------------------------------------------------
   Cards
--------------------------------------------------------------- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-body { padding: 1.5rem; }
.card-title { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.card-meta { font-size: .875rem; color: var(--color-muted); margin-bottom: .25rem; }
.card-footer { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.card-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.card-danger { border-color: #fca5a5; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }

.card-link { display: block; transition: box-shadow .15s, transform .15s; }
.card-link:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; color: inherit; }

/* ---------------------------------------------------------------
   Boutons
--------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .6rem 1.25rem; border-radius: var(--radius);
    font-size: .925rem; font-weight: 500; cursor: pointer;
    border: 2px solid transparent; transition: background .15s, border-color .15s, color .15s;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary   { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-d); }
.btn-outline   { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { background: var(--color-bg); }
.btn-success   { background: var(--color-success); color: #fff; }
.btn-danger    { background: var(--color-danger); color: #fff; }
.btn-sm        { padding: .35rem .75rem; font-size: .8rem; }
.btn-lg        { padding: .875rem 2rem; font-size: 1.05rem; }
.btn-link      { background: none; border: none; color: var(--color-primary); cursor: pointer; padding: 0; }
.w-full        { width: 100%; }

/* ---------------------------------------------------------------
   Formulaires
--------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-control { padding: .6rem .875rem; border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color .15s; width: 100%; }
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
textarea.form-control { resize: vertical; }
label { font-size: .875rem; font-weight: 500; color: var(--color-text); }
fieldset.fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; }
legend { font-weight: 600; padding: 0 .5rem; }

/* ---------------------------------------------------------------
   Alertes / Flash
--------------------------------------------------------------- */
.alert { padding: .875rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .925rem; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.alert-info    { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }

/* ---------------------------------------------------------------
   Badges
--------------------------------------------------------------- */
.badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.badge-primary   { background: #dbeafe; color: #1e40af; }
.badge-secondary { background: #f1f5f9; color: #475569; }
.badge-success   { background: #dcfce7; color: #166534; }
.badge-danger    { background: #fee2e2; color: #991b1b; }
.badge-warning   { background: #fef3c7; color: #92400e; }
.badge-info      { background: #e0f2fe; color: #075985; }
.badge-lg        { font-size: .875rem; padding: .4rem 1rem; }

/* ---------------------------------------------------------------
   Tables
--------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { background: #f8fafc; text-align: left; padding: .75rem 1rem; font-weight: 600; border-bottom: 2px solid var(--color-border); }
.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #f8fafc; }

/* ---------------------------------------------------------------
   Page headers
--------------------------------------------------------------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.page-header h1 { font-size: 1.75rem; font-weight: 700; }
.page-header h2 { font-size: 1.1rem; font-weight: 400; color: var(--color-muted); }
.actions-group { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   Listes
--------------------------------------------------------------- */
.team-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.team-item { padding: .625rem 0; border-bottom: 1px solid var(--color-border); }
.team-item:last-child { border-bottom: none; }

.registration-list { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.registration-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.reg-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   Deux colonnes
--------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* ---------------------------------------------------------------
   Sections
--------------------------------------------------------------- */
.section { margin: 2rem 0; }
.section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }

/* ---------------------------------------------------------------
   Définitions
--------------------------------------------------------------- */
.dl-grid { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; font-size: .9rem; }
.dl-grid dt { font-weight: 600; color: var(--color-muted); }

/* ---------------------------------------------------------------
   Score forms
--------------------------------------------------------------- */
.score-form { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 1.5rem 0; }
.score-team { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.score-team label { font-size: .875rem; color: var(--color-muted); text-align: center; }
.score-input { width: 80px; text-align: center; font-size: 2rem; font-weight: 700; padding: .5rem; border: 2px solid var(--color-border); border-radius: var(--radius); }
.score-sep { font-size: 2rem; color: var(--color-muted); margin-top: 1.5rem; }
.score-cell { text-align: center; }

/* ---------------------------------------------------------------
   Auth
--------------------------------------------------------------- */
.auth-container { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 440px; }
.auth-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------
   Pagination
--------------------------------------------------------------- */
.pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.page-link { padding: .5rem .875rem; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); }
.page-link.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---------------------------------------------------------------
   QR code placeholder
--------------------------------------------------------------- */
.qr-placeholder { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; border: 2px dashed var(--color-border); border-radius: var(--radius); margin: 1rem auto; }
.qr-url { font-size: .8rem; word-break: break-all; color: var(--color-muted); margin-top: .5rem; }

/* ---------------------------------------------------------------
   Utilitaires
--------------------------------------------------------------- */
.text-center  { text-align: center; }
.text-muted   { color: var(--color-muted); }
.text-right   { text-align: right; }
.mt-1  { margin-top: .5rem; }
.mt-2  { margin-top: 1rem; }
.mt-4  { margin-top: 2rem; }
.vs    { color: var(--color-muted); font-weight: 400; margin: 0 .5rem; }

/* ---------------------------------------------------------------
   Impression (cartes de score)
--------------------------------------------------------------- */
@media print {
    .admin-sidebar, .admin-topbar, .btn, form, .page-header .actions-group { display: none !important; }
    .admin-main { margin-left: 0; }
    .qr-placeholder, .qr-url { display: block; }
}

/* ---------------------------------------------------------------
   Modal
--------------------------------------------------------------- */
.modal { position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem; }
.modal-backdrop { position:absolute;inset:0;background:rgba(0,0,0,.5); }
.modal-box { position:relative;z-index:501;width:100%;max-width:480px; }

/* ---------------------------------------------------------------
   Checkbox label
--------------------------------------------------------------- */
.checkbox-label { display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.925rem; }
.checkbox-label input[type=checkbox] { width:1rem;height:1rem;cursor:pointer; }

/* ---------------------------------------------------------------
   Spacing utilitaire
--------------------------------------------------------------- */
.mb-4 { margin-bottom:2rem; }

/* ---------------------------------------------------------------
   Sidebar admin — liens supplémentaires
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 768px) {
    .two-col    { grid-template-columns: 1fr; }
    .form-row   { grid-template-columns: 1fr; }
    .admin-sidebar { width: 100%; height: auto; position: static; }
    .admin-main    { margin-left: 0; }
    .admin-wrapper { flex-direction: column; }
    .hero h1    { font-size: 1.75rem; }
}