/**
 * Rexultz Custom Styles
 * Bulma overrides and system-specific styles
 */

/* ============================================
   Bulma Overrides
   ============================================ */

/* Level item title/subtitle spacing */
.level-item .subtitle,
.level-item .title {
    margin-bottom: 1.25rem!important;
}

/* Fix title margin in boxes and cards */
.box .title:not(:last-child),
.card .title:not(:last-child) {
    margin-bottom: 1rem;
}

/* Better button spacing in button groups */
.buttons:not(:last-child) {
    margin-bottom: 1rem;
}

/* ============================================
   Form Improvements
   ============================================ */

/* Better focus states */
.input:focus,
.textarea:focus,
.select select:focus {
    border-color: #485fc7;
    box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}

/* ============================================
   Table Improvements
   ============================================ */

/* Compact table cells */
.table.is-compact td,
.table.is-compact th {
    padding: 0.5em 0.75em;
}

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

/* Text utilities */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cursor utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

/* Gap utilities (for older browsers) */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.5rem; }

/* ============================================
   Scrollbar Styling
   ============================================ */

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ============================================
   Animation Utilities
   ============================================ */

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ============================================
   Dark Mode Support
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Dropdown dark mode */
    .dropdown-menu .dropdown-content {
        background-color: hsl(0, 0%, 21%) !important;
    }
    
    .dropdown-menu .dropdown-item,
    .dropdown-menu a.dropdown-item {
        color: hsl(0, 0%, 96%) !important;
    }
    
    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus,
    .dropdown-menu a.dropdown-item:hover,
    .dropdown-menu a.dropdown-item:focus,
    .dropdown-menu a.dropdown-item.is-active {
        background-color: hsl(0, 0%, 29%) !important;
        color: hsl(0, 0%, 96%) !important;
    }
    
    /* Notification light variants - softer in dark mode */
    .notification.is-info.is-light {
        background-color: hsl(207, 61%, 20%) !important;
        color: hsl(207, 61%, 85%) !important;
    }
    
    .notification.is-success.is-light {
        background-color: hsl(153, 53%, 18%) !important;
        color: hsl(153, 53%, 80%) !important;
    }
    
    .notification.is-warning.is-light {
        background-color: hsl(44, 100%, 20%) !important;
        color: hsl(44, 100%, 85%) !important;
    }
    
    .notification.is-danger.is-light {
        background-color: hsl(348, 86%, 20%) !important;
        color: hsl(348, 86%, 85%) !important;
    }
}