/* Font URLs stay relative to this stylesheet so StaticWebAssetBasePath is written in one place only. */
@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('fonts/NotoNaskhArabic-Variable.ttf') format('truetype-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Government rule: Arabic-script text (Kurdish, Arabic) is set in Noto Kufi Arabic. Arabic letters only, so Latin text keeps the stack's own font. */
@font-face {
    font-family: 'Noto Kufi Arabic';
    src: url('fonts/NotoKufiArabic-Variable.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

/* Fluent reads --fontFamilyBase; Noto Kufi Arabic takes Kurdish and Arabic letters, Noto Naskh Arabic stays as a fallback. */
body {
    --fontFamilyBase: "Noto Kufi Arabic", "Segoe UI Variable Text", "Segoe UI", 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif;
}

/* fluent-dropdown rings itself in black on any focus (a :focus-within rule in its shadow DOM); keep the border and brand underline like the text inputs. */
fluent-dropdown {
    --colorStrokeFocus1: var(--colorNeutralStroke1);
    --colorStrokeFocus2: transparent;
}

/* A grid fetching its next page keeps the old rows, dimmed and inert, until the new ones arrive. */
.fluent-data-grid[aria-busy="true"] > tbody {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--durationFaster) linear;
}

:focus:not(:focus-visible) {
    outline: none;
}

.smx-dialog-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.smx-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    max-height: calc(100vh - 7rem);
    -webkit-overflow-scrolling: touch;
}

.smx-dialog-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--colorNeutralStroke2);
    background: var(--colorNeutralBackground1);
}

.smx-dialog-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

@media (max-width: 640px) {
    .smx-dialog-body {
        padding: 16px;
    }

    .smx-dialog-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    .smx-dialog-footer-actions {
        width: 100%;
        margin-inline-start: 0;
    }

    .smx-dialog-footer-actions > * {
        flex: 1 1 0;
    }
}

/* Search panel condition editor (SearchConditionEditor) */
.softmax-filter-row {
    display: flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
    background: var(--colorNeutralBackground2, #ffffff);
    border: 1px solid var(--colorNeutralStroke2, rgba(0, 0, 0, 0.08));
    margin-bottom: 6px;
}

.softmax-filter-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 3px 1fr 0.85fr 1.15fr;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    transition: background-color 167ms cubic-bezier(0, 0, 0, 1);
}

.softmax-filter-row:hover .softmax-filter-row-main {
    background: color-mix(in srgb, var(--colorBrandBackground, #6366f1) 5%, var(--colorNeutralBackground2, #ffffff));
}

.softmax-filter-row-bar {
    align-self: stretch;
    width: 3px;
    border-radius: 4px;
    background: var(--colorBrandBackground, #6366f1);
}

.softmax-filter-nested .softmax-filter-row-bar {
    background: #0d9488;
}

.softmax-filter-row-rail {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-inline-start: 1px solid var(--colorNeutralStroke2, rgba(0, 0, 0, 0.08));
    color: var(--colorNeutralForeground3, #9ca3af);
    cursor: pointer;
    transition: background-color 167ms cubic-bezier(0, 0, 0, 1), color 167ms cubic-bezier(0, 0, 0, 1);
}

.softmax-filter-row-rail:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.softmax-filter-nested {
    display: flex;
    align-items: stretch;
    margin: 2px 0 8px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2, rgba(0, 0, 0, 0.08));
    border-inline-start: 2px solid #0d9488;
    background: var(--colorNeutralBackground2, #f8f9fa);
}

.softmax-filter-nested-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
}

.softmax-filter-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.softmax-filter-group-hint {
    font-size: 0.72rem;
    color: var(--colorNeutralForeground3, #9ca3af);
}

.softmax-filter-add-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* Custom filter dialog (FilterGroupEditor + CustomFilterDialog); the softmax-filter-* rules above serve SearchConditionEditor. */
.smx-cf-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.smx-cf-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--fontSizeBase300);
    color: var(--colorNeutralForeground1);
}

.smx-cf-nested .smx-cf-head {
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
}

.smx-cf-grow {
    flex: 1 1 auto;
}

.smx-cf-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 1fr) minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
}

.smx-cf-val,
.smx-cf-row fluent-field > div {
    min-width: 0;
}

.smx-cf-row fluent-dropdown {
    width: 100% !important;
    min-width: 0 !important;
}

.smx-cf-nested {
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground2);
}

.smx-cf-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[slot="action"]:has(> .smx-cf-clear) {
    flex: 1 1 auto;
}

.smx-cf-clear {
    margin-inline-end: auto;
}

.smx-cf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 24px;
    text-align: center;
    border: 1px dashed var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusLarge);
}

.smx-cf-empty-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
}

.smx-cf-empty h4 {
    margin: 0;
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
}

.smx-cf-empty p {
    margin: 0 0 8px;
    max-width: 40ch;
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
}

@media (max-width: 640px) {
    .smx-cf-row {
        grid-template-columns: minmax(0, 1fr) 32px;
        padding: 8px;
        border: 1px solid var(--colorNeutralStroke2);
        border-radius: var(--borderRadiusLarge);
    }

    /* Fluent's dropdown has a 160px floor inside its shadow root, so fields stack instead of pairing. */
    .smx-cf-row > :not(.smx-cf-del) {
        grid-column: 1;
    }

    .smx-cf-del {
        grid-row: 1;
        grid-column: 2;
    }
}

/* ── SoftMax input library ── */
.smx-input-invalid { border-color: var(--colorPaletteRedBorder2) !important; }
.smx-field { display: flex; flex-direction: column; gap: 4px; }
.smx-switch-wrapper { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* A dropdown's clear button sits inside the field, left of its chevron, instead of beside the field. */
[part="input-adornments"]:has(> .smx-clear):has(> fluent-dropdown, > fluent-combobox, > .smx-picker-trigger) {
    position: relative;
}

[part="input-adornments"]:is(:has(> fluent-dropdown), :has(> fluent-combobox), :has(> .smx-picker-trigger)) > .smx-clear {
    position: absolute;
    inset-inline-end: 36px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Lock page scroll while an upload or preview overlay (both position:fixed) is open. */
html:has(.sap-backdrop, .smu-backdrop) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Attachment surfaces shared by SoftMaxUpload and SoftMaxAttachmentPreview. */
.smu-root { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.smu-spin { animation: smu-spin 1s linear infinite; }
@keyframes smu-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .smu-spin { animation: none; } }

/* Configuration editors (grid config dialog, search panel): tab strip, cards, switch rows and a list beside its detail. */
.smx-cfg { display: flex; flex-direction: column; min-height: 0; color: var(--colorNeutralForeground1); }
.smx-cfg-sub { padding-bottom: 8px; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.smx-cfg-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--colorNeutralStroke2); flex-shrink: 0; }
.smx-cfg-tab { position: relative; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: none; background: transparent; color: var(--colorNeutralForeground2); font: inherit; white-space: nowrap; cursor: pointer; }
.smx-cfg-tab:hover, .smx-cfg-tab--on { color: var(--colorNeutralForeground1); }
.smx-cfg-tab--on { font-weight: var(--fontWeightSemibold); }
.smx-cfg-tab--on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 2px; background: var(--colorCompoundBrandStroke, var(--colorBrandBackground)); }
.smx-cfg-tab:focus-visible, .smx-cfg-item:focus-visible, .smx-cfg-seg > button:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: -2px; }
.smx-cfg-badge { height: 18px; padding: 0 6px; display: inline-flex; align-items: center; flex-shrink: 0; border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase100); font-weight: var(--fontWeightRegular); }
.smx-cfg-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--borderRadiusCircular); background: var(--colorBrandBackground); }
.smx-cfg-panel { height: min(720px, calc(100dvh - 240px)); min-height: 320px; display: flex; flex-direction: column; margin-top: 12px; overflow: hidden; background: var(--colorNeutralBackground2); border: 1px solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusLarge); }
.smx-cfg-panel > [hidden] { display: none !important; }
.smx-cfg-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.smx-cfg-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.smx-cfg-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusLarge); background: var(--colorNeutralBackground1); flex-shrink: 0; }
.smx-cfg-card--flush { gap: 0; padding: 0; }
.smx-cfg-h2 { margin: 0; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightSemibold); }
.smx-cfg-card--flush > .smx-cfg-h2 { padding: 10px 16px 4px; }
.smx-cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; align-items: start; }
.smx-cfg-wide { grid-column: 1 / -1; }
.smx-cfg-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 36px; padding: 6px 16px; border-top: 1px solid var(--colorNeutralStroke3); }
.smx-cfg-card--flush > .smx-cfg-row:first-child { border-top: none; }
.smx-cfg-row-extra { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 4px 0; }
.smx-cfg-grow { flex: 1 1 auto; min-width: 0; }
.smx-cfg-two-line { display: flex; flex-direction: column; min-width: 0; }
.smx-cfg-muted { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); }
.smx-cfg-mono, .smx-cfg-mono input, .smx-cfg-mono textarea { font-family: var(--fontFamilyMonospace, Consolas, monospace); }
.smx-cfg-label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.smx-cfg-seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; padding: 2px; border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground3); }
.smx-cfg-seg > button { height: 28px; padding: 0 10px; border: none; border-radius: var(--borderRadiusSmall); background: transparent; color: var(--colorNeutralForeground2); font: inherit; font-size: var(--fontSizeBase200); cursor: pointer; }
.smx-cfg-seg > button:disabled { cursor: default; opacity: .6; }
.smx-cfg-seg > .smx-cfg-seg-on { background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font-weight: var(--fontWeightSemibold); box-shadow: var(--shadow2); }
.smx-cfg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 32px; padding: 2px 4px; box-sizing: border-box; border: 1px solid var(--colorNeutralStroke1); border-bottom-color: var(--colorNeutralStrokeAccessible); border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground1); }
.smx-cfg-chips:focus-within { border-bottom-color: var(--colorCompoundBrandStroke, var(--colorBrandBackground)); }
.smx-cfg-chip { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 8px; border-radius: var(--borderRadiusCircular); background: var(--colorBrandBackground2); color: var(--colorBrandForeground2); font-size: var(--fontSizeBase200); }
.smx-cfg-chip > button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--borderRadiusCircular); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.smx-cfg-chip > button:hover { background: var(--colorSubtleBackgroundHover); }
.smx-cfg-chips > input { width: 64px; height: 24px; border: none; outline: none; background: transparent; color: inherit; font: inherit; }
.smx-cfg-md { flex: 1 1 auto; min-height: 0; display: flex; }
.smx-cfg-list { width: 320px; flex-shrink: 0; min-height: 0; display: flex; flex-direction: column; border-inline-end: 1px solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground1); }
.smx-cfg-list-tools { display: flex; align-items: flex-end; gap: 8px; padding: 12px 12px 8px; }
.smx-cfg-list-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.smx-cfg-list-foot { padding: 8px 16px; border-top: 1px solid var(--colorNeutralStroke2); }
.smx-cfg-list-head { display: flex; align-items: center; gap: 8px; padding: 12px 4px 4px 8px; }
.smx-cfg-list-head:first-child { padding-top: 8px; }
.smx-cfg-item { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 8px; box-sizing: border-box; border: none; border-radius: var(--borderRadiusMedium); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; flex-shrink: 0; }
.smx-cfg-item--indent { padding-inline-start: 24px; }
.smx-cfg-item:hover, .smx-cfg-item--on { background: var(--colorSubtleBackgroundHover); }
.smx-cfg-item--on::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--colorBrandBackground); }
.smx-cfg-item--on .smx-cfg-item-title { font-weight: var(--fontWeightSemibold); }
.smx-cfg-item--off .smx-cfg-item-title { color: var(--colorNeutralForeground3); }
.smx-cfg-item--drop { outline: 2px dashed var(--colorBrandStroke1); outline-offset: -2px; }
.smx-cfg-item-title, .smx-cfg-item-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.smx-cfg-grip { color: var(--colorNeutralForeground4); cursor: grab; }
.smx-cfg-item[draggable="false"] .smx-cfg-grip { visibility: hidden; }
.smx-cfg-tag { height: 18px; padding: 0 6px; display: inline-flex; align-items: center; flex-shrink: 0; border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase100); }
.smx-cfg-tag--off { background: var(--colorPaletteRedBackground1); color: var(--colorPaletteRedForeground1); }
.smx-cfg-detail { flex: 1 1 auto; min-width: 0; }
.smx-cfg-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.smx-cfg-detail-title { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); overflow-wrap: anywhere; }
.smx-cfg-back { display: none !important; }
.smx-cfg-empty { padding: 32px 16px; text-align: center; color: var(--colorNeutralForeground3); }
.smx-cfg-md .softmax-filter-row-main { display: flex; flex-wrap: wrap; align-items: center; }
.smx-cfg-md .softmax-filter-row-bar { align-self: stretch; }
.smx-cfg-md .softmax-filter-row-main fluent-field > div { min-width: 0; }
.smx-cfg-md .softmax-filter-row-main fluent-dropdown { width: 100% !important; min-width: 0 !important; }
.smx-cfg-footer-note { flex: 1 1 auto; align-self: center; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }

@media (max-width: 1007px) {
    .smx-cfg-list { width: 240px; }
}

@media (max-width: 640px) {
    .smx-cfg-panel { height: calc(100dvh - 260px); }
    .smx-cfg-scroll { padding: 12px 16px; }
    .smx-cfg-grid { grid-template-columns: minmax(0, 1fr); }
    .smx-cfg-list { width: auto; flex: 1 1 auto; border-inline-end: none; }
    .smx-cfg-md--detail > .smx-cfg-list, .smx-cfg-md:not(.smx-cfg-md--detail) > .smx-cfg-detail { display: none; }
    .smx-cfg-back { display: inline-flex !important; flex-basis: 100%; justify-content: flex-start; }
    .smx-cfg-footer-note { flex-basis: 100%; }
}

/* Classes a grid column's CSS class (set in the database) may use; layered so component styles still win, as they did under Tailwind. */
@layer utilities {
    .text-left { text-align: left; }
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-start { text-align: start; }
    .text-end { text-align: end; }
    .hidden { display: none; }
    .block { display: block; }
    .flex { display: flex; }
    .grid { display: grid; }
    @media (min-width: 40rem) { .sm\:hidden { display: none; } .sm\:block { display: block; } .sm\:flex { display: flex; } .sm\:grid { display: grid; } }
    @media (min-width: 48rem) { .md\:hidden { display: none; } .md\:block { display: block; } .md\:flex { display: flex; } .md\:grid { display: grid; } }
    @media (min-width: 64rem) { .lg\:hidden { display: none; } .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:grid { display: grid; } }
}