/* ============================================
   INTERNAL UI MODERNIZATION - REUSABLE STYLES
   ============================================

   This stylesheet contains reusable CSS patterns for
   modernized internal application views including:
   - Card grid layouts
   - Navigation tabs
   - Clickable components
   - Status indicators
   - Subtle background texture

   Created: 2026-01-04
   ============================================ */


/* ============================================
   BACKGROUND - Subtle Grid Pattern
   ============================================ */

/* Apply subtle grid texture to main content wrapper for professional "working document" feel */
.wrap {
    background-color: #f8fafc;
    background-image:
        linear-gradient(rgba(226, 232, 240, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 232, 240, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    min-height: 100vh;
}


/* ============================================
   CARD COMPONENTS
   ============================================ */

/* Dashed border for create/empty state cards */
.border-dashed {
    border: 2px dashed #dee2e6 !important;
}

/* Hover effect for create/action cards with dashed borders */
.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-color: var(--bs-primary) !important;
    transition: all 0.3s ease;
}

/* Clickable card base styles */
.card:not(.border-dashed) {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Clickable card hover effects - lift and shadow */
.card:not(.border-dashed):hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Hover shadow effect for business cards */
.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

/* Ensure buttons remain clickable above Bootstrap stretched links */
.btn-group {
    z-index: 10 !important;
}

/* Ensure dropdown menus appear above cards below them */
.btn-group .dropdown-menu {
    z-index: 1050 !important;
}

/* Ensure card with open dropdown appears above other cards */
.card:has(.dropdown-menu.show) {
    z-index: 100 !important;
    position: relative;
}


/* ============================================
   STATUS INDICATORS - Color-coded borders
   ============================================ */

/* Danger state - red left border (expired, overdue, critical) */
.border-danger {
    border-left-color: #dc3545 !important;
}

/* Warning state - yellow left border (due soon, attention needed) */
.border-warning {
    border-left-color: #ffc107 !important;
}


/* ============================================
   TIMELINE COMPONENTS - Task Timeline View
   ============================================ */

/* Timeline container */
.timeline-container {
    position: relative;
}

/* Timeline section spacing */
.timeline-section {
    position: relative;
}

/* Timeline bar (vertical line on left) */
.timeline-bar {
    flex-shrink: 0;
}

/* Task card border emphasis */
.card.border-start.border-3 {
    border-left-width: 4px !important;
}

/* Task card hover effect in timeline */
.timeline-section .card.hover-shadow:hover {
    transform: translateX(4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Show More/Less link styling */
.task-desc-toggle {
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.task-desc-toggle:hover {
    text-decoration: underline;
}


/* ============================================
   FORM COMPONENTS
   ============================================ */

/* Auto-width select for inline dropdowns */
.select-auto {
    width: auto !important;
}

/* Clickable row/card body - explicit pointer cursor */
.clickable {
    cursor: pointer;
}


/* ============================================
   EXPANDABLE SECTIONS
   ============================================ */

/* Initially hidden expandable content */
.expandable-hidden {
    display: none;
}


/* ============================================
   FUTURE SECTIONS - Add as needed
   ============================================

   Examples:
   - NAVIGATION COMPONENTS
   - TABLE COMPONENTS
   - BADGE COMPONENTS
   - PROGRESS INDICATORS
   - TOOLTIPS (now in site.css global)

   ============================================ */