$primary: #435ebe;
$secondary: #6c757d;
$success: #198754;
$info: #0dcaf0;
$warning: #ffc107;
$danger: #dc3545;
$light: #f4f7f8;
$dark: #212529;

// Derived colors untuk background light
$primary-light: rgba($primary, 0.1);
$success-light: rgba($success, 0.1);
$warning-light: rgba($warning, 0.1);
$danger-light: rgba($danger, 0.1);
$info-light: rgba($info, 0.1);
$secondary-light: rgba($secondary, 0.1);

// Border radius 
$border-radius: 0.5rem;
$card-box-shadow: 0 0 1.25rem rgba(33,37,41,.05);

$border-radius-sm: 0.25rem;
$border-radius-lg: 1rem;
$shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
$shadow-md: 0 4px 8px rgba(0,0,0,0.12);
$shadow-lg: 0 8px 20px rgba(0,0,0,0.15);
$transition: all 0.3s ease;

// ===================================
// CARD COMPONENTS
// ===================================

.card {
    box-shadow: $card-box-shadow;
    
    .card-header {
        &.bg-white {
            background-color: #fff !important;
            border-bottom: 1px solid rgba($secondary, 0.125);
        }
    }
}

// ===================================
// ICON COMPONENTS
// ===================================

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: $border-radius;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: $transition;
}

.section-icon,
.chart-icon,
.notification-icon,
.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: $primary-light;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: $transition;
    
    i {
        font-size: 1.2rem;
    }
}

// ===================================
// BACKGROUND COLORS
// ===================================

// Light backgrounds for icon circles
.bg-primary-light { background-color: $primary-light; }
.bg-success-light { background-color: $success-light; }
.bg-warning-light { background-color: $warning-light; }
.bg-danger-light { background-color: $danger-light; }
.bg-info-light { background-color: $info-light; }
.bg-secondary-light { background-color: $secondary-light; }

// Soft badge colors
.bg-primary-soft { 
    background-color: $primary-light;
    color: $primary;
}
.bg-success-soft { 
    background-color: $success-light;
    color: $success;
}
.bg-warning-soft { 
    background-color: $warning-light;
    color: $warning;
}
.bg-danger-soft { 
    background-color: $danger-light;
    color: $danger;
}
.bg-info-soft { 
    background-color: $info-light;
    color: $info;
}
.bg-secondary-soft {
    background-color: $secondary-light;
    color: $secondary;
}

// ===================================
// BOOK COMPONENTS
// ===================================

.book-card {
    transition: $transition;
    box-shadow: $card-box-shadow;
    
    &:hover {
        transform: translateY(-2px);
        box-shadow: $shadow-md !important;
        
        .book-cover {
            transform: scale(1.03);
        }
    }
}

.book-cover {
    transition: $transition;
    border-radius: $border-radius-sm;
    
    &-container {
        background: linear-gradient(135deg, rgba($light, 0.5) 0%, rgba($light, 0.8) 100%);
        border-radius: $border-radius-sm 0 0 $border-radius-sm;
    }
}


// ===================================
// ALERT COMPONENTS
// ===================================

.alert {
    border-radius: $border-radius;
    box-shadow: $shadow-sm;
    
    .alert-icon {
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    &.alert-primary {
        background-color: rgba($primary, 0.1);
        color: darken($primary, 10%);
    }
    
    &.alert-success {
        background-color: rgba($success, 0.1);
        color: darken($success, 10%);
    }
    
    &.alert-warning {
        background-color: rgba($warning, 0.1);
        color: darken($warning, 20%);
    }
    
    &.alert-danger {
        background-color: rgba($danger, 0.1);
        color: darken($danger, 10%);
    }
    
    &.alert-info {
        background-color: rgba($info, 0.1);
        color: darken($info, 10%);
    }
}

// ===================================
// SECTION COMPONENTS
// ===================================

.section-header {
    padding-bottom: 15px;
    border-bottom: 2px solid $light;
    
    h5 {
        color: $dark;
        font-weight: 700;
    }
}

// ===================================
// MODAL COMPONENTS
// ===================================

.modal {
    .modal-content {
        border: none;
        border-radius: $border-radius-lg;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        
        .modal-header {
            border-bottom: 1px solid rgba($secondary, 0.125);
            padding: 1.5rem;
            
            .modal-title {
                color: $dark;
                font-weight: 700;
            }
        }
        
        .modal-footer {
            border-top: 1px solid rgba($secondary, 0.125);
            padding: 1.5rem;
        }
    }
}

// ===================================
// UTILITY CLASSES
// ===================================

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

// Rounded buttons
.btn {
    &.rounded-pill {
        border-radius: 50px;
        padding: 0.5rem 1.5rem;
        font-weight: 500;
        
        &.btn-sm {
            padding: 0.375rem 1.25rem;
            font-size: 0.875rem;
        }
    }
}

// Badge 
.badge {
    &.rounded-pill {
        font-weight: 500;
        padding: 0.5rem 1rem;
    }
}

// ===================================
// SCROLLBAR CUSTOMIZATION
// ===================================

.modal-dialog-scrollable .modal-body {
    &::-webkit-scrollbar {
        width: 6px;
    }
    
    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
        
        &:hover {
            background: #a8a8a8;
        }
    }
}

// ===================================
// EMPTY STATES
// ===================================

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    
    i {
        font-size: 4rem;
        color: $secondary;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    
    p {
        color: $secondary;
        font-size: 1rem;
        margin: 0;
    }
}