/* ==========================================================================
   FastToolsHQ App — components.css
   Reusable UI: buttons, chips, cards, search, bottom nav, sheets, toasts.
   Built once, reused everywhere. No tool should reinvent these.
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--on-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;              /* touch target */
  padding: 0 var(--sp-5);
  border: none;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.96); }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.btn--primary { --btn-bg: var(--brand); --btn-fg: var(--on-brand); box-shadow: var(--shadow-2); }
.btn--primary:active { --btn-bg: var(--brand-strong); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--on-surface); }
.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }

/* Icon-only round button (min 44px hit area kept) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--on-surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.icon-btn svg { width: 22px; height: 22px; }

/* ---- Chips (categories / filters) --------------------------------------- */
.chip-row {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--on-surface-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.chip:active { transform: scale(0.95); }
.chip.is-active {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}
.chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---- Search bar ---------------------------------------------------------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 48px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-6);
}
.search-bar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.search-bar svg { width: 20px; height: 20px; color: var(--on-surface-muted); flex: 0 0 auto; }
.search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--on-surface);
  font-size: var(--fs-md);
  outline: none;
}
.search-bar input::placeholder { color: var(--on-surface-faint); }
.search-bar__clear { display: none; }
.search-bar.has-value .search-bar__clear { display: inline-flex; }

/* ---- Tool card ----------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.card:active { transform: scale(0.97); }
.card:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.card__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.card__icon img, .card__icon svg { width: 28px; height: 28px; }

.card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}
.card__desc {
  font-size: var(--fs-sm);
  color: var(--on-surface-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
}
.card__tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--on-surface-faint);
  background: var(--surface-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
}

/* Offline dot indicator */
.card__offline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: var(--fw-medium);
}
.card__offline::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* Favourite (heart) button on card */
.fav-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--on-surface-faint);
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-emphasized),
              color var(--dur-fast) var(--ease-standard);
}
.fav-btn svg { width: 22px; height: 22px; }
.fav-btn:active { transform: scale(1.25); }
.fav-btn.is-fav { color: var(--error); }
.fav-btn.is-fav svg { fill: var(--error); }
.fav-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* "New" ribbon */
.card__new {
  position: absolute;
  top: 10px;
  right: -28px;
  transform: rotate(45deg);
  background: var(--accent);
  color: #04231b;
  font-size: 0.62rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  padding: 2px 32px;
  text-transform: uppercase;
}

/* ---- Category tile (Categories view) ------------------------------------ */
.cat-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard);
}
.cat-tile:active { transform: scale(0.98); }
.cat-tile__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
}
.cat-tile__count { margin-left: auto; color: var(--on-surface-faint); font-size: var(--fs-sm); }

/* ---- Bottom navigation --------------------------------------------------- */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--on-surface-faint);
  font-size: 0.68rem;
  font-weight: var(--fw-medium);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-item svg { width: 24px; height: 24px; transition: transform var(--dur-med) var(--ease-emphasized); }
.nav-item.is-active { color: var(--brand); }
.nav-item.is-active svg { transform: translateY(-2px) scale(1.08); }
.nav-item:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; border-radius: var(--r-md); }

/* ---- Bottom sheet (Settings etc.) --------------------------------------- */
.sheet-backdrop {
  position: fixed; inset: 0;
  z-index: 40;
  background: var(--overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-standard);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---- Toast --------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--sp-4));
  transform: translateX(-50%) translateY(20px);
  z-index: 50;
  max-width: 90vw;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--on-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-standard),
              transform var(--dur-med) var(--ease-emphasized);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Settings rows ------------------------------------------------------- */
.setting-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}
.setting-row__label { font-weight: var(--fw-medium); }
.setting-row__sub { font-size: var(--fs-sm); color: var(--on-surface-muted); }
.setting-row__control { margin-left: auto; }

/* Toggle switch */
.switch { position: relative; width: 52px; height: 30px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__track {
  position: absolute; inset: 0;
  background: var(--surface-3);
  border-radius: var(--r-full);
  transition: background-color var(--dur-med) var(--ease-standard);
}
.switch__track::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-med) var(--ease-emphasized);
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::before { transform: translateX(22px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Segmented control (theme choice) */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-3);
  border-radius: var(--r-full);
}
.segmented button {
  border: none;
  background: transparent;
  color: var(--on-surface-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  cursor: pointer;
  min-height: 34px;
}
.segmented button.is-active { background: var(--brand); color: var(--on-brand); }