/* GQWORK visual refresh — dashboard only, no behaviour changes. */
:root {
  --ui-ink: #17243a;
  --ui-muted: #73819a;
  --ui-surface: rgba(255, 255, 255, .92);
  --ui-line: #e6ebf3;
  --ui-blue: #3166d6;
  --ui-navy: #101b33;
}

body {
  color: var(--ui-ink);
  background:
    radial-gradient(circle at 75% -15%, rgba(108, 153, 255, .17), transparent 31rem),
    radial-gradient(circle at 2% 90%, rgba(61, 197, 146, .10), transparent 28rem),
    #f5f7fb;
}

.app { grid-template-columns: 254px minmax(0, 1fr); }

aside {
  padding: 27px 15px 22px;
  background:
    radial-gradient(circle at 0 0, rgba(74, 126, 235, .28), transparent 15rem),
    linear-gradient(180deg, #111d36 0%, #0c162a 100%);
  box-shadow: 16px 0 34px rgba(21, 37, 68, .10);
}

.logo { padding: 5px 12px 30px; }
.logo strong { font-size: 17px; letter-spacing: .4px; }
.logo small { color: #a1b0cd; letter-spacing: .08em; }
.brand-mark.small { gap: 5px; }
.brand-mark.small span { width: 10px; height: 10px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .04); }

.nav-group-label {
  display: block;
  margin: 17px 10px 7px;
  color: #6f83a8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

nav { gap: 3px; }
nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 41px;
  padding: 10px 12px;
  color: #b7c5db;
  font-weight: 600;
}
nav button svg { width: 17px; height: 17px; flex: 0 0 17px; color: #91a4c6; }
nav button::before { display: none; }
nav button:hover {
  background: rgba(96, 136, 224, .14);
  box-shadow: none;
}
nav button.active {
  color: #fff;
  background: linear-gradient(135deg, #3c75e5, #2858c4);
  box-shadow: 0 10px 20px rgba(16, 40, 100, .38);
}
nav button.active svg { color: #d9e8ff; }
.aside-bottom { margin: 16px 8px 0; padding: 17px 3px 0; border-top-color: rgba(159, 182, 220, .18); }
.aside-bottom button { padding: 6px 8px; border-radius: 7px; color: #afc0dd; }
.aside-bottom button:hover { color: #fff; background: rgba(255,255,255,.08); }

main { padding: 35px 42px 46px; }
main::before { opacity: .035; }
header { margin-bottom: 25px; }
header h1 { color: #17243a; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
header p { color: #8190a8; font-weight: 500; }
.primary {
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 11px;
  padding: 11px 19px;
  background: linear-gradient(135deg, #3d73e5, #2858c7);
  box-shadow: 0 10px 20px rgba(44, 93, 205, .22);
}

.stats { gap: 16px; margin-bottom: 25px; }
.stats article {
  min-height: 124px;
  border: 1px solid rgba(221, 229, 241, .95);
  border-radius: 17px;
  padding: 20px 21px;
  background: var(--ui-surface);
  box-shadow: 0 10px 26px rgba(31, 53, 91, .06);
}
.stats article::before { right: 21px; left: 21px; height: 4px; }
.stats article:nth-child(1) { color: #4472ce; }
.stats article:nth-child(2) { color: #d38a18; }
.stats article:nth-child(3) { color: #18a16e; }
.stats article:nth-child(4) { color: #df5866; }
.stats span { color: #72809a; font-size: 13px; font-weight: 700; }
.stats strong { margin-top: 11px; color: #20324e; font-size: 34px; line-height: 1; }
.stats i { display: none; }

.panel {
  border: 1px solid rgba(220, 228, 240, .95);
  border-radius: 17px;
  background: var(--ui-surface);
  box-shadow: 0 12px 28px rgba(29, 52, 89, .06);
}
.toolbar { align-items: center; padding: 15px 18px; border-bottom-color: #e7edf5; }
.filters { gap: 5px; }
.filters button { border-radius: 9px; padding: 9px 13px; font-weight: 700; }
.filters button.active { color: #2860d0; background: #eaf1ff; box-shadow: inset 0 0 0 1px #dce8ff; }
.search {
  width: 290px;
  border-color: #dce4f1;
  border-radius: 10px;
  padding: 10px 13px;
  background: #fbfcff;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.search:focus { background: #fff; border-color: #78a0ed; box-shadow: 0 0 0 4px rgba(61, 112, 226, .10); }

th {
  padding: 14px 19px;
  color: #7b8aa2;
  background: #f8faff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
td { padding: 16px 19px; border-top-color: #edf1f6; }
th, td, .stats strong { font-variant-numeric: tabular-nums; }
tbody tr { transition: background .16s, transform .16s; }
tbody tr:hover { background: #f6f9ff; }
#taskRows tr.row-in-progress td { background: rgba(237, 250, 244, .72); border-top-color: #e3f2ea; }
#taskRows tr.row-in-progress:hover td { background: #eaf8f0; }
#taskRows tr.row-in-progress td:first-child { box-shadow: inset 4px 0 #22ad74; }
#taskRows tr.row-partially-shipped td { background: rgba(255, 249, 233, .80); border-top-color: #f6eaca; }
#taskRows tr.row-partially-shipped:hover td { background: #fff6dd; }
#taskRows tr.row-shipped-complete td { background: #fafbfc; }
.badge { padding: 6px 10px; font-weight: 800; letter-spacing: .02em; }
.more { border-color: #d9e3ef; border-radius: 9px; padding: 7px 11px; color: #496079; font-weight: 700; background: #fff; }

@media (max-width: 1060px) {
  .app { grid-template-columns: 226px minmax(0, 1fr); }
  main { padding: 28px 26px 38px; }
  .stats { gap: 12px; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  aside { padding: 14px 16px; }
  main { padding: 24px 16px 34px; }
}

@media (max-width: 560px) {
  header h1 { font-size: 24px; }
  .stats { gap: 10px; }
  .stats article { min-height: 102px; padding: 15px; border-radius: 14px; }
  .stats strong { font-size: 27px; }
  .toolbar { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}