// _components.scss
// Reusable UI Components styling overrides

// 1. Cards
.card {
    border: none;
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background-color: #fff;
    
    &:hover {
        box-shadow: $box-shadow-hover;
        transform: translateY(-3px);
    }
    
    .card-header {
        background-color: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-weight: 700;
        padding: 1.25rem 1.5rem;
        font-size: 1.1rem;
        color: $dark;
    }

    .card-body {
        padding: 1.5rem;
    }

    .card-footer {
        background-color: transparent;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding: 1rem 1.5rem;
    }
}

// 2. Tables
.table {
    vertical-align: middle;
    margin-bottom: 0;

    thead {
        th {
            border-bottom-width: 2px;
            font-weight: 700;
            color: $secondary;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            padding: 1rem;
        }
    }

    tbody {
        td {
            padding: 1rem;
            color: $dark;
        }
        tr {
            transition: background-color 0.2s ease;
        }
    }
}

// 3. Forms
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: $dark;
}

.form-control, .form-select {
    border-radius: $border-radius-sm;
    padding: 0.6rem 0.8rem;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: #fcfcfc;

    &:focus {
        background-color: #fff;
        border-color: rgba($primary, 0.5);
        box-shadow: 0 0 0 0.25rem rgba($primary, 0.15);
    }
}

// 4. Buttons
.btn {
    font-weight: 600;
    border-radius: $border-radius-sm;
    padding: 0.55rem 1.25rem;
    letter-spacing: 0.3px;
    transition: all 0.2s ease-in-out;
    
    // Add lift effect for normal buttons
    &:hover, &:focus {
        transform: translateY(-1px);
    }
    
    &.btn-primary {
        box-shadow: 0 4px 6px rgba($primary, 0.2);
        &:hover {
            box-shadow: 0 6px 8px rgba($primary, 0.3);
        }
    }
}

// 5. Badges
.badge {
    font-weight: 500;
    padding: 0.4em 0.6em;
    border-radius: $border-radius-sm;
}
