/* ui.css : iOS-style loader, toast, dialog and smooth refresh for Tallinding Islamic Institute */
:root{
  --ui-gear:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.12'%20transform='rotate%280%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.2'%20transform='rotate%2830%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.28'%20transform='rotate%2860%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.36'%20transform='rotate%2890%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.44'%20transform='rotate%28120%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.52'%20transform='rotate%28150%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.6'%20transform='rotate%28180%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.68'%20transform='rotate%28210%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.76'%20transform='rotate%28240%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.84'%20transform='rotate%28270%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='0.92'%20transform='rotate%28300%2050%2050%29'/%3E%3Crect%20x='46'%20y='5'%20width='8'%20height='24'%20rx='4'%20fill='black'%20opacity='1.0'%20transform='rotate%28330%2050%2050%29'/%3E%3C/svg%3E");
  --ui-ease:cubic-bezier(.22,1,.36,1);
  --ui-spring:cubic-bezier(.34,1.56,.64,1);
  --ui-green:#1e5a3a;
  --ui-red:#c0392b;
  --ui-glass:rgba(255,255,255,.82);
  --ui-ink:#17261f;
  --ui-ink2:#55645c;
  --ui-line:rgba(30,90,58,.14);
}

/* ---- iPhone spoke loader (12 fading spokes, stepped rotation) ---- */
.ios-spin,.fa-spinner{
  display:inline-block;width:1em;height:1em;line-height:1;vertical-align:-.15em;
  background:currentColor;
  -webkit-mask:var(--ui-gear) center/contain no-repeat;mask:var(--ui-gear) center/contain no-repeat;
  animation:ui-gear 1s steps(12,end) infinite!important;
}
.fa-spinner::before{content:""!important;display:none!important}
@keyframes ui-gear{to{transform:rotate(360deg)}}
.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;animation:ui-fade .25s ease both}
.loading-spinner i,.loading-spinner .ios-spin{font-size:2.2rem!important}

/* ---- first-paint splash ---- */
#uiBoot{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:#f6faf7;color:var(--ui-green);opacity:1;transition:opacity .45s var(--ui-ease),visibility .45s}
#uiBoot img{width:92px;height:92px;object-fit:contain;border-radius:50%;animation:ui-pop .7s var(--ui-spring) both}
#uiBoot .ios-spin{font-size:34px}
#uiBoot.hide{opacity:0;visibility:hidden;pointer-events:none}
@keyframes ui-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* ---- smooth refresh: new content eases in ---- */
@keyframes ui-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
.admin-panel.active{animation:ui-rise .38s var(--ui-ease) both}
tbody tr{animation:ui-fade .32s ease both}
#termCardsGrid>*{animation:ui-rise .4s var(--ui-ease) both}
#termCardsGrid>*:nth-child(2){animation-delay:.06s}
.success-msg.show,.err-msg.show{display:none!important} /* replaced by the toast */
button:not(:disabled),.admin-tab{transition:transform .3s var(--ui-spring),background .2s,box-shadow .2s,opacity .2s}
button:not(:disabled):active,.admin-tab:active{transform:scale(.97)}

/* ---- toast: calm glass card in the centre ---- */
#uiToast{position:fixed;left:50%;top:50%;z-index:100001;display:flex;align-items:center;gap:12px;
  width:max-content;max-width:min(400px,88vw);padding:14px 18px 14px 20px;border-radius:22px;
  background:var(--ui-glass);color:var(--ui-ink);font-size:16px;font-weight:600;line-height:1.45;
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  box-shadow:0 24px 60px -20px rgba(10,30,20,.38),inset 0 0 0 .5px var(--ui-line);
  opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .25s var(--ui-ease),transform .45s var(--ui-spring)}
#uiToast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#uiToast .tk{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ui-green);color:#fff;font-weight:800}
#uiToast .tk.bad{background:var(--ui-red);font-size:19px}
#uiToast .tk.info{background:#2471a3;font-size:18px}
#uiToast.show .tk svg path{stroke-dasharray:26;stroke-dashoffset:26;animation:ui-draw .45s .12s var(--ui-ease) forwards}
@keyframes ui-draw{to{stroke-dashoffset:0}}

/* ---- dialog ---- */
.ui-dlg-wrap{position:fixed;inset:0;z-index:100002;display:grid;place-items:center;padding:20px;background:rgba(10,30,20,.3);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s var(--ui-ease)}
.ui-dlg-wrap.show{opacity:1}
.ui-dlg{width:100%;max-width:400px;background:var(--ui-glass);-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);
  border-radius:24px;padding:24px;box-shadow:0 30px 70px -20px rgba(10,30,20,.45),inset 0 0 0 .5px var(--ui-line);
  transform:scale(.92);transition:transform .4s var(--ui-spring);text-align:center}
.ui-dlg-wrap.show .ui-dlg{transform:scale(1)}
.ui-dlg h2{font-size:19px;font-weight:800;color:var(--ui-ink);word-break:break-word}
.ui-dlg p{margin-top:8px;color:var(--ui-ink2);font-size:15px;line-height:1.6;white-space:pre-line;word-break:break-word}
.ui-dlg-b{display:flex;gap:10px;margin-top:20px}
.ui-dlg-b button{flex:1;border:0;border-radius:14px;padding:12px 10px;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;
  background:rgba(30,90,58,.1);color:var(--ui-green)}
.ui-dlg-b button:focus{outline:none}.ui-dlg-b button:focus-visible{box-shadow:0 0 0 3px rgba(30,90,58,.3)}
.ui-dlg-b button.ok{background:var(--ui-green);color:#fff}
.ui-dlg-b button.danger{background:var(--ui-red);color:#fff}

@media (prefers-reduced-motion:reduce){
  #uiToast,.ui-dlg,.ui-dlg-wrap,#uiBoot{transition:none}
  .admin-panel.active,tbody tr,#termCardsGrid>*,#uiBoot img{animation:none!important}
}