/* ═══════════════════════════════════════════════════════════════
   PAGOTRONIC — core.css
   Shared styles: variables, topbar, sidebar, footer, buttons,
   forms, layout, utilities, responsive breakpoints.
   All pages link this file. Page-specific styles stay in each HTML.
═══════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── DESIGN TOKENS ── */
:root{
  --or:#FF5F1F;--or2:#FF7A40;--or-lt:#FFF0E8;--or-glow:rgba(255,95,31,.28);
  --bl:#010165;--bl2:#0035B8;--bl3:#004EE4;--bl-lt:#EAF0FF;--bl-dark:#000D2E;--bl-mid:#00123A;
  --wh:#FFFFFF;--off:#F7F9FC;--g05:#F7F9FC;--g10:#F0F4FA;--g20:#E2EAF5;--g30:#C8D4E8;
  --g50:#8FA5C9;--g60:#6B7FA3;--g80:#2D3B5A;--text:#0A1628;
  --green:#22C55E;--green-lt:#E8FFF0;--red:#EF4444;--red-lt:#FEF2F2;
  --sh:0 4px 20px rgba(10,22,40,.09);--sh2:0 12px 40px rgba(10,22,40,.13);
  --sh3:0 24px 60px rgba(10,22,40,.18);
  --fh:'Sora',sans-serif;--fb:'Sora',sans-serif;
  --r:12px;--r2:16px;--r3:20px;
}

/* ── BASE ── */
html,body{min-height:100%;font-family:var(--fb);color:var(--text);background:var(--off)}

/* ── TOPBAR ── */
.topbar{
  height:64px;background:#010165;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;position:sticky;top:0;z-index:200;
}
.tb-logo{height:34px;cursor:pointer}
.tb-logo img{height:42px;width:auto;object-fit:contain}
.tb-right{display:flex;align-items:center;gap:.8rem}
.tb-link{color:rgba(255,255,255,.58);font-size:.83rem;font-weight:500;text-decoration:none;transition:color .2s;cursor:pointer}
.tb-link:hover{color:rgba(255,255,255,.9)}
.tb-lang{display:flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);border-radius:50px;padding:.32rem .8rem;cursor:pointer;transition:all .2s}
.tb-lang:hover{border-color:var(--or)}
.tb-lang select{appearance:none;background:transparent;border:none;color:rgba(255,255,255,.75);font-size:.8rem;font-weight:600;font-family:var(--fb);cursor:pointer;outline:none}
.tb-lang select option{background:#010165}
.btn-topbar{background:var(--or);color:var(--wh);border:none;padding:.44rem 1.25rem;border-radius:50px;font-family:var(--fh);font-size:.84rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:background .2s,transform .15s;box-shadow:0 4px 14px rgba(255,95,31,.32)}
.btn-topbar:hover{background:var(--or2);transform:translateY(-1px)}
.btn-topbar-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.22);color:rgba(255,255,255,.78);padding:.42rem 1.15rem;border-radius:50px;font-family:var(--fh);font-size:.84rem;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:all .2s}
.btn-topbar-ghost:hover{border-color:var(--or);color:var(--or)}
.mob-sidebar-btn{display:none;align-items:center;gap:.5rem;background:none;border:none;color:rgba(255,255,255,.7);font-size:.85rem;cursor:pointer;padding:.3rem .6rem;border-radius:8px;transition:all .2s}
.mob-sidebar-btn:hover{background:rgba(255,255,255,.08);color:var(--wh)}

/* ── LAYOUT ── */
body.app-page{
  display:grid;
  grid-template-rows:64px 1fr auto;  /* topbar | content | footer */
  height:100vh;                       /* exact viewport — never taller */
  overflow:hidden;                    /* body itself never scrolls */
  background:var(--g05);
}
.app-body{
  display:grid;
  grid-template-columns:260px 1fr;
  overflow:hidden;                    /* contain both sidebar and main */
  min-height:0;                       /* allow grid row to shrink properly */
}

/* ── SIDEBAR ── */
.sidebar{background:var(--wh);border-right:1px solid var(--g10);padding:2rem 0;height:100%;overflow-y:auto;display:flex;flex-direction:column}
.sb-avatar{text-align:center;padding:0 1.5rem 1.5rem;border-bottom:1px solid var(--g10);margin-bottom:1.5rem}
.sb-ava-img{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--bl-lt),rgba(0,78,228,.12));margin:0 auto .9rem;display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid var(--wh);box-shadow:0 4px 16px rgba(0,31,107,.15)}
.sb-ava-img img{width:100%;height:100%;object-fit:cover}
.sb-name{font-family:var(--fh);font-size:.93rem;font-weight:800;color:var(--text);margin-bottom:.2rem}
.sb-uid{font-size:.77rem;color:var(--g60)}
.sb-uid a{color:var(--bl2);text-decoration:none;font-weight:600}
.sb-sect{padding:.5rem 1.5rem;font-size:.66rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--g50);margin-top:.5rem}
.sb-item{display:flex;align-items:center;gap:.75rem;padding:.78rem 1.5rem;cursor:pointer;transition:background .18s,color .18s;border-left:3px solid transparent;text-decoration:none;color:var(--g60);font-size:.88rem;font-weight:500;transform:none!important;position:relative}
.sb-item:hover{background:var(--g05);color:var(--text)}
.sb-item.active{background:var(--or-lt);color:var(--or);border-left-color:var(--or);font-weight:700}
.sb-item svg{flex-shrink:0}
.sb-spacer{flex:1}
.sb-bottom{padding:.5rem 1.5rem 0;border-top:1px solid var(--g10)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:140;backdrop-filter:blur(2px)}
.sidebar-overlay.active{display:block}

/* ── MAIN CONTENT ── */
.main-content{
  padding:2rem 2.5rem 6rem;
  max-width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  height:100%;
  min-height:0;
  scroll-padding-bottom:6rem;
}

/* ── FOOTER ── */
.app-footer{background:#010165;border-top:1px solid rgba(255,255,255,.06);padding:1rem 5vw;flex-shrink:0}
.app-footer *{color:#fff!important}
.app-footer a:hover{color:#FF5F1F!important}
.app-footer .af-soc{background:rgba(255,255,255,.15)!important}
.app-footer .af-soc:hover{background:#FF5F1F!important}
.af-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.9rem}
.af-logo img{height:28px;width:auto}
.af-links{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.af-links a{color:#fff;font-size:.75rem;text-decoration:none;transition:color .2s}
.af-links a:hover{color:var(--or)}
.af-links span{color:rgba(255,255,255,.5);font-size:.75rem}
.af-info{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.af-info a{color:#fff;font-size:.75rem;text-decoration:none;display:flex;align-items:center;gap:.35rem;transition:color .2s}
.af-info a:hover{color:var(--or)}
.af-copy{width:100%;text-align:center;color:#fff;font-size:.72rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12);margin-top:.4rem}
.af-socials{display:flex;gap:.55rem}
.af-soc{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;text-decoration:none;transition:all .2s}
.af-soc:hover{background:var(--or);color:var(--wh)}

/* ── BUTTONS ── */
.btn-or{background:linear-gradient(135deg,var(--or),var(--or2));color:var(--wh);border:none;padding:.88rem 2rem;border-radius:11px;font-family:var(--fh);font-size:.97rem;font-weight:800;cursor:pointer;box-shadow:0 6px 20px var(--or-glow);transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-or:hover{transform:translateY(-1px);box-shadow:0 10px 28px var(--or-glow)}
.btn-or:disabled{opacity:.55;transform:none;cursor:not-allowed}
.btn-or.full{width:100%}
.btn-bl{background:linear-gradient(135deg,var(--bl2),var(--bl3));color:var(--wh);border:none;padding:.88rem 2rem;border-radius:11px;font-family:var(--fh);font-size:.97rem;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(0,53,184,.28);transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-bl:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,53,184,.35)}
.btn-bl.full{width:100%}
.btn-ghost{background:var(--wh);border:2px solid var(--g20);color:var(--text);padding:.82rem 1.8rem;border-radius:11px;font-family:var(--fh);font-size:.93rem;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-ghost:hover{border-color:var(--bl3);color:var(--bl2)}
.btn-ghost.full{width:100%}

/* ── FORMS ── */
.f-label{display:block;font-size:.71rem;font-weight:700;color:var(--g80);letter-spacing:.55px;text-transform:uppercase;margin-bottom:.42rem}
.f-input,.f-select,.f-textarea{width:100%;padding:.82rem 1rem;border:1.5px solid var(--g30);border-radius:11px;background:var(--wh);font-family:var(--fb);font-size:.93rem;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;text-transform:uppercase}
.f-input::placeholder{color:var(--g50);text-transform:none}
.f-input[type=password]{text-transform:none}
/* .no-upper — applied to password fields so they stay lowercase even when
   the eye icon toggles them to type="text"                                  */
.f-input.no-upper,.f-textarea.no-upper{text-transform:none!important}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--bl3);box-shadow:0 0 0 3px rgba(0,78,228,.1)}
.f-input.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.f-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7FA3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.f-row{display:grid;gap:1rem;margin-bottom:1rem}
.f-row.cols2{grid-template-columns:1fr 1fr}
.f-row.cols3{grid-template-columns:1fr 1fr 1fr}
.f-group{display:flex;flex-direction:column}
.f-hint{font-size:.73rem;color:var(--g60);margin-top:.3rem;line-height:1.5}
.f-err-msg{font-size:.73rem;color:var(--red);margin-top:.3rem;display:none}
.pwd-wrap{position:relative}
.pwd-wrap .f-input{padding-right:3rem}
.pwd-eye{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--g50);font-size:1rem;padding:.2rem;transition:color .2s}
.pwd-eye:hover{color:var(--bl2)}
.f-check-row{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer}
.f-check-row input[type=checkbox]{width:16px;height:16px;margin-top:.15rem;accent-color:var(--bl3);flex-shrink:0;cursor:pointer}
.f-check-row span{font-size:.82rem;color:var(--g60);line-height:1.6}
.f-check-row a{color:var(--bl2);text-decoration:none}
.f-check-row a:hover{color:var(--or)}

/* ── UTILITIES ── */
.card{background:var(--wh);border-radius:var(--r3);box-shadow:var(--sh2);overflow:hidden;border:none}
.divider{display:flex;align-items:center;gap:.85rem;margin:1.3rem 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--g10)}
.divider span{font-size:.78rem;color:var(--g50);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:50px;padding:.22rem .75rem;font-size:.72rem;font-weight:700}
.pill-green{background:var(--green-lt);color:#16A34A}
.pill-or{background:var(--or-lt);color:var(--or)}
.pill-bl{background:var(--bl-lt);color:var(--bl2)}
.pill-red{background:var(--red-lt);color:var(--red)}
.pill-grey{background:var(--g10);color:var(--g60)}
.sec-title{font-family:var(--fh);font-size:.8rem;font-weight:800;color:var(--g80);letter-spacing:.6px;text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.sec-title::before{content:'';width:14px;height:2px;background:var(--or);border-radius:2px}

/* ── ANIMATIONS ── */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .7s linear infinite}
.fade-in{animation:fadeIn .35s ease both}

/* ── RESPONSIVE ── */
@media(min-width:901px){
  .sidebar{display:flex!important}
  .mob-sidebar-btn{display:none!important}
}
@media(max-width:900px){
  .app-body{grid-template-columns:1fr!important}
  .sidebar{display:none;position:fixed;top:64px;left:0;bottom:0;width:280px;z-index:150;box-shadow:0 24px 60px rgba(10,22,40,.22);overflow-y:auto}
  .sidebar.open{display:flex!important}
  .mob-sidebar-btn{display:flex!important}
  .main-content{padding:1.4rem 1rem 6rem!important}
}
@media(max-width:640px){
  .topbar{padding:0 1rem!important}
  .tb-link{display:none!important}
  .f-row.cols2,.f-row.cols3{grid-template-columns:1fr}
  .main-content{padding:.9rem .9rem 6rem!important}
  .app-footer .af-inner{flex-direction:column;align-items:flex-start;gap:.6rem}
  .modal-dialog{margin:.4rem!important}
  .modal-dialog.modal-dialog-centered{align-items:flex-end!important;margin:0!important}
  .modal-content{border-radius:20px 20px 0 0!important}
}
@media(max-width:400px){
  .topbar{padding:0 .7rem!important}
  .tb-lang{padding:.28rem .55rem!important}
}

/* ── LANGUAGE DROPDOWN ── */
.lang-dd{position:relative;display:inline-block}
.lang-btn{
  display:inline-flex;align-items:center;gap:.38rem;
  background:transparent;border:1.5px solid rgba(255,255,255,.22);
  border-radius:50px;padding:.4rem 1rem;
  cursor:pointer;transition:all .2s;font-family:var(--fb);
  outline:none;color:rgba(255,255,255,.82);
}
.lang-btn:hover,.lang-dd.open .lang-btn{border-color:var(--or);color:var(--or)}
.lb-flag{font-size:1rem;line-height:1;pointer-events:none}
.lb-label{font-size:.82rem;font-weight:600;pointer-events:none;white-space:nowrap;line-height:1}
.lb-arr{font-size:.5rem;opacity:.55;transition:transform .2s;pointer-events:none;margin-left:1px}
.lang-dd.open .lb-arr{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:#fff;border-radius:12px;
  box-shadow:0 12px 36px rgba(10,22,40,.18),0 0 0 1px rgba(0,0,0,.05);
  min-width:148px;overflow:hidden;
  z-index:9999;list-style:none;padding:0;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .17s ease,transform .17s ease,visibility .17s;
}
.lang-dd.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-opt{
  display:flex;align-items:center;gap:.6rem;
  padding:.72rem 1.1rem;cursor:pointer;
  font-size:.86rem;font-weight:600;color:var(--text,#0a1628);
  transition:background .13s;
}
.lang-opt:not(:last-child){border-bottom:1px solid #f0f4fa}
.lang-opt:hover{background:#f7f9fc}
.lang-opt.active{background:#eaf0ff;color:#010165}
.lo-flag{font-size:1.1rem;line-height:1}

/* ── PT Custom Country Dropdown (cross-platform, flagcdn images — no emoji) ── */
.pt-cdd{position:relative;width:100%}
.pt-cdd-btn{display:flex;align-items:center;gap:.55rem;width:100%;background:#fff;cursor:pointer;text-align:left;border:1.5px solid var(--g30,#c8d4e8);border-radius:10px;padding:.75rem .9rem;font-family:var(--fb,'Sora'),sans-serif;font-size:.9rem;color:var(--text,#0a1628);outline:none;transition:border-color .2s,box-shadow .2s}
.pt-cdd-btn:focus,.pt-cdd.open .pt-cdd-btn{border-color:var(--bl3,#004ee4);box-shadow:0 0 0 3px rgba(0,78,228,.1)}
.pt-cdd-btn.err{border-color:var(--red,#ef4444)!important;box-shadow:0 0 0 3px rgba(239,68,68,.1)!important}
.pt-cdd-flag{width:24px;height:18px;border-radius:2px;object-fit:cover;flex-shrink:0}
.pt-cdd-lbl{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--g50,#8fa5c9)}
.pt-cdd-lbl.chosen{color:var(--text,#0a1628)}
.pt-cdd-arr{flex-shrink:0;transition:transform .2s;color:var(--g60,#6b7fa3)}
.pt-cdd.open .pt-cdd-arr{transform:rotate(180deg)}
.pt-cdd-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid var(--g30,#c8d4e8);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:1000;max-height:240px;overflow-y:auto;display:none;scrollbar-width:thin}
.pt-cdd.open .pt-cdd-list{display:block}
.pt-cdd-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem;cursor:pointer;font-size:.87rem;color:var(--text,#0a1628);transition:background .13s;white-space:nowrap}
.pt-cdd-item:hover{background:var(--g10,#f0f4fa)}
.pt-cdd-item.selected{background:var(--bl-lt,#eaf0ff);color:var(--bl,#010165);font-weight:600}
.pt-cdd-item img{width:22px;height:16px;border-radius:2px;object-fit:cover;flex-shrink:0}

/* ── SMOOTH PAGE TRANSITIONS — hides flash of hardcoded defaults before API loads ── */
@keyframes pt-page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.main-content{animation:pt-page-in .32s ease both}
/* Sidebar fade-in */
@keyframes pt-slide-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.sidebar .sb-avatar,.sidebar .sb-name,.sidebar .sb-uid{animation:pt-slide-in .28s ease both}
.sidebar .sb-name{animation-delay:.05s}
.sidebar .sb-uid{animation-delay:.08s}
/* Skeleton shimmer for elements that haven't loaded yet */
@keyframes pt-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.pt-loading{background:linear-gradient(90deg,#f0f4fa 25%,#e2eaf5 50%,#f0f4fa 75%);background-size:200% 100%;animation:pt-shimmer 1.4s ease infinite;border-radius:6px;color:transparent!important;pointer-events:none}
.pt-loading *{visibility:hidden}