/* LabelPeel's own look on top of Tabler: brand colour, logo, and the bits every page shares. */
:root {
  --lp-brand: #f76707;
  --lp-brand-rgb: 247, 103, 7;
  --lp-brand-dark: #d9480f;
  --tblr-primary: var(--lp-brand);
  --tblr-primary-rgb: var(--lp-brand-rgb);
  --tblr-primary-text-emphasis: var(--lp-brand-dark);
  --tblr-primary-bg-subtle: #fff4e6;
  --tblr-primary-border-subtle: #ffd8a8;
  --tblr-link-color: var(--lp-brand-dark);
  --tblr-link-color-rgb: 217, 72, 15;
  --tblr-link-hover-color: #c2410c;
}

.btn-primary {
  --tblr-btn-bg: var(--lp-brand);
  --tblr-btn-border-color: var(--lp-brand);
  --tblr-btn-hover-bg: var(--lp-brand-dark);
  --tblr-btn-hover-border-color: var(--lp-brand-dark);
  --tblr-btn-active-bg: var(--lp-brand-dark);
  --tblr-btn-active-border-color: var(--lp-brand-dark);
  --tblr-btn-disabled-bg: var(--lp-brand);
  --tblr-btn-disabled-border-color: var(--lp-brand);
}

.btn-outline-primary {
  --tblr-btn-color: var(--lp-brand-dark);
  --tblr-btn-border-color: var(--lp-brand);
  --tblr-btn-hover-bg: var(--lp-brand);
  --tblr-btn-hover-border-color: var(--lp-brand);
  --tblr-btn-active-bg: var(--lp-brand-dark);
}

/* The logo: a peeling label with an AI sparkle (/logo.svg, also the favicon) and "labelpeel". */
.lp-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: #0f172a;
  text-decoration: none;
  letter-spacing: -.035em;
  line-height: 1;
}
.lp-logo:hover { text-decoration: none; color: #0f172a; }
.lp-logo-mark { width: 2rem; height: 2rem; display: block; flex: 0 0 auto; }
.lp-logo-name b { color: var(--lp-brand); font-weight: 800; }

.lp-muted-small { font-size: .8125rem; color: var(--tblr-secondary); }

/* Helper used by pages while something loads. */
.lp-hidden { display: none !important; }

/* The show/hide eye inside password boxes: a slim icon, so the box stays as tall as the others. */
#toggle-password {
  padding: 0 .15rem;
  width: auto;
  height: auto;
  min-height: 0;
  border: 0;
  line-height: 1;
  background: transparent;
}