/**
 * ========================================================================
 * CHARACTER COUNTER STYLES - PRODUCTION GRADE
 * ========================================================================
 * Visual styles for character counters with accessibility support
 * 
 * Creates colored counter boxes under input fields:
 * - Green: Valid input within limits
 * - Yellow: Approaching limit or below minimum
 * - Red: At limit or invalid
 * 
 * @version 2.0.0
 * @since 2025-11-24
 * ========================================================================
 */

/* ========================================
   COUNTER DISPLAY BOX - BASE
   ======================================== */

.character-counter-display {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.counter-text {
    transition: color 0.3s ease;
}

/* ========================================
   COUNTER STATUS COLORS
   ======================================== */

/* OK Status - Green */
.character-counter-display.counter-ok {
    color: #059669;
    background-color: #d1fae5;
    border: 1px solid #a7f3d0;
}

/* Warning Status - Yellow/Amber */
.character-counter-display.counter-warning {
    color: #b45309;
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
}

/* Critical Status - Red */
.character-counter-display.counter-critical {
    color: #b91c1c;
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
    font-weight: 600;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
    .character-counter-display {
        font-size: 0.8125rem;
        padding: 0.375rem 0.625rem;
    }
}

/* ========================================
   ACCESSIBILITY - HIGH CONTRAST
   ======================================== */

@media (prefers-contrast: high) {
    .character-counter-display.counter-ok {
        border: 2px solid #000000;
    }

    .character-counter-display.counter-warning {
        border: 2px solid #000000;
    }

    .character-counter-display.counter-critical {
        border: 2px solid #000000;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .character-counter-display,
    .counter-text {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

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

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    .character-counter-display.counter-ok {
        color: #6ee7b7;
        background-color: #064e3b;
        border-color: #047857;
    }

    .character-counter-display.counter-warning {
        color: #fcd34d;
        background-color: #78350f;
        border-color: #b45309;
    }

    .character-counter-display.counter-critical {
        color: #fca5a5;
        background-color: #7f1d1d;
        border-color: #b91c1c;
    }
}