/* ===================================
   Site-Specific Styles
   Using Integrity Design System
   =================================== */

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-primary-blue);
    background-color: var(--color-gray-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Ensure MudBlazor navigation text is visible */
.mud-nav-group .mud-nav-group-text,
.mud-nav-link .mud-nav-link-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix for navigation group text display */
.mud-nav-group-header {
    display: flex !important;
    align-items: center !important;
}

.mud-nav-group-header .mud-button-label {
    display: block !important;
}

/* Navigation layout fix - tooltip containers block, but preserve icon-text layout */
.mud-nav-menu .mud-tooltip,
.mud-nav-group .mud-collapse-container .mud-tooltip,
.mud-nav-group .mud-collapse .mud-tooltip,
.mud-nav-group .mud-list .mud-tooltip {
    display: block !important;
    width: 100% !important;
}

/* Navigation links use flex to keep icon and text side-by-side */
.mud-nav-menu .mud-nav-link,
.mud-nav-group .mud-nav-link {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
}

/* Ensure icons and text components stay inline within links */
.mud-nav-link .mud-nav-link-icon,
.mud-nav-link .mud-nav-link-text {
    display: inline-flex !important;
}

/* Force tooltip wrappers to be block */
.mud-tooltip-inline {
    display: block !important;
    width: 100% !important;
}

/* ===================================
   Custom Component Styles
   =================================== */

/* Brand Tagline */
.brand-tagline {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--color-secondary-gray);
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Page Headers with Gradient Underline */
.page-header {
    position: relative;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary-orange) 0%, var(--color-secondary-blue) 100%);
    border-radius: 2px;
}

/* Menu Configuration Styles */
.sortable-item {
    cursor: move;
    transition: all 0.3s ease;
}

.sortable-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.sortable-item.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

/* Menu Placement Styles - DISABLED TO PREVENT DRAWER CONFLICTS */
/*
body.menu-left .mud-drawer-left {
    left: 0;
}

body.menu-right .mud-drawer-left {
    left: auto;
    right: 0;
}

body.menu-top .mud-drawer-left {
    display: none;
}
*/

body.menu-top .mud-appbar {
    height: auto;
    min-height: 64px;
}

body.menu-top .mud-main-content {
    margin-left: 0 !important;
    margin-top: 120px;
}

/* Global padding reduction - reduce excessive top padding on all pages */
/* Use ultra-high specificity to override everything */
/* Exclude Employee Dashboard which handles its own spacing */
html body .mud-layout .mud-main-content:not(:has(.employee-dashboard-v2-wrapper)),
html body .mud-main-content:not(:has(.employee-dashboard-v2-wrapper)),
.mud-main-content:not(:has(.employee-dashboard-v2-wrapper)) {
    padding-top: 18px !important;  /* Default padding for most pages */
}

/* Payroll Setup pages - no top padding needed */
.mud-main-content:has(.payroll-setup-page) {
    padding-top: 0 !important;
}

/* Main Dashboard - additional 50px padding */
/* Use multiple selectors for maximum specificity */
.mud-main-content:has(.main-dashboard-wrapper) {
    padding-top: 68px !important;  /* 18px base + 50px additional */
}

html body div.main-dashboard-wrapper,
html body .main-dashboard-wrapper,
div.main-dashboard-wrapper,
.main-dashboard-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Also reduce MudContainer padding on main dashboard */
.main-dashboard-wrapper .mud-container,
.main-dashboard-wrapper .mud-container-maxwidth-xl {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Menu Collapsed Styles - DISABLED TO PREVENT DRAWER CONFLICTS */
/*
body.menu-collapsed .mud-drawer-left {
    width: 56px !important;
}

body.menu-collapsed .mud-nav-link-text,
body.menu-collapsed .mud-nav-group-text {
    display: none !important;
}

body.menu-collapsed .mud-main-content {
    margin-left: 56px !important;
}
*/

/* Top Navigation Styles */
.top-nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.top-nav-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--mud-palette-background);
}

.top-nav-item {
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.top-nav-item:hover {
    background: var(--mud-palette-action-hover);
}

/* Responsive menu adjustments - DISABLED TO PREVENT DRAWER CONFLICTS */
/*
@media (max-width: 768px) {
    body.menu-left .mud-drawer-left,
    body.menu-right .mud-drawer-left {
        transform: translateX(-100%);
    }
    
    body.menu-left .mud-drawer-left.mud-drawer-open,
    body.menu-right .mud-drawer-left.mud-drawer-open {
        transform: translateX(0);
    }
    
    body.menu-top .mud-main-content {
        margin-top: 160px;
    }
}
*/

/* ===================================
   Neo-Dialog Unified Style System
   Wider rounded containers, clean titles,
   dense fields, soft status rows
   =================================== */

.neo-dialog .mud-dialog {
    max-width: 980px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.neo-dialog .mud-dialog-title {
    padding: 18px 24px !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.neo-content {
    padding: 20px 24px 8px 24px !important;
    max-height: calc(100vh - 220px) !important;
    overflow: auto !important;
    background: #fff !important;
}

.neo-actions {
    padding: 14px 24px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(249, 249, 250, 0.5) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.neo-dense .mud-input-control {
    margin-bottom: 12px;
}

.neo-dense .mud-form-control {
    margin-bottom: 12px;
}

.neo-section {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 8px;
    margin-top: 16px;
    color: var(--mud-palette-text-primary);
}

.neo-section:first-child {
    margin-top: 0;
}

.neo-status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f6f7f9;
    margin-bottom: 12px;
}

.v-divider {
    min-height: 100%;
    margin: 0 16px;
}

/* Neo-Dialog button styles */
.neo-actions .mud-button-outlined {
    border-width: 1.5px;
}

.neo-actions .mud-button + .mud-button {
    margin-left: 8px;
}

/* Ensure proper responsive behavior */
@media (max-width: 600px) {
    .neo-dialog .mud-dialog {
        max-width: 100%;
        width: 100%;
        margin: 8px;
    }
    
    .neo-content {
        padding: 16px;
    }
}