/* =====================================================
   ObfuscatorJS Framework v3.2
   components.css
   Global Components System
   Production / Safe Update

   Compatible with:
   - Existing HTML
   - Existing JS components
   - Existing variables.css
   - Existing dark mode
   - Existing button/card systems

   Update goals:
   - Better visual consistency
   - Better accessibility
   - Safer responsive behavior
   - Improved dark mode
   - No breaking class changes
   - No unnecessary visual effects
===================================================== */


/* =====================================================
   TOAST NOTIFICATION
===================================================== */

.toast {

    position: fixed;

    top: 24px;
    right: 24px;

    min-width: 280px;
    max-width: 380px;

    padding: 16px 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    background: var(--surface);
    color: var(--text);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-12px);

    z-index: var(--z-toast);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;

}

.toast.show {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}


/* =====================================================
   TOAST TYPES
===================================================== */

.toast-success {

    border-left: 4px solid var(--success);

}

.toast-error {

    border-left: 4px solid var(--danger);

}

.toast-warning {

    border-left: 4px solid var(--warning);

}

.toast-info {

    border-left: 4px solid var(--info);

}


/* =====================================================
   BADGE
===================================================== */

.badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    border-radius: var(--radius-round);

    font-size: var(--font-xs);

    font-weight: var(--bold);

    line-height: 1.2;

    white-space: nowrap;

}

.badge-primary {

    background: var(--primary);
    color: var(--white);

}

.badge-success {

    background: var(--success);
    color: var(--white);

}

.badge-warning {

    background: var(--warning);
    color: var(--white);

}

.badge-danger {

    background: var(--danger);
    color: var(--white);

}

.badge-light {

    background: var(--surface-2);
    color: var(--text);

}


/* =====================================================
   ALERT
===================================================== */

.alert {

    margin-bottom: var(--space-5);

    padding: 16px 18px;

    border: 1px solid transparent;

    border-left-width: 4px;

    border-radius: var(--radius-lg);

}

.alert-success {

    background: #ecfdf5;

    border-color: rgba(22, 163, 74, .25);
    border-left-color: var(--success);

    color: #166534;

}

.alert-warning {

    background: #fffbeb;

    border-color: rgba(245, 158, 11, .25);
    border-left-color: var(--warning);

    color: #92400e;

}

.alert-danger {

    background: #fef2f2;

    border-color: rgba(220, 38, 38, .25);
    border-left-color: var(--danger);

    color: #991b1b;

}

.alert-info {

    background: #f0f9ff;

    border-color: rgba(14, 165, 233, .25);
    border-left-color: var(--info);

    color: #075985;

}


/* =====================================================
   MODAL OVERLAY
===================================================== */

.modal {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 16px;

    background: rgba(15, 23, 42, .62);

    opacity: 0;
    visibility: hidden;

    z-index: var(--z-modal);

    transition:
        opacity .2s ease,
        visibility .2s ease;

}


/* =====================================================
   MODAL ACTIVE
===================================================== */

.modal.show {

    opacity: 1;
    visibility: visible;

}


/* =====================================================
   MODAL CONTENT
===================================================== */

.modal-content {

    width: 100%;
    max-width: 600px;

    max-height: calc(100vh - 32px);

    display: flex;

    flex-direction: column;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-xl);

    overflow: hidden;

    transform: translateY(12px) scale(.99);

    transition: transform .2s ease;

}

.modal.show .modal-content {

    transform: translateY(0) scale(1);

}


/* =====================================================
   MODAL HEADER
===================================================== */

.modal-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 20px 24px;

    border-bottom: 1px solid var(--border);

}

.modal-title {

    margin: 0;

    color: var(--text);

    font-size: var(--font-lg);

    font-weight: var(--bold);

    line-height: 1.4;

}


/* =====================================================
   MODAL CLOSE BUTTON
===================================================== */

.modal-close {

    width: 36px;
    height: 36px;

    padding: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 0;

    border-radius: var(--radius-round);

    background: transparent;

    color: var(--text);

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .15s ease;

}

.modal-close:hover {

    background: var(--surface-2);

    color: var(--primary);

}

.modal-close:active {

    transform: scale(.96);

}

.modal-close:focus-visible {

    outline: var(--focus-width) solid var(--primary);

    outline-offset: var(--focus-offset);

}


/* =====================================================
   MODAL BODY
===================================================== */

.modal-body {

    padding: 24px;

    overflow-y: auto;

    overscroll-behavior: contain;

}


/* =====================================================
   MODAL FOOTER
===================================================== */

.modal-footer {

    display: flex;

    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 12px;

    padding: 20px 24px;

    border-top: 1px solid var(--border);

}


/* =====================================================
   LOADER
===================================================== */

.loader {

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 40px;

}

.loader-inline {

    display: inline-flex;

    align-items: center;

    gap: 10px;

}


/* =====================================================
   SPINNER
===================================================== */

.spinner {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border: 4px solid var(--surface-2);

    border-top-color: var(--primary);

    border-radius: 50%;

    animation: spinner .8s linear infinite;

}

.spinner-sm {

    width: 22px;
    height: 22px;

    border-width: 3px;

}

.spinner-lg {

    width: 64px;
    height: 64px;

    border-width: 5px;

}


/* =====================================================
   LOADER TEXT
===================================================== */

.loader-text {

    color: var(--text-light);

    font-size: var(--font-sm);

}


/* =====================================================
   SPINNER ANIMATION
===================================================== */

@keyframes spinner {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


/* =====================================================
   TOOLTIP
===================================================== */

.tooltip {

    position: relative;

    display: inline-block;

}

.tooltip::after {

    content: attr(data-tooltip);

    position: absolute;

    bottom: calc(100% + 10px);
    left: 50%;

    min-width: max-content;
    max-width: 260px;

    padding: 6px 10px;

    background: var(--secondary);

    color: var(--white);

    border-radius: var(--radius-sm);

    font-size: var(--font-xs);

    line-height: 1.4;

    text-align: center;

    white-space: normal;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateX(-50%) translateY(5px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;

    z-index: var(--z-dropdown);

}

.tooltip:hover::after,
.tooltip:focus-within::after {

    opacity: 1;
    visibility: visible;

    transform: translateX(-50%) translateY(0);

}


/* =====================================================
   PROGRESS
===================================================== */

.progress {

    width: 100%;

    height: 10px;

    overflow: hidden;

    background: var(--surface-2);

    border-radius: var(--radius-round);

}

.progress-bar {

    width: 0;
    height: 100%;

    background: var(--primary);

    border-radius: inherit;

    transition: width .3s ease;

}

.progress-success {

    background: var(--success);

}

.progress-warning {

    background: var(--warning);

}

.progress-danger {

    background: var(--danger);

}


/* =====================================================
   SKELETON
===================================================== */

.skeleton {

    position: relative;

    overflow: hidden;

    background: var(--surface-2);

    border-radius: var(--radius);

}

.skeleton::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .45),
        transparent
    );

    transform: translateX(-100%);

    animation: skeleton-loading 1.2s infinite;

}

@keyframes skeleton-loading {

    100% {

        transform: translateX(100%);

    }

}

.skeleton-text {

    width: 100%;

    height: 16px;

    margin-bottom: 12px;

}

.skeleton-title {

    width: 60%;

    height: 24px;

    margin-bottom: 18px;

}

.skeleton-image {

    width: 100%;

    height: 220px;

}


/* =====================================================
   EMPTY STATE
===================================================== */

.empty-state {

    padding: 60px 24px;

    text-align: center;

    color: var(--text-light);

}

.empty-state-icon {

    margin-bottom: 20px;

    color: var(--text-muted);

    font-size: 64px;

    line-height: 1;

}

.empty-state-title {

    margin: 0 0 12px;

    color: var(--text);

    font-size: var(--h4);

    font-weight: var(--bold);

    line-height: 1.4;

}

.empty-state-description {

    max-width: 500px;

    margin: 0 auto;

    color: var(--text-light);

    line-height: var(--line-height);

}


/* =====================================================
   DARK MODE
===================================================== */

html.dark .toast {

    background: var(--surface);

    color: var(--text);

    border-color: var(--border);

}

html.dark .alert-success {

    background: rgba(22, 163, 74, .12);

    border-color: rgba(134, 239, 172, .18);

    border-left-color: var(--success);

    color: #86efac;

}

html.dark .alert-warning {

    background: rgba(245, 158, 11, .12);

    border-color: rgba(252, 211, 77, .18);

    border-left-color: var(--warning);

    color: #fcd34d;

}

html.dark .alert-danger {

    background: rgba(220, 38, 38, .12);

    border-color: rgba(252, 165, 165, .18);

    border-left-color: var(--danger);

    color: #fca5a5;

}

html.dark .alert-info {

    background: rgba(14, 165, 233, .12);

    border-color: rgba(125, 211, 252, .18);

    border-left-color: var(--info);

    color: #7dd3fc;

}

html.dark .modal-content {

    background: var(--surface);

    border-color: var(--border);

}

html.dark .modal-header,
html.dark .modal-footer {

    border-color: var(--border);

}

html.dark .modal-title,
html.dark .modal-close {

    color: var(--text);

}

html.dark .modal-close:hover {

    background: var(--surface-2);

    color: var(--primary);

}

html.dark .spinner {

    border-color: var(--surface-2);

    border-top-color: var(--primary);

}

html.dark .tooltip::after {

    background: #020617;

}

html.dark .skeleton {

    background: var(--surface-2);

}

html.dark .skeleton::before {

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .08),
        transparent
    );

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .toast {

        top: 16px;

        left: 16px;
        right: 16px;

        min-width: 0;

        max-width: none;

    }

    .modal {

        padding: 16px;

    }

    .modal-content {

        max-height: calc(100vh - 32px);

    }

    .modal-header {

        padding: 18px 20px;

    }

    .modal-body {

        padding: 20px;

    }

    .modal-footer {

        padding: 18px 20px;

    }

    .empty-state {

        padding: 48px 20px;

    }

    .empty-state-icon {

        font-size: 52px;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .toast {

        top: 12px;

        left: 12px;
        right: 12px;

        padding: 14px 16px;

    }

    .modal {

        padding: 12px;

    }

    .modal-content {

        max-height: calc(100vh - 24px);

        border-radius: var(--radius-md);

    }

    .modal-header {

        padding: 16px;

    }

    .modal-body {

        padding: 16px;

    }

    .modal-footer {

        padding: 16px;

        flex-direction: column;

        align-items: stretch;

    }

    .modal-footer .btn {

        width: 100%;

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .toast,
    .modal,
    .modal-content,
    .modal-close,
    .tooltip::after,
    .progress-bar {

        transition: none !important;

    }

    .spinner,
    .skeleton::before {

        animation: none !important;

    }

}


/* =====================================================
   PRINT
===================================================== */

@media print {

    .toast,
    .modal,
    .loader {

        display: none !important;

    }

}


/* =====================================================
   END OF COMPONENTS.CSS v3.2
===================================================== */