/* =========================================================
   Natavis Back-Office
   Dark botanical ground, leaf accent, tabular numerals.
   Change --leaf to reskin the whole system.
   ========================================================= */

:root{
  --ink:        #0D1714;
  --surface:    #132320;
  --surface-2:  #182C27;
  --line:       #22403A;
  --line-soft:  #1B332E;

  --leaf:       #3FBF7F;
  --leaf-dim:   rgba(63,191,127,.14);
  --clay:       #D98E4A;
  --sky:        #5B8DEF;
  --gold:       #E0B341;
  --violet:     #9B6BD6;
  --rose:       #E5484D;

  --sand:       #E9E6DC;
  --muted:      #8CA79C;
  --faint:      #5E7269;

  --radius:     10px;
  --radius-sm:  7px;
  --sans:       "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  --mono:       "IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:var(--ink);
  color:var(--sand);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--leaf);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--leaf);outline-offset:2px;border-radius:4px}

/* numbers always tabular so columns line up */
.num,td .num,.stat-value,.money{font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}

/* ---------------- shell ---------------- */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:236px;flex-shrink:0;background:var(--surface);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{padding:22px 20px 18px;border-bottom:1px solid var(--line)}
.brand-name{font-size:17px;font-weight:600;letter-spacing:.2px}
.brand-sub{font-size:11px;color:var(--faint);letter-spacing:1.4px;text-transform:uppercase;margin-top:2px}

.nav{padding:14px 10px;flex:1}
.nav-group{font-size:10.5px;color:var(--faint);letter-spacing:1.2px;text-transform:uppercase;padding:14px 12px 6px}
.nav a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);
  color:var(--muted);font-size:13.5px;margin-bottom:1px;transition:background .12s,color .12s;
}
.nav a:hover{background:var(--surface-2);color:var(--sand);text-decoration:none}
.nav a.is-active{background:var(--leaf-dim);color:var(--leaf);font-weight:500}
.nav a .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex-shrink:0}

.sidebar-foot{padding:14px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
.sidebar-foot a{color:var(--muted)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 26px;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.page-title{font-size:17px;font-weight:600;margin:0}
.topbar-actions{display:flex;align-items:center;gap:10px}

.content{padding:24px 26px 60px;flex:1}

/* ---------------- cards ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px}
.card-head{padding:15px 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-title{font-size:14.5px;font-weight:600;margin:0}
.card-body{padding:18px}
.card-body.tight{padding:0}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.stat-label{font-size:12px;color:var(--muted);margin-bottom:7px}
.stat-value{font-size:21px;font-weight:600;letter-spacing:-.3px}
.stat-note{font-size:11.5px;color:var(--faint);margin-top:5px}
.stat.good .stat-value{color:var(--leaf)}
.stat.bad .stat-value{color:var(--rose)}
.stat.warn .stat-value{color:var(--clay)}

/* ---------------- signature: cost stack bar ---------------- */
/* Every product's selling price rendered as the slices that eat it. */
.stack{display:flex;height:26px;border-radius:6px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line-soft)}
.stack-seg{position:relative;min-width:2px;transition:filter .12s}
.stack-seg:hover{filter:brightness(1.25)}
.stack-seg .tip{
  position:absolute;bottom:calc(100% + 7px);right:50%;transform:translateX(50%);
  background:#04100C;border:1px solid var(--line);color:var(--sand);
  padding:5px 9px;border-radius:6px;font-size:11.5px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:30;
}
.stack-seg:hover .tip{opacity:1}
.stack-profit{background:repeating-linear-gradient(45deg,rgba(63,191,127,.85),rgba(63,191,127,.85) 6px,rgba(63,191,127,.62) 6px,rgba(63,191,127,.62) 12px)}
.stack-loss{background:var(--rose)}

.stack-mini{height:6px;border-radius:3px}

.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:var(--muted)}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0}

/* ---------------- tables ---------------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  text-align:right;padding:11px 14px;font-size:11.5px;font-weight:500;color:var(--muted);
  letter-spacing:.4px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.016)}
td.ltr{direction:ltr;text-align:right}

.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--sand);margin-bottom:6px;font-size:15px}
.empty p{margin:0 0 16px;font-size:13px}

/* ---------------- badges ---------------- */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:500;white-space:nowrap}
.badge-open{background:rgba(91,141,239,.15);color:var(--sky)}
.badge-delivered{background:var(--leaf-dim);color:var(--leaf)}
.badge-cancelled{background:rgba(229,72,77,.14);color:var(--rose)}
.badge-returned{background:rgba(217,142,74,.15);color:var(--clay)}
.badge-muted{background:var(--surface-2);color:var(--muted)}
.badge-warn{background:rgba(224,179,65,.14);color:var(--gold)}

/* ---------------- forms ---------------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
label{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.hint{font-size:11.5px;color:var(--faint);margin-top:5px;line-height:1.5}

input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=datetime-local],input[type=search],select,textarea{
  width:100%;padding:9px 12px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--sand);font-family:inherit;font-size:13.5px;
}
input[type=number]{font-family:var(--mono);direction:ltr;text-align:right}
textarea{resize:vertical;min-height:78px}
input:focus,select:focus,textarea:focus{border-color:var(--leaf);outline:none;box-shadow:0 0 0 3px var(--leaf-dim)}
input::placeholder{color:var(--faint)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(12px) calc(50% - 2px),calc(17px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-left:34px}

.checkbox{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sand);cursor:pointer}
.checkbox input{width:16px;height:16px;accent-color:var(--leaf)}

.form-actions{display:flex;gap:10px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface-2);color:var(--sand);
  font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:all .12s;
}
.btn:hover{background:var(--line);text-decoration:none}
.btn-primary{background:var(--leaf);border-color:var(--leaf);color:#07130F;font-weight:600}
.btn-primary:hover{filter:brightness(1.08);background:var(--leaf)}
.btn-ghost{background:transparent}
.btn-danger{color:var(--rose);border-color:rgba(229,72,77,.35)}
.btn-danger:hover{background:rgba(229,72,77,.12)}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn-icon{padding:7px 10px}

/* ---------------- filters ---------------- */
.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.filters .field{min-width:150px;margin:0}
.filters label{font-size:11.5px}

/* ---------------- flash ---------------- */
.flash{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13.5px;border:1px solid}
.flash-success{background:var(--leaf-dim);border-color:rgba(63,191,127,.4);color:#9BE9C4}
.flash-error{background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.4);color:#FFC0C2}
.flash-info{background:rgba(91,141,239,.12);border-color:rgba(91,141,239,.4);color:#BDD1FA}

/* ---------------- cost editor ---------------- */
.cost-rows{display:flex;flex-direction:column;gap:9px}
.cost-row{
  display:grid;grid-template-columns:1.5fr 1.1fr 100px 1fr 40px;gap:9px;align-items:center;
  padding:9px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
}
.cost-row input,.cost-row select{padding:7px 10px;font-size:13px}
.cost-row .swatch{width:4px;height:100%;border-radius:2px}

.calc-panel{position:sticky;top:78px}
.calc-line{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.calc-line:last-child{border-bottom:0}
.calc-line .label{color:var(--muted)}
.calc-line.total{border-top:1px solid var(--line);margin-top:6px;padding-top:13px;font-size:15px;font-weight:600}
.calc-line.profit .value{color:var(--leaf);font-weight:600}
.calc-line.profit.negative .value{color:var(--rose)}

.split{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}

/* ---------------- pagination ---------------- */
.pagination{display:flex;gap:6px;justify-content:center;padding:18px;flex-wrap:wrap}
.pagination a,.pagination span{
  padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--line);
  color:var(--muted);font-size:13px;font-family:var(--mono);
}
.pagination a:hover{background:var(--surface-2);color:var(--sand);text-decoration:none}
.pagination .current{background:var(--leaf);border-color:var(--leaf);color:#07130F;font-weight:600}

/* ---------------- misc ---------------- */
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.good{color:var(--leaf)}
.bad{color:var(--rose)}
.warn{color:var(--clay)}
.small{font-size:12px}
.mt{margin-top:16px}
.mb{margin-bottom:16px}
.right{text-align:left}
.nowrap{white-space:nowrap}
.thumb{width:36px;height:36px;border-radius:6px;object-fit:cover;background:var(--surface-2);border:1px solid var(--line-soft)}
.row-title{display:flex;align-items:center;gap:10px}
.row-title strong{font-weight:500}

.sparkline{display:flex;align-items:flex-end;gap:3px;height:54px}
.sparkline .bar{flex:1;min-width:3px;background:var(--leaf);border-radius:2px 2px 0 0;opacity:.75;position:relative}
.sparkline .bar:hover{opacity:1}

/* ---------------- login ---------------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:34px}
.login-brand{text-align:center;margin-bottom:26px}
.login-brand .name{font-size:22px;font-weight:600}
.login-brand .sub{font-size:11px;color:var(--faint);letter-spacing:2px;text-transform:uppercase;margin-top:3px}

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .split{grid-template-columns:1fr}
  .calc-panel{position:static}
}
@media (max-width:760px){
  .shell{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;border-left:0;border-bottom:1px solid var(--line)}
  .nav{display:flex;flex-wrap:wrap;gap:4px;padding:10px}
  .nav a{margin:0}
  .nav-group{display:none}
  .sidebar-foot{display:flex;justify-content:space-between}
  .content{padding:16px}
  .topbar{padding:13px 16px}
  .cost-row{grid-template-columns:1fr 1fr;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}