/**
 * TASK-MONITOR Framework - AjaxForm cards view (layout only)
 *
 * Structural layout for the card (tab) view of AjaxForms. No theme colors here:
 * everything visual is themeable through the --afc-* variables below.
 *
 * The cards view is enabled by the class "afViewCards" on .ajaxFormEnvelope
 * (toggled by js/ajaxform-cards.js) and only applies on desktop
 * (body.isDesktop, detected by js/scripts.js). Fields are never duplicated -
 * groups are only shown/hidden.
 */

.ajaxFormEnvelope {
    /* follow the active theme tokens when they exist, fall back to neutral values */
    --afc-bar-bg: var(--surface-2, #f2f4f6);
    --afc-bar-border: var(--border-default, #e2e2e2);
    --afc-bar-radius: var(--radius-md, 6px);
    --afc-bar-gap: var(--space-2, 6px);
    --afc-bar-padding: var(--space-1, 6px) var(--space-2, 8px);
    --afc-bar-margin: 0 0 var(--space-3, 12px);

    --afc-card-bg: var(--surface-1, #ffffff);
    --afc-card-border: var(--border-default, #d9d9d9);
    --afc-card-color: var(--text-secondary, #464646);
    --afc-card-radius: var(--radius-sm, 6px);
    --afc-card-padding: 7px 14px;
    --afc-card-font-size: 12px;

    --afc-card-active-bg: var(--text-primary, #191a1d);
    --afc-card-active-border: var(--text-primary, #191a1d);
    --afc-card-active-color: var(--surface-1, #fefefe);
}

/* ---------- default (standard view): the bar stays hidden ---------- */

.afCardsBar {
    display: none;
}

/* ---------- cards view ---------- */

body.isDesktop .ajaxFormEnvelope.afViewCards .afCardsBar {
    display: flex;
    align-items: center;
    gap: var(--afc-bar-gap);
    padding: var(--afc-bar-padding);
    margin: var(--afc-bar-margin);
    background: var(--afc-bar-bg);
    border: 1px solid var(--afc-bar-border);
    border-radius: var(--afc-bar-radius);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

body.isDesktop .ajaxFormEnvelope.afViewCards .afCard {
    flex: 0 0 auto;
    padding: var(--afc-card-padding);
    background: var(--afc-card-bg);
    border: 1px solid var(--afc-card-border);
    border-radius: var(--afc-card-radius);
    color: var(--afc-card-color);
    font-size: var(--afc-card-font-size);
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}

body.isDesktop .ajaxFormEnvelope.afViewCards .afCard.active {
    background: var(--afc-card-active-bg);
    border-color: var(--afc-card-active-border);
    color: var(--afc-card-active-color);
}

/* in cards view only the active group is visible; its label lives in the bar */
body.isDesktop .ajaxFormEnvelope.afViewCards .ajaxFormGroupEnvelope {
    display: none;
}

body.isDesktop .ajaxFormEnvelope.afViewCards .ajaxFormGroupEnvelope.afActive {
    display: block;
}

body.isDesktop .ajaxFormEnvelope.afViewCards .ajaxFormGroupEnvelope > .formGroupLabel {
    display: none;
}

/* ---------- header switch icon (same pattern as the other header icons) ---------- */

.ajaxFormHeader .afhFormViewIcon {
    display: inline-block;
    position: absolute;
    right: 240px;
    top: 10px;
    font-size: 24px;
    width: 40px;
    text-align: center;
    cursor: pointer;
}

.ajaxFormHeader .afhFormViewIcon .fa-rectangle-list {
    display: inline-block;
}

.ajaxFormHeader .afhFormViewIcon .fa-table-columns {
    display: none;
}

.afViewCards .ajaxFormHeader .afhFormViewIcon .fa-rectangle-list {
    display: none;
}

.afViewCards .ajaxFormHeader .afhFormViewIcon .fa-table-columns {
    display: inline-block;
}

/* ---------- mobile / touch: cards view is not offered ---------- */

body.isMobile .afCardsBar,
body.isMobile .afhFormViewIcon {
    display: none !important;
}

body.isMobile .ajaxFormEnvelope.afViewCards .ajaxFormGroupEnvelope {
    display: block;
}

body.isMobile .ajaxFormEnvelope.afViewCards .ajaxFormGroupEnvelope > .formGroupLabel {
    display: block;
}