/* Motaleb Fashion — Merchant Dashboard layout
   Extends the site's design tokens (styles.css) with admin UI primitives. */

body.dash{
  display:flex;
  min-height:100vh;
}

/* ---------------- sidebar ---------------- */
.sidebar{
  width:220px;
  flex-shrink:0;
  background:var(--ink-soft);
  border-right:1px solid var(--line);
  padding:24px 18px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
}
.sidebar__logo{
  font-family:var(--display);
  font-size:20px;
  margin-bottom:6px;
  display:flex;align-items:center;gap:8px;
}
.sidebar__logo img{height:26px;width:26px;border-radius:6px;}
.sidebar__logo em{font-style:normal;color:var(--flame);}
.sidebar__tag{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--marigold);margin-bottom:30px;
}
.sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.sidebar nav a{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:6px;
  font-size:13.5px;font-weight:600;opacity:0.75;
}
.sidebar nav a:hover{opacity:1;background:rgba(245,241,232,0.05);}
.sidebar nav a[aria-current="page"]{opacity:1;background:var(--flame);color:var(--ink);}
.sidebar__foot{border-top:1px solid var(--line);padding-top:16px;margin-top:16px;}
.sidebar__user{font-size:12.5px;font-weight:700;margin-bottom:2px;}
.sidebar__role{font-family:var(--mono);font-size:10.5px;opacity:0.5;text-transform:uppercase;margin-bottom:12px;}

/* ---------------- main content ---------------- */
.dash-main{flex:1;padding:32px 40px;max-width:1280px;}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;flex-wrap:wrap;gap:14px;}
.dash-head h1{font-size:clamp(24px,3vw,32px);}
.dash-head p{opacity:0.6;font-size:13.5px;margin-top:4px;}

/* ---------------- stat cards ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px;}
@media (max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{
  background:var(--paper);color:var(--ink);border-radius:10px;padding:18px 20px;
  border:1.5px dashed var(--ink-line-strong);
}
.stat-card .label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;opacity:0.6;margin-bottom:8px;}
.stat-card .value{font-family:var(--display);font-size:26px;}
.stat-card .value.flame{color:var(--flame);}

/* ---------------- panel / table ---------------- */
.panel{
  background:var(--ink-soft);border:1px solid var(--line);border-radius:10px;
  padding:22px;margin-bottom:28px;
}
.panel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px;}
.panel__head h2{font-size:18px;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{
  text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.05em;
  opacity:0.55;padding:10px 12px;border-bottom:1px solid var(--line-strong);white-space:nowrap;
}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.table-thumb{width:42px;height:50px;border-radius:5px;object-fit:cover;background:var(--paper-dim);}
.table-name{font-weight:700;}
.table-sub{font-family:var(--mono);font-size:11px;opacity:0.55;}

.status-badge{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.05em;
  padding:4px 10px;border-radius:999px;display:inline-block;
}
.status-pending{background:rgba(255,197,61,0.15);color:var(--marigold);}
.status-confirmed,.status-processing,.status-packed,.status-shipped{background:rgba(61,90,153,0.2);color:#7fa0e0;}
.status-delivered{background:rgba(125,220,140,0.15);color:#7ddc8c;}
.status-cancelled{background:rgba(255,77,46,0.15);color:var(--flame);}

.status-select{
  background:var(--ink);color:var(--paper);border:1px solid var(--line-strong);
  border-radius:5px;padding:6px 8px;font-family:var(--mono);font-size:11.5px;
}

.icon-btn{
  background:transparent;border:1px solid var(--line-strong);border-radius:5px;
  padding:6px 9px;font-size:12px;color:var(--paper);opacity:0.8;
}
.icon-btn:hover{opacity:1;border-color:var(--marigold);}
.icon-btn.danger:hover{border-color:var(--flame);color:var(--flame);}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}

.dot-inactive{opacity:0.4;}
.empty-row td{text-align:center;opacity:0.5;padding:36px 12px;}

/* ---------------- modal ---------------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);
  display:none;align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow-y:auto;z-index:100;
}
.modal-overlay.is-open{display:flex;}
.modal{
  background:var(--ink);border:1px solid var(--line-strong);border-radius:12px;
  padding:28px;width:100%;max-width:620px;
}
.modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.modal__head h3{font-size:20px;}
.modal__close{background:none;border:none;color:var(--paper);font-size:20px;opacity:0.6;}
.modal__close:hover{opacity:1;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid .span-2{grid-column:1/-1;}
@media (max-width:560px){.form-grid{grid-template-columns:1fr;}}

.variant-row{display:flex;gap:8px;margin-bottom:8px;align-items:center;}
.variant-row input{flex:1;}
.variant-row .icon-btn{flex-shrink:0;}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;bottom:24px;right:24px;z-index:200;
  background:var(--paper);color:var(--ink);border-radius:8px;padding:14px 18px;
  font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,0.35);
  display:none;max-width:320px;
}
.toast.is-error{background:var(--flame);color:var(--ink);}
.toast.is-open{display:block;}

/* ---------------- login page ---------------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
}
.login-card{
  width:100%;max-width:380px;background:var(--paper);color:var(--ink);
  border-radius:12px;padding:36px 32px;border:1.5px dashed var(--ink-line-strong);
  position:relative;
}
.login-card .tag__string{top:-13px;left:26px;}
.login-card .login-logo{height:44px;width:44px;border-radius:10px;margin-bottom:6px;}
.login-card h1{font-size:24px;margin:16px 0 6px;display:flex;align-items:center;gap:10px;}
.login-card p.muted{color:var(--ink);opacity:0.6;font-size:13px;margin-bottom:24px;}
.login-field{margin-bottom:16px;}
.login-field label{
  display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;
  opacity:0.6;margin-bottom:6px;
}
.login-field input{
  width:100%;border:1px solid var(--ink-line-strong);border-radius:6px;padding:11px 13px;
  font-family:var(--body);font-size:14px;background:#fff;color:var(--ink);
}
.login-error{color:var(--flame);font-size:12.5px;margin-top:-6px;margin-bottom:14px;min-height:16px;}
.login-hint{
  margin-top:20px;padding:12px 14px;background:var(--paper-dim);border-radius:6px;
  font-family:var(--mono);font-size:11px;line-height:1.6;opacity:0.75;
}