/* ============ User Statuses (səhifə) ============ */
/* Chrome (settings-page, settings-card, page-header, loading-spinner)
   settings.css-dən; bu fayl yalnız us-* elementləri. */

.user-statuses-page .settings-sections { gap: 18px; }

/* ─────────── Form card ─────────── */
.us-form-card { padding: 0; overflow: hidden; }

.us-form-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-light, #eef0f3);
    background: linear-gradient(180deg, var(--indigo-bg, rgba(99,102,241,.05)), transparent);
}
.us-form-head-icon {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: var(--indigo-500, #6366f1); color: #fff; font-size: 20px;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
}
.us-form-head-text h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary, #111827); }
.us-form-head-text p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted, #6b7280); }

.us-form { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; }

.us-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.us-form-row > .us-field { flex: 1 1 200px; min-width: 0; }
.us-form-row-bottom { align-items: flex-start; }

.us-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.us-field-title { max-width: 100%; }

.us-label {
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
    color: var(--text-secondary, #4b5563);
}
.us-hint { font-size: 11.5px; color: var(--text-muted, #9ca3af); line-height: 1.45; }

/* Inputs */
.us-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border-color, #e2e5ea);
    border-radius: 11px;
    background: var(--white, #fff);
    color: var(--text-primary, #111827);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.us-input::placeholder { color: var(--text-muted, #b3b9c2); }
.us-input:focus {
    outline: none;
    border-color: var(--indigo-500, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}

.us-input-wrap { position: relative; display: flex; align-items: center; }
.us-input-wrap .us-input { padding-right: 62px; }
.us-input-suffix {
    position: absolute; right: 12px;
    font-size: 12px; font-weight: 600; color: var(--text-muted, #9ca3af);
    pointer-events: none;
}

/* Swatches */
.us-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.us-swatch {
    width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
    border: 2px solid transparent; background: var(--sc, #6366f1);
    padding: 0; position: relative;
    transition: transform .12s ease, box-shadow .12s ease;
}
.us-swatch:hover { transform: scale(1.1); }
.us-swatch.active {
    border-color: var(--white, #fff);
    box-shadow: 0 0 0 2px var(--sc), 0 2px 6px rgba(0, 0, 0, .18);
}
.us-swatch-custom {
    display: flex; align-items: center; justify-content: center;
    background: var(--border-light, #f1f3f6); color: var(--text-muted, #6b7280);
    border: 1px dashed var(--border-color, #cbd2dc);
    overflow: hidden;
}
.us-swatch-custom:hover { transform: scale(1.1); }
.us-swatch-custom i { font-size: 15px; }
.us-swatch-custom input[type="color"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0; border: 0;
}

/* Preview */
.us-field-preview { flex: 0 0 auto; }
.us-preview-chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 14px; border-radius: 999px;
    background: color-mix(in srgb, var(--pc, #6366f1) 12%, transparent);
    color: var(--pc, #6366f1);
    font-size: 13px; font-weight: 600; max-width: 220px;
}
.us-preview-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc, #6366f1); flex: 0 0 auto; }
.us-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Buttons */
.us-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.us-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 42px; padding: 0 20px; border-radius: 11px;
    font-size: 14px; font-weight: 600; cursor: pointer; border: none;
    transition: background .15s ease, opacity .15s ease, transform .1s ease;
}
.us-btn:active { transform: translateY(1px); }
.us-btn i { font-size: 17px; }
.us-btn-primary { background: var(--indigo-500, #6366f1); color: #fff; box-shadow: 0 4px 12px rgba(99,102,241,.28); }
.us-btn-primary:hover { background: var(--indigo-600, #4f46e5); }
.us-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.us-btn-ghost {
    background: transparent; color: var(--text-muted, #6b7280);
    border: 1px solid var(--border-color, #e2e5ea);
}
.us-btn-ghost:hover { background: var(--border-light, #f3f4f6); }

/* ─────────── List card ─────────── */
.us-list-card { padding: 18px 22px 20px; }
.us-list-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.us-list-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary, #111827); }
.us-count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: var(--indigo-bg, #eef2ff); color: var(--indigo-600, #4f46e5);
    font-size: 12px; font-weight: 700;
}

.us-list { display: flex; flex-direction: column; gap: 10px; }

.us-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-color, #e8eaee);
    border-radius: 14px;
    background: var(--white, #fff);
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.us-item::before {
    content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 4px; border-radius: 0 4px 4px 0; background: var(--ic, #6366f1);
}
.us-item:hover {
    border-color: color-mix(in srgb, var(--ic, #6366f1) 45%, var(--border-color, #e8eaee));
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}

.us-item-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 13px 6px 11px; border-radius: 999px;
    background: color-mix(in srgb, var(--ic, #6366f1) 12%, transparent);
    color: var(--ic, #6366f1);
    font-weight: 600; font-size: 13.5px; flex: 0 0 auto; max-width: 240px;
    margin-left: 6px;
}
.us-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ic, #6366f1); flex: 0 0 auto; }

.us-item-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0;
    font-size: 12.5px; color: var(--text-muted, #6b7280);
}
.us-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 8px;
    background: var(--border-light, #f4f5f7); color: var(--text-secondary, #4b5563); font-weight: 500;
}
.us-tag i { font-size: 14px; opacity: .8; }
.us-item-author { display: inline-flex; align-items: center; gap: 5px; }
.us-item-author i { font-size: 14px; opacity: .8; }

.us-item-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.us-icon-btn {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 9px; cursor: pointer; background: transparent;
    color: var(--text-muted, #6b7280); font-size: 17px; transition: background .15s ease, color .15s ease;
}
.us-edit-btn:hover { background: var(--indigo-bg, rgba(99,102,241,.12)); color: var(--indigo-600, #4f46e5); }
.us-delete-btn:hover { background: rgba(239, 68, 68, .12); color: #ef4444; }

/* ─────────── States ─────────── */
.us-loading, .us-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 44px 16px; text-align: center; color: var(--text-muted, #6b7280);
}
.us-empty-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--indigo-bg, #eef2ff); color: var(--indigo-500, #6366f1); font-size: 28px;
}
.us-empty p { margin: 0; font-weight: 700; color: var(--text-primary, #111827); font-size: 14px; }
.us-empty span { font-size: 12.5px; }

/* ─────────── Responsive ─────────── */
@media (max-width: 640px) {
    .us-form-row { flex-direction: column; }
    .us-item { flex-wrap: wrap; }
    .us-item-meta { width: 100%; margin-left: 6px; }
    .us-item-actions { margin-left: auto; }
}

/* ─────────── Dark mode ─────────── */
[data-theme="dark"] .us-input { background: var(--input-bg, #1e2430); border-color: var(--border-color, #2b3342); }
[data-theme="dark"] .us-item { background: var(--card-bg, #1a1f2b); }
[data-theme="dark"] .us-swatch-custom { background: rgba(255,255,255,.05); }