/**
 * ============================================================================
 * MUAADH FORM — Form input controls + grouping + rating
 * ============================================================================
 *
 * Form-related rules consolidated from muaadh-core.css in Phase 3 Wave 9
 * (2026-05-13).
 *
 * Owns:
 *   - .muaadh-input (base + variants: --sm, --lg, sizes, --invalid)
 *   - .muaadh-textarea (multiline variant)
 *   - .muaadh-select (dropdown variant)
 *   - .muaadh-input-group + .muaadh-input-group-text (addon wrappers)
 *   - .muaadh-settings-row + __label + __field (form row layout)
 *   - .muaadh-input-rating (star-rating widget)
 *   - Width modifiers: --w-80, --w-140, --w-160, --w-250, --maxw-200
 *
 * Loaded on every page via shell layouts. Form inputs appear on
 * checkout, profile, operator settings, merchant dashboards, etc.
 * ============================================================================
 */

/* ============================================================================
 * SECTION 1: INPUT base states + sizes + settings-row layout
 * ============================================================================ */
.muaadh-input:hover {
    border-color: var(--border-strong);
}
.muaadh-input:focus {
    border-color: var(--border-focus);
    outline: none;
    box-shadow: var(--focus-ring);
}
.muaadh-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
.muaadh-input:disabled {
    background-color: var(--surface-elevated);
    opacity: 0.7;
    cursor: not-allowed;
}
/* Input Sizes */
.muaadh-input--sm {
    min-height: var(--size-control-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}
.muaadh-input--lg {
    min-height: var(--size-control-xl);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
}
/* Input States */
/* ============================================================================
   SETTINGS ROW - .muaadh-settings-row System
   Two-column layout for operator settings pages (label left, field right)
   ============================================================================ */
.muaadh-settings-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--chassis-border-thin) solid var(--border-color);
}
.muaadh-settings-row:last-child {
    border-bottom: none;
}
.muaadh-settings-row__label {
    flex: none;
    font-weight: var(--theme-font-semibold);
    color: var(--text-body);
    padding-top: 0;
    font-size: var(--text-sm);
}
.muaadh-settings-row__label small {
    display: block;
    font-weight: var(--theme-font-normal);
    color: var(--text-muted);
    margin-top: 2px;
}
.muaadh-settings-row__field {
    flex: 1;
    min-width: 0;
}
/* Input Fields */
.muaadh-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select.muaadh-input,
.muaadh-select,
textarea {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: var(--space-2) var(--space-3);
    font-family: var(--theme-font-primary);
    font-size: var(--text-sm);
    font-weight: var(--theme-font-normal);
    line-height: var(--theme-line-height);
    color: var(--text-primary);
    background-color: var(--theme-card-bg);
    background-clip: padding-box;
    border: var(--chassis-border-thin) solid var(--theme-border-light);
    border-radius: var(--chassis-radius);
    box-shadow: none;
    transition: var(--chassis-duration-quick) ease;
    appearance: none;
}
/* Input Hover */
.muaadh-input:hover,
input:hover,
select:hover,
textarea:hover {
    border-color: var(--theme-border);
}
/* Input Focus */
.muaadh-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--theme-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}
/* Placeholder */
.muaadh-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
/* Disabled */
.muaadh-input:disabled,
.muaadh-input[readonly],

/* ============================================================================
 * SECTION 2: INPUT canonical block + textarea/select + input-group
 * ============================================================================ */
.muaadh-input {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--theme-font-normal);
    line-height: var(--theme-line-height);
    color: var(--text-body);
    background-color: var(--surface-card);
    background-clip: padding-box;
    border: var(--chassis-border-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.muaadh-input:focus,
.muaadh-input:focus-visible {
    border-color: var(--border-focus);
    outline: none;
    box-shadow: var(--focus-ring);
}
.muaadh-input:disabled,

.muaadh-input:read-only {
    background-color: var(--surface-elevated);
}
/* Input Sizes */
/* Input States */
/* Textarea */
.muaadh-textarea {
    min-height: 100px;
    resize: vertical;
}
/* Select */
.muaadh-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%233d3429' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 12px;
    padding-right: var(--space-8);
}
/* Input Group */
.muaadh-input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.muaadh-input-group > .muaadh-input,
.muaadh-input-group > .muaadh-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.muaadh-input-group > .muaadh-input:not(:first-child),
.muaadh-input-group > .muaadh-select:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.muaadh-input-group > .muaadh-input:not(:last-child),
.muaadh-input-group > .muaadh-select:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.muaadh-input-group-text {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--theme-font-normal);
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    background-color: var(--surface-elevated);
    border: var(--chassis-border-thin) solid var(--border-default);
}
.muaadh-input-group-text:first-child {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: 0;
}
.muaadh-input-group-text:last-child {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start: 0;
}

/* ============================================================================
 * SECTION 3: INPUT width modifiers
 * ============================================================================ */
.muaadh-input--w-140      { width: auto; min-width: 140px; }
.muaadh-input--w-160      { width: auto; min-width: 160px; }
.muaadh-input--w-250      { width: 250px; max-width: 100%; }
.muaadh-input--maxw-200   { max-width: 200px; }
/* Quantity input (catalog quick-view +/- box). 80px is a deliberate
   compromise — wide enough for 4 digits, narrow enough not to crowd
   sibling buttons. */
.muaadh-input--w-80 { width: 80px; }

/* ============================================================================
 * SECTION 4: INPUT validation state + rating widget
 * ============================================================================ */
.muaadh-input--invalid { border-color: var(--action-danger); }
.muaadh-input--invalid ~ .muaadh-field__feedback--invalid { display: block; }
/* ============================================================================
   CSS RESTORATION — P2: RATING INPUT
   ============================================================================ */
.muaadh-input-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--space-1);
}
.muaadh-input-rating__radio { display: none; }
.muaadh-input-rating__label {
    font-size: var(--text-2xl);
    color: var(--border-default);
    cursor: pointer;
    transition: color var(--chassis-duration-fast);
}
.muaadh-input-rating__label:hover,
.muaadh-input-rating__label:hover ~ .muaadh-input-rating__label,
.muaadh-input-rating__radio:checked ~ .muaadh-input-rating__label {
    color: var(--action-warning);
}

/* ============================================================================
 * APPENDED (Phase 13 Wave 3): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-input--success {
    border-color: var(--theme-success);
    box-shadow: 0 0 0 1px var(--theme-success);
}

.muaadh-input--danger {
    border-color: var(--theme-danger);
    box-shadow: 0 0 0 1px var(--theme-danger);
}


/* ============================================================================
 * APPENDED (Phase 13 Wave 3): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-textarea-md { height: 100px; }

.muaadh-textarea-lg { height: 122px; }


/* ============================================================================
 * APPENDED (Phase 13 Wave 24 — field→form): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-field-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.muaadh-field-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--theme-font-medium);
    font-size: var(--text-sm);
    color: var(--text-body);
}

.muaadh-field__feedback--invalid {
    display: none;
    width: 100%;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--action-danger);
}

/* Form row responsive (Phase 13 Wave 29, 2026-05-13) */
@media (min-width: 768px) {
    .muaadh-form-row {
        grid-template-columns: 200px 1fr;
        align-items: center;
    }
    .muaadh-form-row--narrow { grid-template-columns: 160px 1fr; }
    .muaadh-form-row--wide   { grid-template-columns: 280px 1fr; }
}

/* ============================================================================
 * APPENDED (Phase 13 Wave 30): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.muaadh-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.muaadh-form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--chassis-border-thin) solid var(--border-light);
}


/* ============================================================
   Auth card — narrow centred wrapper for login / register /
   forgot. Page-wide width on auth screens makes the fields
   awkwardly long; this caps them to a comfortable reading width.
   ============================================================ */

.muaadh-auth-card {
    max-width: 480px;
    margin-inline: auto;
}

.muaadh-auth-card__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-3);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.muaadh-auth-card__divider::before,
.muaadh-auth-card__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

/* Phone-input combo: country dropdown above, local digits below.
   Stacked vertically. An earlier attempt at side-by-side flex broke
   under RTL because .muaadh-input has width:100% globally, so both
   children fought for the row and the local input overflowed the
   panel. Vertical stack is unambiguous in either direction and keeps
   both fields fully visible on the 480px auth card. */

.muaadh-phone-input__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.muaadh-phone-input__code,
.muaadh-phone-input__local {
    width: 100%;
}

/* Block-width action button used inside .muaadh-auth-card */
.muaadh-action--block {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   Auth screen — standalone full-page background for /operator/login
   and any future shell-less auth surface. The customer /auth/login
   sits inside layout-customer, so it gets the regular page chrome;
   this rule only applies when the page body opts in via the
   .muaadh-auth-screen class.
   ============================================================ */

body.muaadh-auth-screen {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg,
        var(--theme-bg-soft, #f5f7fb) 0%,
        var(--theme-bg, #eef2f8) 100%);
    display: flex;
    flex-direction: column;
}

.muaadh-auth-screen__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-6);
}

.muaadh-auth-card__brand {
    text-align: center;
    margin-bottom: var(--space-4);
}

.muaadh-auth-card__logo {
    max-height: 60px;
    width: auto;
}

.muaadh-auth-card__title {
    margin: 0;
    font-size: var(--text-2xl);
    color: var(--theme-primary);
    font-weight: var(--theme-font-bold);
}