@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: #ffffff;
        --foreground: #000000;
        --accents-1: #fafafa;
        --accents-2: #eaeaea;
        --accents-3: #999999;
        --accents-4: #888888;
        --accents-5: #666666;
        --accents-6: #444444;
        --accents-7: #333333;
        --accents-8: #111111;
    }

    .dark {
        --background: #000000;
        --foreground: #ffffff;
        --accents-1: #111111;
        --accents-2: #333333;
        --accents-3: #444444;
        --accents-4: #666666;
        --accents-5: #888888;
        --accents-6: #999999;
        --accents-7: #eaeaea;
        --accents-8: #fafafa;
    }

    body {
        @apply bg-background text-foreground font-sans antialiased;
    }
}

@layer components {
    .custom-select-wrapper {
        @apply shrink-0;
    }
    .btn {
        @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2 hover:shadow-md active:scale-95;
    }
    .btn-primary {
        @apply bg-foreground text-background hover:opacity-90 hover:-translate-y-0.5;
    }
    .btn-secondary {
        @apply bg-background text-foreground border border-accents-2 hover:bg-accents-1 hover:border-foreground hover:-translate-y-0.5;
    }
    .btn-danger {
        @apply bg-red-500 text-white hover:bg-red-600 border border-transparent hover:-translate-y-0.5 hover:shadow-red-500/20;
    }
    .btn-icon {
        @apply p-2 rounded-lg text-accents-5 transition-all duration-200 hover:text-foreground hover:bg-white/40 dark:hover:bg-white/10 active:scale-95;
    }
    .btn-icon-danger {
        @apply p-2 rounded-lg text-red-500 transition-all duration-200 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 active:scale-95;
    }
    .form-label {
        @apply block text-xs font-bold text-accents-6 dark:text-accents-3 uppercase tracking-wider mb-1 transition-colors duration-200;
    }

    .form-label-card {
        @apply block text-sm font-medium text-accents-6 mb-1 transition-colors duration-200;
    }

    .glass-label, .modal-glass .form-label {
        @apply text-foreground opacity-80 dark:opacity-90 font-semibold shadow-black/10;
    }

    .form-control, .form-input, .form-input-search, .form-select {
        @apply flex items-center h-10 w-full rounded-xl border border-accents-2 dark:border-white/10 bg-white/40 dark:bg-white/5 backdrop-blur-xl px-3 py-1 text-sm text-foreground shadow-sm transition-all duration-300 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-accents-5 focus-visible:outline-none focus-visible:border-foreground focus-visible:ring-2 focus-visible:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 min-w-0 hover:border-accents-4 hover:bg-white/60 dark:hover:bg-white/10 hover:shadow-md;
    }

    .form-input-search {
        @apply rounded-full border-2 border-white/20 dark:border-white/10 bg-white/25 dark:bg-black/40 backdrop-blur-[40px] text-foreground shadow-sm transition-all duration-200 focus-visible:outline-none focus-visible:border-white/50 focus-visible:ring-0 min-w-0 hover:bg-white/40 dark:hover:bg-black/60 hover:border-white/40;
    }

    .form-filter {
        @apply flex items-center justify-between h-10 w-full rounded-xl border-2 border-white/20 dark:border-white/10 bg-white/25 dark:bg-black/40 backdrop-blur-[40px] px-3 py-1 text-sm text-foreground shadow-sm transition-all duration-200 focus-visible:outline-none focus-visible:border-white/50 focus-visible:ring-0 min-w-0 hover:bg-white/40 dark:hover:bg-black/60 hover:border-white/40 cursor-pointer;
    }
    
    /* Autofill Fix - Glass Compatible */
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px transparent inset !important;
        -webkit-text-fill-color: var(--foreground) !important;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: var(--foreground);
    }

    /* Input with Icon Global Style */
    .input-group {
        @apply relative w-full text-accents-6 transition-colors duration-200 focus-within:text-foreground;
    }
    
    .input-icon {
        @apply absolute inset-y-0 left-0 flex items-center justify-center w-10 pointer-events-none z-10;
    }
    
    .input-group .form-input,
    .input-group .form-input-search {
        @apply !pl-10;
    }

    .input-suffix {
        @apply absolute inset-y-0 right-0 flex items-center pr-3 text-accents-5 pointer-events-none z-10;
    }

    /* Merged Inputs (Side-by-side) */
    .input-group-merged {
        @apply flex w-full relative;
    }
    .input-group-merged > .form-control:not(:first-child), 
    .input-group-merged > .form-input:not(:first-child),
    .input-group-merged > select:not(:first-child) {
        @apply rounded-l-none -ml-px;
    }
    .input-group-merged > .form-control:not(:last-child),
    .input-group-merged > .form-input:not(:last-child),
    .input-group-merged > select:not(:last-child) {
        @apply rounded-r-none;
    }
    .input-group-merged > *:focus-within {
        @apply z-20;
    }

    /* File Input Specific Styling - Custom File Button */
    .form-control-file {
        @apply block w-full text-sm text-accents-5 border-2 border-accents-2 rounded-md file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-accents-2 file:text-foreground hover:file:bg-accents-3 cursor-pointer transition-colors;
    }

    .checkbox {
        @apply appearance-none h-5 w-5 shrink-0 rounded border border-accents-5 dark:border-white/30 bg-white/50 dark:bg-white/10 backdrop-blur-sm shadow-sm transition-all duration-200 checked:bg-blue-600 checked:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/20 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 hover:shadow-md;
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .checkbox:checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    }

    .dark .checkbox:checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    }

    .card, .glass-card {
        @apply rounded-2xl border-2 border-white/20 dark:border-white/10 bg-white/25 dark:bg-black/40 backdrop-blur-[40px] text-foreground shadow-2xl p-6 transition-all duration-500 hover:border-white/40 dark:hover:border-white/20 hover:bg-white/40 dark:hover:bg-black/60 hover:shadow-cyan-500/10 hover:-translate-y-1;
    }
    .status-dot {
        @apply flex h-2 w-2 rounded-full;
    }

    .sub-card, .card-nested {
        @apply bg-white/60 dark:bg-white/10 border-2 border-white/40 dark:border-white/10 rounded-xl p-4 shadow-md transition-all duration-300 hover:bg-white/80 dark:hover:bg-white/15 hover:border-white/60 hover:shadow-lg hover:scale-[1.01];
    }

    /* Custom Select Dropdown Global Style */
    .custom-select-dropdown {
        @apply absolute z-50 min-w-full top-full mt-1 bg-white/80 dark:bg-black/80 backdrop-blur-[40px] border border-white/20 dark:border-white/10 rounded-xl shadow-2xl transition-all duration-200 ease-out origin-top opacity-0 scale-95 -translate-y-2 invisible pointer-events-none flex flex-col max-h-60 overflow-hidden ring-1 ring-black/5;
    }
    
    .custom-select-dropdown.open {
        @apply opacity-100 scale-100 translate-y-0 visible pointer-events-auto;
    }

    .custom-select-dropdown.dropdown-up {
        @apply bottom-full top-auto mb-1 mt-0 origin-bottom translate-y-2;
    }
    
    .custom-select-dropdown.dropdown-up.open {
        @apply translate-y-0;
    }

    /* Premium Control Pill & Segmented Switch */
    .control-pill {
        @apply flex items-center gap-1 px-1.5 h-10 rounded-full border-2 border-accents-2 bg-white/60 dark:bg-black/40 backdrop-blur-md shadow-sm transition-all duration-300 hover:shadow-md hover:border-accents-3 hover:bg-white/80 dark:hover:bg-black/60;
    }

    .pill-divider {
        @apply w-px h-4 bg-accents-3 mx-1 opacity-40;
    }

    .segmented-switch {
        @apply relative flex items-center p-0.5 bg-accents-2 dark:bg-black rounded-full overflow-hidden w-14 h-8 shadow-inner border border-accents-2 dark:border-white/10;
    }

    .segmented-switch-slider {
        @apply absolute left-0.5 top-0.5 h-7 w-7 rounded-full bg-foreground shadow-md transition-all duration-300 ease-in-out z-0;
    }

    .dark .segmented-switch-slider {
        --tw-translate-x: 24px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .segmented-switch-btn {
        @apply relative z-10 flex h-7 w-7 items-center justify-center text-accents-5 transition-colors duration-300;
    }

    /* Active icon colors based on theme */
    /* In Light Mode: Track is light, Slider is Black. We want Active icon to be WHITE on the Slider. */
    .theme-toggle-light-icon {
        @apply text-white;
    }
    .dark .theme-toggle-light-icon {
        @apply text-accents-5 hover:text-white;
    }

    /* In Dark Mode: Track is dark, Slider is White. We want Active icon to be BLACK on the Slider. */
    .theme-toggle-dark-icon {
        @apply text-accents-5 hover:text-black;
    }
    .dark .theme-toggle-dark-icon {
        @apply text-black;
    }

    .segmented-switch-btn.active {
        /* This is a fallback but the specific icons above are better */
        @apply text-background;
    }

    /* Language Switcher Pill Button */
    .pill-lang-btn {
        @apply flex items-center justify-center h-8 w-8 rounded-full text-foreground hover:bg-accents-2 transition-all duration-200 outline-none focus:ring-1 focus:ring-accents-3;
    }

    /* Dropdown Bridge to prevent accidental closure on margin gaps */
    .dropdown-bridge::before {
        content: "";
        position: absolute;
        top: -1.25rem;
        left: 0;
        right: 0;
        height: 1.25rem;
        background: transparent;
        z-index: -1;
    }

    /* Specific Bridge expansion for Notification to make it more "sticky" */
    #notification-dropdown.dropdown-bridge::before {
        inset: -2rem -3rem; /* Expand 32px top/bottom, 48px left/right */
        top: -2.5rem; /* Ensure it covers the gap to the button */
    }
    /* Glassmorphism Table */
    .table-container {
        @apply w-full overflow-x-auto rounded-xl border-2 border-black/5 dark:border-white/10 shadow-sm;
    }

    .table-glass {
        @apply w-full border-collapse text-left text-sm;
    }

    .table-glass thead {
        @apply bg-white/80 dark:bg-white/5 backdrop-blur-md border-b-2 border-black/5 dark:border-white/10;
    }

    .table-glass th {
        @apply px-6 py-4 font-semibold text-accents-5 uppercase tracking-wider text-xs;
    }

    .table-glass tbody {
        @apply bg-white/40 dark:bg-white/5 backdrop-blur-sm divide-y divide-black/5 dark:divide-white/10;
    }

    .table-glass tr {
        @apply transition-colors duration-200 hover:bg-white/60 dark:hover:bg-white/10;
    }

    .table-glass td {
        @apply px-6 py-4 text-foreground whitespace-nowrap;
    }

    /* Global Table Actions Reveal Trigger */
    .table-actions-reveal {
        @apply opacity-0 transition-opacity duration-200;
    }

    .table-glass tr:hover .table-actions-reveal {
        @apply opacity-100;
    }

    /* Global Glassmorphism Modal */
    .modal-backdrop {
        @apply fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-opacity duration-300;
    }
    
    .modal-glass {
        @apply fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-2xl border-2 border-white/20 dark:border-white/10 bg-white/25 dark:bg-black/60 backdrop-blur-[40px] shadow-2xl transition-all duration-300 scale-95 opacity-0 overflow-hidden flex flex-col max-h-[90vh];
    }
    
    .modal-glass.open {
        @apply scale-100 opacity-100;
    }
    
    .modal-header {
        @apply flex items-center justify-between px-6 py-4 border-b-2 border-white/10 bg-white/10 dark:bg-white/5;
    }
    
    .modal-title {
        @apply text-lg font-bold text-foreground tracking-tight;
    }
    
    .modal-body {
        @apply p-6 overflow-y-auto custom-scrollbar;
    }
    
    .modal-footer {
        @apply flex justify-end gap-3 px-6 py-4 border-t-2 border-white/10 bg-white/10 dark:bg-white/5;
    }
}

@layer utilities {
    /* Custom Scrollbar - Vercel Style */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-accents-3 rounded-full transition-colors;
    }

    ::-webkit-scrollbar-thumb:hover {
        @apply bg-accents-4;
    }
    
    /* Ensure styles apply to specific containers if needed */
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Mobile only scrollbar hide */
    @media (max-width: 768px) {
        .no-scrollbar-mobile::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar-mobile {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    }
}

html { 
    overflow-y: scroll; 
    scrollbar-gutter: stable;
}

/* Premium SweetAlert2 Overrides - Glassmorphism Style */
div.swal2-popup {
    background-color: rgba(255, 255, 255, 0.5) !important; /* High transparency for Maximum Glossy Light Mode */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    color: var(--foreground) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Subtle reflective border */
    border-radius: 0.75rem !important; /* rounded-xl */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important; /* Softer shadow */
    padding: 1.5rem !important;
}

div:where(.swal2-container) {
    z-index: 9999 !important;
}

div:where(.swal2-popup).swal-wide {
    width: auto !important;
    max-width: 900px !important;
}

/* Dark mode background fix for glassmorphism */
.dark div.swal2-popup {
     background-color: rgba(0, 0, 0, 0.75) !important;
     border-color: rgba(255, 255, 255, 0.1) !important;
}

div.swal2-title {
    color: var(--foreground) !important;
    font-family: inherit !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-top: 1rem !important;
}

div.swal2-html-container {
    color: var(--accents-5) !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
}

/* Hide default icon styling to make way for Lucide */
div.swal2-icon {
    border: none !important;
    background: transparent !important;
    margin: 0 auto !important;
}

/* Remove default animations/styles for icons */
.swal2-icon-content {
     display: flex !important;
     align-items: center;
     justify-content: center;
}

/* Target actions container for flex gap */
div.swal2-actions {
    gap: 1rem !important;
}

div.swal2-confirm, 
div.swal2-cancel {
    @apply !m-0; /* Reset margins to use flex gap */
}

div.swal2-confirm {
    @apply btn btn-primary !important;
    border-radius: 0.5rem !important;
}

div.swal2-cancel {
    @apply btn btn-secondary !important;
    border-radius: 0.5rem !important;
}

/* Dark Mode Specific Adjustments */
.dark div.swal2-popup {
    border-color: #333 !important;
}
/* Custom Icon Colors (applied to Lucide wrapper) */
.text-success { color: #10b981; }
.text-error { color: #ef4444; }
.text-warning { color: #f59e0b; }
.text-info { color: #3b82f6; }
.text-question { color: #8b5cf6; }

/* Custom Premium Stacking Toasts */
#mivo-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    pointer-events: none;
    max-width: 400px;
    width: calc(100% - 3rem);
}

.mivo-toast {
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dark .mivo-toast {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

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

.mivo-toast-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.25;
}

.mivo-toast-message {
    font-size: 0.75rem;
    color: var(--accents-5);
    margin-top: 0.125rem;
}

.mivo-toast-close {
    padding: 0.25rem;
    margin: -0.25rem;
    border-radius: 0.375rem;
    color: var(--accents-4);
    transition: all 0.2s;
    cursor: pointer;
}

.mivo-toast-close:hover {
    background-color: var(--accents-2);
    color: var(--foreground);
}

.mivo-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: currentColor;
    opacity: 0.2;
    width: 0%;
}

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

.mivo-toast-fade-out {
    transform: translateX(100%);
    opacity: 0;
}

/* SweetAlert Premium Fixes */
div:where(.swal2-icon).swal2-success {
    border-color: #10B981 !important;
    color: #10B981 !important;
}
div:where(.swal2-icon).swal2-success .swal2-success-ring {
    border-color: rgba(16, 185, 129, 0.4) !important; /* Emphasize ring slightly */
}
div:where(.swal2-icon).swal2-success .swal2-success-circular-line-left,
div:where(.swal2-icon).swal2-success .swal2-success-circular-line-right,
div:where(.swal2-icon).swal2-success .swal2-success-fix {
    background-color: transparent !important;
}
div:where(.swal2-icon).swal2-success .swal2-success-line-tip,
div:where(.swal2-icon).swal2-success .swal2-success-line-long {
    background-color: #10B981 !important;
}
div:where(.swal2-icon).swal2-error {
    border-color: #EF4444 !important;
    color: #EF4444 !important;
}

div:where(.swal2-container) div:where(.swal2-popup).swal2-premium-card {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(40px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
.dark div:where(.swal2-container) div:where(.swal2-popup).swal2-premium-card {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
/* SweetAlert2 Premium Input Styles Override */
.swal2-premium-card .form-label {
    @apply text-accents-8 dark:text-accents-2 font-bold mb-2;
}

.swal2-premium-card input:not([type="checkbox"]):not([type="radio"]), 
.swal2-premium-card select, 
.swal2-premium-card textarea {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--accents-2);
  background-color: rgb(255 255 255 / 0.5);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--foreground);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.swal2-premium-card input:not([type="checkbox"]):not([type="radio"]):focus, 
.swal2-premium-card select:focus, 
.swal2-premium-card textarea:focus {
  border-color: var(--foreground);
  background-color: rgb(255 255 255 / 0.8);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--accents-2);
}

.dark .swal2-premium-card input:not([type="checkbox"]):not([type="radio"]), 
.dark .swal2-premium-card select, 
.dark .swal2-premium-card textarea {
  background-color: rgb(0 0 0 / 0.2);
  border-color: var(--accents-2);
}

.dark .swal2-premium-card input:not([type="checkbox"]):not([type="radio"]):focus, 
.dark .swal2-premium-card select:focus, 
.dark .swal2-premium-card textarea:focus {
  background-color: rgb(0 0 0 / 0.4);
  border-color: var(--foreground);
}