/* ==========================================================================
   REMEA Admin — پنل مدیریت
   روی assets/css/remea.css سوار می‌شود و فقط لایه‌ی مدیریت را اضافه می‌کند.
   ========================================================================== */

:root{
  --side-w:262px;
  --adm-top:66px;
  --ok:#1B8A4B;   --ok-bg:#E4F4EA;
  --warn:#B4770F; --warn-bg:#FDF2E0;
  --info:#2A5FA8; --info-bg:#E6EFFB;
  --dang:#C23B3B; --dang-bg:#FBE9E9;
  --neutral:#6B7A72; --neutral-bg:#EEF1EF;
}
:root[data-theme="dark"]{
  --ok-bg:#123023; --warn-bg:#33280F; --info-bg:#12233C; --dang-bg:#341A1A; --neutral-bg:#1C2621;
  --ok:#7DD3A0; --warn:#E8C173; --info:#93BBF0; --dang:#F09A9A; --neutral:#9BAAA1;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ok-bg:#123023; --warn-bg:#33280F; --info-bg:#12233C; --dang-bg:#341A1A; --neutral-bg:#1C2621;
    --ok:#7DD3A0; --warn:#E8C173; --info:#93BBF0; --dang:#F09A9A; --neutral:#9BAAA1;
  }
}

body.adm-body{background:var(--surface-2); min-height:100svh}

/* ---------- LOGIN ---------- */
.login{min-height:100svh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden}
.login__card{
  position:relative; z-index:2; width:min(100%, 420px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(28px,4vw,42px); box-shadow:var(--sh-3);
}
.login__brand{display:flex; align-items:center; gap:.6rem; justify-content:center; margin-bottom:1.6em}
.login__brand .brand__mark{width:38px;height:38px;color:var(--forest)}
:root[data-theme="dark"] .login__brand .brand__mark{color:var(--accent)}
.login h1{font-size:1.35rem; font-weight:800; text-align:center; letter-spacing:-.02em}
.login p.sub{text-align:center; color:var(--text-dim); font-size:.88rem; margin-top:.5em; margin-bottom:2em}
.login .field + .field{margin-top:14px}
.roles{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px}
.role-pick{
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 12px; text-align:center;
  cursor:pointer; transition:all var(--t) var(--e-out); background:var(--bg);
}
.role-pick:hover{border-color:var(--forest-200)}
.role-pick.on{border-color:var(--forest); background:var(--accent-soft); box-shadow:0 0 0 1px var(--forest) inset}
.role-pick svg{margin-inline:auto; margin-bottom:8px; color:var(--accent)}
.role-pick b{display:block; font-size:.9rem; font-weight:700}
.role-pick span{font-size:.72rem; color:var(--text-dim)}
.hint{
  margin-top:18px; padding:12px 14px; border-radius:var(--r-md); background:var(--warn-bg);
  color:var(--warn); font-size:.78rem; line-height:1.9;
}
.hint code{font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; direction:ltr; display:inline-block}

/* ---------- SHELL ---------- */
.adm{display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100svh}

.adm__side{
  background:var(--forest-900); color:#CBD9D0; display:flex; flex-direction:column;
  position:sticky; top:0; height:100svh; overflow-y:auto; z-index:20;
}
.adm__logo{display:flex; align-items:center; gap:.6rem; padding:20px 22px 16px}
.adm__logo .brand__mark{width:30px;height:30px;color:#7FCFA0}
.adm__logo .brand__type{font-size:1.24rem; color:#fff}
.adm__role{
  margin:0 22px 18px; padding:9px 12px; border-radius:var(--r-md); font-size:.74rem; font-weight:700;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:.5em;
}
.adm__role i{width:7px;height:7px;border-radius:50%; background:#7FCFA0; flex:none}
.adm__role.sales i{background:#F0A177}
.adm__nav{padding:0 12px 20px; display:flex; flex-direction:column; gap:2px}
.adm__navh{font-size:.68rem; letter-spacing:.14em; color:#6E8579; padding:16px 12px 8px; font-weight:700}
.adm__a{
  display:flex; align-items:center; gap:.7em; padding:.72em .85em; border-radius:var(--r-md);
  font-size:.89rem; font-weight:600; color:#B4C6BB; transition:all var(--t); text-align:start; width:100%;
}
.adm__a:hover{background:rgba(255,255,255,.07); color:#fff}
.adm__a.on{background:var(--forest); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.adm__a svg{flex:none; opacity:.85}
.adm__a .cnt{margin-inline-start:auto; font-size:.7rem; background:rgba(255,255,255,.13); padding:.1em .55em; border-radius:99px}
.adm__foot{margin-top:auto; padding:16px 22px 22px; border-top:1px solid rgba(255,255,255,.08)}
.adm__foot a{font-size:.78rem; color:#8FA396; display:block; margin-bottom:.7em}
.adm__foot a:hover{color:#fff}

.adm__main{min-width:0; display:flex; flex-direction:column}
.adm__top{
  position:sticky; top:0; z-index:15; height:var(--adm-top);
  background:color-mix(in srgb, var(--surface-2) 86%, transparent);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 clamp(16px,2.4vw,30px);
}
.adm__title{font-size:1.06rem; font-weight:800; letter-spacing:-.02em}
.adm__title small{display:block; font-size:.74rem; font-weight:500; color:var(--text-dim); letter-spacing:0}
.adm__tools{margin-inline-start:auto; display:flex; align-items:center; gap:8px}
.adm__user{display:flex; align-items:center; gap:.55em; padding:.4em .5em .4em .9em; border-radius:99px;
  border:1px solid var(--line); background:var(--surface); font-size:.82rem; font-weight:600}
.adm__av{width:30px;height:30px;border-radius:50%; background:linear-gradient(135deg,var(--rose),var(--forest));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:.8rem; flex:none}
.adm__page{padding:clamp(16px,2.4vw,30px); flex:1}
.burger-adm{display:none}

/* ---------- CARDS / KPI ---------- */
.kgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px}
.kcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; position:relative; overflow:hidden}
.kcard__l{font-size:.76rem; color:var(--text-dim); display:flex; align-items:center; gap:.5em}
.kcard__v{font-size:1.75rem; font-weight:800; letter-spacing:-.03em; line-height:1.35; margin-top:.15em}
.kcard__d{font-size:.74rem; font-weight:700}
.kcard__d.up{color:var(--ok)} .kcard__d.dn{color:var(--dang)}
.kcard__ic{position:absolute; inset-block-start:16px; inset-inline-start:16px; width:36px;height:36px;
  border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent)}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.panel + .panel{margin-top:16px}
.panel__h{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.panel__h h3{font-size:.98rem; font-weight:800; letter-spacing:-.02em}
.panel__h .sp{margin-inline-start:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.panel__b{padding:18px 20px}
.panel__b--flush{padding:0}
.two{display:grid; grid-template-columns:1.6fr 1fr; gap:16px; align-items:start}

/* ---------- TABLE ---------- */
.dtable-wrap{overflow-x:auto}
.dtable{width:100%; border-collapse:collapse; font-size:.85rem; min-width:640px}
.dtable th{
  position:sticky; top:0; z-index:2; text-align:start; font-size:.73rem; font-weight:700; color:var(--text-dim);
  background:var(--surface-2); padding:.85em 1em; white-space:nowrap; border-bottom:1px solid var(--line);
}
.dtable td{padding:.85em 1em; border-bottom:1px solid var(--line); vertical-align:middle}
.dtable tbody tr{transition:background var(--t)}
.dtable tbody tr:hover{background:var(--accent-soft)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable .num{font-variant-numeric:tabular-nums; white-space:nowrap}
.dtable .thumb{width:44px;height:44px;border-radius:11px; overflow:hidden; flex:none}
.dtable .thumb .pmedia{--ar:1/1}
.dtable .thumb .pmedia__name{display:none}
.dtable .thumb .pmedia__jar{width:50%}
.cellp{display:flex; align-items:center; gap:.7em; min-width:0}
.cellp b{font-weight:700; font-size:.86rem; display:block; line-height:1.5}
.cellp span{font-size:.73rem; color:var(--text-dim); display:block; line-height:1.5}
.rowacts{display:flex; gap:4px; justify-content:flex-end}
.iact{width:32px;height:32px;border-radius:9px; display:grid; place-items:center; color:var(--text-dim);
  border:1px solid transparent; transition:all var(--t)}
.iact:hover{background:var(--surface-2); color:var(--text); border-color:var(--line)}
.iact.dang:hover{background:var(--dang-bg); color:var(--dang); border-color:transparent}

/* ---------- STATUS ---------- */
.st{display:inline-flex; align-items:center; gap:.4em; padding:.3em .75em; border-radius:99px;
  font-size:.72rem; font-weight:700; white-space:nowrap}
.st::before{content:''; width:6px;height:6px;border-radius:50%; background:currentColor}
.st-pending  {background:var(--warn-bg);    color:var(--warn)}
.st-paid     {background:var(--ok-bg);      color:var(--ok)}
.st-packing  {background:var(--info-bg);    color:var(--info)}
.st-shipped  {background:#EDE7FA;           color:#5B3FA8}
.st-delivered{background:var(--ok-bg);      color:var(--ok)}
.st-canceled {background:var(--dang-bg);    color:var(--dang)}
.st-returned {background:var(--neutral-bg); color:var(--neutral)}
:root[data-theme="dark"] .st-shipped{background:#241C3D; color:#B9A6EE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st-shipped{background:#241C3D;color:#B9A6EE}}

/* ---------- KANBAN ---------- */
.kan{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(258px,1fr); gap:12px; overflow-x:auto; padding-bottom:8px}
.kcol{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); display:flex; flex-direction:column; min-height:220px}
.kcol__h{padding:12px 14px; display:flex; align-items:center; gap:.5em; border-bottom:1px solid var(--line)}
.kcol__h b{font-size:.83rem; font-weight:800}
.kcol__h .n{margin-inline-start:auto; font-size:.72rem; color:var(--text-dim); background:var(--surface);
  border:1px solid var(--line); padding:.1em .55em; border-radius:99px}
.kcol__b{padding:10px; display:flex; flex-direction:column; gap:8px; flex:1; overflow-y:auto; max-height:64vh}
.ocard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 13px;
  cursor:grab; transition:all var(--t) var(--e-out)}
.ocard:hover{box-shadow:var(--sh-2); transform:translateY(-2px); border-color:transparent}
.ocard.drag{opacity:.45}
.ocard__t{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:.5em}
.ocard__c{font-weight:800; font-size:.82rem; direction:ltr}
.ocard__n{font-size:.8rem; color:var(--text-dim)}
.ocard__f{display:flex; justify-content:space-between; align-items:center; margin-top:.7em; gap:8px}
.ocard__a{font-weight:800; font-size:.85rem}
.kcol.over{outline:2px dashed var(--accent); outline-offset:-4px}

/* ---------- FORM / MODAL ---------- */
.modal-scrim{position:fixed; inset:0; background:rgba(10,20,14,.55); backdrop-filter:blur(3px); z-index:200;
  opacity:0; visibility:hidden; transition:all var(--t)}
.modal-scrim.on{opacity:1; visibility:visible}
.modal{
  position:fixed; z-index:210; inset-block:0; inset-inline-end:0; width:min(100%, 620px);
  background:var(--bg); box-shadow:var(--sh-3); display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .45s var(--e-out); visibility:hidden;
}
.modal.on{transform:none; visibility:visible}
.modal--wide{width:min(100%, 860px)}
.modal__h{display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line)}
.modal__h h3{font-size:1rem; font-weight:800}
.modal__b{flex:1; overflow-y:auto; padding:20px 22px}
.modal__f{border-top:1px solid var(--line); padding:16px 22px; background:var(--surface); display:flex; gap:10px}
.fgrid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.fgrid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.field small{font-size:.72rem; color:var(--text-dim); line-height:1.7}
.field textarea{resize:vertical; min-height:80px; font-family:inherit}
.tone-row{display:flex; align-items:center; gap:10px}
.tone-row input[type=color]{width:46px;height:42px;padding:2px; border-radius:12px; border:1px solid var(--line); background:var(--bg); cursor:pointer}
.taglist{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.taglist .tg{display:inline-flex; align-items:center; gap:.4em; padding:.35em .7em; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--line); font-size:.78rem}
.taglist .tg button{color:var(--text-dim); display:grid; place-items:center}
.taglist .tg button:hover{color:var(--dang)}

.switch{display:flex; align-items:center; gap:.7em; cursor:pointer; padding:.5em 0}
.switch input{position:absolute; opacity:0; width:0;height:0}
.switch i{width:42px;height:24px;border-radius:99px; background:var(--line); position:relative; transition:background var(--t); flex:none}
.switch i::after{content:''; position:absolute; inset-block-start:3px; inset-inline-start:3px; width:18px;height:18px;
  border-radius:50%; background:#fff; transition:transform var(--t) var(--e-back); box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + i{background:var(--forest)}
.switch input:checked + i::after{transform:translateX(-18px)}
:root[data-theme="dark"] .switch input:checked + i{background:var(--accent)}
.switch span{font-size:.88rem; font-weight:600}
.switch small{display:block; font-size:.74rem; color:var(--text-dim); font-weight:400}

.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:3px; gap:2px}
.seg button{padding:.45em 1em; border-radius:99px; font-size:.8rem; font-weight:700; color:var(--text-dim); transition:all var(--t)}
.seg button.on{background:var(--surface); color:var(--text); box-shadow:var(--sh-1)}

.searchbox{position:relative; min-width:180px}
.searchbox input{width:100%; padding:.6em 2.4em .6em 1em; border-radius:99px; border:1px solid var(--line);
  background:var(--surface); font-size:.85rem}
.searchbox input:focus{outline:none; border-color:var(--accent)}
.searchbox svg{position:absolute; inset-block-start:50%; inset-inline-end:.85em; transform:translateY(-50%); color:var(--text-dim); pointer-events:none}

.emptyst{text-align:center; padding:56px 20px; color:var(--text-dim)}
.emptyst svg{margin-inline:auto; margin-bottom:14px; color:var(--line)}

/* ---------- ORDER DETAIL ---------- */
.timeline{position:relative; padding-inline-start:22px}
.timeline::before{content:''; position:absolute; inset-block:6px 6px; inset-inline-start:5px; width:2px; background:var(--line)}
.tl{position:relative; padding-block:.55em}
.tl::before{content:''; position:absolute; inset-inline-start:-21px; inset-block-start:1.05em; width:12px;height:12px;
  border-radius:50%; background:var(--surface); border:2px solid var(--forest)}
.tl.done::before{background:var(--forest)}
.tl b{font-size:.85rem; font-weight:700; display:block}
.tl span{font-size:.74rem; color:var(--text-dim)}
.oline{display:flex; align-items:center; gap:.8em; padding:.7em 0; border-bottom:1px solid var(--line)}
.oline:last-child{border-bottom:0}
.oline .thumb{width:42px;height:42px;border-radius:10px;overflow:hidden;flex:none}
.oline .thumb .pmedia{--ar:1/1}
.oline .thumb .pmedia__name{display:none}
.oline .thumb .pmedia__jar{width:50%}

/* ---------- CHART ---------- */
.chart{width:100%; height:190px; display:block}
.chart .bar{fill:var(--forest); opacity:.85; transition:opacity var(--t)}
.chart .bar:hover{opacity:1}
:root[data-theme="dark"] .chart .bar{fill:var(--accent)}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .lbl{fill:var(--text-dim); font-size:10px; font-family:var(--fa)}

/* ---------- INVOICE ---------- */
.inv{background:#fff; color:#171412; padding:34px 38px; border-radius:var(--r-lg); border:1px solid var(--line)}
.inv__h{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:20px;
  border-bottom:2px solid #12301F; margin-bottom:22px}
.inv__brand{display:flex; align-items:center; gap:.6rem}
.inv__brand .brand__mark{width:38px;height:38px;color:#12301F}
.inv__brand .brand__type{font-size:1.5rem; color:#12301F}
.inv__meta{text-align:end; font-size:.8rem; line-height:2}
.inv__meta b{font-size:1rem}
.inv__to{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:22px; font-size:.85rem; line-height:2}
.inv__to h4{font-size:.74rem; letter-spacing:.1em; color:#7A6F66; margin-bottom:.5em; font-weight:700}
.inv table{width:100%; border-collapse:collapse; font-size:.85rem}
.inv th{background:#F4EBE1; padding:.75em 1em; text-align:start; font-size:.76rem; font-weight:700}
.inv td{padding:.75em 1em; border-bottom:1px solid #EFE7DC}
.inv__sum{margin-inline-start:auto; width:min(100%,300px); margin-top:18px; font-size:.87rem}
.inv__sum div{display:flex; justify-content:space-between; padding:.4em 0}
.inv__sum .big{border-top:2px solid #12301F; margin-top:.5em; padding-top:.7em; font-weight:800; font-size:1rem}
.inv__note{margin-top:26px; padding-top:16px; border-top:1px dashed #DED4C7; font-size:.76rem; color:#7A6F66; line-height:2}

@media print{
  body.adm-body{background:#fff}
  .adm__side,.adm__top,.modal__h,.modal__f,.no-print{display:none !important}
  .modal{position:static; width:auto; transform:none; visibility:visible; box-shadow:none}
  .modal__b{padding:0; overflow:visible}
  .inv{border:0; border-radius:0; padding:0}
  @page{margin:14mm}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .two{grid-template-columns:1fr}
  .fgrid3{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .adm{grid-template-columns:1fr}
  .adm__side{position:fixed; inset-block:0; inset-inline-end:0; width:280px; transform:translateX(102%);
    transition:transform .4s var(--e-out); box-shadow:var(--sh-3)}
  .adm__side.open{transform:none}
  .burger-adm{display:grid}
  .fgrid2,.fgrid3{grid-template-columns:1fr}
  .adm__title small{display:none}
}


/* ---------- IMAGE PICKER ---------- */
.imgpick{display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:start}
.imgpick__prev{border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line)}
.imgpick__prev .pmedia__name{display:none}
.imgpick__prev .pmedia__jar{width:48%}
.imgpick__ctl input[type=file]{padding:.45em .6em; border:1px dashed var(--line); border-radius:12px; background:var(--bg)}
.imgpick__ctl small{display:block; margin-top:8px}
@media (max-width:560px){ .imgpick{grid-template-columns:1fr} }

/* درگاه پرداخت */
.gw{display:inline-flex; align-items:center; gap:.45em; font-size:.76rem; white-space:nowrap}
.gw i{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none}
.ocard__g{margin-top:.45em}

/* ---------- MOBILE (گوشی) ---------- */
.adm__scrim{display:none; position:fixed; inset:0; background:rgba(10,20,14,.45); z-index:19}
.login__st{text-align:center; color:var(--text-dim); margin:-1.2em 0 1.4em}
@media (max-width:900px){
  .adm__side.open + .adm__scrim{display:block}
  .adm__page{padding:14px 12px 40px}
  .adm__top{padding:0 12px; gap:10px; height:60px}
  .adm__user > span:first-child{display:none}
  .adm__user{padding:.3em}
  .panel__h{padding:12px 14px}
  .panel__b{padding:14px}
  .kgrid{grid-template-columns:1fr 1fr; gap:10px}
  .kcard{padding:14px 16px} .kcard__v{font-size:1.35rem} .kcard__ic{display:none}
  .kan{grid-auto-columns:minmax(min(82vw,300px),1fr)}
  .kcol__b{max-height:56vh}
  .seg button{padding:.4em .8em}
  .searchbox{min-width:0; flex:1 1 160px}
  .panel__h .sp{width:100%; margin-inline-start:0}
  .panel__h .sp .select{flex:1 1 120px}
  .modal{width:100%} .modal--wide{width:100%}
  .modal__b{padding:16px 14px} .modal__h,.modal__f{padding:14px}
  .modal__f{flex-wrap:wrap} .modal__f .btn{flex:1 1 auto}
  .dtable{font-size:.8rem} .dtable th,.dtable td{padding:.7em .7em}
  .inv{padding:20px 16px} .inv__to{grid-template-columns:1fr}
  .login__card{padding:24px 20px}
  .roles{gap:8px}
}
@media (max-width:480px){
  .kgrid{grid-template-columns:1fr 1fr}
  .adm__title{font-size:.95rem}
  .wrapflex .btn{flex:1 1 auto}
}