/**
 * Main Application Stylesheet - BEM NAMING CONVENTION
 * 
 * ============================================================================
 * FILE LOCATION: /includes/css/style.css
 * UPDATED: January 21, 2026 - Navbar stability + scoped improvements
 * ============================================================================
 * 
 * Main stylesheet for ToyBin application loaded on every page.
 * Now uses BEM (Block Element Modifier) naming convention.
 * 
 * BEM PATTERN: .block-name__element--modifier
 * 
 * @package ToyBin
 * @subpackage Styles
 * @version 2.0.1
 */

/* =============================================================================
   LAYOUT COMPONENTS
   ============================================================================= */

/**
 * Main Content Block
 * Primary content area of the page
 */
.main-content {
    min-height: calc(100vh - 200px);
    padding-top: 20px;
    padding-bottom: 40px;
}

/**
 * Container Block
 * Bootstrap container with additional spacing
 */
.container {
    padding-left: 15px;
    padding-right: 15px;
}

/* =============================================================================
   UTILITY CLASSES
   BEM doesn't typically use utility classes, but these are kept for
   Bootstrap compatibility and common use cases
   ============================================================================= */

/**
 * Text Utilities
 */
.text-truncate--2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate--3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/**
 * Spacing Utilities (Extended Bootstrap)
 */
.mt-6 { margin-top: 4rem; }
.mb-6 { margin-bottom: 4rem; }
.py-6 { padding-top: 4rem; padding-bottom: 4rem; }

/* =============================================================================
   FLASH MESSAGE COMPONENT
   Toast-style notifications displayed after actions
   ============================================================================= */

/**
 * Flash Messages Container
 * Fixed position container for notification messages
 */
.flash-messages {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1050;
    max-width: 400px;
}

/**
 * Flash Message Item
 * Individual notification message
 */
.flash-message {
    margin-bottom: 10px;
    animation: flash-slide-in 0.3s ease-out;
}

/**
 * Flash Message Variations
 */
.flash-message--success {
    /* Inherits Bootstrap .alert-success */
}

.flash-message--error {
    /* Inherits Bootstrap .alert-danger */
}

.flash-message--warning {
    /* Inherits Bootstrap .alert-warning */
}

.flash-message--info {
    /* Inherits Bootstrap .alert-info */
}

/**
 * Flash Message Animation
 */
@keyframes flash-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* =============================================================================
   CARD COMPONENT
   Enhanced card styling with hover effects
   ============================================================================= */

/**
 * Card Block
 * Base card with transitions
 */
.card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/**
 * Card Image
 * Standardized image sizing for card tops
 */
.card__image {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.card__image--small {
    height: 150px;
}

.card__image--large {
    height: 300px;
}

/**
 * Card Body
 */
.card__body {
    padding: 1.25rem;
}

/**
 * Card Title
 */
.card__title {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

/**
 * Card Text
 */
.card__text {
    color: #6c757d;
}

/**
 * Card Footer
 */
.card__footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

/* =============================================================================
   BUTTON COMPONENT
   Enhanced button interactions
   ============================================================================= */

/**
 * Button Block
 * Base button with transitions
 */
.button {
    transition: all 0.2s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}

/**
 * Button Variations
 */
.button--primary {
    /* Bootstrap .btn-primary */
}

.button--secondary {
    /* Bootstrap .btn-secondary */
}

.button--success {
    /* Bootstrap .btn-success */
}

.button--danger {
    /* Bootstrap .btn-danger */
}

.button--loading {
    position: relative;
    pointer-events: none;
}

.button--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: button-spin 0.6s linear infinite;
}

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

/* =============================================================================
   FORM COMPONENT
   Enhanced form controls and labels
   ============================================================================= */

/**
 * Form Control
 * Enhanced input styling
 */
.form__control {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form__control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/**
 * Form Label
 */
.form__label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form__label--required::after {
    content: ' *';
    color: #dc3545;
}

/**
 * Form Group
 */
.form__group {
    margin-bottom: 1rem;
}

/**
 * Form Help Text
 */
.form__help {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/**
 * Form Error Message
 */
.form__error {
    font-size: 0.875rem;
    color: #dc3545;
    margin-top: 0.25rem;
}

/* =============================================================================
   SPINNER COMPONENT
   Loading spinner animations
   ============================================================================= */

/**
 * Spinner Block
 * Rotating loading indicator
 */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/**
 * Spinner Variations
 */
.spinner--small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner--large {
    width: 60px;
    height: 60px;
    border-width: 6px;
}

/**
 * Spinner Colors
 */
.spinner--primary {
    border-top-color: #0d6efd;
}

.spinner--success {
    border-top-color: #28a745;
}

.spinner--danger {
    border-top-color: #dc3545;
}

/* =============================================================================
   LOADING OVERLAY COMPONENT
   Full-screen loading state
   ============================================================================= */

/**
 * Loading Overlay Block
 * Covers entire viewport during loading
 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/**
 * Loading Overlay Content
 */
.loading-overlay__spinner {
    /* Uses .spinner styles */
}

.loading-overlay__text {
    color: #ffffff;
    margin-top: 1rem;
    font-size: 1.125rem;
}

/* =============================================================================
   SKIP TO CONTENT COMPONENT
   Accessibility feature for keyboard navigation
   ============================================================================= */

/**
 * Skip to Content Link
 * Hidden until focused by keyboard navigation
 */
.skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1rem;
    background: #000;
    color: #fff;
    text-decoration: none;
}

.skip-to-content:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
}

/* =============================================================================
   TB NAVBAR STABILITY (SCOPED)
   - Only affects nav that includes the "tb-navbar" class.
   - Prevents logged-in user area “jumping/flicker” and cleans alignment.
   ============================================================================= */

.tb-navbar .tb-navbar__brand-icon {
    vertical-align: middle;
}

/* Keep right cluster stable and aligned */
.tb-navbar .tb-navbar__right {
    align-items: center;
    gap: 0.25rem;
}

/* Avoid reflow caused by avatar sizing; keep avatar stable */
.tb-navbar .tb-navbar__avatar {
    object-fit: cover;
    flex: 0 0 auto;
}

/* Reduce wrapping/jumping on the user toggle */
.tb-navbar .tb-navbar__user-toggle {
    white-space: nowrap;
}

/* Optional: caret spacing consistency */
.tb-navbar .dropdown-toggle::after {
    margin-left: 0.5rem;
}

/* =============================================================================
   FLASH MESSAGE SAFETY NEAR NAVBAR (SCOPED)
   - Keeps toasts from visually fighting the user menu area on narrow screens.
   ============================================================================= */

@media (max-width: 576px) {
    .flash-messages {
        top: 60px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* =============================================================================
   RESPONSIVE UTILITIES
   ============================================================================= */

/**
 * Mobile Optimizations
 */
@media (max-width: 576px) {
    .main-content {
        padding-top: 15px;
        padding-bottom: 30px;
    }
    
    .card__image {
        height: 150px;
    }
}

/**
 * Tablet Optimizations
 */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
    }
}

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

@media print {
    .navbar,
    footer,
    .button,
    .btn,
    .flash-messages {
        display: none !important;
    }
    
    .main-content {
        padding: 0;
        min-height: auto;
    }
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

/**
 * Focus Visible Enhancement
 * Improved keyboard navigation indicators
 */
*:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* =============================================================================
   BEM MIGRATION NOTES
   ============================================================================= 
   
   OLD CLASS NAME → NEW CLASS NAME
   
   Layout:
   .main-content → .main-content (no change - top-level layout)
   .container → .container (Bootstrap - kept as-is)
   
   Utilities:
   .text-truncate-2 → .text-truncate--2-lines
   .text-truncate-3 → .text-truncate--3-lines
   
   Flash Messages:
   .flash-messages → .flash-messages (container - no change)
   .flash-message → .flash-message (item - no change)
   
   Cards:
   .card → .card (Bootstrap - kept for compatibility)
   .card-img-top → .card__image
   [Add new]: .card__body, .card__title, .card__text, .card__footer
   
   Buttons:
   .btn → .button (or keep .btn for Bootstrap compatibility)
   
   Forms:
   .form-control → .form__control (or keep for Bootstrap)
   .form-label → .form__label (or keep for Bootstrap)
   [Add new]: .form__group, .form__help, .form__error
   
   Loading:
   .spinner → .spinner (no change)
   .loading-overlay → .loading-overlay (no change)
   
   Accessibility:
   .skip-to-content → .skip-to-content (no change)
   
   BOOTSTRAP COMPATIBILITY NOTE:
   Many classes are kept as-is (.btn, .form-control, etc.) because they're
   Bootstrap classes. For custom components, use full BEM naming. For
   Bootstrap components, you can keep the Bootstrap names or create BEM
   wrappers/modifiers.
   
   ============================================================================= */