/* emargement/style.css */
:root {
    --bs-primary: #2b3a5d;
    --bs-secondary:#ce2459;
    --bs-primary-rgb: 42, 157, 143;
}
body { background: #f0f2f8; }
.btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-primary:hover { background-color: #ce2459; border-color: #ce2459; }
.bg-primary { background-color: var(--bs-primary)50 !important; }
.navbar.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
 .reg-header {
    background-color: var(--bs-primary);
 }
.title{
            color: var(--bs-primary);
        }

        body {
            background: #f4f6fb;
        }

        /* Header */
        
        .page-header {
            background: linear-gradient(135deg, #1e293b 0%, #0d47a1 100%);
            color: #fff;
            padding: 1.25rem 1.5rem;
        }

        /* Compteurs */
        .counter-card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
            text-align: center;
            padding: 1rem;
        }

        .counter-value {
            font-size: 2.4rem;
            font-weight: 800;
            line-height: 1;
            transition: all .3s;
        }

        /* Table */
        #participantsTable tbody tr {
            cursor: pointer;
            transition: background .15s;
            user-select: none;
        }

        #participantsTable tbody tr:hover {
            background: #e8f4fd !important;
        }

        #participantsTable tbody tr.present {
            background: #d1fae5 !important;
        }

        #participantsTable tbody tr.present:hover {
            background: #a7f3d0 !important;
        }

        #participantsTable tbody tr.pending {
            opacity: .6;
            pointer-events: none;
        }

        .presence-badge {
            font-size: .8rem;
        }

        /* Search bar */
        .search-wrapper {
            position: relative;
        }

        .search-wrapper .bi {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #aaa;
        }

        .search-wrapper input {
            padding-left: 36px;
        }

        /* SSE indicator */
        .sse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
            display: inline-block;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: .4;
            }
        }

        .sse-dot.disconnected {
            background: #ef4444;
            animation: none;
        }

         .navbar-brand {
      font-weight: 700;
    }

    .kpi-card {
      border: none;
      border-radius: 14px;
      box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
      padding: 1.25rem 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .kpi-icon {
      width: 54px;
      height: 54px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      flex-shrink: 0;
    }

    .kpi-value {
      font-size: 2rem;
      font-weight: 800;
      line-height: 1;
    }

    .kpi-label {
      font-size: .82rem;
      color: #6c757d;
      margin-top: 2px;
    }

    .section-title {
      font-size: 1rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .chart-card {
      background: #fff;
      border: none;
      border-radius: 14px;
      box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
      padding: 1.25rem;
    }

    .chart-card .chart-title {
      font-size: .9rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 1rem;
    }

    .table-actions .btn {
      padding: 3px 8px;
    }

    .badge-type {
      font-size: .72rem;
      font-weight: 500;
    }

    .ev-stat-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px solid #f1f5f9;
    }

    .ev-stat-row:last-child {
      border-bottom: none;
    } 
     .reg-header {
            
            color: #fff;
            padding: 0.5rem;
        }

        .reg-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, .10);
            padding: 2rem;
        }

        .field-label {
            font-weight: 600;
            font-size: .95rem;
            margin-bottom: .35rem;
        }

        .field-label .required-star {
            color: #dc3545;
            margin-left: 2px;
        }

        .fixed-badge {
            background: #ce245a1c;
            color: var(--bs-secondary);
            border-radius: 6px;
            font-size: .75rem;
            padding: 1px 7px;
        }

        .success-screen {
            display: none;
            text-align: center;
            padding: 2.5rem 1rem;
        }

        .success-screen .check-icon {
            font-size: 4rem;
            color: #22c55e;
        }

 @media (max-width: 768px) {
  #footer-logo{
text-align: left !important;
}
.footer-logo-img{
  height:90px !important;
}}

/* Footer */
.footer {
  background-color: var(--bs-primary);
  color: #fff;
  padding: 1.5rem 0;
  margin-top: 3rem;
}
.footer.row{
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.footer a{

  color: #fff
}
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 1.2rem;
}
.footer-bottom p{
  margin-bottom: 0;
}
.footer-section h3 {
  margin-bottom: 1rem;
  color: #fff
}
#footer-logo{
text-align: end;
}
.footer-section p {
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.footer-bottom {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-logo-img{
  width: auto;
  height: 100px;
  object-fit: contain;
}