/* ISOPI · Scan-Entry · Quick-Save-Dialog + Topbar/Mobile-Trigger
 * Tokens only — alle Farben über --isopi-*. Keine border-radius, keine
 * box-shadow, keine pure-white / pure-black. Surface-Coverage:
 *   1) Topbar-Icon-Trigger    .scan-entry-trigger
 *   2) Dashboard-Quick-Tile   .scan-entry-tile
 *   3) Quick-Save-Modal/Sheet .scan-entry-modal*
 */

/* 1) Topbar-Trigger-Icon ----------------------------------------- */
.scan-entry-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--isopi-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition, 150ms ease);
}
.scan-entry-trigger:hover {
  color: var(--isopi-red);
}
.scan-entry-trigger:focus-visible {
  outline: 2px solid var(--isopi-ink);
  outline-offset: 2px;
}
.scan-entry-trigger svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* Topbar-Camera-Trigger ist konzeptionell Mobile-Only — auf dem Phone
 * tappt der User dort, um sofort einen Schnappschuss zu machen.
 * Auf Desktop/Tablet (>= 640px) ist die Camera-Hardware in der Regel
 * untauglich; statt eines toten Icons reicht der Upload-Button rechts
 * (.isopi-shell__scan-btn), der dort ohnehin sichtbar ist. */
@media (min-width: 640px) {
  .scan-entry-trigger {
    display: none;
  }
}

/* 2) Dashboard-Tile (Quick-Action) ------------------------------- */
.scan-entry-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--isopi-sand-light, var(--isopi-sand));
  border: 1px solid var(--isopi-border);
  color: var(--isopi-ink);
  font-family: var(--font-brandon, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition:
    background var(--transition, 150ms ease),
    border-color var(--transition, 150ms ease);
}
.scan-entry-tile:hover {
  background: var(--isopi-sand-dark);
  border-color: var(--isopi-ink);
}
.scan-entry-tile:focus-visible {
  outline: 2px solid var(--isopi-ink);
  outline-offset: 2px;
}
.scan-entry-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.scan-entry-tile__icon svg {
  width: 24px;
  height: 24px;
}
.scan-entry-tile__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.scan-entry-tile__sub {
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--isopi-muted);
  text-transform: none;
}

/* 3) Quick-Save-Modal ------------------------------------------- */
.scan-entry-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scan-entry-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 16, 0.55);
}
.scan-entry-modal__panel {
  position: relative;
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  background: var(--isopi-sand-light, var(--isopi-sand));
  border: 1px solid var(--isopi-border-strong);
  color: var(--isopi-ink);
  font-family: var(--font-brandon, sans-serif);
}
.scan-entry-modal__header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem 0.5rem;
  position: relative;
}
.scan-entry-modal__drag-handle {
  display: none;
}
.scan-entry-modal__title {
  flex: 1;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--isopi-ink);
}
.scan-entry-modal__close {
  background: transparent;
  border: 0;
  padding: 0.35rem;
  color: var(--isopi-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scan-entry-modal__close:hover {
  color: var(--isopi-red);
}
.scan-entry-modal__body {
  padding: 0.75rem 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.scan-entry-modal__summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--isopi-border);
}
.scan-entry-modal__preview {
  width: 64px;
  height: 80px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--isopi-border);
  background: var(--isopi-sand-dark);
}
.scan-entry-modal__preview--empty {
  display: block;
}
.scan-entry-modal__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.scan-entry-modal__count {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.scan-entry-modal__hint {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--isopi-muted);
}
.scan-entry-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.scan-entry-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.scan-entry-modal__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--isopi-muted);
}
.scan-entry-modal__input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--isopi-sand);
  border: 1px solid var(--isopi-border);
  color: var(--isopi-ink);
  font-family: var(--font-brandon, sans-serif);
  font-size: 0.95rem;
}
.scan-entry-modal__input:focus {
  outline: 2px solid var(--isopi-ink);
  outline-offset: -1px;
  border-color: var(--isopi-ink);
}
.scan-entry-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.scan-entry-modal__chip {
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: 1px solid var(--isopi-border-strong, var(--isopi-muted));
  color: var(--isopi-muted);
  font-family: var(--font-brandon, sans-serif);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.scan-entry-modal__chip.is-active {
  background: var(--isopi-ink);
  border-color: var(--isopi-ink);
  color: var(--isopi-sand);
}
.scan-entry-modal__chip:focus-visible {
  outline: 2px solid var(--isopi-ink);
  outline-offset: 2px;
}
.scan-entry-modal__error {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--isopi-red);
  color: var(--isopi-red);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  background: var(--isopi-sand-dark);
}
.scan-entry-modal__footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid var(--isopi-border);
}
.scan-entry-modal__btn {
  flex: 1;
  padding: 0.7rem 1rem;
  background: transparent;
  border: 1px solid var(--isopi-ink);
  color: var(--isopi-ink);
  font-family: var(--font-brandon, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scan-entry-modal__btn--primary {
  background: var(--isopi-ink);
  color: var(--isopi-sand);
}
.scan-entry-modal__btn--primary:hover:not(:disabled) {
  background: var(--isopi-ink-soft, var(--isopi-ink));
}
.scan-entry-modal__btn--secondary:hover {
  background: var(--isopi-sand-dark);
}
.scan-entry-modal__btn:focus-visible {
  outline: 2px solid var(--isopi-ink);
  outline-offset: 2px;
}
.scan-entry-modal__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Mobile-Sheet (Bottom-Slide-Up) -------------------------------- */
@media (max-width: 639px) {
  .scan-entry-modal {
    align-items: flex-end;
  }
  .scan-entry-modal__panel {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
  }
  .scan-entry-modal__drag-handle {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--isopi-border-strong, var(--isopi-muted));
  }
  .scan-entry-modal__header {
    padding-top: 1.5rem;
  }
}