/* ========================================
   Toast Notification System
   Minimal • Flat • Soft Colors • Elegant
   Best Practices Design
   ======================================== */

:root {
    /* Success - Soft Green */
    --toast-success-bg: #f0fdf4;
    --toast-success-border: #bbf7d0;
    --toast-success-text: #166534;
    --toast-success-icon: #22c55e;

    /* Error - Soft Red */
    --toast-error-bg: #fef2f2;
    --toast-error-border: #fecaca;
    --toast-error-text: #991b1b;
    --toast-error-icon: #ef4444;

    /* Warning - Soft Amber */
    --toast-warning-bg: #fffbeb;
    --toast-warning-border: #fde68a;
    --toast-warning-text: #92400e;
    --toast-warning-icon: #f59e0b;

    /* Info - Soft Blue */
    --toast-info-bg: #eff6ff;
    --toast-info-border: #bfdbfe;
    --toast-info-text: #1e40af;
    --toast-info-icon: #3b82f6;

    /* Neutral */
    --toast-neutral-bg: #f9fafb;
    --toast-neutral-border: #e5e7eb;
    --toast-neutral-text: #374151;
    --toast-neutral-icon: #6b7280;

    /* Base */
    --toast-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
                    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Container
   ======================================== */

.ui.toast-container {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
}

.ui.toast-container.top.right {
    top: 20px;
    right: 20px;
}

.ui.toast-container.top.left {
    top: 20px;
    left: 20px;
}

.ui.toast-container.top.center {
    left: 50%;
    transform: translate(-50%, 0);
    top: 20px;
}

.ui.toast-container.bottom.right {
    bottom: 20px;
    right: 20px;
}

.ui.toast-container.bottom.left {
    bottom: 20px;
    left: 20px;
}

.ui.toast-container.bottom.center {
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 20px;
}

/* ========================================
   Toast Box
   ======================================== */

.ui.toast-container .toast-box {
    pointer-events: auto;
    margin-bottom: 10px;
    width: 380px;
    max-width: calc(100vw - 40px);
}

.ui.toast-container .toast-box .ui.toast,
.ui.toast-container .toast-box .ui.message {
    margin: 0;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: var(--toast-shadow);
    border: 1px solid;
    transition: all 0.2s ease;
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
    overflow: hidden;
}

.ui.toast-container .toast-box .ui.toast:hover,
.ui.toast-container .toast-box .ui.message:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Icons
   ======================================== */

.ui.toast-container .toast-box .ui.toast > i.icon:not(.close),
.ui.toast-container .toast-box .ui.message > i.icon:not(.close) {
    position: relative !important;
    font-size: 18px;
    line-height: 1;
    margin: 0 !important;
    padding: 0;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

/* ========================================
   Content
   ======================================== */

.ui.toast-container .toast-box .ui.toast .content,
.ui.toast-container .toast-box .ui.message .content {
    flex: 1;
    padding: 0 !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ui.toast-container .toast-box .ui.toast .content > .header,
.ui.toast-container .toast-box .ui.message .content > .header {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    letter-spacing: -0.01em;
    color: inherit;
}

.ui.toast-container .toast-box .ui.toast .content > p,
.ui.toast-container .toast-box .ui.message .content > p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
    color: inherit;
}

/* Text without wrapper */
.ui.toast-container .toast-box .ui.toast,
.ui.toast-container .toast-box .ui.message {
    color: var(--toast-neutral-text);
}

/* ========================================
   Close Button
   ======================================== */

.ui.toast-container .toast-box .ui.toast .close.icon,
.ui.toast-container .toast-box .ui.message .close.icon {
    position: relative !important;
    top: unset !important;
    right: unset !important;
    margin: 0 !important;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0.5;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
}

.ui.toast-container .toast-box .ui.toast .close.icon:hover,
.ui.toast-container .toast-box .ui.message .close.icon:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

/* ========================================
   Progress Bar
   ======================================== */

.ui.toast-container .toast-box > .attached.progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    margin: 0;
    border-radius: 0 0 8px 8px;
    background: transparent;
    overflow: hidden;
}

.ui.toast-container .toast-box > .attached.progress.top {
    top: 0;
    bottom: unset;
    border-radius: 8px 8px 0 0;
}

.ui.toast-container .toast-box > .attached.progress .bar {
    height: 100%;
    border-radius: 0;
    transition: none;
    opacity: 0.6;
}

.ui.toast-container .toast-box .progressing {
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.ui.toast-container .toast-box .progressing.down {
    animation-name: progressDown;
}

.ui.toast-container .toast-box .progressing.up {
    animation-name: progressUp;
}

.ui.toast-container .toast-box:hover .pausable.progressing {
    animation-play-state: paused;
}

@keyframes progressDown {
    0% { width: 100%; }
    100% { width: 0%; }
}

@keyframes progressUp {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ========================================
   Toast Types - Success
   ======================================== */

.ui.toast-container .toast-box .ui.toast.success,
.ui.toast-container .toast-box .ui.message.success {
    background: var(--toast-success-bg);
    border-color: var(--toast-success-border);
    color: var(--toast-success-text) !important;
}

.ui.toast-container .toast-box .ui.toast.success > i.icon:not(.close),
.ui.toast-container .toast-box .ui.message.success > i.icon:not(.close) {
    color: var(--toast-success-icon);
}

.ui.toast-container .toast-box .ui.toast.success .close.icon,
.ui.toast-container .toast-box .ui.message.success .close.icon {
    color: var(--toast-success-text);
}

.ui.toast-container .toast-box > .attached.progress.success .bar {
    background: var(--toast-success-icon) !important;
}

/* ========================================
   Toast Types - Error
   ======================================== */

.ui.toast-container .toast-box .ui.toast.error,
.ui.toast-container .toast-box .ui.message.error {
    background: var(--toast-error-bg);
    border-color: var(--toast-error-border);
    color: var(--toast-error-text) !important;
}

.ui.toast-container .toast-box .ui.toast.error > i.icon:not(.close),
.ui.toast-container .toast-box .ui.message.error > i.icon:not(.close) {
    color: var(--toast-error-icon);
}

.ui.toast-container .toast-box .ui.toast.error .close.icon,
.ui.toast-container .toast-box .ui.message.error .close.icon {
    color: var(--toast-error-text);
}

.ui.toast-container .toast-box > .attached.progress.error .bar {
    background: var(--toast-error-icon) !important;
}

/* ========================================
   Toast Types - Warning
   ======================================== */

.ui.toast-container .toast-box .ui.toast.warning,
.ui.toast-container .toast-box .ui.message.warning {
    background: var(--toast-warning-bg);
    border-color: var(--toast-warning-border);
    color: var(--toast-warning-text) !important;
}

.ui.toast-container .toast-box .ui.toast.warning > i.icon:not(.close),
.ui.toast-container .toast-box .ui.message.warning > i.icon:not(.close) {
    color: var(--toast-warning-icon);
}

.ui.toast-container .toast-box .ui.toast.warning .close.icon,
.ui.toast-container .toast-box .ui.message.warning .close.icon {
    color: var(--toast-warning-text);
}

.ui.toast-container .toast-box > .attached.progress.warning .bar {
    background: var(--toast-warning-icon) !important;
}

/* ========================================
   Toast Types - Info
   ======================================== */

.ui.toast-container .toast-box .ui.toast.info,
.ui.toast-container .toast-box .ui.message.info {
    background: var(--toast-info-bg);
    border-color: var(--toast-info-border);
    color: var(--toast-info-text) !important;
}

.ui.toast-container .toast-box .ui.toast.info > i.icon:not(.close),
.ui.toast-container .toast-box .ui.message.info > i.icon:not(.close) {
    color: var(--toast-info-icon);
}

.ui.toast-container .toast-box .ui.toast.info .close.icon,
.ui.toast-container .toast-box .ui.message.info .close.icon {
    color: var(--toast-info-text);
}

.ui.toast-container .toast-box > .attached.progress.info .bar {
    background: var(--toast-info-icon) !important;
}

/* ========================================
   Toast Types - Neutral
   ======================================== */

.ui.toast-container .toast-box .ui.toast:not(.success):not(.error):not(.warning):not(.info),
.ui.toast-container .toast-box .ui.message:not(.success):not(.error):not(.warning):not(.info) {
    background: var(--toast-neutral-bg);
    border-color: var(--toast-neutral-border);
    color: var(--toast-neutral-text) !important;
}

.ui.toast-container .toast-box .ui.toast:not(.success):not(.error):not(.warning):not(.info) > i.icon:not(.close),
.ui.toast-container .toast-box .ui.message:not(.success):not(.error):not(.warning):not(.info) > i.icon:not(.close) {
    color: var(--toast-neutral-icon);
}

.ui.toast-container .toast-box .ui.toast:not(.success):not(.error):not(.warning):not(.info) .close.icon,
.ui.toast-container .toast-box .ui.message:not(.success):not(.error):not(.warning):not(.info) .close.icon {
    color: var(--toast-neutral-text);
}

/* ========================================
   Animations
   ======================================== */

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.ui.toast-container.right .toast-box {
    animation: toastSlideIn 0.3s ease-out;
}

.ui.toast-container.left .toast-box {
    animation: toastSlideIn 0.3s ease-out;
}

.ui.toast-container.left .toast-box {
    animation-name: toastSlideInLeft;
}

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

.ui.toast-container.top.center .toast-box,
.ui.toast-container.bottom.center .toast-box {
    animation: toastFadeIn 0.3s ease-out;
}

@keyframes toastFadeIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .ui.toast-container {
        left: 16px !important;
        right: 16px !important;
        top: 16px !important;
        transform: none !important;
    }

    .ui.toast-container.bottom {
        top: unset !important;
        bottom: 16px !important;
    }

    .ui.toast-container .toast-box {
        width: 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }

    .ui.toast-container .toast-box .ui.toast,
    .ui.toast-container .toast-box .ui.message {
        padding: 12px 14px;
        border-radius: 6px;
        gap: 10px;
    }

    .ui.toast-container .toast-box .ui.toast .content > .header,
    .ui.toast-container .toast-box .ui.message .content > .header {
        font-size: 13px;
    }

    .ui.toast-container .toast-box .ui.toast .content > p,
    .ui.toast-container .toast-box .ui.message .content > p {
        font-size: 12px;
    }

    .ui.toast-container .toast-box .ui.toast > i.icon:not(.close),
    .ui.toast-container .toast-box .ui.message > i.icon:not(.close) {
        font-size: 16px;
        width: 18px;
        height: 18px;
    }
}

/* ========================================
   Accessibility
   ======================================== */

.ui.toast-container .toast-box .ui.toast:focus,
.ui.toast-container .toast-box .ui.message:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ui.toast-container .toast-box .ui.toast:focus:not(:focus-visible),
.ui.toast-container .toast-box .ui.message:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .ui.toast-container .toast-box,
    .ui.toast-container .toast-box .ui.toast,
    .ui.toast-container .toast-box .ui.message {
        animation: none !important;
        transition: none !important;
    }

    .ui.toast-container .toast-box .ui.toast:hover,
    .ui.toast-container .toast-box .ui.message:hover {
        transform: none !important;
    }
}

/* ========================================
   Dark Mode
   ======================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --toast-success-bg: #14532d;
        --toast-success-border: #166534;
        --toast-success-text: #bbf7d0;
        --toast-success-icon: #4ade80;

        --toast-error-bg: #7f1d1d;
        --toast-error-border: #991b1b;
        --toast-error-text: #fecaca;
        --toast-error-icon: #f87171;

        --toast-warning-bg: #78350f;
        --toast-warning-border: #92400e;
        --toast-warning-text: #fde68a;
        --toast-warning-icon: #fbbf24;

        --toast-info-bg: #1e3a8a;
        --toast-info-border: #1e40af;
        --toast-info-text: #bfdbfe;
        --toast-info-icon: #60a5fa;

        --toast-neutral-bg: #1f2937;
        --toast-neutral-border: #374151;
        --toast-neutral-text: #e5e7eb;
        --toast-neutral-icon: #9ca3af;

        --toast-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3),
                        0 1px 2px -1px rgba(0, 0, 0, 0.3);
    }

    .ui.toast-container .toast-box .ui.toast .close.icon:hover,
    .ui.toast-container .toast-box .ui.message .close.icon:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* ========================================
   Print
   ======================================== */

@media print {
    .ui.toast-container {
        display: none !important;
    }
}