/* ============================================
   Vereino - Shared Styles
   ============================================ */

/* --- 1. CSS Variables / Theme --- */
:root{
  --p:#5B8AF0;--ps:rgba(91,138,240,.13);
  --g:#4CC97A;--gs:rgba(76,201,122,.13);
  --r:#F06B6B;--o:#F0A45B;--pu:#9B7FEA;--y:#F0D15B;
  --bg:#F4F6FF;--w:#fff;--bd:#E4E9F8;--t:#1C2140;--m:#8892B0;
  --rad:16px;--sh:0 2px 16px rgba(91,138,240,.1);--shl:0 6px 32px rgba(91,138,240,.18);
}

/* --- 2. Reset & Base --- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:'Nunito',sans-serif;background:var(--bg);color:var(--t)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:4px}

/* --- 3. App Layout --- */
#app{display:flex;height:100vh;flex-direction:column;overflow:hidden}

/* --- 4. Topbar --- */
.tb{height:54px;background:var(--w);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0;box-shadow:0 1px 10px rgba(91,138,240,.07);z-index:300}
.hbg{width:36px;height:36px;border:none;background:var(--bg);border-radius:9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hb{display:block;width:16px;height:2px;background:var(--t);border-radius:2px;transition:all .28s}
.hbg.open .hb:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hbg.open .hb:nth-child(2){opacity:0;transform:scaleX(0)}
.hbg.open .hb:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tl{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--p)}

/* --- 5. Sidebar --- */
.sbo{display:none;position:fixed;inset:0;background:rgba(28,33,64,.28);z-index:490;backdrop-filter:blur(2px)}
.sbo.open{display:block}
.sb{position:fixed;top:0;left:0;height:100%;width:262px;background:var(--w);z-index:500;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(91,138,240,.12);overflow-y:auto}
.sb.open{transform:translateX(0)}
.sbh{padding:18px 18px 14px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px}
.sbt{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--p)}
.sbc{margin-left:auto;width:30px;height:30px;border:none;background:var(--bg);border-radius:7px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--m)}
.sbu{margin:12px 14px;background:var(--ps);border-radius:13px;padding:11px 13px;display:flex;align-items:center;gap:10px}
.sbu .ua{width:34px;height:34px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.sbu .un{font-weight:800;font-size:.88rem}
.sbu .ur{font-size:.72rem;color:var(--p);font-weight:700}
.nlbl{padding:12px 18px 5px;font-size:.68rem;font-weight:800;color:var(--m);text-transform:uppercase;letter-spacing:.8px}
.ni{display:flex;align-items:center;gap:11px;padding:11px 18px;border:none;background:none;width:100%;text-align:left;font-family:'Nunito',sans-serif;font-weight:700;font-size:.9rem;color:var(--m);cursor:pointer;transition:all .16s;position:relative}
.ni:hover{background:var(--bg);color:var(--t)}
.ni.active{color:var(--p);background:var(--ps)}
.ni.active::before{content:'';position:absolute;left:0;top:25%;height:50%;width:3px;background:var(--p);border-radius:0 3px 3px 0}
.nic{font-size:1.1rem;width:22px;text-align:center;flex-shrink:0}
.sbf{margin-top:auto;padding:14px 18px;border-top:1px solid var(--bd)}
.sblb{width:100%;padding:10px;border:1.5px solid var(--bd);border-radius:11px;background:none;color:var(--m);font-family:'Nunito',sans-serif;font-weight:700;font-size:.86rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.sblb:hover{border-color:var(--r);color:var(--r);background:#FFF5F5}

/* --- 6. Content Area & Pages --- */
.ct{flex:1;overflow-y:auto;padding:18px 18px 30px}
.pg{display:none;animation:fu .22s ease}
.pg.active{display:block}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pt{font-family:'Fredoka One',cursive;font-size:1.5rem;color:var(--t);margin-bottom:16px;display:flex;align-items:center;gap:10px}

/* --- 7. Cards & Grid --- */
.cd{background:var(--w);border-radius:var(--rad);padding:16px;box-shadow:var(--sh);border:1px solid var(--bd)}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px}

/* --- 8. Buttons --- */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border:none;border-radius:9px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.83rem;cursor:pointer;transition:all .14s}
.btn:hover{transform:translateY(-1px)}
.btn.bbl{background:var(--p);color:#fff;box-shadow:0 2px 10px rgba(91,138,240,.28)}
.btn.bbg{background:var(--g);color:#fff}
.btn.bbr{background:var(--r);color:#fff}
.btn.bbo{background:var(--o);color:#fff}
.btn.bbp{background:var(--pu);color:#fff}
.btn.bbgh{background:var(--bg);color:var(--t);border:1.5px solid var(--bd)}
.btn.sm{padding:6px 10px;font-size:.76rem;border-radius:7px}

/* --- 9. Form Inputs --- */
input,select,textarea{background:var(--bg);border:2px solid var(--bd);border-radius:10px;padding:10px 13px;color:var(--t);font-family:'Nunito',sans-serif;font-size:.88rem;outline:none;transition:border .2s}
input:focus,select:focus,textarea:focus{border-color:var(--p);background:var(--w)}
textarea{resize:vertical;min-height:76px;width:100%}

/* --- 10. Modals --- */
.ov{display:none;position:fixed;inset:0;background:rgba(28,33,64,.38);z-index:600;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)}
.ov.open{display:flex}
@media(min-width:500px){.ov{align-items:center}}
.mo{background:var(--w);border-radius:22px 22px 0 0;padding:26px 22px 30px;width:100%;max-width:500px;max-height:92vh;overflow-y:auto;animation:su .26s ease}
@media(min-width:500px){.mo{border-radius:22px}}
@keyframes su{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}
.mo h2{font-family:'Fredoka One',cursive;font-size:1.25rem;margin-bottom:16px}
.fr{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.fr label{font-size:.72rem;font-weight:800;color:var(--m);text-transform:uppercase;letter-spacing:.5px}
.fr input,.fr select,.fr textarea{width:100%}
.mb{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* --- 11. Messages --- */
.msg{padding:10px 14px;border-radius:10px;font-size:.82rem;font-weight:700;display:none;margin-bottom:10px}
.msg.show{display:block}
.msg.err{background:#FFF0F0;color:var(--r);border:1.5px solid var(--r)}
.msg.ok{background:var(--gs);color:var(--g);border:1.5px solid var(--g)}
.msg.info{background:var(--ps);color:var(--p);border:1.5px solid var(--p)}

/* --- 12. Toast --- */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--t);color:#fff;padding:10px 20px;border-radius:50px;font-size:.84rem;font-weight:700;z-index:9999;transition:transform .3s;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0)}

/* --- 13. Loader --- */
@keyframes tz-spin{to{transform:rotate(360deg)}}
#tz-loader{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s}
#tz-loader.hide{opacity:0;pointer-events:none}
.tz-spinner{width:40px;height:40px;border:3.5px solid var(--bd);border-top-color:var(--p);border-radius:50%;animation:tz-spin .7s linear infinite}

/* --- 14. Offline Indicator --- */
#tz-offline{display:none;position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:#1C2140;color:#fff;padding:10px 20px;border-radius:50px;font-size:.82rem;font-weight:700;z-index:9998;box-shadow:0 4px 20px rgba(0,0,0,.3);animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* --- 15. Tables --- */
.tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.tbl th{text-align:left;font-size:.68rem;font-weight:800;color:var(--m);text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:2px solid var(--bd)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--bd)}
.tbl tr:hover{background:var(--bg)}

/* --- 16. Links --- */
.lnk{color:var(--p);font-weight:700;text-decoration:none;cursor:pointer}
.lnk:hover{text-decoration:underline}

/* --- 17. Stat Cards --- */
.ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.sc{background:var(--w);border-radius:var(--rad);padding:14px;text-align:center;box-shadow:var(--sh);border:1px solid var(--bd)}
.sn{font-family:'Fredoka One',cursive;font-size:1.4rem;color:var(--p)}
.sl{font-size:.68rem;font-weight:700;color:var(--m);text-transform:uppercase;margin-top:2px}

/* --- 18. Chips / Tags --- */
.chip{padding:6px 12px;border-radius:50px;font-size:.76rem;font-weight:800;border:1.5px solid transparent;cursor:pointer;font-family:'Nunito',sans-serif;transition:all .14s}