/* theme-light.css — shared light theme + Choices.js tweaks */

:root{
  --bg:#f7f7fb;
  --panel:#ffffff;
  --panel-2:#fafafb;
  --border:#e5e7eb;
  --border-2:#d1d5db;
  --text:#111827;     /* gray-900 */
  --text-2:#374151;   /* gray-700 */
  --text-strong:#111827;
  --muted:#6b7280;    /* gray-500 */
  --muter:#9ca3af;    /* gray-400 */
  --chip:#ffffff;
  --chip-border:#d1d5db;

  --ok-bg:#e9f1ec;
  --ok-border:#9fc9b8;
  --ok-text:#2f6b5a;

  --active-bg:#eef2f7;
  --active-border:#d1d5db;
  --active-text:#374151;

  --aside-bg:#f7f1e6;     /* light amber */
  --aside-border:#d7b98a;
  --aside-text:#8a6a3d;

  --picked-bg:#e7f3ee;    /* emerald-50 */
  --picked-border:#9fc9b8;
  --picked-text:#2f6b5a;

  --info-bg:#e7edf5;      /* muted blue */
  --info-border:#9db2d6;  /* muted blue */
  --info-text:#3b5b7a;    /* muted blue */

  --status-active-bg:#edf3f7;     /* subtle blue-gray */
  --status-active-border:#b7c5d9; /* muted blue */
  --status-active-text:#42566b;   /* muted slate */

  --hdr-active:#f1f5f9;   /* slate-100 */
  --hdr-aside:var(--aside-bg);
  --hdr-picked:var(--picked-bg);
  --hdr-cancel:#f3f4f6;   /* gray-100 */
  --hdr-return:var(--ok-bg);

  --warn-bg:#fff9c4;      /* amber-100 */
  --warn-border:#facc15;  /* amber-400 */
  --out-bg:#ffe5e5;       /* red-100 */
  --out-border:#ef4444;   /* red-500 */

  --danger:#b91c1c;       /* red-700 */
  --danger-light:#fee2e2; /* red-100 */
  --danger-border:#ef4444;/* red-500 */
}

/* ====== Choices.js (multi-select) ====== */

.choices__inner {
  background:#fff;
  color:var(--text);
  border:1px solid var(--border-2);
  border-radius:8px;
  min-height:44px;
}

.is-open .choices__inner {
  border-color:#cbd5e1;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.choices__input {
  background:transparent !important;
  color:var(--text) !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item.is-highlighted {
  background:#f3f4f6 !important;
  color:var(--text) !important;
}

/* Selected items (not pill-y, squarer) */
.choices__list--multiple .choices__item {
  background:#eef2f7;
  border:1px solid var(--border-2);
  color:var(--text-2);
  border-radius:6px;
  padding:4px 8px;
  display:flex;
  align-items:center;
  gap:8px;
}

/* Make the remove control readable and consistent */
.choices__button {
  background-image: none !important;   /* remove built-in white × */
  -webkit-mask: none !important;
  mask: none !important;
  border:none;
  margin:0 0 0 6px;
  padding:0;
  cursor:pointer;
  line-height:1;
  font-size:0;                         /* hide original text safely */
}
.choices__button::before {
  content:'Remove';
  font-size:11px;
  font-weight:600;
  color:#374151;                        /* darker gray so it’s visible */
  text-decoration:underline;
}
.choices__button:hover::before { color:#111827; }

/* Multi list spacing */
.choices__list--multiple { display:flex; flex-wrap:wrap; gap:8px; }

/* Placeholder overlay helper (if page adds it) */
.choices-placeholder-overlay {
  position:absolute; left:12px; top:8px;
  color:#9aa3af; font-weight:700; font-size:.9rem;
  pointer-events:none; user-select:none;
}

/* ===== Tables used on inventory page ===== */
.table-wrap { overflow:auto; }

.sticky-category {
  position:sticky; top:0; z-index:3;
  background:var(--hdr-active);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
  margin:16px 0 6px;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}

.inv-table { width:100%; border-collapse:separate; border-spacing:0; }
.inv-table th,
.inv-table td { border-bottom:1px solid var(--border); padding:10px 12px; white-space:nowrap; }

.inv-header-row {
  position:sticky; top:48px; z-index:2;
  background:linear-gradient(#fff,#fff);
  box-shadow:0 1px 0 var(--border);
}

/* color rows */
.row-out  { background:#fee2e2; } /* red-100 */
.row-hold { background:#fef9c3; } /* yellow-100 */

/* Optional search box & filter controls */
.control-bar {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  margin:8px 0 12px;
}
.control-bar input, .control-bar select {
  background:#fff; color:var(--text);
  border:1px solid var(--border-2); border-radius:8px; padding:6px 10px;
}

/* Make the native date picker clickable across the whole field in WebKit browsers. */
input[type="date"],
input[type="datetime-local"]{
  position:relative;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  opacity:0;
  cursor:pointer;
}

/* Buttons */
.btn {
  background:#f3f4f6; color:var(--text);
  border:1px solid var(--border-2);
  padding:8px 12px; border-radius:8px; cursor:pointer;
}
.btn:hover { background:#e5e7eb; }
.btn.small { padding:4px 10px; font-size:12px; }
.btn.ghost { background:#fff; border-style:dashed; }
.btn.danger { background:#fff; border-color:var(--danger-border); color:var(--danger); }
.btn.danger:hover { background:var(--danger-light); }