/* wwwroot/css/form-grid.css (include in your layout) */
.form-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    gap: 1rem;
}

    .form-grid .col-span-1 {
        grid-column: span 1;
    }

    .form-grid .col-span-2 {
        grid-column: span 2;
    }

    .form-grid .col-span-3 {
        grid-column: span 3;
    }

    .form-grid .col-span-4 {
        grid-column: span 4;
    }

/* Optional: label-left variant */
.form-field.label-left {
    display: grid;
    grid-template-columns: max(140px, 20%) 1fr;
    align-items: center;
    column-gap: .75rem;
}

.form-section {
    margin-bottom: 1.25rem;
}

    .form-section > legend {
        font-weight: 600;
        font-size: 1.05rem;
        margin-bottom: .5rem;
    }



/* ============================================================== */

/* ---- Generic form layout ---- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    gap: 12px 16px; /* row / column */
}

.form-field {
    display: flex;
    flex-direction: column;
    margin-top: 0.7rem;
}

    .form-field.label-left {
        display: grid;
        grid-template-columns: 160px 1fr;
        align-items: center;
    }

.form-text {
    font-size: .85rem;
    color: var(--rz-text-secondary-color, #6c757d);
    margin-top: .25rem;
}

/* Grid spans (add as many as you need) */
.col-span-1 {
    grid-column: span 1;
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-4 {
    grid-column: span 4;
}

.col-span-5 {
    grid-column: span 5;
}

.col-span-6 {
    grid-column: span 6;
}

.col-span-7 {
    grid-column: span 7;
}

.col-span-8 {
    grid-column: span 8;
}

.col-span-9 {
    grid-column: span 9;
}

.col-span-10 {
    grid-column: span 10;
}

.col-span-11 {
    grid-column: span 11;
}

.col-span-12 {
    grid-column: span 12;
}

/* Radzen niceties */

.app--entity-form {
    /*padding: 2rem;*/
}


.app--entity-form .rz-fieldset {
    margin-bottom: 1rem;
    border-radius: 8px;
    border-color: var(--rz-border-color, #e0e0e0);
}

.app--entity-form .rz-fieldset-legend {
    font-weight: 600;
    letter-spacing: .2px;
    display: flex;
    justify-content: center;
    margin-bottom: 0 !important;
}

    .app--entity-form .rz-fieldset-legend span {
        font-size: 1.3rem;
        padding-left: 0.5rem !important;
        padding-top: 0 !important;
        color: #999 !important;
    }

    .app--entity-form .rz-fieldset-legend i {
        color: #999 !important;
    }

    .app--entity-form .rz-card {
        border-radius: 10px;
    }

.app--entity-form .rz-textbox,
.app--entity-form .rz-dropdown,
.app--entity-form .rz-numeric,
.app--entity-form .rz-textarea,
.app--entity-form .rz-calendar {
    width: 100%;
}

/* Gallery cards & thumbnails */
.app--entity-form .rz-card img {
    border-radius: 6px;
}

/* Responsive collapse to 1 column on narrow screens */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .form-field.label-left {
        grid-template-columns: 1fr;
    }
}

/* Address editor tweaks (reuses your generic form-grid) */
.address-editor .form-field .rz-textbox,
.address-editor .form-field .rz-numeric {
    width: 100%;
}

.address-editor .form-field {
    margin-bottom: .25rem;
}
.form-header, .form-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: var(--rz-panel-background, #fafafa);
}

.form-header {
    border-bottom: 1px solid var(--rz-border-color, #e0e0e0);
}

.form-footer {
    border-top: 1px solid var(--rz-border-color, #e0e0e0);
}

.form-header.sticky {
    position: sticky;
    top: 0;
    z-index: 2;
}

.form-footer.sticky {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.form-header-fields, .form-footer-fields {
    min-width: 0;
}

.form-header-actions, .form-footer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.form-header-fields .pill {
    padding: 0.4rem 1rem !important;
}


/* ========================= */
/* Form layout beautification */
/* ========================= */
/* Overall form container */
.app--entity-form {
    padding: 2.5rem 3rem; /* more breathing room */
    background: #fff; /* ensure clean background */
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

/* Grid spacing */
.form-grid {
    gap: 20px 24px; /* row-gap, col-gap */
}

/* Generic field wrapper */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px; /* label/input separation */
}

    /* Label-left variant with more spacing */
    .form-field.label-left {
        grid-template-columns: 180px 1fr;
        column-gap: 1rem;
    }

/* Inputs */
.app--entity-form .rz-textbox,
.app--entity-form .rz-dropdown,
.app--entity-form .rz-numeric,
.app--entity-form .rz-textarea,
.app--entity-form .rz-calendar {
    width: 100%;
    min-height: 42px; /* taller */
    padding: 10px 12px; /* inner padding */
    border-radius: 6px; /* softer corners */
    font-size: 1rem;
}

/* Fieldsets / sections */
.app--entity-form .rz-fieldset {
    margin-bottom: 2rem; /* more space between sections */
    padding: 1.5rem; /* inner padding */
    border-radius: 10px;
    border: 1px solid var(--rz-border-color, #e0e0e0);
    background: #fafafa;
}

.app--entity-form .rz-fieldset-legend {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #444;
    letter-spacing: 0.3px;
}

    .app--entity-form .rz-fieldset-legend span {
        font-size: 1.2rem !important;
        color: #555 !important;
        padding-left: 0.5rem !important;
    }

    /* Section headers with icons aligned */
    .app--entity-form .rz-fieldset-legend i {
        margin-right: .25rem;
        color: #666 !important;
    }



/* Form header/footer bars */
.form-header, .form-footer {
    padding: 16px 20px;
    gap: 16px;
    background: #f9f9f9;
}

/* Footer buttons more breathing room */
.form-footer-actions {
    gap: 12px;
}

/* Responsive: stack fields on small screens */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .form-field.label-left {
        grid-template-columns: 1fr;
    }
}


/* ============================== */
/* Form header & footer beautify  */
/* ============================== */

.form-header, .form-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 18px 24px;
    background: #fff;
    border: 1px solid var(--rz-border-color, #e0e0e0);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* Separate header/footer visually */
.form-header {
    margin-bottom: 1.0rem;
}

.form-footer {

}

/* Title / field area */
.form-header-fields, .form-footer-fields {
    min-width: 0;
}

/* Actions area (buttons, icons) */
.form-header-actions, .form-footer-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

    /* Footer emphasizes action buttons */
    .form-footer-actions .rz-button {
        min-width: 110px;
        padding: 10px 18px;
        border-radius: 6px;
        font-weight: 600;
    }

/* Sticky variant — subtle shadow when stuck */
.form-header.sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 3px 8px rgba(0,0,0,.06);
    border-radius: 0; /* flush with top */
}

.form-footer.sticky {
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -3px 8px rgba(0,0,0,.06);
    border-radius: 0; /* flush with bottom */
}

.form-header-fields h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
}



/* ================= THEME TOKENS ================= */


:root {
    --fx-bg: #ffffff;
    --fx-surface: #ffffff;
    --fx-surface-subtle: #fafafa;
    --fx-border: #e7e7ef;
    --fx-text: #1f2937;
    --fx-text-muted: #6b7280;
    /* Neutral grays for header/footer */
    --fx-brand-1: #f5f5f5; /* light gray */
    --fx-brand-2: #e5e7eb; /* slightly darker gray */
    --fx-accent: #374151; /* dark gray for icons, focus, strong text */
    /* Header / footer */
    --fx-header-fg: #1f2937;
    --fx-header-bg: linear-gradient(135deg, var(--fx-brand-1), var(--fx-brand-2));
    --fx-footer-bg: #f9fafb;
    /* Radii & shadows */
    --fx-card-radius: 12px;
    --fx-header-radius: 12px 12px 0 0;
    --fx-footer-radius: 0 0 12px 12px;
    --fx-shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}

:root[data-theme="dark"] {
    --fx-bg: #0f1115;
    --fx-surface: #141820;
    --fx-surface-subtle: #0f1115;
    --fx-border: #273245;
    --fx-text: #e5e7eb;
    --fx-text-muted: #a7b1c2;
    --fx-brand-1: #2a2e43;
    --fx-brand-2: #353b52;
    --fx-accent: #8ab4ff;
    --fx-header-fg: #f8fafc;
    --fx-header-bg: linear-gradient(135deg, var(--fx-brand-1), var(--fx-brand-2));
    --fx-footer-bg: #1a1d26;
    --fx-shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
}





/* ===== Form wrapper card ===== */
.app--entity-form .rz-card {
  background: var(--fx-surface);
  border-radius: var(--fx-card-radius);
  box-shadow: var(--fx-shadow-1);
  border: 1px solid var(--fx-border);
}

/* ===== Header bar ===== */
.form-header {
  background: var(--fx-header-bg);
  color: var(--fx-header-fg);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border-radius: var(--fx-header-radius);
  box-shadow: var(--fx-shadow-1);
}

.form-header-fields { min-width: 0; }
.form-header-actions { display:flex; gap:10px; align-items:center; }

.form-header-title {
  display:flex; align-items:center; gap:10px;
  margin-bottom: 6px;
}

.form-title {
  margin:0;
  font-size: 2.5rem !important;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--fx-header-fg);
}

/* If you render optional fields in header */
.form-header-grid .form-grid { margin-top: 4px; }

/* ===== Footer bar ===== */
.form-footer {
  background: var(--fx-surface-subtle);
  border-top: 1px solid var(--fx-border);
  padding: 14px 16px;
  display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center;
  border-radius: var(--fx-footer-radius);
  color: var(--fx-text);
}
.form-footer-actions { display:flex; gap:10px; align-items:center; }



/* ── Fieldset legend theme tokens ───────────────────────────── */
:root {
    --fx-fs-legend-bg: #f3f4f6; /* light gray */
    --fx-fs-legend-bd: #e5e7eb; /* border gray */
    --fx-fs-legend-fg: #6b7280; /* slate-ish text */
}

    :root[data-theme="dark"] {
        --fx-fs-legend-bg: #1f2937; /* gray-800 */
        --fx-fs-legend-bd: #374151; /* gray-700 */
        --fx-fs-legend-fg: #9ca3af; /* gray-400 */
    }

/* ── Fieldset polish ────────────────────────────────────────── */
.app--entity-form .rz-fieldset-legend {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: var(--fx-fs-legend-bg);
    color: var(--fx-fs-legend-fg);
    border: 1px solid var(--fx-fs-legend-bd);
    border-radius: 9999px;
    padding: .4rem .9rem; /* more padding */
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: normal;
    font-size: .5rem; /* smaller text */
    line-height: 1.2;
    box-shadow: var(--fx-shadow-1);
}

    /* icon: bigger and aligned better */
    .app--entity-form .rz-fieldset-legend i {
        font-size: 1.2rem; /* larger icon */
        opacity: .85;
        color: var(--fx-accent);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* keep text smaller & lighter */
    .app--entity-form .rz-fieldset-legend span {
        color: inherit !important;
        font-size: 0.8rem !important;
        font-weight: normal;
    }

    /* subtle highlight when hovering a collapsible legend */
    .app--entity-form .rz-fieldset.rz-state-collapsible .rz-fieldset-legend:hover {
        box-shadow: var(--fx-shadow-raise);
        transition: box-shadow .2s ease, transform .2s ease;
        transform: translateY(-1px);
        cursor: pointer;
    }


    /* tighten legend inner span baseline a hair */
    .app--entity-form .rz-fieldset-legend span {
        padding: 0 !important;
        color: inherit !important;
    }

    /* gentle top spacing inside tabs, without messing headers */
    .form-tab-panel {
        padding-top: 12px;
    }

        /* if you want a bit more breathing room above the first fieldset */
        .form-tab-panel > .rz-fieldset:first-child {
            margin-top: .25rem;
        }

        /* add spacing before the first fieldset in a tab */
        .form-tab-panel > .rz-fieldset:first-child {
            margin-top: 1.25rem; /* adjust to taste */
        }

    .app--entity-form .rz-tabview-panel {
        margin-top: 1rem;
    }

.status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: var(--fx-shadow-1);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.2;
    background: rgba(255,255,255,.18);
    color: var(--fx-header-fg);
    backdrop-filter: blur(2px);
}

    .status-badge.is-new {
        background: #16a34a; /* green-600 */
        color: #fff;
    }

    .status-badge.is-edit {
        background: #e24848; /* amber-600 */
        color: #fff;
    }

    .status-badge.is-view {
        background: #2e4c87; /* amber-600 */
        color: #fff;
    }


/* Dark theme tweaks */
:root[data-theme="dark"] .badge-new {
    background: #22c55e; /* green-500 */
}

:root[data-theme="dark"] .badge-edit {
    background: #f59e0b; /* amber-500 */
}

/* keep/help text neat and readable */
.app--entity-form .form-text {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--fx-text-muted, #6b7280);
}



/* Make <input type="file"> look like a clean button */
.file-input {
    font: inherit;
    display: inline-block;
    padding: 0; /* we style the button, not the input wrapper */
    border: none;
    background: transparent;
    width: auto;
}

    /* The “button” part */
    .file-input::file-selector-button {
        font: inherit;
        padding: 0.5rem 0.875rem;
        border-radius: 8px;
        border: 1px solid var(--fx-border, #d1d5db);
        background: var(--fx-btn-bg, #f3f4f6);
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .file-input:hover::file-selector-button {
        background: var(--fx-btn-bg-hover, #e5e7eb);
        border-color: #cbd5e1;
    }

    .file-input:active::file-selector-button {
        background: var(--fx-btn-bg-active, #e2e8f0);
    }

    /* Safari/old WebKit fallback */
    .file-input::-webkit-file-upload-button {
        font: inherit;
        padding: 0.5rem 0.875rem;
        border-radius: 8px;
        border: 1px solid var(--fx-border, #d1d5db);
        background: var(--fx-btn-bg, #f3f4f6);
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

/* Hide the trailing filename text (optional). Some UAs always show a bit; this reduces impact */
.file-input {
    color: transparent; /* hides the text; keep label visible via the button */
}

    /* If you want a small icon next to it */
    .file-input::file-selector-button::before {
        content: "📎";
        margin-right: .4rem;
    }


.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rz-chip-bg, #f3f4f6); /* light gray */
    border: 1px solid var(--rz-border-color, #e5e7eb);
    font-size: 12px;
    line-height: 1.2;
    color: var(--rz-text-color, #374151);
    max-width: 280px;
}

    .file-chip .file-chip-thumb {
        width: 24px;
        height: 24px;
        object-fit: cover;
        border-radius: 4px;
        display: block;
    }

    .file-chip .file-chip-icon {
        font-size: 14px;
        opacity: .7;
    }

    .file-chip .file-chip-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .file-chip .file-chip-meta {
        margin-left: 6px;
        opacity: .7;
    }

.file-chip-more {
    background: transparent;
    border-style: dashed;
}











/* Base: allow up to 12 columns by default */
.form-grid {
    /* Use a responsive cap variable to limit columns at breakpoints */
    --cols-cap: 12;
    grid-template-columns: repeat(min(var(--cols, 1), var(--cols-cap)), minmax(0, 1fr));
    gap: 14px 18px;
}

/* XL and up (no cap) */
@media (min-width: 1400px) {
    .form-grid {
        --cols-cap: 12;
    }
}

/* LG: cap to 8 */
@media (max-width: 1399px) {
    .form-grid {
        --cols-cap: 8;
    }
}

/* MD: cap to 6 */
@media (max-width: 1199px) {
    .form-grid {
        --cols-cap: 6;
    }
}

/* SM: cap to 4 */
@media (max-width: 991px) {
    .form-grid {
        --cols-cap: 4;
    }
}

/* XS: single column (you already had this, keeping it explicit) */
@media (max-width: 768px) {
    .form-grid {
        --cols-cap: 1 !important;
    }

    .form-field.label-left {
        grid-template-columns: 1fr;
    }
}



/* put this in a global stylesheet loaded by your app */
.grid-as-text .rz-dropdown,
.grid-as-text .rz-dropdown .rz-inputtext,
.grid-as-text .rz-dropdown .rz-state-disabled {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.grid-as-text .rz-dropdown-trigger {
    display: none !important;
}

.app--entity-form .rz-dropdown, .app--entity-form .rz-numeric, .app--entity-form .rz-textarea, .app--entity-form .rz-calendar {
    padding: 0.5rem !important;
}

.form-widget {
    margin-top: 1rem;
}

.pill {
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .85rem;
}

.form-header-actions .btn, .form-footer-actions .btn {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 3rem;
    min-width: 7rem;
}

.rz-textbox, .rz-input, .rz-dropdown, .rz-html-editor, .rz-calendar,
input, select {
    /*border: 1px solid #ccc !important;*/
}

.app--entity-form.is-view .rz-textbox,
.app--entity-form.is-view .rz-input,
.app--entity-form.is-view .rz-dropdown,
.app--entity-form.is-view .rz-html-editor,
.app--entity-form.is-view .rz-calendar,
.app--entity-form.is-view input,
.app--entity-form.is-view select {
    background: none !important;
    pointer-events: none;
    border: none !important;
    border-radius: 0 !important;
}

.app--entity-form.is-view .rz-textbox,
.app--entity-form.is-view .rz-input,
.app--entity-form.is-view .rz-dropdown,
.app--entity-form.is-view .rz-calendar,
.app--entity-form.is-view input,
.app--entity-form.is-view select {
    border-bottom: 1px solid #ccc !important;
}

.app--entity-form.is-view .rz-dropdown-label,
.app--entity-form.is-view .rz-html-editor-content {
    background: none !important;
}

.app--entity-form.is-view .rz-html-editor-toolbar,
.app--entity-form.is-view .help-text,
.app--entity-form.is-view .rz-dropdown-trigger {
    display: none !important;
}