/**
 * GAS Notification System — Styles
 * Correspond aux classes de gas-notification.js
 * Utilise les design tokens --gas-* de config/gas-design-tokens.css
 */

/* ================================================================
   NOTIFICATIONS (toasts)
   ================================================================ */

.gas-notif-container {
    position: fixed;
    top: var(--gas-space-l, 20px);
    right: var(--gas-space-l, 20px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    max-width: 380px;
    gap: var(--gas-space-s, 8px);
}

.gas-notif {
    background: var(--gas-bg-surface, #fff);
    border-radius: var(--gas-toast-radius, 8px);
    box-shadow: var(--gas-toast-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
    padding: var(--gas-toast-padding, 12px 14px 14px);
    width: 100%;
    pointer-events: all;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(110%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gas-notif--show {
    opacity: 1;
    transform: translateX(0);
}

.gas-notif--hiding {
    opacity: 0;
    transform: translateX(110%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Header */
.gas-notif__header {
    display: flex;
    align-items: center;
    gap: var(--gas-space-s, 8px);
    margin-bottom: 4px;
}

.gas-notif__icon {
    font-size: var(--gas-text-m, 15px);
    line-height: 1;
    flex-shrink: 0;
}

.gas-notif__title {
    font-weight: var(--gas-weight-semi, 600);
    font-size: var(--gas-text-s, 13px);
    color: var(--gas-neutral-900, #1d2327);
    flex: 1;
}

.gas-notif__close {
    background: none;
    border: none;
    color: var(--gas-neutral-400, #999);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--gas-radius-s, 4px);
    flex-shrink: 0;
    transition: color var(--gas-transition-fast, 0.15s), background var(--gas-transition-fast, 0.15s);
}

.gas-notif__close:hover {
    color: var(--gas-neutral-800, #333);
    background: var(--gas-neutral-100, #f0f0f1);
}

/* Body */
.gas-notif__body {
    font-size: var(--gas-text-xs, 12px);
    color: var(--gas-neutral-500, #646970);
    line-height: var(--gas-leading-normal, 1.5);
    padding-left: 23px;
}

/* Progress bar */
.gas-notif__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.07);
}

.gas-notif__progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
}

.gas-notif__progress-bar--active {
    animation: gas-notif-progress var(--gas-notif-duration, 5000ms) linear forwards;
}

@keyframes gas-notif-progress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Types — bordure gauche + couleur progress */
.gas-notif--info {
    border-left: 3px solid var(--gas-info, #2196f3);
}
.gas-notif--info .gas-notif__progress-bar {
    background: var(--gas-info, #2196f3);
}

.gas-notif--success {
    border-left: 3px solid var(--gas-success, #4caf50);
}
.gas-notif--success .gas-notif__progress-bar {
    background: var(--gas-success, #4caf50);
}

.gas-notif--error {
    border-left: 3px solid var(--gas-danger, #f44336);
}
.gas-notif--error .gas-notif__progress-bar {
    background: var(--gas-danger, #f44336);
}

.gas-notif--warning {
    border-left: 3px solid var(--gas-warning, #ffc107);
}
.gas-notif--warning .gas-notif__progress-bar {
    background: var(--gas-warning, #ffc107);
}

.gas-notif--loading {
    border-left: 3px solid var(--gas-secondary, #9c27b0);
}
.gas-notif--loading .gas-notif__progress-bar {
    background: var(--gas-secondary, #9c27b0);
}


/* ================================================================
   MODAL OVERLAY + PANEL
   ================================================================ */

.gas-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: var(--gas-bg-overlay, rgba(0, 0, 0, 0.5));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    opacity: 0;
    transition: opacity 0.25s ease;
    overflow-y: auto;
    pointer-events: auto;
}

.gas-modal-overlay--show {
    opacity: 1;
}

.gas-modal-overlay--hiding {
    opacity: 0;
}

/* Panel */
.gas-modal-panel {
    background: var(--gas-bg-surface, #fff);
    border-radius: var(--gas-radius-l, 10px);
    box-shadow: var(--gas-shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.2));
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    transform: translateY(-12px) scale(0.98);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.gas-modal-overlay--show .gas-modal-panel {
    transform: translateY(0) scale(1);
}

/* Tailles */
.gas-modal-panel--sm { max-width: 420px; }
.gas-modal-panel--md { max-width: 620px; }
.gas-modal-panel--lg { max-width: 860px; }
.gas-modal-panel--xl { max-width: 1100px; }

/* Header */
.gas-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gas-space-m, 16px) var(--gas-space-l, 20px);
    border-bottom: var(--gas-border-width, 1px) solid var(--gas-border-color, #e0e0e0);
    flex-shrink: 0;
}

.gas-modal-title {
    margin: 0;
    font-size: var(--gas-text-m, 15px);
    font-weight: var(--gas-weight-semi, 600);
    color: var(--gas-neutral-900, #1d2327);
}

.gas-modal-close-btn {
    background: none;
    border: none;
    color: var(--gas-neutral-500, #787c82);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--gas-radius-s, 4px);
    transition: color var(--gas-transition-fast, 0.15s), background var(--gas-transition-fast, 0.15s);
    flex-shrink: 0;
}

.gas-modal-close-btn:hover {
    color: var(--gas-danger, #d63638);
    background: var(--gas-danger-light, #fce4e4);
}

/* Body */
.gas-modal-body {
    padding: var(--gas-space-l, 20px);
    overflow-y: auto;
    flex: 1;
}

/* Footer */
.gas-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gas-space-s, 8px);
    padding: var(--gas-space-m, 14px) var(--gas-space-l, 20px);
    border-top: var(--gas-border-width, 1px) solid var(--gas-border-color, #e0e0e0);
    flex-shrink: 0;
    background: var(--gas-bg-surface-alt, #fafafa);
}

/* Boutons modal */
.gas-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--gas-btn-sm-padding-y, 7px) var(--gas-btn-padding-x, 16px);
    border-radius: var(--gas-btn-radius, 5px);
    border: var(--gas-border-width, 1px) solid transparent;
    font-size: var(--gas-btn-font-size, 13px);
    font-weight: var(--gas-btn-font-weight, 500);
    cursor: pointer;
    transition: all var(--gas-transition-fast, 0.15s) ease;
    line-height: 1.5;
}

.gas-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button.gas-modal-btn.gas-modal-btn--primary {
    background: var(--gas-primary, #0073aa) !important;
    color: var(--gas-white, #fff) !important;
    border-color: var(--gas-primary, #0073aa) !important;
}
button.gas-modal-btn.gas-modal-btn--primary:hover:not(:disabled) {
    background: var(--gas-primary-dark, #005a87) !important;
}

button.gas-modal-btn.gas-modal-btn--secondary {
    background: var(--gas-neutral-100, #f0f0f1) !important;
    color: var(--gas-neutral-600, #646970) !important;
    border-color: var(--gas-neutral-300, #c3c4c7) !important;
}
button.gas-modal-btn.gas-modal-btn--secondary:hover:not(:disabled) {
    background: var(--gas-neutral-200, #dcdcde) !important;
    color: var(--gas-neutral-800, #2c3338) !important;
}

button.gas-modal-btn.gas-modal-btn--danger {
    background: var(--gas-danger, #d63638) !important;
    color: var(--gas-white, #fff) !important;
    border-color: var(--gas-danger, #d63638) !important;
}
button.gas-modal-btn.gas-modal-btn--danger:hover:not(:disabled) {
    background: var(--gas-danger-dark, #b32d2e) !important;
}

button.gas-modal-btn.gas-modal-btn--warning {
    background: var(--gas-warning, #dba617) !important;
    color: var(--gas-white, #fff) !important;
    border-color: var(--gas-warning, #dba617) !important;
}
button.gas-modal-btn.gas-modal-btn--warning:hover:not(:disabled) {
    background: var(--gas-warning-dark, #c09800) !important;
}

button.gas-modal-btn.gas-modal-btn--success {
    background: var(--gas-success, #00a32a) !important;
    color: var(--gas-white, #fff) !important;
    border-color: var(--gas-success, #00a32a) !important;
}
button.gas-modal-btn.gas-modal-btn--success:hover:not(:disabled) {
    background: var(--gas-success-dark, #008a20) !important;
}


/* ================================================================
   DIALOGS (confirm / prompt / alert)
   ================================================================ */

.gas-dialog__message {
    margin: 0 0 var(--gas-space-m, 12px);
    font-size: var(--gas-text-m, 14px);
    color: var(--gas-neutral-800, #2c3338);
    line-height: var(--gas-leading-relaxed, 1.6);
}

.gas-dialog__detail {
    margin: 0;
    font-size: var(--gas-text-xs, 12px);
    color: var(--gas-neutral-500, #646970);
    line-height: var(--gas-leading-normal, 1.5);
}

.gas-dialog__input {
    width: 100%;
    margin-top: var(--gas-space-s, 8px);
    padding: var(--gas-input-padding, 8px 10px);
    border: var(--gas-border-width, 1px) solid var(--gas-input-border, #8c8f94);
    border-radius: var(--gas-input-radius, 4px);
    font-size: var(--gas-input-font-size, 14px);
    color: var(--gas-input-color, #2c3338);
    box-sizing: border-box;
    transition: border-color var(--gas-transition-fast, 0.15s), box-shadow var(--gas-transition-fast, 0.15s);
}

.gas-dialog__input:focus {
    border-color: var(--gas-input-focus-border, #0073aa);
    box-shadow: var(--gas-input-focus-shadow, 0 0 0 1px #0073aa);
    outline: none;
}

.gas-dialog__textarea {
    resize: vertical;
    min-height: 80px;
    font-family: var(--gas-font-family, inherit);
}


/* ================================================================
   IMAGE VIEWER
   ================================================================ */

/* Overlay override — centrer au viewport */
.gas-modal-overlay--imageviewer {
    align-items: center !important;
    justify-content: center !important;
    padding: var(--gas-space-l, 20px) !important;
    overflow: hidden !important;
}

.gas-modal-overlay--imageviewer .gas-modal-panel {
    max-height: calc(100vh - 40px);
    margin: 0 auto;
    width: auto;
    max-width: 95vw;
}

/* Override background for imageviewer — dark */
.gas-modal-overlay--imageviewer {
    background: rgba(0, 0, 0, 0.9) !important;
}

/* Header thème sombre */
.gas-modal-overlay--imageviewer .gas-modal-header {
    background: var(--gas-neutral-900, #1a1a1a);
    border-bottom-color: var(--gas-neutral-700, #333);
    padding: var(--gas-space-s, 12px) var(--gas-space-l, 20px);
}

.gas-modal-overlay--imageviewer .gas-modal-title {
    color: var(--gas-white, #fff);
}

.gas-modal-overlay--imageviewer .gas-modal-close-btn {
    color: rgba(255, 255, 255, 0.6);
}

.gas-modal-overlay--imageviewer .gas-modal-close-btn:hover {
    color: var(--gas-white, #fff);
    background: rgba(255, 255, 255, 0.15);
}

/* Image container */
.gas-imgviewer-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: var(--gas-space-m, 16px);
    box-sizing: border-box;
    position: relative;
}

.gas-imgviewer-img {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    height: auto;
    border-radius: var(--gas-radius-s, 4px);
    object-fit: contain;
    transition: opacity 0.2s ease;
}

/* Navigation arrows */
.gas-imgviewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    color: var(--gas-white, #fff);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: var(--gas-radius-full, 50%);
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--gas-transition-normal, 0.2s);
    backdrop-filter: blur(4px);
}

.gas-imgviewer-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.gas-imgviewer-nav--prev {
    left: var(--gas-space-s, 8px);
}

.gas-imgviewer-nav--next {
    right: var(--gas-space-s, 8px);
}

/* Bottom toolbar */
.gas-imgviewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gas-space-m, 12px);
    padding: var(--gas-space-s, 10px) var(--gas-space-m, 16px);
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.gas-imgviewer-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--gas-text-s, 13px);
    margin-right: auto;
}

/* Action buttons */
.gas-imgviewer-action {
    background: rgba(255, 255, 255, 0.15);
    color: var(--gas-white, #fff);
    border: none;
    padding: 6px var(--gas-space-m, 14px);
    border-radius: var(--gas-radius-m, 6px);
    font-size: var(--gas-text-s, 13px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background var(--gas-transition-fast, 0.15s);
    backdrop-filter: blur(4px);
}

.gas-imgviewer-action:hover {
    background: rgba(255, 255, 255, 0.3);
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 600px) {
    /* Notifications */
    .gas-notif-container {
        top: var(--gas-space-s, 10px);
        right: var(--gas-space-s, 8px);
        left: var(--gas-space-s, 8px);
        max-width: none;
    }

    /* Modals */
    .gas-modal-overlay {
        padding: var(--gas-space-s, 10px) var(--gas-space-s, 8px);
        align-items: flex-end;
    }

    .gas-modal-panel {
        border-radius: var(--gas-radius-l, 10px) var(--gas-radius-l, 10px) 0 0;
        max-height: 92vh;
    }

    .gas-modal-panel--sm,
    .gas-modal-panel--md,
    .gas-modal-panel--lg,
    .gas-modal-panel--xl {
        max-width: 100%;
    }

    /* Image viewer */
    .gas-modal-overlay--imageviewer {
        padding: 0;
        align-items: center;
    }

    .gas-modal-overlay--imageviewer .gas-modal-panel {
        border-radius: 0;
        max-height: 100vh;
    }

    .gas-imgviewer-toolbar {
        flex-wrap: wrap;
        gap: var(--gas-space-s, 8px);
        padding: var(--gas-space-s, 8px) var(--gas-space-s, 12px);
    }

    .gas-imgviewer-action {
        padding: 5px var(--gas-space-s, 10px);
        font-size: var(--gas-text-xs, 12px);
    }

    .gas-imgviewer-nav {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }
}