/* ============================================================================
   RAGE — Shared Maintenance Form Design System
   ----------------------------------------------------------------------------
   Global (non-isolated) classes for data-entry / maintenance screens: sectioned
   forms, tab strips, required markers and the Cancel / Save footer.
   Companion of report.css (which covers report / grid screens).
   Worked example:  Rage.Web\Features\Maintenance\Manage Supplier Details\Components\LeasingBankAccountTab.razor
   Documentation:   Rage.Core\Documents\rage_web_instructions.md (§20 Maintenance Forms, §21 Tabs)
   ============================================================================ */

/* ---------- 1. Tab strip ----------
   Light-blue inactive tabs, solid blue active tab - the Asset Management look.
   Put Class="rage-tabs" on a TelerikTabStrip instead of restyling tabs per screen. */

.rage-tabs .k-tabstrip-items-wrapper ul {
    grid-gap: 2px;
    margin-bottom: 1px;
}

.rage-tabs .k-tabstrip-items-wrapper .k-item,
.rage-tabs .k-tabstrip-items-wrapper .k-item:hover {
    color: var(--blue-600);
    background-color: var(--light-blue-100);
    border: none !important;
    min-width: 160px;
}

.rage-tabs .k-tabstrip-items-wrapper .k-item.k-active,
.rage-tabs .k-tabstrip-items-wrapper .k-item.k-selected {
    color: var(--white-primary);
    background-color: var(--blue-600);
    box-shadow: none;
}

/* Telerik's theme colours the tab link (and any icon in a HeaderTemplate) with its own
   primary colour; make them follow the tab colour set above instead. */
.rage-tabs .k-tabstrip-items-wrapper .k-item .k-link,
.rage-tabs .k-tabstrip-items-wrapper .k-item .k-svg-icon {
    color: inherit;
}

.rage-tabs .k-tabstrip-content {
    padding: 0;
    border: none;
}

/* ---------- 2. Form sections ----------
   A form is a stack of sections. Each section = light-blue header band + body. */

.form-card {
    background: var(--white-primary);
    border: 1px solid var(--grey);
    border-radius: 5px;
    overflow: hidden;
}

.form-section-header {
    background-color: var(--light-blue-100);
    color: var(--dark-blue-500);
    font-size: var(--text-13);
    font-weight: var(--font-weight-700);
    padding: 8px 14px;
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
    margin: 0;
}

.form-card > .form-section-header:first-child {
    border-top: none;
}

.form-section-body {
    padding: 14px;
}

/* Muted one-line explanation under a section header. */
.form-section-hint {
    color: var(--black-500);
    font-size: var(--text-12);
    margin: 0 0 12px;
}

/* Small bold caption for a group of fields inside a section (e.g. "Rental"). */
.form-subgroup-title {
    color: var(--dark-blue-500);
    font-size: var(--text-12);
    font-weight: var(--font-weight-700);
    margin: 4px 0 10px;
}

/* ---------- 3. Field grid ----------
   .form-grid is 2 columns by default; add .form-grid-3 for three. Collapses to one
   column on narrow screens. Use this instead of .commonFormField (fixed 4 columns)
   when the design calls for wide 2- or 3-column fields. */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 14px;
}

.form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid + .form-subgroup-title {
    margin-top: 18px;
}

@media (max-width: 768px) {
    .form-grid,
    .form-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.form-field .form-label {
    color: var(--dark-blue-500);
    font-size: var(--text-12);
    font-weight: var(--font-weight-600);
    margin: 0;
}

.form-field .k-input-solid,
.form-field .k-input-solid:hover,
.form-field .k-picker-solid {
    border: 1px solid var(--grey);
}

/* Red asterisk after a required field's label: <label class="form-label form-required">. */
.form-required::after {
    content: " *";
    color: var(--red);
}

.form-field .validation-message {
    color: var(--red);
    font-size: var(--text-11);
}

/* ---------- 4. Checkbox row ---------- */

.form-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-row .form-label {
    margin: 0;
}

.form-check-row .k-checkbox {
    border-color: var(--dark-blue-500);
}

.form-check-row .k-checkbox.k-checked,
.form-check-row .k-checkbox:checked {
    background-color: var(--blue-600);
    border-color: var(--blue-600);
}

/* ---------- 5. Footer actions ----------
   Right-aligned Cancel (outlineButton) + Save (fillButton). */

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px;
}