/* S2 Imaging — Signtech Secure Upload theme
   Inspired by https://www.s2imaging.com/ (navy, orange and bold white type).
   Applies to upload AND admin pages in v1.0.2 or newer.
   Install as: docker/signtech-secure-upload/theme/custom.css
   Save and reload the page. No rebuild or restart is needed.
   No external images, fonts or tracking requests are used.
*/
:root {
  --s2-navy: #161c50;
  --s2-navy-light: #29346c;
  --s2-orange: #ffa200;
  --ink: #19224d;
  --muted: #536079;
  --teal: var(--s2-orange);
  --cream: var(--s2-navy);
  --line: #dce2ed;
  --surface: #ffffff;
  --field: #fafbfe;
  --soft: #edf0f8;
  --drop: #f4f6fc;
  --radius: 16px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-font: var(--font);
}

/* Dark S2-inspired backdrop, with a quiet grid to echo large-format artwork. */
body {
  min-height: 100vh;
  background-color: var(--s2-navy);
  background-image:
    radial-gradient(ellipse at 8% 15%, #344078 0%, transparent 57%),
    linear-gradient(90deg, #ffffff04 1px, transparent 1px),
    linear-gradient(#ffffff04 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
}
header {
  padding-top: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #ffffff26;
}
.wordmark {
  color: #ffffff;
  letter-spacing: .09em;
  border-left: 4px solid var(--s2-orange);
  padding-left: 14px;
}
.wordmark span { color: #ffbf50; }
.header-badges { gap: 14px; }
.pilot { color: #ffffff; border-color: #ffffff4d; background: #ffffff06; }
.tls-badge { color: #ffbf50; }

/* Upload-page introduction. Keep these rules scoped away from admin cards. */
.intro { padding-top: 24px; }
.intro .eyebrow {
  color: #ffbf50;
  letter-spacing: .19em;
  font-size: 11px;
}
.intro h1 {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 62px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.intro > p:not(.eyebrow) { color: #e0e5f5; }
.intro strong { color: #ffffff; }
.limits { color: #e0e5f5; border-color: #ffffff33; }

/* White working surfaces give artwork forms and admin details clear contrast. */
.panel {
  border: 1px solid #ffffff40;
  border-top: 4px solid var(--s2-orange);
  box-shadow: 0 24px 64px #070c2f40;
}
.panel h1, .panel h2, legend { color: var(--ink); }
.panel h2 { font-weight: 800; }
.panel a { color: #945000; }
label { color: #273354; }
input, textarea { border-color: #c9d1e3; border-radius: 8px; }
input:focus, textarea:focus, button:focus-visible, .dropzone:focus-within {
  outline: 3px solid #bb7000;
  outline-offset: 3px;
}
button {
  color: var(--s2-navy);
  font-weight: 800;
  border-radius: 8px;
  transition: background-color .15s ease, box-shadow .15s ease;
}
button:hover:not(:disabled) { background: #ffb62e; box-shadow: 0 3px 12px #161c5014; }
button:disabled { opacity: .6; }
button.quiet { background: var(--soft); color: #283461; }
button.quiet:hover:not(:disabled) { background: #dfe5f2; }
.dropzone { border-color: #9aa8ce; background: var(--drop); }
.dropzone strong { color: var(--ink); }
.dropzone span { color: #536079; }
.dropzone .plus { color: #a55d00; }
.dropzone.drag { background: #fff1d7; border-color: #a55d00; }
.notice { background: #fff4df; border: 1px solid #edcf97; }
.notice p { color: #66502c; }
progress { accent-color: #b56a00; }
#status.error { color: #a12626; }
#success .eyebrow { color: #945000; }

/* Same brand palette in admin; retain the Administration label and clear rows. */
.admin h1 { letter-spacing: -.035em; }
.submission { background: #fcfdff; border-color: #dce2ed; border-left: 3px solid #d59326; }
.submission summary { color: #20295c; }
.submission pre { font-family: var(--font); color: #3c4866; }
.mail { color: #3c4866; }
footer { color: #cbd3ec; }
footer a { color: #ffbf50; text-underline-offset: 3px; }

@media (max-width: 800px) {
  header { padding-top: 20px; padding-bottom: 20px; }
  .intro { padding-top: 16px; }
  .intro h1 { font-size: clamp(34px, 7vw, 50px); }
  .intro .limits { margin-top: 20px; padding-bottom: 6px; }
}
@media (max-width: 440px) {
  .wordmark { font-size: 18px; padding-left: 10px; }
  .wordmark span { font-size: 9px; }
  .header-badges { gap: 8px; }
  .panel { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}