/* ============================================================
   1DO WEB — design system
   Fresh custom stylesheet (replaces W3.CSS)
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
  /* brand + surfaces */
  --brand: #4f46e5;
  --brand-dark: #3730a3;
  --brand-light: #eef2ff;
  --bg: #f3f4fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;

  /* feedback / accents */
  --accent: #10b981;      /* deals / savings */
  --accent-dark: #059669;
  --warm: #f59e0b;
  --hot: #ef4444;

  /* text */
  --text: #1e293b;
  --muted: #64748b;
  --faint: #94a3b8;

  /* lines + depth */
  --border: #e6e8f0;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(31, 41, 55, .16);
}

/* ---- Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

button { font-family: inherit; cursor: pointer; }

/* ============================================================
   Header
   ============================================================ */
.app-header {
  position: relative;
  z-index: 50;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.app-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
}

/* brand wordmark */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 1.15rem;
  color: var(--brand);
  white-space: nowrap;
}
.brand .brand-badge {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), #6366f1);
  color: #fff;
  box-shadow: var(--shadow-sm);
  font-size: .95rem;
}
.brand small {
  color: var(--faint);
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.spacer { flex: 1 1 auto; }

/* user chip */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-weight: 600;
  font-size: .85rem;
}
.user-chip i.fa-hat-wizard { color: var(--brand); }
.icon-btn {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  border: none;
  transition: background .15s, color .15s, transform .15s;
}
.icon-btn:hover { background: var(--brand); color: #fff; transform: translateY(-1px); }

/* ---- Toolbar (filters) ------------------------------------ */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 0 22px 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.field > label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
  padding-left: 2px;
}
.select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 34px 8px 13px;
  min-width: 150px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.select:hover { border-color: #cdd2e4; }
.select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

/* search */
.search {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  align-self: flex-end;
}
.search i {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: .9rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

.sort-row { display: flex; align-items: center; gap: 8px; }
.sort-row .select { flex: 1 1 auto; width: auto; min-width: 0; }
.sort-dir { flex: 0 0 auto; width: 38px; height: 38px; }

/* ---- Floating controls: always-available search + sort ---- */
.controls-fab-wrap {
  position: fixed;
  right: 20px;
  bottom: 56px;            /* clear the fixed footer bar */
  z-index: 60;             /* above table + footer */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.controls-fab {
  width: 56px; height: 56px;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #6366f1);
  box-shadow: var(--shadow-lg);
  transition: transform .15s, box-shadow .15s;
}
.controls-fab:hover { transform: translateY(-2px); }
.controls-fab:active { transform: translateY(0); }
.controls-panel {
  width: min(320px, calc(100vw - 40px));
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.controls-panel[hidden] { display: none; }
.cp-field { display: flex; flex-direction: column; gap: 6px; }
.cp-field > label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
}
.controls-panel .search { flex: 0 0 auto; width: 100%; min-width: 0; align-self: stretch; }

/* refresh / new-file button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .88rem;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand), #6366f1);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }
.btn .fa-spin-pending { display: none; }
.newfile {
  align-self: flex-end;
}

/* ============================================================
   Main / table
   ============================================================ */
.main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 26px 22px 90px;
}

.empty-state {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 80px 20px;
  text-align: center;
  color: var(--muted);
}
.empty-state .emoji {
  font-size: 2.6rem;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
}
.empty-state h2 { margin: 0; color: var(--text); font-size: 1.15rem; }
.empty-state p { margin: 0; max-width: 360px; }

/* table card */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  /* `clip` keeps the rounded corners WITHOUT creating a scroll container,
     so the sticky <thead> can pin to the viewport (overflow:hidden would break it). */
  overflow: clip;
}
.table-scroll { overflow: visible; }

table.deal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.deal-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.deal-table thead th.sorter { cursor: pointer; transition: color .15s, background .15s; }
.deal-table thead th.sorter:hover { color: var(--brand); background: var(--brand-light); }
.deal-table thead th .sort-ind { margin-left: 6px; color: var(--brand); font-size: .7rem; }
.deal-table thead th.num { text-align: right; }

.deal-table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.deal-table tbody tr:last-child td { border-bottom: none; }
.deal-table tbody tr {
  transition: background .15s;
}
.deal-table tbody tr:hover { background: var(--brand-light); }

.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.full-price { color: var(--faint); text-decoration: line-through; font-size: .85rem; }
.prod-name { color: var(--text); font-weight: 600; }
.prod-name:hover { color: var(--brand); text-decoration: underline; }

/* dataset / category chips */
.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--brand-light);
  color: var(--brand-dark);
}
.chip-muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* discount badge — colour scales with magnitude via modifier */
.disc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 52px;
  justify-content: center;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: .8rem;
  background: var(--accent);
  color: #fff;
}
.disc-badge.tier-low  { background: #94a3b8; }
.disc-badge.tier-mid  { background: var(--accent); }
.disc-badge.tier-high { background: var(--accent-dark); }
.disc-badge.tier-fire { background: linear-gradient(135deg, #f97316, var(--hot)); }

/* price cell with savings bar */
.price-cell { min-width: 130px; }
.price-cell .price-now {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}
.price-bar {
  margin-top: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: #eef0f6;
  overflow: hidden;
}
.price-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

/* sold-out pill */
.pill-sold {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 700;
  background: #fee2e2;
  color: #b91c1c;
}
.pill-stock { color: var(--faint); font-size: .9rem; }

/* product thumbnail with hover zoom */
.thumb {
  position: relative;
  width: 50px; height: 50px;
  transition: transform .18s;
}
/* Grow the hover target 15% (transform keeps the table layout stable). The
   bigger box, expanding outward from where the cursor entered, keeps the
   pointer comfortably inside and stops the edge flicker. */
.thumb:hover {
  transform: scale(1.15);
  z-index: 25;
}
.thumb img {
  width: 50px; height: 50px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  transition: width .18s, height .18s, box-shadow .18s, border-radius .18s;
}
/* On hover the image lifts out into a floating preview. It is anchored to the
   thumb's right edge so its right edge never moves (the cursor stays over it)
   and it grows leftward over the table instead of pushing other thumbs around.
   pointer-events:none keeps the cursor on the 50px .thumb, so the preview can
   never steal the pointer or fire a spurious mouseleave. */
.thumb:hover img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 260px; height: 260px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 30;
  pointer-events: none;
}

/* sold-out indicator — replaces the old Sold Out column */
.thumb.is-sold img { filter: grayscale(.85) brightness(.95); opacity: .8; }
.thumb-sold {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  z-index: 2;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(185, 28, 28, .94);
  color: #fff;
  font-size: .46rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--brand-dark);
  color: #c7d2fe;
  cursor: pointer;
}
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: .78rem;
  letter-spacing: .5px;
}
.footer-bar .fa-chevron-up { transition: transform .2s; font-size: .7rem; }
.site-footer.is-open .footer-bar .fa-chevron-up { transform: rotate(180deg); }

.footer-detail {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 26px 24px;
}
.site-footer.is-open .footer-detail { display: grid; }
.footer-detail h5 {
  margin: 0 0 6px;
  color: #fff;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.footer-detail p, .footer-detail li { font-size: .76rem; line-height: 1.55; color: #c7d2fe; }
.footer-detail ul { margin: 6px 0; padding-left: 18px; }

/* ============================================================
   Login
   ============================================================ */
.login-body {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 540px at 15% -10%, #6366f1 0%, transparent 55%),
    radial-gradient(900px 520px at 110% 120%, #10b981 0%, transparent 50%),
    var(--brand-dark);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 30px;
  text-align: center;
}
.login-card .brand-badge {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), #6366f1);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: var(--shadow-md);
}
.login-card h1 { margin: 0 0 4px; font-size: 1.35rem; }
.login-card .subtitle { margin: 0 0 24px; color: var(--muted); font-size: .9rem; }
.login-card .field-block { text-align: left; margin-bottom: 16px; }
.login-card label {
  display: block;
  margin-bottom: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
}
.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  background: var(--surface-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-card input:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}
.login-card .btn-login {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  padding: 12px;
  font-size: .95rem;
}
.login-error {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #fee2e2;
  color: #b91c1c;
  font-size: .82rem;
  font-weight: 600;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
  .app-bar { padding: 10px 14px; }
  .toolbar { padding: 0 14px 12px; gap: 10px; }
  .field, .select { min-width: 0; }
  .field { flex: 1 1 140px; }
  .select { width: 100%; }
  .main { padding: 14px 10px 90px; }
  .brand small { display: none; }

  /* "shop with your eyes": reflow each row into an image-led card */
  .deal-table, .deal-table tbody { display: block; }
  .deal-table thead { display: none; }
  .deal-table .col-dataset { display: none; }

  .deal-table tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: start;
    column-gap: 14px;
    row-gap: 2px;
    padding: 14px;
  }
  .deal-table tbody td { display: block; padding: 0; border: none; }

  /* big product photo on the left, spanning the card */
  .col-img { grid-column: 1; grid-row: 1 / span 5; align-self: center; }
  .thumb, .thumb img { width: 88px; height: 88px; }
  .thumb img { border-radius: 14px; }
  .thumb:hover { transform: none; }
  .thumb:hover img { position: static; transform: none; width: 88px; height: 88px; border-radius: 14px; box-shadow: var(--shadow-sm); }
  .thumb-sold { font-size: .6rem; padding: 3px 7px; }

  /* details stacked beside the photo */
  .col-name, .col-price, .col-full, .col-cat { grid-column: 2; }
  .col-name { order: 1; margin-bottom: 2px; }
  .col-name .prod-name { font-size: 1rem; }
  .col-price { order: 2; }
  .col-full  { order: 3; text-align: left; }
  .col-cat   { order: 4; margin-top: 4px; }

  /* discount % becomes a sale sticker on the photo corner */
  .col-disc {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 5;
  }
  .col-disc .disc-badge { min-width: 0; box-shadow: var(--shadow-md); }
}