/* ================================
   Glass Light Pro (inspired UI)
   Mobile-first • RTL friendly
================================== */
:root{
  --bg: #f6f7ff;
  --text:#0f172a;
  --muted:#6b7280;

  --card: rgba(255,255,255,.58);
  --card2: rgba(255,255,255,.72);
  --border: rgba(15,23,42,.08);

  --shadow: 0 18px 50px rgba(15,23,42,.10);
  --shadow2: 0 10px 22px rgba(15,23,42,.08);

  --radius: 22px;

  --primary:#6d5efc;
  --primary2:#8a7dff;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
}

html,body{height:100%;}
body{
  background:
    radial-gradient(900px 420px at 12% 5%, rgba(109,94,252,.25), transparent 55%),
    radial-gradient(900px 420px at 88% 10%, rgba(255,151,200,.22), transparent 55%),
    radial-gradient(900px 420px at 60% 95%, rgba(125,211,252,.20), transparent 55%),
    linear-gradient(180deg, #fafbff, var(--bg));
  color: var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
[dir="rtl"] body{ font-family: Tahoma, Arial, sans-serif; }

.container{ max-width: 1120px; }

/* Topbar */
.navbar{
  background: rgba(255,255,255,.55) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(16px);
}
.navbar .navbar-brand{ font-weight: 900; letter-spacing:.2px; }
.nav-link{ color: var(--muted) !important; font-weight: 700; border-radius: 14px; }
.nav-link:hover{ color: var(--text) !important; background: rgba(109,94,252,.10); }

/* Buttons */
.btn{ border-radius: 16px; font-weight: 800; }
.btn-primary{
  border: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 18px 30px rgba(109,94,252,.22);
}
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger{
  border-color: var(--border);
}

/* Cards (glass) */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(16px);
}
.card:hover{ transform: translateY(-1px); transition: .2s ease; }
.card .card-body{ padding: 18px; }
@media(min-width:992px){ .card .card-body{ padding: 22px; } }

.hero{
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

/* Stat tiles */
.stat{
  display:flex; align-items:center; justify-content:space-between;
}
.stat .left{ display:flex; align-items:center; gap:12px; }
.stat .ico{
  width:46px;height:46px;border-radius:18px;
  display:grid;place-items:center;
  background: rgba(109,94,252,.12);
  border: 1px solid rgba(109,94,252,.18);
}
.stat .label{ color: var(--muted); font-size: 12px; font-weight: 800; }
.stat .value{ font-size: 26px; font-weight: 900; line-height: 1; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
}

.small-muted{ color: var(--muted); font-size: 12px; font-weight: 700; }

/* Progress */
.progress{ height: 10px; border-radius: 999px; background: rgba(15,23,42,.06); }
.progress-bar{ border-radius: 999px; background: linear-gradient(90deg, var(--primary), #9b8cff); }

/* Sticky filters */
.sticky-bar{
  position: sticky;
  top: 74px;
  z-index: 20;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
}

/* Chips */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.60);
  border: 1px solid var(--border);
  font-weight: 900;
  font-size: 12px;
}
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot-new{ background:#6d5efc; }
.dot-cut{ background:#06b6d4; }
.dot-sew{ background:#8b5cf6; }
.dot-fin{ background:#f59e0b; }
.dot-ready{ background:#22c55e; }
.dot-del{ background:#10b981; }

/* Table */
.table thead th{
  color: rgba(15,23,42,.70);
  font-weight: 900;
  border-bottom: 1px solid var(--border)!important;
}
.table td,.table th{ border-color: rgba(15,23,42,.06)!important; }
.table-pro td{ padding: 14px 12px; }