/* public/assets/css/neo.css */

/* ===================== */
/* 0) Reset + Base       */
/* ===================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial;
  background:#070812;
  color:rgba(255,255,255,.92);
  overflow-x:hidden;
}

/* smooth */
a,button{ -webkit-tap-highlight-color: transparent; }
button{ font-family:inherit; }

/* ===================== */
/* 1) Ultra Background   */
/* ===================== */
#fxBg{
  position:fixed;
  inset:-35%;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,255,190,.38), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(140,90,255,.55), transparent 48%),
    radial-gradient(circle at 55% 85%, rgba(255,120,210,.34), transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 60%);
  filter: blur(45px);
  opacity:.95;
  transform: translateZ(0);
  animation: fxFloat 10s ease-in-out infinite alternate;
}
@keyframes fxFloat{
  from{ transform: translate3d(0,0,0) scale(1); }
  to  { transform: translate3d(60px,-40px,0) scale(1.04); }
}

/* noise overlay */
body::before{
  content:"";
  position:fixed;
  inset:-50%;
  z-index:-2;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
  transform: rotate(6deg);
}

/* ===================== */
/* 2) Layout wrap        */
/* ===================== */
.neoWrap{
  width:min(1180px, calc(100% - 22px));
  margin: 0 auto;
}

/* ===================== */
/* 3) Header (INSANE)    */
/* ===================== */
#neoHeader{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.10));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#neoHeader .neoWrap{
  padding: 12px 0;
}
#neoHeader .neoBrand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
#neoHeader .neoLogo{
  width:58px;
  height:58px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 22px 75px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  isolation:isolate;
}
#neoHeader .neoLogo::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,190,.35), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(140,90,255,.55), transparent 55%);
  filter: blur(10px);
  opacity:.9;
  z-index:-1;
}
#neoHeader .neoLogo img{ width:100%; height:100%; object-fit:cover; display:block; }
#neoHeader .neoLogo span{
  font-weight:1100;
  letter-spacing:1px;
  opacity:.95;
}

#neoHeader .neoBrandText{ min-width:0; }
#neoHeader .neoName{
  font-size: 18px;
  font-weight: 1100;
  letter-spacing:.4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* gradient text */
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(0,255,190,.92), rgba(140,90,255,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;

  text-shadow: 0 0 25px rgba(140,90,255,.12);
}
#neoHeader .neoTag{
  margin-top: 4px;
  font-size: 12px;
  opacity:.72;
  font-weight: 850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#neoHeader #themeToggle{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 950;
  display:flex;
  align-items:center;
  gap:10px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
#neoHeader #themeToggle:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* header inner line */
#neoHeader .neoWrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

/* ===================== */
/* 4) Sections           */
/* ===================== */
.neoSection{
  padding: 14px 0 6px;
}
.neoSectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  margin: 14px 0 12px;
}
.neoSectionHead h2{
  margin:0;
  font-size: 16px;
  font-weight: 1100;
  letter-spacing:.2px;
}
.neoHint{
  font-size: 12px;
  opacity:.72;
  font-weight: 850;
}

/* ===================== */
/* 5) Services Grid 4x   */
/* ===================== */
.neoGridServices{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* tile */
.neoTile{
  position:relative;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: 22px;
  padding: 0;
  overflow:hidden;
  cursor:pointer;
  height: 90px; /* صغير */
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
  isolation:isolate;
}

/* glow */
.neoTile::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(650px 220px at 80% 20%, var(--acc, rgba(140,90,255,.45)), transparent 60%);
  filter: blur(12px);
  opacity:.85;
  pointer-events:none;
  z-index:-1;
}

/* shine */
.neoTile::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 35%, transparent 70%);
  transform: translateX(140%);
  opacity:.75;
  pointer-events:none;
}
.neoTile:hover::after{
  animation: shine 1.1s ease;
}
@keyframes shine{
  from{ transform: translateX(-120%); }
  to  { transform: translateX(140%); }
}

/* image */
.neoTile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.15) contrast(1.07);
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease;
}
.neoTile:hover img{
  transform: scale(1.08);
  filter: saturate(1.25) contrast(1.10);
}

.neoTile:active{
  transform: scale(.985);
}

.neoTile:hover{
  transform: translateY(-6px) rotate(-.2deg);
  border-color: rgba(255,255,255,.20);
}

/* placeholder */
.neoTilePh{
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(0,255,190,.10), transparent 55%),
    rgba(255,255,255,.04);
}

/* selected state */
.neoTile.is-active{
  border-color: rgba(0,255,190,.32);
  box-shadow:
    0 25px 80px rgba(0,0,0,.55),
    0 0 0 3px rgba(0,255,190,.10);
  transform: translateY(-6px);
}

/* ===================== */
/* 6) Contacts Grid      */
/* ===================== */
.neoGridContacts{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.neoContact{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 72px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  text-decoration:none;
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.42);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  isolation:isolate;
}
.neoContact::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(650px 220px at 80% 20%, var(--acc, rgba(0,255,190,.35)), transparent 60%);
  filter: blur(12px);
  opacity:.9;
  z-index:-1;
  pointer-events:none;
}
.neoContact:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.07);
}
.neoContact:active{ transform: scale(.985); }

.neoContactIco svg{
  width: 26px;
  height: 26px;
  display:block;
  color: rgba(255,255,255,.92);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* ===================== */
/* 7) Inline Form Mount  */
/* ===================== */
#inlineFormMount{
  margin-top: 14px;
}

/* loader skeleton */
.neoSkeleton{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding: 14px;
  overflow:hidden;
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  position:relative;
}
.neoSkeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 35%, transparent 70%);
  transform: translateX(-120%);
  animation: sk 1.2s ease-in-out infinite;
}
@keyframes sk{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(140%); }
}

/* ===================== */
/* 8) Modal (Invoice)    */
/* ===================== */
.neoModal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
}
.neoModal.is-open{ display:block; }

.neoModalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.neoModalPanel{
  position:relative;
  width:min(640px, calc(100% - 18px));
  margin: 18px auto;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 420px at 80% 10%, rgba(140,90,255,.18), transparent 60%),
    radial-gradient(900px 420px at 10% 30%, rgba(0,255,190,.12), transparent 60%),
    rgba(255,255,255,.06);
  box-shadow: 0 35px 120px rgba(0,0,0,.70);
  padding: 14px;
  transform: translateY(16px) scale(.98);
  opacity:0;
  animation: pop .22s ease forwards;
}
@keyframes pop{
  to{ transform: translateY(0) scale(1); opacity:1; }
}

.neoModalClose{
  position:absolute;
  top: 12px;
  left: 12px;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 16px;
  transition: transform .18s ease, background .18s ease;
}
.neoModalClose:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
}

/* invoice body basics */
#invoiceModalBody{
  padding-top: 42px;
}

/* ===================== */
/* 9) Footer             */
/* ===================== */
#neoFooter{
  margin-top: 18px;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(255,255,255,.10);
  opacity:.84;
  font-weight: 900;
  text-align:center;
}

/* ===================== */
/* 10) Responsive        */
/* ===================== */
@media (max-width: 980px){
  .neoGridContacts{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 820px){
  .neoGridServices{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .neoGridContacts{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .neoGridServices{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; }
  .neoTile{ height: 78px; border-radius: 20px; }
  .neoGridContacts{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; }
  .neoContact{ height: 66px; border-radius: 20px; }
  #neoHeader .neoLogo{ width:52px;height:52px;border-radius:16px; }
  #neoHeader #themeToggle{ border-radius:16px; padding: 9px 11px; }
}

/* ===================== */
/* 11) Day theme support */
/* ===================== */
body.theme-day{
  background: #f6f7ff;
  color: rgba(0,0,0,.88);
}
body.theme-day #fxBg{
  opacity:.55;
  filter: blur(38px);
}
body.theme-day #neoHeader{
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
  border-bottom-color: rgba(0,0,0,.08);
}
body.theme-day #neoHeader .neoName{
  background: linear-gradient(90deg, rgba(10,10,20,.90), rgba(140,90,255,.95), rgba(0,170,140,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
body.theme-day #neoHeader #themeToggle{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.86);
}
body.theme-day .neoTile,
body.theme-day .neoContact{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  box-shadow: 0 16px 45px rgba(0,0,0,.10);
}
body.theme-day .neoModalBackdrop{ background: rgba(0,0,0,.35); }
body.theme-day .neoModalPanel{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 35px 120px rgba(0,0,0,.20);
}
body.theme-day .neoModalClose{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.86);
}


.neoModal{ position:fixed; inset:0; z-index:9999; }
.neoModal[hidden]{ display:none; }

.neoOverlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.neoDialog{
  position:relative;
  width:min(900px, calc(100% - 24px));
  margin: 18px auto;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,10,18,.78);
  box-shadow: 0 30px 120px rgba(0,0,0,.7);
  overflow:hidden;
}

.neoHead{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 140px at 10% 30%, rgba(0,255,190,.14), transparent 55%),
    radial-gradient(600px 140px at 90% 30%, rgba(140,90,255,.18), transparent 55%),
    rgba(255,255,255,.04);
}

.neoHeadLeft{ display:flex; align-items:center; gap:12px; min-width:0; }
.neoAppLogo{
  width:44px; height:44px; border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.neoAppLogo img{ width:100%; height:100%; object-fit:cover; display:block; }
.neoAppLogo span{ font-weight:1000; letter-spacing:1px; opacity:.95; }

.neoHeadTxt{ min-width:0; }
.neoAppName{
  font-weight:1100;
  font-size: 15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.neoAppSub{
  margin-top:3px;
  font-size: 12px;
  opacity:.75;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.neoX{
  width:42px; height:42px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 28px;
  line-height: 0;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.neoX:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }

.neoBody{ padding: 14px; }



/* === Centered form header inside modal === */
/* =========================
   INLINE FORM HEADER (CENTER)
   ========================= */

.neoInlineHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 140px at 50% 0%, rgba(255,70,120,.10), transparent 60%),
    rgba(255,255,255,.04);
}

.neoInlineHead > div{
  flex: 1;
  text-align: center;
}

/* Title كبير بالنص */
.neoInlineTitle{
  font-size: clamp(20px, 3.6vw, 32px);
  font-weight: 1150;
  line-height: 1.15;
  letter-spacing: .4px;
  text-shadow: 0 10px 35px rgba(0,0,0,.45);
}

/* Sub داخل إطار محترم */
.neoInlineSub{
  margin: 12px auto 0;
  width: min(560px, 100%);
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 55px rgba(0,0,0,.30);
  font-size: 13px;
  opacity: .92;
  font-weight: 850;
  line-height: 1.6;
}

/* X حمرا ع جنب */
.neoInlineClose{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255,70,120,.35);
  background: rgba(255,70,120,.12);
  color: rgba(255,120,140,.98);
  cursor:pointer;
  font-weight: 1100;
  font-size: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.neoInlineClose:hover{
  transform: translateY(-2px);
  background: rgba(255,70,120,.18);
  border-color: rgba(255,70,120,.55);
}
.neoInlineClose:active{ transform: translateY(0); }

/* موبايل */
@media (max-width: 520px){
  .neoInlineHead{ padding: 12px 10px 14px; }
  .neoInlineClose{ width: 42px; height: 42px; border-radius: 15px; }
  .neoInlineSub{ border-radius: 16px; }
}

/* =========================
   FIX: Invoice Modal center + scroll
   ========================= */
#invoiceModal.neoModal{
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 18px;
}

#invoiceModal.neoModal.is-open,
#invoiceModal.neoModal.isOpen,
#invoiceModal.neoModal[aria-hidden="false"]{
  display:flex;
}

#invoiceModal .neoModalPanel{
  margin: 0;
  max-height: calc(100vh - 36px);
  overflow:auto;
}

/* =========================
   Invoice Actions buttons (inside modal)
   ========================= */
#invoiceModalBody .invoiceActions{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
}

@media (max-width:520px){
  #invoiceModalBody .invoiceActions{ grid-template-columns: 1fr; }
}

#invoiceModalBody .invoiceActions .btnGhost.btnWide{
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 1100;
  font-size: 14px;
  text-align:center;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);

  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

#invoiceModalBody .invoiceActions .btnGhost.btnWide:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}