/* WorkBoard - Main Application Styles */

/* ==========================================================================
   1. Global Styles
   ========================================================================== */

:root {
    --wb-primary: #594ae2;
    --wb-secondary: #1e88e5;
    --wb-success: #00c853;
    --wb-warning: #ff6d00;
    --wb-error: #d32f2f;
    --wb-info: #0288d1;
    --wb-spacing-xs: 4px;
    --wb-spacing-sm: 4px;
    --wb-spacing-md: 6px;
    --wb-spacing-lg: 6px;
    --wb-spacing-xl: 6px;
    --wb-border-radius: 4px;
}

* {
    box-sizing: border-box;
}

html, body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ==========================================================================
   2. Layout Utilities
   ========================================================================== */

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-center {
    align-items: center !important;
}

.align-end {
    align-items: flex-end !important;
}

.align-baseline {
    align-items: baseline !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

/* ==========================================================================
   3. Spacing Utilities
   ========================================================================== */

/* Margin */
.ma-0 { margin: 0 !important; }
.ma-1 { margin: var(--wb-spacing-xs) !important; }
.ma-2 { margin: var(--wb-spacing-sm) !important; }
.ma-3 { margin: var(--wb-spacing-md) !important; }
.ma-4 { margin: var(--wb-spacing-lg) !important; }
.ma-5 { margin: var(--wb-spacing-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--wb-spacing-xs) !important; }
.mt-2 { margin-top: var(--wb-spacing-sm) !important; }
.mt-3 { margin-top: var(--wb-spacing-md) !important; }
.mt-4 { margin-top: var(--wb-spacing-lg) !important; }
.mt-5 { margin-top: var(--wb-spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--wb-spacing-xs) !important; }
.mb-2 { margin-bottom: var(--wb-spacing-sm) !important; }
.mb-3 { margin-bottom: var(--wb-spacing-md) !important; }
.mb-4 { margin-bottom: var(--wb-spacing-lg) !important; }
.mb-5 { margin-bottom: var(--wb-spacing-xl) !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--wb-spacing-xs) !important; }
.ml-2 { margin-left: var(--wb-spacing-sm) !important; }
.ml-3 { margin-left: var(--wb-spacing-md) !important; }
.ml-4 { margin-left: var(--wb-spacing-lg) !important; }
.ml-5 { margin-left: var(--wb-spacing-xl) !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--wb-spacing-xs) !important; }
.mr-2 { margin-right: var(--wb-spacing-sm) !important; }
.mr-3 { margin-right: var(--wb-spacing-md) !important; }
.mr-4 { margin-right: var(--wb-spacing-lg) !important; }
.mr-5 { margin-right: var(--wb-spacing-xl) !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--wb-spacing-xs) !important; margin-right: var(--wb-spacing-xs) !important; }
.mx-2 { margin-left: var(--wb-spacing-sm) !important; margin-right: var(--wb-spacing-sm) !important; }
.mx-3 { margin-left: var(--wb-spacing-md) !important; margin-right: var(--wb-spacing-md) !important; }
.mx-4 { margin-left: var(--wb-spacing-lg) !important; margin-right: var(--wb-spacing-lg) !important; }
.mx-5 { margin-left: var(--wb-spacing-xl) !important; margin-right: var(--wb-spacing-xl) !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--wb-spacing-xs) !important; margin-bottom: var(--wb-spacing-xs) !important; }
.my-2 { margin-top: var(--wb-spacing-sm) !important; margin-bottom: var(--wb-spacing-sm) !important; }
.my-3 { margin-top: var(--wb-spacing-md) !important; margin-bottom: var(--wb-spacing-md) !important; }
.my-4 { margin-top: var(--wb-spacing-lg) !important; margin-bottom: var(--wb-spacing-lg) !important; }
.my-5 { margin-top: var(--wb-spacing-xl) !important; margin-bottom: var(--wb-spacing-xl) !important; }

/* Padding */
.pa-0 { padding: 0 !important; }
.pa-1 { padding: var(--wb-spacing-xs) !important; }
.pa-2 { padding: var(--wb-spacing-sm) !important; }
.pa-3 { padding: var(--wb-spacing-md) !important; }
.pa-4 { padding: var(--wb-spacing-lg) !important; }
.pa-5 { padding: var(--wb-spacing-xl) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--wb-spacing-xs) !important; }
.pt-2 { padding-top: var(--wb-spacing-sm) !important; }
.pt-3 { padding-top: var(--wb-spacing-md) !important; }
.pt-4 { padding-top: var(--wb-spacing-lg) !important; }
.pt-5 { padding-top: var(--wb-spacing-xl) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--wb-spacing-xs) !important; }
.pb-2 { padding-bottom: var(--wb-spacing-sm) !important; }
.pb-3 { padding-bottom: var(--wb-spacing-md) !important; }
.pb-4 { padding-bottom: var(--wb-spacing-lg) !important; }
.pb-5 { padding-bottom: var(--wb-spacing-xl) !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--wb-spacing-xs) !important; }
.pl-2 { padding-left: var(--wb-spacing-sm) !important; }
.pl-3 { padding-left: var(--wb-spacing-md) !important; }
.pl-4 { padding-left: var(--wb-spacing-lg) !important; }
.pl-5 { padding-left: var(--wb-spacing-xl) !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--wb-spacing-xs) !important; }
.pr-2 { padding-right: var(--wb-spacing-sm) !important; }
.pr-3 { padding-right: var(--wb-spacing-md) !important; }
.pr-4 { padding-right: var(--wb-spacing-lg) !important; }
.pr-5 { padding-right: var(--wb-spacing-xl) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--wb-spacing-xs) !important; padding-right: var(--wb-spacing-xs) !important; }
.px-2 { padding-left: var(--wb-spacing-sm) !important; padding-right: var(--wb-spacing-sm) !important; }
.px-3 { padding-left: var(--wb-spacing-md) !important; padding-right: var(--wb-spacing-md) !important; }
.px-4 { padding-left: var(--wb-spacing-lg) !important; padding-right: var(--wb-spacing-lg) !important; }
.px-5 { padding-left: var(--wb-spacing-xl) !important; padding-right: var(--wb-spacing-xl) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--wb-spacing-xs) !important; padding-bottom: var(--wb-spacing-xs) !important; }
.py-2 { padding-top: var(--wb-spacing-sm) !important; padding-bottom: var(--wb-spacing-sm) !important; }
.py-3 { padding-top: var(--wb-spacing-md) !important; padding-bottom: var(--wb-spacing-md) !important; }
.py-4 { padding-top: var(--wb-spacing-lg) !important; padding-bottom: var(--wb-spacing-lg) !important; }
.py-5 { padding-top: var(--wb-spacing-xl) !important; padding-bottom: var(--wb-spacing-xl) !important; }

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--wb-spacing-xs) !important; }
.gap-2 { gap: var(--wb-spacing-sm) !important; }
.gap-3 { gap: var(--wb-spacing-md) !important; }
.gap-4 { gap: var(--wb-spacing-lg) !important; }
.gap-5 { gap: var(--wb-spacing-xl) !important; }

/* ==========================================================================
   4. Text Utilities
   ========================================================================== */

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-medium { font-weight: 500 !important; }
.font-weight-bold { font-weight: 700 !important; }

.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   5. Display Utilities
   ========================================================================== */

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

/* ==========================================================================
   6. Border Utilities
   ========================================================================== */

.rounded { border-radius: var(--wb-border-radius) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-sm { border-radius: 2px !important; }
.rounded-lg { border-radius: 8px !important; }
.rounded-xl { border-radius: 16px !important; }
.rounded-circle { border-radius: 50% !important; }

/* ==========================================================================
   7. Width & Height Utilities
   ========================================================================== */

.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

.min-vh-100 { min-height: 100vh !important; }

/* ==========================================================================
   8. Position Utilities
   ========================================================================== */

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* ==========================================================================
   9. Overflow Utilities
   ========================================================================== */

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

/* ==========================================================================
   10. Shadow Utilities
   ========================================================================== */

.elevation-0 { box-shadow: none !important; }
.elevation-1 { box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
.elevation-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16) !important; }
.elevation-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19) !important; }
.elevation-4 { box-shadow: 0 14px 28px rgba(0,0,0,0.25) !important; }
.elevation-5 { box-shadow: 0 19px 38px rgba(0,0,0,0.30) !important; }

/* ==========================================================================
   11. Cursor Utilities
   ========================================================================== */

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ==========================================================================
   12. Visibility Utilities
   ========================================================================== */

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ==========================================================================
   13. WorkBoard Specific Components
   ========================================================================== */

/* Login Page - Full Screen Layout */
.wb-login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--wb-primary) 0%, var(--wb-secondary) 100%);
}

.wb-login-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-login-footer {
    padding: 16px;
    opacity: 0.7;
    color: white !important;
}

/* Dashboard Cards */
.wb-stat-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.wb-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Task Status Colors */
.wb-status-todo { color: var(--wb-info); }
.wb-status-inprogress { color: var(--wb-warning); }
.wb-status-done { color: var(--wb-success); }
.wb-status-cancelled { color: var(--wb-error); }

/* Priority Colors */
.wb-priority-low { color: #757575; }
.wb-priority-medium { color: var(--wb-info); }
.wb-priority-high { color: var(--wb-warning); }
.wb-priority-critical { color: var(--wb-error); }

/* Table Styles */
.wb-table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

/* Card Actions */
.wb-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--wb-spacing-sm);
    padding: var(--wb-spacing-md);
}

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

/* Custom Scrollbar */
.wb-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.wb-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.wb-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.wb-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ==========================================================================
   14. Adaptive Grid Container
   ========================================================================== */

.wb-grid-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wb-grid-filters {
    flex-shrink: 0;
}

.wb-grid-content {
    flex: 1;
    min-height: 0;
}

.wb-grid-pagination {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}

/* ==========================================================================
   15. MudDataGrid Pagination Fix
   ========================================================================== */

/* Ensure ALL pagination elements are readable in MudDataGrid */

/* 1. Caption text ("Rows per page:", "1-25 of 100") */
.mud-table-pagination .mud-table-pagination-caption {
    color: var(--mud-palette-text-primary) !important;
}

/* 2. Page size MudSelect - input text and label */
.mud-table-pagination .mud-table-pagination-select,
.mud-table-pagination .mud-table-pagination-select .mud-input-slot,
.mud-table-pagination .mud-table-pagination-select input,
.mud-table-pagination .mud-table-pagination-select .mud-select-input {
    color: var(--mud-palette-text-primary) !important;
}

/* 3. Navigation icon buttons and their SVG icons */
.mud-table-pagination .mud-table-pagination-actions .mud-icon-button {
    color: var(--mud-palette-text-primary) !important;
}

/* 4. Toolbar itself - ensure proper text color inheritance */
.mud-table-pagination .mud-table-pagination-toolbar {
    color: var(--mud-palette-text-primary) !important;
}

/* 5. Fallback for dark mode when CSS variables not yet available */
.mud-theme-dark .mud-table-pagination .mud-table-pagination-toolbar,
.mud-theme-dark .mud-table-pagination .mud-table-pagination-caption,
.mud-theme-dark .mud-table-pagination .mud-table-pagination-select input {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* ==========================================================================
   16. MudBlazor Container Gutters Override
   ========================================================================== */

@media (min-width: 600px) {
    .mud-container--gutters {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ==========================================================================
   17. Responsive Utilities
   ========================================================================== */

@media (max-width: 599px) {
    .hidden-xs { display: none !important; }
}

@media (min-width: 600px) and (max-width: 959px) {
    .hidden-sm { display: none !important; }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .hidden-md { display: none !important; }
}

@media (min-width: 1280px) and (max-width: 1919px) {
    .hidden-lg { display: none !important; }
}

@media (min-width: 1920px) {
    .hidden-xl { display: none !important; }
}

/* ==========================================================================
   17. Animation Utilities
   ========================================================================== */

.wb-fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.wb-slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   18. Animations Control
   ========================================================================== */

/* Disable all animations when user preferences set to false */
body.no-animations *,
body.no-animations *::before,
body.no-animations *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

/* Allow instant transitions for critical UI feedback */
body.no-animations .mud-ripple {
    animation: none !important;
}

/* ==========================================================================
   19. Print Styles
   ========================================================================== */

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

    .wb-print-break-after {
        page-break-after: always;
    }

    .wb-print-break-before {
        page-break-before: always;
    }
}