/* =====================================================================
   shell.css — bütün səhifələr üçün ortaq görünüş qatı:
   yumşaq animasiyalar, profil menyusu, mobil alt naviqasiya.
   (Səhifələrin öz stilləri üzərinə gəlir; rəngləri theme.js dəyişənlərindən götürür.)
   ===================================================================== */
:root{
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-soft:cubic-bezier(.4,.14,.3,1);
  --r-lg:22px; --r-md:14px;
  --sh-1:0 1px 2px rgba(0,0,0,.25),0 6px 18px rgba(0,0,0,.22);
  --sh-2:0 2px 6px rgba(0,0,0,.25),0 18px 44px rgba(0,0,0,.38);
  --nav-h:0px;
}

/* ---------- səhifə açılışı və keçid ---------- */
@keyframes sh-pagein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sh-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sh-fade{from{opacity:0}to{opacity:1}}
@keyframes sh-pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sh-sheet{from{transform:translateY(100%)}to{transform:none}}
main,.wrap > main,#app{animation:sh-pagein .45s var(--ease) backwards}
html.sh-leaving body{opacity:.35;transition:opacity .16s var(--ease-soft)}

/* ---------- kartlar: sırayla, yumşaq çıxış ---------- */
#grid > .card,.grid > .card,#dgrid > .card{animation:sh-rise .5s var(--ease) backwards}
#grid > .card:nth-child(2),.grid > .card:nth-child(2){animation-delay:.04s}
#grid > .card:nth-child(3),.grid > .card:nth-child(3){animation-delay:.08s}
#grid > .card:nth-child(4),.grid > .card:nth-child(4){animation-delay:.12s}
#grid > .card:nth-child(5),.grid > .card:nth-child(5){animation-delay:.16s}
#grid > .card:nth-child(6),.grid > .card:nth-child(6){animation-delay:.2s}
#grid > .card:nth-child(n+7),.grid > .card:nth-child(n+7){animation-delay:.24s}
#grid.rows > .card{animation-name:sh-fade;animation-duration:.35s}
.card:not(.row){transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.card:not(.row):hover{box-shadow:var(--sh-2)}
.gal img{transition:transform .9s var(--ease),opacity .4s var(--ease-soft)}
.card:not(.row):hover .gal img.mainimg{transform:scale(1.035)}

/* ---------- düymələr, sahələr ---------- */
.btn,.pill,.tab,.chip,.ptab,.sw{transition:background .25s var(--ease-soft),border-color .25s var(--ease-soft),
  color .25s var(--ease-soft),transform .18s var(--ease),box-shadow .25s var(--ease-soft)}
.btn:active,.pill:active,.ptab:active{transform:scale(.965)}
.btn.primary{box-shadow:0 6px 18px rgba(var(--accent-rgb),.18)}
.btn.primary:hover{box-shadow:0 8px 24px rgba(var(--accent-rgb),.28)}
input,select,textarea{transition:border-color .25s var(--ease-soft),box-shadow .25s var(--ease-soft)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12)}

/* ---------- pəncərələr ---------- */
.modal-bg:not([hidden]){animation:sh-fade .25s var(--ease-soft) backwards}
.modal-bg:not([hidden]) > .modal{animation:sh-rise .35s var(--ease) backwards}
.panel{animation:sh-rise .5s var(--ease) backwards}
.right > .panel:nth-child(2){animation-delay:.05s}
.right > .panel:nth-child(3){animation-delay:.1s}
.right > .panel:nth-child(n+4){animation-delay:.15s}
.toast{animation:sh-rise .4s var(--ease) backwards}

/* ---------- profil düyməsi və menyu ---------- */
.sh-prof{position:relative;flex:none}
.sh-avbtn{display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 4px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);cursor:pointer;transition:background .25s var(--ease-soft),border-color .25s var(--ease-soft)}
.sh-avbtn:hover{background:var(--hover)}
.sh-tool{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;flex:none;
  border:1px solid var(--line);background:var(--panel);color:var(--text2);font-size:13.5px;font-weight:600;white-space:nowrap;
  text-decoration:none;transition:background .25s var(--ease-soft),border-color .25s var(--ease-soft)}
.sh-tool:hover{background:var(--hover);color:var(--text)}
.sh-tool.on{border-color:rgba(var(--accent-rgb),.55);color:var(--accent)}
.sh-avbtn[aria-expanded="true"]{border-color:rgba(var(--accent-rgb),.55)}
.sh-av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font:700 13px/1 Geist,system-ui,sans-serif;color:var(--ink);background:linear-gradient(135deg,var(--accent),var(--accent-hi))}
.sh-av.lg{width:48px;height:48px;font-size:17px}
.sh-avbtn .sh-nm{font-size:13.5px;font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-avbtn svg{color:var(--muted);transition:transform .3s var(--ease)}
.sh-avbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.sh-menu{position:fixed;right:16px;top:70px;width:300px;z-index:90;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:8px;transform-origin:top right;animation:sh-pop .28s var(--ease) backwards}
.sh-menu[hidden]{display:none}
.sh-head{display:flex;gap:12px;align-items:center;padding:10px 10px 12px}
.sh-head b{display:block;font-size:15.5px;line-height:1.25}
.sh-head small{display:block;color:var(--muted);font-size:12.5px}
.sh-role{display:inline-block;margin-top:5px;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;
  background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.sh-sep{height:1px;background:var(--line);margin:6px 4px}
.sh-item{display:flex;align-items:center;gap:12px;width:100%;height:42px;padding:0 10px;border-radius:12px;border:0;background:none;
  color:var(--text2);font:inherit;font-size:14px;text-align:left;cursor:pointer;text-decoration:none;
  transition:background .2s var(--ease-soft),color .2s var(--ease-soft),transform .2s var(--ease)}
.sh-item:hover{background:var(--panel2);color:var(--text);transform:translateX(2px)}
.sh-item.on{background:rgba(var(--accent-rgb),.1);color:var(--accent)}
.sh-item svg{flex:none;opacity:.85}
.sh-item .sh-n{margin-left:auto;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--muted)}
.sh-item.danger{color:#F2727F}
.sh-menu .sh-item{animation:sh-rise .35s var(--ease) backwards}
.sh-menu .sh-item:nth-of-type(2){animation-delay:.02s}.sh-menu .sh-item:nth-of-type(3){animation-delay:.04s}
.sh-menu .sh-item:nth-of-type(4){animation-delay:.06s}.sh-menu .sh-item:nth-of-type(n+5){animation-delay:.08s}
.sh-dim{position:fixed;inset:0;z-index:89;background:rgba(0,0,0,.45);animation:sh-fade .25s var(--ease-soft) backwards}
.sh-dim[hidden]{display:none}

/* Bulud rejimində köhnə başlıq düymələri menyuya köçür */
html.sh-on #custlink,html.sh-on .hacts a[href="/agentlik"],html.sh-on .hacts a[href="/admin"],
html.sh-on header .me,html.sh-on #settings{display:none!important}

/* ---------- mobil alt naviqasiya ---------- */
.sh-tab{display:none}
@media (max-width:760px){
  html.sh-on{--nav-h:64px}
  html.sh-on body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
  .sh-tab{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding:6px 6px env(safe-area-inset-bottom);background:var(--panel);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(0,0,0,.25);animation:sh-rise .45s var(--ease) backwards}
  .sh-tab a,.sh-tab button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;background:none;color:var(--muted);font:500 11px/1.1 Geist,system-ui,sans-serif;text-decoration:none;border-radius:14px;
    cursor:pointer;transition:color .25s var(--ease-soft),background .25s var(--ease-soft)}
  .sh-tab .on{color:var(--accent)}
  .sh-tab .on .sh-ti{background:rgba(var(--accent-rgb),.14)}
  .sh-ti{width:46px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;
    transition:background .3s var(--ease)}
  .sh-tab .sh-av{width:26px;height:26px;font-size:11px}
  /* mobil: profil menyusu aşağıdan çıxan vərəq kimi */
  .sh-menu{position:fixed;left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;
    border-radius:24px;padding:10px 10px 12px;animation:sh-sheet .38s var(--ease) backwards;max-height:80vh;overflow:auto}
  .sh-menu::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line2);margin:2px auto 6px}
  .sh-item{height:48px;font-size:15px}
  html.sh-on .sh-prof,html.sh-on .sh-tool{display:none}
  /* AI düyməsi və bildirişlər alt menyunun üstündə */
  html.sh-on .aic-fab{bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom))!important}
  html.sh-on #toasts{bottom:calc(var(--nav-h) + 12px)!important}
  html.sh-on .switch{bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom))!important}
  /* Pəncərələr və filtr vərəqi alt menyunun ÜSTÜNDƏ olsun (düymələri örtülməsin) */
  html.sh-on .modal-bg{z-index:85!important}
  html.sh-on #fpanel{z-index:85!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;max-height:calc(100dvh - 90px)!important}
}

/* ---------- mobil: bütün pəncərələr (popup) ekrana sığsın ---------- */
@media (max-width:640px){
  .modal-bg{padding:0!important;align-items:flex-end!important}
  .modal-bg > .modal{width:100%!important;max-width:none!important;margin:0!important;
    border-radius:24px 24px 0 0!important;max-height:calc(100dvh - 24px);overflow:auto;
    padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;animation:sh-sheet .38s var(--ease) backwards!important}
  .modal-bg > .modal input,.modal-bg > .modal select,.modal-bg > .modal textarea{font-size:16px}   /* iOS zoom olmasın */
  table{max-width:100%}
}

/* ---------- bildiriş zəngi ---------- */
.sh-bellwrap{display:inline-flex;align-items:center;position:relative}
.sh-bell{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s var(--ease-soft),border-color .25s var(--ease-soft),transform .2s var(--ease)}
.sh-bell:hover{background:var(--hover)}
.sh-bell:active{transform:scale(.94)}
.sh-bell.has{border-color:rgba(var(--accent-rgb),.6);color:var(--accent)}
.sh-bell.ring svg{animation:sh-ring .9s var(--ease) 1}
@keyframes sh-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}}
.sh-bdg{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#E5484D;color:#fff;
  font:700 11px/18px var(--mono,ui-monospace,monospace);text-align:center;border:2px solid var(--bg)}
.sh-bdg[hidden]{display:none}
.sh-np{position:fixed;z-index:90;top:64px;right:16px;width:380px;max-width:calc(100vw - 24px);max-height:min(560px,calc(100dvh - 90px));
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden;transform-origin:top right;animation:sh-pop .28s var(--ease) backwards}
.sh-np[hidden]{display:none}
.sh-nph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px}
.sh-nph b{font-size:15px}
.sh-nph button{border:0;background:none;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;padding:4px 6px;border-radius:8px}
.sh-nph button:hover{background:var(--hover)}
.sh-npl{overflow:auto;flex:1;min-height:80px;padding:0 8px 6px}
.sh-ni{display:flex;gap:11px;align-items:flex-start;padding:10px 8px;border-radius:14px;color:var(--text);text-decoration:none;position:relative;
  transition:background .2s var(--ease-soft)}
.sh-ni:hover{background:var(--hover)}
.sh-ni.un{background:rgba(var(--accent-rgb),.08)}
.sh-ni.un::after{content:"";position:absolute;right:10px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sh-nic{flex:none;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--muted)}
.sh-nic.match{background:rgba(var(--accent-rgb),.16);color:var(--accent)}
.sh-nic.warn{background:rgba(245,184,65,.16);color:#F5B841}
.sh-nic.ok{background:rgba(74,222,128,.14);color:#4ADE80}
.sh-nt{min-width:0;flex:1}
.sh-nt b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;padding-right:14px}
.sh-nt small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-ni time{flex:none;color:var(--faint,var(--muted));font-size:11.5px;margin-top:2px;padding-right:12px}
.sh-nempty{padding:34px 18px;text-align:center;color:var(--muted);font-size:14px}
.sh-nempty small{font-size:12.5px;opacity:.85}
.sh-npf{border-top:1px solid var(--line);padding:8px}
.sh-npf button{width:100%;height:42px;border-radius:12px;border:0;background:none;color:var(--text2);font:inherit;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s var(--ease-soft)}
.sh-npf button:hover{background:var(--hover)}

/* ---------- kiçik pəncərə (xəta bildir / silmə səbəbi) və toast ---------- */
.sh-dlg-bg{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px;
  animation:sh-fade .25s var(--ease-soft) backwards}
.sh-dlg{width:min(460px,100%);background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:22px;padding:20px;
  box-shadow:var(--sh-2);animation:sh-rise .35s var(--ease) backwards}
.sh-dlg h3{margin:0 0 6px;font-size:18px}
.sh-dnote{margin:0 0 10px;color:var(--muted);font-size:12.5px;word-break:break-all}
.sh-dlg label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.sh-dlg textarea{resize:vertical;min-height:110px;background:var(--field);border:1px solid var(--line2);border-radius:14px;color:var(--text);
  font:inherit;font-size:16px;padding:12px;outline:none}
.sh-dlg textarea:focus{border-color:var(--accent)}
.sh-derr{color:#F2727F;font-size:13px;min-height:18px;margin-top:6px}
.sh-drow{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.sh-drow button{height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:inherit;font-size:14.5px;cursor:pointer}
.sh-drow .sh-dok{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:600}
.sh-toasts{position:fixed;top:16px;right:16px;z-index:130;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 24px));pointer-events:none}
.sh-toast{pointer-events:auto;display:block;background:var(--panel);color:var(--text);text-decoration:none;border:1px solid var(--line2);
  border-left:4px solid var(--accent);border-radius:14px;padding:12px 14px;box-shadow:var(--sh-2);animation:sh-rise .4s var(--ease) backwards;
  transition:opacity .35s,transform .35s}
.sh-toast.out{opacity:0;transform:translateX(16px)}
.sh-toast b{display:block;font-size:14px}
.sh-toast small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
@media (max-width:760px){
  .sh-np{left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-width:none;max-height:78dvh;
    border-radius:24px;animation:sh-sheet .38s var(--ease) backwards}
  .sh-dlg-bg{align-items:flex-end;padding:0}
  .sh-dlg{width:100%;border-radius:24px 24px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom));animation:sh-sheet .38s var(--ease) backwards}
  .sh-toasts{top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;width:auto}
  .sh-bell{width:40px;height:40px}
}

/* ---------- yükləmə skeletləri (bazadan məlumat gələnə qədər) ----------
   Konteynerin içinə əvvəlcədən qoyulur; məlumat gələndə innerHTML onları özü əvəz edir. */
@keyframes ld-shim{from{background-position:100% 0}to{background-position:-100% 0}}
.ld-line,.ld-card i,.ld-card b,.ld-stat{display:block;border-radius:10px;
  background:linear-gradient(90deg,rgba(128,128,140,.13) 25%,rgba(128,128,140,.26) 50%,rgba(128,128,140,.13) 75%);
  background-size:300% 100%;animation:ld-shim 1.2s linear infinite}
.ld-line{height:14px;margin:6px 0}
.ld-line.s{width:55%}
.ld-card{background:var(--panel,#151a21);border:1px solid var(--line,#232a35);border-radius:18px;padding:16px;
  display:flex;flex-direction:column;gap:10px;min-height:170px}
.ld-card i{height:18px;width:60%}
.ld-card b{height:12px}
.ld-card b:last-child{width:40%;margin-top:auto}
.ld-stat{height:64px;min-width:110px;flex:1;border-radius:14px}
.ld-tr td{padding:10px 12px!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}