/* ====================================================================
   IO MODAL SYSTEM - Popup & Confirm Dialog Styles
   Unified styling for IOPopup and IOConfirm components
   ==================================================================== */

/* ====================================================================
   BASE MODAL CONTAINER
   ==================================================================== */

.io-modal {
    background: var(--io-surface-raised);
    position: relative;
}

/* ====================================================================
   MODAL BODY - Main content wrapper
   ==================================================================== */

.io-modal-body {
    padding: var(--io-space-lg);
}

/* ====================================================================
   HEADER SECTION - Icon + Title + Message
   ==================================================================== */

.io-modal-header {
    display: flex;
    align-items: flex-start;
    gap: var(--io-space-md);
    margin-bottom: var(--io-space-lg);
}

.io-modal-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.io-modal-content {
    flex: 1;
}

.io-modal-title {
    font-size: var(--io-text-base);
    color: var(--io-text-primary);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--io-space-xs);
    font-weight: normal;
}

.io-modal-message {
    font-size: var(--io-text-sm);
    color: var(--io-text-secondary);
    line-height: 1.6;
}

/* ====================================================================
   DETAIL SECTION - Technical/debug info
   ==================================================================== */

.io-modal-detail {
    padding: var(--io-space-sm);
    background: var(--io-surface-sunken);
    border-left: 2px solid var(--io-border);
    font-size: var(--io-text-xs);
    color: var(--io-text-tertiary);
    font-family: var(--io-font-primary);
    margin-top: var(--io-space-md);
    margin-bottom: var(--io-space-lg);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ====================================================================
   ACTION BUTTONS - Cancel/Confirm/OK
   ==================================================================== */

.io-modal-actions {
    display: flex;
    gap: var(--io-space-sm);
    padding-top: var(--io-space-md);
    position: relative;
}

/* Top separator fade border */
.io-modal-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 20%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(var(--io-border-fade-base), 0.3) 10%,
        rgba(var(--io-border-fade-base), 0.6) 50%,
        rgba(var(--io-border-fade-base), 0.3) 90%,
        transparent 100%
    );
}

.io-modal-btn {
    flex: 1;
    padding: 8px var(--io-space-md);
    border: 1px solid var(--io-border);
    border-left: 2px solid var(--io-border);
    background: transparent;
    color: var(--io-text-secondary);
    font-size: var(--io-text-sm);
    cursor: pointer;
    transition: all var(--io-transition-base);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    font-family: var(--io-font-primary);
    font-weight: normal;
}

.io-modal-btn:hover {
    background: var(--io-surface-hover);
    border-left-color: var(--io-accent);
}

/* ====================================================================
   TYPE: INFO - Default notification
   ==================================================================== */

.io-modal-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 217, 255, 0.3) 15%,
        rgba(0, 217, 255, 0.6) 50%,
        rgba(0, 217, 255, 0.3) 85%,
        transparent 100%
    );
}

.io-modal-info .io-modal-icon {
    background: rgba(0, 217, 255, 0.1);
    border-left: 2px solid var(--io-info);
    color: var(--io-info);
}

.io-modal-info .io-modal-detail {
    border-left-color: var(--io-info);
}

.io-modal-info .io-modal-btn {
    border-color: var(--io-info);
    background: rgba(0, 217, 255, 0.1);
    color: var(--io-info);
}

.io-modal-info .io-modal-btn:hover {
    background: var(--io-info);
    color: #000000;
    border-left-color: var(--io-info);
}

/* ====================================================================
   TYPE: SUCCESS - Operation complete
   ==================================================================== */

.io-modal-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 255, 65, 0.3) 15%,
        rgba(0, 255, 65, 0.6) 50%,
        rgba(0, 255, 65, 0.3) 85%,
        transparent 100%
    );
}

.io-modal-success .io-modal-icon {
    background: rgba(0, 255, 65, 0.1);
    border-left: 2px solid var(--io-success);
    color: var(--io-success);
}

.io-modal-success .io-modal-detail {
    border-left-color: var(--io-success);
}

.io-modal-success .io-modal-btn {
    border-color: var(--io-success);
    background: rgba(0, 255, 65, 0.1);
    color: var(--io-success);
}

.io-modal-success .io-modal-btn:hover {
    background: var(--io-success);
    color: #000000;
    border-left-color: var(--io-success);
}

/* ====================================================================
   TYPE: WARNING - Caution required
   ==================================================================== */

.io-modal-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 204, 0, 0.3) 15%,
        rgba(255, 204, 0, 0.6) 50%,
        rgba(255, 204, 0, 0.3) 85%,
        transparent 100%
    );
}

.io-modal-warning .io-modal-icon {
    background: rgba(255, 204, 0, 0.1);
    border-left: 2px solid var(--io-warning);
    color: var(--io-warning);
}

.io-modal-warning .io-modal-detail {
    border-left-color: var(--io-warning);
}

.io-modal-warning .io-modal-btn {
    border-color: var(--io-warning);
    background: rgba(255, 204, 0, 0.1);
    color: var(--io-warning);
}

.io-modal-warning .io-modal-btn:hover {
    background: var(--io-warning);
    color: #000000;
    border-left-color: var(--io-warning);
}

/* ====================================================================
   TYPE: ERROR - Critical alert
   ==================================================================== */

.io-modal-error::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 0, 81, 0.3) 15%,
        rgba(255, 0, 81, 0.8) 50%,
        rgba(255, 0, 81, 0.3) 85%,
        transparent 100%
    );
}

.io-modal-error .io-modal-icon {
    background: rgba(255, 0, 81, 0.1);
    border-left: 2px solid var(--io-error);
    color: var(--io-error);
}

.io-modal-error .io-modal-detail {
    border-left-color: var(--io-error);
}

.io-modal-error .io-modal-btn {
    border-color: var(--io-error);
    background: rgba(255, 0, 81, 0.1);
    color: var(--io-error);
}

.io-modal-error .io-modal-btn:hover {
    background: var(--io-error);
    color: #ffffff;
    border-left-color: var(--io-error);
}

/* ====================================================================
   TYPE: CONFIRM - Destructive action (uses warning style + danger btn)
   ==================================================================== */

.io-modal-confirm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 204, 0, 0.3) 15%,
        rgba(255, 204, 0, 0.6) 50%,
        rgba(255, 204, 0, 0.3) 85%,
        transparent 100%
    );
}

.io-modal-confirm .io-modal-icon {
    background: rgba(255, 204, 0, 0.1);
    border-left: 2px solid var(--io-warning);
    color: var(--io-warning);
}

.io-modal-confirm .io-modal-detail {
    border-left-color: var(--io-border);
}

.io-modal-confirm .io-modal-btn {
    border-color: var(--io-border);
    background: transparent;
    color: var(--io-text-secondary);
}

.io-modal-confirm .io-modal-btn:hover {
    background: var(--io-surface-hover);
    border-left-color: var(--io-accent);
}

/* Danger button (confirm action) */
.io-modal-btn-danger {
    background: var(--io-accent);
    color: #ffffff;
    border-color: var(--io-accent);
    border-left-color: var(--io-accent);
}

.io-modal-btn-danger:hover {
      border-color: var(--io-accent);

}

/* ====================================================================
   SINGLE BUTTON LAYOUT - Full width for popup modals
   ==================================================================== */

.io-modal-actions .io-modal-btn:only-child {
    flex: 1;
}