/* MTA Elektrik — includes/ux/assets/d2-components.css | F1 birleştirme */

/* ─── parça D2 ─── */
/* ═══════════════════════════════════════════════════════════════════════════
   MTA Tema — D2: UI Component Library

   D1 design tokens üzerine inşa edilen standart komponentler.
   var(--mta-*) — D1 token'ları kullanır.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1. BUTTON
   ─────────────────────────────────────────────────────────── */

.mta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mta-space-2, 8px);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--mta-radius-md, 8px);
    font-family: inherit;
    font-size: var(--mta-text-sm, 0.875rem);
    font-weight: var(--mta-weight-semibold, 600);
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--mta-transition-fast, 150ms),
                border-color var(--mta-transition-fast, 150ms),
                color var(--mta-transition-fast, 150ms),
                box-shadow var(--mta-transition-fast, 150ms),
                transform var(--mta-transition-fast, 150ms);
    user-select: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.mta-btn:disabled,
.mta-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.mta-btn-icon-leading {
    display: inline-flex;
    align-items: center;
}

/* Variants */
.mta-btn-primary {
    background: var(--mta-color-primary, #6366f1);
    color: var(--mta-ink-inverse, #ffffff);
}
.mta-btn-primary:hover {
    background: var(--mta-color-primary-hover, #4f46e5);
}

.mta-btn-secondary {
    background: var(--mta-surface-raised, #f8fafc);
    color: var(--mta-ink-base, #1e293b);
    border-color: var(--mta-border-soft, #e2e8f0);
}
.mta-btn-secondary:hover {
    background: var(--mta-surface-sunken, #f1f5f9);
    border-color: var(--mta-border-strong, #cbd5e1);
}

.mta-btn-ghost {
    background: transparent;
    color: var(--mta-ink-base, #1e293b);
    border-color: var(--mta-border-strong, #cbd5e1);
}
.mta-btn-ghost:hover {
    background: var(--mta-surface-raised, #f8fafc);
}

.mta-btn-success {
    background: var(--mta-color-success, #16a34a);
    color: var(--mta-ink-inverse, #ffffff);
}
.mta-btn-success:hover {
    background: var(--mta-color-success-dark, #166534);
}

.mta-btn-danger {
    background: var(--mta-color-danger, #dc2626);
    color: var(--mta-ink-inverse, #ffffff);
}
.mta-btn-danger:hover {
    background: var(--mta-color-danger-dark, #991b1b);
}

.mta-btn-link {
    background: transparent;
    color: var(--mta-color-primary, #6366f1);
    border-color: transparent;
    text-decoration: underline;
    padding-left: 0;
    padding-right: 0;
}
.mta-btn-link:hover {
    color: var(--mta-color-primary-hover, #4f46e5);
}

.mta-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--mta-surface-raised, #f8fafc);
    color: var(--mta-ink-base, #1e293b);
    border-color: var(--mta-border-soft, #e2e8f0);
}
.mta-btn-icon:hover {
    background: var(--mta-surface-sunken, #f1f5f9);
}

/* Sizes */
.mta-btn-xs { padding: 4px 10px; font-size: var(--mta-text-xs, 0.75rem); }
.mta-btn-sm { padding: 6px 14px; font-size: var(--mta-text-sm, 0.875rem); }
.mta-btn-md { padding: 10px 18px; font-size: var(--mta-text-sm, 0.875rem); }
.mta-btn-lg { padding: 14px 24px; font-size: var(--mta-text-base, 1rem); }

/* ───────────────────────────────────────────────────────────
   2. CARD
   ─────────────────────────────────────────────────────────── */

.mta-card {
    background: var(--mta-surface-base, #ffffff);
    border: 1px solid var(--mta-border-soft, #e2e8f0);
    border-radius: var(--mta-radius-lg, 12px);
    overflow: hidden;
    transition: box-shadow var(--mta-transition-base, 250ms),
                transform var(--mta-transition-base, 250ms);
}

.mta-card-elevated {
    box-shadow: var(--mta-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.07));
    border-color: transparent;
}

.mta-card-hover {
    cursor: pointer;
}
.mta-card-hover:hover {
    box-shadow: var(--mta-shadow-lg, 0 12px 30px rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
}

.mta-card-flat {
    border: none;
    background: var(--mta-surface-raised, #f8fafc);
}

.mta-card-image {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--mta-surface-sunken, #f1f5f9);
    overflow: hidden;
}
.mta-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mta-card-header {
    padding: var(--mta-space-4, 16px) var(--mta-space-5, 24px);
    border-bottom: 1px solid var(--mta-border-soft, #e2e8f0);
}

.mta-card-title {
    margin: 0;
    font-size: var(--mta-text-lg, 1.125rem);
    font-weight: var(--mta-weight-bold, 700);
    color: var(--mta-ink-strong, #0f172a);
}

.mta-card-body {
    padding: var(--mta-space-5, 24px);
    color: var(--mta-ink-base, #1e293b);
}

.mta-card-footer {
    padding: var(--mta-space-4, 16px) var(--mta-space-5, 24px);
    border-top: 1px solid var(--mta-border-soft, #e2e8f0);
    background: var(--mta-surface-raised, #f8fafc);
}

.mta-card-actions {
    display: flex;
    gap: var(--mta-space-2, 8px);
    flex-wrap: wrap;
}

/* ───────────────────────────────────────────────────────────
   3. FORM
   ─────────────────────────────────────────────────────────── */

.mta-form-field {
    margin-bottom: var(--mta-space-4, 16px);
}

.mta-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--mta-text-sm, 0.875rem);
    font-weight: var(--mta-weight-semibold, 600);
    color: var(--mta-ink-strong, #0f172a);
}

.mta-form-label-required::after {
    content: " *";
    color: var(--mta-color-danger, #dc2626);
}

.mta-input,
.mta-textarea,
.mta-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--mta-text-sm, 0.875rem);
    color: var(--mta-ink-base, #1e293b);
    background: var(--mta-surface-base, #ffffff);
    border: 1px solid var(--mta-border-strong, #cbd5e1);
    border-radius: var(--mta-radius-md, 8px);
    transition: border-color var(--mta-transition-fast, 150ms),
                box-shadow var(--mta-transition-fast, 150ms);
    box-sizing: border-box;
}

.mta-input:focus,
.mta-textarea:focus,
.mta-select:focus {
    outline: none;
    border-color: var(--mta-color-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.mta-input:disabled,
.mta-textarea:disabled,
.mta-select:disabled {
    background: var(--mta-surface-sunken, #f1f5f9);
    color: var(--mta-ink-soft, #64748b);
    cursor: not-allowed;
}

.mta-input-error,
.mta-textarea-error,
.mta-select-error {
    border-color: var(--mta-color-danger, #dc2626);
}

.mta-input-error:focus,
.mta-textarea-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.mta-textarea {
    resize: vertical;
    min-height: 80px;
}

.mta-form-hint {
    margin-top: 4px;
    font-size: var(--mta-text-xs, 0.75rem);
    color: var(--mta-ink-soft, #64748b);
}

.mta-form-error {
    margin-top: 4px;
    font-size: var(--mta-text-xs, 0.75rem);
    color: var(--mta-color-danger, #dc2626);
    font-weight: var(--mta-weight-semibold, 600);
}

/* Checkbox & Radio */
.mta-checkbox-label,
.mta-radio-label {
    display: inline-flex;
    align-items: center;
    gap: var(--mta-space-2, 8px);
    cursor: pointer;
    font-size: var(--mta-text-sm, 0.875rem);
    color: var(--mta-ink-base, #1e293b);
    user-select: none;
}

.mta-checkbox,
.mta-radio {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--mta-color-primary, #6366f1);
}

/* Switch */
.mta-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.mta-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mta-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--mta-border-strong, #cbd5e1);
    transition: background var(--mta-transition-fast, 150ms);
    border-radius: 24px;
}

.mta-switch-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--mta-surface-base, #ffffff);
    transition: transform var(--mta-transition-fast, 150ms);
    border-radius: 50%;
    box-shadow: var(--mta-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.mta-switch input:checked + .mta-switch-slider {
    background: var(--mta-color-primary, #6366f1);
}

.mta-switch input:checked + .mta-switch-slider::before {
    transform: translateX(20px);
}

/* ───────────────────────────────────────────────────────────
   4. BADGE & TAG
   ─────────────────────────────────────────────────────────── */

.mta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: var(--mta-text-xs, 0.75rem);
    font-weight: var(--mta-weight-semibold, 600);
    line-height: 1;
    border-radius: var(--mta-radius-sm, 4px);
    white-space: nowrap;
}

.mta-badge-primary { background: var(--mta-color-primary-light, #e0e7ff); color: var(--mta-color-primary-dark, #3730a3); }
.mta-badge-success { background: var(--mta-color-success-light, #dcfce7); color: var(--mta-color-success-dark, #166534); }
.mta-badge-warn    { background: var(--mta-color-warn-light, #fef3c7);    color: var(--mta-color-warn-dark, #92400e); }
.mta-badge-danger  { background: var(--mta-color-danger-light, #fee2e2);  color: var(--mta-color-danger-dark, #991b1b); }
.mta-badge-info    { background: var(--mta-color-info-light, #e0f2fe);    color: var(--mta-color-info-dark, #075985); }
.mta-badge-secondary { background: var(--mta-surface-sunken, #f1f5f9);    color: var(--mta-ink-muted, #475569); }

.mta-badge-outline {
    background: transparent;
    border: 1px solid currentColor;
}

.mta-badge-dot {
    padding-left: 6px;
}

.mta-badge-dot-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.mta-badge-sm { padding: 2px 6px; font-size: 10px; }
.mta-badge-lg { padding: 5px 12px; font-size: var(--mta-text-sm, 0.875rem); }

.mta-badge-close {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0 0 0 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

/* ───────────────────────────────────────────────────────────
   5. ALERT
   ─────────────────────────────────────────────────────────── */

.mta-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--mta-space-3, 12px);
    padding: var(--mta-space-3, 12px) var(--mta-space-4, 16px);
    border-radius: var(--mta-radius-md, 8px);
    border-left: 4px solid;
    font-size: var(--mta-text-sm, 0.875rem);
    margin-bottom: var(--mta-space-3, 12px);
}

.mta-alert-success {
    background: var(--mta-color-success-light, #dcfce7);
    border-left-color: var(--mta-color-success, #16a34a);
    color: var(--mta-color-success-dark, #166534);
}

.mta-alert-info {
    background: var(--mta-color-info-light, #e0f2fe);
    border-left-color: var(--mta-color-info, #0ea5e9);
    color: var(--mta-color-info-dark, #075985);
}

.mta-alert-warn {
    background: var(--mta-color-warn-light, #fef3c7);
    border-left-color: var(--mta-color-warn, #f59e0b);
    color: var(--mta-color-warn-dark, #92400e);
}

.mta-alert-danger {
    background: var(--mta-color-danger-light, #fee2e2);
    border-left-color: var(--mta-color-danger, #dc2626);
    color: var(--mta-color-danger-dark, #991b1b);
}

.mta-alert-icon {
    font-size: var(--mta-text-base, 1rem);
    flex-shrink: 0;
    line-height: 1.4;
}

.mta-alert-content {
    flex: 1;
}

.mta-alert-title {
    font-weight: var(--mta-weight-bold, 700);
    margin-bottom: 4px;
}

.mta-alert-message {
    line-height: 1.5;
}

.mta-alert-close {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    opacity: 0.6;
    flex-shrink: 0;
}

.mta-alert-close:hover {
    opacity: 1;
}

/* ───────────────────────────────────────────────────────────
   6. MODAL
   ─────────────────────────────────────────────────────────── */

.mta-modal {
    position: fixed;
    inset: 0;
    z-index: var(--mta-z-modal, 1100);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--mta-space-4, 16px);
    pointer-events: none;
}

.mta-modal[aria-hidden="false"] {
    display: flex;
    pointer-events: auto;
}

.mta-modal-overlay {
    position: absolute;
    inset: 0;
    background: var(--mta-surface-overlay, rgba(15, 23, 42, 0.6));
    backdrop-filter: blur(2px);
    z-index: var(--mta-z-overlay, 1000);
    cursor: pointer;
}

.mta-modal-dialog {
    position: relative;
    background: var(--mta-surface-base, #ffffff);
    border-radius: var(--mta-radius-2xl, 20px);
    box-shadow: var(--mta-shadow-xl, 0 24px 50px rgba(0, 0, 0, 0.15));
    z-index: 1;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: mta-modal-enter var(--mta-transition-base, 250ms) ease-out;
}

@keyframes mta-modal-enter {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mta-modal-sm        { max-width: 400px; }
.mta-modal-md        { max-width: 600px; }
.mta-modal-lg        { max-width: 800px; }
.mta-modal-xl        { max-width: 1000px; }
.mta-modal-fullscreen {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
}

.mta-modal-header {
    padding: var(--mta-space-4, 16px) var(--mta-space-5, 24px);
    border-bottom: 1px solid var(--mta-border-soft, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.mta-modal-title {
    margin: 0;
    font-size: var(--mta-text-lg, 1.125rem);
    font-weight: var(--mta-weight-bold, 700);
    color: var(--mta-ink-strong, #0f172a);
}

.mta-modal-close {
    background: transparent;
    border: none;
    color: var(--mta-ink-soft, #64748b);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--mta-radius-sm, 4px);
}

.mta-modal-close:hover {
    background: var(--mta-surface-raised, #f8fafc);
    color: var(--mta-ink-strong, #0f172a);
}

.mta-modal-body {
    padding: var(--mta-space-5, 24px);
    overflow-y: auto;
    flex: 1;
}

.mta-modal-footer {
    padding: var(--mta-space-4, 16px) var(--mta-space-5, 24px);
    border-top: 1px solid var(--mta-border-soft, #e2e8f0);
    background: var(--mta-surface-raised, #f8fafc);
    display: flex;
    justify-content: flex-end;
    gap: var(--mta-space-2, 8px);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .mta-modal-md,
    .mta-modal-lg,
    .mta-modal-xl {
        max-width: 100%;
    }
}

/* ───────────────────────────────────────────────────────────
   7. TOAST
   ─────────────────────────────────────────────────────────── */

.mta-toast-container {
    position: fixed;
    bottom: var(--mta-space-5, 24px);
    right: var(--mta-space-5, 24px);
    z-index: var(--mta-z-toast, 9999);
    display: flex;
    flex-direction: column;
    gap: var(--mta-space-2, 8px);
    max-width: 400px;
    pointer-events: none;
}

.mta-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--mta-space-3, 12px);
    padding: var(--mta-space-3, 12px) var(--mta-space-4, 16px);
    background: var(--mta-ink-strong, #0f172a);
    color: var(--mta-ink-inverse, #ffffff);
    border-radius: var(--mta-radius-lg, 12px);
    box-shadow: var(--mta-shadow-lg, 0 12px 30px rgba(0, 0, 0, 0.1));
    font-size: var(--mta-text-sm, 0.875rem);
    font-weight: var(--mta-weight-semibold, 600);
    animation: mta-toast-enter var(--mta-transition-base, 250ms) ease-out;
    pointer-events: auto;
}

.mta-toast.is-leaving {
    animation: mta-toast-leave var(--mta-transition-base, 250ms) ease-in forwards;
}

@keyframes mta-toast-enter {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes mta-toast-leave {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(100%); }
}

.mta-toast-success { background: var(--mta-color-success, #16a34a); }
.mta-toast-error   { background: var(--mta-color-danger, #dc2626); }
.mta-toast-warn    { background: var(--mta-color-warn, #f59e0b); }
.mta-toast-info    { background: var(--mta-color-info, #0ea5e9); }

.mta-toast-icon {
    font-size: var(--mta-text-base, 1rem);
    line-height: 1;
}

.mta-toast-content {
    flex: 1;
    line-height: 1.4;
}

/* ───────────────────────────────────────────────────────────
   8. TABLE
   ─────────────────────────────────────────────────────────── */

.mta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mta-text-sm, 0.875rem);
}

.mta-table thead th {
    text-align: left;
    padding: var(--mta-space-3, 12px) var(--mta-space-4, 16px);
    background: var(--mta-surface-raised, #f8fafc);
    color: var(--mta-ink-muted, #475569);
    font-weight: var(--mta-weight-bold, 700);
    font-size: var(--mta-text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--mta-border-soft, #e2e8f0);
}

.mta-table tbody td {
    padding: var(--mta-space-3, 12px) var(--mta-space-4, 16px);
    border-bottom: 1px solid var(--mta-border-soft, #e2e8f0);
    color: var(--mta-ink-base, #1e293b);
}

.mta-table-striped tbody tr:nth-child(odd) td {
    background: var(--mta-surface-raised, #f8fafc);
}

.mta-table-hover tbody tr {
    transition: background var(--mta-transition-fast, 150ms);
}

.mta-table-hover tbody tr:hover td {
    background: var(--mta-surface-sunken, #f1f5f9);
}

.mta-table-bordered {
    border: 1px solid var(--mta-border-soft, #e2e8f0);
    border-radius: var(--mta-radius-md, 8px);
    overflow: hidden;
}

.mta-table-bordered thead th,
.mta-table-bordered tbody td {
    border: 1px solid var(--mta-border-soft, #e2e8f0);
}

.mta-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ───────────────────────────────────────────────────────────
   9. TAB
   ─────────────────────────────────────────────────────────── */

.mta-tabs {
    display: flex;
    gap: var(--mta-space-1, 4px);
    border-bottom: 1px solid var(--mta-border-soft, #e2e8f0);
    margin-bottom: var(--mta-space-4, 16px);
    flex-wrap: wrap;
}

.mta-tab {
    background: transparent;
    border: none;
    padding: 10px 18px;
    font-family: inherit;
    font-size: var(--mta-text-sm, 0.875rem);
    font-weight: var(--mta-weight-semibold, 600);
    color: var(--mta-ink-soft, #64748b);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--mta-transition-fast, 150ms),
                border-color var(--mta-transition-fast, 150ms);
}

.mta-tab:hover {
    color: var(--mta-ink-strong, #0f172a);
}

.mta-tab.is-active {
    color: var(--mta-color-primary, #6366f1);
    border-bottom-color: var(--mta-color-primary, #6366f1);
}

.mta-tab-panel {
    display: none;
    animation: mta-fade-in var(--mta-transition-base, 250ms) ease-out;
}

.mta-tab-panel.is-active {
    display: block;
}

@keyframes mta-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ───────────────────────────────────────────────────────────
   10. PAGINATION
   ─────────────────────────────────────────────────────────── */

.mta-pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: var(--mta-space-5, 24px) 0;
}

.mta-page-btn {
    background: var(--mta-surface-base, #ffffff);
    border: 1px solid var(--mta-border-soft, #e2e8f0);
    color: var(--mta-ink-muted, #475569);
    padding: 6px 12px;
    border-radius: var(--mta-radius-sm, 4px);
    cursor: pointer;
    font-family: inherit;
    font-weight: var(--mta-weight-semibold, 600);
    font-size: var(--mta-text-sm, 0.875rem);
    min-width: 36px;
    transition: all var(--mta-transition-fast, 150ms);
}

.mta-page-btn:hover:not(:disabled):not(.is-active) {
    background: var(--mta-surface-raised, #f8fafc);
    border-color: var(--mta-border-strong, #cbd5e1);
    color: var(--mta-ink-strong, #0f172a);
}

.mta-page-btn.is-active {
    background: var(--mta-color-primary, #6366f1);
    border-color: var(--mta-color-primary, #6366f1);
    color: var(--mta-ink-inverse, #ffffff);
}

.mta-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ───────────────────────────────────────────────────────────
   11. LOADING (spinner, skeleton, progress)
   ─────────────────────────────────────────────────────────── */

.mta-spinner {
    display: inline-block;
    border: 2px solid var(--mta-border-soft, #e2e8f0);
    border-top-color: var(--mta-color-primary, #6366f1);
    border-radius: 50%;
    animation: mta-spin 0.8s linear infinite;
}

.mta-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.mta-spinner-md { width: 24px; height: 24px; border-width: 2px; }
.mta-spinner-lg { width: 40px; height: 40px; border-width: 3px; }

@keyframes mta-spin {
    to { transform: rotate(360deg); }
}

.mta-skeleton {
    display: block;
    background: linear-gradient(90deg,
        var(--mta-surface-sunken, #f1f5f9) 25%,
        var(--mta-border-soft, #e2e8f0) 50%,
        var(--mta-surface-sunken, #f1f5f9) 75%
    );
    background-size: 200% 100%;
    animation: mta-skeleton-shimmer 1.5s infinite;
    border-radius: var(--mta-radius-sm, 4px);
}

.mta-skeleton-text { height: 12px; }
.mta-skeleton-text-lg { height: 18px; }
.mta-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.mta-skeleton-image { aspect-ratio: 16/9; }

@keyframes mta-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.mta-progress {
    width: 100%;
    height: 8px;
    background: var(--mta-surface-sunken, #f1f5f9);
    border-radius: var(--mta-radius-pill, 999px);
    overflow: hidden;
}

.mta-progress-bar {
    height: 100%;
    background: var(--mta-color-primary, #6366f1);
    border-radius: var(--mta-radius-pill, 999px);
    transition: width var(--mta-transition-base, 250ms);
}

/* ───────────────────────────────────────────────────────────
   12. MISC (tooltip, divider, empty state, breadcrumb, dropdown)
   ─────────────────────────────────────────────────────────── */

.mta-tooltip {
    position: relative;
    display: inline-block;
}

.mta-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--mta-ink-strong, #0f172a);
    color: var(--mta-ink-inverse, #ffffff);
    padding: 4px 10px;
    border-radius: var(--mta-radius-sm, 4px);
    font-size: var(--mta-text-xs, 0.75rem);
    font-weight: var(--mta-weight-semibold, 600);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mta-transition-fast, 150ms);
    z-index: var(--mta-z-dropdown, 500);
}

.mta-tooltip:hover::before {
    opacity: 1;
}

.mta-divider {
    border: 0;
    border-top: 1px solid var(--mta-border-soft, #e2e8f0);
    margin: var(--mta-space-5, 24px) 0;
}

.mta-empty-state {
    text-align: center;
    padding: var(--mta-space-8, 64px) var(--mta-space-4, 16px);
    background: var(--mta-surface-raised, #f8fafc);
    border: 2px dashed var(--mta-border-strong, #cbd5e1);
    border-radius: var(--mta-radius-lg, 12px);
}

.mta-empty-icon {
    font-size: 48px;
    margin-bottom: var(--mta-space-3, 12px);
    opacity: 0.7;
}

.mta-empty-title {
    margin: 0 0 8px;
    font-size: var(--mta-text-lg, 1.125rem);
    font-weight: var(--mta-weight-bold, 700);
    color: var(--mta-ink-strong, #0f172a);
}

.mta-empty-message {
    margin: 0 0 var(--mta-space-4, 16px);
    color: var(--mta-ink-muted, #475569);
    font-size: var(--mta-text-sm, 0.875rem);
}

.mta-empty-action {
    display: inline-flex;
    gap: var(--mta-space-2, 8px);
}

.mta-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--mta-space-3, 12px) 0;
    font-size: var(--mta-text-sm, 0.875rem);
    color: var(--mta-ink-soft, #64748b);
}

.mta-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mta-breadcrumb-item + .mta-breadcrumb-item::before {
    content: "›";
    color: var(--mta-ink-faint, #94a3b8);
}

.mta-breadcrumb-item a {
    color: var(--mta-ink-muted, #475569);
    text-decoration: none;
}

.mta-breadcrumb-item a:hover {
    color: var(--mta-color-primary, #6366f1);
}

.mta-breadcrumb-item.is-active {
    color: var(--mta-ink-strong, #0f172a);
    font-weight: var(--mta-weight-semibold, 600);
}

.mta-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: var(--mta-surface-base, #ffffff);
    border: 1px solid var(--mta-border-soft, #e2e8f0);
    border-radius: var(--mta-radius-md, 8px);
    box-shadow: var(--mta-shadow-lg, 0 12px 30px rgba(0, 0, 0, 0.1));
    z-index: var(--mta-z-dropdown, 500);
    display: none;
    margin-top: 4px;
    overflow: hidden;
}

.mta-dropdown.is-open {
    display: block;
}

.mta-dropdown-item {
    display: block;
    padding: 10px 14px;
    color: var(--mta-ink-base, #1e293b);
    text-decoration: none;
    font-size: var(--mta-text-sm, 0.875rem);
    transition: background var(--mta-transition-fast, 150ms);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.mta-dropdown-item:hover {
    background: var(--mta-surface-raised, #f8fafc);
}

.mta-dropdown-divider {
    height: 1px;
    background: var(--mta-border-soft, #e2e8f0);
    margin: 4px 0;
}