/* ═══════════════════════════════════════════════════
   SEAPLUS VENDOR PORTAL — Apple Liquid Glass v1.0
   Neon Blue #00CFFF + Purple #6A5CFF
   ═══════════════════════════════════════════════════ */
:root{
  --g-bg:rgba(255,255,255,0.42);
  --g-border:0.5px solid rgba(255,255,255,0.68);
  --g-radius:16px;
  --g-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 8px 32px rgba(30,40,80,0.06);
  --g-side-bg:rgba(255,255,255,0.2);
  --g-side-brd:0.5px solid rgba(255,255,255,0.35);
  --g-active:rgba(255,255,255,0.48);
  --neon:#00CFFF;--purple:#6A5CFF;
  --btn:linear-gradient(135deg,rgba(0,180,240,0.85),rgba(106,92,255,0.9));
  --btn-h:linear-gradient(135deg,rgba(0,160,220,0.95),rgba(90,76,235,1));
  --badge:linear-gradient(135deg,#00CFFF,#6A5CFF);
  --mesh:#e6ecf6;
  --t1:#1a1f36;--t2:#4a5568;--t3:#8492a6;
  --side-w:260px;--head-h:64px;
  --ease:cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
 
body.gp{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;
  color:var(--t1);
  background:var(--mesh);
  background-image:
    radial-gradient(ellipse at 20% 40%,rgba(0,207,255,0.22),transparent 50%),
    radial-gradient(ellipse at 65% 55%,rgba(106,92,255,0.16),transparent 45%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* RTL support */
[dir=rtl] body.gp{font-family:'Tajawal',-apple-system,BlinkMacSystemFont,sans-serif;}
[dir=rtl] .g-side{left:auto;right:0;border-right:none;border-left:var(--g-side-brd);}
[dir=rtl] .g-head{left:0;right:var(--side-w);}
[dir=rtl] .g-main{margin-left:0;margin-right:var(--side-w);}
@media(max-width:768px){
  [dir=rtl] .g-head{right:0;}
  [dir=rtl] .g-main{margin-right:0;}
  [dir=rtl] .g-side{transform:translateX(100%);}
  [dir=rtl] .g-side.open{transform:translateX(0);}
}
 
/* ─── SPECULAR RIM ─── */
.gr::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,0.85) 30%,rgba(255,255,255,0.95) 50%,rgba(255,255,255,0.85) 70%,transparent 95%);
  z-index:1;pointer-events:none;
}
 
/* ─── GLASS CARD ─── */
.gc{
  background:var(--g-bg);border:var(--g-border);border-radius:var(--g-radius);
  box-shadow:var(--g-shadow);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  position:relative;overflow:hidden;transition:all .25s var(--ease);
}
.gc:hover{box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 12px 40px rgba(30,40,80,0.09);transform:translateY(-1px);}
.gc-body{padding:1.5rem;}
 
/* ─── SIDEBAR ─── */
.g-side{
  position:fixed;top:0;left:0;width:var(--side-w);height:100vh;
  background:var(--g-side-bg);border-right:var(--g-side-brd);
  backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);
  z-index:1000;display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;transition:transform .3s var(--ease);
}
.g-side::-webkit-scrollbar{width:4px;}
.g-side::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:4px;}
 
.g-s-brand{
  padding:1.25rem 1.25rem 1rem;display:flex;align-items:center;gap:.75rem;
  border-bottom:.5px solid rgba(255,255,255,0.25);
}
.g-s-brand img{width:36px;height:36px;border-radius:10px;object-fit:contain;}
.g-s-brand-name{font-size:1.125rem;font-weight:700;color:var(--t1);letter-spacing:-.02em;}
.g-s-brand-sub{font-size:.6875rem;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;}
 
/* Company block */
.g-s-company{
  padding:.625rem 1.25rem;border-bottom:.5px solid rgba(255,255,255,0.2);
  background:rgba(0,207,255,0.04);
}
.g-s-company-label{font-size:.625rem;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;}
.g-s-company-name{font-size:.8125rem;font-weight:600;color:var(--neon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 
.g-s-nav{padding:.75rem;flex:1;}
.g-s-lbl{
  padding:.75rem .75rem .375rem;font-size:.6875rem;font-weight:600;
  color:var(--t3);text-transform:uppercase;letter-spacing:.08em;
}
 
.g-nl{
  display:flex;align-items:center;gap:.75rem;
  padding:.625rem .75rem;border-radius:10px;
  color:var(--t2);text-decoration:none;
  font-size:.875rem;font-weight:500;
  transition:all .25s var(--ease);
}
.g-nl:hover{background:rgba(255,255,255,0.32);color:var(--t1);}
.g-nl.active{
  background:var(--g-active);color:var(--t1);
  font-weight:600;box-shadow:0 1px 3px rgba(30,40,80,0.04);
}
.g-nl i{width:20px;text-align:center;font-size:1rem;opacity:.7;}
.g-nl.active i{opacity:1;}
.g-badge{
  margin-left:auto;background:var(--badge);color:#fff;
  font-size:.6875rem;font-weight:600;
  padding:.125rem .5rem;border-radius:20px;
  min-width:20px;text-align:center;line-height:1.4;
}
 
/* Language toggle */
.g-lang-row{
  display:flex;background:rgba(0,0,0,0.06);border-radius:8px;overflow:hidden;margin:0 1rem .5rem;
}
.g-lang-btn{
  flex:1;padding:5px;text-align:center;font-size:.75rem;font-weight:500;
  color:var(--t3);cursor:pointer;border:none;background:transparent;
  font-family:inherit;transition:all .15s;
}
.g-lang-btn.active{background:var(--btn);color:#fff;border-radius:7px;}
 
/* Sidebar footer */
.g-s-foot{
  padding:1rem 1.25rem;border-top:.5px solid rgba(255,255,255,0.25);
  display:flex;align-items:center;gap:.625rem;
}
.g-av{
  width:32px;height:32px;border-radius:50%;background:var(--btn);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.8125rem;font-weight:600;flex-shrink:0;
}
.g-s-user{font-size:.8125rem;font-weight:600;color:var(--t1);}
.g-s-role{font-size:.6875rem;color:var(--t3);}
.g-logout{
  display:flex;align-items:center;gap:6px;width:100%;
  padding:6px 10px;border-radius:8px;border:none;
  background:rgba(239,68,68,0.08);color:#f87171;
  font-size:.75rem;font-weight:500;cursor:pointer;
  font-family:inherit;transition:all .15s;text-decoration:none;
}
.g-logout:hover{background:rgba(239,68,68,0.15);}
 
/* ─── HEADER ─── */
.g-head{
  position:fixed;top:0;left:var(--side-w);right:0;
  height:var(--head-h);
  background:rgba(255,255,255,0.55);border-bottom:.5px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;z-index:999;
}
.g-head-title{font-size:1.125rem;font-weight:600;color:var(--t1);}
.g-head-acts{display:flex;align-items:center;gap:.75rem;}
 
.g-ib{
  width:36px;height:36px;border-radius:10px;border:none;
  background:rgba(255,255,255,0.5);color:var(--t2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .25s var(--ease);position:relative;
}
.g-ib:hover{background:rgba(255,255,255,0.8);color:var(--t1);}
.g-nd{
  position:absolute;top:6px;right:6px;width:8px;height:8px;
  background:var(--badge);border-radius:50%;border:1.5px solid rgba(255,255,255,0.8);
}
 
/* ─── MAIN ─── */
.g-main{
  margin-left:var(--side-w);margin-top:var(--head-h);
  padding:1.5rem;min-height:calc(100vh - var(--head-h));
}
 
/* ─── STATS ─── */
.g-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;margin-bottom:1.5rem;
}
.g-st{
  background:var(--g-bg);border:var(--g-border);border-radius:var(--g-radius);
  box-shadow:var(--g-shadow);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  padding:1.25rem 1.5rem;position:relative;overflow:hidden;
}
.g-st-icon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.125rem;margin-bottom:.75rem;
}
.g-st-icon.blue{background:rgba(0,207,255,0.15);color:var(--neon);}
.g-st-icon.purple{background:rgba(106,92,255,0.15);color:var(--purple);}
.g-st-icon.green{background:rgba(16,185,129,0.15);color:#10B981;}
.g-st-icon.amber{background:rgba(245,158,11,0.15);color:#F59E0B;}
.g-st-val{font-size:1.625rem;font-weight:700;color:var(--t1);line-height:1.2;}
.g-st-lbl{font-size:.8125rem;color:var(--t3);margin-top:.25rem;}
 
/* ─── TABLE ─── */
.g-tw{
  background:var(--g-bg);border:var(--g-border);border-radius:var(--g-radius);
  box-shadow:var(--g-shadow);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  overflow:hidden;position:relative;
}
.g-tw-head{
  padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
  border-bottom:.5px solid rgba(0,0,0,0.04);
}
.g-t{width:100%;border-collapse:collapse;}
.g-t thead th{
  padding:.75rem 1.5rem;text-align:left;
  font-size:.75rem;font-weight:600;color:var(--t3);
  text-transform:uppercase;letter-spacing:.05em;
  border-bottom:.5px solid rgba(0,0,0,0.06);background:rgba(255,255,255,0.15);
}
[dir=rtl] .g-t thead th{text-align:right;}
.g-t tbody td{
  padding:.875rem 1.5rem;font-size:.875rem;color:var(--t2);
  border-bottom:.5px solid rgba(0,0,0,0.03);
}
.g-t tbody tr:hover{background:rgba(255,255,255,0.25);}
.g-t tbody tr:last-child td{border-bottom:none;}
 
/* ─── BUTTONS ─── */
.g-btn{
  background:var(--btn);color:#fff;border:none;
  padding:.625rem 1.25rem;border-radius:10px;
  font-size:.875rem;font-weight:600;cursor:pointer;
  transition:all .25s var(--ease);
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;box-shadow:0 2px 8px rgba(0,180,240,0.2);
}
.g-btn:hover{
  background:var(--btn-h);color:#fff;
  box-shadow:0 4px 16px rgba(0,180,240,0.3);transform:translateY(-1px);
}
.g-btn-s{
  background:rgba(255,255,255,0.5);color:var(--t1);
  border:.5px solid rgba(255,255,255,0.6);
  padding:.625rem 1.25rem;border-radius:10px;
  font-size:.875rem;font-weight:500;cursor:pointer;
  transition:all .25s var(--ease);
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
}
.g-btn-s:hover{background:rgba(255,255,255,0.7);box-shadow:0 2px 8px rgba(30,40,80,0.06);}
.g-btn-sm{padding:.375rem .75rem;font-size:.8125rem;border-radius:8px;}
 
/* ─── STATUS ─── */
.g-status{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.25rem .625rem;border-radius:20px;font-size:.75rem;font-weight:600;
}
.g-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.g-status.confirmed,.g-status.signed{background:rgba(16,185,129,0.12);color:#059669;}
.g-status.pending{background:rgba(245,158,11,0.12);color:#D97706;}
.g-status.cancelled{background:rgba(239,68,68,0.12);color:#DC2626;}
.g-status.completed{background:rgba(0,207,255,0.12);color:#0891B2;}
.g-status.active{background:rgba(106,92,255,0.12);color:var(--purple);}
.g-status.draft{background:rgba(148,163,184,0.15);color:#64748B;}
 
/* ─── FORM ─── */
.g-input{
  width:100%;padding:.625rem .875rem;
  background:rgba(255,255,255,0.55);border:.5px solid rgba(255,255,255,0.6);
  border-radius:10px;font-size:.875rem;color:var(--t1);outline:none;
  transition:all .25s var(--ease);
}
.g-input:focus{border-color:rgba(0,207,255,0.5);box-shadow:0 0 0 3px rgba(0,207,255,0.1),0 1px 0 rgba(255,255,255,0.9) inset;}
.g-input::placeholder{color:var(--t3);}
.g-select{
  width:100%;padding:.625rem 2rem .625rem .875rem;
  background:rgba(255,255,255,0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right .75rem center;
  border:.5px solid rgba(255,255,255,0.6);border-radius:10px;
  font-size:.875rem;color:var(--t1);outline:none;appearance:none;
}
.g-select:focus{border-color:rgba(0,207,255,0.5);box-shadow:0 0 0 3px rgba(0,207,255,0.1);}
.g-label{font-size:.8125rem;font-weight:500;color:var(--t2);display:block;margin-bottom:.375rem;}
 
/* ─── NOTIFICATIONS POPOVER ─── */
.g-np{
  position:absolute;top:calc(100% + 8px);right:0;
  width:360px;max-height:400px;
  background:rgba(255,255,255,0.85);border:var(--g-border);border-radius:var(--g-radius);
  box-shadow:0 16px 48px rgba(30,40,80,0.12);
  backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);
  overflow:hidden;z-index:1001;display:none;
}
[dir=rtl] .g-np{right:auto;left:0;}
.g-np.show{display:block;}
.g-np-head{
  padding:1rem 1.25rem;border-bottom:.5px solid rgba(0,0,0,0.06);
  display:flex;align-items:center;justify-content:space-between;
}
.g-np-list{max-height:320px;overflow-y:auto;}
.g-ni{
  padding:.875rem 1.25rem;border-bottom:.5px solid rgba(0,0,0,0.03);
  display:flex;gap:.75rem;transition:all .25s var(--ease);cursor:pointer;
}
.g-ni:hover{background:rgba(0,207,255,0.04);}
.g-ni.unread{background:rgba(0,207,255,0.06);}
 
/* ─── EMPTY STATE ─── */
.g-empty{text-align:center;padding:3rem 1.5rem;}
.g-empty-icon{
  width:64px;height:64px;border-radius:16px;
  background:rgba(0,207,255,0.1);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;font-size:1.5rem;color:var(--neon);
}
 
/* ─── FLASH ─── */
.g-flash{padding:.875rem 1.25rem;margin-bottom:1rem;border-radius:12px;font-size:.875rem;backdrop-filter:blur(8px);}
.g-flash.success{background:rgba(16,185,129,0.08);border-left:3px solid #10B981;color:#059669;}
.g-flash.error{background:rgba(239,68,68,0.08);border-left:3px solid #EF4444;color:#DC2626;}
 
/* ─── LOGIN PAGE ─── */
.g-login-pg{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--mesh);
  background-image:
    radial-gradient(ellipse at 20% 40%,rgba(0,207,255,0.22),transparent 50%),
    radial-gradient(ellipse at 65% 55%,rgba(106,92,255,0.16),transparent 45%);
  padding:1rem;
}
.g-login-wrap{
  display:flex;width:100%;max-width:900px;border-radius:24px;
  overflow:hidden;box-shadow:0 24px 64px rgba(30,40,80,0.1);
}
.g-login-l{
  flex:1;padding:3rem;
  background:linear-gradient(135deg,rgba(0,180,240,0.08),rgba(106,92,255,0.08));
  backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;
  border-right:.5px solid rgba(255,255,255,0.3);
}
[dir=rtl] .g-login-l{border-right:none;border-left:.5px solid rgba(255,255,255,0.3);}
.g-login-r{
  flex:1;padding:3rem;background:var(--g-bg);
  backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);
  position:relative;
}
.g-login-r::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,0.85) 30%,rgba(255,255,255,0.95) 50%,rgba(255,255,255,0.85) 70%,transparent 95%);
}
.g-login-logo{width:48px;height:48px;border-radius:12px;object-fit:contain;margin-bottom:1.5rem;}
.g-login-title{font-size:1.75rem;font-weight:700;color:var(--t1);margin-bottom:.25rem;letter-spacing:-.02em;}
.g-login-sub{font-size:.9375rem;color:var(--t3);margin-bottom:2rem;}
.g-login-feat{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;font-size:.875rem;color:var(--t2);}
.g-login-feat i{color:var(--neon);font-size:.875rem;width:20px;text-align:center;}
.g-login-field{margin-bottom:1.25rem;}
.g-login-field .g-input{padding:.75rem 1rem;}
.g-login-btn{
  width:100%;padding:.75rem;background:var(--btn);color:#fff;border:none;
  border-radius:12px;font-size:.9375rem;font-weight:600;cursor:pointer;
  transition:all .25s var(--ease);box-shadow:0 4px 16px rgba(0,180,240,0.25);margin-top:.5rem;
}
.g-login-btn:hover{background:var(--btn-h);box-shadow:0 6px 24px rgba(0,180,240,0.35);transform:translateY(-1px);}
.g-login-err{
  background:rgba(239,68,68,0.08);border:.5px solid rgba(239,68,68,0.2);
  border-radius:10px;padding:.75rem 1rem;color:#DC2626;font-size:.8125rem;margin-bottom:1rem;
}
 
/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  .g-side{transform:translateX(-100%);}
  .g-side.open{transform:translateX(0);}
  .g-head{left:0;}
  .g-main{margin-left:0;}
  .g-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.25);z-index:999;}
  .g-ov.show{display:block;}
  .g-stats{grid-template-columns:repeat(2,1fr);gap:.75rem;}
  .g-tw{overflow-x:auto;}
  .g-t{min-width:600px;}
  .g-np{width:calc(100vw - 2rem);right:-1rem;}
  .g-login-wrap{flex-direction:column;max-width:420px;}
  .g-login-l{display:none;}
}
@media(max-width:480px){.g-stats{grid-template-columns:1fr;}.g-main{padding:1rem;}}
 
/* ─── ANIMATIONS ─── */
@keyframes gIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.gc,.g-st,.g-tw{animation:gIn .35s var(--ease) forwards;}
.g-stats>*:nth-child(1){animation-delay:.05s;}
.g-stats>*:nth-child(2){animation-delay:.1s;}
.g-stats>*:nth-child(3){animation-delay:.15s;}
.g-stats>*:nth-child(4){animation-delay:.2s;}
 
/* ─── PRINT ─── */
@media print{
  .g-side,.g-head,.g-ov{display:none!important;}
  .g-main{margin:0;padding:1rem;}
  body.gp{background:#fff;}
}

/* ═══════════════════════════════════════════
   ANIMATIONS PATCH v1.1
   ═══════════════════════════════════════════ */

/* ─── Login Page Animations ─── */
@keyframes gSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes gSlideRight {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes gSlideLeft {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes gFadeScale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes gPulseGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,180,240,0.25); }
    50%      { box-shadow: 0 4px 28px rgba(0,180,240,0.45), 0 0 0 4px rgba(0,207,255,0.08); }
}
@keyframes gFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes gShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes gMeshMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Login wrapper entrance */
.g-login-wrap {
    animation: gFadeScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Left panel content stagger */
.g-login-l .g-login-logo,
.g-login-l > div:first-child {
    animation: gSlideRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.g-login-l .g-login-title {
    animation: gSlideRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.g-login-l .g-login-sub {
    animation: gSlideRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.g-login-l .g-login-feat:nth-child(1) { animation: gSlideRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.g-login-l .g-login-feat:nth-child(2) { animation: gSlideRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
.g-login-l .g-login-feat:nth-child(3) { animation: gSlideRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.g-login-l .g-login-feat:nth-child(4) { animation: gSlideRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }

/* Right panel form stagger */
.g-login-r h2 {
    animation: gSlideLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.g-login-r > p:first-of-type {
    animation: gSlideLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.g-login-field:nth-child(1) { animation: gSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.g-login-field:nth-child(2) { animation: gSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; }

/* Sign In button pulse glow */
.g-login-btn {
    animation: gSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.g-login-btn:hover {
    animation: gPulseGlow 1.5s ease-in-out infinite;
}

/* Animated mesh background */
.g-login-pg {
    background-size: 200% 200%;
    animation: gMeshMove 15s ease infinite;
}
body.gp {
    background-size: 200% 200%;
    animation: gMeshMove 20s ease infinite;
}

/* ─── Login Logo Animation ─── */
.g-login-l > div:first-child {
    animation: gFloat 4s ease-in-out infinite, gSlideRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* ─── Layout Animations ─── */

/* Sidebar entrance */
.g-side {
    animation: gSlideRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sidebar nav links stagger */
.g-nl { opacity: 0; animation: gSlideRight 0.3s var(--ease) forwards; }
.g-s-nav .g-nl:nth-child(1) { animation-delay: 0.1s; }
.g-s-nav .g-nl:nth-child(2) { animation-delay: 0.15s; }
.g-s-nav .g-nl:nth-child(3) { animation-delay: 0.2s; }
.g-s-nav .g-nl:nth-child(4) { animation-delay: 0.25s; }
.g-s-nav .g-nl:nth-child(5) { animation-delay: 0.3s; }
.g-s-nav .g-nl:nth-child(6) { animation-delay: 0.35s; }
.g-s-nav .g-nl:nth-child(7) { animation-delay: 0.4s; }

/* Header slide down */
.g-head {
    animation: gSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gSlideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Main content fade in */
.g-main {
    animation: gSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Stat cards stagger (enhanced) */
.g-stats > * {
    opacity: 0;
    animation: gSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.g-stats > *:nth-child(1) { animation-delay: 0.1s; }
.g-stats > *:nth-child(2) { animation-delay: 0.18s; }
.g-stats > *:nth-child(3) { animation-delay: 0.26s; }
.g-stats > *:nth-child(4) { animation-delay: 0.34s; }

/* Table wrap entrance */
.g-tw {
    opacity: 0;
    animation: gSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* Glass card hover: lift + rim brightens */
.gc:hover::before, .g-st:hover::before, .g-tw:hover::before {
    background: linear-gradient(90deg,
        transparent 2%,
        rgba(255,255,255,0.95) 25%,
        rgba(255,255,255,1) 50%,
        rgba(255,255,255,0.95) 75%,
        transparent 98%
    );
}

/* Nav link hover: smooth icon color shift */
.g-nl:hover i { opacity: 1; color: var(--neon); transition: color 0.2s; }
.g-nl.active:hover i { color: var(--purple); }

/* Badge bounce on appear */
@keyframes gBadgePop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.g-badge { animation: gBadgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both; }

/* Notification dot pulse */
.g-nd {
    animation: gNotifPulse 2s ease-in-out infinite;
}
@keyframes gNotifPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.7; }
}

/* Notification popover entrance */
.g-np.show {
    animation: gSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Input focus glow animation */
.g-input:focus, .g-select:focus {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logout button hover */
.g-logout:hover {
    transform: translateX(2px);
    transition: all 0.2s;
}
[dir=rtl] .g-logout:hover { transform: translateX(-2px); }

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Force Glass Popover ─── */
#notifPopover {
    background: rgba(255,255,255,0.92) !important;
    border: 0.5px solid rgba(255,255,255,0.68) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(30,40,80,0.15) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
}
#notifPopover .notif-header { border-bottom: .5px solid rgba(0,0,0,0.06) !important; }
#notifPopover .notif-header-title { color: #1a1f36 !important; }
#notifPopover .notif-mark-all { color: #00CFFF !important; }
#notifPopover .notif-item { border-bottom: .5px solid rgba(0,0,0,0.03) !important; }
#notifPopover .notif-item:hover { background: rgba(0,207,255,0.05) !important; }
#notifPopover .notif-item.unread { background: rgba(0,207,255,0.06) !important; }
#notifPopover .notif-title { color: #1a1f36 !important; }
#notifPopover .notif-msg { color: #4a5568 !important; }
#notifPopover .notif-time { color: #8492a6 !important; }
#notifPopover .notif-dot { background: linear-gradient(135deg,#00CFFF,#6A5CFF) !important; }
#notifPopover .notif-empty { color: #8492a6 !important; }
#notifPopover .notif-empty svg { color: #8492a6 !important; }
#notifPopover .notif-footer { border-top: .5px solid rgba(0,0,0,0.06) !important; }
#notifPopover .notif-view-all { color: #00CFFF !important; }
.notif-badge { background: linear-gradient(135deg,#00CFFF,#6A5CFF) !important; border-color: rgba(255,255,255,0.9) !important; }

/* ═══════════════════════════════════════════
   MOBILE OPTIMIZATION v1.2
   ═══════════════════════════════════════════ */

/* ─── Mobile Login ─── */
@media (max-width: 768px) {
    .g-login-pg { padding: .75rem; }
    .g-login-wrap {
        flex-direction: column !important;
        max-width: 100% !important;
        border-radius: 20px !important;
    }
    .g-login-l { display: none !important; }
    .g-login-r {
        padding: 2rem 1.5rem !important;
        border-radius: 20px !important;
    }
    .g-login-r h2 { font-size: 1.25rem !important; }
    .g-login-btn { font-size: 1rem !important; padding: .875rem !important; }
    .g-login-field .g-input { font-size: 1rem !important; padding: .875rem 1rem !important; }
}

/* ─── Mobile Layout ─── */
@media (max-width: 768px) {
    /* Sidebar */
    .g-side {
        width: 280px !important;
        transform: translateX(-100%) !important;
    }
    .g-side.open { transform: translateX(0) !important; }
    [dir=rtl] .g-side { transform: translateX(100%) !important; }
    [dir=rtl] .g-side.open { transform: translateX(0) !important; }

    /* Header full width */
    .g-head {
        left: 0 !important;
        right: 0 !important;
        padding: 0 1rem !important;
        height: 56px !important;
    }
    [dir=rtl] .g-head { left: 0 !important; right: 0 !important; }
    .g-head-title { font-size: 1rem !important; }

    /* Main content */
    .g-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 56px !important;
        padding: 1rem !important;
    }

    /* Menu button always visible */
    .g-menu-btn { display: flex !important; }

    /* Overlay */
    .g-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); z-index: 999; }
    .g-ov.show { display: block !important; }

    /* Stats grid */
    .g-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: .75rem !important;
    }
    .g-st {
        padding: 1rem !important;
        border-radius: 14px !important;
    }
    .g-st-val { font-size: 1.25rem !important; }
    .g-st-icon { width: 34px !important; height: 34px !important; font-size: .9375rem !important; margin-bottom: .5rem !important; }
    .g-st-lbl { font-size: .6875rem !important; }

    /* Dashboard 2-col grid → stack */
    .g-main > div[style*="grid-template-columns: 1fr 1fr"],
    .g-main > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Tables */
    .g-tw { border-radius: 14px !important; overflow-x: auto !important; }
    .g-t { min-width: 500px !important; }
    .g-t thead th { padding: .625rem 1rem !important; font-size: .625rem !important; }
    .g-t tbody td { padding: .75rem 1rem !important; font-size: .8125rem !important; }
    .g-tw-head { padding: 1rem !important; }

    /* Cards */
    .gc { border-radius: 14px !important; }
    .gc-body { padding: 1rem !important; }

    /* Filters */
    .gc-body > div[style*="display:flex"] {
        flex-direction: column !important;
    }
    .gc-body > div[style*="display:flex"] > div {
        min-width: 100% !important;
    }

    /* Notification popover */
    #notifPopover {
        position: fixed !important;
        top: 56px !important;
        left: .75rem !important;
        right: .75rem !important;
        width: auto !important;
        max-height: 70vh !important;
        border-radius: 16px !important;
    }
    .notif-wrapper { position: static !important; }

    /* Booking modal */
    #bookingPanel {
        width: 100vw !important;
    }

    /* Buttons */
    .g-btn, .g-btn-s { font-size: .8125rem !important; }

    /* Empty states */
    .g-empty { padding: 2rem 1rem !important; }
    .g-empty-icon { width: 48px !important; height: 48px !important; font-size: 1.25rem !important; }

    /* Pagination */
    .g-btn-sm { padding: .375rem .625rem !important; font-size: .75rem !important; }

    /* Contracts card grid */
    div[style*="grid-template-columns:repeat(auto-fill"] {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar footer */
    .g-s-foot { padding: .75rem 1rem !important; }
    .g-logout { font-size: .6875rem !important; }
    .g-lang-row { margin: 0 .75rem .5rem !important; }

    /* Flash messages */
    .g-flash { font-size: .8125rem !important; padding: .75rem 1rem !important; }
}

/* ─── Small phones ─── */
@media (max-width: 420px) {
    .g-stats {
        grid-template-columns: 1fr !important;
        gap: .625rem !important;
    }
    .g-st { 
        display: flex !important; 
        align-items: center !important; 
        gap: 1rem !important; 
        padding: .875rem 1rem !important; 
    }
    .g-st-icon { margin-bottom: 0 !important; flex-shrink: 0; }
    .g-st-val { font-size: 1.125rem !important; }

    .g-main { padding: .75rem !important; }

    .g-login-r { padding: 1.5rem 1.25rem !important; }
    .g-login-btn { font-size: .9375rem !important; }

    .g-head { padding: 0 .75rem !important; }
    .g-head-title { font-size: .9375rem !important; }

    #notifPopover {
        left: .5rem !important;
        right: .5rem !important;
    }

    /* Earnings 2-col stats → 1 col */
    .g-stats[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ─── Touch targets ─── */
@media (max-width: 768px) {
    .g-nl { padding: .75rem !important; min-height: 44px; }
    .g-ib { width: 40px !important; height: 40px !important; min-height: 44px; min-width: 44px; }
    .g-select, .g-input { min-height: 44px !important; font-size: 1rem !important; }
    .g-t tbody tr { min-height: 44px; }
    .g-lang-btn { min-height: 36px !important; }
    .g-logout { min-height: 40px !important; padding: 8px 12px !important; }
}

/* ─── Landscape phones ─── */
@media (max-width: 768px) and (orientation: landscape) {
    .g-side { height: 100vh !important; overflow-y: auto !important; }
    #notifPopover { max-height: 60vh !important; }
    .g-login-pg { padding: .5rem !important; }
    .g-login-r { padding: 1.5rem !important; }
}

/* ─── Safe areas (notch phones) ─── */
@supports (padding: env(safe-area-inset-top)) {
    .g-head { padding-top: env(safe-area-inset-top); }
    .g-main { padding-bottom: env(safe-area-inset-bottom); }
    .g-side { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    .g-login-pg { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
}

/* ═══════════════════════════════════════════
   ICONSAX-STYLE SVG ICON ANIMATIONS v1.0
   ═══════════════════════════════════════════ */

/* Base icon style */
.sp-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Nav link icons: bounce on hover ─── */
.g-nl:hover .sp-icon {
    animation: iconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--neon);
}
@keyframes iconBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Active nav icon: gentle pulse */
.g-nl.active .sp-icon {
    animation: iconPulse 2.5s ease-in-out infinite;
}
@keyframes iconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.85; }
}

/* ─── Stat card icons: breathe loop ─── */
.g-st-icon .sp-icon {
    animation: iconBreathe 3s ease-in-out infinite;
}
@keyframes iconBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.1) rotate(2deg); }
}

/* Stat hover: pop */
.g-st:hover .sp-icon {
    animation: iconPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes iconPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3) rotate(-5deg); }
    100% { transform: scale(1.15) rotate(0deg); }
}

/* ─── Bell: shake on notification ─── */
.icon-bell-active {
    animation: iconBellShake 0.6s ease-in-out;
    animation-delay: 1s;
}
@keyframes iconBellShake {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(12deg); }
    30%  { transform: rotate(-10deg); }
    45%  { transform: rotate(8deg); }
    60%  { transform: rotate(-6deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}

/* ─── Download: bounce down on hover ─── */
.g-btn:hover .sp-icon,
.g-btn-s:hover .sp-icon {
    animation: iconSlideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes iconSlideDown {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(3px); }
    100% { transform: translateY(0); }
}

/* ─── Wallet icon: subtle tilt ─── */
.sp-icon[data-anim="tilt"] {
    animation: iconTilt 4s ease-in-out infinite;
}
@keyframes iconTilt {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(3deg); }
    75%      { transform: rotate(-3deg); }
}

/* ─── Coins icon: gentle float ─── */
.sp-icon[data-anim="float"] {
    animation: iconFloat 3s ease-in-out infinite;
}
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* ─── Ship icon: gentle rock ─── */
.sp-icon[data-anim="rock"] {
    animation: iconRock 3s ease-in-out infinite;
}
@keyframes iconRock {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(4deg); }
    75%      { transform: rotate(-4deg); }
}

/* ─── Clock icon: tick ─── */
.sp-icon[data-anim="tick"] {
    animation: iconTick 1s steps(12) infinite;
}
@keyframes iconTick {
    to { transform: rotate(360deg); }
}

/* ─── Empty state icon: gentle bounce ─── */
.g-empty-icon .sp-icon {
    animation: iconEmptyBounce 2s ease-in-out infinite;
}
@keyframes iconEmptyBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ─── Login feature icons: stagger slide ─── */
.g-login-feat .sp-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.g-login-feat:hover .sp-icon {
    transform: scale(1.2) rotate(-5deg);
}

/* ─── Sign out icon: slide right on hover ─── */
.g-logout:hover .sp-icon {
    animation: iconSlideRight 0.3s ease forwards;
}
@keyframes iconSlideRight {
    0%   { transform: translateX(0); }
    100% { transform: translateX(3px); }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    .sp-icon, .sp-icon[data-anim] {
        animation: none !important;
        transition: none !important;
    }
}

/* ─── ANIMATION CONFLICT FIX ─── */
/* Remove transition when animating — transition kills CSS animations on SVGs */
svg.sp-icon {
    transition: none !important;
    transform-origin: center center !important;
}

/* Stat icons: continuous breathe */
.g-st-icon svg {
    animation: iconBreathe 3s ease-in-out infinite !important;
    transform-origin: center center !important;
    transition: none !important;
}
.g-st:hover .g-st-icon svg {
    animation: iconPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Nav icons: bounce on hover */
.g-nl svg {
    transition: none !important;
    transform-origin: center center !important;
}
.g-nl:hover svg {
    animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Active nav: pulse loop */
.g-nl.active svg {
    animation: iconPulse 2.5s ease-in-out infinite !important;
}

/* Sign out slide */
.g-logout:hover svg {
    animation: iconSlideRight 0.4s ease forwards !important;
}

/* Empty state bounce */
.g-empty-icon svg {
    animation: iconEmptyBounce 2s ease-in-out infinite !important;
    transform-origin: center center !important;
}

/* Button icons */
.g-btn:hover svg, .g-btn-s:hover svg {
    animation: iconSlideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Login features */
.g-login-feat svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.g-login-feat:hover svg {
    transform: scale(1.25) rotate(-5deg) !important;
}

/* Bell shake for notifications */
.notif-bell svg {
    transform-origin: top center !important;
}
.notif-badge ~ .notif-bell svg,
.notif-wrapper:has(.notif-badge) svg {
    animation: iconBellShake 1s ease-in-out 1s !important;
}