/* =================================================================
   Territory Manager - UTILITIES ONLY
   Common helper classes and patterns
   
   Contents:
   - Alert system (success, warning, danger, info)
   - Pagination controls and navigation
   - Loading spinner animation
   - Layout utilities (flex, grid, spacing)
   - Console output styling
   - Button groups and toolbars
   - Form utilities
   - Accessibility helpers
   - Alert container positioning
   - Responsive utilities
   
   Load Order: Last (after main.css, buttons.css, modals.css, stats-dashboard.css)
   ================================================================= */

/* =================================================================
   ALERT SYSTEM
   Notification banners with color-coded variants
   ================================================================= */

.alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    animation: alert-slide-in 0.3s ease-out;  /* Slide in from right */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* Elevation */
}

/* Alert entrance animation */
@keyframes alert-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);  /* Start off-screen right */
    }
    to {
        opacity: 1;
        transform: translateX(0);  /* End in position */
    }
}

/* =================================================================
   ALERT VARIANTS - Color-coded for different message types
   ================================================================= */

/* Error/danger alerts - red */
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Success alerts - green */
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* Warning alerts - yellow */
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

/* Info alerts - blue */
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* =================================================================
   PAGINATION CONTROLS
   Bottom-fixed navigation bar for multi-page data
   ================================================================= */

.pagination-controls {
    display: flex !important;
    justify-content: space-between !important;  /* Info left, buttons right */
    align-items: center !important;
    padding: 1rem !important;
    background: #ffffff !important;
    border-top: 2px solid #dee2e6 !important;
    margin-top: 0 !important;
    position: sticky;  /* Stick to bottom of viewport */
    bottom: 0;
    z-index: 100;  /* Above content */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);  /* Subtle top shadow */
}

/* Page info display (e.g., "Showing 1-10 of 50") */
.pagination-info {
    color: #495057 !important;
    font-size: 0.9rem !important;
    font-weight: 500;
}

/* Button container */
.pagination-buttons {
    display: flex !important;
    gap: 0.25rem !important;  /* Small space between buttons */
    flex-wrap: nowrap !important;  /* Keep in one line */
    align-items: center !important;
}

/* Mobile pagination - two rows: info + rows-per-page, then buttons */
@media (max-width: 600px) {
    .pagination-controls {
        padding: 0.75rem 0.5rem !important; /* Zwiększone z 0.5rem */
        flex-direction: column !important; /* Stack rows */
        align-items: stretch !important;
        gap: 0.75rem !important; /* Zwiększone z 0.5rem */
    }
    .pagination-controls > div:first-child {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    .pagination-info {
        font-size: 0.85rem !important; /* Zwiększone z 0.8rem */
        white-space: nowrap !important;
        text-align: left !important;
        flex: 1 1 auto !important;
    }
    .pagination-controls select {
        font-size: 0.85rem !important; /* Zwiększone z 0.8rem */
        padding: 0.5rem !important; /* Zwiększone z 0.35rem */
        max-width: 100px !important;
        min-height: 44px; /* WCAG touch target */
    }
    .pagination-buttons {
        display: flex !important;
        gap: 0.5rem !important; /* Zwiększone z 0.25rem */
        justify-content: center !important; /* Center buttons on second row */
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    .pagination-buttons .btn,
    .pagination-buttons button {
        padding: 0.5rem 0.75rem !important; /* Zwiększone z 0.4rem 0.6rem */
        font-size: 0.85rem !important; /* Zwiększone z 0.8rem */
        min-width: 44px !important; /* WCAG touch target - zwiększone z 36px */
        min-height: 44px !important; /* WCAG touch target - zwiększone z 36px */
        flex: 0 0 auto; /* Nie rozciągaj przycisków */
    }
}

/* =================================================================
   LOADING SPINNER
   Rotating circle animation for loading states
   ================================================================= */

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);  /* Light gray ring */
    border-radius: 50%;  /* Circle shape */
    border-top-color: #007bff;  /* Blue segment */
    animation: spin 1s ease-in-out infinite;  /* Continuous rotation */
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Button loading state - spinner overlay */
.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;  /* Inherit button text color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* =================================================================
   LAYOUT UTILITIES
   Flexbox and spacing helpers
   ================================================================= */

/* Flexbox display */
.d-flex {
    display: flex !important;
}

/* Allow flex items to wrap */
.flex-wrap {
    flex-wrap: wrap !important;
}

/* Gap utilities */
.gap-10 {
    gap: 10px !important;
}

.gap-15 {
    gap: 15px !important;
}

/* Margin utilities */
.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

/* Width utilities */
.w-auto {
    width: auto !important;
}

.w-200 {
    width: 200px !important;
}

/* =================================================================
   POSITION UTILITIES
   Positioning and spacing helpers
   ================================================================= */

/* Fixed positioning */
.position-fixed {
    position: fixed !important;
}

/* Top edge */
.top-0 {
    top: 0 !important;
}

/* Right edge (end in RTL-friendly naming) */
.end-0 {
    right: 0 !important;
}

/* Padding */
/* Padding */
.p-3 {
    padding: 1rem !important;
}

/* =================================================================
   Z-INDEX UTILITIES
   Layering control for stacked elements
   ================================================================= */

.z-1055 {
    z-index: 1055 !important;  /* Above modals */
}

/* =================================================================
   CONSOLE AND TERMINAL STYLING
   Monospace output displays with green-on-black theme
   ================================================================= */

.console-output {
    background: #000 !important;  /* Black background */
    color: #0f0 !important;  /* Green text (classic terminal) */
    padding: 15px !important;
    font-family: monospace !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    border-radius: 4px;
    border: 1px solid #333;
}

/* Custom scrollbar for console */
.console-output::-webkit-scrollbar {
    width: 8px;
}

.console-output::-webkit-scrollbar-track {
    background: #222;  /* Dark track */
}

.console-output::-webkit-scrollbar-thumb {
    background: #0f0;  /* Green thumb */
    border-radius: 4px;
}

.console-output::-webkit-scrollbar-thumb:hover {
    background: #0c0;  /* Brighter green on hover */
}

/* =================================================================
   BUTTON GROUP UTILITIES
   Horizontal button toolbars with spacing
   ================================================================= */

.button-group {
    display: flex;
    gap: 10px;  /* Space between buttons */
    flex-wrap: wrap;  /* Allow wrapping */
    margin-top: 15px;
}

/* Reset button margins in groups */
.button-group .btn {
    margin-right: 0;
    margin-bottom: 0;
}

/* =================================================================
   FORM UTILITIES
   Width controls for form elements
   ================================================================= */

/* Auto-width form controls */
.form-control-auto {
    width: auto !important;
}

/* Fixed-width form controls */
.form-control-200 {
    width: 200px !important;
}

/* =================================================================
   ACCESSIBILITY IMPROVEMENTS
   Screen reader only content
   ================================================================= */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;  /* Hide visually */
    white-space: nowrap !important;
    border: 0 !important;
}

/* =================================================================
   ALERT CONTAINER
   Fixed positioning for notification display
   ================================================================= */

.alert-container {
    position: fixed;
    top: 0;
    right: 0;
    padding: 1rem;
    z-index: 1055;  /* Above modals */
    pointer-events: none;  /* Don't block clicks except on alerts */
}

/* Individual alerts in container */
.alert-container .alert {
    pointer-events: all;  /* Alerts are clickable */
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* =================================================================
   RESPONSIVE UTILITIES
   Mobile and tablet adjustments
   ================================================================= */

/* =================================================================
    ICON SIZING HELPERS
    Shared sizes for inline SVG icons (currentColor)
    ================================================================= */

.icon { width: 1.25rem; height: 1.25rem; display: inline-block; }
.icon-20 { width: 20px; height: 20px; display: inline-block; }
.icon-24 { width: 24px; height: 24px; display: inline-block; }

/* Tablet and below */
@media (max-width: 768px) {
    /* Stack button groups vertically */
    .button-group {
        flex-direction: column;
    }
    
    /* Full-width buttons in groups */
    .button-group .btn {
        width: 100%;
    }
    
    /* Full-width form controls */
    .form-control-200 {
        width: 100% !important;
    }
}

/* Mobile only */
@media (max-width: 480px) {
    /* Reduce gap sizes on small screens */
    .gap-10 {
        gap: 5px !important;
    }
    
    .gap-15 {
        gap: 8px !important;
    }
    
    /* Reduce margin sizes */
    .mt-15 {
        margin-top: 10px !important;
    }
}