/*
 * signs.css
 * Eight sign style themes + split-flap display CSS.
 * All signs are designed to be captured cleanly by html2canvas.
 */

/* ===================================================================
   Shared base
   =================================================================== */
.sign {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  font-family: "Impact", "Arial Narrow", Arial, sans-serif;
  /* Fixed aspect ratio: signs are roughly 3:4 (w:h) */
  width: 320px;
  min-height: 400px;
  padding: 28px 24px 32px;
  position: relative;
  box-sizing: border-box;
}

.sign .sign-number {
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -2px;
  display: block;
}

.sign .sign-since-label {
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
  display: block;
}

.sign .sign-unit {
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.04em;
  display: block;
}

.sign .sign-title-row {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-top: 10px;
}

/* "SINCE" word — shown between unit and title on all signs */
.sign .sign-since-word {
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  line-height: 1;
  display: block;
  margin-top: 6px;
  margin-bottom: 2px;
}

.sign-white .sign-since-word,
.sign-black .sign-since-word,
.sign-minimal .sign-since-word  { color: #1a1a1a; }
.sign-green .sign-since-word,
.sign-blue .sign-since-word,
.sign-red .sign-since-word       { color: #ffffff; }
.sign-yellow .sign-since-word,
.sign-orange .sign-since-word    { color: #1a1a1a; }
.sign-black .sign-since-word     { color: #9e9e9e; }
.sign-minimal .sign-since-word   { color: #9e9e9e; }
.sign-love .sign-since-word,
.sign-patriotic-us .sign-since-word,
.sign-patriotic-mx .sign-since-word { color: #ffffff; }
.sign-birth-girl .sign-since-word   { color: #c2185b; }
.sign-birth-boy .sign-since-word    { color: #1565c0; }
.sign-wedding .sign-since-word      { color: #a0896b; }
.sign-patriotic-ca .sign-since-word { color: #D80621; }

/* Number box — the white square on green/yellow signs */
.sign .sign-number-box {
  background: #fff;
  margin: 12px auto 8px;
  padding: 8px 20px;
  display: inline-block;
  min-width: 120px;
}

/* ===================================================================
   Background overlay div
   Replaces CSS ::before pseudo-elements for html2canvas compatibility.
   Injected as the first child of every .sign div.
   =================================================================== */

/* Hidden by default; only themed signs enable it */
.sign .sign-bg-overlay {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}

/* White sign: red accent bar at top */
.sign-white .sign-bg-overlay {
  display: block;
  bottom: auto;
  height: 8px;
  background: #cc0000;
}

/* Yellow/Orange: stripes live on the sign's own background-image so
   html2canvas renders them correctly (it mishandles z-index on child divs). */
.sign-yellow .sign-bg-overlay,
.sign-orange .sign-bg-overlay { display: none; }

/* ===================================================================
   Style 1: White / Industrial
   Classic workplace safety board — white background, black text,
   red accent line at top.
   =================================================================== */
.sign-white {
  background: #ffffff;
  border: 4px solid #1a1a1a;
  box-shadow: 4px 4px 0 #aaa;
}

.sign-white .sign-number {
  color: #1a1a1a;
  font-size: 6rem;
  align-self: stretch;
  text-align: center;
}

.sign-white .sign-since-label {
  color: #1a1a1a;
}

.sign-white .sign-unit {
  color: #1a1a1a;
}

.sign-white .sign-title-row {
  color: #1a1a1a;
}

/* ===================================================================
   Style 2: Green / Safety
   OSHA-style safety sign — green background, white text, white box
   for the number.
   =================================================================== */
.sign-green {
  background: #2e7d32;
  border: 5px solid #1b5e20;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.sign-green .sign-number-box {
  background: #fff;
  padding: 10px 24px;
  margin: 8px 0;
  align-self: stretch;
  text-align: center;
}

.sign-green .sign-number {
  color: #1b5e20;
  font-size: 5.5rem;
}

.sign-green .sign-since-label {
  color: #ffffff;
}

.sign-green .sign-unit {
  color: #ffffff;
}

.sign-green .sign-title-row {
  color: #ffffff;
}

/* ===================================================================
   Style 3: Yellow / Hazard
   Caution-tape style — yellow background with diagonal black stripes
   border, black text.
   =================================================================== */
.sign-yellow {
  background-color: #fdd835;
  background-image: linear-gradient(
    -45deg,
    #1a1a1a 25%, #fdd835 25%,
    #fdd835 50%, #1a1a1a 50%,
    #1a1a1a 75%, #fdd835 75%
  );
  background-size: 40px 40px;
  border: 6px solid #1a1a1a;
  position: relative;
  overflow: hidden;
}

/* sign-inner floats naturally above background-image; no z-index needed */
.sign-yellow .sign-inner {
  background: #fdd835;
  width: calc(100% - 28px);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sign-yellow .sign-number-box {
  background: #fff;
  padding: 10px 20px;
  margin: 8px 0;
  align-self: stretch; /* fill sign-inner width; yellow pad = sign-inner's 16px side padding */
}

.sign-yellow .sign-number {
  color: #1a1a1a;
  font-size: 5.5rem;
}

.sign-yellow .sign-since-label {
  color: #1a1a1a;
}

.sign-yellow .sign-unit {
  color: #1a1a1a;
}

.sign-yellow .sign-title-row {
  color: #1a1a1a;
}

/* ===================================================================
   Style 4: Blue / Compliance
   ANSI informational blue — professional/corporate feel.
   =================================================================== */
.sign-blue {
  background: #1565c0;
  border: 5px solid #0d47a1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.sign-blue .sign-number-box {
  background: #fff;
  padding: 10px 24px;
  margin: 8px 0;
  align-self: stretch;
  text-align: center;
}

.sign-blue .sign-number  { color: #1565c0; font-size: 5.5rem; }
.sign-blue .sign-since-label,
.sign-blue .sign-unit,
.sign-blue .sign-title-row { color: #ffffff; }

/* ===================================================================
   Style 5: Red / Emergency
   High-urgency — outages, safety incidents, emergencies.
   =================================================================== */
.sign-red {
  background: #c62828;
  border: 5px solid #b71c1c;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.sign-red .sign-number-box {
  background: #fff;
  padding: 10px 24px;
  margin: 8px 0;
  align-self: stretch;
  text-align: center;
}

.sign-red .sign-number  { color: #c62828; font-size: 5.5rem; }
.sign-red .sign-since-label,
.sign-red .sign-unit,
.sign-red .sign-title-row { color: #ffffff; }

/* ===================================================================
   Style 6: Black / Chalkboard
   Dark background, off-white text — casual / pub-board aesthetic.
   =================================================================== */
.sign-black {
  background: #1a1a1a;
  border: 4px solid #333;
  box-shadow: 4px 4px 0 #000;
}

.sign-black .sign-number  { color: #f5f5f5; font-size: 6rem; align-self: stretch; text-align: center; }
.sign-black .sign-since-label { color: #e0e0e0; }
.sign-black .sign-unit        { color: #e0e0e0; }
.sign-black .sign-title-row   { color: #e0e0e0; }

/* ===================================================================
   Style 7: Orange / Construction
   Construction-site tape style — orange with diagonal black stripes.
   =================================================================== */
.sign-orange {
  background-color: #f57c00;
  background-image: linear-gradient(
    -45deg,
    #1a1a1a 25%, #f57c00 25%,
    #f57c00 50%, #1a1a1a 50%,
    #1a1a1a 75%, #f57c00 75%
  );
  background-size: 40px 40px;
  border: 6px solid #1a1a1a;
  position: relative;
  overflow: hidden;
}

.sign-orange .sign-inner {
  background: #f57c00;
  width: calc(100% - 28px);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sign-orange .sign-number-box {
  background: #fff;
  padding: 10px 20px;
  margin: 8px 0;
  align-self: stretch;
}

.sign-orange .sign-number     { color: #1a1a1a; font-size: 5.5rem; }
.sign-orange .sign-since-label,
.sign-orange .sign-unit,
.sign-orange .sign-title-row  { color: #1a1a1a; }

/* ===================================================================
   Style 8: Minimal / Clean
   Off-white, no decorative border — understated, editorial feel.
   =================================================================== */
.sign-minimal {
  background: #fafafa;
  border: 2px solid #e0e0e0;
  box-shadow: none;
}

.sign-minimal .sign-number        { color: #212121; font-size: 6rem; align-self: stretch; text-align: center; }
.sign-minimal .sign-since-label   { color: #616161; font-size: 1.2rem; }
.sign-minimal .sign-unit          { color: #424242; }
.sign-minimal .sign-title-row     { color: #424242; }

/* ===================================================================
   Split-flap display  (animation_style = split-flap)
   Replaces the .since-number span content with individual digit cards.
   =================================================================== */
.flap-display {
  display: inline-flex;
  gap: 4px;
  background: #111;
  padding: 6px;
  border-radius: 5px;
  line-height: 1;
}

.flap-digit {
  position: relative;
  width: 52px;
  height: 76px;
  border-radius: 4px;
  overflow: hidden;
  font-family: "Impact", "Arial Narrow", Arial, sans-serif;
  font-size: 3.5rem;
  color: #ffffff;
}

/* Top half of the digit card.
   The inner <span> uses line-height: 76px (full digit height), so it starts
   at y=0 of the digit. overflow:hidden at 38px clips the bottom half off. */
.flap-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: #2a2a2a;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

/* Bottom half of the digit card.
   The inner <span> has margin-top:-38px so it starts at y=0 of the digit
   (same origin as .flap-top's span). overflow:hidden at 38px clips the top
   half off, leaving only the bottom half of the character visible. */
.flap-bot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: #222;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  border-top: 2px solid #111;
}

/* Animated fold: sits over the top half, rotates away to reveal new value */
.flap-fold-wrap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  z-index: 4;
  perspective: 200px;
}

.flap-fold {
  position: absolute;
  inset: 0;
  background: #2a2a2a;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  transform-origin: bottom center;
  backface-visibility: hidden;
}

@keyframes flapFold {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(-90deg); }
}

.flap-fold.flip {
  animation: flapFold 0.13s ease-in forwards;
}

/* Character spans inside each half.
   All share the same 76px line-height (= full digit height) so both halves
   reference the same y-origin. .flap-bot's span shifts up by 38px so that
   overflow:hidden exposes only the bottom half of the glyph. */
.flap-top > span,
.flap-fold > span {
  display: block;
  line-height: 76px;
  text-align: center;
}

.flap-bot > span {
  display: block;
  line-height: 76px;
  text-align: center;
  margin-top: -38px;
}

/* Comma separator between digit groups */
.flap-sep {
  display: flex;
  align-items: flex-end;
  padding-bottom: 10px;
  color: #ffffff;
  font-family: "Impact", "Arial Narrow", Arial, sans-serif;
  font-size: 2.5rem;
  opacity: 0.6;
}

/* ===================================================================
   Odometer display  (animation_style = odometer)
   Each digit column is a fixed-height clip window; the strip (flex col)
   slides up/down to reveal the correct digit.
   ODO_DIGIT_H in timer.js must match .odo-digit height (70px).
   =================================================================== */
.odo-display {
  display: inline-flex;
  align-items: stretch;
  gap: 3px;
  background: #111;
  padding: 8px 10px;
  border-radius: 6px;
}

.odo-col {
  width: 44px;
  height: 72px;
  overflow: hidden;
  background: #2a2a2a;
  border-radius: 4px;
  border-right: 1px solid rgba(255,255,255,0.1);
}

/* Strip uses flex column so each digit is exactly its own height;
   translateY scrolls the strip without any positioning quirks.
   transitionDuration is set by JS (fast for seconds, slow for larger units). */
.odo-strip {
  display: flex;
  flex-direction: column;
}

.odo-digit {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Impact", "Arial Narrow", Arial, sans-serif;
  font-size: 3.1rem;
  color: #f5f5f5;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.odo-sep {
  align-self: center;
  font-family: "Impact", "Arial Narrow", Arial, sans-serif;
  font-size: 2rem;
  color: rgba(255,255,255,0.5);
  padding: 0 2px;
}

/* ===================================================================
   Sign emblem — SVG icon above the number on themed signs.
   Rendered as an <img> element for html2canvas compatibility.
   =================================================================== */
.sign .sign-emblem {
  display: block;
  margin-bottom: 8px;
  line-height: 0;
}
.sign .sign-emblem-img {
  display: block;
  object-fit: contain;
  /* default size — overridden per theme below */
  width: 80px;
  height: 72px;
}

/* Per-theme emblem sizing */
.sign-love         .sign-emblem-img { width: 72px;  height: 64px;  }
.sign-birth-girl   .sign-emblem-img { width: 60px;  height: 84px;  }
.sign-birth-boy    .sign-emblem-img { width: 60px;  height: 84px;  }
.sign-wedding      .sign-emblem-img { width: 96px;  height: 60px;  }
/* flag-icons 4x3 aspect ratio (4:3) */
.sign-patriotic-us .sign-emblem,
.sign-patriotic-ca .sign-emblem,
.sign-patriotic-mx .sign-emblem {
  background: #fff;
  padding: 4px;
  border-radius: 2px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.55);
}
.sign-patriotic-us .sign-emblem-img,
.sign-patriotic-ca .sign-emblem-img,
.sign-patriotic-mx .sign-emblem-img { width: 108px; height: auto; display: block; }

/* ===================================================================
   Style 9: Love / Romance
   Deep rose — anniversaries, relationships, personal milestones.
   =================================================================== */
.sign-love {
  background-color: #d81b60;
  /* Repeating heart tile — same data-URL technique as yellow/orange stripes */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='44'%3E%3Cpath fill='%23880e4f' opacity='0.28' d='M24 40 C24 40 3 26 3 13 C3 6 9 2 16 2 C20 2 22 4 24 8 C26 4 28 2 32 2 C39 2 45 6 45 13 C45 26 24 40 24 40Z'/%3E%3C/svg%3E");
  background-size: 48px 44px;
  border: 5px solid #880e4f;
  box-shadow: 0 4px 16px rgba(136,14,79,0.35);
}

.sign-love .sign-number-box {
  background: #fff;
  padding: 10px 24px;
  margin: 8px 0;
  align-self: stretch;
  text-align: center;
}

.sign-love .sign-number  { color: #880e4f; font-size: 5.5rem; }
.sign-love .sign-since-label,
.sign-love .sign-unit,
.sign-love .sign-title-row { color: #ffffff; }

/* ===================================================================
   Style 10: Birth — Baby Girl
   Soft pink pastels — baby girl arrivals and birthdays.
   =================================================================== */
.sign-birth-girl {
  background: #fce4ec;
  border: 3px solid #f48fb1;
  box-shadow: 0 2px 12px rgba(244,143,177,0.3);
}

.sign-birth-girl .sign-number     { color: #c2185b; font-size: 6rem; align-self: stretch; text-align: center; }
.sign-birth-girl .sign-since-label,
.sign-birth-girl .sign-unit,
.sign-birth-girl .sign-title-row  { color: #c2185b; }

/* ===================================================================
   Style 11: Birth — Baby Boy
   Soft sky blue — baby boy arrivals and birthdays.
   =================================================================== */
.sign-birth-boy {
  background: #e3f2fd;
  border: 3px solid #42a5f5;
  box-shadow: 0 2px 12px rgba(66,165,245,0.3);
}

.sign-birth-boy .sign-number     { color: #1565c0; font-size: 6rem; align-self: stretch; text-align: center; }
.sign-birth-boy .sign-since-label,
.sign-birth-boy .sign-unit,
.sign-birth-boy .sign-title-row  { color: #1565c0; }

/* ===================================================================
   Style 12: Wedding / Anniversary
   Ivory and gold — weddings, anniversaries, formal milestones.
   =================================================================== */
.sign-wedding {
  background: #fffde7;
  border: 3px solid #d4af37;
  box-shadow: 0 4px 20px rgba(212,175,55,0.2);
}

.sign-wedding .sign-number       { color: #8b6914; font-size: 6rem; align-self: stretch; text-align: center; }
.sign-wedding .sign-since-label,
.sign-wedding .sign-title-row    { color: #795548; }
.sign-wedding .sign-unit         { color: #8b6914; }

/* ===================================================================
   Style 13: Patriotic — United States
   Old Glory Blue and Red — American patriotic occasions.
   =================================================================== */
.sign-patriotic-us {
  background: #002868;
  border: 5px solid #BF0A30;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.sign-patriotic-us .sign-number-box {
  background: #fff;
  padding: 10px 24px;
  margin: 8px 0;
  align-self: stretch;
  text-align: center;
}

.sign-patriotic-us .sign-number  { color: #002868; font-size: 5.5rem; }
.sign-patriotic-us .sign-since-label,
.sign-patriotic-us .sign-unit,
.sign-patriotic-us .sign-title-row { color: #ffffff; }

/* ===================================================================
   Style 14: Patriotic — Canada
   Maple Leaf Red and White — Canadian patriotic occasions.
   =================================================================== */
.sign-patriotic-ca {
  background: #ffffff;
  border: 8px solid #D80621;
  box-shadow: none;
}

.sign-patriotic-ca .sign-number      { color: #D80621; font-size: 6rem; align-self: stretch; text-align: center; }
.sign-patriotic-ca .sign-since-label,
.sign-patriotic-ca .sign-unit,
.sign-patriotic-ca .sign-title-row   { color: #D80621; }

/* ===================================================================
   Style 15: Patriotic — Mexico
   Mexican flag green and red — Mexican patriotic occasions.
   =================================================================== */
.sign-patriotic-mx {
  background: #006847;
  border: 5px solid #CE1126;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.sign-patriotic-mx .sign-number-box {
  background: #fff;
  padding: 10px 24px;
  margin: 8px 0;
  align-self: stretch;
  text-align: center;
}

.sign-patriotic-mx .sign-number  { color: #006847; font-size: 5.5rem; }
.sign-patriotic-mx .sign-since-label,
.sign-patriotic-mx .sign-unit,
.sign-patriotic-mx .sign-title-row { color: #ffffff; }

/* ===================================================================
   Style selector chips  (used on new/edit forms)
   =================================================================== */
/* ===================================================================
   Responsive sign scaling
   .sign-scale-wrap scales the fixed-size sign to fit its container.
   Uses CSS container queries — works on the view page (narrow mobile)
   and on form preview columns (desktop layout narrower than 320 px).
   The sign's pixel dimensions are unchanged for PNG export; only the
   visual presentation is adjusted via transform + negative margin.
   =================================================================== */
.sign-scale-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  container-type: inline-size;
}

@container (max-width: 319px) {
  .sign-scale-wrap > .sign {
    transform-origin: top center;
    transform: scale(calc(100cqw / 320));
    /* Collapse the empty layout space left below the scaled-down sign.
       Ratio 1.25 = sign min-height (400 px) ÷ sign width (320 px). */
    margin-bottom: calc(100cqw * 1.25 - 400px);
  }
}

/* ===================================================================
   Sign selector chips  (used on new/edit forms)
   =================================================================== */
.sign-chip               { border-color: #d1d5db; color: #374151; background: #f9fafb; }
.sign-chip-white         { border-color: #1a1a1a; background: #ffffff; color: #1a1a1a; }
.sign-chip-green         { border-color: #1b5e20; background: #2e7d32; color: #ffffff; }
.sign-chip-yellow        { border-color: #f9a825; background: #fdd835; color: #1a1a1a; }
.sign-chip-blue          { border-color: #0d47a1; background: #1565c0; color: #ffffff; }
.sign-chip-red           { border-color: #b71c1c; background: #c62828; color: #ffffff; }
.sign-chip-black         { border-color: #333333; background: #1a1a1a; color: #f5f5f5; }
.sign-chip-orange        { border-color: #e65100; background: #f57c00; color: #1a1a1a; }
.sign-chip-minimal       { border-color: #e0e0e0; background: #fafafa; color: #616161; }
.sign-chip-love          { border-color: #880e4f; background: #d81b60; color: #ffffff; }
.sign-chip-birth-girl    { border-color: #f48fb1; background: #fce4ec; color: #c2185b; }
.sign-chip-birth-boy     { border-color: #42a5f5; background: #e3f2fd; color: #1565c0; }
.sign-chip-wedding       { border-color: #d4af37; background: #fffde7; color: #8b6914; }
.sign-chip-patriotic-us  { border-color: #BF0A30; background: #002868; color: #ffffff; }
.sign-chip-patriotic-ca  { border-color: #D80621; background: #ffffff; color: #D80621; }
.sign-chip-patriotic-mx  { border-color: #CE1126; background: #006847; color: #ffffff; }