/* Background only -- plain white, matching Desk's own background */
body {
  background-color: #fff;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Remove default margins from html and body */
html {
  margin: 0;
  padding: 0;
}

/* No side border/"card" look, left-aligned instead of Frappe's default
   centered-with-margins layout. The real source (frappe/public/scss/website/
   web_form.scss, scoped under [data-doctype="Web Form"]) is .page_content for
   the centering/max-width and .web-form-header/.web-form for the two halves
   of the bordered card -- .web-form-container itself (tried first) carries
   none of this styling at all. */
.page_content {
  max-width: none !important;
  margin: 0 !important;
}

.web-form-header,
.web-form {
  border: none !important;
  border-radius: 0 !important;
}

/* Input fields styling - Higher specificity for web form inputs */
.input-with-feedback.form-control,
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
  border: 1.5px solid #242424 !important;
  border-radius: 6px;
  background-color: #ffffff;
  transition: all 0.2s ease;
  color: #495057;
}

/* Input hover state - More highlighted */
.input-with-feedback.form-control:hover,
.form-control:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: #007bff !important;
  background-color: #e3f2fd;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

/* Input focus state - Enhanced */
.input-with-feedback.form-control:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #007bff !important;
  box-shadow: 0 0 12px rgba(0, 123, 255, 0.3);
  outline: none;
  background-color: #ffffff;
}

/* Field labels */
.control-label {
  font-weight: 500;
  color: #495057 !important;
  margin-bottom: 6px;
}

/* Social Category heading renders like a question label */
div[data-fieldname="social_category_heading"] {
  font-weight: 500;
  color: #495057;
  margin-bottom: 6px;
}

/* Required field asterisk only */
.control-label .reqd,
.reqd,
.static-area .ellipsis .reqd {
  color: #dc3545;
}

/* Validation - Error fields */
.input-with-feedback.form-control.is-invalid,
.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

/* Grid error styling - keep text normal color */
.form-grid.is-invalid,
.form-grid.has-error {
  border: 2px solid #dc3545 !important;
  border-radius: 6px;
}

/* Ensure grid text remains normal color even with error styling */
.form-grid.is-invalid .static-area,
.form-grid.has-error .static-area,
.form-grid.is-invalid .grid-static-col,
.form-grid.has-error .grid-static-col,
.form-grid.is-invalid .ellipsis,
.form-grid.has-error .ellipsis,
.form-grid .static-area,
.form-grid .grid-static-col,
.form-grid .ellipsis {
  color: #495057 !important;
}

/* Grid header text */
.form-grid .grid-heading-row .static-area,
.form-grid .grid-heading-row .ellipsis {
  color: #495057 !important;
  font-weight: 500;
}

/* Checkbox styling inside grid */
.form-grid input[type="checkbox"] {
  color: #495057 !important;
  border-color: #ced4da !important;
}

/* Grid row hover effect */
.form-grid .grid-row:hover {
  background-color: #f8f9fa;
}

/* Grid row index styling */
.form-grid .row-index span {
  color: #6c757d !important;
  font-weight: 500;
}

/* Validation - Success fields */
.input-with-feedback.form-control.is-valid,
.form-control.is-valid,
input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}

/* Invalid feedback message */
.invalid-feedback,
.help-box.has-error {
  color: #dc3545;
  font-size: 14px;
  margin-top: 4px;
}

/* Valid feedback message */
.valid-feedback,
.help-box.has-success {
  color: #28a745;
  font-size: 14px;
  margin-top: 4px;
}

/* Section headings */
.section-head,
.form-section .section-head {
  font-weight: 600;
  color: #495057;
  margin-bottom: 16px;
  font-size: 18px;
}

/* Form group spacing */
.form-group {
  margin-bottom: 16px;
}

/* Help text */
.help-text,
.help-box {
  font-size: 13px;
  color: #6c757d;
  margin-top: 4px;
}

/* Placeholder text */
::placeholder {
  color: #adb5bd;
  opacity: 1;
}

/* Hide duplicate row buttons for specific tables */
div[data-fieldname="total_of_vdd"] .row-actions .grid-duplicate-row,
div[data-fieldname="total_of_vdd"] .row-actions .grid-duplicate-row:hover,
div[data-fieldname="total_of_vdd"] .row-actions .grid-duplicate-row:active,
div[data-fieldname="total_of_vdd"] .row-actions .grid-duplicate-row:focus {
  display: none !important;
}

div[data-fieldname="list_of_doc"] .row-actions .grid-duplicate-row,
div[data-fieldname="list_of_doc"] .row-actions .grid-duplicate-row:hover,
div[data-fieldname="list_of_doc"] .row-actions .grid-duplicate-row:active,
div[data-fieldname="list_of_doc"] .row-actions .grid-duplicate-row:focus {
  display: none !important;
}

/* Fixed-row tables (hideChildTableButtons): drop the checkbox column. Frappe v16 pins
   .row-index sticky at left:31px assuming the checkbox is there, so reset it to 0. */
.coro-no-row-check .row-check {
  display: none !important;
}

.coro-no-row-check .row-index {
  left: 0 !important;
}

#page-organisation-form-new .discard-btn {
  display: none !important;
}

#page-leader-form-new .discard-btn {
  display: none !important;
}

div[data-fieldname="list_of_candidates_applying_for_glodp_programe"] .row-index {
  display: none !important;
}

div[data-fieldname="list_of_candidates_applying_for_glodp_programe"] .grid-heading-row .row-index {
  display: none !important;
}

/* Q9 programmes are read-only: drop the trailing cell Frappe reserves for the row-edit pencil
   (in each row and in the header), else an empty column is left. */
div[data-fieldname="programmes_applying_for"] .col:has(> .btn-open-row),
div[data-fieldname="programmes_applying_for"] .grid-heading-row .col.grid-static-col:empty {
  display: none !important;
}

/* With the reserved cell gone, the two data columns (col-xs-5 each = 10/12) would leave a blank strip: let them share the width. */
div[data-fieldname="programmes_applying_for"] .grid-static-col[data-fieldname] {
  flex: 1 1 0 !important;
  max-width: none !important;
}

div[data-fieldname="org_network"] .row-index {
  display: none !important;
}

div[data-fieldname="org_network"] .grid-heading-row .row-index {
  display: none !important;
}

div[data-fieldname="section_break_fycu"] .section-head,
div[data-fieldname="section_break_kqpf"] .section-head,
div[data-fieldname="proposed_work_in_grassroots_leadership_program_section"] .section-head,
div[data-fieldname="section_break_zpjn"] .section-head,
div[data-fieldname="section_constitution_values"] .section-head,
div[data-fieldname="section_break_kqpf"] .section-head,
div[data-fieldname="section_proposed_action_plan"] .section-head,
div[data-fieldname="section_wing"] .section-head,
div[data-fieldname="section_proposed_action_plan_wing"] .section-head,
div[data-fieldname="section_work_experience_ntdt"] .section-head,
div[data-fieldname="section_proposed_action_plan_ntdt"] .section-head,
div[data-fieldname="section_work_experience_gbv"] .section-head,
div[data-fieldname="section_break_oiav"] .section-head,
div[data-fieldname="total__no_of_leaders_application_section"] .section-head
{
  margin: 0px !important;
  padding: 0px !important;
}

/* Fields added to the doctypes on 2026-09-25 that were never given their own
   question number (they're genuine content, just authored without the "N."
   prefix every other field on these forms uses) -- each one renders directly
   underneath an unrelated field/checkbox group above it with no visual gap,
   making it look like a stray leftover instead of an intentional question.
   Org and Leader share the first 3 fieldnames (same doctype fields, both
   forms); the rest are Org-only. Purely a spacing fix -- no content/label
   change, and no change to question numbering (a separate, content-level
   decision, not a layout one). */
div[data-fieldname="is_nomadic_denotified_tribe"],
div[data-fieldname="rep_sub_caste"],
div[data-fieldname="is_registered_new"],
div[data-fieldname="glodp_selection_status"],
div[data-fieldname="comfortable_language"] {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #ced4da;
}

/* Child-table columns use Bootstrap's col-xs-N grid, which keeps the same
   proportions at every viewport width -- on a phone-width screen there just
   isn't enough room, so column header text (e.g. "Speak"/"Write"/"Read"/
   "Understand" on Language Skills) gets cut down to 1-2 characters by the
   grid's own text-overflow:ellipsis. Confirmed live at a 390px viewport.
   Let the grid scroll horizontally instead of squeezing illegibly -- the
   standard responsive-table pattern, applied to every grid in both forms
   rather than just the one this was first noticed on. */
@media (max-width: 600px) {
  .form-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .form-grid .grid-heading-row,
  .form-grid .grid-row {
    min-width: 560px;
  }
}

/* Table row-edit popup (Frappe's .form-in-grid): by default a borderless 80%-wide, page-wide sheet that blends into the form.
   Make it a compact dialog with a solid background and shadow. */
.grid-row-open .form-in-grid {
  width: min(720px, 92vw) !important;
  max-width: none !important;
  background: var(--card-bg, #fff);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.grid-row-open .form-in-grid .grid-form-body {
  max-height: 70vh;
}

/* Dim backdrop + scroll lock while a row popup is open, on the Organisation and Leader application forms only (the click-to-close
   handler lives in validation_utils.js, loaded for those two DocTypes). Frappe's own backdrop (frappe.dom.freeze) appends to the
   desk-only #body, so on web forms nothing is drawn. Works the same on phones and laptops (viewport-relative, fixed). */
body:has(#page-organisation-form-new .grid-row-open)::before,
body:has(#page-organisation-form .grid-row-open)::before,
body:has(#page-leader-form-new .grid-row-open)::before,
body:has(#page-leader-form .grid-row-open)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1020;
  background: rgba(0, 0, 0, 0.5);
}

body:has(#page-organisation-form-new .grid-row-open),
body:has(#page-organisation-form .grid-row-open),
body:has(#page-leader-form-new .grid-row-open),
body:has(#page-leader-form .grid-row-open),
body:has(#page-organisation-form-new .grid-row-open) .glodp-shell-content,
body:has(#page-organisation-form .grid-row-open) .glodp-shell-content,
body:has(#page-leader-form-new .grid-row-open) .glodp-shell-content,
body:has(#page-leader-form .grid-row-open) .glodp-shell-content {
  overflow: hidden !important;
}

/* iOS Safari only dispatches click on elements it deems clickable: mark <body> so a tap on the backdrop closes the popup. */
body:has(#page-organisation-form-new .grid-row-open),
body:has(#page-organisation-form .grid-row-open),
body:has(#page-leader-form-new .grid-row-open),
body:has(#page-leader-form .grid-row-open) {
  cursor: pointer;
}

#page-organisation-form-new .grid-row-open .form-in-grid,
#page-organisation-form .grid-row-open .form-in-grid,
#page-leader-form-new .grid-row-open .form-in-grid,
#page-leader-form .grid-row-open .form-in-grid {
  cursor: auto;
}

/* Organisation form, "List of documents" table: show each document's full text instead of Frappe's one-line ellipsis,
   so applicants needn't open every row to read it. Rows grow to fit (Frappe pins cells at 43px). */
div[data-fieldname="list_of_doc"] .grid-body .grid-static-col,
div[data-fieldname="list_of_doc"] .grid-body .row-index {
  height: auto !important;
  min-height: 43px;
}

div[data-fieldname="list_of_doc"] .grid-body .static-area.ellipsis {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* The "Detail" cell is a pre-filled label, not an input. When a row went into edit mode Frappe swapped its wrapped text for a
   one-line select, so the row shrank and rows below jumped up under the pointer mid-click (the option you picked landed on
   the wrong row). Keep the text showing, in edit mode too, so row heights never change. */
div[data-fieldname="list_of_doc"] .grid-body .editable-row .grid-static-col[data-fieldname="description"] .static-area {
  display: block !important;
  /* editable-row cells have their padding zeroed (the input fills them); restore the idle-cell padding for the text */
  padding: 6px 8px;
}

div[data-fieldname="list_of_doc"] .grid-body .editable-row .grid-static-col[data-fieldname="description"] .field-area {
  display: none !important;
}