/* ==========================================================
   Carte Grise à Votre Service — Style Minimaliste Notion
   Clean, moderne, animations subtiles
   ========================================================== */

/* ----------------------------------------------------------
   1. Variables CSS — Palette Minimaliste
   ---------------------------------------------------------- */
:root {
    /* Couleurs principales */
    --blue:          #1F3D7A;
    --blue-light:    #2E5BB8;
    --blue-pale:     #F0F4FA;
    --red:           #C8102E;
    --red-light:     #E63950;
    --white:         #FFFFFF;
    
    /* Neutres (Notion-like) */
    --gray-50:       #FAFAFA;
    --gray-100:      #F5F5F5;
    --gray-200:      #E5E5E5;
    --gray-300:      #D4D4D4;
    --gray-400:      #A3A3A3;
    --gray-500:      #737373;
    --gray-600:      #525252;
    --gray-700:      #404040;
    --gray-800:      #262626;
    --gray-900:      #171717;

    /* Sémantique */
    --success:       #22C55E;
    --warning:       #F59E0B;
    --error:         #EF4444;
    --info:          #3B82F6;

    /* Espacement */
    --radius:        0.5rem;
    --radius-lg:     0.75rem;
    --radius-xl:     1rem;
    
    /* Ombres subtiles */
    --shadow-sm:     0 1px 2px rgba(0,0,0,0.04);
    --shadow:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    
    /* DaisyUI overrides - IMPORTANT */
    --fallback-p:    31 61 122;
    --fallback-pc:   255 255 255;
    --fallback-s:    200 16 46;
    --fallback-sc:   255 255 255;
    --fallback-a:    46 91 184;
    --fallback-ac:   255 255 255;
    --fallback-n:    38 38 38;
    --fallback-nc:   255 255 255;
    --fallback-b1:   255 255 255;
    --fallback-b2:   250 250 250;
    --fallback-b3:   245 245 245;
    --fallback-bc:   23 23 23;
    --fallback-in:   59 130 246;
    --fallback-su:   34 197 94;
    --fallback-wa:   245 158 11;
    --fallback-er:   239 68 68;
}

/* ----------------------------------------------------------
   2. DaisyUI Theme Override - Force Clean Colors
   ---------------------------------------------------------- */
[data-theme="light"],
[data-theme] {
    --p: 31 61 122;
    --pc: 255 255 255;
    --s: 82 82 82;
    --sc: 255 255 255;
    --a: 31 61 122;
    --ac: 255 255 255;
    --n: 38 38 38;
    --nc: 255 255 255;
    --b1: 255 255 255;
    --b2: 250 250 250;
    --b3: 245 245 245;
    --bc: 23 23 23;
    --in: 59 130 246;
    --inc: 255 255 255;
    --su: 34 197 94;
    --suc: 255 255 255;
    --wa: 245 158 11;
    --wac: 255 255 255;
    --er: 239 68 68;
    --erc: 255 255 255;
    --rounded-box: 0.75rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 9999px;
    --animation-btn: 0.2s;
    --animation-input: 0.2s;
    --btn-focus-scale: 0.98;
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.55rem;
}
.text-success {
  color:  #16a34a !important;
}

.bg-success { background: #e8f2ec;}
.rounded-full.bg-success { background: #6eb688;}

/* Force override any purple/yellow from DaisyUI */
.btn-primary {
    --btn-color: var(--blue) !important;
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    color: white !important;
}
.btn-primary:hover {
    background-color: var(--blue-light) !important;
    border-color: var(--blue-light) !important;
}

.btn-error {
    --btn-color: var(--red) !important;
    background-color: var(--red) !important;
    border-color: var(--red) !important;
    color: white !important;
}
.btn-error:hover {
    background-color: var(--red-light) !important;
    border-color: var(--red-light) !important;
}
.input-bordered {border-color: var(--gray-200) !important ;}
.text-blue-600 {color: var(--blue) !important;}
.bg-blue-600 {
  background-color: var(--blue) !important;
  transition: 0.5s all ease;
}
.bg-blue-600:hover {  background-color: var(--blue-light) !important; transform: scale(0.98); }

a, button {
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
a:hover, button:hover {
    transform: scale(0.995);
}


.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
  border-bottom-color: #f2f2f2;
}


.alert-info {border-color:var(--red);
  color: var(--red);}
  .bg-base-100 {
  background: #f6faff40;
}
.bg-base-200 {background: #f9f9f9a6;}
.badge-error {color: var(--red)}
.no-hover-scall {transition:0.3s all ease}
.no-hover-scall:hover {transform: scale(1) !important; opacity:0.8}
.text-xxs {font-size: 0.75rem !important;}
.opacity-4 {opacity:0.5}
.kanban-col {background: linear-gradient(0deg,rgba(255, 255, 255, 0.38) 0%, rgba(213, 230, 238, 0.31) 99%);
border-radius: 20px;
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

#ticket-tabs {background: linear-gradient(90deg,rgba(255, 255, 255, 0.38) 0%, rgba(241, 244, 224, 0.36) 99%);
  color: rgb(27, 34, 48);
  box-shadow: 0px 0px 20px #35688629;}

.ticket-nav {
  background: rgba(255, 255, 255, 0.67);
  color: rgb(27, 34, 48);
  box-shadow: 0px 0px 20px #35688629;
  border-radius:7px; border-radius: 12px;
}

.btn-warning {
  background: #fdf3ef;
  border: none;
}
.select-bordered {border: 1px solid #f2f2f2}

/* Ticket header - horizontal scroll */
.ticket-top > div {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ticket-top > div::-webkit-scrollbar {
  display: none;
}


.label {padding-top: .25rem;
  padding-bottom: .25rem;}
.label-text {
  font-size: .8rem;
  line-height: 1.2rem;}

.divider::before, .divider::after {
  border: 1px solid var(--gray-200);
}
.input {height: 2.8rem;}



/* ----------------------------------------------------------
   3. Base — Police & Reset
   ---------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--white);
    color: var(--gray-800);
    line-height: 1.6;
    min-height: 100vh;
}

.none {display:none !important}


/* ----------------------------------------------------------
   4. Typography — Notion Style + Gradients
   ---------------------------------------------------------- */
.h1, h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--gray-900);
    letter-spacing: -0.03em;
}

.h2, h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

.h3, h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gray-800);
}

/* Gradient text styles */
.text-gradient {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 50%, #4F7DC9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-warm {
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-600) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-accent {
    background: linear-gradient(135deg, var(--blue) 0%, var(--red) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ----------------------------------------------------------
   5. Animations — Scroll Reveal & Micro-interactions
   ---------------------------------------------------------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Hover effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: transform 0.2s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Card shine effect */
.card-shine {
    position: relative;
    overflow: hidden;
}

.card-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}

.card-shine:hover::after {
    left: 100%;
}

/* Grain overlay */
.grain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0.02;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------
   6. Components — Buttons
   ---------------------------------------------------------- */
.btn-cg-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--blue);
    color: white;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-cg-primary:hover {
    background-color: var(--blue-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-cg-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: transparent;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cg-secondary:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-300);
}

/* ----------------------------------------------------------
   7. Components — Cards (Notion-like)
   ---------------------------------------------------------- */
.mt-100 {margin-top:200px}
   .card-notion {
    background: var(--white);
    border: 0px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.card-notion:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
}

.card-transparent{
  background: transparent !important;
    border: none !important;
}
.card-transparent:hover{
    box-shadow:none !important
}

.card-elevated {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.card-elevated:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------
   8. Components — Forms
   ---------------------------------------------------------- */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.375rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background-color: var(--white);
    color: var(--gray-900);
    outline: none;
    transition: all 0.15s ease;
}

.form-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(31, 61, 122, 0.08);
}

.form-input::placeholder {
    color: var(--gray-400);
}

/* Password strength bars */
.strength-bar {
    height: 4px;
    flex: 1;
    border-radius: 2px;
    background-color: var(--gray-200);
    transition: background-color 0.2s ease;
}

/* ----------------------------------------------------------
   9. Components — Badges
   ---------------------------------------------------------- */


.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
    border-color : var(--gray-600);
    color : var(--gray-600)

}

.z-500{z-index : 500}
.progress-bar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: #ffffff85;
  text-align: center; padding:0px 4px
}
.menu-right {position: absolute;
  right: 20px;border-radius: 30px;background: #ecedf8;}
.bg-progress {background: linear-gradient(90deg,rgba(15, 53, 220, 0.47) 74%, rgb(234, 255, 222) 99%);}
.small {font-size: 80%;}


/* ── Plaque d'immatriculation française ── */
.badge-plate {
    display: inline-flex;
    align-items: center;
    font-family: 'FE-Schrift', 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #111;
    background: #fff;
    border: 1.5px solid #222;
    border-radius: 4px;
    padding: 0px 6px 0px 0;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    gap: 0;
    white-space: nowrap;
    position: relative;
}

/* Bande bleue gauche avec étoiles EU */
.badge-plate::before {
    content: '';
    white-space: pre;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    min-height: 100%;
    background: #003399;
    color: #FFD700;
    font-size: .32rem;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.1;
    border-radius: 1.5px 0 0 2px;
    margin-right: 6px;
    padding: 2px 0;
    align-self: stretch;
}


.badge-plate.small {font-size: .7rem;}
.small.badge-plate::before {  width: 8px;}
.badge-service {padding: 0.75rem 0.75rem;}


.btn-outline {color:var(--blue); border-color:var(--blue);}
.btn-ghost {color: #999; }
.badge-ghost {color: #999; border-color: #999;}
.textarea-bordered {  border-color:  #999;}

.badge-blue    { background: var(--blue-pale); color: var(--blue); border: none;  }
.badge-green   { background: #DCFCE7; color: #67b182; border: none; }
.badge-orange  { background: #FEF3C7; color: #c99e6e;  border: none}
.badge-red     { background: #FEE2E2; color: #b45d5d;  border: none}
.badge-gray    { background: var(--gray-100); color: var(--gray-600); }

.badge-success { background: #DCFCE7; color: #67b182;  border: none}
.badge-warning { background: #FEF3C7; color: #c99e6e;  border: none}
.badge-danger  { background: #FEE2E2; color: #b45d5d;  border: none}
.badge-info    { background: #DBEAFE; color: #123fa1;  border: none}

/* ----------------------------------------------------------
   10. Layout — Container & Sections
   ---------------------------------------------------------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 5rem 0;
}

.section-sm {
    padding: 3rem 0;
}

/* ----------------------------------------------------------
   11. Layout — Admin Sidebar
   ---------------------------------------------------------- */


.bg-admin {
    position: relative;
    background: linear-gradient(81deg, rgba(230, 233, 247, 1) 0%, rgba(246, 246, 249, 1) 50%, rgba(247, 246, 249, 1) 99%);
   
}

.bg-admin::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05; /* Ajustez l'intensité du grain ici */
    pointer-events: none;
    filter: url(#noiseFilter);
    /* Alternative sans fichier SVG externe : */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.auth-card {background: #fbfbfb; box-shadow:  29px 29px 39px #eaedf0, -29px -29px 39px #ecf1f4 }


.admin-sidebar {
    background: linear-gradient(180deg, #1a2744 0%, #0f1a2e 100%);
    min-height: 100vh;
}

.admin-nav {
  background: #ffffff52;
  border-radius: 10px;
  margin: 10px;
}
.admin-sticky {
    background: linear-gradient(
        180deg, 
        rgba(230, 233, 247, 0.7) 0%, 
        rgba(247, 246, 249, 0.3) 99%
    );
    backdrop-filter: blur(2px) saturate(110%);
    -webkit-backdrop-filter: blur(2px) saturate(110%); /* Pour Safari */
}

.admin-sticky h1 {
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.05px;
  font-size: 130%;
  }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    
    padding: 0.425rem 0.675rem;
    border-radius: var(--radius);
    font-size: 0.775rem;
    font-weight: 500;
    color: rgba(41, 41, 41, 0.6);
    text-decoration: none;
    transition: all 0.15s ease;
}

.sidebar-link:hover {
   background: rgba(255, 255, 255, 0.47);
    color: rgb(35, 43, 58);
}

.sidebar-link.active {
    background: rgba(255, 255, 255, 0.67);
    color: rgb(27, 34, 48);
    box-shadow: 0px 0px 20px #35688629;
}

.modal-box {background:#fff !important}
.admin-stat-card {
 background: #FFFC;
  border-radius: var(--radius-lg);
  border: 0px solid var(--gray-200);
  overflow: hidden;
  box-shadow: 17px 17px 34px #f2f5ff6b, -17px -17px 34px #72a9b11c;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.admin-stat-card:hover {
    box-shadow: var(--shadow-md)
}


.admin-card {
background: #FFFC;
  border-radius: var(--radius-lg);
  border: 0px solid var(--gray-200);
  overflow: hidden;
  box-shadow: 17px 17px 34px #f2f5ff6b, -17px -17px 34px #72a9b11c;
}

.kanban-card.admin-card {
background: #FFFC;
  border-radius: var(--radius-lg);
  border: 0px solid var(--gray-200);
  overflow: hidden;
  box-shadow: 5px 5px 10px #f2f5ff6b, -5px -5px 10px #72a9b11c;
}

.admin-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-card-body {
    padding: 1.5rem;
}


/******* FILTER **********/

.filter select  {
  background: #ffffff69; font-size:12px !important
}

.filter .admin-card-body {
  padding: 0.5rem;
  background: #6a819e42;
  box-shadow: 0px 0px 30px #fff;
   font-size:12px !important
}

.filter button {
  font-size:12px !important
}

.filter input {background: #ffffff69;  font-size:12px !important}
.dt-info {
  font-size: 9px;
  opacity: 0.5;
}

/* ----------------------------------------------------------
   12. Layout — Client Area
   ---------------------------------------------------------- */
.client-welcome {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
    border-radius: var(--radius-xl);
    padding: 2rem;
    color: white;
    margin-bottom: 2rem;
}

.client-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.client-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
}

/* ----------------------------------------------------------
   13. DataTables — Clean Override
   ---------------------------------------------------------- */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.15s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(31,61,122,0.08);
}

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

.dataTables_wrapper thead th {
    background: var(--gray-50);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
}

.dataTables_wrapper tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.1s ease;
}

.dataTables_wrapper tbody tr:hover {
    background: var(--gray-50);
}

.dataTables_wrapper tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--gray-600);
    transition: all 0.15s ease;
    margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--blue);
    color: white !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* ----------------------------------------------------------
   14. Logo
   ---------------------------------------------------------- */
.logo-img {
    height: 2rem;
    width: auto;
}

.logo-img-lg {
    height: 2.5rem;
    width: auto;
}

/* ----------------------------------------------------------
   15. Utilities
   ---------------------------------------------------------- */
.text-blue  { color: var(--blue) !important; }
.text-red   { color: var(--red) !important; }
.bg-blue    { background-color: var(--blue) !important; }
.bg-red     { background-color: var(--red) !important; }
.bg-pale    { background-color: var(--blue-pale) !important; }

.spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

/* Animate on load */
.animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.btn-back {
    text-decoration: none;
    border: 1px solid var(--gray-500);
    color: var(--gray-500); 
    padding: 5px;
  border-radius: 50%; 
  background: transparent;
  width: 30px;
}
.btn-back:hover {border-color:var(--blue) !important; color:var(--blue) !important;   background: transparent;}

/* ----------------------------------------------------------
   16. Mobile Menu Fullscreen
   ---------------------------------------------------------- */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    top: 50px;
    background: var(--white);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-overlay .text-base {
  font-size: 0.9rem;
  line-height: 1rem;
}
.mobile-menu-overlay .w-5 {
  width: 1.0rem;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.5rem;
    overflow: scroll;
}

.mobile-nav-link {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    text-decoration: none;
    padding: 0.5rem 0;
    transition: all 0.2s ease;
    position: relative;
}

.mobile-nav-link:hover {
    color: var(--blue);
}

.mobile-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--blue);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.mobile-nav-link:hover::after {
    width: 100%;
}

/* Animation stagger pour les liens mobile */
.mobile-menu-overlay.active .mobile-nav-link {
    animation: fadeUp 0.4s ease forwards;
}

.mobile-menu-overlay.active .mobile-nav-link:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(2) { animation-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(3) { animation-delay: 0.15s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(4) { animation-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(5) { animation-delay: 0.25s; }

/* ----------------------------------------------------------
   17. Page Specific Animations
   ---------------------------------------------------------- */
/* Hero section */
.hero-title {
    animation: fadeUp 0.8s ease forwards;
}

.hero-subtitle {
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

.hero-cta {
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

/* Cards grid animation */
.card-animated {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease forwards;
}

.card-animated:nth-child(1) { animation-delay: 0.1s; }
.card-animated:nth-child(2) { animation-delay: 0.2s; }
.card-animated:nth-child(3) { animation-delay: 0.3s; }
.card-animated:nth-child(4) { animation-delay: 0.4s; }
.card-animated:nth-child(5) { animation-delay: 0.5s; }
.card-animated:nth-child(6) { animation-delay: 0.6s; }

/* Auth pages */
.auth-card {
    animation: scaleIn 0.5s ease forwards;
}

/* Dashboard welcome */
.dashboard-welcome {
    animation: fadeUp 0.6s ease forwards;
}

.dashboard-stats {
    animation: fadeUp 0.6s ease forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

.dashboard-content {
    animation: fadeUp 0.6s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

/* ----------------------------------------------------------
   18. CRM — Tables & Definition Lists
   ---------------------------------------------------------- */
.crm-table {
    width: 100%;
    border-collapse: collapse;
}

.crm-table thead th {
    background: var(--gray-50);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    border-bottom: 1px solid #F2F2F2;
    white-space: nowrap;
}

.crm-table tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.1s ease;
}

.crm-table tbody tr:hover {
    background: var(--gray-50);
}

.crm-table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--gray-700);
    vertical-align: middle;
}

.crm-table tbody tr:last-child {
    border-bottom: none;
}

/* CRM Definition list (fiche utilisateur) */
.crm-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.crm-dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gray-100);
}

.crm-dl > div:last-child {
    border-bottom: none;
}

.crm-dl dt {
    font-size: 0.8125rem;
    color: var(--gray-500);
    font-weight: 500;
}

.crm-dl dd {
    font-size: 0.75rem;
    color: var(--gray-900);
    font-weight: 500;
    text-align: right;
}

/* CRM Filters form */
.crm-filters-form .btn {
    white-space: nowrap;
}

/* Admin stat icon */
.admin-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bt-admin label.text-sm {
  font-size: 0.705rem;}

/* ----------------------------------------------------------
   19. DataTables Overrides (style minimaliste)
   ---------------------------------------------------------- */
#crm-users-table_wrapper .dt-info {
    font-size: 0.6125rem;
    color: var(--gray-500);
    opacity:0.8
}

#crm-users-table_wrapper .dt-paging-button {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    font-size: 0.8125rem;
    color: var(--gray-600);
    transition: background 0.15s ease;
}

#crm-users-table_wrapper .dt-paging-button:hover {
    background: var(--gray-50);
}

#crm-users-table_wrapper .dt-paging-button.current {
    background: var(--gray-900);
    color: white;
    border-color: var(--gray-900);
}

/* Sort arrows */
table.dataTable thead th.dt-orderable-asc span.dt-column-order,
table.dataTable thead th.dt-orderable-desc span.dt-column-order {
    opacity: 0.3;
    transition: opacity 0.15s;
}

table.dataTable thead th.dt-ordering-asc span.dt-column-order,
table.dataTable thead th.dt-ordering-desc span.dt-column-order {
    opacity: 1;
}

/* Hide native DataTables search (we use our own) */
.dataTables_filter {
    display: none !important;
}

/* DataTable buttons (hidden, triggered programmatically) */
div.dt-buttons {
    display: none;
}

.max-400  {
  max-width: 480px;
  margin: auto;
}

.bg-radius {border-radius: 20px;
  margin: 0px 10px;}

  .strong {    font-weight: 800;}
/* ----------------------------------------------------------
   19. Blog — Article prose content
   ---------------------------------------------------------- */
.blog-content h1,.blog-content h2,.blog-content h3,
.blog-content h4,.blog-content h5,.blog-content h6 {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    color: var(--blue);
    margin-top: 1.75rem;
    margin-bottom: .75rem;
    line-height: 1.3;
}
.blog-content h1 { font-size: 5.4rem;margin-top: 3.8rem ;    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 50%, #4F7DC9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;line-height: 1;
    background-clip: text; }
.blog-content h2 { font-size: 1.4rem;margin-top: 2.8rem ; margin-bottom: 0.5rem;}
.blog-content h3 { font-size: 1.15rem; margin-top: 1.8rem; margin-bottom: 0.5rem;}
.blog-content p  { color: #374151; line-height: 1.4; font-size:14px; margin-bottom: 0rem; }
.blog-content ul,.blog-content ol { padding-left: 0.5rem; margin-bottom: 0.5rem; }
.blog-content li { color: #374151; line-height: 1.4; margin-bottom: .5rem; font-size:14px; }
.blog-content blockquote {
    border-left: 4px solid var(--blue);
    padding: .75rem 1.25rem;
    background: #eff6ff;
    color: var(--blue);
    border-radius: 0 .5rem .5rem 0;
    margin: 1.25rem 0;
    font-style: italic;font-size:14px;
}
.blog-content pre,.blog-content code {
    background: #f3f4f6;
    border-radius: .5rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: .875rem;
}
.max-1200 {max-width:1200px; margin:auto}
.blog-content pre { padding: 1rem 1.25rem; overflow-x: auto; margin-bottom: 1.1rem; }
.blog-content code { padding: .15em .4em; }
.blog-content a { color: var(--blue); text-decoration: underline; }
.blog-content img { max-width: 100%; border-radius: 1rem; margin: 1rem 0; }
.blog-content strong { color: #111827; }
.blog-content table {width:100%;margin-bottom:20px}
.blog-content table, .blog-content td, .blog-content tr {border:1px solid #e5e5e5}
.blog-content td, .blog-content tr {padding:5px; font-size:12px}

/* Line clamp utility */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------------
   20. Modal backdrop fix (DaisyUI dialog)
   ---------------------------------------------------------- */
dialog.modal::backdrop {
    background-color: rgba(0, 0, 0, 0.45);
}
/* Fallback: DaisyUI .modal-backdrop form */
.modal-backdrop {
    background-color: transparent;
}

/* ----------------------------------------------------------
   20b. SAV unread blinking dot (sidebar)
   ---------------------------------------------------------- */
.sav-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ef4444;
    animation: sav-blink 1.2s ease-in-out infinite;
}
@keyframes sav-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

/* ----------------------------------------------------------
   21. Kanban board
   ---------------------------------------------------------- */
.kanban-col {
    min-width: 17rem;
}

.kanban-card {
    cursor: pointer;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-100);
    background: #fff;
}

.kanban-card:hover {
    border-color: var(--gray-200);
}

/* ----------------------------------------------------------
   22. DataTables overrides — tickets table
   ---------------------------------------------------------- */
#tickets-table_wrapper .dt-info {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

#tickets-table_wrapper .dt-paging-button {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    font-size: 0.8125rem;
    color: var(--gray-600);
    transition: background 0.15s ease;
}

#tickets-table_wrapper .dt-paging-button:hover {
    background: var(--gray-50);
}

#tickets-table_wrapper .dt-paging-button.current {
    background: var(--gray-900);
    color: white;
    border-color: var(--gray-900);
}

/* ----------------------------------------------------------
   23. Tunnel — 8-step wizard
   ---------------------------------------------------------- */

/* Layout */
.tunnel-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 40;
}

.tunnel-header-inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1rem;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tunnel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    border: none;
    background: transparent;
}
.tunnel-close:hover {
    background: #f3f4f6;
    color: #111827;
}

/* Progress bar */
.tunnel-progress-wrap {
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    padding: 0.625rem 0;
    overflow-x: auto;
}

.tunnel-steps {
    display: flex;
    align-items: center;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1rem;
    gap: 0;
}

.tunnel-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.tunnel-step-circle {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9ca3af;
    background: #fff;
    transition: all 0.2s ease;
}

.tunnel-step.done .tunnel-step-circle {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.tunnel-step.active .tunnel-step-circle {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.tunnel-step-label {
    font-size: 0.6rem;
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
    white-space: nowrap;
}

.tunnel-step.active .tunnel-step-label { color: #2563eb; }
.tunnel-step.done   .tunnel-step-label { color: #16a34a; }

.tunnel-step-connector {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    min-width: 1rem;
    margin-bottom: 1rem;
    transition: background 0.2s ease;
}

.tunnel-step-connector.done {
    background: #16a34a;
}

/* Body */
.tunnel-body {
    flex: 1;
    padding: 2rem 1rem;
    max-width: 56rem;
    width: 100%;
    margin: 0 auto;
    
}

.tunnel-body  .tunnel-card { box-shadow:  29px 29px 39px #eaedf0, -29px -29px 39px #ecf1f4; border:none}

.card-transparent{
  background: transparent !important;
    border: none !important;
}

/* Card */
.tunnel-card {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    padding: 1.75rem;
    max-width:60rem;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Footer */
.tunnel-footer {
    padding: 1.5rem 1rem;
    border-top: 1px solid #f3f4f6;
    background: #fff;
}

/* Form elements */
.tunnel-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.35rem;
}

/* Service selection cards */
.tunnel-service-card {
    border: 1.5px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 1.125rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}

.tunnel-service-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

/* Info box (vehicle found) */
.tunnel-info-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.75rem;
    padding: 1rem;
}

/* Recap sections */
.tunnel-recap-section {
    padding: 1rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.tunnel-recap-section:last-of-type {
    border-bottom: none;
}

.tunnel-recap-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 0.75rem;
}

/* Brand logos */
.brand-logo {
    height: 2rem;
    width: auto;
    max-width: 5rem;
    object-fit: contain;
    display: inline-block;
}

/* Upload zones */
.tunnel-upload-card {
    border: 1.5px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 1rem;
    background: #fff;
    transition: border-color 0.2s ease;
}

.tunnel-upload-card.uploaded {
    border-color: #86efac;
    background: #f0fdf4;
}

.upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ticket-top {
  background: linear-gradient( 180deg, rgba(2247, 246, 249, 0.3) 0%, rgba(247, 246, 249, 0.3) 99% );
  backdrop-filter: blur(3px) saturate(120%);
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.upload-zone.done {
    border-color: #86efac;
    background: #f0fdf4;
}

.text-xxl {font-size:40px}


.plaque-wrapper {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    border: 2px solid #003399;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    width: 100%;
}

.plaque-eu {
    width: 32px;
    background: #003399;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    
}

.plaque-eu::before {
    content: '★';
    color: #FFD700;
    font-size: 10px;
}

.plaque-eu::after {
    content: 'F';
    color: white;
    font-size: 11px;
    font-weight: bold;
}

.input-immat {
    border: none !important;
    outline: none !important;
    text-align: center;
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 8px 12px;
    width: 100%;
}

.input-immat:focus {
    box-shadow: none !important;
    ring: none !important;
}


div:where(.swal2-icon) .swal2-icon-content {
  display: flex;
  align-items: center;
  font-size: 1.75em;
}
div:where(.swal2-icon) {width: 3em;
  height: 3em;}

  div:where(.swal2-icon).swal2-question {
  border-color: #8c1929 !important;
  color: #8c1929 !important;
  border-width: 2px !important;
}

div:where(.swal2-container) div:where(.swal2-html-container) {font-size: 0.825em !important;}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {background-color:  #8c1929 !important;}


.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}


@media (max-width: 768px) {

.fixe-bottom {
  position: fixed;
  z-index: 1000;
  bottom: 0 !important;
  width: 100%;
  left: 0;
  padding: 20px;
  background: linear-gradient(0deg,rgb(230, 233, 247) 50%, rgba(247, 246, 249, 0) 99%);
  margin: 0;
}

    .fullwidth-mobile {width:100%}
    .mb-100 {margin-bottom: 300px;}


  .fixe-bottom  select   {
  background: #fff;
  border-color: var(--blue);
}
}

@media (max-width: 640px) {

  input, select, textarea {
        font-size: 16px !important;
    }
    .admin-card-body h2.font-semibold {line-height: 1.1;}

    .hero-form .py-16 {
  padding-top: 3rem;
  padding-bottom: 2rem;
}


    .hero-form .text-lg {
  font-size: 15px;
  line-height: 1.4em;
  margin-bottom: 10px;
}
  .hero-form h1{
  margin-bottom: 5px;
}
.text-xl {
  font-size: 1.35rem;
  line-height: 1.75rem;
}

.admin-sticky h1 {
  font-size: 90%;
  }
    .tunnel-card {
        padding: 1.25rem;
        border-radius: 0.75rem;
    }
    .tunnel-steps {
        gap: 0;
    }
    .tunnel-step-label {
        display: none;
    }
}

/* ----------------------------------------------------------
   Form inputs - Radio & Checkbox explicit styles
   ---------------------------------------------------------- */
input[type="radio"],
input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--blue);
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}

/* Larger touch targets for admin */
.admin-card input[type="radio"],
.admin-card input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
}

/* Modal specific */
.modal input[type="radio"],
.modal input[type="checkbox"] {
    flex-shrink: 0;
}