/* Extra Fluent 2 controls that sit on top of the existing class contracts.
   Feature screens keep their layout; these styles are opt-in by class. */

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    height: 20px;
    padding-inline: var(--spacing-sm);
    border-radius: var(--radius-pill);
    background: var(--color-background-muted);
    color: var(--color-text-secondary);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    border: 1px solid transparent;
}

.app-badge--success {
    background: var(--color-status-success-tint);
    color: var(--color-status-success);
    border-color: color-mix(in srgb, var(--color-status-success) 35%, transparent);
}

.app-badge--warning {
    background: var(--color-status-warning-tint);
    color: var(--color-status-warning);
    border-color: color-mix(in srgb, var(--color-status-warning) 35%, transparent);
}

.app-badge--error,
.app-badge--danger {
    background: var(--color-status-danger-tint);
    color: var(--color-status-danger);
    border-color: color-mix(in srgb, var(--color-status-danger) 35%, transparent);
}

.app-badge--info {
    background: var(--color-status-info-tint);
    color: var(--color-status-info);
    border-color: color-mix(in srgb, var(--color-status-info) 35%, transparent);
}

.app-badge--neutral {
    background: var(--color-background-muted);
    color: var(--color-text-secondary);
}

.app-badge--purple {
    background: color-mix(in srgb, var(--color-status-purple) 14%, transparent);
    color: var(--color-status-purple);
}

.app-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-default);
    border-inline-start: 4px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-background-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-label);
}

.app-alert--success { border-inline-start-color: var(--color-status-success); }
.app-alert--warning { border-inline-start-color: var(--color-status-warning); }
.app-alert--error { border-inline-start-color: var(--color-status-danger); }
.app-alert--info { border-inline-start-color: var(--color-status-info); }

.app-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
    text-align: center;
}

.app-skeleton {
    display: block;
    height: var(--control-height-sm);
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--color-background-muted) 0%,
        var(--color-hover) 50%,
        var(--color-background-muted) 100%);
    background-size: 200% 100%;
    animation: app-skeleton 1.2s ease-in-out infinite;
}

@keyframes app-skeleton {
    to { background-position: -200% 0; }
}

.app-type-display { font-size: var(--font-size-display); font-weight: var(--font-weight-semibold); }
.app-type-page-title { font-size: var(--font-size-page-title); font-weight: var(--font-weight-semibold); }
.app-type-section-title { font-size: var(--font-size-section-title); font-weight: var(--font-weight-semibold); }
.app-type-card-title { font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); }
.app-type-body { font-size: var(--font-size-body); }
.app-type-label { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); }
.app-type-caption { font-size: var(--font-size-caption); color: var(--color-text-muted); }

.ds-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.ds-section {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.ds-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-block-start: var(--spacing-md);
}

.ds-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    max-width: 420px;
}

.ds-stack--narrow {
    max-width: 320px;
}

.ds-skeleton-sample {
    width: 220px;
}

.ds-swatch {
    width: 72px;
    min-height: 56px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-default);
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-xs);
    font-size: 10px;
    color: var(--color-text-primary);
}

/* ============================================================
   App.combo — القائمة المنسدلة الموحدة (قرار 0038).
   تغليف تلقائي لكل <select> عبر js/ui/combobox.js — نفس سلوك
   combobox شاشة الأصناف، بألوان دلالية تعمل في الفاتح والداكن.
   ============================================================ */

.app-combo {
    position: relative;
    width: 100%;
    min-width: 0;
}

.app-combo__native { display: none !important; }

.app-combo__display {
    width: 100%;
    height: var(--control-height-md);
    padding: 0 var(--spacing-sm);
    padding-inline-end: 26px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    font-size: var(--font-size-label);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-combo--sm .app-combo__display {
    height: var(--control-height-sm);
}

.app-combo__display::after {
    content: '';
    position: absolute;
    inset-inline-end: 9px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-inline-end: 2px solid var(--color-text-secondary);
    border-block-end: 2px solid var(--color-text-secondary);
    transform: rotate(45deg);
}

.app-combo__display:hover:not(:disabled) {
    border-color: var(--input-border-hover);
}

.app-combo__display:focus-visible,
.app-combo__display:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring);
}

.app-combo__display:disabled {
    background: var(--color-input-bg-disabled);
    cursor: default;
}

.app-combo__panel {
    position: absolute;
    top: calc(100% + 2px);
    inset-inline: 0;
    z-index: var(--z-combo);
    min-width: 200px;
    padding: var(--spacing-xs);
    background: var(--color-background-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.app-combo__search {
    width: 100%;
    height: var(--control-height-sm);
    margin-block-end: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    font-family: inherit;
}

.app-combo__search:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.app-combo__list {
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-block-end: 4px;
    overscroll-behavior: contain;
}

.app-combo__option {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

.app-combo__option:hover { background: var(--color-hover); }
.app-combo__option.is-active { background: var(--color-selected); }
.app-combo__option.is-current { font-weight: 700; color: var(--color-text-brand); }