/* ========================================================================
   Clippy's Lawn - Portal Interior Styles
   Shared across Admin, Employee, and Customer authenticated pages.
   Targets MudBlazor component classes globally for consistent refinement.
   ======================================================================== */

/* ----------------------------------------
   CSS Custom Properties
   ---------------------------------------- */
:root {
    --cl-green: #1B4D3E;
    --cl-green-light: #2D6A4F;
    --cl-green-pale: rgba(27, 77, 62, 0.07);
    --cl-magenta: #D6336C;
    --cl-magenta-dark: #A61E4D;
    --cl-magenta-pale: rgba(214, 51, 108, 0.06);
    --cl-magenta-glow: rgba(214, 51, 108, 0.12);
    --cl-cream: #F5F0E8;
    --cl-warm-white: #FDFBF7;
    --cl-text: #1A1A1A;
    --cl-text-muted: #6B6B6B;
    --cl-border: #E8E5E0;
    --cl-border-hover: #D4CFC6;
    --cl-shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.04), 0 1px 2px rgba(26, 26, 26, 0.02);
    --cl-shadow-md: 0 4px 12px rgba(26, 26, 26, 0.06), 0 1px 4px rgba(26, 26, 26, 0.03);
    --cl-shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.08), 0 2px 8px rgba(26, 26, 26, 0.04);
    --cl-radius-sm: 8px;
    --cl-radius-md: 12px;
    --cl-radius-lg: 16px;
    --cl-radius-xl: 20px;
    --cl-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------
   Global MudPaper / MudCard Refinement
   ---------------------------------------- */
.main-content-area .mud-paper {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg) !important;
    box-shadow: var(--cl-shadow-sm);
    transition: box-shadow var(--cl-transition), border-color var(--cl-transition);
}

.main-content-area .mud-paper:hover {
    box-shadow: var(--cl-shadow-md);
}

.main-content-area .mud-card {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg) !important;
    box-shadow: var(--cl-shadow-sm);
    overflow: hidden;
}

/* ----------------------------------------
   MudTable Styling
   ---------------------------------------- */

/* Table container */
.main-content-area .mud-table {
    border-radius: var(--cl-radius-md) !important;
    overflow: hidden;
}

/* Table header */
.main-content-area .mud-table .mud-table-head {
    background: linear-gradient(180deg, var(--cl-warm-white) 0%, #F8F5EF 100%);
}

.main-content-area .mud-table .mud-table-head .mud-table-cell {
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cl-text-muted);
    border-bottom: 2px solid var(--cl-border);
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Table body rows */
.main-content-area .mud-table .mud-table-body .mud-table-row {
    transition: background-color var(--cl-transition);
}

.main-content-area .mud-table .mud-table-body .mud-table-row:hover {
    background-color: var(--cl-magenta-pale) !important;
}

.main-content-area .mud-table .mud-table-body .mud-table-cell {
    font-size: 0.875rem;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom-color: var(--cl-border);
}

/* Clickable rows */
.main-content-area .mud-table .mud-table-body .mud-table-row[style*="cursor"] {
    cursor: pointer;
}

/* Table pager */
.main-content-area .mud-table .mud-table-pagination {
    border-top: 1px solid var(--cl-border);
    background: var(--cl-warm-white);
}

/* Sort label styling */
.main-content-area .mud-table-sort-label {
    font-weight: 700 !important;
}

/* ----------------------------------------
   MudChip Refinements
   ---------------------------------------- */
.main-content-area .mud-chip {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    border-radius: var(--cl-radius-sm) !important;
}

/* Chip set filters */
.main-content-area .mud-chipset .mud-chip {
    transition: all var(--cl-transition);
}

.main-content-area .mud-chipset .mud-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--cl-shadow-sm);
}

/* ----------------------------------------
   MudButton Refinements
   ---------------------------------------- */
.main-content-area .mud-button-root {
    border-radius: var(--cl-radius-sm) !important;
    text-transform: none;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: all var(--cl-transition);
}

.main-content-area .mud-button-filled {
    box-shadow: var(--cl-shadow-sm);
}

.main-content-area .mud-button-filled:hover {
    box-shadow: var(--cl-shadow-md);
    transform: translateY(-1px);
}

.main-content-area .mud-button-outlined {
    border-width: 1.5px;
}

.main-content-area .mud-button-outlined:hover {
    border-color: var(--cl-magenta);
    color: var(--cl-magenta);
    background-color: var(--cl-magenta-pale);
}

/* Icon buttons */
.main-content-area .mud-icon-button {
    transition: all var(--cl-transition);
}

.main-content-area .mud-icon-button:hover {
    background-color: var(--cl-magenta-pale) !important;
    color: var(--cl-magenta) !important;
}

/* ----------------------------------------
   MudTextField / Form Input Refinements
   ---------------------------------------- */
.main-content-area .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--cl-radius-sm);
    border-color: var(--cl-border);
    transition: border-color var(--cl-transition), box-shadow var(--cl-transition);
}

.main-content-area .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--cl-border-hover);
}

.main-content-area .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    box-shadow: 0 0 0 3px rgba(214, 51, 108, 0.1);
}

/* Select / dropdown inputs */
.main-content-area .mud-select .mud-input-outlined-border {
    border-radius: var(--cl-radius-sm);
}

/* ----------------------------------------
   MudBreadcrumbs Styling
   ---------------------------------------- */
.main-content-area .mud-breadcrumbs {
    padding: 0;
}

.main-content-area .mud-breadcrumbs li {
    font-size: 0.8125rem;
    color: var(--cl-text-muted);
}

.main-content-area .mud-breadcrumbs li a {
    color: var(--cl-green);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--cl-transition);
}

.main-content-area .mud-breadcrumbs li a:hover {
    color: var(--cl-magenta);
}

/* ----------------------------------------
   MudAlert Styling
   ---------------------------------------- */
.main-content-area .mud-alert {
    border-radius: var(--cl-radius-md) !important;
    font-size: 0.875rem;
}

/* ----------------------------------------
   MudSwitch Styling
   ---------------------------------------- */
.main-content-area .mud-switch .mud-button-root {
    border-radius: 50% !important;
}

/* ----------------------------------------
   MudSkeleton Styling
   ---------------------------------------- */
.main-content-area .mud-skeleton {
    border-radius: var(--cl-radius-md) !important;
    background: linear-gradient(90deg, #EDE9E1 0%, #F5F0E8 50%, #EDE9E1 100%);
    background-size: 200% 100%;
    animation: cl-skeleton-shimmer 1.8s ease-in-out infinite;
}

@keyframes cl-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------
   MudDialog Styling
   ---------------------------------------- */
.mud-dialog {
    border-radius: var(--cl-radius-xl) !important;
    overflow: hidden;
}

.mud-dialog .mud-dialog-title {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    padding: 20px 24px 12px;
}

.mud-dialog .mud-dialog-content {
    padding: 12px 24px 20px;
}

.mud-dialog .mud-dialog-actions {
    padding: 12px 24px 20px;
}

/* ----------------------------------------
   MudDrawer Styling (mobile nav)
   ---------------------------------------- */
.mobile-nav-drawer .mud-drawer-header {
    border-bottom: 1px solid var(--cl-border);
}

/* ----------------------------------------
   Page Header Pattern
   A subtle accent strip at page header level.
   ---------------------------------------- */
.main-content-area .mud-container > .mud-typography-h4:first-child,
.main-content-area .mud-container > .mb-4:first-child > .mud-typography-h4:first-child,
.main-content-area .mud-container > div:first-child > .mud-typography-h4 {
    position: relative;
    padding-bottom: 12px;
}

.main-content-area .mud-container > .mud-typography-h4:first-child::after,
.main-content-area .mud-container > .mb-4:first-child > .mud-typography-h4:first-child::after,
.main-content-area .mud-container > div:first-child > .mud-typography-h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--cl-magenta) 0%, var(--cl-magenta-dark) 100%);
    border-radius: 2px;
}

/* ----------------------------------------
   Stat / Metric Values
   Large numbers in stat cards get visual emphasis.
   ---------------------------------------- */
.main-content-area .text-center > .mud-typography-h4 {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* ----------------------------------------
   MudGrid Spacing Harmony
   ---------------------------------------- */
.main-content-area .mud-grid {
    margin-top: 0;
}

/* ----------------------------------------
   MudAvatar Refinements
   ---------------------------------------- */
.main-content-area .mud-avatar {
    font-weight: 700;
}

/* ----------------------------------------
   MudSnackbar Refinements
   ---------------------------------------- */
.mud-snackbar {
    border-radius: var(--cl-radius-md) !important;
    box-shadow: var(--cl-shadow-lg) !important;
}

/* ----------------------------------------
   Scrollbar Styling (Webkit)
   ---------------------------------------- */
.main-content-area ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.main-content-area ::-webkit-scrollbar-track {
    background: transparent;
}

.main-content-area ::-webkit-scrollbar-thumb {
    background-color: rgba(26, 26, 26, 0.15);
    border-radius: 3px;
}

.main-content-area ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(26, 26, 26, 0.25);
}

/* ----------------------------------------
   Focus Visible (Accessibility)
   ---------------------------------------- */
.main-content-area *:focus-visible {
    outline: 2px solid var(--cl-magenta);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ----------------------------------------
   Selection Color
   ---------------------------------------- */
.main-content-area ::selection {
    background-color: rgba(214, 51, 108, 0.15);
    color: var(--cl-text);
}

/* ----------------------------------------
   Subtle entrance animation for page content
   ---------------------------------------- */
.main-content-area > .mud-container {
    animation: cl-page-enter 350ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes cl-page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   MudList refinements
   ---------------------------------------- */
.main-content-area .mud-list-item {
    border-radius: var(--cl-radius-sm);
    transition: background-color var(--cl-transition);
}

.main-content-area .mud-list-item:hover {
    background-color: var(--cl-magenta-pale) !important;
}

/* ----------------------------------------
   MudTabs Styling
   ---------------------------------------- */
.main-content-area .mud-tabs .mud-tab {
    text-transform: none;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: -0.005em;
}

/* ----------------------------------------
   Detail Page Section Headers
   ---------------------------------------- */
.main-content-area .mud-typography-h6 {
    position: relative;
    font-weight: 700;
}

/* ----------------------------------------
   Empty State Styling
   ---------------------------------------- */
.main-content-area .mud-table .mud-table-body .mud-alert {
    margin: 24px;
    border-radius: var(--cl-radius-md) !important;
}

/* ----------------------------------------
   Mobile Refinements
   ---------------------------------------- */
@media (max-width: 600px) {
    .main-content-area .mud-paper {
        border-radius: var(--cl-radius-md) !important;
    }

    .main-content-area .mud-table .mud-table-head .mud-table-cell {
        font-size: 0.625rem;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .main-content-area .mud-table .mud-table-body .mud-table-cell {
        font-size: 0.8125rem;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .mud-dialog {
        border-radius: var(--cl-radius-lg) !important;
        margin: 12px !important;
    }
}

/* ----------------------------------------
   Print: disable portal-specific decoration
   ---------------------------------------- */
@media print {
    .main-content-area .mud-paper {
        border: none;
        box-shadow: none;
    }

    .main-content-area > .mud-container {
        animation: none;
    }

    .main-content-area .mud-container > .mud-typography-h4:first-child::after,
    .main-content-area .mud-container > .mb-4:first-child > .mud-typography-h4:first-child::after,
    .main-content-area .mud-container > div:first-child > .mud-typography-h4::after {
        display: none;
    }
}