/* ===== Lazaro UI — shared black & white theme ===== */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500&family=Tajawal:wght@300;400;500&display=swap');

:root{
  --bg:#000; --bg2:#101010; --ink:#fff; --mute:#8c8c8c;
  --line:rgba(255,255,255,.16); --fill:rgba(255,255,255,.04); --glow:rgba(255,255,255,.28);
  --r-pill:26px; --r-card:36px 36px 36px 36px / 32px 32px 40px 40px;
  --logo-w:clamp(130px,40vw,190px);
  --font:'Comfortaa','Tajawal','Segoe UI',system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%}
body{
  margin:0; min-height:100%; font-family:var(--font); font-weight:300; color:var(--ink);
  background:radial-gradient(120% 90% at 50% 0%,var(--bg2),var(--bg) 70%) fixed;
  display:flex; flex-direction:column; align-items:center; overflow-x:hidden;
}
body.no-scroll{height:100%; overflow:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* ----- animated background (injected by app.js) ----- */
.orb{position:fixed; border-radius:50%; filter:blur(80px); background:#fff; opacity:.09; animation:drift 18s ease-in-out infinite alternate; pointer-events:none; z-index:0}
.o1{width:380px;height:380px;left:-100px;top:-80px}
.o2{width:320px;height:320px;right:-90px;top:35%;animation-duration:23s;animation-delay:-6s;opacity:.07}
.o3{width:260px;height:260px;left:30%;bottom:-120px;animation-duration:27s;animation-delay:-12s;opacity:.08}
@keyframes drift{to{transform:translate(70px,50px) scale(1.25)}}
.waves{position:fixed; left:0; right:0; bottom:0; height:38vh; pointer-events:none; z-index:0}
.waves svg{position:absolute; bottom:0; width:200%; height:100%; animation:wave 16s linear infinite}
.waves svg:nth-child(2){animation-duration:24s; animation-direction:reverse}
.waves svg:nth-child(3){animation-duration:34s}
.waves path{fill:none; stroke:#fff; stroke-width:1}
.waves svg:nth-child(1) path{opacity:.4} .waves svg:nth-child(2) path{opacity:.25} .waves svg:nth-child(3) path{opacity:.15}
@keyframes wave{to{transform:translateX(-50%)}}

/* ----- layout ----- */
main{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 20px 8px; position:relative; z-index:2; gap:34px}
@keyframes rise{from{opacity:0; transform:translateY(24px) scale(.96)}}
.rise{animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both}

/* ----- logo: standalone image, no container ----- */
.brand{display:block; width:var(--logo-w); height:auto; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.18)); animation:float 7s ease-in-out infinite}
.brand.invert{filter:invert(1) drop-shadow(0 0 22px rgba(255,255,255,.18))} /* للوجو الغامق */
.brand-text{font-size:22px; letter-spacing:.14em}
@keyframes float{50%{transform:translateY(-8px)}}

/* ----- card ----- */
.card{
  width:100%; max-width:380px; padding:34px 30px 30px; border-radius:var(--r-card);
  background:linear-gradient(160deg,rgba(24,24,24,.75),rgba(6,6,6,.75)); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -30px #000, 0 0 60px -25px var(--glow);
}
.card.wide{max-width:960px}
.card h1,.card h2{margin:0 0 24px; text-align:center; font-weight:300; font-size:20px; letter-spacing:.04em}
.card.shake{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ----- fields (input + label, use placeholder=" ") ----- */
.field{position:relative; margin-bottom:16px}
.field input,.field select,.field textarea{
  width:100%; height:52px; padding:18px 22px 0; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--fill); color:var(--ink); font:inherit; font-size:14px; outline:none;
  transition:border-color .35s, box-shadow .35s, background .35s;
}
.field label{position:absolute; left:22px; top:17px; font-size:14px; color:var(--mute); pointer-events:none; transition:all .3s}
.field input:focus + label,.field input:not(:placeholder-shown) + label{top:8px; font-size:10px; color:var(--ink)}
.field input:focus{border-color:#fff; background:rgba(255,255,255,.07); box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 0 28px -6px var(--glow)}

/* لاحقة ثابتة جوه الخانة (مثلاً @lazaroscent.com) */
.field.has-suffix input{padding-right:150px}
.field .suffix{position:absolute; right:22px; top:25px; font-size:13px; color:var(--mute); pointer-events:none; opacity:0; transition:opacity .3s}
.field .suffix{opacity:1!important}.field input:focus ~ .suffix,.field input:not(:placeholder-shown) ~ .suffix{opacity:1}

/* ----- buttons ----- */
.btn{
  width:100%; height:52px; border:0; border-radius:var(--r-pill); cursor:pointer;
  font:inherit; font-size:15px; color:#000; background:linear-gradient(120deg,#d9d9d9,#fff 50%,#d9d9d9); background-size:200% 100%;
  animation:sheen 5s linear infinite; transition:transform .25s, box-shadow .25s; box-shadow:0 10px 30px -12px var(--glow);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px var(--glow)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line); animation:none; box-shadow:none}
.btn.ghost:hover{border-color:#fff}
@keyframes sheen{to{background-position:-200% 0}}
.msg{min-height:18px; margin:14px 0 0; text-align:center; font-size:12px; color:var(--mute)}

/* ----- footer ----- */
footer{position:relative; z-index:2; width:100%; padding:14px 20px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:11px; color:var(--mute)}
footer a{color:var(--mute); text-decoration:none; padding:5px 14px; border:1px solid var(--line); border-radius:20px; font-size:10px; transition:all .3s}
footer a:hover{color:#fff; border-color:#fff; box-shadow:0 0 18px -4px var(--glow)}

@media (max-height:640px){main{gap:20px} :root{--logo-w:110px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}}

/* ================= App shell (sidebar + content) ================= */
body.app{flex-direction:row; align-items:stretch; --side-w:264px}
body.app.collapsed{--side-w:76px}
.side{
  position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:20; display:flex; flex-direction:column; gap:16px;
  padding:14px 12px; overflow:hidden auto; border-right:1px solid var(--line); border-radius:0 38px 38px 0 / 0 46px 46px 0;
  background:linear-gradient(180deg,rgba(20,20,20,.84),rgba(4,4,4,.9)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:width .5s cubic-bezier(.2,.8,.2,1); scrollbar-width:none;
}
.side-top{display:flex; justify-content:flex-end}
.icon-btn{width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--fill); color:var(--ink); cursor:pointer; transition:all .3s}
.icon-btn:hover{border-color:#fff; box-shadow:0 0 18px -4px var(--glow)}
.icon-btn svg,.nav-item svg{width:20px; height:20px}
body.collapsed .side-top{justify-content:center}

.me{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; text-decoration:none; padding:6px 0 2px}
.avatar{position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:26px; border:1px solid var(--line); background:var(--fill); transition:all .5s cubic-bezier(.2,.8,.2,1); box-shadow:0 0 30px -10px var(--glow)}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
body.collapsed .avatar{width:44px; height:44px; font-size:15px}
.me-name{font-size:15px; letter-spacing:.02em}
.me-id{font-size:11px; color:var(--mute)}
body.collapsed .me-name,body.collapsed .me-id,body.collapsed .nav-label,body.collapsed .status select{display:none}

.status{position:relative; width:100%; display:flex; justify-content:center}
.status select{appearance:none; -webkit-appearance:none; width:100%; padding:9px 14px 9px 32px; border-radius:20px; border:1px solid var(--line); background:var(--fill); color:var(--ink); font:inherit; font-size:12px; cursor:pointer; outline:none}
.status select option{background:#111; color:#fff}
.dot{position:absolute; left:14px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#6b7280; box-shadow:0 0 10px currentColor; color:#6b7280; pointer-events:none}
body.collapsed .dot{position:static; margin:0; width:10px; height:10px}
.status[data-s="Online"] .dot{background:#4ade80; color:#4ade80}
.status[data-s="Break"] .dot{background:#fbbf24; color:#fbbf24}
.status[data-s="Meeting"] .dot{background:#60a5fa; color:#60a5fa}

.side nav{display:flex; flex-direction:column; gap:6px; margin-top:4px}
.nav-item{display:flex; align-items:center; gap:14px; height:48px; padding:0 14px; border-radius:24px; border:1px solid transparent; color:var(--mute); text-decoration:none; font-size:14px; white-space:nowrap; transition:all .3s}
.nav-item:hover{color:#fff; background:var(--fill)}
.nav-item.active{color:#fff; border-color:var(--line); background:rgba(255,255,255,.07)}
body.collapsed .nav-item{justify-content:center; padding:0}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:6px}
.scrim{position:fixed; inset:0; z-index:15; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .4s}

.content{flex:1; min-width:0; margin-left:var(--side-w); position:relative; z-index:2; padding:30px 30px 0; display:flex; flex-direction:column; transition:margin .5s cubic-bezier(.2,.8,.2,1)}
.content > footer{margin-top:auto}
.page-head{margin-bottom:22px}
.page-head h1{margin:0 0 6px; font-weight:300; font-size:26px; letter-spacing:.02em}
.sub{margin:0; color:var(--mute); font-size:13px}

.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px}
.tile{display:flex; flex-direction:column; gap:14px; padding:24px; border-radius:30px 30px 30px 30px / 26px 26px 34px 34px; border:1px solid var(--line); background:linear-gradient(160deg,rgba(24,24,24,.6),rgba(6,6,6,.6)); color:#fff; text-decoration:none; font-size:15px; transition:all .35s}
.tile svg{width:28px; height:28px}
.tile:hover{transform:translateY(-4px); border-color:#fff; box-shadow:0 18px 40px -20px var(--glow)}

.btn.sm{width:auto; height:44px; padding:0 24px; font-size:13px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px}
.filters{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px}
.input{height:44px; padding:0 20px; border-radius:22px; border:1px solid var(--line); background:var(--fill); color:var(--ink); font:inherit; font-size:13px; outline:none; transition:all .3s; min-width:0}
.input:focus{border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.08)}
select.input option{background:#111}
.filters .grow{flex:1 1 220px}
.count{font-size:12px; color:var(--mute); margin-left:auto}
.table-wrap{overflow:auto; max-height:58vh; border:1px solid var(--line); border-radius:26px; background:rgba(8,8,8,.55); backdrop-filter:blur(10px)}
table{border-collapse:collapse; width:100%; font-size:12.5px; white-space:nowrap}
th,td{padding:12px 18px; text-align:left; border-bottom:1px solid rgba(255,255,255,.07)}
th{position:sticky; top:0; background:#0d0d0d; color:var(--mute); font-weight:400; font-size:11px; z-index:1}
tbody tr:hover td{background:rgba(255,255,255,.04)}
.empty{padding:40px; text-align:center; color:var(--mute); font-size:13px}
.more{margin:16px auto 0; display:block}

.profile{max-width:760px}
.profile-top{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px}
.profile-top .avatar{width:132px; height:132px; font-size:40px}
.profile-top h2{margin:6px 0 0; font-weight:300; font-size:22px}
.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.info div{padding:16px 22px; border:1px solid var(--line); border-radius:26px; background:var(--fill)}
.info small{display:block; color:var(--mute); font-size:11px; margin-bottom:6px}
.info span{font-size:14px; word-break:break-word}

.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:50; padding:12px 24px; border-radius:24px; border:1px solid var(--line); background:rgba(12,12,12,.92); font-size:13px; opacity:0; transition:all .4s; pointer-events:none}
.toast.show{opacity:1; transform:translate(-50%,0)}

@media (max-width:760px){
  .content{margin-left:76px; padding:20px 14px 0}
  body.app:not(.collapsed) .scrim{opacity:1; pointer-events:auto}
  .count{margin-left:0; width:100%}
}

/* ===== orders table: sort / reorder ===== */
[hidden]{display:none!important}
th.sortable{cursor:pointer; user-select:none}
th[draggable="true"]{cursor:grab}
th.dragover{box-shadow:inset 3px 0 0 #fff}
th .arr{margin-left:6px; color:#fff}
.colpanel{margin-bottom:16px; padding:16px; border:1px solid var(--line); border-radius:26px; background:rgba(8,8,8,.7); backdrop-filter:blur(10px); display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px}
.colpanel .hint{grid-column:1/-1; font-size:11.5px; color:var(--mute); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.col-item{display:flex; align-items:center; gap:8px; padding:6px 8px 6px 14px; border:1px solid var(--line); border-radius:20px; font-size:12.5px; background:var(--fill)}
.col-item span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.col-item input{accent-color:#fff}
.mini{width:28px; height:28px; flex:none; border-radius:50%; border:1px solid var(--line); background:none; color:#fff; cursor:pointer; font:inherit; font-size:12px; transition:all .25s}
.mini:hover{border-color:#fff}

/* ===== Google-Sheet style grid ===== */
.note{font-size:12px; color:var(--mute); margin:0 0 12px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.chips:empty{display:none}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 5px 4px 14px; border:1px solid var(--line); border-radius:16px; font-size:12px; background:var(--fill)}
.chip button{border:0; background:none; color:#fff; cursor:pointer; width:20px; height:20px; border-radius:50%; font-size:12px}
.chip button:hover{background:rgba(255,255,255,.15)}
.sheet-wrap{max-height:calc(100vh - 310px); min-height:320px; border-radius:20px}
.sheet{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font:12.5px/1.2 var(--font)}
.sheet th,.sheet td{height:28px; padding:0 10px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; border-right:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09)}
.sheet thead th{position:sticky; top:0; z-index:3; height:32px; background:#151515; color:#fff; font-weight:500; font-size:12px}
.sheet th[draggable="true"]{cursor:grab}
.sheet th.dragover{box-shadow:inset 3px 0 0 #fff}
.sheet .rn{position:sticky; left:0; z-index:2; min-width:46px; padding:0 6px; text-align:center; font-size:11px; color:var(--mute); background:#101010}
.sheet thead th.corner{left:0; z-index:5; background:#101010}
.sheet tbody tr:hover td{background:rgba(255,255,255,.05)}
.sheet tbody tr:hover td.rn,.sheet tbody tr:hover td.actcell{background:#1b1b1b}
.sheet .actcol,.sheet .actcell{position:sticky; right:0; z-index:2; background:#101010; border-left:1px solid var(--line); text-align:center}
.sheet thead th.actcol{z-index:5; background:#151515}
.fbtn{margin-left:8px; width:20px; height:20px; border:0; border-radius:6px; background:none; color:var(--mute); cursor:pointer; font-size:11px; vertical-align:middle}
.fbtn:hover{color:#fff; background:rgba(255,255,255,.1)}
.fbtn.on{color:#000; background:#fff}
.arr{margin-left:4px}
.act{height:22px; padding:0 12px; border-radius:11px; border:1px solid var(--line); background:var(--fill); color:#fff; font:inherit; font-size:11.5px; cursor:pointer; white-space:nowrap}
button.act:hover{border-color:#fff}
.act.done{background:#fff; color:#000; border-color:#fff}
span.act{display:inline-flex; align-items:center; cursor:default}
.dim{color:var(--mute)}
.pop,.menu{position:fixed; z-index:60; display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--line); border-radius:22px; background:rgba(10,10,10,.98); box-shadow:0 20px 50px -10px #000}
.pop{width:280px}
.menu{z-index:61; gap:4px; padding:8px; min-width:130px}
.pbtn{padding:7px 14px; border-radius:14px; border:1px solid var(--line); background:none; color:#fff; font:inherit; font-size:12px; cursor:pointer; text-align:left}
.pbtn:hover{border-color:#fff}
.pop-row{display:flex; gap:6px; flex-wrap:wrap}
.pop .input{height:36px; font-size:12px}
.pop-list{max-height:220px; overflow:auto; display:flex; flex-direction:column; gap:2px}
.pop-list label{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:10px; font-size:12.5px; cursor:pointer}
.pop-list label:hover{background:rgba(255,255,255,.07)}
.pop-list label span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pop-list input{accent-color:#fff}
.pop-list small{color:var(--mute)}
.pop-foot{display:flex; justify-content:flex-end; gap:8px}
dialog{background:rgba(12,12,12,.98); color:#fff; border:1px solid var(--line); border-radius:28px; padding:26px; max-width:360px; font-family:var(--font); font-weight:300}
dialog::backdrop{background:rgba(0,0,0,.65)}
dialog p{margin:0; font-size:14px; line-height:1.7}
.dlg-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:20px}

/* ===== columns panel with many columns ===== */
.colpanel{max-height:280px; overflow:auto}
.colpanel > .input{grid-column:1/-1}

/* تنبيه: التقرير اليومي لسه ما اتسلمش */
.nav-item.needs{position:relative}
.nav-item.needs::after{content:'';position:absolute;top:10px;right:12px;width:9px;height:9px;border-radius:50%;background:#ff9a4d;box-shadow:0 0 0 3px rgba(255,154,77,.25)}

/* رسالة النجاح + زرار الريفرش */
.okpop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);animation:okin .25s ease}
.okbox{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 44px;border-radius:30px;border:1px solid rgba(255,255,255,.25);background:rgba(20,20,22,.96);text-align:center;box-shadow:0 30px 80px -20px #000;animation:okpop .35s cubic-bezier(.2,1.3,.4,1)}
.okbox b{font-weight:400;font-size:18px}.okbox span{font-size:13px;opacity:.65}
.okbox svg{width:64px;height:64px;fill:none;stroke:#4cc38a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.okbox svg circle{stroke-dasharray:152;stroke-dashoffset:152;animation:okdraw .5s .05s forwards}
.okbox svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:okdraw .35s .45s forwards}
@keyframes okdraw{to{stroke-dashoffset:0}}@keyframes okin{from{opacity:0}}@keyframes okpop{from{transform:scale(.8);opacity:0}}
.nav-item.spin svg{animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}.tabs .btn.on{background:#fff;color:#000;border-color:#fff}

/* وقت النشاط + الإشعارات + حالة Busy */
.otime{margin:-6px 0 14px;text-align:center;font-size:11.5px;opacity:.6;letter-spacing:.04em}
.collapsed .otime{display:none}
.status[data-s="Busy"] .dot{background:#ff9a4d; color:#ff9a4d}
.nav-item{position:relative}
.bellN{position:absolute;top:8px;right:10px;min-width:17px;height:17px;line-height:17px;padding:0 4px;border-radius:9px;background:#ff9a4d;color:#000;font-size:10.5px;font-style:normal;text-align:center}


/* ================= Typography & alignment (everything centred) ================= */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{font-feature-settings:"lnum" 1,"tnum" 1; font-variant-numeric:lining-nums tabular-nums; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit; font-weight:inherit; line-height:1.3}
h1,h2,h3,h4{font-weight:300; line-height:1.3; text-wrap:balance; overflow-wrap:anywhere}
p,.sub,.note{text-wrap:balance; overflow-wrap:anywhere}
b,strong{font-weight:500}

/* buttons / pills: text dead-centre */
.btn,.act,.pbtn,.mini,.icon-btn,.pill,.chip,.badge{display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1}
.btn{width:100%}
.btn.sm{width:auto}
.input,.tbl-in,select.input{text-align:center; text-align-last:center}
textarea.input,textarea.tbl-in{text-align:start; text-align-last:auto}

/* page header: always centred, long titles wrap and stay centred */
body.app .page-head{display:flex; flex-direction:column; align-items:center; text-align:center; max-width:920px; width:100%; margin:0 auto 26px}
body.app .page-head h1{max-width:100%; font-size:clamp(22px,4.2vw,28px); text-wrap:balance}
body.app .page-head .sub{max-width:720px}
body.app .page-head .hd{justify-content:center; text-align:center}
body.app .page-head .back{margin:0 0 8px}
body.app .page-head .back a{text-decoration:none}

/* module cards: equal size, centred whatever the count */
body.app .tiles{display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; gap:18px; width:100%; max-width:1100px; margin:0 auto 24px}
body.app .tile{flex:0 0 210px; width:210px; min-height:150px; align-items:center; justify-content:center; text-align:center; padding:24px 16px; gap:14px}
body.app .tile span{display:block; max-width:100%; text-align:center; text-wrap:balance; line-height:1.35}
body.app .tile svg{flex:none; margin:0 auto}
@media (max-width:520px){body.app .tiles{gap:12px} body.app .tile{flex:0 0 calc(50% - 6px); width:calc(50% - 6px); min-height:132px; padding:18px 10px}}

/* toolbars, tabs, filters, stats, KPIs */
body.app .actions,body.app .filters,body.app .tabs,body.app .bar2,body.app .stats,body.app .tot3,body.app .eqbar,body.app .dlg-actions,body.app .pop-foot{justify-content:center; text-align:center}
body.app .count{margin-left:0}
body.app .stats>*{text-align:center}
body.app .stats b{margin-right:5px}
body.app .kpis{justify-items:stretch}
body.app .kpi{text-align:center}
body.app .kpi span,body.app .kpi b,body.app .kpi small{display:block; text-align:center}
body.app .cardx{text-align:center}
body.app .cardx h3{text-align:center}
body.app .cardx .grid2{text-align:start}
body.app .cardx p.note,body.app .note{text-align:center}
body.app .chk{justify-content:center; text-align:start}
body.app .empty{text-align:center}
body.app .more{margin-left:auto; margin-right:auto}

/* tables: headers and cells share one alignment */
body.app table th,body.app table td{text-align:center; vertical-align:middle}
body.app table th.num,body.app table td.num{text-align:right}
body.app table th.r,body.app table td.r{text-align:right}
body.app td.wrapc{text-align:center}
body.app .table-wrap{margin-left:auto; margin-right:auto}
body.app .table-wrap table{margin:0 auto}
body.app .sheet th,body.app .sheet td{text-align:center}
body.app tr.ind td:first-child,body.app tr.ind2 td:first-child{padding-left:18px}
body.app .nin{text-align:center}

/* dialogs */
dialog{text-align:center}
dialog h2,dialog h3{text-align:center}
dialog .ohead{position:relative; display:flex; justify-content:center; align-items:center; min-height:44px; padding:0 52px}
dialog .ohead h2{margin:0; text-align:center}
dialog .ohead .icon-btn{position:absolute; right:0; top:50%; transform:translateY(-50%)}
dialog p{text-align:center}
dialog label,dialog label.l,dialog .field label{text-align:start}
dialog .msg,dialog.big .msg{text-align:center}
dialog .dlg-actions{justify-content:center}
.msg{text-align:center}
.drop{text-align:center}
footer{text-align:center; justify-content:center}

/* profile, login */
.profile-top{align-items:center; text-align:center}
.info{text-align:center}
dialog.big .ohead{justify-content:center!important; padding:0 52px; margin-bottom:14px}
dialog.big .msg,dialog .msg{text-align:center!important}
/* wide wrappers must never shrink-to-fit inside the flex column */
body.app .table-wrap{width:100%; max-width:100%; margin-left:0; margin-right:0}

/* optional photo picker */
.pwid{display:flex; align-items:center; gap:18px; grid-column:1/-1; padding:6px 0 10px; justify-content:center; flex-wrap:wrap}
.pwid .avatar{width:84px; height:84px; flex:none}
.pwid .pside{display:flex; flex-direction:column; gap:8px; align-items:center}
.pwid .pbtns{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.pwid .btn.sm{height:38px; padding:0 18px; font-size:12px; cursor:pointer}
.pwid .phint{color:var(--mute); font-size:11px; text-align:center}
.th-av{width:28px; height:28px; border-radius:50%; overflow:hidden; display:inline-grid; place-items:center; vertical-align:middle; margin-right:10px; border:1px solid var(--line); background:var(--fill); font-size:10px; position:relative}
.th-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ===== Light / Dark theme (dark = default) ===== */
html[data-theme="light"]{filter:invert(1) hue-rotate(180deg); background:#fff}
html[data-theme="light"] img:not(.brand),html[data-theme="light"] video,html[data-theme="light"] canvas,html[data-theme="light"] iframe{filter:invert(1) hue-rotate(180deg)}
.theme-fab{position:fixed; right:18px; bottom:18px; z-index:50; height:34px; padding:0 14px; border-radius:17px; border:1px solid var(--line); background:rgba(0,0,0,.55); color:#cfcfcf; font:inherit; font-size:11px; cursor:pointer}
.theme-fab:hover{color:#fff; border-color:#fff}