/* Comparative Tafsir v2.14 — shared form design system.
   Load AFTER styles.css, tahsin_class.css, and Select2 CSS.
   Applies to native fields created in PHP and dynamically through JavaScript.
   Preserves existing application functions and native checkbox/radio behavior. */
:root {
  --tc-field-border: #d4e2d8;
  --tc-field-border-hover: #a4c7b1;
  --tc-field-focus: #18724e;
  --tc-field-text: #234536;
  --tc-field-bg: #fff;
  --tc-field-disabled: #f1f4f1;
  --tc-field-placeholder: #8a9b90;
}

/* Text-like controls across reader, admin, popups, filter bars and Tahsin. */
body :where(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not(.select2-hidden-accessible), select:not(.select2-hidden-accessible), textarea) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--tc-field-border);
  border-radius: 9px;
  background-color: var(--tc-field-bg);
  color: var(--tc-field-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: none;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body :where(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not(.select2-hidden-accessible), select:not(.select2-hidden-accessible), textarea):hover:not(:disabled) {
  border-color: var(--tc-field-border-hover);
}
body :where(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not(.select2-hidden-accessible), select:not(.select2-hidden-accessible), textarea):focus {
  border-color: var(--tc-field-focus);
  box-shadow: 0 0 0 3px rgba(24,114,78,.11);
}
body :is(input, textarea):not([type='file'])::placeholder {color:var(--tc-field-placeholder);opacity:1;font-weight:400}
body :is(input, textarea, select):disabled:not([type='checkbox']):not([type='radio']):not([type='hidden']) {
  background-color: var(--tc-field-disabled);
  color: #6f8276;
  cursor: not-allowed;
  opacity: .8;
}
body :is(input, textarea)[readonly] {background:#f6f8f6;cursor:default}
body textarea {min-height:95px;height:auto;resize:vertical;line-height:1.7;white-space:pre-wrap}

/* Select dropdowns look the same in native browsers including Safari. */
body select:not([multiple]):not(.select2-hidden-accessible) {
  appearance:none;
  -webkit-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='m2 2 5 5 5-5' stroke='%23627d6b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px auto;
}
body select[multiple] {padding:8px 11px;background-image:none;min-height:92px}
body input[type='date'],body input[type='time'],body input[type='datetime-local'] {color-scheme:light}

/* File input and upload button, including Safari/iPhone and live recording fallback. */
body input[type='file'] {
  display:block;
  width:100%;
  max-width:100%;
  min-height:48px;
  padding:7px 10px;
  border:1px dashed var(--tc-field-border);
  border-radius:9px;
  background:#f9fbf9;
  color:var(--tc-field-text);
  font-family:inherit;
  font-weight:500;
  font-size:12px;
  line-height:1.5;
  cursor:pointer;
}
body input[type='file']:focus-visible {border-color:var(--tc-field-focus);outline:3px solid rgba(24,114,78,.13);outline-offset:1px}
body input[type='file']::file-selector-button {
  appearance:none;
  border:1px solid #bed9c8;
  border-radius:7px;
  background:#eaf4ed;
  color:#24583d;
  font-family:inherit;
  font-weight:700;
  font-size:12px;
  line-height:1.35;
  padding:8px 12px;
  margin-right:12px;
  cursor:pointer;
}
body input[type='file']:hover::file-selector-button {background:#dceee1}
body input[type='file']:disabled {opacity:.55;cursor:not-allowed}

/* Checkboxes/radios keep their native accessible hit targets. */
body input[type='checkbox'],body input[type='radio'] {
  width:17px;
  height:17px;
  min-width:17px;
  margin:0;
  accent-color:var(--green,#146648);
  vertical-align:middle;
  flex:0 0 auto;
  cursor:pointer;
}
body input:is([type='checkbox'],[type='radio']):focus-visible {outline:3px solid rgba(24,114,78,.25);outline-offset:2px}
body :is(.inline-check,.consent-label,.source-option,.recitation-options label,.quiz-option,.quiz-category-choice) {gap:8px;line-height:1.55}

/* One consistent label system, including newer modules without .form-stack. */
body :is(.form-stack,.tc-stack,.quiz-controls,.quiz-controls-v22,.recitation-pickers,.wallet-fee-grid) label:not(.inline-check):not(.consent-label) {
  display:grid;
  gap:7px;
  align-content:start;
  min-width:0;
  color:#3c5947;
  font-size:12px;
  font-weight:650;
  line-height:1.45;
}
body .tc-form-line label {display:grid;gap:7px;min-width:0;flex:1 1 135px;align-content:start}
body .tc-form-line :is(input,select,textarea) {width:100%}
body :is(.form-two,.wallet-fee-grid,.recitation-pickers,.quiz-controls,.quiz-controls-v22) > * {min-width:0}
body .form-two {gap:12px}
body .tc-form-line {gap:12px;align-items:end}
body .tc-stack .tc-section {min-width:0}
body #tc-roster-search,body #tc-admin-search,body #progress-surah-filter {width:100%}
body .tc-section #tc-grade-preview {align-self:center;line-height:1.5}

/* Search / table controls remain compact, can wrap instead of overflowing modals. */
body :is(.user-filters,.wallet-history-controls,.progress-stats-toolbar) {display:flex;align-items:center;gap:9px;flex-wrap:wrap}
body :is(.user-filters,.wallet-history-controls) > :is(input,select) {width:auto;min-width:132px;flex:1 1 148px;max-width:100%}
body :is(.user-filters,.wallet-history-controls) > input[type='search'] {flex:2 1 185px}
body .wallet-history-controls select {max-width:none}
body .progress-stats-toolbar input {flex:1 1 200px}
body .theme-search-line input,body .source-filter-line input {max-width:100%}

/* Select2 (surah/ayat), including dropdown rendered over popup content. */
body .select2-container {max-width:100%;font-family:inherit;font-size:13px}
body .select2-container--default .select2-selection--single {
  height:44px;
  min-height:44px;
  border:1px solid var(--tc-field-border);
  border-radius:9px;
  background:#fff;
  transition:border-color .18s,box-shadow .18s;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding:0 35px 0 13px;
  line-height:42px;
  color:var(--tc-field-text);
  font-size:13px;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow {height:42px;right:8px}
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single {border-color:var(--tc-field-focus);box-shadow:0 0 0 3px rgba(24,114,78,.11)}
body .select2-dropdown {z-index:1500;border:1px solid var(--tc-field-border);border-radius:9px;overflow:hidden;box-shadow:0 12px 35px rgba(0,0,0,.10)}
body .select2-container--default .select2-search--dropdown .select2-search__field {width:100%;min-height:39px;border:1px solid var(--tc-field-border);border-radius:7px;padding:8px 11px}
body .select2-container--default .select2-results__option--highlighted[aria-selected] {background:#146648;color:#fff}
body .select2-container--default .select2-results__option[aria-selected=true] {background:#e9f5ee;color:#174a36}

/* Form consistency on small mobile screens, prevents Safari focus zoom. */
@media (max-width:700px) {
  body :where(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='file']):not(.select2-hidden-accessible),select:not(.select2-hidden-accessible),textarea) {font-size:16px;min-height:44px}
  body .select2-container--default .select2-selection--single .select2-selection__rendered {font-size:16px}
  body :is(.user-filters,.wallet-history-controls) > :is(input,select) {max-width:none;width:100%;flex:1 1 100%}
  body :is(.form-two,.wallet-fee-grid,.recitation-pickers) {min-width:0}
  body .tc-form-line {display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  body .tc-form-line label {width:100%}
}
@media (prefers-reduced-motion: reduce) {
  body :is(input,textarea,select),body .select2-container--default .select2-selection--single {transition:none}
}