/*
 * Bizkit.Tools — Expense & Allowables Checker
 * Styling aligned with VAT Optimiser / Structure Advisor (dark pane, soft borders, cards, buttons).
 */

.bizkit-expense__grid{
  display:grid;
  gap:14px;
  /* Override .bizkit-cards default 3-col grid.
     Expense checker should be readable in the launcher’s narrower pane.
     Start stacked; progressively enhance when there’s real room. */
  grid-template-columns: 1fr;
}

/*
 * Layout rules
 * The launcher pane is intentionally narrow on desktop.
 * Keep the checker stacked by default; use 2-col only when the container is wide enough.
 */

/* Medium+ screens: 2-column with right side stacked (Questions above Result) */
@media (min-width: 1100px){
  .bizkit-expense__grid{
    grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.05fr);
    align-items:start;
  }
  .bizkit-expense__picker{ grid-column:1; grid-row:1 / span 2; }
  .bizkit-expense__form{ grid-column:2; grid-row:1; }
  .bizkit-expense__result{ grid-column:2; grid-row:2; }
}

/* Wide desktop: 3 columns (Choose | Questions | Result) */
@media (min-width: 1400px){
  .bizkit-expense__grid{
    grid-template-columns: minmax(340px, 1.05fr) minmax(460px, 1.2fr) minmax(340px, 1fr);
  }
  .bizkit-expense__picker,
  .bizkit-expense__form,
  .bizkit-expense__result{ grid-column:auto; grid-row:auto; }
}

/* Inputs (match bizkit-core .bizkit-grid inputs) */
.bizkit-expense .bizkit-input,
.bizkit-expense select{
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.22);
  color:#fff;
  padding:10px 12px;
}
.bizkit-expense .bizkit-input::placeholder{ color: rgba(230,237,247,0.55); }
.bizkit-expense .bizkit-input:focus,
.bizkit-expense select:focus{
  outline:none;
  border-color: rgba(58,160,255,0.85);
}

.bizkit-expense__picker .bizkit-input{ width:100%; margin:10px 0 12px; }

/* Category chips */
.bizkit-expense__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 10px;
}
.bizkit-expense__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.14);
  cursor:pointer;
  font-size:13px;
  user-select:none;
}
.bizkit-expense__chip:hover{ background:rgba(255,255,255,0.06); }
.bizkit-expense__chip.is-active{
  border-color: rgba(242,129,29,0.55);
  background:rgba(242,129,29,0.10);
  font-weight:600;
}

/* List */
.bizkit-expense__list{
  max-height:420px;
  overflow:auto;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:8px;
  background:rgba(0,0,0,0.18);
}
.bizkit-expense__item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.10);
}
.bizkit-expense__item + .bizkit-expense__item{ margin-top:8px; }
.bizkit-expense__item:hover{ background:rgba(255,255,255,0.06); }
.bizkit-expense__item.is-active{
  border-color: rgba(242,129,29,0.55);
  background:rgba(242,129,29,0.10);
  font-weight:600;
}
.bizkit-expense__item small{ opacity:0.8; font-weight:400; }

/* Questions */
.bizkit-expense__q{ margin:12px 0; }
.bizkit-expense__q label{ display:block; font-weight:600; margin:0 0 8px; }
.bizkit-expense__qform h4{ margin:0 0 8px; }

/* Checkbox row (match Structure Advisor choice feel) */
.bizkit-expense__qform input[type="checkbox"]{ width:18px; height:18px; margin:0; }

/* Actions */
.bizkit-expense__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:14px;
}

/* Ghost variant (not in core) */
.bizkit-expense .bizkit-btn--ghost{
  background:transparent;
  border-color: rgba(255,255,255,0.18);
  opacity:0.9;
}
.bizkit-expense .bizkit-btn--ghost:hover{ background:rgba(255,255,255,0.06); }

/* Status pill */
.bizkit-expense__status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  margin:0 0 10px;
  background:rgba(0,0,0,0.14);
}
.bizkit-expense__status.allowable{ border-color: rgba(0,255,160,0.25); background: rgba(0,255,160,0.08); }
.bizkit-expense__status.partial{ border-color: rgba(255,165,0,0.30); background: rgba(255,165,0,0.10); }
.bizkit-expense__status.disallowed{ border-color: rgba(255,80,80,0.30); background: rgba(255,80,80,0.10); }
.bizkit-expense__status.flag{ border-color: rgba(255,255,255,0.12); }

.bizkit-expense__kv{ margin:10px 0; }
.bizkit-expense__kv strong{ display:block; margin-bottom:6px; }

@media (max-width: 899px){
  .bizkit-expense__list{ max-height:260px; }
}

/* Safety: never allow content to push outside cards */
.bizkit-expense__actions{ flex-wrap:wrap; }
.bizkit-expense__actions .bizkit-btn{ max-width:100%; }
.bizkit-expense__qform, .bizkit-expense__result{ min-width:0; }

.bizkit-expense__context{
  margin: 6px 0 0 0;
  opacity: .8;
}

/* When embedded inside the Launcher, keep the checker stacked to avoid overflow in constrained panes.
   (Launcher defines the container width contract; tools must not assume viewport width.) */
.bizkit-launcher__module-body .bizkit-expense__grid{
  grid-template-columns: 1fr !important;
}
.bizkit-launcher__module-body .bizkit-expense__picker,
.bizkit-launcher__module-body .bizkit-expense__form,
.bizkit-launcher__module-body .bizkit-expense__result{
  grid-column: auto !important;
  grid-row: auto !important;
}