/* ==== Theme ==== */
:root {
  --clr-background: #101624;
  --clr-light: #161e2e;
  --clr-primary: #3b82f6;           /* kept for non-button/non-arrow uses */
  --clr-primary-hover: #2563eb;     /* used for buttons & chevrons */
  --clr-secondary: #ff8000;
  --clr-accent: #3b82f6;            /* lines/borders */
  --clr-text: #EEE;
  --clr-header: #EEE;
  --transition: .3s ease;

  /* selects */
  --select-arrow: var(--clr-primary-hover);
}

/* ==== Base ==== */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.125rem;
  background: var(--clr-background);
  color: var(--clr-text);
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
}

.page { max-width: 700px; margin: 0 auto; padding: 0 1rem; }

h1 {
  text-align: center;
  color: var(--clr-header);
  margin: 1.5rem 0 2rem;
  opacity: 0.8; /* dimmed per your request */
}

/* Header bar (title centered, logout top-right) */
.top-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-bar h1 {
  margin: 1.5rem 0 1.25rem;
}

.logout-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--clr-primary-hover);
  color: #fff;
  border: none;
  padding: 0 8px;
  border-radius: 6px;
  height: 20px;
  font-size: .9rem;
  line-height: 20px;
  cursor: pointer;
}

.logout-btn:hover { filter: brightness(1.1); }
.logout-btn:disabled { opacity: .6; cursor: not-allowed; }

#lastUpdated {
  text-align: center;
  font-size: .9rem;
  opacity: .7;
  margin: 0 0 1rem;
  color: var(--clr-primary);
}

/* ==== Add rows (shared control look) ==== */
.add-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  width: 100%;
  flex-wrap: wrap; /* allow wrapping instead of horizontal overflow */
}

.add-row select,
.add-row input,
.add-row button {
  font-size: 1.05rem;
  height: 44px;
  line-height: 44px;
  border-radius: 6px;
  border: 1px solid #2e3540;
  background: #1d232b;
  color: var(--clr-text);
  padding: 0 12px;
}

/* native selects compact + no arrows */
.add-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  min-height: 44px;
  max-height: 44px;
}

/* widths/layout */
.add-row > #shopSelect,
.add-row > #shopSelectClone { flex: 0 0 170px; }
.add-row > #itemInput { flex: 1 1 auto; }
.add-row > #addBtn { flex: 0 0 auto; }
/* align second row with first on desktop */
.add-row > #newItemInput { flex: 1 1 auto; }
.add-row > #addNewBtn { flex: 0 0 auto; }

/* itemInput look */
#itemInput {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  caret-color: var(--clr-text);
}
#itemInput:hover { border-color: var(--clr-primary); }
#itemInput:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 2px rgba(0, 173, 181, .25);
}

/* Show-all (down-arrow) button next to input */
#showAllItemsBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  margin-left: 0;
  border-radius: 6px;
  color: var(--clr-primary-hover); /* SVG uses currentColor */
}

/* === Select wrapper (kept for spacing only) === */
.select-wrap { position: relative; display: inline-block; }
.select-wrap select { padding-right: 44px; }

/* Draw the chevron INSIDE the select using gradients (tappable everywhere) */
.select-wrap select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-arrow) 50%),
    linear-gradient(-45deg, transparent 50%, var(--select-arrow) 50%);
  background-position:
    right 16px center,
    right 10px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* ==== Buttons that used primary/accent → now use primary-hover ==== */
#addBtn {
  background: var(--clr-primary-hover);
  border: none;
  cursor: pointer;
  padding: 0 16px;
}
#addBtn:hover { filter: brightness(1.1); }

.add-row > #addNewBtn {
  background: var(--clr-primary-hover);
  border: none;
  cursor: pointer;
  padding: 0 16px;
  font-size: 1.05rem;
  height: 44px;
  line-height: 44px;
  border-radius: 6px;
  color: var(--clr-text);
}
.add-row > #addNewBtn:hover { filter: brightness(1.1); }

/* Match New Shop button typography to New Item */
.add-row > #addShopBtn2 {
  font-size: 1.05rem;
  line-height: 44px;
  height: 44px;
  border-radius: 6px;
  font-weight: 600;
  background: var(--clr-primary-hover);
  border: none;
  color: var(--clr-text);
  cursor: pointer;
}
.add-row > #addShopBtn2:hover { filter: brightness(1.1); }

.remove-btn {
  background-color: var(--clr-primary-hover);
  color: #fff;
  border: none;
  padding: .3rem .6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  margin-left: .5rem;
  position: relative;
}
.remove-btn:hover { filter: brightness(1.1); }
.remove-btn:disabled { opacity: .5; cursor: default; }

/* Expand touch target on mobile without changing visual size */
@media (max-width: 768px) {
  .remove-btn::after {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    /* Invisible but increases the touch area */
  }
}

/* ==== Store groups / lists ==== */
.store-group {
  margin: 0 auto 2rem auto;
  background: var(--clr-light);
  border-radius: 8px;
  padding: 0.8rem 1rem 1rem; /* reduced top padding */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 700px;
}

.store-group h2 {
  margin-top: 0;      /* kill browser default */
  margin-bottom: 0.5rem;
  color: var(--clr-header);
  font-size: 1.4rem;
  border-bottom: 1px solid var(--clr-accent);
  padding-bottom: 0.25rem;
  text-align: center;
}

ul { list-style: none; padding: 0; margin: 0; }

li {
  background: var(--clr-background);
  margin: .35rem 0;
  padding: .6rem .75rem;
  border-radius: 6px;
  color: var(--clr-text);
  transition: background var(--transition);
}
li.urgent { font-weight: bold; color: var(--clr-secondary); }

a { color: inherit; text-decoration: underline; font-weight: 600; }
a:visited { color: inherit; }
a:hover { opacity: .85; }

.store-group ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem .75rem;
  margin: .35rem 0;
  border-radius: 6px;
}

/* ==== Searchable combo menu ==== */
.combo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  height: 44px;
  box-sizing: border-box;
}

.combo-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* Allow the dropdown to extend much further down the screen */
  max-height: min(80vh, 900px);
  overflow: auto;
  background: #1d232b;
  border: 1px solid #2e3540;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  z-index: 50;
}

.combo-option {
  padding: .5rem .75rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo-option:hover,
.combo-option[aria-selected="true"] { background: #2a313b; }

/* ==== Shop selection modal ==== */
.shop-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: 1rem;
}

.shop-modal {
  background: #1d232b;
  border: 1px solid #2e3540;
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  padding: 1.25rem 1.25rem 1.5rem;
  color: var(--clr-text);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
  animation: modalIn .25s ease;
}
.shop-modal h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  text-align: center;
  color: var(--clr-text);
}

/* Modal title uses item text color */
.shop-modal-title {
  color: var(--clr-text);
}
.shop-modal-options {
  display: grid;
  gap: .5rem;
  margin: 0 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.shop-modal-options button {
  background: #27303a;
  border: 1px solid #2e3540;
  color: var(--clr-text);
  padding: .55rem .6rem;
  border-radius: 6px;
  font-size: .95rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.shop-modal-options button:hover,
.shop-modal-options button:focus {
  background: #2f3944;
  border-color: var(--clr-primary);
  outline: none;
}

/* Cancel uses theme hover colour for consistency */
.shop-modal-cancel {
  width: 100%;
  background: var(--clr-primary-hover);
  border: none;
  color: #fff;
  padding: .65rem .75rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
}
.shop-modal-cancel:hover { filter: brightness(1.1); }

/* Delete button in modals (destructive) */
.shop-modal-delete {
  width: 100%;
  background: #b91c1c;
  border: none;
  color: #fff;
  padding: .65rem .75rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
}
.shop-modal-delete:hover { filter: brightness(1.05); }

/* Info line used in the delete modal (matches the offline message styling) */
.shop-modal-info {
  background: #ff8000;
  color: #fff;
  padding: .5rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  text-align: center;
  font-size: .9rem;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==== Responsive ==== */
@media (max-width:768px) {
  .page, .store-group { max-width: 95vw; }

  .add-row { flex-direction: column; align-items: stretch; }
  .add-row > * { width: 100%; }

  .add-row select,
  .add-row input,
  .add-row button {
    font-size: 1.05rem;
    height: 46px !important;
    min-height: 46px !important;
    line-height: 46px !important;
  }
}
/* === Compact add-row buttons + spacing (overrides) === */

/* ensure rows span full width */
#addForm .add-row,
#addNewForm .add-row { width: 100%; }

/* keep fixed width for selects, stretch the search area */
.add-row > .select-wrap { flex: 0 0 170px; }
.add-row > .combo-wrap { flex: 1 1 auto; min-width: 200px; }

/* consistent control height (safety) */
#shopSelect, #shopSelectClone,
#itemInput, #newItemInput,
#showAllItemsBtn,
#addBtn, #addNewBtn {
  height: 44px;
  line-height: 44px;
  box-sizing: border-box;
}

/* slimmer buttons so the input has more space */
#addBtn, #addNewBtn, #addShopBtn2 {
  min-width: 100px;          /* ← primary buttons width */
  padding: 0 14px;
  white-space: nowrap;
  font-weight: 600;
}

/* urgent buttons removed */

/* make sure button text never “disappears” due to other styles */
#addBtn, #addNewBtn { 
  text-indent: initial; 
  overflow: visible; 

}

/* Place New Shop button on its own line below New Item */
.add-row > #addShopBtn2 {
  flex: 0 0 100%;
}

/* tidy up select→input seam so nothing overlaps */
#shopSelect { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.combo-wrap input#itemInput { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* mobile keeps stacking full-width (your existing rules already do this) */

/* ===== Extra Compact Mobile View ===== */
@media (max-width:600px) {
  body { font-size: 1rem; }
  h1 { margin: 1rem 0 1.25rem; font-size: 1.9rem; }
  /* Stack controls to avoid horizontal overflow; allow tight vertical spacing */
  .add-row { flex-direction: column; flex-wrap: nowrap; gap: .4rem; align-items: stretch; }
  form#addForm, form#addNewForm { margin-bottom: .55rem !important; }
  .add-row select,
  .add-row input,
  .add-row button { height: 38px; line-height: 38px; font-size: .95rem; padding: 0 10px; width: 100%; }
  #showAllItemsBtn { height: 40px; width: 40px; align-self: flex-end; }
  /* Allow full-width input; buttons follow without overhang */
  .add-row > .select-wrap { flex: 0 0 100%; }
  .add-row > .combo-wrap { flex: 0 0 100%; min-width: 0; }
  #addBtn, #addNewBtn, #addShopBtn2 { min-width: 100%; padding: 0 12px; font-size: .95rem; }
  .store-group { margin: 0 0 1.25rem; padding: .6rem .75rem .75rem; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
  .store-group h2 { font-size: 1.15rem; margin-bottom: .4rem; padding-bottom: .2rem; }
  .store-group ul li { margin: .25rem 0; padding: .5rem .6rem; }
  li { padding: .5rem .6rem; }
  .remove-btn { padding: .25rem .5rem; font-size: .85rem; }
  #lastUpdated { font-size: .75rem; margin-bottom: .6rem; }
  .combo-menu { max-height: min(70vh, 820px); }
  .combo-option { padding: .4rem .6rem; font-size: .9rem; }
  .shop-modal { max-width: 360px; padding: 1rem 1rem 1.25rem; }
  .shop-modal h3 { font-size: 1rem; margin-bottom: .75rem; }
  .shop-modal-options { gap: .4rem; }
  .shop-modal-options button { padding: .45rem .5rem; font-size: .85rem; }
  .shop-modal-cancel { padding: .55rem .6rem; font-size: .9rem; }
}