/*
 * utilities.css - Layout and Animation Utilities
 *
 * Purpose: Helper classes for layout, positioning, and animations:
 *   - Flexbox utilities (flex, row, column, alignment)
 *   - Text alignment (left, center, right, justify)
 *   - Vertical alignment
 *   - Display utilities (block, inline, hidden)
 *   - Width and height utilities
 *   - Margin and padding utilities
 *   - Position utilities (relative, absolute, fixed, sticky)
 *   - Overflow utilities
 *   - Container utilities
 *   - Animations (fade, slide, pulse, spin)
 *   - Transitions and hover effects
 *
 * Used across: All templates for quick layout adjustments
 */

/* ==========================================================================
   Flexbox Utilities
   ========================================================================== */

.flex {
    display: flex;
}

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

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

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

.flex-space-around {
    display: flex;
    justify-content: space-around;
}

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

/* ==========================================================================
   Text Alignment
   ========================================================================== */

.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* ==========================================================================
   Vertical Alignment
   ========================================================================== */

.align-top {
    vertical-align: top;
}

.align-middle {
    vertical-align: middle;
}

.align-bottom {
    vertical-align: bottom;
}

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.block {
    display: block;
}

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

.inline {
    display: inline;
}

.hidden {
    display: none;
}

/* ==========================================================================
   Width Utilities
   ========================================================================== */

.w-100 {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-30 {
    width: 30%;
}

.w-25 {
    width: 25%;
}

/* ==========================================================================
   Height Utilities
   ========================================================================== */

.h-100 {
    height: 100%;
}

.h-75 {
    height: 75px;
}

.h-50 {
    height: 50px;
}

.h-100px {
    height: 100px;
}

/* ==========================================================================
   Margin Utilities
   ========================================================================== */

.m-0 {
    margin: 0;
}

.m-1 {
    margin: 0.5rem;
}

.m-2 {
    margin: 1rem;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.ml-1 {
    margin-left: 0.5rem;
}

.mr-1 {
    margin-right: 0.5rem;
}

/* ==========================================================================
   Padding Utilities
   ========================================================================== */

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.5rem;
}

.p-2 {
    padding: 1rem;
}

.pt-1 {
    padding-top: 0.5rem;
}

.pb-1 {
    padding-bottom: 0.5rem;
}

.pl-1 {
    padding-left: 0.5rem;
}

.pr-1 {
    padding-right: 0.5rem;
}

/* ==========================================================================
   Position Utilities
   ========================================================================== */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* ==========================================================================
   Overflow Utilities
   ========================================================================== */

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: scroll;
}

/* ==========================================================================
   Container Utilities
   ========================================================================== */

.container-centered {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-fluid {
    width: 100%;
    padding: 0 1rem;
}

/* Row alignment utilities for existing grid system */
.row.align-center {
    align-items: center;
}

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

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

/* ==========================================================================
   Animations (merged from animations.css)
   ========================================================================== */

/* NOTE: Circular stat chart (.circle-wrap .circle) styles are defined in main.css */
/* The @keyframes fill animation is defined inline in templates with dynamic {{ stat.angle }} values */

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Slide in animations */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

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

/* Pulse animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Spin animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ==========================================================================
   Transition Utilities
   ========================================================================== */

.transition-all {
    transition: all 0.3s ease;
}

.transition-fast {
    transition: all 0.15s ease;
}

.transition-slow {
    transition: all 0.5s ease;
}

/* ==========================================================================
   Hover Effects
   ========================================================================== */

.hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.hover-brighten:hover {
    filter: brightness(1.1);
    transition: filter 0.3s ease;
}

/* ==========================================================================
   Search Form
   ========================================================================== */
/* NOTE: .search-corp styles are defined in main.css and input_main.css */