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

/* Badge Colors - Extended */
.badge-secondary {
    background-color: #6c757d;
    color: white;
}

.badge-info {
    background-color: #0dcaf0;
    color: #212529;
}

.badge-light {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
}

.badge-dark {
    background-color: #212529;
    color: white;
}

/* Display Utilities */
.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

/* Flex Utilities */
.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

/* Width Utilities */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }

.mw-100 { max-width: 100%; }

/* Height Utilities */
.h-100 { height: 100%; }
.h-auto { height: auto; }

.vh-100 { height: 100vh; }

/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Position Utilities */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

/* Overflow Utilities */
.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-scroll {
    overflow: scroll;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Text Transformation */
.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-nowrap {
    white-space: nowrap;
}

.text-wrap {
    white-space: normal;
}

/* Font Weight */
.fw-bold {
    font-weight: 700;
}

.fw-bolder {
    font-weight: 900;
}

.fw-normal {
    font-weight: 400;
}

.fw-light {
    font-weight: 300;
}

.fw-lighter {
    font-weight: 100;
}

/* Font Size */
.fs-1 { font-size: 2.5rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 1.75rem; }
.fs-4 { font-size: 1.5rem; }
.fs-5 { font-size: 1.25rem; }
.fs-6 { font-size: 1rem; }

/* Letter Spacing */
.ls-1 { letter-spacing: 0.025em; }
.ls-2 { letter-spacing: 0.05em; }
.ls-3 { letter-spacing: 0.1em; }

/* Line Height */
.lh-1 { line-height: 1; }
.lh-sm { line-height: 1.25; }
.lh-base { line-height: 1.5; }
.lh-lg { line-height: 2; }

/* Rounded Corners */
.rounded {
    border-radius: 0.375rem;
}

.rounded-sm {
    border-radius: 0.25rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-circle {
    border-radius: 50%;
}

.rounded-top {
    border-radius: 0.375rem 0.375rem 0 0;
}

.rounded-end {
    border-radius: 0 0.375rem 0.375rem 0;
}

.rounded-bottom {
    border-radius: 0 0 0.375rem 0.375rem;
}

.rounded-start {
    border-radius: 0.375rem 0 0 0.375rem;
}

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

.cursor-default {
    cursor: default;
}

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

/* User Select */
.user-select-all {
    -webkit-user-select: all;
    user-select: all;
}

.user-select-auto {
    -webkit-user-select: auto;
    user-select: auto;
}

.user-select-none {
    -webkit-user-select: none;
    user-select: none;
}

/* Pointer Events */
.pe-none {
    pointer-events: none;
}

.pe-auto {
    pointer-events: auto;
}

/* Object Fit */
.object-fit-contain {
    object-fit: contain;
}

.object-fit-cover {
    object-fit: cover;
}

.object-fit-fill {
    object-fit: fill;
}

.object-fit-scale {
    object-fit: scale-down;
}

/* Transition */
.transition {
    transition: all 0.2s ease-in-out;
}

.transition-fast {
    transition: all 0.1s ease-in-out;
}

.transition-slow {
    transition: all 0.3s ease-in-out;
}

/* Transform */
.scale-100 {
    transform: scale(1);
}

.scale-110 {
    transform: scale(1.1);
}

.scale-125 {
    transform: scale(1.25);
}

.translate-y-0 {
    transform: translateY(0);
}

.translate-y-1 {
    transform: translateY(0.25rem);
}

.translate-y-2 {
    transform: translateY(0.5rem);
}

/* Background Position */
.bg-cover {
    background-size: cover;
}

.bg-contain {
    background-size: contain;
}

.bg-center {
    background-position: center;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

/* ============================================
   Responsive Utilities (Mobile First)
   ============================================ */

@media (max-width: 576px) {
    .d-sm-none {
        display: none !important;
    }
    
    .d-sm-block {
        display: block !important;
    }
    
    .d-sm-inline {
        display: inline !important;
    }
    
    .d-sm-inline-block {
        display: inline-block !important;
    }
    
    .text-sm-center {
        text-align: center;
    }
    
    .text-sm-left {
        text-align: left;
    }
    
    .text-sm-right {
        text-align: right;
    }
}

@media (min-width: 576px) {
    .d-sm-none {
        display: block !important;
    }
    
    .d-sm-block {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .d-md-none {
        display: none !important;
    }
    
    .d-md-block {
        display: block !important;
    }
    
    .text-md-center {
        text-align: center;
    }
}

@media (min-width: 768px) {
    .d-md-none {
        display: block !important;
    }
    
    .d-md-block {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
    
    .d-lg-block {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .d-lg-none {
        display: block !important;
    }
    
    .d-lg-block {
        display: none !important;
    }
}

/* ============================================
   Animation Classes
   ============================================ */

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

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

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

.slide-in-up {
    animation: slideInUp 0.3s ease-in-out;
}

.slide-in-down {
    animation: slideInDown 0.3s ease-in-out;
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   Helper Classes for Development
   ============================================ */

.debug-borders * {
    border: 1px solid red !important;
}

.debug-bg {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

.no-print {
    display: block;
}

@media print {
    .no-print {
        display: none !important;
    }
}