/* ============================================================
   MOGU CRM - UI V5 PRO
   Global visual system only. No business logic changes.
   Loaded after module-local styles so all modules look consistent.
   ============================================================ */

:root{
  --m-bg:#f3f6fb;
  --m-surface:#fff;
  --m-surface-2:#f8fafc;
  --m-surface-3:#eef4fb;
  --m-border:#dbe4ef;
  --m-border-strong:#c9d5e5;
  --m-text:#13213a;
  --m-text-2:#344054;
  --m-muted:#667085;
  --m-muted-2:#98a2b3;
  --m-primary:#2563eb;
  --m-primary-2:#1d4ed8;
  --m-primary-soft:#eaf2ff;
  --m-success:#059669;
  --m-success-soft:#ecfdf3;
  --m-warning:#d97706;
  --m-warning-soft:#fffaeb;
  --m-danger:#dc2626;
  --m-danger-soft:#fef3f2;
  --m-purple:#7c3aed;
  --m-purple-soft:#f4f0ff;
  --m-shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --m-shadow-sm:0 5px 16px rgba(31,55,90,.07);
  --m-shadow-md:0 18px 48px rgba(15,23,42,.14);
  --m-radius:12px;
  --m-radius-sm:9px;
  --m-control-h:40px;
}

*{box-sizing:border-box}
html{background:var(--m-bg)}
body{
  margin:0!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  color:var(--m-text)!important;
  background:
    radial-gradient(circle at 0 0,rgba(37,99,235,.07),transparent 360px),
    radial-gradient(circle at 100% 0,rgba(14,165,233,.05),transparent 420px),
    var(--m-bg)!important;
  font-size:14px;
}

/* -------- Page layout -------- */
body>main,
body>.page,
.products-page,
.page{
  width:min(100%,1680px)!important;
  max-width:1680px!important;
  margin:0 auto!important;
  padding:20px 22px 34px!important;
}

h1{
  margin:0 0 16px!important;
  color:#10213f!important;
  font-size:25px!important;
  font-weight:800!important;
  letter-spacing:-.025em;
}
h2{color:#172b4d!important;font-weight:800!important}
h3{color:#253858!important;font-weight:750!important}
p,.sub,.muted{color:var(--m-muted)!important}

/* -------- Page header -------- */
.page-header,.header,.page-head,.admin-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:14px!important;
  margin-bottom:16px!important;
}
.page-header h1,.header h1,.page-head h1{margin-bottom:0!important}
.header-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}

/* -------- Buttons -------- */
button,.btn,.button{
  min-height:36px!important;
  border-radius:8px!important;
  border:1px solid var(--m-border-strong)!important;
  padding:7px 12px!important;
  font-family:inherit!important;
  font-weight:700!important;
  line-height:1.2!important;
  cursor:pointer;
  box-shadow:var(--m-shadow-xs);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease!important;
}
button:hover,.btn:hover,.button:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(15,23,42,.10)}
button:active,.btn:active,.button:active{transform:none}
.primary,.btn-primary,.button.primary,button.primary{
  background:linear-gradient(135deg,#2f6df6,#2457d6)!important;
  border-color:#2457d6!important;color:#fff!important;
}
.secondary,.btn-secondary,.button.secondary,button.secondary,.gray{
  background:#f4f7fb!important;border-color:#d8e1ec!important;color:#27364d!important;
}
.success,.btn-success,.button.success,button.success{
  background:linear-gradient(135deg,#10b981,#059669)!important;border-color:#059669!important;color:#fff!important;
}
.warning,.btn-warning,.button.warning,button.warning{
  background:linear-gradient(135deg,#f59e0b,#d97706)!important;border-color:#d97706!important;color:#fff!important;
}
.danger,.btn-danger,.button.danger,button.danger{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;border-color:#dc2626!important;color:#fff!important;
}

/* -------- Controls -------- */
input,select,textarea{
  min-height:var(--m-control-h)!important;
  border:1px solid #cbd7e5!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--m-text)!important;
  font-family:inherit!important;
  font-size:14px!important;
  padding:8px 11px!important;
  box-shadow:inset 0 1px 0 rgba(16,24,40,.01)!important;
  transition:border-color .15s,box-shadow .15s!important;
}
textarea{min-height:72px!important;line-height:1.45!important}
input:focus,select:focus,textarea:focus{
  outline:none!important;
  border-color:#6ea0ff!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)!important;
}
input::placeholder,textarea::placeholder{color:#98a2b3!important}
label,.field>span,.field>label{color:#344054!important;font-weight:700!important;font-size:13px!important}

/* -------- Toolbars -------- */
.toolbar,.filters,.filter-bar,.list-toolbar{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  flex-wrap:wrap!important;
  margin-bottom:12px!important;
  padding:10px!important;
  background:rgba(255,255,255,.76)!important;
  border:1px solid var(--m-border)!important;
  border-radius:11px!important;
  box-shadow:var(--m-shadow-xs);
}
.toolbar input[type="search"],.toolbar input:not([type]),.search{min-width:260px}

/* -------- KPI / summaries -------- */
.summary-grid,.stats,.account-summary{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  gap:10px!important;
  margin-bottom:12px!important;
}
.summary-card,.stat-card,.summary-item,.summary>div{
  background:linear-gradient(145deg,#fff,#f8fbff)!important;
  border:1px solid var(--m-border)!important;
  border-radius:11px!important;
  padding:13px 14px!important;
  box-shadow:var(--m-shadow-xs)!important;
  min-height:72px!important;
}
.summary-card span,.summary-label,.summary-item small,.summary>div small{
  display:block!important;color:var(--m-muted)!important;font-size:12px!important;margin-bottom:6px!important;
}
.summary-card strong,.summary-value,.summary-item strong,.summary>div strong{
  display:block!important;color:#101828!important;font-size:20px!important;font-weight:800!important;line-height:1.1!important;
}

/* -------- Cards / panels -------- */
.card,.panel,.table-card,.section-card,.form-section,.modal-box,.modal,.excel-box{
  border-color:var(--m-border)!important;
}
.card,.panel,.table-card,.section-card{
  background:#fff!important;
  border:1px solid var(--m-border)!important;
  border-radius:12px!important;
  box-shadow:var(--m-shadow-xs)!important;
}
.panel,.section-card{padding:16px!important}
.card-head,.panel-title{
  padding:14px 16px!important;
  border-bottom:1px solid #e8eef5!important;
  background:linear-gradient(180deg,#fff,#fbfdff)!important;
}
.card-body{padding:15px 16px!important}

/* -------- Tables -------- */
.table-wrap,.table-scroll,.table-card{
  overflow:auto!important;
}
.table-wrap,.table-scroll{
  border:1px solid var(--m-border)!important;
  border-radius:10px!important;
  background:#fff!important;
}
table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  background:#fff!important;
  font-size:13px!important;
}
thead th,table th{
  background:linear-gradient(180deg,#f6f9fd,#edf3f9)!important;
  color:#42526a!important;
  font-size:12px!important;
  font-weight:800!important;
  text-transform:none!important;
  letter-spacing:0!important;
  padding:10px 11px!important;
  border-bottom:1px solid #d8e3ef!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}
tbody td,table td{
  padding:10px 11px!important;
  border-bottom:1px solid #edf1f5!important;
  vertical-align:middle!important;
  color:#25364d!important;
}
tbody tr:nth-child(even) td{background:#fbfcfe!important}
tbody tr:hover td{background:#f1f6ff!important}
tbody tr:last-child td{border-bottom:0!important}
.number,.num,.right{text-align:right!important;font-variant-numeric:tabular-nums}
.actions,.actions-column{white-space:nowrap}

/* -------- Tabs -------- */
.tabs,.tab-list{display:flex!important;gap:6px!important;flex-wrap:wrap!important;margin-bottom:12px!important}
.tab,.tab-btn,.tabs button{
  background:#fff!important;border:1px solid var(--m-border)!important;color:#475467!important;border-radius:8px!important;
}
.tab.active,.tab-btn.active,.tabs button.active{
  background:#172b4d!important;border-color:#172b4d!important;color:#fff!important;
}

/* -------- Badges -------- */
.badge,.role-pill,.state-pill,[class*="status-"]{
  border-radius:999px!important;font-weight:800!important;
}
.badge{padding:4px 8px!important;font-size:11px!important}
.badge.ACTIVE,.status-active,.state-pill.active{background:var(--m-success-soft)!important;color:#067647!important}
.badge.PARTIAL{background:var(--m-warning-soft)!important;color:#b54708!important}
.badge.CLOSED,.badge.DRAFT{background:#f2f4f7!important;color:#475467!important}
.badge.online,.badge.shopee{background:var(--m-primary-soft)!important;color:var(--m-primary-2)!important}

/* -------- Modals -------- */
.modal-backdrop,.modal{
  backdrop-filter:blur(2px);
}
.modal-backdrop,.modal.show{
  background:rgba(15,23,42,.48)!important;
}
.modal-box,
.modal.large,
.modal.medium,
.modal.small,
.modal-backdrop>.modal{
  border-radius:14px!important;
  box-shadow:var(--m-shadow-md)!important;
  border:1px solid rgba(203,213,225,.75)!important;
}
.modal-header,.modal-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding-bottom:12px!important;
  margin-bottom:14px!important;
  border-bottom:1px solid #e8eef5!important;
}
.modal-header h2,.modal-head h2{margin:0!important;font-size:20px!important}
.modal-body{padding-top:0!important}
.modal-footer,.modal-foot{
  border-top:1px solid #e8eef5!important;
  padding-top:12px!important;
  margin-top:14px!important;
}

/* -------- Forms / grids -------- */
.form-grid,.grid-4,.create-box{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:11px!important;
  align-items:start!important;
}
.field{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
}
.field label,.field>span{
  min-height:18px!important;
  display:flex!important;
  align-items:flex-end!important;
  margin:0!important;
}
.form-actions,.modal-foot,.modal-footer{
  display:flex!important;gap:8px!important;justify-content:flex-end!important;align-items:center!important;flex-wrap:wrap!important;
}

/* -------- Consignment-specific alignment -------- */
#createModal .modal-box{width:min(1180px,calc(100vw - 48px))!important;padding:18px 20px!important}
#createModal .grid-4{grid-template-columns:1.35fr 1fr 1fr .78fr!important;align-items:end!important}
#createModal .field label{height:18px!important;min-height:18px!important;margin-bottom:0!important}
#createModal .grid-4 select,#createModal .grid-4 input{height:42px!important}
#createModal .item-add{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 130px 118px!important;
  gap:10px!important;
  align-items:end!important;
}
#createModal .item-add>.field{margin:0!important}
#createModal .item-add button{height:42px!important;align-self:end!important}
#createModal .section{margin-top:14px!important;padding-top:14px!important;border-top:1px solid #e8eef5!important}
#createModal #itemsBody td{height:44px!important}
#createModal .modal-foot{padding-bottom:0!important}

/* -------- Manual Orders modal / item input -------- */
#itemSku{min-width:280px!important}

/* -------- Empty states -------- */
.empty,.state-message{
  color:#7a889d!important;
  text-align:center!important;
}
.state-message{padding:26px!important}

/* -------- Permissions page -------- */
.perm-grid{gap:10px!important}
.perm-group{border-color:var(--m-border)!important;border-radius:10px!important;box-shadow:var(--m-shadow-xs)}
.perm-head{background:#f7f9fc!important}
.detail-side{background:#f8fafc!important;border-color:var(--m-border)!important}

/* -------- Scrollbars -------- */
*{scrollbar-width:thin;scrollbar-color:#b8c6d8 #eef3f8}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:#eef3f8}
*::-webkit-scrollbar-thumb{background:#aabbd0;border-radius:999px;border:2px solid #eef3f8}

/* -------- Responsive -------- */
@media(max-width:1100px) and (orientation:portrait){
  .form-grid,.grid-4,.create-box{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #createModal .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:720px) and (orientation:portrait){
  body>main,body>.page,.products-page,.page{padding:14px!important}
  .page-header,.header,.page-head{align-items:flex-start!important;flex-direction:column!important}
  .form-grid,.grid-4,.create-box,#createModal .grid-4,#createModal .item-add{grid-template-columns:1fr!important}
  .toolbar{align-items:stretch!important}
  .toolbar>*{width:100%!important;max-width:none!important}
  .summary-grid,.stats,.account-summary{grid-template-columns:1fr 1fr!important}
}
@media(max-width:480px) and (orientation:portrait){
  .summary-grid,.stats,.account-summary{grid-template-columns:1fr!important}
}
@media print{
  body{background:#fff!important}
  button{box-shadow:none!important}
}


/* ============================================================
   CONSIGNMENT ALIGN FIX V5.1
   SKU / Quantity / Add button on one baseline
   ============================================================ */
#createModal .item-add{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 130px 118px!important;
  gap:10px!important;
  align-items:end!important;
}
#createModal .item-add .field{
  display:grid!important;
  grid-template-rows:18px 42px 18px!important;
  gap:6px!important;
  margin:0!important;
  align-self:stretch!important;
}
#createModal .item-add .field label{
  height:18px!important;
  min-height:18px!important;
  margin:0!important;
  line-height:18px!important;
  align-self:end!important;
}
#createModal .item-add .field input{
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
}
#createModal .item-add .field .hint{
  height:18px!important;
  min-height:18px!important;
  margin:0!important;
  line-height:18px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
#createModal .item-add > button{
  height:42px!important;
  min-height:42px!important;
  margin:0 0 24px 0!important;
  align-self:end!important;
}