/* Cantine IIA - styles extraits du monolithe (identiques a l'original) */

*{font-family:Gisha,'Plus Jakarta Sans',Tahoma,sans-serif !important;}
body{font-family:Gisha,'Plus Jakarta Sans',Tahoma,sans-serif !important; overflow-x:hidden;}
.typewriter{font-family:'Courier Prime','Courier New',monospace !important;}
.special-type{font-family:'Special Elite','Courier Prime',monospace !important;}
.bs-classic-table, .bs-classic-table th, .bs-classic-table td{font-family:Gisha,Tahoma,sans-serif !important;}
#comptaClaireTable{font-family:Gisha,Tahoma,sans-serif !important; width:100%; border-collapse:separate; border-spacing:0; background:white; border:1px solid #CBD5E1; border-radius:12px; overflow:hidden; table-layout:fixed;}
#comptaClaireTable thead th{background:#003D7A; color:white; font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:0.4px; padding:10px 8px; white-space:nowrap; border:none; border-bottom:2px solid #003D7A; text-align:left; position:sticky; top:0; z-index:2; font-family:Gisha;}
#comptaClaireTable thead th:nth-child(5), #comptaClaireTable thead th:nth-child(6), #comptaClaireTable thead th:nth-child(10), #comptaClaireTable thead th:nth-child(11), #comptaClaireTable thead th:nth-child(12){text-align:right;}
#comptaClaireTable thead th:nth-child(7), #comptaClaireTable thead th:nth-child(8), #comptaClaireTable thead th:nth-child(9){text-align:center;}
#comptaClaireTable tbody td{padding:9px 8px; font-size:11px; border-bottom:1px solid #F1F5F9; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:Gisha; line-height:1.2;}
#comptaClaireTable tbody td.wrap{white-space:normal; max-width:160px; line-height:1.3; word-break:break-word;}
#comptaClaireTable tbody td.nowrap{white-space:nowrap;}
#comptaClaireTable tbody tr:hover{background:#F0F7FE;}
#comptaClaireTable tbody tr:last-child td{border-bottom:none;}
#comptaClaireTable .badge-circ{background:#FFF8E1; color:#8D6E00; border:1px solid #FFE082; padding:3px 7px; border-radius:12px; font-size:8px; font-weight:800; white-space:nowrap; display:inline-block;}
#comptaClaireTable .badge-cons{background:#E8F5E9; color:#2E7D32; border:1px solid #A5D6A7; padding:3px 7px; border-radius:12px; font-size:8px; font-weight:800; white-space:nowrap; display:inline-block;}
#comptaClaireTable .mono{font-family:'Courier New',monospace; font-weight:700; font-size:10px; color:#003D7A; white-space:nowrap;}
#comptaClaireTable .amount{font-weight:800; text-align:right; white-space:nowrap; font-size:11px;}
#comptaClaireTable tfoot td{background:#F8FAFC; font-weight:700; font-size:10px; padding:10px 8px; border-top:2px solid #003D7A; white-space:nowrap; font-family:Gisha;}

/* ===== ANIMATED FLOATING BACKGROUNDS ===== */
.animated-bg{
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: #F0F7FE;
}
.animated-bg .blob{
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    animation: floatBlob 22s infinite ease-in-out;
}
.blob-1{ width: 650px; height: 650px; background: radial-gradient(circle at 30% 30%, #3BA9E0 0%, #2A8DD0 35%, transparent 70%); top: -180px; left: -150px; }
.blob-2{ width: 550px; height: 550px; background: radial-gradient(circle at 70% 70%, #003D7A 0%, #1168AC 50%, transparent 70%); top: 15%; right: -120px; animation-delay: -6s; }
.blob-3{ width: 750px; height: 750px; background: radial-gradient(circle at 50% 50%, #D6EAFB 0%, #A7DDF6 30%, transparent 70%); bottom: -250px; left: 25%; animation-delay: -11s; }
.blob-4{ width: 450px; height: 450px; background: radial-gradient(circle at 30% 70%, #A7DDF6 0%, #3BA9E0 40%, transparent 70%); bottom: 5%; right: 15%; animation-delay: -8s; }

@keyframes floatBlob{
    0%,100%{ transform: translate(0,0) scale(1) rotate(0deg); }
    25%{ transform: translate(80px,-50px) scale(1.12) rotate(6deg); }
    50%{ transform: translate(-40px,70px) scale(0.92) rotate(-6deg); }
    75%{ transform: translate(-60px,-25px) scale(1.08) rotate(4deg); }
}

/* Floating particles - main app */
.floating-particles{
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.float-item{
    position: absolute;
    bottom: -60px;
    opacity: 0;
    animation: floatUp linear infinite;
    will-change: transform, opacity;
}
.float-item.emoji{ font-size: 22px; filter: blur(0.3px); }
.float-item.dot{ border-radius: 50%; background: currentColor; }
@keyframes floatUp{
    0%{ transform: translateY(0) translateX(0) rotate(0deg) scale(0.5); opacity:0; }
    10%{ opacity:0.25; }
    50%{ opacity:0.18; transform: translateY(-50vh) translateX(20px) rotate(180deg) scale(1); }
    90%{ opacity:0.1; }
    100%{ transform: translateY(-110vh) translateX(-20px) rotate(360deg) scale(1.3); opacity:0; }
}

/* Fond anime desactive sur mobile : "position:fixed" + "filter:blur()" + animation en boucle
   sur un calque plein ecran est un classique de scintillement/tremblement pendant le defilement
   sur telephone (le navigateur doit recomposer un flou couteux a chaque frame de scroll). Purement
   decoratif, donc on le coupe simplement en dessous de 768px plutot que de risquer ce rendu casse. */
@media (max-width:768px){
    .animated-bg, .floating-particles{ display:none !important; }
}

/* Login floating */
.login-left{ position: relative; overflow: hidden; }
.login-left::before{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(120deg, #003D7A 0%, #124B8D 25%, #1168AC 50%, #2A8DD0 75%, #0A2448 100%);
    background-size: 400% 400%;
    animation: gradientShift 14s ease infinite;
    z-index:1;
}
.login-floating{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    overflow:hidden;
}
.login-float-item{
    position:absolute;
    bottom:-40px;
    animation: floatUpLogin linear infinite;
    opacity:0.7;
}
@keyframes floatUpLogin{
    0%{ transform: translateY(0) rotate(0deg) scale(0.6); opacity:0; }
    15%{ opacity:0.8; }
    85%{ opacity:0.5; }
    100%{ transform: translateY(-110%) rotate(360deg) scale(1.2); opacity:0; }
}
@keyframes gradientShift{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

.sidebar-animated{ position:relative; overflow:hidden; }
.sidebar-animated::before{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(59,169,224,0.09) 0%, transparent 50%, rgba(59,130,246,0.09) 100%);
    background-size: 100% 200%;
    animation: sidebarGlow 9s ease infinite;
    pointer-events:none;
}
@keyframes sidebarGlow{ 0%,100%{background-position:0% 0%;} 50%{background-position:0% 100%;} }

.card-animated{
    position:relative;
    transition: all 0.45s cubic-bezier(0.4,0,0.2,1);
    overflow:hidden;
}
.card-animated::before{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
    transform: translateX(-110%);
    transition: transform 0.9s;
}
.card-animated:hover{ transform: translateY(-5px) scale(1.01); box-shadow: 0 25px 50px -15px rgba(0,0,0,0.18); }
.card-animated:hover::before{ transform: translateX(110%); }

.floating{ animation: floating 6s ease-in-out infinite; }
@keyframes floating{ 0%,100%{transform: translateY(0px);} 50%{transform: translateY(-12px);} }
.pulse-glow{ animation: pulseGlow 2.5s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{box-shadow: 0 0 20px rgba(59,169,224,0.3);} 50%{box-shadow: 0 0 45px rgba(59,169,224,0.65);} }

@media print { .animated-bg, .floating-particles, .login-floating, .blob, .float-item, .login-float-item{display:none!important;} body *{visibility:hidden!important;} #printable-ticket, #printable-ticket *{visibility:visible!important;} #printable-ticket{position:absolute; left:0; top:0; width:100%;} #compta-print, #compta-print *{visibility:visible!important;} #compta-print{position:absolute; left:0; top:0; width:100%; background:white;} #journalVentes, #journalVentes *{visibility:visible!important;} #journalVentes{position:absolute; left:0; top:0; width:100%; background:white;} .no-print{display:none!important;} }
.ticket-dashed{border:2px dashed #000;}


.iia-logo-wrapper{position:relative;width:130px;height:130px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.iia-logo-enlarged{width:100px !important;height:100px !important;object-fit:contain;background:white;border-radius:50%;padding:8px;box-shadow:0 8px 30px rgba(0,0,0,0.25);position:relative;z-index:2;}
.iia-progress-ring{position:absolute;inset:0;border-radius:50%;border:4px solid rgba(255,255,255,0.25);border-top-color:#3BA9E0;border-right-color:rgba(255,255,255,0.75);animation:spinAroundLogo 1.1s linear infinite;box-shadow:0 0 15px rgba(59,169,224,0.35);}
@keyframes spinAroundLogo{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.login-overlay-transparent{background:rgba(0,61,122,0.15) !important;backdrop-filter:blur(3px);}


/* === RESPONSIVE PERFECT - IIA 2026 === */
:root{ --sidebar-w:280px; }
html{ scroll-behavior:smooth; }
body{ -webkit-text-size-adjust:100%; }

/* Mobile header */
#mobileHeader{ display:none; }
#sidebarOverlay{ display:none; }
@media (max-width:1023px){
  #mobileHeader{ display:flex; }
  #appSidebar{ transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
  #appSidebar.open{ transform: translateX(0); }
  #sidebarOverlay{ display:block; opacity:0; pointer-events:none; transition: opacity 0.3s; }
  #sidebarOverlay.open{ opacity:1; pointer-events:auto; }
  main#appMain{ margin-left:0 !important; padding-top: 64px; }
}

/* Tables responsive */
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-responsive table{ min-width: 650px; }

/* Grid responsive improvements */
@media (max-width:640px){
  .grid{ gap:0.75rem !important; }
  .grid-cols-2{ grid-template-columns:1fr !important; }
  h1.text-3xl{ font-size:1.5rem !important; }
  h1.text-2xl{ font-size:1.25rem !important; }
  .p-6{ padding:1rem !important; }
  .lg\:p-8{ padding:1rem !important; }
  .rounded-\[20px\], .rounded-\[24px\], .rounded-\[28px\]{ border-radius:16px !important; }
  #codeTicketInput{ font-size:1rem !important; padding:1rem !important; }
  #validationLiveBody td{ padding:0.6rem 0.5rem !important; font-size:12px !important; }
}

/* Validation list cards on mobile */
@media (max-width: 768px){
  #validationLiveTable thead{ display:none; }
  #validationLiveBody tr{ display:block; background:white; margin-bottom:10px; border-radius:16px; border:1px solid #E2E8F0; box-shadow:0 2px 10px rgba(0,0,0,0.05); padding:8px; }
  #validationLiveBody td{ display:flex; justify-content:space-between; align-items:center; border:none !important; padding:8px 10px !important; }
  #validationLiveBody td::before{ content: attr(data-label); font-size:10px; font-weight:800; text-transform:uppercase; color:#64748B; letter-spacing:0.05em; }
  #validationLiveBody td:first-child::before{ content:"HEURE"; }
  #validationLiveBody td:nth-child(2)::before{ content:"PERSONNE"; }
  #validationLiveBody td:nth-child(3)::before{ content:"MENU"; }
  #validationLiveBody td:nth-child(4)::before{ content:"CODE"; }
  #validationLiveBody td:nth-child(5)::before{ content:"STATUT"; }
  #validationLiveBody td:nth-child(6)::before{ content:"ACTION"; }
  #validationLiveBody td{ flex-wrap:wrap; }
}

/* Modal blur backdrop - Validation Confirm */
#validationConfirmModal{ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#validationConfirmBg{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(15,23,42,0.55); }
#validationConfirmBox{ will-change: transform, opacity; }

/* Improve all modals on mobile */
@media (max-width:640px){
  #ticketPrintDialog .relative, #confirmClotureModal .relative, #validationConfirmModal .relative{ padding:1rem; }
  #ticketDialogBox, #confirmClotureBox, #validationConfirmBox{ max-width: 92vw !important; margin: 0 auto; }
  #comptaClaireTable{ font-size:9px !important; }
}

/* Prevent horizontal overflow */
.max-w-\[1280px\]{ max-width:100% !important; }
@media (min-width:1280px){ .max-w-\[1280px\]{ max-width:1280px !important; } }

/* Better buttons touch target on mobile */

@media (min-width:1024px){
  #appSidebar{ transform: translateX(0) !important; }
  #mobileHeader{ display:none !important; }
  #sidebarOverlay{ display:none !important; }
}

@media (max-width:640px){
  button, a{ min-height: 36px; }
  .px-3.py-1\.5{ padding:0.5rem 0.75rem !important; }
}

/* Scrollbar styling */
.custom-scrollbar::-webkit-scrollbar{ width:6px; height:6px; }
.custom-scrollbar::-webkit-scrollbar-thumb{ background:#CBD5E1; border-radius:999px; }
.custom-scrollbar::-webkit-scrollbar-track{ background:transparent; }

/* Ensure no overflow on body */
body{ overflow-x:hidden; }
main{ overflow-x:hidden; }



/* --- bloc impression (ex-lignes 8943-8954) --- */
@media print {
    @page { margin: 0 !important; }
    body { margin: 0 !important; }
    body * { visibility: hidden !important; }
    #print-iframe-container, #print-iframe-container * { visibility: visible !important; }
}
/* Masquer l'URL localhost lors de toutes les impressions */
@media print {
    @page { margin: 0 !important; }
}