/* ==========================================================================
   NIC Forms — Form Render Base Stylesheet v2.0
   All values are CSS variables; themeN.css overrides them per theme.
   colN.css overrides the field-layout section.
========================================================================== */

/* ── Theme Token Defaults (= Theme 0 / Default Clean) ─────────────── */
:root {
  /* Page */
  --nfr-page-bg:            #f0f4f8;
  --nfr-page-bg-image:      none;

  /* Card */
  --nfr-card-max-width:     820px;
  --nfr-card-bg:            #ffffff;
  --nfr-card-border:        1px solid #e2e8f0;
  --nfr-card-radius:        14px;
  --nfr-card-shadow:        0 1px 3px rgba(0,0,0,.05),
                             0 8px 28px rgba(0,0,0,.08);

  /* Header strip */
  --nfr-header-bg:          #1a56db;
  --nfr-header-fg:          #ffffff;
  --nfr-header-padding:     22px 28px;
  --nfr-header-radius:      14px 14px 0 0;

  /* Typography */
  --nfr-font:               'Segoe UI', system-ui, -apple-system, sans-serif;
  --nfr-title-size:         1.2rem;
  --nfr-title-weight:       700;
  --nfr-body-color:         #374151;
  --nfr-body-size:          14px;

  /* Card body */
  --nfr-body-padding:       26px 28px;
  --nfr-field-gap:          20px;
  --nfr-col-gap:            24px;

  /* Labels */
  --nfr-label-color:        #374151;
  --nfr-label-size:         0.8125rem;
  --nfr-label-weight:       500;

  /* Inputs */
  --nfr-input-bg:           #ffffff;
  --nfr-input-border:       #d1d5db;
  --nfr-input-border-focus: #1a56db;
  --nfr-input-color:        #111827;
  --nfr-input-radius:       7px;
  --nfr-input-padding:      10px 13px;
  --nfr-input-size:         0.875rem;
  --nfr-focus-ring:         0 0 0 3px rgba(26,86,219,.15);

  /* Submit */
  --nfr-btn-bg:             #1a56db;
  --nfr-btn-fg:             #ffffff;
  --nfr-btn-hover:          #1347bd;
  --nfr-btn-radius:         8px;

  /* Misc */
  --nfr-divider:            #e5e9ef;
  --nfr-para-bg:            transparent;
  --nfr-para-border:        none;
}

/* ── Page ─────────────────────────────────────────────────────────── */
body {
  font-family:    var(--nfr-font) !important;
  font-size:      var(--nfr-body-size) !important;
  color:          var(--nfr-body-color) !important;
  background:     var(--nfr-page-bg) !important;
  background-image: var(--nfr-page-bg-image) !important;
  background-attachment: fixed;
  background-size: cover;
  min-height: 100vh;
}

/* Push content below any fixed header */
.content {
  padding-top:    36px !important;
  padding-bottom: 48px !important;
  padding-left:   16px !important;
  padding-right:  16px !important;
}

/* Centre and constrain the form */
.content .container-fluid {
  max-width:  var(--nfr-card-max-width) !important;
  margin:     0 auto !important;
  padding:    0 !important;
}

form#login {
  width: 100%;
}

form#login .row.mt-12 { margin: 0 !important; }
form#login .col-md-12 { padding: 0 !important; }

/* ── Card ─────────────────────────────────────────────────────────── */
form#login .card {
  background:    var(--nfr-card-bg) !important;
  border:        var(--nfr-card-border) !important;
  border-radius: var(--nfr-card-radius) !important;
  box-shadow:    var(--nfr-card-shadow) !important;
  overflow:      hidden;
}

/* ── Card Header ──────────────────────────────────────────────────── */
form#login .card-header,
form#login .card-header.bg-light {
  background:    var(--nfr-header-bg) !important;
  color:         var(--nfr-header-fg) !important;
  padding:       var(--nfr-header-padding) !important;
  border-radius: var(--nfr-header-radius) !important;
  border-bottom: none !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           16px !important;
  flex-wrap:     wrap !important;
}

form#login .card-header h5 {
  color:       var(--nfr-header-fg) !important;
  font-size:   var(--nfr-title-size) !important;
  font-weight: var(--nfr-title-weight) !important;
  margin:      0 !important;
  flex:        1;
  line-height: 1.3 !important;
}

form#login .card-header .img-thumbnail {
  max-height:    56px !important;
  border-radius: 8px !important;
  border:        none !important;
  background:    transparent !important;
  box-shadow:    none !important;
  object-fit:    contain;
}

form#login .card-actions {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  align-items: center;
}

form#login .card-actions a,
form#login .card-actions .btn {
  color:         var(--nfr-header-fg) !important;
  background:    rgba(255,255,255,.15) !important;
  border:        1px solid rgba(255,255,255,.25) !important;
  border-radius: 6px !important;
  padding:       5px 14px !important;
  font-size:     0.75rem !important;
  font-weight:   500 !important;
  text-decoration: none !important;
  transition:    background .15s;
}

form#login .card-actions a:hover,
form#login .card-actions .btn:hover {
  background: rgba(255,255,255,.28) !important;
}


/* ── Card Body ────────────────────────────────────────────────────── */
form#login .card-body {
  background: var(--nfr-card-bg) !important;
  padding:    var(--nfr-body-padding) !important;
  color:      var(--nfr-body-color) !important;
}

/* Banner image */
form#login .card-body .img-fluid.img-thumbnail {
  border-radius: 8px !important;
  border:        none !important;
  margin-bottom: 20px !important;
  max-height:    220px !important;
  width:         100% !important;
  object-fit:    cover !important;
}

/* ── Field Container ──────────────────────────────────────────────── */
div.form_layout {
  /* layout overridden by colN.css */
}

div.form_layout .form-group {
  margin-bottom: var(--nfr-field-gap) !important;
  padding:       0 !important;
  box-sizing:    border-box !important;
  /* float / width owned by colN.css — not set here */
}

div.form_layout .form-group:last-child {
  margin-bottom: 0 !important;
}

/* ── Labels ───────────────────────────────────────────────────────── */
div.form_layout label {
  display:     block !important;
  color:       var(--nfr-label-color) !important;
  font-size:   var(--nfr-label-size) !important;
  font-weight: var(--nfr-label-weight) !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
  font-family: var(--nfr-font) !important;
}

/* ── Text Inputs / Select / Textarea ─────────────────────────────── */
div.form_layout .form-control {
  background:    var(--nfr-input-bg) !important;
  border:        1px solid var(--nfr-input-border) !important;
  border-radius: var(--nfr-input-radius) !important;
  color:         var(--nfr-input-color) !important;
  font-size:     var(--nfr-input-size) !important;
  font-family:   var(--nfr-font) !important;
  padding:       var(--nfr-input-padding) !important;
  width:         100% !important;
  height:        auto !important;
  line-height:   1.5 !important;
  transition:    border-color .15s, box-shadow .15s !important;
  box-shadow:    none !important;
}

div.form_layout .form-control:focus {
  border-color: var(--nfr-input-border-focus) !important;
  box-shadow:   var(--nfr-focus-ring) !important;
  outline:      none !important;
}

div.form_layout textarea.form-control {
  min-height: 88px !important;
  resize:     vertical !important;
}

/* Custom dropdown arrow */
div.form_layout select.form-control {
  appearance:        none !important;
  -webkit-appearance: none !important;
  background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  padding-right: 34px !important;
}

/* ── Checkboxes & Radios ─────────────────────────────────────────── */
div.form_layout .checkbox label,
div.form_layout .radio label {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  font-weight: 400 !important;
  cursor:      pointer;
  margin:      0 !important;
}

div.form_layout input[type="checkbox"],
div.form_layout input[type="radio"] {
  width:        16px !important;
  height:       16px !important;
  flex-shrink:  0;
  accent-color: var(--nfr-btn-bg);
  cursor: pointer;
}

/* Checkbox-group / radio-group spacing */
div.form_layout .checkbox-group > .checkbox,
div.form_layout .radio-group > .radio {
  margin: 4px 0 !important;
}

/* ── File Upload ─────────────────────────────────────────────────── */
div.form_layout input[type="file"].form-control {
  padding:    7px 10px !important;
  cursor:     pointer;
  line-height: 1.4 !important;
}

/* ── Paragraph / Section Headers ────────────────────────────────── */
div.form_layout .evenPara p,
div.form_layout .evenPara.mix p {
  color:         var(--nfr-body-color) !important;
  font-size:     0.875rem !important;
  line-height:   1.6 !important;
  margin-bottom: 0 !important;
  background:    var(--nfr-para-bg);
  border-left:   var(--nfr-para-border);
  border-radius: 0 6px 6px 0;
  padding:       var(--nfr-para-bg, 0) 0;
}

div.form_layout h1,
div.form_layout h2,
div.form_layout h3 {
  color:       var(--nfr-label-color) !important;
  font-weight: 600 !important;
  font-family: var(--nfr-font) !important;
}

/* ── Dividers ────────────────────────────────────────────────────── */
form#login hr {
  border:     none !important;
  border-top: 1px solid var(--nfr-divider) !important;
  margin:     20px 0 !important;
}

.hr {
  display:    block;
  height:     1px;
  background: var(--nfr-divider);
  border:     none;
  margin:     16px 0;
}

/* ── Submit Button ───────────────────────────────────────────────── */
#form_submit.btn {
  background:   var(--nfr-btn-bg) !important;
  color:        var(--nfr-btn-fg) !important;
  border:       none !important;
  border-radius: var(--nfr-btn-radius) !important;
  font-weight:  600 !important;
  font-size:    0.9375rem !important;
  font-family:  var(--nfr-font) !important;
  padding:      12px 28px !important;
  width:        100% !important;
  letter-spacing: 0.01em;
  cursor:       pointer !important;
  transition:   background .15s, transform .1s, box-shadow .15s !important;
  box-shadow:   none !important;
}

#form_submit.btn:hover {
  background:  var(--nfr-btn-hover) !important;
  transform:   translateY(-1px);
  box-shadow:  0 4px 12px rgba(0,0,0,.15) !important;
}

#form_submit.btn:active {
  transform:  translateY(0);
  box-shadow: none !important;
}

/* ── Bottom Info Text ────────────────────────────────────────────── */
.my-4.col-md-12 > h6 {
  color:     var(--nfr-label-color) !important;
  font-size: 0.8125rem !important;
  opacity:   .75;
  margin-bottom: 12px !important;
}

.my-4.col-md-12 > span {
  color:     #6b7280 !important;
  font-size: 0.75rem !important;
}

/* ── Captcha area — image + input inline ─────────────────────────── */
#mainCaptcha,
.my-4.col-md-3 {
  display:        flex;
  flex-direction: row !important;
  align-items:    center !important;
  gap:            14px !important;
  flex-wrap:      nowrap !important;
  width:          auto !important;
  max-width:      480px;
}

/* Wrapper: captcha image stacked above "not readable" link */
.captcha-media {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  flex-shrink:    0;
  gap:            4px;
}

#captcha {
  width:         140px !important;
  height:        50px !important;
  object-fit:    cover !important;
  border-radius: 6px !important;
  border:        1px solid var(--nfr-input-border) !important;
  display:       block !important;
  cursor:        pointer;
  margin:        0 !important;
}

#change-image {
  font-size:       11px !important;
  color:           #6b7280 !important;
  text-decoration: none !important;
  display:         block !important;
  white-space:     nowrap;
}
#change-image:hover { color: var(--nfr-btn-bg) !important; }

/* Input stretches to fill remaining space */
#mainCaptcha .form-control,
.my-4.col-md-3 .form-control {
  flex:          1 !important;
  min-width:     0 !important;
  width:         auto !important;
  border-radius: var(--nfr-input-radius) !important;
  border-color:  var(--nfr-input-border) !important;
  background:    var(--nfr-input-bg) !important;
  color:         var(--nfr-input-color) !important;
}

/* ── Loading overlay ─────────────────────────────────────────────── */
.overlay2 {
  background:              rgba(15, 23, 42, 0.45) !important;
  backdrop-filter:         blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius:           0 !important;
  top:                     0 !important;
  opacity:                 1;
  position:                fixed !important;
}

.overlay2-card {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  background:     #ffffff;
  border-radius:  14px;
  box-shadow:     0 20px 60px rgba(0, 0, 0, 0.2);
  padding:        2.5rem 3.5rem;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1.25rem;
}

.overlay2-text {
  margin:         0;
  font-size:      0.95rem;
  font-weight:    600;
  color:          #475569;
  letter-spacing: 0.025em;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .content {
    padding: 16px 8px !important;
  }

  form#login .card-header,
  form#login .card-header.bg-light {
    padding: 18px 18px !important;
  }

  form#login .card-body {
    padding: 18px 18px !important;
  }
}