@charset "UTF-8";
/* sign-in.css — The sign-in page.
   Loaded in order by templates/partials/styles.html. */

/* ========================= 33. Sign-in page =============================== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.auth-card__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.auth-card h1 {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-xl);
}

.auth-card .muted {
  margin: 0 0 var(--s-5);
}

.auth-card .field {
  margin-bottom: var(--s-4);
}

/* "Sign in as company admin" tick box */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-2) 0 var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
}
.auth-check:has(input:checked) {
  border-color: var(--primary-500);
  background: color-mix(in srgb, var(--primary-500) 8%, var(--surface));
}
.auth-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--primary-500);
}
.auth-check span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auth-check small.muted {
  margin: 0;   /* not the intro paragraph's gap (.auth-card .muted) */
  font-size: var(--fs-sm);
}

.auth-card__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--s-2);
}

/* the sign-out control is a button inside a form, not a link */
.menu__panel form {
  margin: 0;
}

.menu__panel button.menu__item {
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}




/* date-range filter on the orders list — stays on one row */
.range-filter {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: nowrap;
  margin: 0;
}

/* the calendar, both dates and the dash read as a single control */
.range-filter__dates {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  min-height: 34px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-3);
  flex: 0 0 auto;
}

/* the calendar on the left opens the picker — see initDatePickers() */
.range-filter__dates ion-icon {
  font-size: 1.05rem;
  flex: 0 0 auto;
  cursor: pointer;
  transition: color var(--t-fast);
}
.range-filter__dates ion-icon:hover {
  color: var(--primary-600);
}

.range-filter__dash {
  color: var(--text-3);
}

/* the inputs sit inside that frame, so they carry no border of their own */
.range-filter__dates .input {
  width: 128px;
  min-height: 30px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font-size: var(--fs-sm);
  color: var(--text);
}

/* The browser draws its own calendar button inside a date field and colours
   it from the page's colour scheme, not from our text colour. Without this
   the field inherits the light scheme, so in dark mode it was a near-black
   glyph on a near-black field — the "icon is not visible on the right".
   Declaring the scheme also makes the dropdown panel itself match. */
.range-filter__dates .input {
  color-scheme: light;
}
:root[data-theme="dark"] .range-filter__dates .input {
  color-scheme: dark;
}

/* and give that button a little room and a hit area worth tapping */
.range-filter__dates .input::-webkit-calendar-picker-indicator {
  padding: 2px;
  margin-left: 2px;
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0.75;
}
.range-filter__dates .input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--surface-3);
}

.range-filter__dates .input:focus {
  outline: none;
  box-shadow: none;
}

.range-filter__dates:focus-within {
  border-color: var(--primary-500);
  box-shadow: var(--ring);
}

.range-filter .select {
  min-height: 34px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: var(--fs-sm);
  max-width: 170px;
}

.range-filter .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* only below this does it need to wrap */
@media (max-width: 900px) {
  .range-filter { flex-wrap: wrap; }
  .range-filter__dates { flex: 1 1 100%; justify-content: space-between; }
  .range-filter__dates .input { width: auto; flex: 1 1 0; }
  .range-filter .select { max-width: none; flex: 1 1 140px; }
}

/* On a phone the form wrapped but still ran off the side of the panel. A flex
   item defaults to min-width:auto, which means "never narrower than my own
   content" — so the selects and the date boxes refused to shrink, the form
   stayed wider than the toolbar, and the panel spilled past the screen edge,
   clipping the second dropdown and the badge on the right. Letting them shrink
   is the whole fix; the rest is making the row breaks deliberate. */
@media (max-width: 640px) {
  .toolbar { min-width: 0; }

  .range-filter {
    width: 100%;
    min-width: 0;
  }

  .range-filter .select,
  .range-filter__dates,
  .range-filter__dates .input {
    min-width: 0;
  }

  /* the apply button gets its own full-width row rather than sitting alone in
     the corner under the dates */
  .range-filter .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Narrower still: the date box holds two pickers, a leading icon and a dash,
   and the pickers cannot shrink past the date they print. Dropping the two
   decorative parts gives that width back — each input keeps its own calendar
   button, so nothing is lost. */
@media (max-width: 430px) {
  .range-filter__dates {
    gap: 4px;
    padding: 0 var(--s-2);
  }
  .range-filter__dates > ion-icon,
  .range-filter__dash {
    display: none;
  }
}
/* place-of-supply line under Bill To */
.inv-bill__supply {
  margin-top: 4px !important;
  font-size: 10px;
  color: #4b5563;
}



/* icon-only buttons in the range filter: keep them square, not letterbox */
.range-filter .btn {
  min-width: 34px;
  min-height: 34px;
  padding-left: var(--s-3);
  padding-right: var(--s-3);
  justify-content: center;
}

.range-filter .btn ion-icon {
  font-size: 1.05rem;
}


/* ---- export dropdown must escape the panel ----------------------------
   .panel sets overflow:hidden to clip the table's rounded corners, which
   also clips the absolutely-positioned dropdown — no z-index can escape an
   ancestor's overflow. Let the panel show overflow only while a dropdown
   inside it is open, so the corners stay clipped the rest of the time. */
.panel:has(.export-menu[open]) {
  overflow: visible;
}

/* the toolbar sits above the table so the open menu is not covered */
.panel:has(.export-menu[open]) .toolbar {
  position: relative;
  z-index: 61;
}

.export-menu[open] > summary {
  position: relative;
  z-index: 62;
}

/* fallback for browsers without :has() — the menu opens upward instead of
   being clipped at the bottom of the toolbar */
@supports not selector(:has(*)) {
  .export-menu__panel {
    bottom: calc(100% + var(--s-2));
    top: auto;
  }
}