/**
 * sfUI - Unified UI Component Library
 * Version 1.0.0
 * Copyright (c) 2025
 */

/* ===========================
   Core Styles
   =========================== */

/* Shake Animation for locked dialogs */
@keyframes sfui-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes sfui-shake-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.sfui-shake {
    animation: sfui-shake 0.5s ease-in-out;
}

.sfui-shake-scale {
    animation: sfui-shake-scale 0.3s ease-in-out;
}

:root,
[data-bs-theme="light"],
[data-theme="light"] {
    --sfui-primary: #0d6efd;
    --sfui-secondary: #6c757d;
    --sfui-success: #198754;
    --sfui-danger: #dc3545;
    --sfui-warning: #ffc107;
    --sfui-info: #0dcaf0;
    --sfui-light: #f8f9fa;
    --sfui-dark: #212529;

    --sfui-body-bg: #ffffff;
    --sfui-body-color: #212529;
    --sfui-border-color: #dee2e6;
    --sfui-modal-bg: #ffffff;
    --sfui-modal-color: #212529;
    --sfui-overlay-bg: rgba(0, 0, 0, 0.5);
    --sfui-input-bg: #ffffff;
    --sfui-input-color: #212529;
    --sfui-input-border: #dee2e6;

    --sfui-transition: 0.3s ease;
    --sfui-border-radius: 0.375rem;
    --sfui-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --sfui-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

[data-bs-theme="dark"],
[data-theme="dark"] {
    --sfui-primary: #0d6efd;
    --sfui-secondary: #6c757d;
    --sfui-success: #198754;
    --sfui-danger: #dc3545;
    --sfui-warning: #ffc107;
    --sfui-info: #0dcaf0;
    --sfui-light: #f8f9fa;
    --sfui-dark: #212529;

    --sfui-body-bg: #212529;
    --sfui-body-color: #dee2e6;
    --sfui-border-color: #495057;
    --sfui-modal-bg: #2d3338;
    --sfui-modal-color: #dee2e6;
    --sfui-overlay-bg: rgba(0, 0, 0, 0.7);
    --sfui-input-bg: #212529;
    --sfui-input-color: #dee2e6;
    --sfui-input-border: #495057;

    --sfui-transition: 0.3s ease;
    --sfui-border-radius: 0.375rem;
    --sfui-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    --sfui-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
}

/* ===========================
   Alert Module Styles
   =========================== */

.sfui-alert-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sfui-alert-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--sfui-transition);
    pointer-events: none;
    z-index: 10050;
}

.sfui-alert-modal.sfui-active {
    opacity: 1;
    pointer-events: all;
}

.sfui-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity var(--sfui-transition);
    z-index: 10049;
    pointer-events: none;
}

.sfui-alert-overlay.sfui-active {
    opacity: 1;
    pointer-events: all;
}

.sfui-alert-dialog {
    position: relative;
    background: var(--sfui-modal-bg);
    color: var(--sfui-modal-color);
    border-radius: var(--sfui-border-radius);
    box-shadow: var(--sfui-shadow);
    max-width: 500px;
    width: 90%;
    margin: auto;
    transform: scale(0.7);
    transition: transform var(--sfui-transition);
    z-index: 10051;
}

.sfui-alert-modal.sfui-active .sfui-alert-dialog {
    transform: scale(1);
}

.sfui-alert-dialog-top {
    margin-top: 0;
}

.sfui-alert-content {
    padding: 2rem 1.5rem;
}

.sfui-alert-icon {
    text-align: center;
    margin-bottom: 1rem;
}

.sfui-alert-icon.text-warning { color: var(--sfui-warning); }
.sfui-alert-icon.text-danger { color: var(--sfui-danger); }
.sfui-alert-icon.text-info { color: var(--sfui-info); }
.sfui-alert-icon.text-success { color: var(--sfui-success); }

.sfui-alert-message {
    text-align: center;
    margin: 1rem 0 1.5rem;
    word-break: break-word;
}

.sfui-alert-buttons {
    text-align: center;
}

.sfui-alert-input-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.sfui-alert-validation {
    color: var(--sfui-danger);
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 0.5rem;
    min-height: 1.2rem;
}

/* ===========================
   Modal Module Styles
   =========================== */

.sfui-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10040;
    pointer-events: none; /* Modal layer doesn't block clicks - only dialog does */
}

.sfui-modal.sfui-active {
    display: flex;
}

.sfui-modal.sfui-fade {
    transition: opacity var(--sfui-transition);
}

.sfui-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    z-index: 10039;
    pointer-events: auto; /* Backdrop catches clicks for closing modal */
}

.sfui-modal-backdrop.sfui-active {
    opacity: 1;
}

.sfui-modal-dialog {
    position: relative;
    width: auto;
    max-width: 500px;
    margin: 1.75rem auto;
    pointer-events: none; /* Dialog wrapper doesn't block clicks - only content does */
    transition: margin 0.3s ease;
}

.sfui-modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

.sfui-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto; /* Only the content itself receives clicks */
    background-color: var(--sfui-modal-bg);
    color: var(--sfui-modal-color);
    background-clip: padding-box;
    border: 1px solid var(--sfui-border-color);
    border-radius: var(--sfui-border-radius);
    outline: 0;
    box-shadow: var(--sfui-shadow);
    z-index: 10041;
}

.sfui-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--sfui-border-color);
    border-top-left-radius: var(--sfui-border-radius);
    border-top-right-radius: var(--sfui-border-radius);
}

.sfui-modal-title {
    margin: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}

.sfui-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.sfui-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid var(--sfui-border-color);
    border-bottom-right-radius: var(--sfui-border-radius);
    border-bottom-left-radius: var(--sfui-border-radius);
    gap: 0.5rem;
}

/* ===========================
   LightBox Module Styles
   =========================== */

.sfui-lightbox-overlay {
    opacity: 0;
    transition: opacity var(--sfui-transition);
    z-index: 10030;
}

.sfui-lightbox-container {
    position: relative;
    z-index: 10031;
}

.sfui-lightbox-image {
    object-fit: contain;
}

.sfui-lightbox-caption {
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--sfui-border-radius);
}

.sfui-lightbox-close:hover,
.sfui-lightbox-prev:hover,
.sfui-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--sfui-border-radius);
}

.sfui-lightbox-prev,
.sfui-lightbox-next {
    transition: background var(--sfui-transition);
    user-select: none;
}

/* ===========================
   RangeSlider Module Styles
   =========================== */

.sfui-rangeslider {
    user-select: none;
}

.sfui-rangeslider-track {
    cursor: pointer;
}

.sfui-rangeslider-range {
    pointer-events: none;
    transition: all 0.1s ease;
}

.sfui-rangeslider-handle {
    transition: transform 0.1s ease;
}

.sfui-rangeslider-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.sfui-rangeslider-handle:active {
    transform: translate(-50%, -50%) scale(1.3);
}

/* Light theme */
:root .sfui-rangeslider.light,
[data-bs-theme="light"] .sfui-rangeslider,
[data-theme="light"] .sfui-rangeslider,
.sfui-rangeslider.light {
    background: #ededed;
    border-color: #cecece;
}

:root .sfui-rangeslider.light .sfui-rangeslider-range,
[data-bs-theme="light"] .sfui-rangeslider .sfui-rangeslider-range,
[data-theme="light"] .sfui-rangeslider .sfui-rangeslider-range,
.sfui-rangeslider.light .sfui-rangeslider-range {
    background-color: #0d6efd;
}

:root .sfui-rangeslider.light .sfui-rangeslider-handle,
[data-bs-theme="light"] .sfui-rangeslider .sfui-rangeslider-handle,
[data-theme="light"] .sfui-rangeslider .sfui-rangeslider-handle,
.sfui-rangeslider.light .sfui-rangeslider-handle {
    background-color: #ffffff;
    border-color: #0d6efd;
}

:root .sfui-rangeslider.light .sfui-rangeslider-handle:hover,
[data-bs-theme="light"] .sfui-rangeslider .sfui-rangeslider-handle:hover,
[data-theme="light"] .sfui-rangeslider .sfui-rangeslider-handle:hover,
.sfui-rangeslider.light .sfui-rangeslider-handle:hover {
    background-color: #f8f9fa;
}

/* Dark theme */
[data-bs-theme="dark"] .sfui-rangeslider,
[data-theme="dark"] .sfui-rangeslider,
.sfui-rangeslider.dark {
    background: #565656;
    border-color: #898989;
}

[data-bs-theme="dark"] .sfui-rangeslider .sfui-rangeslider-range,
[data-theme="dark"] .sfui-rangeslider .sfui-rangeslider-range,
.sfui-rangeslider.dark .sfui-rangeslider-range {
    background-color: #6ea8fe;
}

[data-bs-theme="dark"] .sfui-rangeslider .sfui-rangeslider-handle,
[data-theme="dark"] .sfui-rangeslider .sfui-rangeslider-handle,
.sfui-rangeslider.dark .sfui-rangeslider-handle {
    background-color: #ededed;
    border-color: #ededed;
}

[data-bs-theme="dark"] .sfui-rangeslider .sfui-rangeslider-handle:hover,
[data-theme="dark"] .sfui-rangeslider .sfui-rangeslider-handle:hover,
.sfui-rangeslider.dark .sfui-rangeslider-handle:hover {
    background-color: #e1e1e1;
    border-color: #e1e1e1;
}

/* ===========================
   Button Styles
   =========================== */

.sfui-btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--sfui-border-radius);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
    margin: 0 0.25rem;
}

.sfui-btn:hover {
    opacity: 0.9;
}

.sfui-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.sfui-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

.sfui-btn-primary {
    color: #fff;
    background-color: var(--sfui-primary);
    border-color: var(--sfui-primary);
}

.sfui-btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.sfui-btn-secondary {
    color: #fff;
    background-color: var(--sfui-secondary);
    border-color: var(--sfui-secondary);
}

.sfui-btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.sfui-btn-success {
    color: #fff;
    background-color: var(--sfui-success);
    border-color: var(--sfui-success);
}

.sfui-btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.sfui-btn-danger {
    color: #fff;
    background-color: var(--sfui-danger);
    border-color: var(--sfui-danger);
}

.sfui-btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.sfui-btn-warning {
    color: #212529;
    background-color: var(--sfui-warning);
    border-color: var(--sfui-warning);
}

.sfui-btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

.sfui-btn-info {
    color: #fff;
    background-color: var(--sfui-info);
    border-color: var(--sfui-info);
}

.sfui-btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

.sfui-btn-default {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.sfui-btn-default:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.sfui-btn-close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sfui-modal-color);
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    width: 1em;
    height: 1em;
}

.sfui-btn-close:hover {
    opacity: 0.75;
}

.sfui-btn-close::before {
    content: "×";
}

/* ===========================
   Form Controls
   =========================== */

.sfui-form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sfui-input-color);
    background-color: var(--sfui-input-bg);
    background-clip: padding-box;
    border: 1px solid var(--sfui-input-border);
    border-radius: var(--sfui-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.sfui-form-control:focus {
    color: var(--sfui-input-color);
    background-color: var(--sfui-input-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

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

@media (max-width: 576px) {
    .sfui-alert-dialog {
        max-width: 95%;
    }

    .sfui-modal-dialog {
        max-width: 95%;
        margin: 0.5rem;
    }

    .sfui-lightbox-image {
        max-width: 95% !important;
        max-height: 80% !important;
    }

    .sfui-rangeslider {
        width: calc(100vw - 2rem) !important;
    }
}

/* ===========================
   Utility Classes
   =========================== */

.sfui-fade {
    transition: opacity var(--sfui-transition);
}

.sfui-fade:not(.sfui-active) {
    opacity: 0;
}