/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: form.css
 * @TITLE: PATHWRITE
 * @DESCRIPTION: Form control components - labels, inputs, selects, input groups, validation feedback.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.8
 * - File Modified | Ary van der Pijl | 2026-08-18 | Appearance & Branding P2 (ATH_PLATFORM_REQUIREMENTS.md section 1, "Remove color theme panel"): removed .theme-skin-swatch/-color/-label - the colour-theme picker UI (theme.php's #skin-grid, theme.js's renderSkins()) was removed per this requirement, leaving these classes dead. The underlying skin CSS system ([data-skin="*"] blocks in design-tokens.css) and theme_skin DB column are untouched - only the picker UI is gone, existing tenants keep whatever skin they last had saved. Added .theme-branding-preview/--sm for the new logo/favicon upload preview thumbnails, replacing the old plain URL text fields. |
 * VERSION 1.0.7
 * - File Modified | Ary van der Pijl | 2026-08-15 | Added .theme-skin-swatch/-color/-label - replaces theme.js's JS-generated inline style="cursor:pointer;padding:12px;border:2px solid var(--color-border);border-radius:8px;text-align:center;transition:all .15s" / "width:40px;height:40px;border-radius:8px;margin:0 auto 8px" / "font-size:12px;font-weight:500" (hard-constraint violations) on the theme skin-selection grid, found while retrofitting theme.js for multi-language support. The selected-state border now lives in CSS (.theme-skin-swatch.selected) instead of a JS-driven inline borderColor toggle - the API-supplied swatch background colour is the only value that genuinely needs to stay inline. |
 * VERSION 1.0.6
 * - File Modified | Ary van der Pijl | 2026-08-15 | Added .pref-icon/--warning, .pref-font-preview-sm/-md/-lg, and .pref-color-input - replaces the remaining inline style="..." violations (icon size, the 3 fixed-px font-size demo labels, colour-input box sizing) on theme.php's preference cards. |
 * VERSION 1.0.5
 * - File Modified | Ary van der Pijl | 2026-08-15 | .pref-radio-card now sets cursor:pointer and border-radius:var(--radius-md) directly - replaces an inline style="cursor:pointer;border-radius:var(--radius-md)!important" (hard-constraint violation) repeated on all 6 preference-card labels in theme.php. |
 * VERSION 1.0.4
 * - File Modified | Ary van der Pijl | 2026-08-15 | Added .form-scroll-list - replaces roles.php's inline style="max-height:360px;overflow-y:auto;..." on the permissions checklist (hard-constraint violation), fixed while retrofitting that page for multi-language support. |
 * VERSION 1.0.3
 * - File Modified | Ary van der Pijl | 2026-08-06 | Added .pref-radio-card (mirrors wizard.css's .sf-payment-option:has(input:checked) pattern) - the Appearance page's Light/Dark/System mode cards had no selected-state styling at all, so applying it to the two new preference cards (Font Size, Interface Mode) would have tripled a pre-existing, immediately-visible bug rather than just inherited it (Phase 24 theme/customisation audit). |
 * VERSION 1.0.1
 * - File Modified | Ary van der Pijl | 2026-08-06 | Phase 19 component library audit: added .password-strength meter and .password-match-feedback styles - no password strength indicator existed anywhere in the app. |
 * VERSION 1.0.0
 * + File Created | Ary van der Pijl | 2026-08-06 | Extracted from main.css as part of the Phase 17 CSS architecture split (9-file hierarchy per STD-E). |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ─── Forms ──────────────────────────────────────────────────────────────── */

.form-scroll-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-control, .form-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  height: 38px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
}

.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-control::placeholder {
  color: var(--color-text-subtle);
}

textarea.form-control {
  height: auto;
  min-height: 100px;
  resize: vertical;
  line-height: var(--lh-normal);
}

.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--color-danger);
}

.form-control:not(textarea).is-valid,
.form-control:not(textarea).is-invalid {
  padding-right: 2.25rem;
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 18px 18px;
}

.form-control:not(textarea).is-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2316a34a'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-control:not(textarea).is-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23dc2626'/%3E%3Cpath d='M12 7v6M12 16.5v.01' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.invalid-feedback {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
}

.form-group {
  margin-bottom: var(--space-5);
}

.input-group {
  display: flex;
}

.input-group .form-control {
  flex: 1;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-group .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-prefix, .input-suffix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.input-prefix {
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-suffix {
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* ─── Preference Radio Cards ─────────────────────────────────────────────── */

.pref-radio-card {
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.pref-radio-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.pref-icon {
  font-size: 32px;
}

.pref-icon--warning {
  color: var(--color-warning);
}

.pref-font-preview-sm {
  font-size: 12px;
}

.pref-font-preview-md {
  font-size: 16px;
}

.pref-font-preview-lg {
  font-size: 20px;
}

.pref-color-input {
  max-width: 80px;
  height: 44px;
  padding: 4px;
}

/* ─── Branding Preview (logo/favicon upload) ────────────────────────────── */

.theme-branding-preview {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  flex-shrink: 0;
}

.theme-branding-preview--sm {
  width: 32px;
  height: 32px;
}

/* ─── Password Strength Meter ───────────────────────────────────────────── */

.password-strength {
  margin-top: var(--space-2);
}

.password-strength.hidden {
  display: none;
}

.password-strength-bar {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.password-strength-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  transition: width var(--transition-base), background-color var(--transition-base);
}

.password-strength-fill.weak {
  background: var(--color-danger);
}

.password-strength-fill.fair {
  background: var(--color-warning);
}

.password-strength-fill.strong {
  background: var(--color-success);
}

.password-strength-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-1);
}

.password-strength-rules li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.password-strength-rules li .material-icons-round {
  font-size: 14px;
  color: var(--color-text-subtle);
}

.password-strength-rules li.rule-met {
  color: var(--color-text);
}

.password-strength-rules li.rule-met .material-icons-round {
  color: var(--color-success);
}

.password-match-feedback {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}