/**
 * MISACFORM — Enterprise Form Builder Styles
 *
 * Design: Clean corporate SaaS (SAP Fiori / Salesforce Lightning aesthetic).
 * Scoped under .misac-form to avoid framework conflicts.
 * All values driven by CSS custom properties for easy theming.
 * 8px base grid. WCAG AA contrast compliant.
 */

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form {
    /* ── Brand / Accent (inherit from master --m-*) ────────────────── */
    --mf-accent:           var(--m-accent, #2272b5);
    --mf-accent-hover:     var(--m-accent-hover, #1b5f99);
    --mf-accent-light:     var(--m-accent-light, #edf5fb);
    --mf-accent-ring:      var(--m-accent-ring, rgba(34, 114, 181, 0.20));
    --mf-accent2:          var(--m-accent2, #ab217f);
    --mf-accent2-hover:    var(--m-accent2-hover, #921c6d);
    --mf-accent2-light:    var(--m-accent2-light, #fbeff7);
    --mf-accent2-ring:     var(--m-accent2-ring, rgba(171, 33, 127, 0.18));

    /* ── Neutrals (cool slate) ──────────────────────────────────────── */
    --mf-bg:               var(--m-bg, #ffffff);
    --mf-bg-muted:         var(--m-bg-muted, #f8f9fb);
    --mf-bg-subtle:        var(--m-bg-subtle, #f1f3f5);
    --mf-border:           var(--m-border, #dfe3e8);
    --mf-border-light:     var(--m-border-light, #e9ecef);
    --mf-border-focus:     var(--mf-accent);

    /* ── Text ───────────────────────────────────────────────────────── */
    --mf-text:             var(--m-text, #1e293b);
    --mf-text-secondary:   #0545a1;
    --mf-text-muted:       var(--m-text-muted, #94a3b8);
    --mf-text-on-accent:   var(--m-text-on-accent, #ffffff);

    /* ── Semantic ────────────────────────────────────────────────────── */
    --mf-danger:           var(--m-danger, #ef4444);
    --mf-danger-light:     var(--m-danger-light, #fef2f2);
    --mf-danger-ring:      var(--m-danger-ring, rgba(239, 68, 68, 0.15));
    --mf-warning:          var(--m-warning, #f59e0b);
    --mf-warning-light:    var(--m-warning-light, #fffbeb);
    --mf-warning-ring:     rgba(245, 158, 11, 0.15);
    --mf-success:          var(--m-success, #22c55e);
    --mf-success-light:    var(--m-success-light, #f0fdf4);

    /* ── Typography ─────────────────────────────────────────────────── */
    --mf-font:             var(--m-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                            'Helvetica Neue', Arial, sans-serif);
    --mf-font-mono:        'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    --mf-text-xs:          0.7rem;      /* 11.2px */
    --mf-text-sm:          0.8125rem;   /* 13px   */
    --mf-text-base:        0.875rem;    /* 14px   */
    --mf-text-md:          0.9375rem;   /* 15px   */

    /* ── Spacing (8px grid) ─────────────────────────────────────────── */
    --mf-space-1:          4px;
    --mf-space-2:          8px;
    --mf-space-3:          12px;
    --mf-space-4:          16px;
    --mf-space-5:          20px;
    --mf-space-6:          24px;

    /* ── Shape ───────────────────────────────────────────────────────── */
    --mf-radius-sm:     0;   /*4px;*/
    --mf-radius:        0;   /*6px;*/
    --mf-radius-lg:      0;  /*8px;*/
    --mf-shadow-sm:        var(--m-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    --mf-shadow:           0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --mf-shadow-md:        0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);

    /* ── Transition ─────────────────────────────────────────────────── */
    --mf-transition:       150ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════════════════════════════════════
   FORM CONTAINER
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form {
    position: relative;
    font-family: var(--mf-font);
    font-size: var(--mf-text-base);
    color: var(--mf-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION / CARD
   ═══════════════════════════════════════════════════════════════════════ */
.misac-section {
    margin-bottom: var(--mf-space-3);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-bg);
    box-shadow: var(--mf-shadow-sm);
    overflow: hidden;
}
.misac-section__heading {
    padding: var(--mf-space-2) var(--mf-space-4);
    background: var(--mf-bg-muted);
    border-bottom: 1px solid var(--mf-border-light);
}
.misac-section__title {
    margin: 0;
    font-size: var(--mf-text-sm);
    font-weight: 600;
    color: var(--mf-text);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.misac-section__body {
    padding: var(--mf-space-3) var(--mf-space-4);
}
.misac-section--hidden-heading .misac-section__heading {
    display: none;
}
.misac-section--conditional {
    transition: opacity var(--mf-transition);
}


/* ═══════════════════════════════════════════════════════════════════════
   FIELD LAYOUT (8px grid)
   ═══════════════════════════════════════════════════════════════════════ */
.misac-field-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--mf-space-2) * -1);
}
.misac-field {
    padding: 0 var(--mf-space-2);
    margin-bottom: var(--mf-space-2);
}
.misac-field--inline {
    display: inline-flex;
    flex-direction: column;
}
.misac-field--hidden {
    display: none !important;
}
.misac-field--new-row {
    flex-basis: 100%;
}
.misac-field__row {
    align-items: flex-start;
}
.misac-field__label-col {
    padding-top: 6px;
}
.misac-field__label {
    font-weight: 500;
    font-size: var(--mf-text-sm);
    color: var(--mf-text-secondary);
    margin-bottom: 0;
    line-height: 1.4;
    letter-spacing: 0.005em;
}
.misac-field__required {
    color: var(--mf-danger);
    font-weight: 700;
    margin-left: 1px;
    position: absolute;
}
.misac-field__input-col {
    position: relative;
}
.misac-field__description {
    display: block;
    margin-top: 2px;
    font-size: var(--mf-text-xs);
    color: var(--mf-text-muted);
    line-height: 1.35;
}


/* ═══════════════════════════════════════════════════════════════════════
   FORM CONTROLS (inputs, selects, textareas)
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form .form-control {
    font-family: var(--mf-font);
    font-size: var(--mf-text-base);
    color: var(--mf-text);
    background: var(--mf-bg);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    padding: 5px 10px;
    height: auto;
    min-height: 32px;
    line-height: 1.5;
    transition: border-color var(--mf-transition), box-shadow var(--mf-transition);
}
.misac-form .form-control::placeholder {
    color: var(--mf-text-muted);
    font-weight: 400;
}
.misac-form .form-control:focus {
    border-color: var(--mf-border-focus);
    box-shadow: 0 0 0 3px var(--mf-accent-ring);
    outline: none;
}
.misac-form .form-control[readonly] {
    background: var(--mf-bg-subtle);
    color: var(--mf-text-secondary);
    cursor: default;
}
.misac-form .form-control:disabled {
    background: var(--mf-bg-subtle);
    color: var(--mf-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}
.misac-form textarea.form-control {
    min-height: 64px;
    resize: vertical;
}


/* ═══════════════════════════════════════════════════════════════════════
   VALIDATION FEEDBACK
   ═══════════════════════════════════════════════════════════════════════ */
.misac-field__error {
    color: var(--mf-danger);
    font-size: var(--mf-text-xs);
    font-weight: 500;
    margin-top: 2px;
    min-height: 0;
    line-height: 1.3;
    transition: opacity var(--mf-transition);
}
.misac-field__error:empty {
    display: none;
}

/* Error state — inline border (scoped to .misac-form to avoid leaking) */
.misac-form input[style*="border-color: red"],
.misac-form select[style*="border-color: red"],
.misac-form textarea[style*="border-color: red"] {
    border-color: var(--mf-danger) !important;
    box-shadow: 0 0 0 3px var(--mf-danger-ring) !important;
}

/* Warning state */
.misac-field--warning input,
.misac-field--warning select,
.misac-field--warning textarea {
    border-color: var(--mf-warning) !important;
    box-shadow: 0 0 0 3px var(--mf-warning-ring) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS — Hierarchy: Primary → Secondary → Outline → Danger
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form .btn {
    font-family: var(--mf-font);
    font-size: var(--mf-text-sm);
    font-weight: 500;
    border-radius: var(--mf-radius-sm);
    padding: 5px 14px;
    line-height: 1.5;
    transition: all var(--mf-transition);
    cursor: pointer;
    white-space: nowrap;
}
.misac-form .btn:active {
    transform: translateY(0.5px);
}

/* Primary */
.misac-form .btn-primary,
.misac-form .btn-outline-primary {
    --bs-btn-color: var(--mf-text-on-accent);
    --bs-btn-bg: var(--mf-accent);
    --bs-btn-border-color: var(--mf-accent);
    --bs-btn-hover-bg: var(--mf-accent-hover);
    --bs-btn-hover-border-color: var(--mf-accent-hover);
}
.misac-form .btn-outline-primary {
    --bs-btn-color: var(--mf-accent);
    --bs-btn-bg: transparent;
}
.misac-form .btn-outline-primary:hover {
    color: var(--mf-text-on-accent);
    background: var(--mf-accent);
}

/* Danger */
.misac-form .btn-danger,
.misac-form .btn-outline-danger {
    --bs-btn-bg: var(--mf-danger);
    --bs-btn-border-color: var(--mf-danger);
}
.misac-form .btn-outline-danger {
    --bs-btn-color: var(--mf-danger);
    --bs-btn-bg: transparent;
}
.misac-form .btn-outline-danger:hover {
    color: #fff;
    background: var(--mf-danger);
}

/* Secondary */
.misac-form .btn-outline-secondary {
    --bs-btn-color: var(--mf-text-secondary);
    --bs-btn-border-color: var(--mf-border);
    --bs-btn-bg: transparent;
}
.misac-form .btn-outline-secondary:hover {
    background: var(--mf-bg-subtle);
    color: var(--mf-text);
}

/* Small button tighter */
.misac-form .btn-sm {
    font-size: var(--mf-text-xs);
    padding: 3px 10px;
    min-height: 26px;
}


/* ═══════════════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════════════ */
.misac-tabs {
    margin-bottom: var(--mf-space-3);
}
.misac-tabs__nav {
    border-bottom: 1px solid var(--mf-border);
    display: flex;
    gap: 0;
}
.misac-tabs__nav .nav-link {
    cursor: pointer;
    padding: 6px var(--mf-space-4);
    font-size: var(--mf-text-sm);
    font-weight: 500;
    color: var(--mf-text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    transition: color var(--mf-transition), border-color var(--mf-transition);
}
.misac-tabs__nav .nav-link:hover {
    color: var(--mf-text);
    border-bottom-color: var(--mf-border);
}
.misac-tabs__nav .nav-link.active {
    color: var(--mf-accent);
    border-bottom-color: var(--mf-accent);
    font-weight: 600;
}
.misac-tabs__panel {
    display: none;
    padding-top: var(--mf-space-3);
}
.misac-tabs__panel.active {
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════════
   STEPS / WIZARD
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Step indicator bar ─────────────────────────────────────────────── */
.misac-steps__indicator {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    margin-bottom: var(--mf-space-4);
    padding: 0 4px;
}
/* Connector line drawn behind the circles */
.misac-steps__indicator::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--mf-border);
    z-index: 0;
}
.misac-steps__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    position: relative;
    z-index: 1;
    cursor: default;
}
.misac-steps__step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--mf-border);
    background: #fff;
    color: var(--mf-text-muted);
    font-size: var(--mf-text-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.misac-steps__step-label {
    font-size: 11px;
    color: var(--mf-text-muted);
    text-align: center;
    max-width: 90px;
    line-height: 1.3;
    transition: color 0.2s, font-weight 0.2s;
}
/* Active step */
.misac-steps__step.is-active .misac-steps__step-number {
    border-color: var(--mf-accent);
    background: var(--mf-accent);
    color: #fff;
}
.misac-steps__step.is-active .misac-steps__step-label {
    color: var(--mf-accent);
    font-weight: 600;
}
/* Completed step */
.misac-steps__step.is-completed .misac-steps__step-number {
    border-color: var(--mf-accent);
    background: var(--mf-accent);
    color: #fff;
    font-size: 0; /* hide the number, show checkmark via pseudo */
}
.misac-steps__step.is-completed .misac-steps__step-number::after {
    content: '✓';
    font-size: var(--mf-text-sm);
}
.misac-steps__step.is-completed .misac-steps__step-label {
    color: var(--mf-accent);
}

/* ── Step panels ────────────────────────────────────────────────────── */
.misac-steps__panels {
    min-height: 0;
}
.misac-steps__panel {
    display: none;
}
.misac-steps__panel.is-active {
    display: block;
}

/* ── Navigation bar ─────────────────────────────────────────────────── */
.misac-steps__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mf-space-3);
    margin-top: var(--mf-space-4);
    padding-top: var(--mf-space-3);
    border-top: 1px solid var(--mf-border);
}
.misac-steps__nav-info {
    font-size: var(--mf-text-sm);
    color: var(--mf-text-muted);
    white-space: nowrap;
    flex: 1;
    text-align: center;
}
.misac-steps__nav-right {
    display: flex;
    align-items: center;
    gap: var(--mf-space-2);
}
.misac-steps__nav-back,
.misac-steps__nav-next {
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════════════ */

.misac-accordion {
    margin-bottom: var(--mf-space-3);
}
.misac-accordion__item {
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    margin-bottom: var(--mf-space-2);
    overflow: hidden;
}
.misac-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px var(--mf-space-4);
    background: var(--mf-bg-muted);
    border: none;
    text-align: left;
    font-size: var(--mf-text-sm);
    font-weight: 600;
    color: var(--mf-text);
    cursor: pointer;
    transition: background 0.15s;
}
.misac-accordion__toggle:hover {
    background: #e9ecef;
}
/* Chevron via pseudo-element */
.misac-accordion__toggle::after {
    content: '›';
    font-size: 18px;
    line-height: 1;
    color: var(--mf-text-muted);
    transform: rotate(90deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.misac-accordion__toggle.is-open::after {
    transform: rotate(-90deg);
}
.misac-accordion__toggle.is-open {
    background: #fff;
    border-bottom: 1px solid var(--mf-border);
}
.misac-accordion__panel {
    display: none;
    padding: var(--mf-space-3) var(--mf-space-4);
}
.misac-accordion__panel.is-open {
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════════
   GRID / MULTI-DATA TABLE
   ═══════════════════════════════════════════════════════════════════════ */
.misac-grid {
    position: relative;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    overflow-x: auto;
    overflow-y: hidden;
}
.misac-grid__table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--mf-text-sm);
}

/* ── Sticky header ───────────────────────────────────────────────────── */
.misac-grid__table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mf-bg-muted);
    font-weight: 600;
    font-size: var(--mf-text-xs);
    padding: var(--mf-space-1) var(--mf-space-2);
    white-space: nowrap;
    border: none;
    border-bottom: 2px solid var(--mf-border);
    color: var(--mf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Body rows + zebra ───────────────────────────────────────────────── */
.misac-grid__table tbody td {
    padding: 2px var(--mf-space-1);
    border: none;
    border-bottom: 1px solid var(--mf-border-light);
    vertical-align: middle;
    overflow: hidden;
}
.misac-grid__cell:has(.data_subset_button) {
    overflow: visible;
}
.misac-grid__table tbody tr:nth-child(even) {
    background: var(--mf-bg-muted);
}
.misac-grid__table tbody tr:hover {
    background: var(--mf-accent-light);
}

/* ── Grid inputs (compact) ───────────────────────────────────────────── */
.misac-grid__table input.form-control,
.misac-grid__table select.form-control,
.misac-grid__table textarea.form-control {
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    padding: 3px 6px;
    font-size: var(--mf-text-sm);
    height: auto;
    min-height: 28px;
    background: var(--mf-bg);
    transition: border-color var(--mf-transition), box-shadow var(--mf-transition);
}
.misac-grid__table input.form-control:focus,
.misac-grid__table select.form-control:focus {
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 2px var(--mf-accent-ring);
}

/* ── Row focus highlight ─────────────────────────────────────────────── */
.misac-grid__row.row-focus {
    background: var(--mf-accent-light) !important;
}

/* ── Action column ───────────────────────────────────────────────────── */
.misac-grid__action-col {
    text-align: center;
    width: 64px;
    min-width: 64px;
}
.misac-grid__copy-btn,
.misac-grid__paste-btn,
.misac-grid__compute-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: var(--mf-text-xs);
    line-height: 1;
    border-radius: var(--mf-radius-sm);
    opacity: 0.6;
    transition: opacity var(--mf-transition), background var(--mf-transition);
}
.misac-grid__copy-btn:hover,
.misac-grid__paste-btn:hover,
.misac-grid__compute-btn:hover {
    opacity: 1;
}

/* Compute icon stays at full opacity to read as a primary action distinct
   from the copy/paste utility buttons. */
.misac-grid__compute-btn {
    opacity: 0.85;
}
.misac-grid__compute-btn.disabled,
.misac-grid__compute-btn[disabled] {
    pointer-events: none;
    opacity: 0.4;
}

/* compute_trigger='always' synth grids: cells render greyed; user edits would
   be lost on submit. The compute icon stays functional so user can preview. */
.misac-grid--synth-readonly .misac-grid__cell input,
.misac-grid--synth-readonly .misac-grid__cell select,
.misac-grid--synth-readonly .misac-grid__cell textarea {
    background: var(--mf-bg-disabled, #f4f4f5);
    color: var(--mf-text-secondary, #6b7280);
    pointer-events: none;
}
.misac-grid--synth-readonly .misac-grid__row {
    background: var(--mf-bg-disabled, #fafafa);
}

/* Computed grid (any trigger): subtle border tint so users see it's special. */
.misac-grid--computed .misac-grid__table {
    border-left: 3px solid var(--mf-accent, #6366f1);
}
.misac-grid__action-cell {
    text-align: center;
    white-space: nowrap;
    padding: 2px 4px !important;
    overflow: visible;
}
.misac-grid__delete-btn,
.misac-grid__duplicate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: var(--mf-text-xs);
    line-height: 1;
    border-radius: var(--mf-radius-sm);
    opacity: 0.5;
    transition: opacity var(--mf-transition), background var(--mf-transition);
}
.misac-grid__table tbody tr:hover .misac-grid__delete-btn,
.misac-grid__table tbody tr:hover .misac-grid__duplicate-btn {
    opacity: 1;
}

/* ── Add row button ──────────────────────────────────────────────────── */
.misac-grid__add-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mf-space-1);
    text-decoration: none;
    font-size: var(--mf-text-sm);
    font-weight: 500;
    padding: var(--mf-space-1) var(--mf-space-2);
    margin: var(--mf-space-1);
    color: var(--mf-accent);
    border-radius: var(--mf-radius-sm);
    transition: background var(--mf-transition);
}
.misac-grid__add-btn:hover {
    background: var(--mf-accent-light);
    text-decoration: none;
}

/* ── Column totals ───────────────────────────────────────────────────── */
.misac-grid__tfoot {
    font-weight: 700;
    background: var(--mf-bg-muted);
}
.misac-grid__total-row td {
    padding: var(--mf-space-1) var(--mf-space-2);
    border: none;
    border-top: 2px solid var(--mf-border);
}
.misac-grid__total-cell--active {
    color: var(--mf-accent);
    text-align: right;
    font-family: var(--mf-font-mono);
    font-size: var(--mf-text-sm);
}

/* ── Grid summaries (live computed totals below grid) ────────────────── */
.misac-grid__summaries {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--mf-space-1);
    margin: var(--mf-space-2) 0 var(--mf-space-3);
    padding: var(--mf-space-2) var(--mf-space-3);
    background: var(--mf-bg-muted);
    border-top: 1px solid var(--mf-border);
}
.misac-grid__summary-row {
    display: flex;
    align-items: center;
    gap: var(--mf-space-3);
    min-width: 280px;
    justify-content: space-between;
}
.misac-grid__summary-label {
    color: var(--mf-text-muted);
    font-size: var(--mf-text-sm);
}
.misac-grid__summary-value {
    font-family: var(--mf-font-mono);
    font-size: var(--mf-text-sm);
    color: var(--mf-text);
    text-align: right;
    min-width: 120px;
}
.misac-grid__summary-row--emphasis {
    margin-top: var(--mf-space-1);
    padding-top: var(--mf-space-2);
    border-top: 2px solid var(--mf-border);
}
.misac-grid__summary-row--emphasis .misac-grid__summary-label,
.misac-grid__summary-row--emphasis .misac-grid__summary-value {
    font-weight: 700;
    font-size: var(--mf-text-base);
    color: var(--mf-accent);
}

/* ── Grid variants ───────────────────────────────────────────────────── */
.misac-grid--single-entry .misac-grid__add-btn,
.misac-grid--single-entry .misac-grid__delete-btn,
.misac-grid--single-entry .misac-grid__duplicate-btn {
    display: none;
}
.misac-grid--no-insert .misac-grid__add-btn {
    display: none;
}
.misac-grid--no-delete .misac-grid__delete-btn {
    display: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   SUBMIT / ACTION BAR
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form__actions {
    padding: var(--mf-space-2) var(--mf-space-4);
    border-top: 1px solid var(--mf-border);
    background: var(--mf-bg-muted);
    display: flex;
    gap: var(--mf-space-2);
    align-items: center;
    border-radius: 0 0 var(--mf-radius-lg) var(--mf-radius-lg);
}


/* ═══════════════════════════════════════════════════════════════════════
   CHECKBOX
   ═══════════════════════════════════════════════════════════════════════ */
.misac-checkbox {
    padding-top: 4px;
}
.misac-form .form-check-input {
    border-color: var(--mf-border);
    transition: background-color var(--mf-transition), border-color var(--mf-transition),
                box-shadow var(--mf-transition);
}
.misac-form .form-check-input:checked {
    background-color: var(--mf-accent);
    border-color: var(--mf-accent);
}
.misac-form .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--mf-accent-ring);
    border-color: var(--mf-accent);
}


/* ═══════════════════════════════════════════════════════════════════════
   DATA FIELD (display-only)
   ═══════════════════════════════════════════════════════════════════════ */
.misac-data-field__display {
    padding: 5px 0;
    font-size: var(--mf-text-base);
    font-weight: 500;
    color: var(--mf-text);
}


/* ═══════════════════════════════════════════════════════════════════════
   FILE FIELD
   ═══════════════════════════════════════════════════════════════════════ */
.misac-file-field {
    position: relative;
}
.misac-file-preview:not(:empty) {
    margin-bottom: var(--mf-space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mf-space-2);
    align-items: flex-start;
}
.misac-file-preview__item {
    display: inline-block;
}
.misac-file-thumb {
    max-height: 120px;
    border-radius: var(--mf-radius);
    object-fit: cover;
    border: 1px solid var(--mf-border-light);
}
.misac-file-link-text {
    display: inline-flex;
    align-items: center;
    gap: var(--mf-space-1);
    font-size: var(--mf-text-sm);
    color: var(--mf-accent);
    text-decoration: none;
    word-break: break-all;
}
.misac-file-link-text:hover {
    text-decoration: underline;
}
.misac-file-buttons {
    margin-top: var(--mf-space-1);
    display: flex;
    gap: var(--mf-space-1);
    flex-wrap: wrap;
    align-items: center;
}
.misac-file-field .btn,
.misac-file-field .file-selector-btn {
    font-size: var(--mf-text-xs);
    font-weight: 500;
}
.misac-file-field .file-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mf-space-1);
    padding: 3px 10px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    color: var(--mf-text-secondary);
    background: var(--mf-bg);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--mf-text-xs);
    font-weight: 500;
    transition: all var(--mf-transition);
}
.misac-file-field .file-selector-btn:hover {
    background: var(--mf-bg-subtle);
    border-color: var(--mf-accent);
    color: var(--mf-accent);
    text-decoration: none;
}
.misac-file-field .file-selector-selected-files {
    display: none;
}

/* ── Compact (grid-row) file field ───────────────────────────────────── */
.misac-file-buttons--compact {
    margin-top: 0;
    gap: 3px;
    flex-wrap: nowrap;
}
.misac-file-buttons--compact .btn,
.misac-file-buttons--compact .file-selector-btn {
    padding: 7px 10px;
    line-height: 1;
}
.misac-file-buttons--compact .fa-lg {
    font-size: 1.4em;
}


/* ── FILES field (multi-file JSON) ────────────────────────────────────── */
.misac-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mf-space-1);
    margin-bottom: var(--mf-space-2);
}
.misac-files-list:empty {
    margin-bottom: 0;
}
.misac-files-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: var(--mf-bg-subtle, #f8f9fa);
    border: 1px solid var(--mf-border, #dee2e6);
    border-radius: var(--mf-radius-sm, 4px);
    font-size: var(--mf-text-xs, 0.75rem);
    max-width: 260px;
}
.misac-files-item__thumb {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mf-muted, #6c757d);
}
.misac-files-item__img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
}
.misac-files-item__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.misac-files-item__size {
    color: var(--mf-muted, #6c757d);
    white-space: nowrap;
}
.misac-files-item__remove {
    flex-shrink: 0;
    color: var(--mf-danger, #dc3545);
    opacity: 0.5;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--mf-transition, 0.15s);
}
.misac-files-item__remove:hover {
    opacity: 1;
}

/* ── FILES field: clickable chips ─────────────────────────────────────── */
.misac-files-item {
    cursor: pointer;
    transition: border-color var(--mf-transition, 0.15s), background var(--mf-transition, 0.15s);
}
.misac-files-item:hover {
    border-color: var(--mf-primary, #0d6efd);
    background: var(--mf-bg-subtle-hover, #e9ecef);
}
.misac-files-item--active {
    border-color: var(--mf-primary, #0d6efd);
    background: rgba(13, 110, 253, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   TILE SELECT
   ═══════════════════════════════════════════════════════════════════════ */
.misac-tile-select__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mf-space-2);
}
.misac-tile-select__tile {
    padding: var(--mf-space-2) var(--mf-space-4);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    cursor: pointer;
    text-align: center;
    min-width: 72px;
    font-size: var(--mf-text-sm);
    color: var(--mf-text-secondary);
    background: var(--mf-bg);
    transition: all var(--mf-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mf-space-1);
}
.misac-tile-select__tile:hover {
    border-color: var(--mf-accent);
    background: var(--mf-accent-light);
    color: var(--mf-accent);
}
.misac-tile-select__tile.active {
    border-color: var(--mf-accent);
    background: var(--mf-accent-light);
    color: var(--mf-accent);
    font-weight: 600;
    box-shadow: 0 0 0 3px var(--mf-accent-ring);
}
.misac-tile-select__tile i {
    font-size: 1.1rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   MAP PICKER
   ═══════════════════════════════════════════════════════════════════════ */
.misac-mappicker__map {
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius);
}


/* ═══════════════════════════════════════════════════════════════════════
   KEYBOARD / FOCUS
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form *:focus-visible {
    outline: 2px solid var(--mf-accent);
    outline-offset: 2px;
}
.misac-form select:focus,
.misac-form input:focus,
.misac-form textarea:focus {
    outline: none; /* handled by border-color + box-shadow */
}


/* ═══════════════════════════════════════════════════════════════════════
   SELECT2 INTEGRATION (scoped — won't leak outside .misac-form)
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form .select2-container--default .select2-selection--single {
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    min-height: 32px;
    transition: border-color var(--mf-transition), box-shadow var(--mf-transition);
}
.misac-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--mf-text);
    font-size: var(--mf-text-base);
    padding-left: 10px;
    line-height: 30px;
}
.misac-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--mf-text-muted);
}
.misac-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
}
.misac-form .select2-container--default.select2-container--focus .select2-selection,
.misac-form .select2-container--default.select2-container--open .select2-selection {
    border-color: var(--mf-accent) !important;
    box-shadow: 0 0 0 3px var(--mf-accent-ring);
}

/* Multi-select */
.misac-form .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-sm);
    min-height: 32px;
    padding: 2px 4px;
}
.misac-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--mf-accent-light);
    border: 1px solid var(--mf-accent);
    border-radius: 3px;
    color: var(--mf-accent);
    font-size: var(--mf-text-xs);
    padding: 1px 6px;
}

/* Grid-scoped Select2 */
.misac-grid__cell .select2-container {
    width: 100% !important;
}
.misac-grid__cell .select2-container .select2-selection {
    min-height: 28px;
    font-size: var(--mf-text-sm);
}
.misac-grid__cell .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
    font-size: var(--mf-text-sm);
}

/* Grid Select2 open highlight */
.bb-select2-open {
    background: var(--mf-accent-light);
}


/* ═══════════════════════════════════════════════════════════════════════
   ORDER FIELD / DRAG HANDLE
   ═══════════════════════════════════════════════════════════════════════ */
.misac-order-field .drag-handler {
    padding: var(--mf-space-1) var(--mf-space-2);
    color: var(--mf-text-muted);
    font-size: 0.9rem;
    cursor: grab;
    transition: color var(--mf-transition);
}
.misac-order-field .drag-handler:hover {
    color: var(--mf-text-secondary);
}
.misac-order-field .drag-handler:active {
    cursor: grabbing;
    color: var(--mf-accent);
}


/* ═══════════════════════════════════════════════════════════════════════
   TEXT SUGGESTION FIELD
   ═══════════════════════════════════════════════════════════════════════ */
.misac-text-suggestion {
    display: flex;
    gap: var(--mf-space-1);
    align-items: flex-start;
}
.misac-text-suggestion > input {
    flex: 1;
}
.misac-text-suggestion > .suggestion-selection-container {
    flex: 0 0 140px;
}


/* ═══════════════════════════════════════════════════════════════════════
   CUSTOM SELECT / DATA SUBSET
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form .data_subset_button {
    font-size: var(--mf-text-xs);
    font-weight: 500;
    white-space: nowrap;
}
.misac-form .data_subset_button .fa-plus-circle {
    margin-right: 2px;
}
.misac-form .misac-subset-badge {
    font-size: 10px;
    min-width: 16px;
    padding: 1px 4px;
    border-radius: 8px;
    vertical-align: middle;
}

/* ─── Grid Cell Range Selection (drag-select) ─── */
.misac-grid__cell--selected {
    background-color: rgba(34, 114, 181, 0.18) !important;
    outline: 1px solid rgba(34, 114, 181, 0.45);
    outline-offset: -1px;
}
.misac-grid--selecting {
    user-select: none;
    -webkit-user-select: none;
}

/* ─── Grid Scroll Wrapper (enables per-column resize without squeezing neighbours) ─── */
.misac-grid__scroll {
    overflow-x: auto;
    width: 100%;
}

/* ─── Grid Column Resize Handles ─── */
.misac-grid__col-resize {
    position: absolute;
    right: -3px;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 10;
    user-select: none;
    background: rgba(99,99,99,.3);
}
.misac-grid__col-resize:hover,
.misac-grid__col-resize--active {
    background: var(--mf-accent, #0d6efd);
    opacity: .4;
}

/* Datepicker/select2 z-index is managed dynamically by misac.panel.js
   (_updateDropdownZ keeps them always above the topmost panel) */
.misac-form .data_custom_select_button {
    font-size: var(--mf-text-sm);
    border: 1px solid var(--mf-border);
    background: var(--mf-bg);
    color: var(--mf-text);
    transition: all var(--mf-transition);
}
.misac-form .data_custom_select_button:hover {
    border-color: var(--mf-accent);
    color: var(--mf-accent);
}


/* ═══════════════════════════════════════════════════════════════════════
   COLOR INPUT
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form .form-control-color {
    width: 48px;
    min-height: 32px;
    padding: 3px;
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════
   LOADING / SPINNER STATE
   ═══════════════════════════════════════════════════════════════════════ */
.misac-form .misac-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mf-space-6);
    color: var(--mf-text-muted);
    font-size: var(--mf-text-sm);
}


/* ═══════════════════════════════════════════════════════════════════════
   AMOUNT FIELD (amount / amount_np)
   ═══════════════════════════════════════════════════════════════════════ */
.misac-amount-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.misac-amount-field .misac-amount-display {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.misac-amount-words {
    font-size: var(--mf-text-xs, 0.75rem);
    color: var(--mf-text-muted, #6c757d);
    font-style: italic;
    min-height: 1.2em;
    padding: 1px 2px;
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .misac-form {
        --mf-space-4: 12px;
        --mf-space-6: 16px;
    }
    .misac-field-row {
        flex-direction: column;
    }
    .misac-field--inline {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .misac-field__label-col,
    .misac-field__input-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .misac-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .misac-grid__table {
        min-width: 540px;
    }
    .misac-section__body {
        padding: var(--mf-space-2) var(--mf-space-3);
    }
}

/* Compact mode — for popups / modals / embedded contexts */
@media (max-height: 600px), (max-width: 480px) {
    .misac-form {
        --mf-space-2: 6px;
        --mf-space-3: 8px;
        --mf-space-4: 12px;
    }
    .misac-section {
        margin-bottom: var(--mf-space-2);
    }
    .misac-field {
        margin-bottom: 6px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

/* Layout wrapper — align-items:flex-start is REQUIRED for sticky sidebar */
.misac-form-layout--with-sidebar {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

/* Form pane — scrollable, takes remaining width */
.misac-form-pane {
    flex: 1 1 auto;
    min-width: 200px;
}

/* ── Resize handle ───────────────────────────────────────────────── */
.misac-resize-handle {
    flex: 0 0 6px;
    /* stretches via align-self to match whichever side is taller */
    align-self: stretch;
    background: #e9ecef;
    cursor: col-resize;
    position: relative;
    transition: background 0.15s;
    z-index: 2;
}
.misac-resize-handle:hover,
.misac-resize-handle:active {
    background: #0d6efd;
}
.misac-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 40px;
    background: rgba(0, 0, 0, .15);
    border-radius: 1px;
}

/* ── Sidebar panel — sticky, viewport-height ─────────────────────── */
.misac-sidebar {
    flex: 0 0 380px;
    min-width: 36px;
    max-width: 70%;
    /* Sticky: stays in view as user scrolls the form */
    position: sticky;
    top: 0;
    height: 80vh;
    max-height: 100vh;
    display: flex;
    flex-direction: row;
    background: #f8f9fa;
    border-left: 1px solid #dee2e6;
    overflow: hidden;
    z-index: 1;
}

/* Collapsed state */
.misac-sidebar--collapsed {
    flex-basis: 36px !important;
}
.misac-sidebar--collapsed .misac-sidebar__content {
    opacity: 0;
    pointer-events: none;
}

/* ── Toggle button (left 28px strip) ────────────────────────────── */
.misac-sidebar__toggle {
    flex: 0 0 28px;
    width: 28px;
    display: flex;
    align-items: flex-start;
    padding-top: 14px;
    justify-content: center;
    background: #e9ecef;
    border: none;
    border-right: 1px solid #dee2e6;
    cursor: pointer;
    color: #6c757d;
    font-size: 11px;
    outline: none;
    transition: background 0.15s, color 0.15s;
}
.misac-sidebar__toggle:hover {
    background: #dee2e6;
    color: #0d6efd;
}

/* ── Sidebar content — flex column, fills full height ───────────── */
.misac-sidebar__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 10px 10px 6px;
    transition: opacity 0.15s;
    min-width: 0;
}

.misac-sidebar__title {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Preview slot — grows to fill remaining height ───────────────── */
.misac-sidebar__preview {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.misac-sidebar__preview-label {
    flex: 0 0 auto;
    font-size: 10px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

/* Preview item fills the slot */
.misac-sidebar__preview-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Image embed ─────────────────────────────────────────────────── */
.misac-sidebar__embed-img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    display: block;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    background: #fff;
    cursor: zoom-in;
    transition: box-shadow 0.15s;
}
.misac-sidebar__embed-img:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

/* ── Document embed (PDF etc.) ───────────────────────────────────── */
.misac-sidebar__embed-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-size: 11px;
    color: #495057;
}
.misac-sidebar__embed-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.misac-sidebar__embed-open {
    flex: 0 0 auto;
    color: #6c757d;
    text-decoration: none;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.12s, background 0.12s;
}
.misac-sidebar__embed-open:hover {
    color: #0d6efd;
    background: #dee2e6;
}

/* iframe fills all remaining space */
.misac-sidebar__embed-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 200px;
    border: 1px solid #dee2e6;
    border-radius: 0 0 4px 4px;
    background: #fff;
    display: block;
}

.misac-sidebar__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #adb5bd;
    text-align: center;
    line-height: 1.8;
}

/* ── Responsive: sidebar below form on narrow screens ───────────── */
@media (max-width: 768px) {
    .misac-form-layout--with-sidebar {
        flex-direction: column;
    }
    .misac-form-pane {
        min-width: 0;
        width: 100%;
    }
    .misac-resize-handle {
        flex: 0 0 6px;
        width: 100%;
        cursor: row-resize;
        align-self: auto;
    }
    .misac-resize-handle::after {
        width: 40px;
        height: 2px;
    }
    .misac-sidebar {
        position: static; /* no sticky on mobile — sidebar is below form */
        flex: 0 0 auto !important;
        height: 60vh;
        max-height: 60vh;
        max-width: 100%;
        min-width: 0;
        border-left: none;
        border-top: 1px solid #dee2e6;
        width: 100%;
    }
    .misac-sidebar--collapsed {
        flex-basis: 36px !important;
        height: 36px;
    }
    .misac-sidebar__toggle {
        width: auto;
        padding: 0 12px;
        height: 36px;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
    .misac-sidebar__embed-frame {
        min-height: 160px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
    .misac-form {
        --mf-shadow-sm: none;
        --mf-shadow: none;
        --mf-shadow-md: none;
    }
    .misac-section {
        border: 1px solid #ccc;
        box-shadow: none;
        page-break-inside: avoid;
    }
    .misac-form__actions,
    .misac-file-buttons,
    .misac-grid__add-btn,
    .misac-grid__delete-btn,
    .misac-grid__duplicate-btn {
        display: none !important;
    }
}

/* ── CUSTOM_SELECT field ────────────────────────────────────────────────── */

.misac-custom-select {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

/* Input group wrapping the display input + clear button */
.misac-cs-wrap {
    position: relative;
}

/* Readonly display input — shows selected label */
.misac-cs-display {
    cursor:           pointer;
    background-color: var(--mf-bg, #fff) !important;
    /* prevent browser from showing "not editable" styling */
    color:            var(--mf-text, #212529);
}

.misac-cs-display:focus {
    border-color: var(--mf-border-focus, #2272b5);
    box-shadow:   0 0 0 3px var(--mf-accent-ring, rgba(34, 114, 181, 0.20));
    outline:      none;
}

/* Hint to user that the field is interactive */
.misac-cs-display:not([disabled]):hover {
    border-color: var(--mf-accent, #2272b5);
}

/* Clear button — compact, neutral */
.misac-cs-clear {
    border-color:     var(--mf-border, #dfe3e8);
    color:            var(--mf-text-muted, #6c757d);
    background-color: var(--mf-bg-subtle, #f1f3f5);
    padding:          0 10px;
    font-size:        1rem;
    line-height:      1;
    transition:       color 0.15s, background-color 0.15s;
}

.misac-cs-clear:hover {
    color:            var(--mf-danger, #dc3545);
    background-color: var(--mf-bg-muted, #f8f9fb);
    border-color:     var(--mf-danger, #dc3545);
}

/* Disabled / readonly state */
.misac-custom-select .misac-cs-display[disabled],
.misac-custom-select .misac-cs-display[readonly][disabled] {
    cursor:           default;
    background-color: var(--mf-bg-subtle, #f1f3f5) !important;
    color:            var(--mf-text-muted, #6c757d);
}

/* ── Toast notifications ──────────────────────────────────────────── */
.misac-toast-tray {
    position:   absolute;
    top:        8px;
    right:      12px;
    z-index:    10100;
    display:    flex;
    flex-direction: column;
    gap:        6px;
    pointer-events: none;
    max-width:  400px;
}
.misac-toast-tray--fixed {
    position:   fixed;
    top:        16px;
    right:      20px;
}
.misac-toast {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        10px 14px;
    border-radius:  6px;
    font-size:      0.84rem;
    line-height:    1.4;
    box-shadow:     0 4px 14px rgba(0,0,0,.15);
    pointer-events: auto;
    opacity:        0;
    transform:      translateX(30px);
    transition:     opacity .25s ease, transform .25s ease;
}
.misac-toast--show {
    opacity:   1;
    transform: translateX(0);
}
.misac-toast--hide {
    opacity:   0;
    transform: translateX(30px);
}
.misac-toast--success {
    background: #ecfdf5;
    color:      #065f46;
    border:     1px solid #a7f3d0;
}
.misac-toast--error {
    background: #fef2f2;
    color:      #991b1b;
    border:     1px solid #fecaca;
}
.misac-toast .fa {
    font-size: 1.05rem;
    flex-shrink: 0;
}
.misac-toast--success .fa { color: #059669; }
.misac-toast--error   .fa { color: #dc2626; }
.misac-toast__close {
    margin-left: auto;
    cursor:      pointer;
    font-size:   1.1rem;
    line-height: 1;
    opacity:     .5;
    padding:     0 2px;
}
.misac-toast__close:hover { opacity: 1; }

/* ── Grid drag-to-reorder ───────────────────────────────────── */
.misac-grid__drag-col {
    width: 28px;
    padding: 0 !important;
}

.misac-grid__drag-handle-cell {
    width: 28px;
    padding: 0 !important;
    text-align: center;
    vertical-align: middle;
    cursor: grab;
}

.misac-grid__drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
    min-height: 28px;
    color: var(--m-text-muted, #9ca3af);
    cursor: grab;
    font-size: 12px;
    opacity: 0;
    transition: opacity .15s;
}

.misac-grid__row:hover .misac-grid__drag-handle { opacity: 1; }
.misac-grid__drag-handle:active { cursor: grabbing; }

.misac-grid__row--dragging {
    opacity: 0.45;
    background: var(--m-bg-muted, #f3f4f6) !important;
}

.misac-grid__row--drag-over {
    outline: 2px solid #2272b5;
    outline-offset: -1px;
}

[data-theme="dark"] .misac-grid__drag-handle { color: #475569; }
[data-theme="dark"] .misac-grid__row--dragging { background: #1a2638 !important; }