/* ===================================================
   esm-parent-forms.css -- ESM Parent Portal generic form controls
   Drop this file into any page; all controls automatically match
   the ESM theme without writing any additional CSS.

   Covers:
     - Text / number / date / search / textarea inputs
     - Input with leading icon  (.input-icon-wrap)
     - Input with trailing button (.input-btn-wrap)
     - Select / dropdown
     - Checkbox & radio
     - Buttons: primary, secondary, danger, ghost, icon-only
     - Button with leading/trailing icon
     - Form groups & labels
     - Inline validation states (error, success, warning)
     - Form sections / fieldsets
     - Read-only / disabled states
     - All sizing derived from content / font -- no fixed widths
   =================================================== */

/* -- Shared control base ------------------------------ */
input,
textarea,
select {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 9px;
    line-height: 1.45;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    width: auto;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-faint);
}

[data-theme='dark'] input,
[data-theme='dark'] textarea,
[data-theme='dark'] select {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

/* -- Textarea specifics -------------------------------- */
textarea {
    resize: vertical;
    min-height: 72px;
}

/* -- Select / dropdown ---------------------------------- */
select {
    padding-right: 28px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d7b8a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
}

[data-theme='dark'] select {
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237f90a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
}

select option {
    background: var(--surface);
    color: var(--text);
}

[data-theme='dark'] select option {
    background: var(--surface);
    color: var(--text);
}

/* -- Disabled & read-only ------------------------------- */
input:disabled,
textarea:disabled,
select:disabled {
    background: var(--surface-alt);
    color: var(--text-faint);
    cursor: not-allowed;
    opacity: .7;
}

input[readonly],
textarea[readonly] {
    background: var(--surface-alt);
    color: var(--text-soft);
    cursor: default;
    border-style: dashed;
}

/* -- Input with leading icon ----------------------------
   Usage:
   <div class="input-icon-wrap">
     <svg .../>
     <input type="text" />
   </div>
*/
.input-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.input-icon-wrap > svg,
.input-icon-wrap > .input-icon {
    position: absolute;
    left: 9px;
    width: 14px;
    height: 14px;
    color: var(--text-faint);
    pointer-events: none;
    flex-shrink: 0;
}

.input-icon-wrap > input,
.input-icon-wrap > textarea {
    padding-left: 30px;
}

.input-icon-wrap.icon-right > svg,
.input-icon-wrap.icon-right > .input-icon {
    left: auto;
    right: 9px;
}

.input-icon-wrap.icon-right > input {
    padding-left: 9px;
    padding-right: 30px;
}

/* -- Input with attached trailing button ----------------
   Usage:
   <div class="input-btn-wrap">
     <input type="text" />
     <button class="btn btn-primary">Go</button>
   </div>
*/
.input-btn-wrap {
    display: inline-flex;
    align-items: stretch;
}

.input-btn-wrap > input {
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    flex: 1 1 auto;
    min-width: 0;
}

.input-btn-wrap > .btn,
.input-btn-wrap > button {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    flex-shrink: 0;
}

/* -- Checkbox & Radio ------------------------------------ */
input[type='checkbox'],
input[type='radio'] {
    width: 15px;
    height: 15px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

input[type='radio'] {
    border-radius: 50%;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
    border-color: var(--accent);
}

.check-row,
.radio-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-soft);
    user-select: none;
}

.check-row:hover,
.radio-row:hover {
    color: var(--text);
}

/* -- Buttons ---------------------------------------------
   Base class: .btn
   Variants  : .btn-primary   .btn-secondary  .btn-danger
               .btn-ghost     .btn-link
   Size mods : .btn-sm        .btn-lg
   Icon-only : .btn-icon
   With icon : wrap svg inside .btn -- icon inherits size
*/

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
    width: auto;
}

.btn:active {
    transform: translateY(1px);
}

.btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    pointer-events: none;
}

/* Primary */
.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 1px 3px rgba(28,74,150,.25);
}

.btn-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    box-shadow: 0 4px 10px rgba(28,74,150,.28);
}

.btn-primary:focus {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Secondary */
.btn-secondary {
    background: var(--surface);
    color: var(--text-soft);
    border-color: var(--border);
}

.btn-secondary:hover {
    background: var(--surface-alt);
    border-color: var(--accent);
    color: var(--accent-strong);
}

.btn-secondary:focus {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Danger */
.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.btn-danger:hover {
    filter: brightness(.9);
    box-shadow: 0 4px 10px rgba(209,52,56,.28);
}

/* Ghost (no fill, border only) */
.btn-ghost {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.btn-ghost:hover {
    background: var(--accent-soft);
}

/* Link style */
.btn-link {
    background: transparent;
    color: var(--accent);
    border-color: transparent;
    padding-inline: 2px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link:hover {
    color: var(--accent-strong);
}

/* Success */
.btn-success {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

.btn-success:hover {
    background: #15803d;
    border-color: #15803d;
    box-shadow: 0 4px 10px rgba(22,163,74,.28);
}

/* Disabled state for all button variants */
.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Size modifiers */
.btn-sm {
    padding: 3px 9px;
    font-size: var(--text-xs);
    border-radius: var(--radius-xs);
}

.btn-sm svg {
    width: 12px;
    height: 12px;
}

.btn-lg {
    padding: 9px 20px;
    font-size: var(--text-md);
    border-radius: var(--radius-md);
}

.btn-lg svg {
    width: 16px;
    height: 16px;
}

/* Icon-only button (square, no label) */
.btn-icon {
    padding: 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
}

.btn-icon:hover {
    background: var(--surface-alt);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-icon svg {
    width: 15px;
    height: 15px;
}

.btn-icon.btn-sm {
    padding: 4px;
}

.btn-icon.btn-lg {
    padding: 9px;
}

/* Dark mode button tweaks */
[data-theme='dark'] .btn-secondary,
[data-theme='dark'] .btn-icon {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-soft);
}

[data-theme='dark'] .btn-secondary:hover,
[data-theme='dark'] .btn-icon:hover {
    background: rgba(74,163,255,.08);
    color: var(--accent);
    border-color: var(--accent);
}

/* -- Form group (label + control stack) -----------------
   Usage:
   <div class="form-group">
     <label class="form-label">Full name <span class="req">*</span></label>
     <input type="text" />
     <span class="form-hint">Used for certificates.</span>
   </div>
*/
.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: .02em;
}

.form-label .req {
    color: var(--danger);
    margin-left: 2px;
}

.form-hint {
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

/* -- Inline row layout (label beside control) -----------
   Usage:
   <div class="form-inline">
     <label class="form-label">Status</label>
     <select>...</select>
   </div>
*/
.form-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.form-inline .form-label {
    flex-shrink: 0;
    min-width: 6ch;
}

/* -- Validation states ----------------------------------- */
.form-group.has-error > input,
.form-group.has-error > textarea,
.form-group.has-error > select,
input.is-error, textarea.is-error, select.is-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px rgba(209,52,56,.15);
}

.form-group.has-success > input,
.form-group.has-success > textarea,
.form-group.has-success > select,
input.is-success, textarea.is-success, select.is-success {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,.15);
}

.form-group.has-warning > input,
.form-group.has-warning > textarea,
.form-group.has-warning > select,
input.is-warning, textarea.is-warning, select.is-warning {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245,158,11,.15);
}

.form-error-msg {
    font-size: var(--text-2xs);
    color: var(--danger);
}

.form-success-msg {
    font-size: var(--text-2xs);
    color: #059669;
}

.form-warning-msg {
    font-size: var(--text-2xs);
    color: #d97706;
}

/* -- Form section / fieldset -----------------------------
   Usage:
   <fieldset class="form-section">
     <legend class="form-section-title">Personal details</legend>
     ...controls...
   </fieldset>
*/
.form-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 0;
}

.form-section-title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
    padding: 0 4px;
}

/* -- Form grid (multi-column auto layout) ---------------
   Usage:
   <div class="form-grid">
     <div class="form-group">...</div>
     <div class="form-group">...</div>
   </div>
   Add .col-full to a child to span all columns.
*/
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 16px;
    align-items: start;
}

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

/* -- Button row (action bar at bottom of form) ----------- */
.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--divider);
    margin-top: 8px;
}

.form-actions .spacer {
    flex: 1;
}