/* ==========================================================
   COREGRID CMMS — FORMS STYLES
   ========================================================== */

/* ----------------------------------------------------
   FORM CARD — main container for forms
   ---------------------------------------------------- */
.form-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 800px;
    margin-bottom: var(--space-4);
}

.form-card.wide {
    max-width: 1100px;
}

.form-card.narrow {
    max-width: 500px;
}

.form-section {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.form-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section-title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
}

.form-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

/* ----------------------------------------------------
   FORM GROUP — single field wrapper
   ---------------------------------------------------- */
.form-group {
    margin-bottom: var(--space-4);
}

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

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

.form-group .help-text {
    font-size: var(--text-xs);
    color: var(--color-text-soft);
    margin-top: var(--space-1);
    line-height: 1.5;
}

.form-group .field-error {
    font-size: var(--text-xs);
    color: var(--color-danger);
    margin-top: var(--space-1);
    font-weight: var(--weight-medium);
}

/* ----------------------------------------------------
   INPUT STYLING — modernize all form inputs
   ---------------------------------------------------- */
.form-card input[type="text"],
.form-card input[type="number"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="url"],
.form-card input[type="tel"],
.form-card input[type="date"],
.form-card input[type="time"],
.form-card input[type="datetime-local"],
.form-card input[type="search"],
.form-card select,
.form-card textarea {
    width: 100%;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg-elevated);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    margin: 0;
    min-height: 40px;
}

.form-card input[type="text"]:focus,
.form-card input[type="number"]:focus,
.form-card input[type="email"]:focus,
.form-card input[type="password"]:focus,
.form-card input[type="url"]:focus,
.form-card input[type="tel"]:focus,
.form-card input[type="date"]:focus,
.form-card input[type="time"]:focus,
.form-card input[type="search"]:focus,
.form-card select:focus,
.form-card textarea:focus {
    outline: none;
    border-color: var(--cg-cerulean);
    box-shadow: var(--focus-ring);
}

.form-card textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
    font-family: var(--font-sans);
}

.form-card input[type="file"] {
    width: 100%;
    padding: var(--space-2);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    font-size: var(--text-sm);
    cursor: pointer;
    min-height: 40px;
}

.form-card input[type="file"]:hover {
    background: var(--color-bg);
    border-color: var(--cg-cerulean);
}

/* Checkbox & radio */
.form-card input[type="checkbox"],
.form-card input[type="radio"] {
    width: auto;
    margin-right: var(--space-2);
    vertical-align: middle;
    accent-color: var(--cg-teal);
}

.form-checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.form-checkbox-row label {
    display: inline;
    margin: 0;
    font-weight: var(--weight-medium);
    cursor: pointer;
}

/* Disabled / readonly */
.form-card input:disabled,
.form-card input[readonly],
.form-card select:disabled,
.form-card textarea:disabled {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* ----------------------------------------------------
   FORM ROW — multi-column layouts
   ---------------------------------------------------- */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-row .form-group {
    margin-bottom: 0;
}

.form-row.two-col {
    grid-template-columns: 1fr 1fr;
}

.form-row.three-col {
    grid-template-columns: 1fr 1fr 1fr;
}

/* ----------------------------------------------------
   FORM ACTIONS — Save / Cancel buttons
   ---------------------------------------------------- */
.form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.form-actions.right {
    justify-content: flex-end;
}

.form-actions.no-border {
    border-top: none;
    padding-top: 0;
}

/* ----------------------------------------------------
   FIELD WITH ERROR STATE
   ---------------------------------------------------- */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: var(--color-danger);
}

.form-group.has-error label {
    color: var(--color-danger);
}

/* ----------------------------------------------------
   READONLY DISPLAY (for show-only fields)
   ---------------------------------------------------- */
.form-display {
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: var(--text-sm);
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* ----------------------------------------------------
   INLINE FORM (small, for filters/quick actions)
   ---------------------------------------------------- */
.form-inline {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.form-inline .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 150px;
}

/* ----------------------------------------------------
   LOGIN / AUTH PAGES (centered card)
   ---------------------------------------------------- */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;   /* Dynamic viewport height — handles mobile address bar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--cg-navy) 0%, var(--cg-teal) 100%);
    width: 100%;
    box-sizing: border-box;
}

.auth-card {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    max-width: 420px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--space-6);
}

.auth-logo img {
    max-width: 200px;
    height: auto;
}

.auth-title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-align: center;
    margin-bottom: var(--space-2);
}

.auth-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-6);
}

/* ----------------------------------------------------
   MOBILE
   ---------------------------------------------------- */
@media (max-width: 768px) {
    .form-card {
        padding: var(--space-4);
    }

    .form-row,
    .form-row.two-col,
    .form-row.three-col {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .auth-card {
        padding: var(--space-5);
    }
}