.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Stop mobile browsers rescaling text on their own.
 *
 * iOS Safari and Chrome on Android inflate text they judge too small for the viewport.
 * The inflation is per-block and font-size-dependent, so a phone rendered the
 * registration form at a different size and apparent weight from the desktop even
 * though the CSS was identical - which is what made the mobile version look bold.
 *
 * text-size-adjust was already set, but only on .textLayer (the PDF viewer), so every
 * other page was still being adjusted. Setting it here covers the whole app.
 *
 * Safe because the layout is already responsive: the media queries size the form for
 * small screens, and the browser's guess was fighting them. */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* PDF.js Text Layer - make text transparent (used for text selection only) */
.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.25;
  line-height: 1.0;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

.textLayer span,
.textLayer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  transform-origin: 0% 0%;
}

.textLayer span::selection {
  background: rgba(0, 0, 255, 0.3);
}

/* Allow native two-finger pinch-zoom (needed to zoom the PDF form on iPad),
   while `manipulation` still removes the 300ms double-tap delay. Do NOT set
   plain `manipulation` alone — it disables pinch-zoom. */
html {
  touch-action: pan-x pan-y pinch-zoom;
}

/* PDF and Signature Modal Styles */
.signature-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.signature-modal {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 700px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.signature-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.signature-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.signature-modal-header button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signature-pad-container {
  margin: 1rem 0;
}

.signature-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

/* Both footer buttons must share one shape. The global .btn-primary further down
   only sets colours because it is designed to be paired with .btn; used on its
   own (as SignatureField does) it rendered "Save Signature" with no padding or
   radius, so it looked nothing like the "Clear" button beside it.
   Scoped to this footer so no other page is affected. */
.signature-modal-footer .btn-primary,
.signature-modal-footer .btn-secondary {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
}

.signature-modal-footer .btn-primary {
  background: #004085;
}

.signature-modal-footer .btn-primary:hover {
  background: #003366;
}

.signature-modal-footer .btn-secondary {
  background: #6c757d;
}

.signature-modal-footer .btn-secondary:hover {
  background: #5a6268;
}

/* ── My Submissions security gate ─────────────────────────────────────── */

/* Card entrance: a short rise + fade so the panel does not appear abruptly. */
.sec-gate-card {
  animation: secGateIn 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes secGateIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* Lock icon settles a moment after the card, drawing the eye to the purpose
   of the dialog before the user looks at the inputs. */
.sec-gate-icon {
  animation: secGatePop 0.32s cubic-bezier(0.2, 1.3, 0.4, 1) 0.06s both;
}

@keyframes secGatePop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Each box fades in slightly after the previous one. The per-box delay is set
   inline via --i so the stagger stays in step with CODE_LENGTH. */
.sec-gate-box {
  animation: secGateBoxIn 0.24s ease-out both;
  animation-delay: calc(0.10s + var(--i, 0) * 0.05s);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

@keyframes secGateBoxIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sec-gate-box:focus {
  border-color: #273947;
  box-shadow: 0 0 0 3px rgba(39, 55, 71, 0.12);
}

/* A filled box nudges up a fraction, confirming the keystroke registered. */
.sec-gate-box:not(:placeholder-shown) {
  transform: translateY(-1px);
}

/* Wrong code: shake the row rather than only recolouring, so the feedback is
   noticeable without needing a coloured alert panel. */
.sec-gate-row-error {
  animation: secGateShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes secGateShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* Error text slides down into place instead of popping in. */
.sec-gate-error {
  animation: secGateErrorIn 0.22s ease-out both;
}

@keyframes secGateErrorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sec-gate-btn {
  transition: background 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
}

.sec-gate-btn:hover:not(:disabled) { background: #00647f; }
.sec-gate-btn:active:not(:disabled) { transform: translateY(1px); }
.sec-gate-btn:disabled { opacity: 0.7; cursor: default; }

/* Respect the OS "reduce motion" setting: keep the states, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .sec-gate-card,
  .sec-gate-icon,
  .sec-gate-box,
  .sec-gate-row-error,
  .sec-gate-error {
    animation: none;
  }
  .sec-gate-box,
  .sec-gate-btn {
    transition: none;
  }
  .sec-gate-box:not(:placeholder-shown) {
    transform: none;
  }
}

.btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

.btn-secondary:hover {
  background: #5a6268;
}

.btn-icon {
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #999;
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* PDF Field Styles */
.pdf-text-field,
.pdf-date-field {
  box-sizing: border-box;
}

/* Flatpickr static mode: ensure the wrapper fills the date field container */
.flatpickr-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
}

.flatpickr-wrapper > input {
  flex: 1;
  min-width: 0;
}

/* Flatpickr calendar dropdown: ensure it appears above other fields on mobile */
.flatpickr-calendar {
  z-index: 10000 !important;
  /* The date input's font-size is scaled with the PDF zoom, and flatpickr sizes
     the whole calendar in em, so it would inherit that zoom and become huge.
     Pin a fixed font-size so the popup calendar stays a normal, usable size at
     any PDF zoom level. */
  font-size: 14px !important;
}

/* Keep the calendar's own controls at their natural size regardless of the
   zoomed date field they belong to. */
.flatpickr-calendar,
.flatpickr-calendar * {
  line-height: normal;
}

.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-weekday,
.flatpickr-calendar .flatpickr-day {
  font-size: 14px !important;
}

.pdf-checkbox-field,
.pdf-radio-field {
  box-sizing: border-box;
  user-select: none;
}

.pdf-checkbox-field.checked,
.pdf-radio-field.checked {
  background-color: #fff !important;
}

.pdf-signature-field {
  box-sizing: border-box;
}

:root {
  --primary-color: #004085;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  --border-radius: 8px;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.app-header {
  background: var(--primary-color);
  color: white;
  padding: 2rem 0;
  box-shadow: var(--box-shadow);
}

.header-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.header-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Main Content */
.main-content {
  padding: 2rem 0;
  min-height: calc(100vh - 200px);
}

.welcome-section {
  text-align: center;
  margin-bottom: 3rem;
}

.welcome-section h1 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.welcome-section p {
  font-size: 1.2rem;
  color: var(--secondary-color);
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Form Card */
.form-card {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.form-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form-card-header {
  background: var(--primary-color);
  color: white;
  padding: 1rem;
}

.form-card-header h3 {
  font-size: 1.2rem;
  margin: 0;
}

.form-card-body {
  padding: 1rem;
}

.form-description {
  color: var(--secondary-color);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.form-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.form-card-footer {
  padding: 1rem;
  border-top: 1px solid #e9ecef;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge-success {
  background: var(--success-color);
  color: white;
}

.badge-info {
  background: var(--info-color);
  color: white;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: #004085;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #003366;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #5a6268;
}

.btn-block {
  display: block;
  width: 100%;
}

/* Login Page */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
}

.login-box {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  padding: 2rem;
  width: 100%;
  max-width: 400px;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-header h1 {
  color: var(--primary-color);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.login-header h2 {
  color: var(--secondary-color);
  font-size: 1.2rem;
  font-weight: 400;
}

.login-form {
  margin-bottom: 1rem;
}

.form-group {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 14px;
  color: var(--dark-color);
}

.form-group input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  padding: 0.75rem;
  font-size: 14px;
  border: 1px solid #ced4da;
  border-radius: var(--border-radius);
  transition: border-color 0.2s;
}

.form-group input:not([type="radio"]):not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 64, 133, 0.1);
}

.login-footer {
  text-align: center;
  margin-top: 1rem;
}

.login-footer a {
  color: var(--primary-color);
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}

/* Alerts */
.alert {
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.login-container--mockup {
  background: #0f7892;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.login-card-top {
  background: linear-gradient(180deg, #0f6f87 0%, #0c6a82 100%);
  padding: 28px 32px 24px;
  text-align: center;
}

.login-card-top--compact {
  padding-bottom: 20px;
}

.login-brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.login-portal-logo {
  width: 104px;
  max-width: 100%;
  background: #ffffff;
  border-radius: 6px;
  padding: 6px 10px;
}

.login-portal-title {
  margin: 0;
  color: #ffffff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.login-portal-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1rem;
}

.login-card-body {
  padding: 28px 30px;
}

.login-card-body--welcome {
  text-align: center;
}

.login-centered-message {
  text-align: center;
  color: #4b5563;
}

.login-form--mockup {
  margin-bottom: 0;
}

.login-form-group {
  margin-bottom: 20px;
}

.login-form-group label {
  margin-bottom: 8px;
  color: #2f2f2f;
  font-weight: 500;
}

.login-input-shell {
  display: flex;
  align-items: center;
  min-height: 52px;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-input-shell:focus-within {
  border-color: #0f6f87;
  box-shadow: 0 0 0 3px rgba(15, 111, 135, 0.12);
}

.login-input-icon {
  flex: 0 0 auto;
  width: 44px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a94a3;
  opacity: 1;
}

.login-inline-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.login-inline-icon--eye {
  width: 20px;
  height: 20px;
}

.login-mock-input {
  border: none !important;
  box-shadow: none !important;
  padding: 0.9rem 0.25rem 0.9rem 0 !important;
  background: transparent;
}

.login-mock-input:focus {
  box-shadow: none !important;
}

.login-mock-input--with-toggle {
  padding-right: 0 !important;
}

.login-password-toggle {
  border: none;
  background: transparent;
  color: #7b8794;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.login-password-toggle:disabled {
  cursor: not-allowed;
}

.login-submit-btn {
  min-height: 44px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  background: #0f6f87;
}

.login-submit-btn:hover:not(:disabled) {
  background: #0b6176;
}

.login-secondary-btn {
  background-color: transparent !important;
  color: #5b6773 !important;
  border: 1px solid #d5dde5 !important;
  cursor: pointer;
  border-radius: 8px;
}

.login-secondary-btn:hover:not(:disabled) {
  background: #f7fafc;
}

.login-helper-panel {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f5f8fb;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.5;
}

.login-helper-text {
  color: #5b6773;
}

.login-alert {
  margin-bottom: 16px;
}

.login-card-footer {
  border-top: 1px solid #e5ebf0;
  padding: 22px 30px 28px;
  text-align: center;
}

.login-card-footer p {
  margin: 0 0 18px;
  color: #6b7280;
  font-size: 0.95rem;
}

@media (max-width: 480px) {
  .login-container--mockup {
    padding: 16px;
  }

  .login-card-body,
  .login-card-footer,
  .login-card-top {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Loading */
.loading-container {
  text-align: center;
  padding: 3rem;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error Message */
.error-message {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.error-message p {
  color: var(--danger-color);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* No Forms */
.no-forms {
  text-align: center;
  padding: 3rem;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.no-forms p {
  color: var(--secondary-color);
  font-size: 1.1rem;
}

/* Admin Styles */
.admin-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.admin-header {
  background: var(--primary-color);
  color: white;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--box-shadow);
}

.admin-header h1 {
  font-size: 1.8rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-content {
  display: flex;
  min-height: calc(100vh - 80px);
}

.admin-nav {
  width: 250px;
  background: white;
  padding: 1rem;
  box-shadow: var(--box-shadow);
}

.nav-link {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--dark-color);
  text-decoration: none;
  border-radius: var(--border-radius);
  margin-bottom: 0.5rem;
  transition: background 0.2s;
}

.nav-link:hover {
  background: var(--light-color);
}

.admin-main {
  flex: 1;
  padding: 2rem;
}

/* ==================== DASHBOARD VIEW ==================== */
.dashboard-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f5f7fa;
}

/* Dashboard Header */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  z-index: 100;
}

.dashboard-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dashboard-header-left svg {
  width: 28px;
  height: 28px;
}

.dashboard-header-left h1 {
  font-size: 1.1rem;
  color: #333;
  font-weight: 700;
}

.dashboard-header-center {
  flex: 1;
  max-width: 500px;
  margin: 0 2rem;
}

.dashboard-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* User Menu */
.user-menu {
  position: relative;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: #333;
  transition: all 0.15s;
}

.user-menu-btn:hover {
  background: #f5f5f5;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0e7c8c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 200px;
  z-index: 200;
  padding: 0.5rem 0;
  animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-info {
  padding: 0.5rem 1rem;
}

.user-dropdown-info strong {
  display: block;
  font-size: 0.9rem;
}

.user-dropdown-info small {
  color: #888;
  font-size: 0.8rem;
}

.user-dropdown hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 0.25rem 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.85rem;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

.dropdown-item.logout {
  color: #dc3545;
}

/* Dashboard Body */
.dashboard-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar */
.dashboard-sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-section {
  padding: 1rem;
  flex: 1;
}

.sidebar-section h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.folder-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #555;
  transition: all 0.15s;
  margin-bottom: 2px;
}

.folder-item:hover {
  background: #f0f2f5;
}

.folder-item.active {
  background: #e8edff;
  color: #4361ee;
  font-weight: 600;
}

.folder-item svg {
  flex-shrink: 0;
}

/* Drag and drop styles for folder reordering */
.folder-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.folder-item.drag-over {
  background: #d1e7ff;
  border: 2px dashed #4361ee;
  transform: scale(1.02);
}

.folder-clinic-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.75rem 0.75rem 0.25rem;
  margin-top: 0.5rem;
  transition: all 0.2s ease;
  border-radius: 4px;
  cursor: move;
  user-select: none;
}

.folder-clinic-header:hover {
  background-color: rgba(0, 0, 0, 0.03);
  color: #555;
}

.folder-clinic-header.drag-over {
  background-color: rgba(0, 123, 255, 0.1);
  border: 2px dashed #007bff;
  padding: calc(0.75rem - 2px) calc(0.75rem - 2px) calc(0.25rem - 2px);
}

.folder-clinic-header.dragging {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Dashboard Content */
.dashboard-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* Document Grid */
.document-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Document Card */
.doc-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.doc-card:hover {
  border-color: #4361ee;
  box-shadow: 0 4px 16px rgba(67,97,238,0.12);
  transform: translateY(-2px);
}

.doc-card-thumb {
  width: 100%;
  height: 200px;
  background: #f5f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
}

.doc-card-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.doc-card-thumb .thumb-placeholder {
  color: #ccc;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.thumb-loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e0e0e0;
  border-top-color: #999;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.doc-card-info {
  padding: 0.75rem;
}

.doc-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-card-meta {
  font-size: 0.75rem;
  color: #999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.doc-card-type {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}

.doc-card-type.internal {
  background: #e8f5e9;
  color: #2e7d32;
}

.doc-card-type.external {
  background: #e3f2fd;
  color: #1565c0;
}

/* Card Actions */
.doc-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.doc-card:hover .doc-card-actions {
  display: flex;
}

.doc-card-action-btn {
  padding: 4px 10px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #ddd;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #555;
  transition: all 0.15s;
  white-space: nowrap;
  font-weight: 500;
}

.doc-card-action-btn:hover {
  background: #4361ee;
  color: #fff;
  border-color: #4361ee;
}

/* Trash folder sidebar item */
.folder-item.trash-folder {
}

.folder-item.trash-folder svg {
  color: #9ca3af;
}

.folder-item.trash-folder.active svg {
  color: #dc3545;
}

.folder-item.trash-folder.active {
  background: #fef2f2;
  color: #dc3545;
}

/* Trashed card appearance */
.doc-card.doc-card-trashed {
  opacity: 0.75;
  border-color: #f5c6cb;
}

.doc-card.doc-card-trashed:hover {
  border-color: #dc3545;
  opacity: 1;
}

.doc-card.doc-card-trashed .doc-card-actions {
  display: flex;
}

/* Preview Modal */
.preview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.preview-modal {
  background: #fff;
  border-radius: 8px;
  width: 95%;
  max-width: 1400px;
  height: 95vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.preview-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 1rem;
}

.preview-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-modal-body {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0 0.25rem;
  line-height: 1;
}

.close-btn:hover {
  color: #333;
}

/* Custom Modal */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.custom-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eee;
}

.custom-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}

.custom-modal-body {
  padding: 1.5rem;
}

.form-control {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
}

.form-control:focus {
  outline: none;
  border-color: #4361ee;
  box-shadow: 0 0 0 3px rgba(67,97,238,0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .admin-content {
    flex-direction: column;
  }

  .admin-nav {
    width: 100%;
  }

  .welcome-section h1 {
    font-size: 1.8rem;
  }

  .dashboard-body {
    flex-direction: column;
  }

  .dashboard-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }

  .document-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   FIELD EDITOR STYLES
   ======================================== */

/* Editor Layout - 3 Column */
.editor-layout-3col {
  display: grid;
  grid-template-columns: 250px 1fr 350px;
  gap: 1.5rem;
  min-height: 600px;
}

/* Panel Styles */
.tools-panel,
.pdf-preview-panel,
.fields-list-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Tools Panel (Left) */
.tools-panel {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.tool-section {
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.tool-section:last-child {
  border-bottom: none;
}

.tool-section h3 {
  margin: 0 0 1rem 0;
  color: #333;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tool-section .form-group {
  margin-bottom: 1rem;
}

/* Component List */
.component-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.component-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.component-item:hover:not(.disabled) {
  background: #f5f5f5;
  border-color: #4361ee;
  transform: translateX(4px);
}

.component-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.component-item.active {
  background: #fff3e0;
  border-color: #FF9800;
  border-width: 2px;
}

.component-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.component-label {
  font-size: 0.9rem;
  color: #333;
  font-weight: 500;
}

/* PDF Preview Panel */
.pdf-preview-panel {
  display: flex;
  flex-direction: column;
}

.panel-header {
  background: #f5f5f5;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h2 {
  font-size: 1.2rem;
  color: #333;
  margin: 0;
}

.pdf-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.pdf-canvas-wrapper {
  position: relative;
  overflow: auto;
  max-height: 700px;
  padding: 1rem;
  background: #f9f9f9;
  flex: 1;
}

.pdf-canvas-wrapper.multi-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.pdf-page-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pdf-page-label {
  align-self: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #e8eefc;
  color: #3556b3;
  font-size: 0.8rem;
  font-weight: 600;
}

.pdf-canvas-container {
  position: relative;
  display: block;
  line-height: 0;
  font-size: 0;
  margin: 0 auto;
  width: fit-content;
}

#pdfCanvas {
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  vertical-align: top;
}

/* Field Highlights */
.field-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
}

.field-highlight {
  position: absolute;
  border: 2px solid #4361ee;
  background: rgba(67, 97, 238, 0.1);
  cursor: move;
  pointer-events: all;
  transition: all 0.2s;
  user-select: none;
}

.field-highlight:hover {
  background: rgba(67, 97, 238, 0.2);
  border-color: #4CAF50;
}

.field-highlight.selected {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.2);
  border-width: 3px;
}

/* Resize Handles */
.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 1px solid #4361ee;
  box-sizing: border-box;
  z-index: 10;
}

.resize-handle:hover {
  background: #4361ee;
}

.resize-handle.nw { top: -4px; left: -4px; cursor: nwse-resize; }
.resize-handle.ne { top: -4px; right: -4px; cursor: nesw-resize; }
.resize-handle.sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.resize-handle.se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.resize-handle.n { top: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.s { bottom: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.w { top: 50%; left: -4px; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.e { top: 50%; right: -4px; transform: translateY(-50%); cursor: ew-resize; }

/* Fields List Panel (Right) */
.fields-list-panel {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.fields-list-panel .no-selection {
  padding: 2rem 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

.field-config-form {
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.all-fields-list {
  padding: 1.5rem;
}

.all-fields-list h3 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.all-fields-list .table-wrapper {
  max-height: 400px;
  overflow-y: auto;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

/* Fields Table */
.fields-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.fields-table th,
.fields-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.fields-table th {
  background: #f5f5f5;
  font-weight: 600;
  color: #333;
  position: sticky;
  top: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fields-table tbody tr:hover {
  background: #f9f9f9;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 500;
}

.badge-text { background: #e3f2fd; color: #1976d2; }
.badge-radio { background: #f3e5f5; color: #7b1fa2; }
.badge-checkbox { background: #e8f5e9; color: #388e3c; }
.badge-date { background: #fce4ec; color: #c2185b; }
.badge-signature { background: #e0f2f1; color: #00695c; }

/* Responsive */
@media (max-width: 1400px) {
  .editor-layout-3col {
    grid-template-columns: 220px 1fr 300px;
  }
}

@media (max-width: 1200px) {
  .editor-layout-3col {
    grid-template-columns: 1fr;
  }
  
  .tools-panel,
  .fields-list-panel {
    max-height: 400px;
  }
}

/* ============================================ */
/* FIELD EDITOR PAGE STYLES                     */
/* ============================================ */

.field-editor-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #f0f2f5;
}

/* Editor Toolbar — grid with two equal side tracks keeps the middle group truly
   centred. With flex + space-between the eight right-hand buttons pushed the
   undo/zoom group left of centre. */
.editor-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0.5rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  z-index: 100;
  flex-shrink: 0;
  gap: 0.5rem;
}

.toolbar-left,
.toolbar-center,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.toolbar-left {
  justify-self: start;
}

.toolbar-center {
  justify-self: center;
}

.toolbar-right {
  justify-self: end;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.editor-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #111827;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-info {
  font-size: 0.85rem;
  color: #6b7280;
  white-space: nowrap;
}

.toolbar-divider-v {
  width: 1px;
  height: 20px;
  background: #e5e7eb;
  margin: 0 4px;
}

/* Editor Content - 3 column layout */
.editor-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left Panel */
.editor-left-panel {
  width: 232px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  flex-shrink: 0;
  padding: 1rem;
}

.editor-left-panel h3 {
  margin: 0 0 0.75rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.component-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.component-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.82rem;
  color: #374151;
  user-select: none;
}

.component-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.component-item.active {
  background: #e8f1f4;
  border-color: #273947;
  color: #273947;
}

.component-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #f3f4f6;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  color: #6b7280;
}

.component-item.active .component-icon {
  background: #273947;
  color: #fff;
}

.add-field-hint {
  padding: 0.625rem 0.75rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #92400e;
  margin-bottom: 1rem;
}

.form-settings {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.form-settings h3 {
  margin: 0 0 0.75rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-settings .form-group {
  margin-bottom: 0.75rem;
}

.form-settings .form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 0.25rem;
}

.form-settings .form-control {
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-size: 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #1f2937;
  background: #fff;
}

.form-settings .form-control:focus {
  border-color: #273947;
  outline: none;
  box-shadow: 0 0 0 3px rgba(39, 55, 71, 0.12);
}

/* Center Panel */
.editor-center-panel {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.editor-canvas-area {
  flex: 1;
  overflow: auto;
  background: #eceef1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1rem;
}

.editor-canvas-area > * {
  margin: 0 auto; /* Center the PDF when it's smaller than container */
}

.editor-canvas-area .pdf-canvas-wrapper {
  position: relative;
  flex-shrink: 0;
  width: fit-content;
  max-height: none;
  overflow: visible;
  padding: 0;
  background: transparent;
  min-width: 0; /* Allow shrinking */
}

.editor-canvas-area .pdf-canvas-container {
  position: relative;
  display: block;
  line-height: 0;
  font-size: 0;
  width: fit-content;
  margin: 0;
}

.editor-canvas-area .pdf-canvas-container canvas {
  display: block;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 16px rgba(16, 24, 40, 0.12);
  vertical-align: top;
}

.field-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
}

/* Field Highlights — muted enterprise palette. Type colours match the badges in
   the All Fields list; the selected state is always the brand teal, whatever the
   field type, so "what am I editing" never depends on remembering a colour. */
.field-highlight {
  position: absolute;
  border: 2px solid #4a90e2;
  background: rgba(74, 144, 226, 0.08);
  cursor: move;
  pointer-events: all;
  transition: background 0.2s, border-color 0.2s;
  user-select: none;
}

.field-highlight:hover {
  background: rgba(74, 144, 226, 0.16);
  border-color: #4a90e2;
}

.field-highlight.selected {
  border-color: #273947;
  background: rgba(39, 55, 71, 0.14);
  border-width: 3px;
}

.field-highlight.custom-field {
  border-color: #4a90e2;
  background: rgba(74, 144, 226, 0.08);
}

.field-highlight.custom-field:hover {
  background: rgba(74, 144, 226, 0.16);
}

.field-highlight.custom-field.selected {
  border-color: #273947;
  background: rgba(39, 55, 71, 0.18);
  border-width: 3px;
}

/* Field type-specific colors matching the All Fields list */
.field-highlight.text-field {
  border-color: #4a90e2;
  background: rgba(74, 144, 226, 0.08);
}

.field-highlight.text-field:hover {
  border-color: #4a90e2;
  background: rgba(74, 144, 226, 0.16);
}

.field-highlight.text-field.selected {
  border-color: #273947;
  background: rgba(39, 55, 71, 0.14);
  border-width: 3px;
}

.field-highlight.text-field.editing {
  border-color: #273947;
  background: transparent;
}

.field-highlight.checkbox-field {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.08);
}

.field-highlight.checkbox-field:hover {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.16);
}

.field-highlight.checkbox-field.selected {
  border-color: #273947;
  background: rgba(39, 55, 71, 0.14);
  border-width: 3px;
}

.field-highlight.checkbox-field.editing {
  border-color: #273947;
  background: transparent;
}

.field-highlight.radio-field {
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}

.field-highlight.radio-field:hover {
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.16);
}

.field-highlight.radio-field.selected {
  border-color: #273947;
  background: rgba(39, 55, 71, 0.14);
  border-width: 3px;
}

.field-highlight.radio-field.editing {
  border-color: #273947;
  background: transparent;
}

.field-highlight.date-field {
  border-color: #7e57c2;
  background: rgba(126, 87, 194, 0.08);
}

.field-highlight.date-field:hover {
  border-color: #7e57c2;
  background: rgba(126, 87, 194, 0.16);
}

.field-highlight.date-field.selected {
  border-color: #273947;
  background: rgba(39, 55, 71, 0.14);
  border-width: 3px;
}

.field-highlight.date-field.editing {
  border-color: #273947;
  background: transparent;
}

.field-highlight.signature-field {
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.08);
}

.field-highlight.signature-field:hover {
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.16);
}

.field-highlight.signature-field.selected {
  border-color: #273947;
  background: rgba(39, 55, 71, 0.14);
  border-width: 3px;
}

.field-highlight.signature-field.editing {
  border-color: #273947;
  background: transparent;
}

.field-highlight.number-field {
  border-color: #64748b;
  background: rgba(100, 116, 139, 0.08);
}

.field-highlight.number-field:hover {
  border-color: #64748b;
  background: rgba(100, 116, 139, 0.16);
}

.field-highlight.number-field.selected {
  border-color: #273947;
  background: rgba(39, 55, 71, 0.14);
  border-width: 3px;
}

.field-highlight.number-field.editing {
  border-color: #273947;
  background: transparent;
}

.field-highlight.dropdown-field {
  border-color: #64748b;
  background: rgba(100, 116, 139, 0.08);
}

.field-highlight.dropdown-field:hover {
  border-color: #64748b;
  background: rgba(100, 116, 139, 0.16);
}

.field-highlight.dropdown-field.selected {
  border-color: #273947;
  background: rgba(39, 55, 71, 0.14);
  border-width: 3px;
}

.field-highlight.dropdown-field.editing {
  border-color: #273947;
  background: transparent;
}

.field-highlight.multi-selected {
  border-color: #273947;
  border-style: dashed;
  border-width: 2px;
  background: rgba(39, 55, 71, 0.08);
}

.field-highlight.multi-selected:hover {
  background: rgba(39, 55, 71, 0.14);
}

/* Double-click test input editing state */
.field-highlight.editing {
  border-color: #273947;
  border-width: 2px;
  border-style: solid;
  background: transparent;
  z-index: 5;
}

.field-test-input {
  cursor: text;
}

.field-test-input::placeholder {
  color: #aaa;
  font-style: italic;
}

/* 8-point Resize Handles */
.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 1px solid #273947;
  box-sizing: border-box;
  z-index: 10;
}

.resize-handle:hover {
  background: #273947;
}

.resize-handle.nw { top: -4px; left: -4px; cursor: nwse-resize; }
.resize-handle.ne { top: -4px; right: -4px; cursor: nesw-resize; }
.resize-handle.sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.resize-handle.se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.resize-handle.n { top: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.s { bottom: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.w { top: 50%; left: -4px; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.e { top: 50%; right: -4px; transform: translateY(-50%); cursor: ew-resize; }

/* Selection Box */
.selection-box {
  position: absolute;
  border: 1.5px dashed #273947;
  background: rgba(39, 55, 71, 0.06);
  pointer-events: none;
  z-index: 1000;
}

/* Alignment Snap Guide Lines */
.align-guide {
  position: absolute;
  pointer-events: none;
  z-index: 999;
}

.align-guide-v {
  border-left: 1px solid #28a745;
  box-shadow: 0 0 3px rgba(40, 167, 69, 0.5);
}

.align-guide-h {
  border-top: 1px solid #28a745;
  box-shadow: 0 0 3px rgba(40, 167, 69, 0.5);
}

/* Right Panel */
.editor-right-panel {
  width: 320px;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  overflow-y: auto;
  flex-shrink: 0;
}

.field-config-form {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.field-config-form .form-group {
  margin-bottom: 0.75rem;
}

.field-config-form .form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 0.25rem;
}

.field-config-form .form-control {
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #1f2937;
  background: #fff;
}

.field-config-form .form-control:focus {
  border-color: #273947;
  outline: none;
  box-shadow: 0 0 0 3px rgba(39, 55, 71, 0.12);
}

.all-fields-list {
  padding: 1rem;
}

.all-fields-list h3 {
  margin: 0 0 0.75rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Floating Field Toolbar */
.field-toolbar {
  position: fixed;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.14);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}

.field-toolbar::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

.field-toolbar.toolbar-below::after {
  bottom: auto;
  top: -6px;
  border-top: none;
  border-bottom: 6px solid #fff;
}

.toolbar-select {
  height: 26px;
  padding: 2px 4px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
  color: #374151;
  background: #fff;
  cursor: pointer;
  outline: none;
  max-width: 110px;
}

.toolbar-select:focus {
  border-color: #273947;
}

.toolbar-input {
  width: 42px;
  height: 26px;
  padding: 2px 4px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
  color: #374151;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}

.toolbar-input::-webkit-outer-spin-button,
.toolbar-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.toolbar-input:focus {
  border-color: #273947;
}

.toolbar-input.toolbar-maxlen {
  width: 48px;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  transition: all 0.15s;
}

.toolbar-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.toolbar-btn.active {
  background: #e8f1f4;
  border-color: #273947;
  color: #273947;
}

.toolbar-required-btn span {
  font-size: 14px;
  color: #9ca3af;
  font-weight: bold;
}

.toolbar-required-btn.active span {
  color: #dc3545;
}

.toolbar-color {
  width: 26px;
  height: 26px;
  padding: 1px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  background: none;
}

.toolbar-color::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.toolbar-color::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

.toolbar-divider {
  width: 1px;
  height: 18px;
  background: #ddd;
  margin: 0 2px;
}

/* Toolbar alignment button SVG icons */
.toolbar-btn svg {
  display: block;
  flex-shrink: 0;
}

/* AI Progress Bar */
.ai-progress-bar {
  background: #f9fafb;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.ai-progress-inner {
  height: 3px;
  background: #273947;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.ai-progress-layers {
  display: flex;
  gap: 1rem;
  margin-top: 0.25rem;
  font-size: 0.72rem;
}

.ai-layer {
  color: #9ca3af;
}

.ai-layer.active {
  color: #273947;
  font-weight: 600;
}

.ai-layer.completed {
  color: #28a745;
}

/* Toast Notification */
.toast-notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #f9fafb;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.25);
  z-index: 10000;
  animation: toastFadeInOut 2s ease-in-out;
  pointer-events: none;
}

@keyframes toastFadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  85% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #666;
  padding: 4px 8px;
}

.modal-body {
  padding: 1.5rem;
}

.modal-body .form-group {
  margin-bottom: 1rem;
}

.modal-body .form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #555;
  margin-bottom: 0.25rem;
}

.modal-body .form-control {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-body textarea.form-control {
  resize: vertical;
}

.modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
}

.btn-primary {
  background: #2196F3;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #1976D2;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #5a6268;
}

.btn-danger {
  background: #f44336;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #d32f2f;
}

.btn-icon {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}

.btn-icon:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #999;
}

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #273947;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================ */
/* Custom Modal (replaces native alert/confirm/prompt) */
/* ============================================ */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: customModalFadeIn 0.15s ease-out;
}

@keyframes customModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.custom-modal {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.22);
  min-width: 360px;
  max-width: 480px;
  width: 90%;
  animation: customModalSlideIn 0.2s ease-out;
  overflow: hidden;
}

@keyframes customModalSlideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.custom-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.custom-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #111827;
}

.custom-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.custom-modal-close:hover {
  color: #333;
}

.custom-modal-body {
  padding: 1.25rem;
}

.custom-modal-body p {
  margin: 0;
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.5;
  white-space: pre-wrap;
}

.custom-modal-input {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}

.custom-modal-input:focus {
  border-color: #273947;
  box-shadow: 0 0 0 3px rgba(39, 55, 71, 0.12);
}

.custom-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1rem;
}

.custom-modal-footer .btn {
  min-width: 80px;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 500;
  transition: all 0.15s;
}

.custom-modal-footer .btn-primary {
  background: #273947;
  color: #fff;
  border-color: #273947;
}

.custom-modal-footer .btn-primary:hover {
  background: #003a4d;
  border-color: #003a4d;
}

.custom-modal-footer .btn-secondary {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.custom-modal-footer .btn-secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.custom-modal-footer .btn-danger {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

.custom-modal-footer .btn-danger:hover {
  background: #b02a37;
  border-color: #b02a37;
}

/* Custom Modal Content (for larger modals like CopyFieldsModal) */
.custom-modal-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 400px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: customModalSlideIn 0.2s ease-out;
}

.custom-modal-content .custom-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

/* Custom Modal Buttons */
.custom-modal-btn {
  min-width: 80px;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 500;
  transition: all 0.15s;
}

.custom-modal-btn-primary {
  background: #273947;
  color: #fff;
  border-color: #273947;
}

.custom-modal-btn-primary:hover:not(:disabled) {
  background: #003a4d;
  border-color: #003a4d;
}

.custom-modal-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.custom-modal-btn-secondary {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.custom-modal-btn-secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* ===== Upload Progress Modal ===== */
.upload-progress-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: customModalFadeIn 0.2s ease-out;
}

.upload-progress-modal {
  background: #fff;
  padding: 2.5rem 3rem;
  border-radius: 12px;
  text-align: center;
  min-width: 420px;
  max-width: 500px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  animation: customModalSlideIn 0.2s ease-out;
}

.upload-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e0e0e0;
  border-top-color: #2196F3;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1.5rem;
}

.upload-progress-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.upload-progress-subtitle {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  word-break: break-all;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.upload-progress-count {
  color: #999;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.upload-progress-bar-track {
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.upload-progress-bar-fill {
  height: 100%;
  background: #4CAF50;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.upload-progress-hint {
  color: #999;
  font-size: 0.8rem;
  margin-top: 1rem;
  font-style: italic;
}

/* AI Layers Progress */
.ai-layers-progress {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: left;
}

.ai-layers-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 0.75rem;
  text-align: center;
}

.ai-layers-bar-track {
  width: 100%;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.ai-layers-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2196F3, #9C27B0);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.ai-layers-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ai-layer-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #999;
  transition: color 0.3s ease;
}

.ai-layer-item.ai-layer-active {
  color: #2196F3;
  font-weight: 500;
}

.ai-layer-item.ai-layer-active .ai-layer-icon {
  animation: spin 1s linear infinite;
  display: inline-block;
}

.ai-layer-item.ai-layer-completed {
  color: #4CAF50;
}

.ai-layer-icon {
  min-width: 50px;
  text-align: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* ===== Field Editor toolbar buttons =====
   Enterprise treatment: one solid brand-primary action (Save All), quiet outlined
   secondary actions, and an outlined danger that only fills on hover. A row of
   solid Bootstrap-grey buttons is what made the editor look generated. */
.editor-toolbar .btn {
  border-radius: 6px;
  font-weight: 500;
}

.editor-toolbar .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(39, 55, 71, 0.2);
}

.editor-toolbar .btn-primary {
  background: #273947;
  color: #fff;
  border: 1px solid #273947;
  font-weight: 600;
}
.editor-toolbar .btn-primary:hover:not(:disabled) {
  background: #003a4d;
  border-color: #003a4d;
}

.editor-toolbar .btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.editor-toolbar .btn-secondary:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #111827;
}

.editor-toolbar .btn-danger {
  background: #fff;
  color: #dc3545;
  border: 1px solid #dc3545;
}
.editor-toolbar .btn-danger:hover:not(:disabled) {
  background: #dc3545;
  color: #fff;
}

.editor-toolbar .btn-icon {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}
.editor-toolbar .btn-icon:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.editor-toolbar .btn-icon svg {
  display: block;
}

/* Panel buttons (Apply to All / Save Field / Cancel) follow the same language. */
.editor-left-panel .btn-primary,
.editor-right-panel .btn-primary {
  background: #273947;
  color: #fff;
  border: 1px solid #273947;
  border-radius: 6px;
}
.editor-left-panel .btn-primary:hover:not(:disabled),
.editor-right-panel .btn-primary:hover:not(:disabled) {
  background: #003a4d;
  border-color: #003a4d;
}

.editor-left-panel .btn-secondary,
.editor-right-panel .btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}
.editor-left-panel .btn-secondary:hover:not(:disabled),
.editor-right-panel .btn-secondary:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.editor-left-panel .btn-danger,
.editor-right-panel .btn-danger {
  background: #dc3545;
  color: #fff;
  border: 1px solid #dc3545;
  border-radius: 6px;
}
.editor-left-panel .btn-danger:hover:not(:disabled),
.editor-right-panel .btn-danger:hover:not(:disabled) {
  background: #b02a37;
  border-color: #b02a37;
}

/* Thin scrollbars keep the panels from looking like a default-styled page. */
.editor-left-panel::-webkit-scrollbar,
.editor-right-panel::-webkit-scrollbar,
.editor-canvas-area::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.editor-left-panel::-webkit-scrollbar-thumb,
.editor-right-panel::-webkit-scrollbar-thumb,
.editor-canvas-area::-webkit-scrollbar-thumb {
  background: #c9cfd6;
  border-radius: 4px;
}
.editor-left-panel::-webkit-scrollbar-thumb:hover,
.editor-right-panel::-webkit-scrollbar-thumb:hover,
.editor-canvas-area::-webkit-scrollbar-thumb:hover {
  background: #9aa3ad;
}
.editor-left-panel::-webkit-scrollbar-track,
.editor-right-panel::-webkit-scrollbar-track,
.editor-canvas-area::-webkit-scrollbar-track {
  background: transparent;
}
/* ── Form Portal — admin chrome polish ───────────────────────────────────
   Scoped to the admin shell. Patient-facing fill pages keep their own look. */

/* Scrollbars: slim, neutral — the OS default 17px bar looked unpolished in
   the submissions and editor panels. */
* {
  scrollbar-width: thin;
  scrollbar-color: #c3ccd4 transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: #c3ccd4;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #a9b5c0; }
*::-webkit-scrollbar-track { background: transparent; }

/* Smooth focus ring everywhere instead of the jarring browser default */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(0, 107, 143, 0.55);
  outline-offset: 1px;
}

/* Subtle motion for any card the page hovers with inline styles */
.fp-lift {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
/* ===== New Patient Registration Form - Wizard Style ===== */
:root {
  --reg-header-bg: #273947;
  --reg-body-bg: #f0f2f5;
  --reg-container-bg: #ffffff;
  --reg-section-header-bg: #0e7c8c;
  --reg-text-color: #333;
  --reg-border-color: #ccc;
  --reg-btn-next-bg: #4a90e2;
  /* Forward/primary action on the step navigation. Shared with the Next button in
     PdfFormViewer so both form journeys advance on the same colour. */
  --reg-btn-forward-bg: #0d8a8a;
  --reg-btn-forward-hover: #0a6d6d;
  --reg-btn-submit-bg: #28a745;
  --reg-btn-draft-bg: #ffc107;
  --reg-danger-color: #dc3545;
  --reg-input-focus: #80bdff;
}

/* ===== Page Layout ===== */

/* Text inflation is decided per block container, so a single rule on html or on the
   page root does not reach the labels, inputs and paragraphs inside it - the form kept
   coming back larger on a phone after both of those were tried. Applying it to every
   descendant is the only form that holds.
   100%, not none: none also blocks the patient from zooming in, which matters for a
   medical form read by older patients. This only stops the browser resizing text on
   its own. */
.legacy-registration-page,
.legacy-registration-page * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.legacy-registration-page {
  margin: 0;
  padding: 0;
  /* Arimo, not Segoe UI.
     The archived registration PDF is an html2canvas photograph of this page, so the
     font it renders with is the font in the record. 'Segoe UI' exists only on Windows:
     Mac fell back to Tahoma, Android to Roboto, iOS to Helvetica, and each has different
     glyph widths - so the same answers wrapped differently and produced four visibly
     different archived forms.
     Arimo is metric-compatible with Arial and is served as a webfont, so every device
     lays the form out identically. Noto Sans TC covers Chinese names. */
  font-family: Arimo, 'Segoe UI', Tahoma, 'Noto Sans TC', Geneva, Verdana, sans-serif;
  /* iOS renders webfonts with subpixel antialiasing by default, which thickens the
     strokes noticeably against the same font on desktop - the form looked bold on a
     phone and regular on a laptop. Grayscale smoothing matches the desktop weight. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--reg-body-bg);
  color: var(--reg-text-color);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.main-wrapper {
  width: 100%;
  max-width: 1000px;
  background-color: var(--reg-container-bg);
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

/* ===== Header ===== */
.reg-header {
  background-color: #f8f9fa;
  padding: 10px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reg-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.back-button {
  border: 1px solid var(--reg-header-bg);
  background-color: #fff;
  color: var(--reg-header-bg);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-button:hover {
  background-color: var(--reg-header-bg);
  color: #fff;
}

.reg-header .logo {
  /* Raised from 40px once the "New Patient" chip was removed from this row: the logo is
     now the only thing in the header, so it can carry the brand at a readable size. */
  max-height: 56px;
  width: auto;
}

/* ===== Sticky Header Wrapper ===== */
.sticky-header-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sticky-header-wrapper .progress-container {
  margin-bottom: 0;
  padding: 15px 30px;
  background-color: #fff;
}

/* ===== Title Bar ===== */
.form-title-bar {
  background-color: var(--reg-header-bg);
  color: white;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  position: relative;
}

.title-bar-back-button {
  border: 1.5px solid rgba(255,255,255,0.8);
  background-color: transparent;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  z-index: 1;
  flex-shrink: 0;
}

.title-bar-back-button:hover {
  background-color: rgba(255,255,255,0.2);
}

.title-bar-text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

/* When there is no back button, the title is the bar's only child.
   Keep it in normal flow so the bar grows with the text (prevents the
   title being clipped/covered on mobile when it wraps to 2-3 lines). */
.title-bar-text:only-child,
.title-bar-text:first-child:last-child {
  position: static;
  flex: 1;
}

/* ===== Content Area ===== */
.content-area {
  padding: 20px 30px;
  flex: 1;
  position: relative;
  background-color: #f8f9fa;
}

/* ===== Progress Bar ===== */
.progress-container {
  margin-bottom: 30px;
  padding: 0 20px;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.progress-steps::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--reg-border-color);
  z-index: 1;
}

.progress-bar-fill {
  position: absolute;
  top: 15px;
  left: 0;
  height: 3px;
  background-color: var(--reg-btn-next-bg);
  z-index: 1;
  transition: width 0.3s ease;
}

.step {
  position: relative;
  z-index: 2;
  text-align: center;
  /* Evenly distribute regardless of step count (5 steps without consent,
     6 with Heidi consent). A fixed 20% width overflowed with 6 steps and
     crushed the circles together on mobile. */
  flex: 1 1 0;
  min-width: 0;
}

.step-circle {
  width: 34px;
  height: 34px;
  background-color: white;
  border: 3px solid var(--reg-border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-weight: bold;
  color: #999;
  transition: all 0.3s ease;
}

.step.active .step-circle {
  border-color: var(--reg-btn-next-bg);
  color: var(--reg-btn-next-bg);
}

.step.completed .step-circle {
  background-color: var(--reg-btn-next-bg);
  border-color: var(--reg-btn-next-bg);
  color: white;
}

.step-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.step.active .step-label {
  color: var(--reg-btn-next-bg);
  font-weight: 600;
}

/* ===== Form Sections ===== */
.form-section {
  display: none;
  background-color: white;
  border: 1px solid var(--reg-border-color);
  padding: 30px;
  margin-bottom: 20px;
  animation: regFadeIn 0.3s ease-in-out;
}

.form-section.active {
  display: block;
}

@keyframes regFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-title {
  font-size: 20px;
  color: var(--reg-header-bg);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--reg-body-bg);
  font-weight: 600;
}

.instruction-text {
  margin-bottom: 20px;
  font-size: 14px;
  color: #555;
}

/* ===== Grid Layout ===== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-group {
  margin-bottom: 0;
}

.form-group label.form-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.form-group input.form-control,
.form-group select.form-control,
.form-group textarea.form-control {
  font-size: 14px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.form-label.validation-error,
.form-label.validation-error .required-mark {
  color: var(--reg-danger-color);
}

.required-mark {
  color: var(--reg-danger-color);
  font-style: normal;
  margin-right: 3px;
}

.form-control {
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--reg-border-color);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
  /* iOS Safari applies its own native control styling and ignores custom borders
     unless appearance is reset, which hid the red .field-invalid outline on mobile. */
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
}

.react-datepicker-wrapper {
  width: 100%;
}

.react-datepicker__input-container {
  width: 100%;
}

.react-datepicker__input-container input {
  width: 100%;
  /* The field is read-only and only accepts a date picked from the calendar, so it
     behaves like a button. A text caret would invite typing that the input silently
     ignores. */
  cursor: pointer;
  /* Read-only inputs are greyed out by some mobile browsers; keep the normal palette so
     the field does not read as disabled. */
  background-color: var(--reg-container-bg);
  color: var(--reg-text-color);
}

.form-control:focus {
  outline: none;
  border-color: var(--reg-input-focus);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
}

/* Focus must not hide the error.
   Validation scrolls to the first invalid field and focuses it, so .form-control:focus
   immediately repainted the border blue - the patient was pointed at a field that no
   longer looked wrong. :focus outranks .field-invalid on specificity even with
   !important, so the invalid state has to be restated at the same weight. */
.form-control.field-invalid:focus,
.field-invalid:focus {
  border-color: var(--reg-danger-color) !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 10px auto;
  padding-right: 30px;
}

/* ===== DOB Group ===== */
.dob-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* ===== Phone Input ===== */
.phone-input-group {
  display: flex;
  border: 1px solid var(--reg-border-color);
  border-radius: 4px;
  overflow: hidden;
  background-color: white;
}

.phone-input-group:focus-within {
  border-color: var(--reg-input-focus);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
}

.phone-input-group .form-control {
  border: none;
  border-radius: 0;
  box-shadow: none;
  flex-grow: 1;
}

/* intl-tel-input custom styles for new design */
.phone-input-wrap .iti {
  width: 100%;
}

.phone-input-wrap .iti input.iti__tel-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--reg-border-color);
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.2s;
  padding: 10px 12px;
}

.phone-input-wrap .iti input.iti__tel-input:focus {
  outline: none;
  border-color: var(--reg-input-focus);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
}

/* Same reason as .form-control.field-invalid:focus — focusing an invalid phone field
   must not repaint it as though it had been accepted. */
.phone-input-wrap .iti input.iti__tel-input.field-invalid:focus {
  border-color: var(--reg-danger-color);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.phone-input-wrap .iti input.field-valid {
  border-color: #d1d5db;
}

.phone-input-wrap .iti input.field-invalid {
  /* Border only, matching .field-invalid — the tint is dropped for consistency across
     every control rather than because a phone input has an option list. */
  border-color: var(--reg-danger-color);
}

.phone-input-wrap .iti__country-container {
  border-radius: 4px 0 0 4px;
}

.phone-input-wrap .iti__search-input {
  font-size: 14px;
}

/* ===== Radio & Checkbox ===== */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 5px;
}

.radio-group-label {
  display: flex;
  gap: 4px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.radio-group-label span {
  color: #333;
}

.radio-group-label .required-mark {
  flex-shrink: 0;
  /* Red like every other required marker. It inherited the label colour before, so a
     mandatory radio group looked optional until validation ran. */
  color: var(--reg-danger-color);
}

.radio-label,
.checkbox-label {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  color: #444;
}


.radio-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.radio-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-group .radio-label {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  color: #444;
  margin: 0;
  padding: 0;
  width: fit-content;
}

.radio-group .radio-label input[type='radio'] {
  margin: 3px 0 0;
  flex: 0 0 auto;
}

.specify-input {
  margin-top: 10px;
}

.radio-group input[type='text'] {
  max-width: 620px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--reg-border-color);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

/* ===== Sub-sections ===== */
.sub-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  margin: 20px 0 15px 0;
  color: var(--reg-header-bg);
  font-size: 15px;
  cursor: pointer;
}

.toggle-icon {
  background-color: var(--reg-header-bg);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

/* ===== Terms and Conditions ===== */
.tc-notice {
  background-color: #fff3cd;
  color: #856404;
  padding: 10px 15px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px solid #ffeeba;
}

.tc-notice {
  background-color: #fff3cd;
  color: #856404;
  padding: 10px 15px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px solid #ffeeba;
}

.tc-container {
  border: 1px solid var(--reg-border-color);
  padding: 20px;
  height: 250px;
  overflow-y: auto;
  /* The terms contain a bare hkma.org URL with no spaces in it. A browser will not
     break a word mid-string by default, so on a narrow screen that one link set the
     content width and pushed the whole panel past the card edge. */
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  margin-bottom: 20px;
  background-color: #fff;
  font-size: 14px;
  line-height: 1.6;
  transition: border-color 0.2s ease;
}

.tc-container p {
  margin-bottom: 15px;
}

.tc-container a {
  color: var(--reg-btn-next-bg);
  text-decoration: underline;
  /* Links are the long unbroken strings here, so they need the break rule themselves -
     overflow-wrap on the parent does not apply to an inline child's own content box. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.tc-container-valid {
  border: 1px solid var(--reg-border-color) !important;
  box-shadow: none;
}

.tc-container-invalid {
  border: 2px solid var(--reg-danger-color) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.tc-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid var(--reg-border-color);
}

.tc-checkboxes .checkbox-label {
  font-size: 14px;
  color: #444;
}

.tc-checkboxes .checkbox-label span {
  color: #444;
}

.tc-locked {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.tc-checkboxes .checkbox-label .required-mark {
  /* Red from the start, like every other required field on the form.
     This previously inherited the label's grey, so the asterisk only turned red after
     validation failed - the one place a patient could not tell a mandatory checkbox
     from an optional one until they had already pressed Next. */
  color: var(--reg-danger-color);
  font-style: normal;
  font-weight: bold;
}

.tc-checkboxes .checkbox-label.validation-error,
.tc-checkboxes .checkbox-label.validation-error span,
.tc-checkboxes .checkbox-label.validation-error .required-mark {
  color: #dc3545;
}

.tc-checkboxes input[type="checkbox"] {
  accent-color: initial;
}

.tc-checkboxes input[type="checkbox"]:invalid {
  outline: none;
  box-shadow: none;
}

.tc-locked-hint {
  color: var(--reg-danger-color);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
  text-align: center;
}

/* ===== Action Bar ===== */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid #ddd;
  margin-top: 20px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-next {
  /* Teal, matching the Next button on the PDF-backed forms (PdfFormViewer), so a
     patient moving between the two journeys sees one primary action colour.
     --reg-btn-next-bg is deliberately NOT reused here: it also drives the stepper
     circles, the progress bar and T&C links, which stay blue. */
  background-color: var(--reg-btn-forward-bg);
}

.btn-next:hover:not(:disabled) {
  background-color: var(--reg-btn-forward-hover);
}

.btn-prev {
  background-color: #6c757d;
}

.btn-prev:hover:not(:disabled) {
  background-color: #5a6268;
}

.btn-submit {
  background-color: var(--reg-btn-submit-bg);
}

.btn-submit:hover:not(:disabled) {
  background-color: #218838;
}

.btn-draft {
  /* Takes the blue that Next used to have. Save Draft is a real alternative
     action here, not a quiet secondary one, so it stays solid rather than
     reverting to the old white outline. */
  background-color: var(--reg-btn-next-bg);
  color: #fff;
  border: 1px solid var(--reg-btn-next-bg);
}

.btn-draft:hover:not(:disabled) {
  background-color: #357abd;
  border-color: #357abd;
}

.action-bar-left {
  display: flex;
  gap: 10px;
}

.action-bar-right {
  display: flex;
  gap: 10px;
}

/* ===== Footer Logos ===== */
.footer-logos {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

.footer-logo-img {
  height: 40px;
  opacity: 0.8;
}

/* ===== Validation Styles ===== */
.field-invalid {
  /* Border only. A background tint was previously applied as well, but a <select>
     passes its background down to the native option list, so an unanswered dropdown
     turned every option pink when the patient pressed Next - the error read as though
     the choices themselves were wrong.
     No box-shadow either: it thickened the outline into a heavy double border that did
     not match the rest of the form. */
  border-color: var(--reg-danger-color) !important;
}

.field-valid {
  border-color: #d1d5db !important;
}

.radio-group-label.radio-group-invalid,
.radio-group-label.radio-group-invalid span,
.form-label.radio-group-invalid,
.form-label.radio-group-invalid span {
  color: var(--reg-danger-color) !important;
}

/* ===== ID Input ===== */
.inline-id-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline-id-inputs .form-control {
  flex: 1;
  text-transform: uppercase;
}

.inline-id-inputs .form-control::placeholder {
  text-transform: none;
}

.id-check-digit {
  width: 50px !important;
  text-align: center;
  flex: 0 0 50px !important;
}

.id-bracket {
  font-size: 16px;
  color: #333;
}

/* ===== Guardian / Emergency Contact ===== */
.guardian-block + .guardian-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--reg-border-color);
}

.guardian-divider {
  margin-bottom: 14px;
  font-weight: 700;
  color: var(--reg-header-bg);
  display: flex;
  align-items: center;
}

.guardian-default-checkbox {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.guardian-action-row {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.guardian-add-trigger {
  width: fit-content;
}

.guardian-default-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  white-space: nowrap;
}

.guardian-default-inline span {
  white-space: nowrap;
}

.guardian-default-inline input[type="checkbox"] {
  margin-top: 0;
  flex: 0 0 auto;
}

.guardian-default-checkbox .checkbox-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 0;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
}

.guardian-default-checkbox .checkbox-label span {
  display: inline;
  white-space: nowrap;
}

.guardian-default-checkbox .checkbox-label input[type="checkbox"] {
  margin-top: 0;
  flex: 0 0 auto;
}

/* Remove guardian button */
.remove-guardian-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--reg-header-bg);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-right: 8px;
  vertical-align: middle;
  transition: background-color 0.2s;
}

.remove-guardian-btn:hover {
  background: var(--reg-danger-color);
}

/* ===== Medical Questions ===== */
.medical-question-list {
  display: grid;
  gap: 20px;
}

/* ===== Draft / Submit Messages ===== */
.draft-save-message {
  padding: 10px 16px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}

.draft-save-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.draft-save-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ===== Modals ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.modal-content {
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  width: 500px;
  max-width: 100%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  text-align: center;
}

.modal-title {
  font-size: 22px;
  color: var(--reg-header-bg);
  margin-bottom: 15px;
  font-weight: bold;
}

.modal-text {
  color: #555;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.full-width {
    grid-column: auto;
  }

  .step-label {
    display: none;
  }

  .action-bar {
    flex-direction: column;
    gap: 10px;
  }

  .action-bar .btn {
    width: 100%;
    justify-content: center;
  }

  .action-bar-left,
  .action-bar-right {
    width: 100%;
    display: flex;
    gap: 10px;
  }

  .content-area {
    padding: 15px;
  }

  .form-section {
    padding: 20px 15px;
  }

  .reg-header {
    padding: 10px 15px;
  }

  .sticky-header-wrapper .progress-container {
    padding: 10px 15px;
  }

  .main-wrapper {
    margin: 0;
  }

  .dob-group {
    grid-template-columns: 1fr;
  }

  .inline-id-inputs {
    flex-wrap: wrap;
  }

  .form-title-bar {
    font-size: 14px;
    padding: 10px 12px;
    line-height: 1.35;
    /* Ensure the bar always grows with wrapped title text on phones */
    min-height: 0;
    height: auto;
    flex-wrap: wrap;
  }

  .form-title-bar .title-bar-text {
    position: static;
    flex: 1 1 auto;
    white-space: normal;
    overflow: visible;
    word-break: break-word;
  }

  /* Smaller step circles so all 6 steps fit comfortably on narrow screens */
  .step-circle {
    width: 26px;
    height: 26px;
    border-width: 2px;
    font-size: 13px;
    margin-bottom: 0;
  }

  .progress-steps::before,
  .progress-bar-fill {
    top: 12px;
  }

  .progress-steps {
    gap: 4px;
  }
}

/* ===== Save Draft Modal Styles ===== */
.save-draft-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.save-draft-modal {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.save-draft-modal-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.save-draft-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.save-draft-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.save-draft-modal-close:hover {
  background-color: #f3f4f6;
}

.save-draft-modal-body {
  padding: 24px;
}

.save-draft-modal-body p {
  margin: 0 0 20px;
  color: #4b5563;
  line-height: 1.6;
}

.save-draft-modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.save-draft-modal-input:focus {
  outline: none;
  border-color: var(--reg-header-bg);
  box-shadow: 0 0 0 3px rgba(39, 55, 71, 0.1);
}

.save-draft-modal-input.error {
  border-color: #ef4444;
}

.save-draft-modal-error {
  color: #ef4444;
  font-size: 14px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background-color: #fef2f2;
  border-radius: 6px;
  border-left: 3px solid #ef4444;
}

.save-draft-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.save-draft-modal-button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.save-draft-modal-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.save-draft-modal-button-primary {
  background-color: var(--reg-header-bg);
  color: white;
}

.save-draft-modal-button-primary:hover:not(:disabled) {
  background-color: #003d52;
}

.save-draft-modal-button-secondary {
  background-color: #f3f4f6;
  color: #374151;
}

.save-draft-modal-button-secondary:hover:not(:disabled) {
  background-color: #e5e7eb;
}

.save-draft-code-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.save-draft-code-input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  transition: border-color 0.2s;
}

.save-draft-code-input:focus {
  outline: none;
  border-color: var(--reg-header-bg);
  box-shadow: 0 0 0 3px rgba(39, 55, 71, 0.1);
}

.save-draft-code-input.error {
  border-color: #ef4444;
}

.save-draft-resend-text {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  margin-top: 16px;
}

.save-draft-resend-link {
  color: var(--reg-header-bg);
  cursor: pointer;
  text-decoration: underline;
}

.save-draft-resend-link:hover {
  color: #003d52;
}

.save-draft-resend-link.disabled {
  color: #9ca3af;
  cursor: not-allowed;
  text-decoration: none;
}

.save-draft-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;
}

.save-draft-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: var(--reg-header-bg);
  border-radius: 50%;
  animation: save-draft-spin 0.8s linear infinite;
}

@keyframes save-draft-spin {
  to {
    transform: rotate(360deg);
  }
}

.save-draft-loading-text {
  color: #6b7280;
  font-size: 16px;
}

/* Google Places Autocomplete native dropdown styling */
.pac-container {
  z-index: 10000 !important;
  font-family: inherit;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #d1d5db;
  border-top: none;
  max-height: 280px;
  overflow-y: auto;
}

.custom-places-item {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.custom-places-item:last-of-type {
  border-bottom: none;
}

.custom-places-item:hover,
.custom-places-item.active {
  background-color: #f0f7ff;
}

.custom-places-main {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.4;
}

.custom-places-secondary {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.3;
}

.custom-places-attribution {
  display: flex;
  justify-content: flex-end;
  padding: 6px 10px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 6px 6px;
}

.custom-places-attribution img {
  height: 14px;
  opacity: 0.7;
}

/* Stop iOS auto-zooming when a field is focused.
 *
 * Mobile Safari zooms the page in whenever a focused input has a font smaller than 16px,
 * to make the text legible - but the field is already legible, so the zoom just leaves
 * the patient scrolled and squinting. 16px is the documented threshold; at or above it
 * Safari leaves the viewport alone.
 *
 * Scoped to typeable controls and to mobile widths so the 14px used everywhere else on
 * desktop is untouched. Applied via max-width because that is the only place the zoom
 * happens; the on-screen size on a phone is barely different and the archived PDF is
 * captured at a fixed 900px regardless.
 *
 * text[readonly] (the date picker) is deliberately included: iOS zooms on focus even
 * when it cannot be typed into. */
@media (max-width: 768px) {
  .legacy-registration-page input,
  .legacy-registration-page select,
  .legacy-registration-page textarea,
  .legacy-registration-page .form-control {
    font-size: 16px;
  }
}