/**
 * Rippli Utility Classes
 * Reusable utility classes to eliminate inline styles
 */

/* ===========================
   Display Utilities
   =========================== */
.u-display-none {
    display: none;
}

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

.u-display-flex {
    display: flex;
}

.u-display-inline-flex {
    display: inline-flex;
}

/* ===========================
   Flexbox Utilities
   =========================== */
.u-flex-column {
    flex-direction: column;
}

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

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

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

/* ===========================
   Icon Sizing
   =========================== */
.u-icon-xs {
    width: 12px;
    height: 12px;
}

.u-icon-sm {
    width: 16px;
    height: 16px;
}

.u-icon-md {
    width: 18px;
    height: 18px;
}

.u-icon-lg {
    width: 24px;
    height: 24px;
}

.u-icon-xl {
    width: 32px;
    height: 32px;
}

.u-icon-2xl {
    width: 48px;
    height: 48px;
}

/* ===========================
   Text Utilities
   =========================== */
.u-text-center {
    text-align: center;
}

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

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

.u-text-primary {
    color: var(--color-text-primary);
}

.u-text-secondary {
    color: var(--color-text-secondary);
}

.u-text-tertiary {
    color: var(--color-text-tertiary);
}

.u-text-interactive {
    color: var(--color-interactive-primary);
}

.u-text-error {
    color: var(--color-error);
}

.u-text-success {
    color: var(--color-success);
}

/* ===========================
   Sizing Utilities
   =========================== */
.u-width-full {
    width: 100%;
}

.u-height-full {
    height: 100%;
}

.u-max-width-sm {
    max-width: 400px;
}

.u-max-width-md {
    max-width: 600px;
}

.u-max-width-lg {
    max-width: 800px;
}

/* ===========================
   Spacing Utilities
   =========================== */
.u-margin-auto {
    margin: 0 auto;
}

.u-margin-top-2 {
    margin-top: var(--space-2);
}

.u-margin-top-3 {
    margin-top: var(--space-3);
}

.u-margin-top-4 {
    margin-top: var(--space-4);
}

.u-margin-bottom-2 {
    margin-bottom: var(--space-2);
}

.u-margin-bottom-3 {
    margin-bottom: var(--space-3);
}

.u-margin-bottom-4 {
    margin-bottom: var(--space-4);
}

.u-padding-16 {
    padding: var(--space-16);
}

/* ===========================
   Loading/Empty States
   =========================== */
.u-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 500px;
    color: var(--color-text-secondary);
}

.u-empty-state-container {
    text-align: center;
    padding: var(--space-16);
    max-width: 600px;
    margin: 0 auto;
}

/* ===========================
   Animation Utilities
   =========================== */
.u-progress-bar-base {
    width: 0%;
}

/* ===========================
   Border Utilities
   =========================== */
.u-border-color-error {
    border-color: var(--color-error);
}

.u-bg-error {
    background: var(--color-error-bg);
}

/* ===========================
   Font Size Utilities
   =========================== */
.u-font-sm {
    font-size: var(--font-size-sm);
}

.u-font-md {
    font-size: var(--font-size-md);
}

.u-font-base {
    font-size: var(--font-size-base);
}

.u-font-lg {
    font-size: var(--font-size-lg);
}

/* ===========================
   Component-Specific Utilities
   =========================== */
.person-company-mapping-badge {
    background: var(--color-interactive-primary-subtle);
    border: 1px solid var(--color-interactive-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.column-title .u-icon-md {
    margin-right: var(--space-2);
}

/* Auth Template Utilities */
.auth-notice--error {
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

.auth-notice--error .auth-notice-text {
    color: var(--color-error);
}

.auth-label--centered {
    text-align: center;
}

.auth-notice-email {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.auth-instructions {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.auth-button-group {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.auth-button-group form {
    flex: 1;
}

.auth-link-centered {
    display: block;
    text-align: center;
    margin-top: var(--space-3);
}

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

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

.confirmation-modal-icon--warning {
    background: var(--color-warning-bg);
}

.confirmation-modal-icon--warning i {
    color: var(--color-warning);
}

/* ===========================
   Admin Template Utilities
   =========================== */
/* Padding utilities for admin pages */
.u-padding-bottom-16 {
    padding-bottom: var(--space-16) !important;
}

.u-margin-bottom-5 {
    margin-bottom: var(--space-5) !important;
}

.u-padding-bottom-8 {
    padding-bottom: var(--space-8);
}

/* Width utilities */
.u-width-auto {
    width: auto;
}

.u-width-100 {
    width: 100%;
}

/* Height utilities */
.u-height-4px {
    height: 4px;
}

.u-height-8px {
    height: 8px;
}

/* Background color utilities */
.u-bg-success {
    background-color: var(--color-success);
}

.u-bg-warning {
    background-color: var(--color-warning);
}

.u-bg-success-bg {
    background-color: var(--color-success-bg);
}

.u-bg-warning-bg {
    background-color: var(--color-warning-bg);
}

.u-bg-interactive-primary-subtle {
    background-color: var(--color-interactive-primary-subtle);
}

/* Color utilities */
.u-color-success {
    color: var(--color-success);
}

.u-color-warning {
    color: var(--color-warning);
}

.u-color-text-primary {
    color: var(--color-text-primary);
}

.u-color-text-secondary {
    color: var(--color-text-secondary);
}

.u-color-interactive-primary {
    color: var(--color-interactive-primary);
}

/* Font weight utilities */
.u-font-weight-semibold {
    font-weight: var(--font-weight-semibold);
}

.u-font-weight-medium {
    font-weight: var(--font-weight-medium);
}

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

/* Table border collapse */
.u-border-collapse {
    border-collapse: collapse;
}

/* Progress bar width utilities */
.u-progress-width-85 {
    width: 85%;
}

.u-progress-width-90 {
    width: 90%;
}

.u-progress-width-97 {
    width: 97%;
}

.u-progress-width-99-8 {
    width: 99.8%;
}

/* Avatar size utilities */
.u-avatar-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

/* Height 30px utility */
.u-height-30px {
    height: 30px;
}

/* Table column width utilities */
.u-width-10-percent {
    width: 10%;
}

.u-width-15-percent {
    width: 15%;
}

.u-width-20-percent {
    width: 20%;
}

.u-width-30-percent {
    width: 30%;
}

.u-width-80px {
    width: 80px;
}

/* Accessibility issue warning */
.u-accessibility-issue {
    color: var(--color-warning);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}