/* ===========================================
   UTILITIES.CSS - Shared Utility Classes
   Reusable classes following snake_case naming
   =========================================== */

/* ===========================================
   1. VISIBILITY UTILITIES
   =========================================== */
.hidden {
    display: none !important;
}

.show {
    display: block;
}

.invisible {
    visibility: hidden;
    opacity: 0;
}

.visible {
    visibility: visible;
    opacity: 1;
}

/* ===========================================
   2. LAYOUT UTILITIES (Flexbox)
   =========================================== */
.flex_row {
    display: flex;
    flex-direction: row;
}

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

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

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

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

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

.justify_center {
    justify-content: center;
}

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

.align_center {
    align-items: center;
}

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

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

/* ===========================================
   3. SPACING UTILITIES
   =========================================== */
.gap_xs { gap: var(--spacing-xs); }
.gap_sm { gap: var(--spacing-sm); }
.gap_md { gap: var(--spacing-md); }
.gap_lg { gap: var(--spacing-lg); }
.gap_xl { gap: var(--spacing-xl); }

.mb_xs { margin-bottom: var(--spacing-xs); }
.mb_sm { margin-bottom: var(--spacing-sm); }
.mb_md { margin-bottom: var(--spacing-md); }
.mb_lg { margin-bottom: var(--spacing-lg); }

.mt_xs { margin-top: var(--spacing-xs); }
.mt_sm { margin-top: var(--spacing-sm); }
.mt_md { margin-top: var(--spacing-md); }
.mt_lg { margin-top: var(--spacing-lg); }

.p_sm { padding: var(--spacing-sm); }
.p_md { padding: var(--spacing-md); }
.p_lg { padding: var(--spacing-lg); }

/* ===========================================
   4. TYPOGRAPHY UTILITIES
   =========================================== */
.text_center { text-align: center; }
.text_left { text-align: left; }
.text_right { text-align: right; }

.font_menu { font-family: var(--menu-link); }
.font_header { font-family: var(--header-bold); }
.font_header_normal { font-family: var(--header-normal); }
.font_korean { font-family: var(--font-korean); }
.font_primary { font-family: var(--font-primary); }

.text_uppercase { text-transform: uppercase; }
.text_lowercase { text-transform: lowercase; }
.text_capitalize { text-transform: capitalize; }

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

/* ===========================================
   5. BUTTON UTILITIES (Shared Base)
   =========================================== */
.btn_base {
    border: none;
    cursor: pointer;
    transition: var(--transition-normal);
    font-family: var(--font-primary);
}

.btn_round {
    border-radius: var(--radius-pill);
}

.btn_gradient {
    color: white;
    background: var(--main-gradient);
    background-size: 200% auto;
}

.btn_gradient:hover {
    background-position: right center;
}

.btn_ghost {
    background: transparent;
    border: none;
}

/* ===========================================
   6. CARD UTILITIES (Shared Base)
   =========================================== */
.card_base {
    background: var(--white);
    border-radius: var(--radius-large);
    overflow: hidden;
    position: relative;
}

.card_bordered {
    border: 2px solid var(--black);
}

.card_aspect_3_4 {
    aspect-ratio: 3/4;
}

.card_shadow {
    box-shadow: var(--shadow-md);
}

/* ===========================================
   7. INPUT UTILITIES (Shared Base)
   =========================================== */
.input_base {
    display: block;
    width: 100%;
    font-family: var(--font-primary);
    background-color: var(--lightgray);
    border: none;
    border-radius: var(--radius-pill);
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input_centered {
    text-align: center;
}

.input_hidden {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    height: 0;
    width: 0;
    border: none;
}

/* ===========================================
   8. OVERLAY UTILITIES
   =========================================== */
.overlay_base {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.overlay_dark {
    background-color: rgba(0, 0, 0, 0.5);
}

.overlay_blur {
    backdrop-filter: blur(4px);
}

/* ===========================================
   9. BADGE UTILITIES
   =========================================== */
.badge_base {
    position: absolute;
    padding: 4px 8px;
    border-radius: var(--radius-small);
    font-size: 0.8em;
    pointer-events: none;
}

.badge_top_right {
    top: 8px;
    right: 8px;
}

.badge_top_left {
    top: 8px;
    left: 8px;
}

.badge_bottom_center {
    bottom: 6px;
    left: 0;
    right: 0;
}

/* ===========================================
   10. IMAGE UTILITIES
   =========================================== */
.img_cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img_contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image_placeholder {
    opacity: 0.3;
}

.image_loaded {
    opacity: 1;
    transition: opacity var(--transition-slow);
}

/* ===========================================
   11. CURSOR UTILITIES
   =========================================== */
.clickable {
    cursor: pointer;
}

.cursor_grab {
    cursor: grab;
}

.cursor_grabbing {
    cursor: grabbing !important;
}

.cursor_default {
    cursor: default;
}

/* ===========================================
   12. SCROLLBAR UTILITIES
   =========================================== */
.scrollbar_hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollbar_hidden::-webkit-scrollbar {
    display: none;
}

/* ===========================================
   13. FILE INPUT HIDDEN (for templates)
   =========================================== */
.file_input_hidden {
    display: none;
}

/* ===========================================
   14. ICON SIZE UTILITIES
   =========================================== */
.icon_xs {
    width: 16px;
    height: 16px;
}

.icon_sm {
    width: 20px;
    height: 20px;
}

.icon_md {
    width: 28px;
    height: 28px;
}

.icon_lg {
    width: 40px;
    height: 40px;
}

/* ===========================================
   15. POSITION UTILITIES
   =========================================== */
.position_relative {
    position: relative;
}

.position_absolute {
    position: absolute;
}

.position_fixed {
    position: fixed;
}

.position_sticky {
    position: sticky;
}

/* ===========================================
   16. ERROR/STATUS UTILITIES
   =========================================== */
.error_text {
    color: var(--error-red);
    font-size: 0.9em;
}

.success_text {
    color: var(--success-green);
    font-size: 0.9em;
}

.login_error {
    color: var(--error-red);
    margin-top: var(--spacing-sm);
    display: none;
}

/* ===========================================
   17. WIDTH/HEIGHT UTILITIES
   =========================================== */
.w_full {
    width: 100%;
}

.h_full {
    height: 100%;
}

.w_auto {
    width: auto;
}

.h_auto {
    height: auto;
}

/* ===========================================
   18. BORDER RADIUS UTILITIES
   =========================================== */
.rounded_sm {
    border-radius: var(--radius-small);
}

.rounded_md {
    border-radius: var(--radius-medium);
}

.rounded_lg {
    border-radius: var(--radius-large);
}

.rounded_pill {
    border-radius: var(--radius-pill);
}

.rounded_full {
    border-radius: 50%;
}

/* ===========================================
   19. CHART UTILITIES (for report page)
   =========================================== */
.chart_height_sm {
    height: 120px;
}

.chart_height_md {
    height: 200px;
}

.chart_height_lg {
    height: 300px;
}

/* ===========================================
   20. Z-INDEX UTILITIES
   =========================================== */
.z_base { z-index: var(--z-base); }
.z_dropdown { z-index: var(--z-dropdown); }
.z_sticky { z-index: var(--z-sticky); }
.z_modal { z-index: var(--z-modal); }
.z_tooltip { z-index: var(--z-tooltip); }