/**
 * Nature Index - Modal & Dialog Styles
 * Modals, dialogs, popovers, toasts
 * =====================================
 */

/* ========================================
   Modal Base
   ======================================== */

.ni-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--ni-z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ni-transition-normal), visibility var(--ni-transition-normal);
}

.ni-modal-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.ni-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ni-space-4);
    z-index: var(--ni-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ni-transition-normal), visibility var(--ni-transition-normal);
}

.ni-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.ni-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - var(--ni-space-8));
    background-color: var(--ni-bg-surface);
    border-radius: var(--ni-radius-xl);
    box-shadow: var(--ni-shadow-2xl);
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(-20px);
    transition: transform var(--ni-transition-normal);
}

.ni-modal.is-open .ni-modal-dialog {
    transform: scale(1) translateY(0);
}

/* Modal Sizes */
.ni-modal-sm .ni-modal-dialog { max-width: 400px; }
.ni-modal-lg .ni-modal-dialog { max-width: 700px; }
.ni-modal-xl .ni-modal-dialog { max-width: 900px; }
.ni-modal-full .ni-modal-dialog { 
    max-width: calc(100vw - var(--ni-space-8)); 
    max-height: calc(100vh - var(--ni-space-8));
}

/* Modal Header */
.ni-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ni-space-5) var(--ni-space-6);
    border-bottom: 1px solid var(--ni-border-color);
}

.ni-modal-title {
    font-size: var(--ni-text-xl);
    font-weight: var(--ni-font-semibold);
    margin: 0;
}

.ni-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--ni-radius-md);
    color: var(--ni-text-muted);
    font-size: var(--ni-text-xl);
    cursor: pointer;
    transition: var(--ni-transition-colors);
}

.ni-modal-close:hover {
    background-color: var(--ni-gray-100);
    color: var(--ni-text-primary);
}

/* Modal Body */
.ni-modal-body {
    flex: 1;
    padding: var(--ni-space-6);
    overflow-y: auto;
}

/* Modal Footer */
.ni-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ni-space-3);
    padding: var(--ni-space-4) var(--ni-space-6);
    border-top: 1px solid var(--ni-border-color);
    background-color: var(--ni-gray-50);
    border-radius: 0 0 var(--ni-radius-xl) var(--ni-radius-xl);
}

/* ========================================
   Confirmation Dialog
   ======================================== */

.ni-confirm-dialog .ni-modal-body {
    text-align: center;
    padding: var(--ni-space-8) var(--ni-space-6);
}

.ni-confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ni-space-5);
    border-radius: var(--ni-radius-full);
    font-size: var(--ni-text-3xl);
}

.ni-confirm-icon-warning {
    background-color: var(--ni-warning-light);
    color: var(--ni-warning);
}

.ni-confirm-icon-danger {
    background-color: var(--ni-danger-light);
    color: var(--ni-danger);
}

.ni-confirm-icon-success {
    background-color: var(--ni-success-light);
    color: var(--ni-success);
}

.ni-confirm-icon-info {
    background-color: var(--ni-info-light);
    color: var(--ni-info);
}

.ni-confirm-title {
    font-size: var(--ni-text-xl);
    font-weight: var(--ni-font-semibold);
    margin-bottom: var(--ni-space-3);
}

.ni-confirm-message {
    color: var(--ni-text-secondary);
    max-width: 400px;
    margin: 0 auto;
}

.ni-confirm-dialog .ni-modal-footer {
    justify-content: center;
}

/* ========================================
   Toast Notifications
   ======================================== */

.ni-toast-container {
    position: fixed;
    z-index: var(--ni-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ni-space-3);
    max-width: 400px;
    pointer-events: none;
}

/* Position variants */
.ni-toast-container-top-right {
    top: var(--ni-space-6);
    right: var(--ni-space-6);
}

.ni-toast-container-top-left {
    top: var(--ni-space-6);
    left: var(--ni-space-6);
}

.ni-toast-container-bottom-right {
    bottom: var(--ni-space-6);
    right: var(--ni-space-6);
}

.ni-toast-container-bottom-left {
    bottom: var(--ni-space-6);
    left: var(--ni-space-6);
}

.ni-toast-container-top-center {
    top: var(--ni-space-6);
    left: 50%;
    transform: translateX(-50%);
}

.ni-toast-container-bottom-center {
    bottom: var(--ni-space-6);
    left: 50%;
    transform: translateX(-50%);
}

/* Toast */
.ni-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ni-space-3);
    padding: var(--ni-space-4);
    background-color: var(--ni-bg-surface);
    border-radius: var(--ni-radius-lg);
    box-shadow: var(--ni-shadow-lg);
    border-left: 4px solid var(--ni-primary);
    pointer-events: auto;
    animation: ni-toast-in 0.3s ease forwards;
}

.ni-toast.is-leaving {
    animation: ni-toast-out 0.3s ease forwards;
}

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

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

.ni-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ni-radius-full);
    font-size: var(--ni-text-sm);
}

.ni-toast-content {
    flex: 1;
    min-width: 0;
}

.ni-toast-title {
    font-weight: var(--ni-font-semibold);
    margin-bottom: var(--ni-space-1);
}

.ni-toast-message {
    font-size: var(--ni-text-sm);
    color: var(--ni-text-secondary);
}

.ni-toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--ni-radius-md);
    color: var(--ni-text-muted);
    cursor: pointer;
    transition: var(--ni-transition-colors);
}

.ni-toast-close:hover {
    background-color: var(--ni-gray-100);
    color: var(--ni-text-primary);
}

/* Toast variants */
.ni-toast-success {
    border-left-color: var(--ni-success);
}

.ni-toast-success .ni-toast-icon {
    background-color: var(--ni-success-light);
    color: var(--ni-success);
}

.ni-toast-warning {
    border-left-color: var(--ni-warning);
}

.ni-toast-warning .ni-toast-icon {
    background-color: var(--ni-warning-light);
    color: var(--ni-warning);
}

.ni-toast-danger {
    border-left-color: var(--ni-danger);
}

.ni-toast-danger .ni-toast-icon {
    background-color: var(--ni-danger-light);
    color: var(--ni-danger);
}

.ni-toast-info {
    border-left-color: var(--ni-info);
}

.ni-toast-info .ni-toast-icon {
    background-color: var(--ni-info-light);
    color: var(--ni-info);
}

/* ========================================
   Dropdown Menu
   ======================================== */

.ni-dropdown {
    position: relative;
    display: inline-block;
}

.ni-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    padding: var(--ni-space-2);
    background-color: var(--ni-bg-surface);
    border-radius: var(--ni-radius-lg);
    box-shadow: var(--ni-shadow-lg);
    z-index: var(--ni-z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--ni-transition-fast), 
                transform var(--ni-transition-fast),
                visibility var(--ni-transition-fast);
}

.ni-dropdown.is-open .ni-dropdown-menu,
.ni-dropdown:focus-within .ni-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown alignment */
.ni-dropdown-menu-right {
    left: auto;
    right: 0;
}

.ni-dropdown-menu-center {
    left: 50%;
    transform: translateX(-50%) translateY(8px);
}

.ni-dropdown.is-open .ni-dropdown-menu-center {
    transform: translateX(-50%) translateY(0);
}

/* Dropdown items */
.ni-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ni-space-3);
    width: 100%;
    padding: var(--ni-space-2) var(--ni-space-3);
    font-size: var(--ni-text-sm);
    color: var(--ni-text-primary);
    background: none;
    border: none;
    border-radius: var(--ni-radius-md);
    text-align: left;
    cursor: pointer;
    transition: var(--ni-transition-colors);
    text-decoration: none;
}

.ni-dropdown-item:hover {
    background-color: var(--ni-gray-100);
    color: var(--ni-primary);
    text-decoration: none;
}

.ni-dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--ni-text-muted);
}

.ni-dropdown-item:hover i {
    color: var(--ni-primary);
}

.ni-dropdown-item-danger {
    color: var(--ni-danger);
}

.ni-dropdown-item-danger:hover {
    background-color: var(--ni-danger-light);
    color: var(--ni-danger);
}

.ni-dropdown-item-danger i {
    color: var(--ni-danger);
}

/* Dropdown divider */
.ni-dropdown-divider {
    height: 1px;
    margin: var(--ni-space-2) 0;
    background-color: var(--ni-border-color);
}

/* Dropdown header */
.ni-dropdown-header {
    padding: var(--ni-space-2) var(--ni-space-3);
    font-size: var(--ni-text-xs);
    font-weight: var(--ni-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ni-tracking-wider);
    color: var(--ni-text-muted);
}

/* ========================================
   Popover
   ======================================== */

.ni-popover {
    position: absolute;
    z-index: var(--ni-z-popover);
    max-width: 320px;
    background-color: var(--ni-bg-surface);
    border-radius: var(--ni-radius-lg);
    box-shadow: var(--ni-shadow-lg);
    border: 1px solid var(--ni-border-color);
}

.ni-popover-header {
    padding: var(--ni-space-3) var(--ni-space-4);
    border-bottom: 1px solid var(--ni-border-color);
    font-weight: var(--ni-font-semibold);
}

.ni-popover-body {
    padding: var(--ni-space-4);
}

/* Popover arrow */
.ni-popover-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--ni-bg-surface);
    border: 1px solid var(--ni-border-color);
    transform: rotate(45deg);
}

.ni-popover-top .ni-popover-arrow {
    bottom: -7px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.ni-popover-bottom .ni-popover-arrow {
    top: -7px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

/* ========================================
   Offcanvas / Drawer
   ======================================== */

.ni-offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: var(--ni-z-modal);
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: 100%;
    background-color: var(--ni-bg-surface);
    box-shadow: var(--ni-shadow-2xl);
    transition: transform var(--ni-transition-normal);
}

.ni-offcanvas-start {
    left: 0;
    transform: translateX(-100%);
}

.ni-offcanvas-end {
    right: 0;
    transform: translateX(100%);
}

.ni-offcanvas.is-open {
    transform: translateX(0);
}

.ni-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ni-space-4) var(--ni-space-5);
    border-bottom: 1px solid var(--ni-border-color);
}

.ni-offcanvas-title {
    font-size: var(--ni-text-lg);
    font-weight: var(--ni-font-semibold);
    margin: 0;
}

.ni-offcanvas-body {
    flex: 1;
    padding: var(--ni-space-5);
    overflow-y: auto;
}

.ni-offcanvas-footer {
    padding: var(--ni-space-4) var(--ni-space-5);
    border-top: 1px solid var(--ni-border-color);
}